I have a website called http://www.willtakesurveysforfood.com/. On that website I have two issues:
The navigation bar is making my website scroll sideways. The width is at 100% so I'm not sure what's wrong.
The bottom border of the .POST Div is missing.
If I can get any help that'd be great. Thanks!
Remove the padding from your UL. Since you have given your UL a width of 100 % the padding will be added on top of that, unless you use a box model.
Gatekeeper answered your other question in a comment.
Related
I have been looking for tutorials on this for a while now and am coming across a problem. I have a layout with a fixed header at 100px in height and a fixed footer at 50px in height. In my content, I have a menu on the left at 200px wide and content on the right that fills the rest of the screen. My header, footer and menu all have styles applied for background colours and borders.
What I want is for my footer to remain at the bottom of the window, or at the bottom of my content, if the content is longer. I want for the menu to be the same height as the content, so that the styles I have applied will remain intact. What I get is either the footer sticks to the bottom of the content because the content is shorter than the menu, or there is a gap between the bottom of the menu and the top of the footer.
Every tutorial I have found fixes this, but requires the menu to have no background (it takes the background styles from the <body> tag. As I said, the styles I have applied are attached to the menu. Is there a way to fix this?
UPDATE: My source can be found at http://jsfiddle.net/53SZd/3/. That is what I have now (apologies if the floats cause all manner of headaches), but if there are ways to have it looking how I want, I am very open to suggestions.
UPDATE 2: I think my way of explaining this is wrong. I have uploaded some images of what I want to my Google Drive that should explain what I want.
Whilst I do sincerely appreciate the help that I am getting here, there is always one caveat that appears. Many thanks to Waz for his help, I do really appreciate it, but I am coming across one issue or another with each answer. I never realised that getting the effect I want could be so hard -_-"
seems that u might be using float property on the menu, if that is the case you would have to clear float with the footer or a div, but seeing the codes would be great help for your answer
one way to do it is to put a margin-left on your content of 220px (200 for the menu +20 for it not to be just aside the menu)
had the same problem, this solved it.
for the footer, the solution of james is the best ( put clear : both on your footer)
here is how it works : http://jsfiddle.net/53SZd/19/
EDIT : I understood the prolem was for the content.
give your menu top= 111px(100 size of header, 11 for padding) and bottom=51px (50 height footer,1 border) and your footer bottom=0px;
I am building a web site for home made jewelry. I'd like it nice and centered ( for all those ppl with low resolution ) so all of the titles, navigation and content are in a single div, that I positioned in the center. On the left ( inside the div, everything is inside the div ) I have my vertical navigation sidebar div. On the right I have the title and the content. So far so good. Now to the problem:
I would like my sidebar to have a right border all the way from the top of the page to the bottom ( with 1em margins if possible ). The trick is that my content to the right variate from text to pictures and forms and is quite different on every page - when the content is larger then the screen the screen scrolls and in which case I'd like my sidebar border to scroll down with it - I've not been able to do that.
I think I have done quite a reading - my closest solution was to set the border's position to static but this quite obviously isn't working when the site is centered. So to the question - is there any CSS only way to make the sidebar div's height dynamic or something and define it to expand with the content to the right? This way the border will always reach the bottom.
Wrap your navigation in another div. Give this new div a height of 100% and assign it a border-right CSS property. You can also set padding too. Hope this helps.
How about giving left border to the content section Div, instead of Nav menu. so that way the border could change height according to the content area height
body,html{
height:100%;
}
#wrapperdiv{
height:100%
}
#navigation{
min-height:100%
}
Honestly, before this problem I kinda thought that I actually knew something about css positioning, but it looks that I do not.
Here is what I have, I need to position the social buttons div on the left of the container and make it fixed so it does not move, but only until the bottom of that div is lined up with the bottom of the container in which it was positioned then it will need to scroll further. I do not know if I am explaining my self so that everyone can understand what I mean here so please take a look at the following example
The div with all facebook, twitter, G+ and print buttons is scrollable until it is aprox. 10px below the top of the browser, then it stops and continues to scroll only after the bottom of it is lined up with the container that it is placed in to.
Please help, I am kinda stack with it
This isn't a CSS question unless you're willing to make-do with position: sticky, which probably isn't what you're looking for. (Reading about it here)
If you're looking for a jQuery solution, then you could use ScrollFollow, where you can specify a container parent for the fixed-scrolling item.
I have a table that has a fixed height and width.
I have mentioned height as 200px and width as 100%(inside another div of 600Px width)
now I am adding a new column at run time so the width needs to be increased so I thought to put a scroll bar.
I am doing the following to achieve this
$('.showDateTime').show();
$('.showDateTime').css("width", "300px");
$('#TransactionErrorsTableData').css("overflow-x", "scroll");
The issue is that the horizontal scroll bar comes but is disabled.
Where as the vertical scroll bar is working fine.
I have set overflow as auto for my div "TransactionErrorsTableData"
Any idea on how to enable the horizontal scroll bar?
P.S. I m kind of stuck up so please pardon if the question is not clear, please comment if any details are required.
I cannot accurately get your exact problem seeing you only posted a snippet, and didn't post any examples, but I'll give it a go.
If you use the CSS rules overflow-x: scroll or overflow-y: scroll, it forces most browsers to make the scroll-bars appear, this is by design, so that if the content enlarges, the content outside of the container will not be forced to move around.
The scroll-bar is not disabled, it is just inactive due to it not having enough content to actually be able to scroll, I am guessing this is because you have set .showDateTime's width to a specific amount, which is inside of the TransactionErrorsTableData div.
I hope this helps!
NOTE :
This answer all assumed due to not enough details given.
Try it, but would be better an jsfiddler:
$('#TransactionErrorsTableData').css("overflow-x", "auto");
I have a fixed height div and want to align an image to the bottom right corner with the text (of an unknown/variable length) to wrap around it. I'd ideally like to avoid using Javascript and the best solution so far appears to be to use a vertical spacer div above the image (which is the container height - image height) to push it down. This works perfectly on IE / FF but the text overlaps the top of the image on safari (mobile and standard). I'm not sure why this is happening, I appreciate the fonts are displaying differently but surely the text should flow around the div/image either way? You can see an example of what i'm talking about at http://jsfiddle.net/deshg/XScmK/, i've just used a coloured div with some text instead of an image in this example.
Any thoughts would be massively appreciated as I'm not sure why this isn't working?
Thanks very much as ever,
Dave
in your 3rd div margin-top:20px; for a quick fix, but this will push up your 1px wide div.
also try changing these heights: 141px to 140px, and change 159px to 160px.