28172 sujets

CSS et mise en forme, CSS3

Besoin d'aide pour construire un site "Position"

Cssiennes et Cssiens,

Comme le titre l'indique, j'ai besoin d'aide pour comprendre "le positionement" comme je pour mettre mon h1 en bas de mon div haut
Et mettre mon div menu juste à la gauche de mon div content.
Pour facilité tous ça je travaille en pourcentage....

Pour mieux comprendre, j'ai mis les codes

HTML

<div id="haut"><h1>K'ATL</h1>&nbsp;</div>
<div id="content"><h3>TITRE</h3>
	<p><span><strong>1) Content here.</strong></span> column long long column very long fill fill fill long text text column text silly very make long very fill silly make make long make text fill very long text column silly silly very column long very column filler fill long make filler long silly very long silly silly silly long filler make column filler make silly long long fill very.</p>
	<p>very make make fill silly long long filler column long make silly silly column filler fill fill very filler text fill filler column make fill make text very make make very fill fill long make very filler column very long very filler silly very make filler silly make make column column </p>
	</div>
    
<div id="bas">
	<div id="menu">
    	ACCUEIL<br/>
        SERVICES<br/>
        CAPTURE<br/>
        CONTACT<br/>
    </div>
&nbsp;</div>

CSS

@charset "utf-8";
/* CSS Document */
html,body{margin:0;padding:0}

body{
font-family:Calibri, Arial;
}
div#haut{
width:100%;
height:67%;
position:absolute;
top:0;
left:0;
background-color:#A1A5B3;
vertical-align:bottom; 
z-index:0;
}
div#haut h1{
color:#FFFFE6;
line-height:inherit;
position:relative;
background-color:#000;
bottom:0;
font-size:45px;

}

div#bas{
width:100%;
height:33%;
position:absolute;
bottom:0;
left:0;
background-color:#B8BDCC;
z-index:0;
}
div#bas h3{
	position:relative;
	right:100px;
	color:#FFFFE6;
	z-index:1;
}
div#menu{
	position:relative;
	left:22.5%;
	width:70px;
	color:#7F7373;
	text-align:right;
	z-index:2;
	font-size: 14px;
}
div#content{
position: absolute;
width: 550px;        
margin-left: -275px;  
left: 50%;          
height: 450px;       
margin-top: -225px;   
top: 50%;           
background-color: #FFFFFF;
z-index:1;
}

div#content p{
margin:5px 5px 5px 5px;
}


Merci d'avance pour votre aide
Sujet clos
Aller à