Centering a navigation bar to fit all screen resolutions.

My personal website is lifesgreatquotes. com (it’s a domain I used to use but thought we would redesign) I’m taking care of a tutorial website and I’m uploading what I’ve done to that domain anyways. I’m using div tags and We can center my header div by means of setting my image to be a background in CSS in addition to centering the back button and y, also I could center the family table and footer but I’m developing a problem with the nav bar because I’d like to see it to become rollover bar, the buttons will healthy the table accurately 920px. But I’d like the nav bar to go from one end on the next look from my site such as. Any help would be appreciated the simplest method will be the most effective many thanks.

Robert

i never see a nav bar. i’ll check back again.

HTML:
div location: relative; width: whateverpx; border: 0px auto 0px auto; 

Well Pondered the design for a mockup but been messing for it since so that is certainly problly y you never see a entire nav bar though the silver gradient represents the nav.

well a artwork doesn’t do much for me but i written you a basic framework influenced by what code you are doing have. i noticed you do have a 3 section nav package so i caused that.

HTML:
< html>
< head>
< style>
* border: 0px;
#nav screen: block;
. nav_main screen: inline-block; width: 33%; border-bottom: strong;
< /style>
< /head>
< body>
< div id='nav'>
< div class='nav_main'> 1< /div>
< div class='nav_main'> 2< /div>
< div class='nav_main'> 3< /div>
< /div>
< /body>
< /html>

examine how this works to find what works available for you.

For this you may have to ditch the percentage for any width in the centre navbar section. Placed the width about #middlenavbar to 920px with margin: auto;

See if that works available for you – it did to do in Firefox.

Many thanks,

sorry alpha bur preset width outside min-width or perhaps max-width is unwell advised. you always want full page layouts to be substance. anything else is actually bad design. try your suggestion in a moch up and then view it over a netbook. you’ll have things appearing out of alignment. not to say droids and iphones. if you don’t did browser acknowledgement and changed the actual css per visitor type.

Dorky – POST agree – but that was not the question – this is what was asked :

and my answer works for this.

There’s a specific width specified in the CSS and so this may not be a fluid layout in the first place

i realize. but i don’t advise he make use of fixed width either. thats why we didn’t build it doing this. not knocking you at all girly.

Dorky – I am aware – ‘s ALL RIGHT. I advocate substance layouts myself – but noticed source and CSS and (perhaps wrongly) decided it could take too much time to explain why and the way to redo the site – that you’re more precise plus concise than POST –

MichealA – in the event you truly want this to become user-friendly site, on more devices than only a full-sized computer, heed Dorky’s suggestions and go h2o – and restore your CSS – you’ve #body listed two times, with different properties every time, plus you are in your page also!

Well you see I don’t have a very problem centering the buttons I’ve 5 buttons in a very middle div then Concerning a div into the left and right on the middle I need 3 divs to appear as one but when i view my site over a smaller screen just like my iPhone for instance I want just the center to fit the screen I determined 920 fits most screens with pretty much or no history showing. When I center the center it’s all good women and men left and correct div collapses towards middle.

well what you’re asking is not possible the method that you are going about it. you want it to suit 920 but this screen max is actually 920. even whenever each side div seemed to be only 1px, if you get down to 920 along side it divs have nowhere to go, so they fall down. if you expect them never to, they have to have room to keep in-line. what do you want in the aspect divs if nothing then you definately are overcomplicating it.

HTML:
html>
< head>
< style>
* border: 0px;
#nav screen: block; border: strong 1px #ff0000;
. nav_main screen: block; min-width: 920px; border: 0px auto 0px auto; border-bottom: solid 1px;
< /style>
< /head>
< body>
< div id='nav'>
< div class='nav_main'> nav< /div>
< /div>
< /body>
< /html> 

or

HTML:
< html>
< head>
< style>
* border: 0px;
#nav screen: block; border: strong 1px #ff0000;
. nav_main screen: block; COLOR=Navywidth: 920px/COLOR; border: 0px auto 0px auto; border-bottom: solid 1px;
< /style>
< /head>
< body>
< div id='nav'>
< div class='nav_main'> nav< /div>
< /div>
< /body>
< /html> 

at any rate i think there are enough examples of how to work with width and margins in order to center anything.

Should you check out lifesgreatquotes. com Since is how I want to it. What I have was make that left right component to the nav standard in Photoshop the center is a spry there are numerous ways I wanted it if you adjust your online browser you’ll see the spry stays in the centre bit the eventually left and right get smaller staying centered. Is there any easier way to accomplish this or is this the only way Thanks for all those hour responses but at least I got it to look the way I wanted it.

spry. why would anyone gather help if they’re just going to depend on cms and 3rd party stuff. just click it till you fix it. or post it from the right place much like the dreamweaver or cms area. notice the HTML PAGE and CSS topic line this will likely sound rash but should you be just dropping in chunks of code and also have no desire to comprehend it you are usually wasting everyones time inside a CODE section on the forum.

Ok nevertheless it still involes CSS brainiac.

Intended for future use, please make use of the proper BBCODE tags for Html page, namely HTML.

This entry was posted in Web Design and tagged , , , , , , , , , , , , , , , , , , , . Bookmark the permalink.

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *