...

View Full Version : CSS aligning difficulties!!



farmerjeffe2
05-27-2007, 06:30 PM
Hey guys, i'm new here and i have got my self in a bit of a pickle with my CSS!!

I am playing about with a new layout so some of it doesnt work but the basic site is at:

http://www.underoathfans.net/layouts/almostlay1/attemptnumberone.html

& the CSS is at:

http://www.underoathfans.net/layouts/almostlay1/vidportal.css


I don't have a clue how to align the drop down text navigation centred and fear i have some useless css styles in there aswell.

I would love for someone to help me out with that.

Also i would like the main image and also the navigation to be fixed in the middle of the page. for example, if i wanted to resize the browser it would stay exactly where it is and scrollbars appear accordingly.

If you understand i hope you can help.

Thanks

Adam

vanilladesign
05-28-2007, 11:27 AM
I think the main problem is having too much code you don't understand. Just keep it simple, ditch the javascript and html tables, they're both unnecessary and can be done in css with much less code. I can give you more specific advice if your unsure on how to do this.

farmerjeffe2
05-28-2007, 01:34 PM
Ok so i am attempting to edit from scratch a Suckerfish drop down menu but im having difficulties!

here you will find the test page:

http://www.underoathfans.net/navbar.html

the css is:

http://www.underoathfans.net/navstyle.css

____________________________________________
Basically, I was wondering where in the stylesheet and HOW in the stylesheet i would edit or add code to center align the entire navbar or place it where ever i want as one block that will not move at all even when the browser is resized. almost like overflow. If you understand.

Thanks

Adam

vanilladesign
05-28-2007, 09:13 PM
For a start take the nav bar out of the table, it will make things a lot easier to position without having to worry about the table properties. So now your code should look like this:



<ul id="nav">
<li><a href="#">Home</a>

</li>

<li><a href="#">The Band</a>
</li>

<li><a href="#">Media</a>
<ul>
<li><a href="#">Discography</a></li>
<li><a href="#">Lyrics</a></li>

<li><a href="#">Tabs</a></li>
</ul>
</li>

<li><a href="#">Downloads</a>
<ul>
<li><a href="#">Images</a></li>
<li><a href="#">Audio</a></li>

<li><a href="#">Videos</a></li>
</ul>
</li>

<li><a href="#">Tour</a>
</li>

<li><a href="#">WWW</a>
<ul>

<li><a href="#">Affiliates</a></li>
<li><a href="#">Links</a></li>
</ul>
</li>
</ul>


To center the nav bar, find '#nav, #nav ul ' in your css and at the moment it reads margin: 0;. Change this to margin: auto; This will center the nav bar in the middle of the screen no matter what resolution the viewers monitor is.

But from what I've read this is not what you want. From what I understand about your posts you want a fixed measurement from the side of the browser to the start of the nav bar. To do this instead of using margin:auto; change it to margin-left: 200px; Your going to need to play around with the '200px' untill it looks centered on the page.

This is probably isn't a good idea because it may look centered on your 1024 x 768 resolution, but when you view it on my wide screen laptop, it's going to be positioned really badly.

Hope this helps.

farmerjeffe2
05-29-2007, 12:40 AM
yeh thanks that does help! I don't understand how this website fixes there nav bar...

http://www.fuse.tv/videos

it doesnt move, only the background moves.

vanilladesign
05-29-2007, 01:52 AM
I haven't looked at the code but it looks like they've got a <div> with a width of about 1000px and the background image. Then they have a nested <div> inside this with the navigation. I don't know what you mean by
it doesnt move, only the background moves. because everything is fixed and doesn't move when I view it. Viewing that page on a resolution of anything other than 1024 x 768 looks bad.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum