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;
Related
I have an issue with the border-radius of div container2 for the links list with the resolutions at the top of the page like 240x320 etc. Its going around everything instead of just left-column2 and right-column2. Container2 is used a second time in the code without issue so i don't understand it.
At first i thought it was a problem with a closing tag but checked the code and everything is fine.
Heres my fiddle. Hopefully someone knows whats going on with it.
Maybe it has to do with the box-model . width + padding.
To include padding into width and use width:100% on child , you can switch the box model with box-sizing: DEMO
.container1,
.container2 {
box-sizing:border-box;/* add prefixed rules if needed */
}
SEE: W3C
It was pointed out that i had mistaken an open div for a closed div. Thats why i was having issues with the border.
It looks like my website does not look good in ie7 (see screenshot below)
My menu supposed to be horizontal is vertical, and facebook & twitter buttons are above each other and not next to each other.
Is there a way to fix these 2 issues?
Many thanks,
Here you go:
http://jsfiddle.net/aKPgt/
In a nutshell, change:
display:inline-block;
to
display:inline;
and add:
float:right;
Just remember, you need to REVERSE the order of your menu items in your unordered list, since
you're floating RIGHT instead of LEFT.
"My menu supposed to be horizontal is vertical"
This type of IE7 problem would typically occur if you were trying to make a set of <li> or <div> tags take display:inline-block -- which works in IE8 and current versions of the other browsers.
The problem is, IE7 respects display:inline-block, but only on elements that are, by default, inline such as <span> or <a>. So it just keeps them as blocks, and so they stack vertically.
I would try applying float: left; to both #nav > li and #nav a.
That should fix the vertical stack issue with IE7.
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.
I made a navbar and it works perfectly in all browsers except IE7. Below is a link to an example. Here is a quick explanation of what Im trying to accomplish. The navbar is wrapped in a ul and floated each list item to the left this works perfectly in all browsers except IE7 in which case each li item is on its own line and all but the first one is hidden, because the ul has a set height. I tried everything I could think of (even changing display modes) and nothing worked> I know it might be easier to use specific widths but I just think that there has got to be something simpler. Thanks
Check out the sample below:
http://jsfiddle.net/XV9nQ/
Try this: http://jsfiddle.net/moeishaa/W43w5/
I removed float:left and the height from the ul. Added a new css class clearfix to the ul. When you are floating things, add the clearfix class to the parent and you should be set. You dont need to specify a height
I can't for the live of me figure out how to get one element in my layout to be placed properly in IE 7. You can see the page here:
http://www.iancreates.com/debbie/contact/
Works fine in Firefox, but if you look in IE 7, you'll see the sidebar is beneath the body content. I've tried everything I could think of (floating both divs, changing width and margin/padding to account for IE box model) but to no avail.
Here's the relevant CSS:
.content-left {
width:670px;
height:auto;
margin:0 30px 0 10px;
padding:0;
float:left;
}
.content-right {
width:240px;
height:auto;
margin:0;
padding:0;
float:left;
}
I appreciate the help!
This is a classic IE problem, combined with a slightly impractical page layout.
You have set your peace-main div to have the width 100%, so there is no room for the right content beside it. In standards compliant browsers however, the div doesn't have any height (as it only contains floating elements), so it's not a problem that the right content ends up below it. In IE7 the div is expanded to contain it's content, i.e. the left content div, so it gets a height, and as the right content goes below it, it ends up below the left content also.
Just remove width: 100%; from the peace-main style.
Posting the CSS code would be helpful. Try using "position".
one thing you could do is set your peace-main to float 'left' and only have a width of 700px (so there is enough room for the sidebar)
then the sidebar should also have it's float set to 'right'
but i would actually suggest you try one of these methods :
http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html
#Guffa's answer is correct in my estimation. I think that your page may have validation errors also that are causing it to be parsed incorrectly. Looking at your markup, it looks like you had wanted div.content-right and div.content-left to be in the same container div, however they aren't, leading the the problem as #Guffa pointed out.
alt text http://i432.photobucket.com/albums/qq48/shiftypowers/source.png
If they were in the same container however, as I think you intended, then this problem would be solved as well. Try and fix this extra div closing tag, see what that does:
alt text http://i432.photobucket.com/albums/qq48/shiftypowers/validation.jpg