design extensible

Sujet résolu

Anonyme

27 décembre 2005 à 12:52:45

Bonjour

Je souhaiterais que mon design soit extensible (par exemple en hauteur)
Qu'est ce que je dois rajouter ou modifier ?
PS= j'ai fais une recherche et bizarement je n'ai rien trouvé !

Merci !

strucky

27 décembre 2005 à 12:58:07

Salut !

Comment veux tu que l'on te dise ce qu'il faut que tu rajoutes ou modifies ?

Allez, un p'tit bout de code

Anonyme

27 décembre 2005 à 13:02:35

Ba enfaite c'était en général

Bon par exemple celui la :

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Tad'blogfolio</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="style.css" />
</head>
<body>
<div id="global">
<div id="header"></div>

<div id="barre_menu"></div>
<div class="boutons_menu"><span class="texte_menu">
<a href="#">Home -</a>
<a href="#">Portfolio -</a>
<a href="#">Blog -</a>
<a href="#">Liens -</a>
<a href="#">Contact</a>
</span></div>

<div id="menu_gauche">
<p>
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml11"
alt="Valid XHTML 1.1" height="31" width="88" /></a>
</p>

</div>

<div id="contenu"><p>bla bla bla bla bla bla bla bla bla bla</p>
</div>

<div id="footer">
</div>
</div>
</body>
</html>

et CSS :

body
{
width : 650px;
margin: auto;
background-color: white;
color: #FFFFFF;
border: 1px solid black;
}

#header
{
width: 650px;
height: 123px;
background-image: url("images/header.gif");
background-repeat: no-repeat;

}

#menu_gauche
{
width: 88px;
height: 367px;
margin-bottom: 20px;
background: #805487;
left: 200px;
float: left;
margin-left: 12px;

}

#contenu
{
width: 483px;
height: 366px;
background: #805487;
margin-left: 140px;
top: 150px;
text-align: center;
margin-right: 10px;

}

#footer
{
width : 650px;
height: 25px;
background-image: url("images/footer.gif");
background-repeat: no-repeat;
clear:both;
}

a img
{
border:0;
vertical-align:top;
}

.boutons_menu
{
width: 650px;
height: 22px;
background-image: url("images/menu/fond_barremenu.gif") ;
background-repeat: repeat-y;
text-align: center;
margin-bottom: 20px;
}
.texte_menu
{
font-family: "verdana";
font-size: x-small;
}

a
{
text-decoration: none;
color: white;
margin-left: 6px;
}

#global
{
background-color: #5770B5;
}

Hooli

27 décembre 2005 à 13:12:08

salut

Tu dois mettre les données concernants les grandeurs en %

strucky

27 décembre 2005 à 13:18:15

Bah, pour moi le code que tu as mis fonctionne, car si tu rajoutes des données dans ton <div> contenu, tout s'agrandi correctement, mis à part le menu qui ne s'adapte pas à ce <div>, puisqu'ils ne sont pas "liés".

Anonyme

27 décembre 2005 à 13:40:15

Donc par exemple si je veux que sa soit extensible en hauteur je devrais changer les px et mettre en % ? juste sa ?

strucky

27 décembre 2005 à 13:50:08

Il n'est pas necessaire de définir une hauteur, puisque ton bloc s'agrandira en fonction de son contenu, perso, je ne mets qu'un min-height au cas où le contenu de ce bloc est plus petit que le body, c'est à dire l'écran d'une résolution de 1280*1024.

Anonyme

27 décembre 2005 à 13:52:44

D'accord ! merci !

suman

27 décembre 2005 à 18:17:36

Comme je ne peux pas répondre à moi-même dans mon topic "Ancrage d'un bloc" (il faut attendre 12h, c'est un peu long, non ?), je poste ici car ce topic est lié à mon problème.

En fait, strucky, quand tu dis que tu met un min-height au cas où ya pas assez de texte pour aller en bas, est-ce que ton bloc auquel tu appliques le min-height va vraiment jusqu'en bas du bloc qui le contient (à défaut jusqu'en bas du body). Parce que si c'est le cas, c'est ce qu'il me faudrait, mais moi en plus il ne faudrait pas que ca dépasse de la hauteur de la fenêtre. (Je sais je suis chiant mais c'est un problème soluble je pense, nan ?)

Et au cas où ca marche avec un min-height, comment le faire marcher sous IE ?
Merci.