Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    May 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS aligning difficulties!!

    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...numberone.html

    & the CSS is at:

    http://www.underoathfans.net/layouts.../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

  • #2
    New Coder
    Join Date
    May 2007
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #3
    New Coder
    Join Date
    May 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Last edited by farmerjeffe2; 05-28-2007 at 03:26 PM.

  • #4
    New Coder
    Join Date
    May 2007
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:

    Code:
    <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.

  • #5
    New Coder
    Join Date
    May 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #6
    New Coder
    Join Date
    May 2007
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •