I'm sure the answer is obvious, but I haven't been working with html/css that much...
There is a gap of white space in between the top of the browser and the first div. I don't really get why the gap is there. I didn't use margin-top or padding-top or border-top in the css, so why is there a gap?
Thanks!
While it would be extremely helpful if you actually posted some code or a link to the site, I would assume it's just the default padding. Most browsers have default styles for things like body that you may want to clear. Try something like this:
html, body{
padding: 0;
margin: 0;
}
If that doesn't fix it you'll need to give more information.
Without seeing anything I'd imagine you either need to clear the default padding on the body element or you have a heading tag in that div that is adding some extra goodness.
Are you using a reset? http://meyerweb.com/eric/tools/css/reset/
if the page is wrapped with a wrapper, use:
#wrap{
margin:0 auto;
padding:0
}
Once again, some context would be nice but if these solutions aren't cutting it, then there's a good change your a victim of collapsing margins. Try setting the overflow property of the body to auto
I had the same problem. Floating the upper divs solved it.
I had the same problem. It was fixed when I added 30px of padding to my div container. I used
.top-container {
padding-top: 30px;
}
My problem happened after I set some images to an absolute position in my div (which had a position of relative.) For some reason that gap appeared, but setting the padding worked for me.
I know this is 9 years old but...
body { margin:0; }
type that in between the Tags and it should work
Related
In my homemade CSS grid i have a problem.
If my .row edges touches the body edge, it will generate overflow.
See demo here: http://jsfiddle.net/57BGe/3/ UPDATED FOR EXPLANATION
.row {
margin: 0 -15px;
}
How could i prevent the overflow? (overflow: none, won't work since you still can scroll on phone and with some force on desktop)
* UPDATE *
If you look at Bootstrap #http://getbootstrap.com/css/
Try using dev console and change the margin-left of .row to something that would make overflow on body. (e.g. -150px)
If i do this, i still cant scroll horisontal.
You need to reset the Browsers agent stylesheet which automatically sets margin and padding on the body and html, then you can get rid of the negative margin:
body, html {
margin:0;
padding:0;
}
Give that a try.
Found a solution.
I tried to put overflow: hidden on body and html, but i could still scroll.
So i made a container with overflow: hidden, and wrapped everything inside it.
That made it work just fine. Abit of a dirty workaround, but it had to be done.
I'm not sure how best to explain this, but I'll do my best. I have Drupal theme that has a shadow border and text padding on the main content/post DIV. However, on some pages, I would like to override the text padding so that a DIV tag can be full with of the content DIV.
I could probably achieve the same sort of thing by removing the text padding and adding it manually on each page, but this would be a lot of work; especially considering that I would only need to use this "special" DIV on a few pages.
I hope that makes some sense - there's probably a better way to explain it though which is why I can not find the answer myself! Thanks in advance
Use a negative margin on the child that is equal to the parent's padding. I.e:
div.parent {
padding: 0 10px;
}
div.child {
margin: 0 -10px;
}
im having a problem regarding using background property with url('location') value with a div element. All browsers do not show the background image for any content written within the div tag.
code:
HTML:
body has a div tag with the class = slide. this div tag contains some content and links.
CSS:
div.slide {
margin: 0 auto;
background: url(images/btnslide.gif);
}
please help me identify the error. maybe i have misused div tag. please point out the solution for the above problem
thanks in advance
You either haven't set the height for your .slide element, or you haven't cleared the floats for the elements inside .slide. Try setting a height or adding overflow: auto if you want to clear the floats inside your <div>.
This code should work by default, as everybody said something else is wrong.
Either the height is wrong or the image does not exist.
Which browsers are failing exactly?
If you like you can try writting the CSS with full syntax:
background: url(..) top left repeat;
Just a quick question regarding CSS positioning. I have several "segments" on my site which are 100% wide (fills the screen), and I want them floated next to each other. So only the first one will be visible, the other ones will be off-screen. I've tried playing around with positions and the overflow property without luck. Right now they just pop down below each other instead of floating.
This would work perfectly if the elements did not exceed the screen width, but as they do, they just pop down as I said earlier. I've tried setting a huge width to the "wrapper", something like 99999px. And then setting the segments to 100%, but that will just fill the whole 99999px width instead of the screen.
Any ideas?
JSFiddle example: http://jsfiddle.net/9xGPb/
Do you mean like this?
Example Fiddle: here
I used my favourite alternative to floats, inline-blocks
if you actually take it out of the fiddle it has some pretty (gaudy?) colours which show that it allows for the min-width: 900px; on the centered_content div to work too, and I removed the absolute positioning for the menu so the content would go below it, for demo only but you may find it useful..
let me know if any good or if you have any questions
Updated with some jQuery and to make corrections for default word-spacing
New Example: here
re: the IE6/7 hack rightly mentioned in the comments;
.segment {
display: inline-block;
overflow: hidden;
width: 0;
}
.segment {display: inline !ie7;}
needn't be a "parse hack" if that's your preference as long as that second rule is given to [lte IE 7] somehow, and separately at that it cannot be combined into the original rule with the * hack or anything, it won't work.. has to be in a separate ruleset.
I discovered word-spacing might be a problem if relying on width to hide, the natural behaviour of inline blocks is to put 3-4px between the elements like the space in between words, the workaround to this is to correct the word-spacing on the wrapper
.segment-wrapper {
white-space: nowrap;
word-spacing: -4px;
}
then restore it normal for the actual content divs, same place as you would restore the normal wrapping behaviour
.centered_content {
width: 900px;
margin: 0px auto;
background: #fcf;
white-space: normal;
word-spacing: 0;
}
and last, apart from this was fun.. there's 2 effects in that new fiddle - uncomment and comment the other.. forgive me I was playing! :)
The meaning of float is to try to float to the right or left unless there is not room for it.
This means that you cannot ever float an element off the page.
If you need to keep the element off the page, you will need to use a different positioning mechanism like position: absolute.
It sounds like you're creating a horizontal one-page portfolio. I've recently been working on something similar.
Using your fiddle I've set the .segment class to
.segment {width:90%;height:90%;position:absolute;}
and then offset each left positioning further off the screen
#home {background-color:red;left:5%;}
#work {background-color:yellow;left:105%;}
#portfolio {background-color:green;left:205%;}
#contact {background-color:blue;left:305%;}
http://jsfiddle.net/9xGPb/2/
I also added some jQuery logic to switch views for the divs.
I'm still not entirely sure which segments you want to start off the page but this jsfiddle uses positioning to shove the #two div off to the right: http://jsfiddle.net/EdAZP/1/
Which part of your example did you want to start off the page?
Did you try to just hide the other elements and toggle them with some javascript (jQuery is much easier)?
http://api.jquery.com/toggle/
I'm working on a site that has a wrapper element, with a left and right sidebar, each floated within the wrapper. The left sidebar (which contains navigation) is clearing the right sidebar and pushing it to the bottom for some reason. I've tried fixing it in about 50 different ways. I originally thought changing the size and or margin would help. It didn't. I tried the 'display:inline' fix to no avail. I've tried a ton of other tweaks but I can not get it to work. You can view the site at www.ibgs2010.org and the css is www.ibgs2010.org/css/style.css (I'm trying to use a IE7 specific stylesheet to fix it). If anyone can help, I'd really appreciate it. I've burnt about 3 hours today just trying to fix this one little issue.
Looks like the problem is with the ajaxloader div - set its width to 697px (same as sidebar right) and that should fix your problem.
Try to remove the margins and paddings on your sidebar classes and have a inside wrapper with the margin and padding set to it. More failsafe this way so that margins don't increase the size of your div element. Browsers have a different way of rendering margins and paddings to elements.
Hope that helped you out.
Cheers
I think it's just that the floating content is being considered too wide to fit -- so, it's floating it down to where it will.
Instead of float, you might try position with left and right, respectively:
.content.wrapper {
position: relative; /* establish boundary for absolute positioning */
}
.sidebar.left {
position: absolute;
top: 0px;
left: 0px;
}
.sidebar.right {
position: absolute;
top: 0px;
right: 0px;
}
I propose you add the following:
#ajaxloader {
width: 737px;
float: left;
}
The width of 737px is derived from the 697px width plus the 40px left padding of of .sidebar.right
With this addition the IE7 and Firefox versions should look the same, give or take a pixel.
I include the yahoo reset css as the begining of every page (or css file). It really helps to level the playing field. Also with IE, always remember to specify width (even if it's 100%) and if your floating, make sure to display:inline.