Design flexible
JoE
-
JoE -
JoE -
Tout d'abord bonjour à tous! J'espère que vous pourrez m'aider! Je précise je débute lol
Je vais pas y aller par quatre chemin voici un aperçu de mon design:
<image>https://imageshack.com/
De chaque coté du "corps" se trouve une colonne (noire avec les effets marrons). J'aimerais que ces colonnes soient de la même longueur que le "corps" et donc extensibles en fonction de la taille du "corps" (selon la quantité de textes). Merci d'avance!
Ma page index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Site Perso</title>
<meta http-equiv="Content-Type" content="text/html; charset= Unicode (UTF-8)"" />
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="design.css" />
</head>
<body>
<map name="Map" id="Map">
<area shape="rect" coords="209,-1,315,24" href="index.html" />
<area shape="rect" coords="333,1,370,21" href="cv.html" />
<area shape="rect" coords="489,-2,563,18" href="contact.html" />
</map>
<div id="en_tete">
<?php include("banner.php"); ?>
</div>
<div id="colgauche">
</div>
<div id="coldroite">
</div>
<div id="corps">
<p><center>Bienvenue sur mon site!!!!</center></p>
.......
</div>
<div id="pied_de_page">
<p><br/><br/><center>Copyright "" 2008, tous droits réservés</center></p>
</div>
<?php include("bas.php"); ?>
</div>
</body>
</html>
Ma page design.css:
body
{
width: 800px;
margin:0 auto; /* Pour centrer notre page */
margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
margin-bottom: 20px; /* Idem pour le bas du navigateur */
background-image: url("images/fond.png"); /* Une petite image de fond pour éviter d'avoir un vieux fond blanc */
background-color: #000000;
}
#banmenu { ---> (bannière appelée par l'include)
margin: -6px;
background-color: #000000;
padding:0px;
margin-left:0px;
}
#colgauche {
background-image: url("images/barleft.jpg");
float : left;
width : 200px;
}
#coldroite {
background-image: url("images/barright.jpg");
width: 79px;
height: 100px;
float: right;
}
#corps {
background-color:;
border: 0px;
color: #FFFFFF;
background-image:url("images/fond.jpg");
margin-left:79px;
width:600px;
padding:20px;
font: Arial;
font-size: 13px;
}
#pied_de_page {
color: #FFFFFF;
background-image:url("images/foot.jpg");
margin-left:79px;
width:600px;
padding:20px;
font-size: 12px;
}
#bas {
margin-left:79px;
width:642px;
height:70px;
}
Je vais pas y aller par quatre chemin voici un aperçu de mon design:
<image>https://imageshack.com/
De chaque coté du "corps" se trouve une colonne (noire avec les effets marrons). J'aimerais que ces colonnes soient de la même longueur que le "corps" et donc extensibles en fonction de la taille du "corps" (selon la quantité de textes). Merci d'avance!
Ma page index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Site Perso</title>
<meta http-equiv="Content-Type" content="text/html; charset= Unicode (UTF-8)"" />
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="design.css" />
</head>
<body>
<map name="Map" id="Map">
<area shape="rect" coords="209,-1,315,24" href="index.html" />
<area shape="rect" coords="333,1,370,21" href="cv.html" />
<area shape="rect" coords="489,-2,563,18" href="contact.html" />
</map>
<div id="en_tete">
<?php include("banner.php"); ?>
</div>
<div id="colgauche">
</div>
<div id="coldroite">
</div>
<div id="corps">
<p><center>Bienvenue sur mon site!!!!</center></p>
.......
</div>
<div id="pied_de_page">
<p><br/><br/><center>Copyright "" 2008, tous droits réservés</center></p>
</div>
<?php include("bas.php"); ?>
</div>
</body>
</html>
Ma page design.css:
body
{
width: 800px;
margin:0 auto; /* Pour centrer notre page */
margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
margin-bottom: 20px; /* Idem pour le bas du navigateur */
background-image: url("images/fond.png"); /* Une petite image de fond pour éviter d'avoir un vieux fond blanc */
background-color: #000000;
}
#banmenu { ---> (bannière appelée par l'include)
margin: -6px;
background-color: #000000;
padding:0px;
margin-left:0px;
}
#colgauche {
background-image: url("images/barleft.jpg");
float : left;
width : 200px;
}
#coldroite {
background-image: url("images/barright.jpg");
width: 79px;
height: 100px;
float: right;
}
#corps {
background-color:;
border: 0px;
color: #FFFFFF;
background-image:url("images/fond.jpg");
margin-left:79px;
width:600px;
padding:20px;
font: Arial;
font-size: 13px;
}
#pied_de_page {
color: #FFFFFF;
background-image:url("images/foot.jpg");
margin-left:79px;
width:600px;
padding:20px;
font-size: 12px;
}
#bas {
margin-left:79px;
width:642px;
height:70px;
}
A voir également:
- Design flexible
- Telecharger wincc flexible 2008 - Forum Téléchargement
- Azura home design avis ✓ - Forum Consommation & Internet
- Enlever stb refsw design - Forum Ecran
- Home design jeux gratuit - Télécharger - Divers Jeux
- Memup feel design - Forum Disque dur / SSD
