CSS Question

Discussion in 'Web Design and Development' started by monke, Sep 7, 2006.

  1. monke macrumors 65816

    monke

    Joined:
    May 30, 2005
    #1
    I'm currently trying to learn CSS, so this question is going to sound complete 'noobish'. Just a warning.


    I've got my page linked to my external style sheet, and it all works properly.

    In the page coding I've put <div id="header"> in. If I want that aligned to the center of the page where do I put it and how? In the external style sheet or the page?
     
  2. iMeowbot macrumors G3

    iMeowbot

    Joined:
    Aug 30, 2003
    #2
    Okay, let's say that you have, for example:

    Code:
    <div id="header">
    	Meow.
    </div>
    
    To put that into a fairly narrow centered div, you could use this in your CSS:

    Code:
    		div#header {
    			margin-left: auto; 
    	     		margin-right: auto;
    			width:10em;
    			border:thin solid black;
    		}
    
    (the border is simply for illustrating the boundaries)

    To get the text centered within the div, add to the above CSS thingmabob:
    Code:
    			text-align:center;
    
    Make sure when messing with formatting like this that you don't toss your browser into quirks mode -- that is, if you're using CSS formatting, use it everywhere and stay away from the old Netscape tags (and make sure your HTMl validates). Otherwise, you'll need to add extra gobbledygook to get around quirks.
     
  3. monke thread starter macrumors 65816

    monke

    Joined:
    May 30, 2005
    #3
    Thanks for the quick reply, iMeowbot. Expect more simple questions, they might be on their way :D
     
  4. monke thread starter macrumors 65816

    monke

    Joined:
    May 30, 2005
    #4
    As I said, expect another question. Here it is:

    Code:
    #header {
    	margin-top: 15px;
    	background-image: url(link);
    	background-color: #DADADA;
    	background-repeat: repeat-x;
    	margin-left: auto; 
    	margin-right: auto;
    	height: 130px;
    	width: 780px;
    }
    #navigation {
    	background-image: url(link);
    	background-color: #003973;
    	background-repeat: repeat-x;
    	margin-left: auto; 
    	margin-right: auto;
    	height: 38px;
    	width: 780px;
    }
    I need the navigation to go underneath the banner, help? BTW, is that code correct?
     
  5. Laslo Panaflex macrumors 65816

    Laslo Panaflex

    Joined:
    May 1, 2003
    Location:
    Tokyo
    #5
    Just put the navigation div under the closed header div in the html.
     
  6. monke thread starter macrumors 65816

    monke

    Joined:
    May 30, 2005
    #6
    Like this?
    Code:
    <div id="header">
    <div id="navigation">
    I tried that, and even a line between both, but the 'navigation' div lines up on top of the 'header' div.
     
  7. dejo Moderator

    dejo

    Staff Member

    Joined:
    Sep 2, 2004
    Location:
    The Centennial State
    #7
    Kinda, but like this:
    Code:
    <div id="header"></div>
    <div id="navigation"></div>
     
  8. monke thread starter macrumors 65816

    monke

    Joined:
    May 30, 2005
    #8
    Wow, do I ever feel like an idiot? :eek:

    Thanks alot. Expect more :)
     
  9. monke thread starter macrumors 65816

    monke

    Joined:
    May 30, 2005
    #9
    I'm baaaack. Here's what's happening:

    I'm trying to get a logo centered within the banner, but can't seem to do it. I've got the logo ontop, but cannot seem to center it.

    Thanks again :)
     
  10. iMeowbot macrumors G3

    iMeowbot

    Joined:
    Aug 30, 2003
    #10
    This gets a little harder because we don't see here what CSS and HTML you have surrounding the image, but in general, the CSS to make an image center would be something like:

    Code:
    img.centeredimg {
    	display: block;
    	margin-left: auto;
    	margin-right: auto;
    }
    
    Code:
    <img class="centeredimg" src="btsux.png" alt="Bluetooth sucks">
    The "display: block" is what makes it act div-like.
     
  11. monke thread starter macrumors 65816

    monke

    Joined:
    May 30, 2005
    #11
    That worked perfectly, but where could I stick the 'a href' to link it?
     
  12. iMeowbot macrumors G3

    iMeowbot

    Joined:
    Aug 30, 2003
    #12
    :D

    Okay, so you want an anchor and an img! You can use another div then, those are good when you want to wrap up more than one tag pair with a single set of attributes.

    div.mylogo { width:200px; margin-left: auto; margin-right: auto; text-align:center; }

    <div class="mylogo"><a href="niftypage.html"><img src="btsux.png" alt="Bluetooth sucks"></a></div>


    (Make the div width as wide as the image, or a wee bit more)
     
  13. dejo Moderator

    dejo

    Staff Member

    Joined:
    Sep 2, 2004
    Location:
    The Centennial State
    #13
    monke, this is starting to veer away from CSS and into basic HTML. I'd suggest you find an online tutorial or pick up a good book on getting started with HTML. Hope that didn't come across too hard-assed. :)
     
  14. monke thread starter macrumors 65816

    monke

    Joined:
    May 30, 2005
    #14
    Thanks :)

    I'm trying to learn off w3schools, but it just doesn't sink in. Got any book recommendations dejo?
     

Share This Page