First thing first...

**drcolt45** · 11-24-2013, 11:14 PM

Hi everyone,

I'm a beginner and learn a lot via Internet and Youtube Videos but I also get confused a lot sometimes. ( DIVs, Display=block(?) etc )

I'd like to know how "pros" starts a standard layout page. I know the best way is to start with a "wrapper" or "container" which will contain all other Divs and elements.

But can you guys give me YOUR standard code & css for a classic new site. I'll start with that but at least I'll be sure to have the right code and css from the start

Thank you !!

**traq** · 11-25-2013, 01:59 AM

LearnLayout is a pretty good resource. This isn't really something with a generic answer, however. If you want to learn, the best approach is to choose a layout (i.e., sketch it out so you know what you're working towards) and try to code it. Show us what you're working on and ask for help as needed.

**drcolt45** · 11-25-2013, 12:00 PM

Very good page indeed !! But I still have a hard time sticking the footer at the very bottom of my page !! Can you guys help me out with that problem?

CODE:

HTML Code:

<body>

<div id="container">  
	<div id="header">	   
		<div id='cssmenu' >
	<ul>
   	<li class="active"><a href="index.html"><span>Présentation</span></a></li>
   	<li class="has-sub" style="z-index:1005"><a href="index.html"><span>Services</span></a>
      <ul>
         <li><a href="index.html"><span>Terrassement</span></a></li>
         <li><a href="index.html"><span>Excavation</span></a></li>
         <li><a href="index.html"><span>Déneigement</span></a></li>
 		 <li class="last"><a href="index.html"><span>Démolition</span></a></li>
      </ul>
   </li>
      <li class="has-sub" style="z-index:1005"><a href="index.html"><span>Nos Équipements</span></a>
      <ul>
         <li><a href="index.html"><span>Machinerie lourdes</span></a></li>
         <li><a href="index.html"><span>Machinerie légères</span></a></li>
         <li class="last"><a href="index.html"><span>Autres équipement</span></a></li>
      </ul>
   </li>
   <li class="has-sub" style="z-index:1005"><a href="index.html"><span>Location</span></a>
      <ul>
         <li><a href="index.html"><span>Machinerie</span></a></li>
         <li class="last"><a href="index.html"><span>Autres</span></a></li>
      </ul>
   </li>
   <li class="last"><a href="index.html"><span>Coordonnées</span></a></li>
</ul>
</div> 
</div>
    
<div id="wrapper">
	<div id="nav">
<p>&nbsp;</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor leo ut mauris posuere, quis laoreet velit scelerisque. Quisque dolor risus, aliquet ac est commodo, vestibulum feugiat massa. Pellentesque sem ante, auctor quis nibh eget, faucibus venenatis augue. Pellentesque nisl massa, blandit sed pharetra nec, laoreet eget velit. Nunc molestie venenatis augue in adipiscing. Quisque consequat eros id quam rutrum, nec imperdiet sem convallis. Quisque nec venenatis eros. Pellentesque id iaculis magna. Maecenas vehicula ultrices massa non convallis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet aliquam dui. Donec in scelerisque nulla. Proin ullamcorper at felis ut scelerisque.</p> 

<p>Quisque laoreet urna id nulla vestibulum, dapibus elementum tortor interdum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis quis leo enim. Phasellus porttitor, enim vitae adipiscing consequat, ligula nunc porta mauris, vitae malesuada tortor diam a nulla. Integer nisl lectus, aliquet a leo vel, molestie consequat diam. Nam non ultricies augue. Fusce id sapien mi. Praesent tempor purus turpis, quis mattis orci condimentum in. Suspendisse at magna ac purus dignissim suscipit nec nec neque. Donec turpis arcu, ultrices ac mollis quis, molestie eu ligula. Suspendisse potenti. Morbi eleifend eros id ipsum venenatis consequat. Vestibulum laoreet vitae erat non tristique. Proin a libero eros. Duis eu sagittis quam, vitae sollicitudin dolor.</p> 

	</div>
</div>

<div id="footer">

<div style="clear: both"></div>
</div>


</div>

</body>
</html>

CSS:

Code:

body
{
	font-family:Tahoma, Geneva, sans-serif;
	background-image:url(../Images/fondnoir_001.jpg);
	padding: 0px;
	margin: 0px;
	font-size: 0.9em;
	height: auto;
	width: auto;
}

html {
	height:100%;
  	margin:0;
  	padding:0;
}
	
#nav {
	float:left;
	width:800px;
	height:auto;
	background-color:#565656;
	filter: alpha(opacity=70); 	/* internet explorer */
	-khtml-opacity: 0.7;      	/* khtml, old safari */
	-moz-opacity: 0.7;       	/* mozilla, netscape */
	opacity: 0.7;           	/* fx, safari, opera */
	border-radius: 15px;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 0.8em;
	color: #FFF;
	padding-top:0px;
	padding-left:10px;
	padding-right:10px;
	text-align: justify;
	margin-top:0px;
	margin-left: 130px;
}

#header {
	float: left;
	background-image:url(../Images/header_02.png);
	background-repeat:no-repeat;
	width: 100%;
	height:170px;
	top: 0;
	left: 0;
	border-radius: 15px;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 0.7em;
	color: #FFF;
	text-transform: capitalize;
}

#wrapper {
	width:auto;
	margin-left:200px;
	position:relative;
	float: left;
	height: auto;
}

#footer {
	background-image: url(../Images/footer.jpg);
	background-repeat: no-repeat;
	height: 50px; 
	background: blue;
	position:relative;
	bottom: 0;
	width: inherit;
	text-align: center;
}


#cssmenu {
	margin-left:415px;
	position: fixed;
	z-index:10;
	padding-top: 45px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	}
	
#container {
	width: 100%; 
	margin-left: auto;
	margin-right: auto; 
	position: relative;
	min-height: 99%;
}

Thank you very much for your help !