I am working on a website that has these tabs at the top which I need to have automatically spaced inside a div. The reason for this, is that the div below it has a border that needs to line up with the borders on the tabs. See my jsfiddle below for what I'm talking about. I currently have them all spaced correctly, but the nature of this site is that the words in the tabs will change, making my spacing incorrect. How can I automatically space them inside my div so I don't have to tinker with all the individual padding to make them line up with the div below?
http://jsfiddle.net/g7c5X/
Should be able to achieve it by adding to your CSS something like this:
#navMenu ul {display:table; width:100%}
#navMenu li {display:table-cell}
I think older versions of IE may ignore the display type can't remember which. The other option would be some javascript to calculate the margins.
Related
I'm a bit afraid of using floats as I didn't yet understand clearing the floats and all the hacks that are on the internet in regard to that activity so I've used display:inline-block to place two divs in inline fashion. Their container has a
width:auto;
max-width:900px;
and each of the divs has
display:inline-block;
width: 450px;
Now no matter what I do the second div always breaks to another line right below the first div.
Here's the code : http://codepen.io/anon/pen/xgtFd
I have already modified the width of the two divs like for example
width:440px;
but it didn't help. Still the second div is slightly 'off place'. That's weird cause I was making a website and using pretty much the same approach for my header like in this project. Please help me determine the problem.
I would be glad for any help.
The widths are too wide.
Bump the nav down to about 446px, and they come back in line.
Why 444px instead of 450px? Two reasons:
Your border is taking 2px.
There is whitespace between the <div> tags in your markup, which is reflected in the rendering. If you would like it to be able to make it 450px, put the closing div tag and the next opening div tag immediately adjacent, like so: </div><div id="nav">
If you want to be able to keep the border, and set the width to 450px, then you should check out box-sizing, and utilize box-sizing: border-box;.
Edit:
To address your vertical alignment issues, you need to apply vertical-align: top; to the div elements (the nav and logo divs).
And, the ul isn't centered because when you apply display:block to it, it fills the full width. So you could either make the contents of the div centered with text-align: center on the ul, or you could make the ul display: inline-block.
I have a very basic CSS problem.
I have a floating image in my top-left corner with a margin-right. The content is made of paragraphs and lists with bullets. I want my lists to have a padding-left for more visibility and my bullets appear in "list-style-position: outside" (text must be aligned).
My problem is, when a list is displayed next to my floating image, ul padding is not applying.
Here is an annotated screenshot for your comprehension :
This kind of behavior happens with FF and Chrome. With IE, it is worse because the bullets appear at the very left of the floating image...
Edit : css property "ul{overflow: hidden;}" is not an option because I want to avoid this :
I'm sorry I can't show you a piece of code because it is a Drupal website and the content of the node is generated by wysiwyg module and written by webmaster and editors. I have no access to the generated structure. The content is not fixed and lists could appear everywhere in the text.
This Fiddle represents well my situation: http://jsfiddle.net/34Cuf/
I think you have to get rid of this:
list-style-position: outside
This is putting your bullets points outside of padding. In the box model, anything outside the border box collapses during a float.
Lists have initial left padding on them (so there is enough space to show the bullet) so unless you give the ul a padding that is greater than this initial value, your list will actually move left instead of right.
Have a look at this example
To make your ul behave properly next to a floated element you just need to float it too: Example
Padding won't apply to list at right of floating div, because it stays behind floating div.
It doesn't count from after div, it still counting from left as ul after floating div.
It happens because the div "floats" with text.
To understand it better, play it ul li padding in my example in fiddle
See that a put a little margin in floating div to you see that the content of ul extends form the left margin behind floating div.
You'll have to apply a bigger right margin to the floating div.
I'm having some real trouble with CSS here... it's very odd.
I have a UL element wrapped within a Nav tag. I'm trying to apply some padding to the individual links and for some reason the padding isn't moving the element down and expanding the container as a result.
Here's a screenshot of what's happening:
As you can see, the padding is being noticed by the browser, but it's just overlapping with the element above (which is being floated). I can't find a way to push it down, or at the very least make the container expand to hold it properly.
For reference, I'm using the Skeleton responsive boilerplate as a base.
Here's a link to it live: http://richardsonweb.co.uk/
Try display:inline-block; on your li elements
I have this and it got an HTML img#logo-image, on some occasions it will not be displayed, display:none.
The problem is that the entire div#menu-title should fit the width of the page.
I tried putting width:100%, but when the img#logo-imag" is displayed it breaks the line being below the img#logo-image.
The width:100% does not work with elements float:left
Just unfloat the menu-title div and remove the width.. it will automatically be 100% of the header then.. and if the image is present it will adjust the ul#menu list to make room for it, which is a natural behaviour
if you want the menu-list to really only take the available width (say for a background color or something then you can add overflow: hidden; to ul#menu - though I don't see a need for that in your example code
here's a simplified version of your Fiddle - hover on the header to make the image disappear and see the ul#menu adjust to suit
Example Fiddle
You have both logo-image and menu-title floating left. Since they arent really in separate divs, they are all part of the same div, they appear next to each other. On top of that, you set the menu-title to be 760, which isn't the width of the page. At least that what it looks like you did. Do not use width 100% because resizing the page will shrink that menu title.
You really just have to play around with the divs, but i would say that separating those two divs would make you be able to stack them on top or below each other.
And in using Chrome's inspect element feature, I don't see a display:none for the image's css. I don't know why that would do that.
I'm really not sure of what you are trying to accomplish since making the div#menu-title width: 100% doesn't leave any room for anything else on the same row.
Why not let them both be inline and let the widths be whatever they need to be?
Anyway, I have a guess at what you want. You want those two elements to behave as being in a table, inside a table row, and each in a table-cell so that the image takes a maximum width, and the div#menu-title taking all of the rest of the place. In that case put them in a table, or use display: table-cell for the image and the div and fiddle around with that.
I'm making a simple website for college, which I hate, due to the designing. I'm a php programmer not a designer. (May sound stupid)
I have run into a problem, I have a centered div of 600px then inside <nav> tags I have 4 links. I would like them evenly spaced out, across the div. I have tried setting the margin-left and right but had no luck.
Take a look at it on jsfiddle
Thanks
Working demo: http://jsfiddle.net/8jK7N/1/
IE, however, doesn't support styling of the new HTML5 elements. You can use shiv to solve this issue. Working demo (with shiv): http://jsfiddle.net/8jK7N/2/
Take the <p> tag out of the <nav> bit, also margin-left 73px and margin-right 73px on each may make the links too wide for one line in your div. I know the math works out but it may be acting strangely.
If you remove the margin-right on the nav a it will work. The added spacing on the margin-right is added to the box of the anchor. Here is how the box model works: http://www.w3.org/TR/CSS2/box.html
Note in IE the html5 nav selector doesn't seem to not work correctly. I added a class on the paragraph tag and applied the fix that that tag.
This is what will work in all browsers: http://jsfiddle.net/RkUWU/2/
You can use the following:
nav a{
width:150px; display:block;float:left;
}
If you want then centered, add:
text-align:center;