Hey, I appear to have a CSS problem, regarding the spacing of my <div>s on my site.
If you point your browser to www.marioplanet.com you will see an odd space after my Apple-themed navigation bar.
I was wondering if anyone can help me identify why this spacing was added, and how I can eliminate it, as it's undesired.
Also, I believe it has something directly related to the nav bar, because without the nav bar, this is no spacing problem.
Thanks!
It is because of <a></a> present in <li id="gn-support"><a></a></li>
That #globalheader DIV that contains the menu bar has 18px of vertical margin (top and bottom). So naturally what follows is displaced by 18px.
#globalheader {
height:37px;
margin:18px auto;
position:relative;
width:771px;
z-index:1;
}
You might want to remove the gn-ipad, gn-itunes and gn-support <li> elements from your html.
Get rid of the 18px portion of the margin in the globalheader item, then change the width of the globalnav item to 1000px:
globalnav {
margin:0;
padding:0;
width:1000px;
}
Ok the problem has to do with you fixed width on:
#globalheader{
width: 769px; //this is too small and actually not needed.
}
The contained list (#globalnav) has a rendered width of 830px (it has some white space at the end didn't investigate to see where it came from. So if you remove the fixed width from globalheader and add a margin-left of 200px to #globalnav you will center it and get rid of the space.
Additionally if you can see why your list have a bunch of white space to the right of it expanding its size to 830px you can just do a margin-left and margin-right of auto and center the list inside the global header div.
Figured out where the extra space at the end of the ul is comming from list items gn-itunes and gn-support are both rendering with 103px in width. this is comming from the (#globalheader #globalnav LI A css rule) You can override the width in (#globalheader #globalnav li#gn-support A) as well as the (#globalheader #globalnav li#gn-itunes A) css rules and that should fix it as well without resorting to fix above.
If you change the width of globalheader will work.
#globalheader {
height:37px;
margin:auto;
position:relative;
width:515px;
z-index:1;
}
If you want to add more navigation links later you will have to increase the width of globalheader.
Related
I have an element that is absolutely positioned at the bottom of its box, and then the box itself is part of a series that are all fixed at the height of the tallest box. I am blanking on how to get some whitespace above the absolutely positioned element? JSFiddle here ... the "Do this" button in the tallest box needs some space above it and below the list.
I am trying to insert a line feed and set the white-space but this doesn't work.
.myelement:before {
content: "\00000a";
white-space: pre;
}
Thanks in advance!
You could add a bottom margin to your last li element since they are determining the height.
Add this css:
.providers li:last-child{
margin-bottom:30px;
}
of course that margin could be whatever you need.
Fiddle
Simplest way – add a padding-bottom to your items:
.ListCtr {
padding-bottom:30px;
}
http://jsfiddle.net/zh2os8yt/4/
Since your buttons contain only a small amount of text, this will work unless the screen width gets “really small”. If that’s an issue, you might want to use a bigger padding value for narrow screens using a media query.
But flexbox would be an even better tool to solve this.
Try adding padding-bottom to your boxes. For example you can edit the .ListCtr to the following:
.ListCtr {
position: relative;
padding-bottom:80px;
}
I wanted to using a flexible horizontal list menu, and I found one on github that came with a collapsing menu at a certain breakpoint. I didn't need the collapsing menu so I got rid of it. I've been modifying the menu to cater to my layout. There are a couple issues that I can't seem to figure out.
There seems to be a left margin to the menu that I want to get rid of.
On the right side of the menu, while shrinking the browser, the last menu item seems to get overlapped instead of pushed in.
I would like to reduce the margins between list items
Normally this wouldn't be a problem for me, but I've not really worked much in percentages.
.flexnav {
overflow: hidden;
margin: 0 auto;
width: 100%;
max-height: 0;
}
FIDDLE
Add padding: 0; to .flexnav style definition.
To remove padding just use css:
padding:0;
You mention "unwanted", so a tip from what I usually do is, at the top of the style sheet I write this out:
*{
padding:0px;
margin:0px;
}
This will remove padding and margin from all things that have padding or margin by default, so you will no longer have "unwanted" padding or margin, instead you can separately add padding and margin to things you actually want.
I use this approach on all websites I make.
Here is jsfiddle example
Here is the code..
<div id="xxx1">
<div class="xxx1">
txt
</div> </div>
And CSS
#xxx1{
border:1px solid black;
min-height:25px;
}
.xxx1{
border:1px solid green;
height:50px;
position:relative;
top:-50px;
}
I want to remove extra space from div id "xxx1". How to do that? And I cannot use fixed height cause I want that div to increase its height if I want to add some more data inside that div.
Here is jsfiddle example
Provided I understood the question, get rid of padding on body.
jsFiddle
body {
margin:0;
}
You may also find box-sizing:border-box useful which integrates border and padding into width and height
jsFiddle
#xxx1{
box-sizing: border-box;
}
.xxx1{
box-sizing: border-box;
}
Edit
RE: no.. I want to remove blank space inside div id "xxx1".
Well you can do that in a variety of ways, the right way would depend on what the context is. Here are a couple:
Position .xxx1 using position:absolute so it's taken out of the flow of the page. jsFiddle
Set height:0px and set it with JavaScript when you add content to it.
Here try to change it like this
.xxx1{
border:1px solid green;
height:auto;
position:relative;
}
you cant remove the spacing added by relative positioning. setting the padding and margin on the body wont do it. setting the box-sizing wont do it. setting the font size to 0 wont do it. doing something with javascript is just silly.
You have these options:
make the next item have a negative margin (ick).
float the item, tho this wont allow overlapping (if you need that)
set the outer div to a relative position and the item you want to move to absolute position (and set the top (or bottom) and left (or right) values. this positions the item you want to move according to its outer div (not the window).
Number 3 is almost always the best way to go. Think about how the page will change with variable content to make sure you choose the right option (and correct corner to position from).
If the outer div that you set to a relative position is not adjusted in space (using top/bottom/left/right), then that div does not have any extra unwanted space. If you need to adjust the outer div AND the inner div, set all moving divs as absolute, and the closest parent as relative; the movement (top/bottom/right/left) will be based on that relative parent.
I have a fluid width site with a logo centered in the header area. The logo stays in the center regardless of the window size. Works in all browsers except ie9. In ie9 it is stuck on the right. If I could get it stuck on the left that would be an ok compromise but the right will not do. My best guess is that ie9 does not support the css code:
.logo {
width:100%;
position:relative;
}
.logo img {
margin-left:auto;
margin-right:auto;
display:block;
}
Here is the website http://www.cyberdefenselabs.org/
Anyone know a workaround for ie9 that will not affect other browsers or involve drastic recode?
Your .social-header-wrap element contains floating elements that are not properly cleared. Add this style:
.social-header-wrap {overflow:hidden}
The person above is correct - you have floats that are not properly cleared.
But you should sort out your layout before making style changes as you have the same main menu 3 times but with 1 of them hidden and 1 (the first one) with white on white links.
Simply removing the first main menu (the div with the class "social-header-wrap") also solves the problem.
When using
margin:auto;
you should say
margin:0 auto;
Get rid of margin-left and -right and change to margin:0 auto;
Also the containing element needs to be text-align:center which you undo by putting text-align:left in the element you are centering.
I am working on the following website http://bestofdesigns.be/studioregenbogen/index.html.
Can somebody please look at the css and tell me why the footer is not attached to the content and why there is a gap between the menu and the contentwrapper?
I have looked at this for 2 days and cannot seem to find what goes wrong.
Thanks,
Ben
#footer p {
padding-top: 5px;
margin: 0;
}
why there is a gap between the menu and the contentwrapper?
The gap is due to the margin applied by default by each browser to the list <ul> element and the title <h1>.
Remove it or adjust it
Screenshot
hi now give to #footer overflow:hidden and give to your footer p tagmargin :0;`
as like this
#footer{
overflow:hidden;
}
#footer p{
margin:0;
}
I am suggesting one more thing did you ever opened your design using firebug and checked how your middle content looks. It's bad design. Use div tags extensively don't use padding much.In the body style put text-align:justify property.
Your error is in
#footer p {
padding-top: 5px;
margin: 0;
}
Divide the content wrapper class into two vertical div classes and then divide the below vertical classes into another two vertical classes. Divide the first vertical tag into two horizontal div classes. In that put your image in first horizontal tag and in second your paragraph. In the bottom vertical class your second paragraph.