I coded a website, and am currently in the process of re-coding it. On my contact page, I have a form for questions, comments, etc. On the original website, the page works fine - however on the recode, the form breaks the page. I was wondering if someone could help me figure out why.
Original page found here: http://path-to-truth.org/contact/
Recode found here: http://path-to-truth.org/Recode/contact/
ul#nav has a margin-right of 7% in your style.css file. When I remove that, it looks normal. The margin is added to the right of the navigation. Because that make the block too large for the header, it moves down. Because you have float:right on that element also, it is put to the right of the h1.
Another option would be to remove the float: right on the navigation and put float: left on the image (or the a tag). At the bottom of your div#header, insert (inside the div) a new div with clear: both to pull the header region down.
Related
I have an html file being served by Express, which also fetches data from an api. When I click a link in the navbar and switch routes (or the page is reloaded), the top navbar moves right, then left, and I can't figure out how to fix it.
If you look at the JSFiddle (link below), you'll notice that I have links to other pages, like /profile, /about, etc. Each time one of these pages loads, the navbar shifts (it's adjusting for the vertical scroll bar disappearing, then reappearing).
https://jsfiddle.net/h7bjyk63/5/
To mimic the api call, I added a setTimeout. To reproduce the issue and see what I'm talking about, you will probably need to run this code locally on your machine, and then refresh the page.
The strange thing is that this issue only occurs when there's some kind of delay (like an api call, or setTimeout). If I remove the delay and immediately load the content, everything works fine.
Some css code is commented out. The only key element I want to add later is position: fixed to fix the navbar to the top of the page.
How do I prevent the navbar from moving around?
The browser first renders the page without the scrollbar because it simply doesn't have to. Then you dynamically add few long paragraphs into the DOM, which makes the scrollbar to appear. This is what's causing your content 'shifting'.
The scrollbar is adding up to the width of your page. To prevent it from doing so, you need to do this:
html{
overflow-y: scroll;
}
I finally found something that worked, although I'm not 100% sure it's the correct way to do things. I just changed the width under the navbar--site-header class to 100vw instead of 100%.
DVN-Anakin's answer helped me understand the problem (and one possible solution), and this answer provided some additional good solutions.
This question is related (follows from) this question.
I am dynamically generating Word documents from data in a database. In the generation I need to have the First Page of a section have a different top margin than the other pages in the section. For reason that would take too long to explain properly, I can't just create a new section with a different top margin.
To get around my problem I thought I would create a shape (rectangle) with no border and no fill (invisible) that was the height I wanted my margin to be. I would then place it absolutely at (0,0). I would also make it wrapTopAndBottom so that it pushed the text in the body of the page down. This is working... except for one small problem.
As you can see there is a large, blank area immediately after my shape. There are actual blank lines there. You can see the lines better in this image where I've put text in those lines.
When I look at the header xml file in the Word archive, those lines don't exist. I'm not sure where they are coming from or how to get rid of them. I can manually remove them using Word but every time I regenerate the file they get put back in there. If someone knows why this is happening and / or how to get around it, I'd appreciate the help.
Thanks.
I finally figured this out.
Sorry I couldn't post code up here. First, I'm not using C#, I'm using PHP. Second, the amount of code I'd have to post to show how the header is getting created is prohibitive on a forum like this. Third, I'm not really allowed to post the company's code up here.
In any case, the problem was simple once I saw it. We are placing multiple absolutely positioned objects (shapes, text, images, whatnot) inside the header. In the class that creates these objects each one was being placed inside a <w:p> element. For example, if there were 3 such objects, the XML looked like this.
<hdr>
<p>Some Object</p>
<p>Some Object</p>
<p>Some Object</p>
</hdr>
The problem is that even though each of the objects inside the <p> are absolutely positioned, the <p> element itself creates a line and space for that line. So the header above would have 3 blank lines in it. This became an issue if the header had 6 or 7 objects because the blank lines would push the header's margin down and force the page's content down as well. This was undesired behavior.
The solution is simple. All the absolutely positioned objects can be placed in the same <p> element. This leaves only 1 blank line in the header no matter how many objects you have.
I need to build a tab looking like this one:
https://www.facebook.com/auto.co.il/app_134594493332806
I know how to add an image and a comment box and i know of several "plain" ways to hide the content from non-fans, but i came across the above tab and i really like the way it shows thee content yet you cant engage it until you press the like button.
Any help please?
Thanks in advance.
Oren
Your link didn't work for me, but you can place a absolutely positioned div with a high z-index above the rest of your content to prevent the user from clicking on anything.
Update: Now that the link has been updated I see that they are doing exactly what I described above. In chrome if you right-click the background and select "inspect element" you will see the following computed style for the div:
rgba(0,0,0,0.796);
display:block;
height:1612px;
width:810px;
The content is blacked out simply with a div with a black background and some opacity. Just for fun, you can overcome their like gate (without liking) via chrome's JS console by selecting the iframe context and then entering the following:
$('.like_float_c').detach();
... now call youself a 'hacker' ;)
I have a WP 3.2.1 site and use Gravity Forms 1.6.2 plugins. I make my first form, and the preview looks good (www.censin.com/form-preview.jpg)
But when view in actual page, the second input text field (Official Website) is not float to the right side of first input text (Company Name). Image in www.censin.com/form-live.jpg
You can visit the live page at: (protected page password: demo)
http://www.censin.com/marketplace/buyer-request/
I am not good at CSS styling, and I think the problem is in the theme style.css but i can't figure it out using firebug in firefox.
Seems like the last column of li is not define well and can't float to the right, or because the site theme css is do not have a usual definition for form input.
Any help to resolve this is appreciated.
The reason for the wrapping is that the list items are slightly too big to floated next to each other so are being pushed down.
In your CSS file add a new rule to set the width on the UL element.
#gform_fields_1
{
width:922px;
}
I am working on a site and the header element is completely disappearing in only IE7 (it shows in IE6 and IE8). It shows for a second, then once the whole page is loaded, it disappears. I have no idea what could be causing this. The portion disappearing is the section I have included via PHP, but it still doesn't show when I actually insert it into the file, so I don't think that is the problem. Any help would be appreciated. I can post any code that would be helpful, but most of it should be able to be found through the view source or inspecting an element.
On a side note, my opacities aren't working in any version of IE either. I have them in a separate IE CSS document and am using the filters, so I am not sure why it is not working.
I figured it out. Apparently IE7 doesn't like negative z-index values and so was placing my background image over certain elements on the page that were above it in the HTML. Strange, but that's IE for you I guess.