Bonjour,
Oui, je sais, je m'attaque à un TRES GROS morceau du css avec des connaissances limités. Mais bon qui ne tente rien n'a rien ...
J'ai réussi à glaner çà et là des infos et autres exemples suffisant pour faire un site avec un header + 3 colonnes cote à cote.
Avec ça je me croyais armer pour ma première réalisation en full css.
ET BIEN NON...
Le site devrais être structuré par une div qui contient le contour et la couleur de font du cadre générale.
A l'intérieur un autre div avec les caractéristiques du header.
Ce header aura 2 div une pour le bandeau et l'autre pour le form de recherche. C'est deux div seront cote a cote.
Le problème majeur est que l'utilisation du float fait que les div ne se trouve plus vraiment dans le header mais elle flote au dessus du coût le cadre principale ne s'agrandi pas suivant le contenu, ce qui me posera problème par la suite en intégrant le contenu txt du site (article, menu vertical, ...)
Voici mon code source :
QQ a une idée pour me permettre de contourner cette éffet de flotement ?
Merci
Oui, je sais, je m'attaque à un TRES GROS morceau du css avec des connaissances limités. Mais bon qui ne tente rien n'a rien ...
J'ai réussi à glaner çà et là des infos et autres exemples suffisant pour faire un site avec un header + 3 colonnes cote à cote.
Avec ça je me croyais armer pour ma première réalisation en full css.
ET BIEN NON...
Le site devrais être structuré par une div qui contient le contour et la couleur de font du cadre générale.
A l'intérieur un autre div avec les caractéristiques du header.
Ce header aura 2 div une pour le bandeau et l'autre pour le form de recherche. C'est deux div seront cote a cote.
Le problème majeur est que l'utilisation du float fait que les div ne se trouve plus vraiment dans le header mais elle flote au dessus du coût le cadre principale ne s'agrandi pas suivant le contenu, ce qui me posera problème par la suite en intégrant le contenu txt du site (article, menu vertical, ...)
Voici mon code source :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title><?php require_once('include/meta.php'); ?></title>
<style type="text/css">
.header {
background-color:#EEE;
font-family: Verdana, Arial, sans-serif, Helvetica;
font-size: 12px;
color: #333;
text-align: right;
padding-top: 20px;
padding-right: 10px;
padding-bottom: 20px;
}
#main { border: solid 1px #666; background-color:#FFF}
#div1 { background-color: #f6f6b8; position:relative; width:595px; float: left; }
#div2 { background-color: #c9ebe3; position:relative; width:350px; float: right; }
</style>
</head>
<body>
<div id="main">
<div class="header">
<div id="div1"><script language="javascript" type="text/javascript" src="include/js/pool_pub.js"></script></div>
<div id="div2"><form action="recherche-cherche_result.html" method="post" name="recherche">
<a href="./">Accueil</a> | recherche :
<input name="search" type="text" class="input" id="search" />
<input name="Rechercher" type="image" class="Bt" id="Rechercher" value="Ok" src="images/template/ok-orange.gif" />
</form>
</div>
</div>
</div>
</body>
</html>QQ a une idée pour me permettre de contourner cette éffet de flotement ?
Merci