Jump to content

Css Positioning Problems


Moloney

Recommended Posts

Hi,

 

I am having a problem with the css in this design. I have gone for the responsive approach and I am consuming huge amounts of time just trying to position things correctly.

 

I was able to center the #container using margin-right:auto and margin-left:auto but nothing seems to work to center the nav tag. It is a horizontal menu with 6 columns.

It seems to have more space on the right than the left despite using the same technique.

Also, the section tag when using the exact same css has no problems to centre properly.

 

#container {

width:100%;

margin-right:auto;

margin-left:auto;

margin-top:0;

margin-bottom:0;

min-width:400px;

max-width:1200px;

min-height:400px;

text-align: left;

background-color:#0F3;

}

 

nav {

width:90%;

margin-right:auto;

margin-left:auto;

margin-top:0;

margin-bottom:0;

}

 

 

section {

width:90%;

margin: 0 auto 0 auto;

clear:both;

}

Any ideas how to solve this?

Thanks

 

 

Edited by Stephenius
Link to comment
Share on other sites

could it be the margin-top? just throwing out ideas, but in the future, you should consider putting your code into something like http://jsfiddle.net/ so that those who would like to help don't have to replicate your code from a jpg.

 

-k

 

 

Hi Kevin ---- I removed the first question because I solved it after I posted..... It was something to do with my image throwing out the margin... I had stupidly put the image directly into the html like this

<header> <img src=""> </header>. I changed the header to a background image using css and bing -- problem gone.

 

I am going to read your post now on how to fix the second problem. And Yes, the <li>s are floated left.

 

 

Link to comment
Share on other sites

 

Hi Eric,

 

I've looked through your 6 methods and bookmarked it as they seem useful methods depending on the situation.

 

I've just gone through methods 4 - 6 which seem most applicable to my case.

 

The 5th method -- using relative positioning should work but then the whole thing about the overflow:hidden puts me off..

 

