SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot Stancy_McKatt's Avatar
    Join Date
    May 2002
    Location
    NW Tennessee, USA
    Posts
    164
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do I align this?

    I'm just learning CSS so this may be something Really simple...*shrugs*

    I'm trying to make a two box layout, this is what I have so far: http://crazyaboutdrawing.0catch.com/petz/
    NOTICE: None of the links on the page work.... yet.

    The menu's supposed to be on the left with a background of a dark green (Probably this seagreen color) then the paragraph that's currently under that at the right.

    I heed help with:

    1.)How do I get the background color on the menu?

    2.) How do I get the text to line up on the right side of the menu?

    If you need anymore information just ask.

    Thanks.

  2. #2
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    SvÝ■jˇ­
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    background-color:#ffffff;text-align:right;
    (change #ffffff to whatever color you prefer )

    Updated: OK, I got your question wrong
    Thought you meant align menu text to the right...

    A simple non-css way to get the text to the right of the menu is using a table
    <table>
    <tr>
    <td>
    Menu
    </td>
    <td>
    Text
    </td>
    </tr>
    </table>
    Last edited by jofa; Jun 10, 2002 at 12:05.

  3. #3
    SitePoint Zealot ChrisOSX's Avatar
    Join Date
    May 2002
    Posts
    104
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Best of Luck

    Here is an easy way to do it:

    #Content {
    margin:20px 50px 50px 200px;
    padding:10px;
    }

    #Menu {
    position:absolute;
    top:20px;
    left:20px;
    width:172px;
    padding:10px;
    background-color:#6c6;
    }

    This will give you two columns to work with. You might want to add a border to your menu so that it is easier for your users to identify.

    Have a look at this link, it will show you a very nice two column layout that seems to be very close to what you are after:

    http://bluerobot.com/web/layouts/layout1.html

    There is a link at the bottom of the page to the CSS code.

  4. #4
    SitePoint Zealot Stancy_McKatt's Avatar
    Join Date
    May 2002
    Location
    NW Tennessee, USA
    Posts
    164
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think that the bug's in my HTML, not My CSS... Still not sure though so here's both.

    Code:
    <html>
    <head>
    <title>Stancy McKatt's Hangout</title>
    <meta name="GENERATOR" content="Arachnophilia 4.0">
    <meta name="FORMATTER" content="Arachnophilia 4.0">
    <link rel="stylesheet" HREF="petzsite.css" type="text/css">
    </head>
    <body><nobanner>
    <div class="#Menu">
    
    <P><a href="adopt.html">Adoption Center</a><br>
    This is where some cute pet is just waiting for you to take it home.Come on in and look around.</P>
    
    <P><a href="shows.html">Show Ring</a><br>
    This is where you can enter your petz in shows and show them off. Your pet might even win an award!</P>
    
    <div class="#Content"> 
    <P> Hello and welcome to Stancy McKatt's Hangout! This site is about the game's Catz, Dogz, and Petz. 
    Come in and Look around. I hope hope that you enjoy your stay. 
    If you have any troble feel free to contact me via the form <a href="contactme.html">Here</a> or by leaveing a post on the <a href="messageboard.html">Message board</a></p>
    
    </body>
    </html>
    Now here's the Css....

    Code:
    body {
    	margin:0px;
    	padding:0px;
    	font-family:verdana, arial, helvetica, sans-serif;
    	color:#cccff;
    	background-color:ccccff;
    	scrollbar-base-color: lavender; 
    	scrollbar-arrow-color: green; 
    	scrollbar-DarkShadow-Color: silver;  
    	}
    
    a {
    text-decoration: none; 
    font-weight: bold; 
    color: #0099ff; 
    outline: none;
    text-decoration: underline;
    }
    
    a:visited {
    color: #0099ff;
    text-decoration: underline;
    }
    
    a:active {
    color: #0099ff;
    text-decoration: underline;
    }
    
    a:hover {
    color: #0099ff;
    text-decoration: underline;
    }
    
    p { color: #000000; font:11px/20px verdana, arial, helvetica, sans-serif;
    margin:0px 0px 16px 0px;
    padding:0px;
    }
    h1 {
    	margin:0px 0px 15px 0px;
    	padding:0px;
    	font-size:28px;
    	line-height:28px;
    	font-weight:900;
    	color:#000000;
    	}
    
    img { 
    border: 0;
    }
    
    #content {
               float: right;
    	margin:0px 50px 50px 200px;
    	padding:10px;
    	}
    
    #menu {
               float: left;
    	top:100px;
    	left:20px;
    	width:172px;
    	padding:10px;
    	background-color:#ccccff;
    	border:1px dashed #9999ff;
    	line-height:17px;
    	}

    Can anyone point out what's wrong? Pleas? or at least give me some ideas as to what to try?

    This is driveing me nuts .

    EDIT: left somthing out.
    Last edited by Stancy_McKatt; Jun 11, 2002 at 22:04.

  5. #5
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    SvÝ■jˇ­
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Error: end tag for "DIV" omitted; possible causes include a missing end tag, improper nesting of elements, or use of an element where it is not allowed
    W3C HTML Validation Service

    That's always a good start

    The CSS error part:

    Change <div class="#Menu">
    to <div id="Menu">
    (or change it to <div class="Menu> and also #Menu in style definition to .Menu)

    The prefix # is only used in style definitions to specify that you mean an ID
    (And . prefix is used for classes)
    Last edited by jofa; Jun 12, 2002 at 14:19.

  6. #6
    SitePoint Zealot Stancy_McKatt's Avatar
    Join Date
    May 2002
    Location
    NW Tennessee, USA
    Posts
    164
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking THANK YOU JOFA!

    I tried what you suggested and.. It works! Thanks a bunch.

    Originally posted by jofa

    The prefix # is only used in style definitions to specify that you mean an ID
    (And . prefix is used for classes)
    That makes sence.... Now anyway.

    Thanks to everyone that replied, your help was greatly apprecated.


    EDITED: for spelling.
    Last edited by Stancy_McKatt; Jun 12, 2002 at 14:55.

  7. #7
    SitePoint Enthusiast
    Join Date
    May 2002
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation A little help here

    Could someone break this CSS up and tell me how to implement it? I think it needs to be cleaned up, and I'm not sure what code I put within the <BODY> tags.

    Taken from the above site : http://bluerobot.com/web/layouts/layout1.html


    body {
    margin:0px;
    padding:0px;
    font-family:verdana, arial, helvetica, sans-serif;
    color:#333;
    background-color:white;
    }
    h1 {
    margin:0px 0px 15px 0px;
    padding:0px;
    font-size:28px;
    line-height:28px;
    font-weight:900;
    color:#ccc;
    }
    p {
    font:11px/20px verdana, arial, helvetica, sans-serif;
    margin:0px 0px 16px 0px;
    padding:0px;
    }
    #Content>p {margin:0px;}
    #Content>p+p {text-indent:30px;}

    a {
    color:#09c;
    font-size:11px;
    text-decoration:none;
    font-weight:600;
    font-family:verdana, arial, helvetica, sans-serif;
    }
    a:link {color:#09c;}
    a:visited {color:#07a;}
    a:hover {background-color:#eee;}

    #Header {
    margin:50px 0px 10px 0px;
    padding:17px 0px 0px 20px;
    /* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
    height:33px; /* 14px + 17px + 2px = 33px */
    border-style:solid;
    border-color:black;
    border-width:1px 0px; /* top and bottom borders: 1px; left and right borders: 0px */
    line-height:11px;
    background-color:#eee;

    /* Here is the ugly brilliant hack that protects IE5/Win from its own stupidity.
    Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it.
    IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style
    declaration. The incorrect IE5/Win value is above, while the correct value is
    below. See http://glish.com/css/hacks.asp for details. */
    voice-family: "\"}\"";
    voice-family:inherit;
    height:14px; /* the correct height */
    }
    /* I've heard this called the "be nice to Opera 5" rule. Basically, it feeds correct
    length values to user agents that exhibit the parsing error exploited above yet get
    the CSS box model right and understand the CSS2 parent-child selector. ALWAYS include
    a "be nice to Opera 5" rule every time you use the Tantek Celik hack (above). */
    body>#Header {height:14px;}

    #Content {
    margin:0px 50px 50px 200px;
    padding:10px;
    }

    #Menu {
    position:absolute;
    top:100px;
    left:20px;
    width:172px;
    padding:10px;
    background-color:#eee;
    border:1px dashed #999;
    line-height:17px;
    /* Again, the ugly brilliant hack. */
    voice-family: "\"}\"";
    voice-family:inherit;
    width:150px;
    }
    /* Again, "be nice to Opera 5". */
    body>#Menu {width:150px;}

  8. #8
    SitePoint Wizard
    Join Date
    Oct 2001
    Location
    Tucson, Arizona
    Posts
    1,858
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: A little help here

    Originally posted by CosmicCatalyst
    Could someone break this CSS up and tell me how to implement it? I think it needs to be cleaned up, and I'm not sure what code I put within the <BODY> tags.
    The code looks fine. None of it needs to be put in the BODY of the page. Refer to the source document for implementation.

  9. #9
    SitePoint Zealot ChrisOSX's Avatar
    Join Date
    May 2002
    Posts
    104
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this and you'll see how the CSS is working:

    Code:
    <body>
    
    <div id="header">Here's your header</div>
    <div id="content">Here is some exciting  content.</div>
    <div id="menu">
      o Menu Item one
      o Menu Item two
      o Menu Item three
    </div>
    
    </body>
    You'll see the three zones now and how they are working together.


Bookmarks

Posting Permissions

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