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
- Enlever stb refsw design - Forum Téléviseurs
- Azura home design avis ✓ - Forum Consommation & Internet
- Probleme hdmi toshiba 43FU3D63DA - Forum Ecran
- Home design jeux gratuit - Télécharger - Divers Jeux
- Iphone 14 design - Guide
