SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Thread: Overwrite?

  1. #1
    CTO htmlguy's Avatar
    Join Date
    Feb 2005
    Location
    North Carolina
    Posts
    420
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Overwrite?

    Hello Everyone,
    I am creating a site (duh) using complete css posistioning and everything. I have two columns, one for menu (on right) and one for content (on left). I want the content to extend the whole page to go under the menu (horizontal) but I can't figure it out.
    Code:
     <html>
     <head>
     	<title>Infirno Website Design</title>
     	<meta name="keywords" content="website design, website, websites, design, Infirno, infirno, Infirno Website
     	Design, Infirno Design, Infirno Websites">
     	<meta name="description" content="Infirno Website Design designs top quality websites much cheaper than other web
     	designers.">
     <style>
     a:link { color: #CC3300; text-decoration: none; }
     a:visited { color: #CC3300; text-decoration: none; }
     a:hover { color: #FF9900; text-decoration: underline; }
     a:active { background: #FFFF66; text-decoration: dashed; }
     a.what:link { color: #000000; text-decoration: dashed; }
     </style>
     <style>
     ul {
     	margin: 0;
     	padding: 0;
     	list-style: none;
     }
     
     ul li {
     	position: relative;
     	float: left;
     	width:100px;
     }
     	
     li ul {
     	position: absolute;
     	left: 0; /* Set 1px less than menu width */
     	top: auto;
     	display: none;
     	}
     
     /* Styles for Menu Items */
     ul a {
     	display: block;
     	text-decoration: none;
     	color: #cc3300;
     	margin-bottom: -.5em;
     	background: white;
     	padding: 5px;
     	border-top: 0;
     		border-right: 0;
     		border-left: 0;
     		border-bottom: 3px solid #cc3300;
     }
     
     /* commented backslash mac hiding hack \*/ 
     * html ul li a {height:1%}
     /* end hack */ 
     
     /* this sets all hovered lists to red */
     li:hover a, li.over a,
     li:hover li a:hover, li.over li a:hover {
        color: #CC3300;
        background-color: #FDB80A;
        text-decoration: none;
     }
     
     /* set dropdown to default */
     li:hover li a, li.over li a {
     	color: #777;
     	background-color: #fff;
     }
     li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
     li:hover ul, li.over ul { display: block; } /* The magic */
     
     ul.special:a {
        display: block;
     	text-decoration: none;
     	color: #cc3300;
     	margin-bottom: -.5em;
     	background: white;
     	padding: 5px;
     	border-top: 0;
     		border-right: 0;
     		border-left: 0;
     		border-bottom: 3px solid #cc3300;
     }
     </style>
     <style>
     h4 {padding: 0;
     color: #cc3300;
     }
     
     h2 {margin-bottom: -0.30em; margin-right: 1px;
        font: bold 200% Arial, sans-serif; color: #CC3300;
     }
     p.solid {border-style: solid}
     
     div#welcome {
     border-left: 3px solid #cc3300;
     border-top: 3px solid #cc3300;
     width: 500px;
     padding: 2;
     }
     
     div#leftside {
     width: 50%;
     float: left;
     }
     
     div#rightside {
     float: left;
     width: 50%;
     }
     
     a.click:link {
     color: #999999;
     text-decoration: underline;
     }
     
     a.click:hover {
     color: #cc3300;
     text-decoration: overline;
     }
     
     div#welcomearea {
     position: absolute;
     top: 140px;
     left: 15px;
     width: 96%;
     
     </style>
     <style>
     div#menu {
     position: absolute;
     top: 25px;
     left: 505px;
     width: 400px;
     height: 25px;
     }
      
     </style>
     
     </head>
     
     <body>
     
     
     
     
     
     
     <div id="masthead">
     
     <img src="biginfirnologo.gif">
     
     </div>
     <div id="welcomearea">
     <h2>welcome</H2>
     <div id="welcome"> 
     <p>&nbsp;&nbsp;&nbsp;<font size="+1" color="#cc3300"><i>Welcome</i></font>&nbsp;to Infirno Website Design!  H asdfoasdf asdlkfjasldf alsd fjalks lkas flkas jlksa ask lkas lsa dlkasjdklsdjflksaj lksa lkas las ksaj lksajflkj askjal sk j f	sdaflfaskd jalskd alksjasdlk asdkl sallkjalk lksda jlka jlk ajlk ajlka lasdf salkj sdafjf askjd jkldfasjk asjkasfjkfdsjkfsdjkfjk jkjk   sfdlkjasdlfkjasd  dflkaj sflasd  lkajsdf l</p>
     <p>To learn more <a href="#" class="click">click here</a></p>
     
     
     
     </div>
     <div id="menu">
     <ul>
     <li><a href="#">Home</a></li>
     <li><a href="#">About</a></li>
     <li><a href="#">Portfolio</a>
     <ul><li><a href="#">Infirno</a></li>
     <li><a href="#">Team Leaders</a></li></ul></li>
     <li><a href="#">Contact</a></li></ul>
    I would really appreciate any input or links. Thank you all!
    HTMLGuy

  2. #2
    CTO htmlguy's Avatar
    Join Date
    Feb 2005
    Location
    North Carolina
    Posts
    420
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Did I explain it good enough?
    HTMLGuy

  3. #3
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Umm, yes I think I know what you're asking.

    You can put the menu in the content div, and float it right, give it a position:relative, and a fixed height(in pixels).

    When the content expands the div, the menu will stay at it's fixed position within the content div, and the content div's background will wrap underneath the menu.

  4. #4
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    have to guess what your aim is so here is a try

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<title>12345 12345 12345 12345 12345 </title>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css">
    	html,body{/*html for FF Moz NS7 OP */
    	text-align:center; /*IE 5 IE 5.5*/
    	margin:0px;/* no margins body */
    	padding:0px;/* no padding body */
    	height:100%;
    	}
    	/* general */
    	div,p,span,b,a,br{
    	font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
    	font-size:12px;
    	color:#000000;
    	margin:0px;
    	padding:0px;
    	text-align:left;/* to get text back to the left*/
    	font-weight:100;
    	}
    	.left{
    	float:left;
    	width:500px;
    	height:110px;
    	background:#cc66ff;
    	}
    	.logo{
    	float:left;
    	width:100%;
    	height:80px;
    	background:#ffcc66;
    	}
    	.menu{
    	float:left;
    	width:100%;
    	height:30px;
    	background:#ccff66;
    	}
    	.right{
    	background:#33ffcc;
    	}
    	.fcl{clear:both;}
    	</style>
    </head>
    
    <body>
    <div class="left">
    <div class="logo">logo</div>
    <div class="menu">menu</div></div>
    <div class="right">center
    center text center text center text center text center text center text center text
    center text center text center text center text center text center text center text
    center text center text center text center text center text center text center text
    center text center text center text center text center text center text center text
    center text center text center text center text center text center text center text
    center text center text center text center text center text center text center text
    center text center text center text center text center text center text center text
    center text center text center text center text center text center text center text
    center text center text center text center text center text center text center text
    center text center text center text center text center text center text center text
    center text center text center text center text center text center text center text
    center text center text center text center text center text center text center text
    center text center text center text center text center text center text center text
    center text center text center text center text center text center text center text
    center text center text center text center text center text center text center text
    center text center text center text center text center text center text center text
    center text center text center text center text center text center text center text
    center text center text center text center text center text center text center text
    center text center text center text center text center text center text center text
    center text center text center text center text center text center text center text
    center text center text center text center text center text center text center text
    center text center text center text center text center text center text center text
    center text center text center text center text center text center text center text
    center text center text center text center text center text center text center text
    center text center text center text center text center text center text center text
    center text center text center text center text center text center text center text
    center text center text center text center text center text center text center text
    center text center text center text center text center text center text center text
    center text center text center text center text center text center text center text
    center text center text center text center text center text center text center text
    center text center text center text center text center text center text center text
    center text center text center text center text center text center text center text
    center text center text center text center text center text center text center text
    center text center text center text center text center text center text center text
    center text center text center text center text center text center text center text
    center text center text center text center text center text center text center text
    center text center text center text center text center text center text center text
    center text center text center text center text center text center text center text
    center text center text center text center text center text center text center text
    center text center text center text center text center text center text center text
    center text center text center text center text center text center text center text
    center text center text center text center text center text center text center text
    center text center text center text center text center text center text center text
    center text center text center text center text center text center text center text
    center text center text center text center text center text center text center text
    center text center text center text center text center text center text center text
    center text center text center text center text center text center text center text
    center text center text center text center text center text center text center text
    center text center text center text center text center text center text center text
    center text center text center text center text center text center text center text
    center text center text center text center text center text center text center text
    center text center text center text center text center text center text center text
    center text center text center text center text center text center text center text
    center text center text center text center text center text center text center text
    center text center text center text center text center text center text center text
    center text center text center text center text center text center text center text<!--  -->
    <div class="fcl"></div>
    </div>
    <div class="fcl"></div>
    </body>
    </html>

  5. #5
    CTO htmlguy's Avatar
    Join Date
    Feb 2005
    Location
    North Carolina
    Posts
    420
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb

    Now it is coming the menu is under the content when i want it right beside the large welcome. Thanks for the replys!
    HTMLGuy

  6. #6
    CTO htmlguy's Avatar
    Join Date
    Feb 2005
    Location
    North Carolina
    Posts
    420
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile Okay

    I found out my problem. I mispelled float as flaot. That messed me all up! Thanks everybody for your posts!
    HTMLGuy

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,486
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    I mispelled float as flaot
    lol -It's always a good idea to run the html and css through the validator before you pull it apart as the validator will pick up typos like that.

    Glad you found it

  8. #8
    CTO htmlguy's Avatar
    Join Date
    Feb 2005
    Location
    North Carolina
    Posts
    420
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb I should have

    I should of, but I forgot to. I can't believe I asked that question without using the validator. Thanks for all the help! Sorry I asked such a stupid question!
    HTMLGuy


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
  •