The 4th and 6th method would be nice if they would work with % widths. Is it possible with % widths? (It didn't seem to work for me when I tried it this way).

 

A slight modification of the 4th method --- which is the same as Kevin's link INLINE BLOCK METHOD works but it leaves a white space between each list item.

Link to comment
Share on other sites

as for your second problem, i'm assuming your <li> tags for the nav are styled with a float: left. floats will override any parent margin styles. ditch the float, and try using display: inline-block.

 

here's an article detailing your woes.

 

http://robertnyman.c...d-why-it-sucks/

 

Hi Kevin,

 

I applied the method on the link you suggested and it works but it leaves a space between each list item.

I have read up on fixes for these spaces but it seems all a bit messy.

 

Are there any other ways using inline block but sticking with the % widths?

Link to comment
Share on other sites

Inline block is probably your best bet. You can remove the frivolous stuff for ie6/7 as they are dead. Removing all white space between the li tags is one way to fix the white space problem. There are css fixes I don't remember what.

 

Okay. Thanks Eric. I'll try it with those fixes. I found this blog: http://css-tricks.com/fighting-the-space-between-inline-block-elements/

 

What do you think of responsive design in general?

Maybe fixed widths and media queries for different screen sizes is a better idea?

 

[i'm not sure if I have the terminology exactly right either]

Link to comment
Share on other sites

No don't have to do media queries. Just use display inline block with font size 0 on the li. And font size whatever on the a.

 

Or you could go the display table way. I'd have to play with it but you can prob get rid of the surrounding div and display table the ul. And get rid if all the ie shit. That should be ie8+ too.

 

But inline block is a perfectly fine solution. The one I'd prob use

Link to comment
Share on other sites

Inline block is probably your best bet. You can remove the frivolous stuff for ie6/7 as they are dead. Removing all white space between the li tags is one way to fix the white space problem. There are css fixes I don't remember what.

 

I know IE6 is dead, but IE7 is still in widespread use (Trust me, I too wish it would die)...

 

For now I still test in IE7 - as long as it renders OK I will let it go to publishing - but major errors like drop-down navs nesting behind carousels, etc. should be fixed if you want to reach 99% of your users.

 

http://theie7countdown.com/

 

^-- \o/

Link to comment
Share on other sites

About internet explorer -- it has caused me several headaches including IE9. I am thinking of writing up a separate stylesheet for IE6,7,8 in a more basic style -- is this a fairly acceptable solution nowadays given the low usage levels?

 

It looks okay but I'm not happy with it since there are several things I just can't seem to do yet.... Like a lack of control --- I want to do X but am forced to do Y instead.

Most of my problems are stemming from attempting to get a responsive page and I am completely confused about what exactly inline-block is and float is and it seems there are pros and cons to both.

 

Anyways, I'll post back tomorrow with specifics.

Edited by Stephenius
Link to comment
Share on other sites

You need to get rid of all the html5 stuff. Only use html 4.01. It fine to write a separate sheet for ie but with a simple site like you have that is not nesisary. We can help you fix everything. Also I would ge rid of the large reset. Basically anything you didn't code get rid of it. You'll spend more time trying to figure out why then doing.

 

Ie doesn't do html5. That's prob 90% of your problems.

Edited by Eric
Link to comment
Share on other sites

Don't go doing all that.

 

Move the HTML5 shiv to the top of your head before your CSS styles.

 

Also, remember, IE7/8 mode in IE9 != IE7/8. The HTML5 shiv will not fire in those modes. Test your site out on a real IE7/8 install (use a Virtual Machine if you have to).

Edited by KevinC
Link to comment
Share on other sites

In addition to Eric's five solutions, here's another which is slightly different.

 

In your solution at present each li tag is 16.666% wide so the space between Moloney Family and Media is smaller than between Media and Gallery.

 

Item 4 on http://www.wickham43.net/dropdownmenus.php has no width for the li tags or for the whole ul tag so the li tags only use what they need and the spacing is equal padding. It does mean that the menu doesn't fill the whole width in a large window, but it always centers even if text in li tags is different. It uses two 50% positions, one positive and the other negative.

 

If the window isn't wide enough, the right end tab(s) drop down, like your's do now.

Edited by Wickham
Link to comment
Share on other sites

I'm going to go at this again today and try to solve this responsive issue.

 

Eric: I got rid of the reset css at the start -- It was unnecessary but I really wanna keep HTML 5. This is my learning site so I can afford to spend time on it using more style sheets for ie.

Kevin: I made that change with the Shiv but problem with IE9 is actually the font. It is not accepting the google font for some reason.

But I'm not going to worry about IE now since I will do a separate stylesheet for IE.

Wickham: This is actually the issue I am most concerned with and spending all my time on --- when I use the float method -- Items drop down below and overlap stuff beneath it (I was hoping to keep them all in a line no matter how small the window size).The method you are suggesting is the same as method 5 in Eric's website but I really want the elements to meet the sides 100% in all window sizes.

When I use the inline block method -- then the elements squish up beside each other no matter how narrow the window -- or at worst, they drop down but they stay inside their parent container. This is good.

But the big problems I am having with inline block method is matching the elements exactly to the margins ie. 100% in all window sizes. There is also an issue of white spaces between the elements -- although there seems to be some fixes for that.

Edited by Stephenius
Link to comment
Share on other sites

Just wrap your nav in a div. by default the div will go 100% width. Put the background and shadow on the div. now just center your ul nav within that

 

Thanks Eric. Great solution. Menu bar resizes without dropping down how i wanted it but I don't understand it - I thought a nav tag was just like a div tag.

Edited by Stephenius
Link to comment
Share on other sites

I'm not familiar with html 5 as it is not done yet so I don't use it. But if nav is display block (as is a ul) then yes it would behave like a div. if it doesn't then your code changed its default behavior. The white disappears because you need to contain the floated li's. here are all the ways http://www.visibilityinherit.com/code/contain-floats.php

Link to comment
Share on other sites

I'm not familiar with html 5 as it is not done yet so I don't use it. But if nav is display block (as is a ul) then yes it would behave like a div. if it doesn't then your code changed its default behavior. The white disappears because you need to contain the floated li's. here are all the ways http://www.visibilit...tain-floats.php

 

I read through the list. Good Advice in there. Method 1 and 3 seem to be the most convenient. Method 1 worked for me -- although I had to add it to the child container aswell -- maybe because the <li>'s are also seen as block elements. I couldn't seem to get method 3 working but my brain is fried for now on this topic.

So anyways, thanks for all your advice, it's helped me to achieve the horizontal navigation menu in 2 different ways and I sort of understand them both now.

 

 

Edited by Stephenius
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...