Bonjour.
Voilà, je tente d'accorder ensemble un div top qui a pour height 120px et un div field qui a pour height 100%. Evidemment, sous firefox en tout cas, la dimension du div field n'est pas "le reste libre de l'écran" mais l'écran (100%) + 120px. Ce qui fait que je me retrouve avec un champs field de 100%+120px.
Comment accorder ces deux oiseaux ?
Voici mon code HTML :
Voici le CSS :
Je suis amateur, merci de m'expliciter le plus possible ce que vous voulez dire ^^!
Cordialement !
Modifié par csm (08 Feb 2011 - 11:58)
Voilà, je tente d'accorder ensemble un div top qui a pour height 120px et un div field qui a pour height 100%. Evidemment, sous firefox en tout cas, la dimension du div field n'est pas "le reste libre de l'écran" mais l'écran (100%) + 120px. Ce qui fait que je me retrouve avec un champs field de 100%+120px.
Comment accorder ces deux oiseaux ?
Voici mon code HTML :
<?xml version="1.0" encoding="UTF-8"?>
<!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>Fragments</title>
<style type="text/css" media="screen">
@import url( style.css );
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div class="top">
<div id="logo"></div>
<div id="france"></div>
</div>
<div class="field">
<div id="text">
Paris change! mais rien dans ma mélancolie<br/>
N'a bougé! palais neufs, échafaudages, blocs,<br/>
Vieux faubourgs, tout pour moi devient allégorie<br/>
Et mes chers souvenirs sont plus lourds que des rocs.<br/>
Aussi devant ce Louvre une image m'opprime:<br/>
Je pense à mon grand cygne, avec ses gestes fous,<br/>
Comme les exilés, ridicule et sublime<br/>
Et rongé d'un désir sans trêve! et puis à vous,<br/>
Andromaque, des bras d'un grand époux tombée,<br/>
Vil bétail, sous la main du superbe Pyrrhus,<br/>
Auprès d'un tombeau vide en extase courbée<br/>
Veuve d'Hector, hélas! et femme d'Hélénus!<br/><br/>
Je pense à la négresse, amaigrie et phtisique<br/>
Piétinant dans la boue, et cherchant, l'oeil hagard,<br/>
Les cocotiers absents de la superbe Afrique<br/>
Derrière la muraille immense du brouillard;<br/><br/>
A quiconque a perdu ce qui ne se retrouve<br/>
Jamais, jamais! à ceux qui s'abreuvent de pleurs<br/>
Et tètent la Douleur comme une bonne louve!<br/>
Aux maigres orphelins séchant comme des fleurs!<br/><br/>
Ainsi dans la forêt où mon esprit s'exile<br/>
Un vieux Souvenir sonne à plein souffle du cor!<br/>
Je pense aux matelots oubliés dans une île,<br/>
Aux captifs, aux vaincus!... à bien d'autres encor!
</div>
</div>
</body>
</html>
Voici le CSS :
html,body {
font:12px 'Lucida Grande', 'Gill Sans', Verdana, 'Trebuchet MS', Helvetica, sans-serif;
background-image: url(img/flower.jpg);
background-repeat: repeat;
height: 100%;
width: 100%;
border: none;
margin:0%;
padding:0%;
}
#logo {
background-image: url(img/paris.png);
float: left;
display: inline;
width: 46px;
height: 120px;
}
#france {
background-image: url(img/france.png);
background-repeat: no-repeat;
float: left;
display: inline;
width: 615px;
height: 114px;
}
a:link {
background-color:inherit;
color:#FF9933;
}
a:visited {
background-color:inherit;
color:#FF9933;
}
a:hover {
background-color:inherit;
color:#FF6600;
}
#menu {
background-color:transparent;
color:#000;
margin-left:20%;
margin-right:20%;
}
#text {
background-color:transparent;
color:#000;
float: left;
margin-top: 2%;
margin-left:6%;
text-align:justify;
}
#title {
background-color:transparent;
color:#FF6600;
margin-top:1%;
text-align:center;
font-variant:small-caps;
text-decoration:underline;
font-weight: bold;
font-size:16px;
}
#name {
background-color:transparent;
color:#fff;
margin-left:80%;
font-weight: bold;
}
.top {
background-image: url(img/haut.png);
background-repeat: repeat-x;
float: center;
width: 100%;
height: 120px;
}
.prinh {
background-image: url(img/prinhaut.png);
width: 1200px;
height: 15px;
}
.field {
background-image: url(img/prin.png);
background-repeat: repeat-y;
width: 1200px;
height: 100%;
margin-left: auto;
margin-right: auto;
}
.perso {
background-image: url(img/perso.png);
vertical-align: bottom;
float: right;
width: 472px;
height: 656px;
}Je suis amateur, merci de m'expliciter le plus possible ce que vous voulez dire ^^!
Cordialement !
Modifié par csm (08 Feb 2011 - 11:58)
