Tom's Guide > Forum > Programmation > float html

float html

Forum Programmation : float html

TomsGuide.com : 800 000 inscrits répondent à toutes vos questions high-tech et informatique. Pour obtenir de l'aide, inscrivez-vous gratuitement !
Mot :    Pseudo :           
 

bonjours j'ai un problème pour mon site j'ai :

<div id="milieu">
<div id="menu"></div>
<div id="contenu"></div>

voila et les div menu et contenu sont en float left et right j'aimerais qu'ils fassent la même taille tout la page height 100% mais sa ne marche pas

#milieu
{
overflow: auto ; }
#menu
{
width: 168px;
background-color: pink;
float: left;
}


#contenu
{
width: 610px;
float: right;
background-color: #EAF1EA;
}

Liens sponsorisés
Inscrivez-vous ou connectez-vous pour masquer ceci.
- 0 +

Salut,

Ajoute width:100%; dans tes trois blocs CSS pour #milieu, #menu et #contenu et ça sera bon.

Répondre à OmaR

salut non je ne pense pas mettre un width: 100% car si tu regardes bien mais div on déjà un width de taille précis c'est juste que je veux que le float left qui es en rose deviens de la même longueur que le float right en gris .merci quand même de ta réponse

Répondre à ridespirit
- 0 +

désolé j'ai dit width, je voulais dire height.
Au temps pour moi
Met un height:100%; dans tes trois blocs

Répondre à OmaR

désolé mais sa ne marches pas ! on m'as parlé de clear both dans le css mais je ne sais pas si quelqu'un peut m'aider

Répondre à ridespirit
- 0 +

J'ai testé ce que je t'ai dit et ça marche très bien.
Si tu mets un height:100% sur les trois blocs, tu vas avoir ton bloc milieu qui va prendre toute la largeur et toute la hauteur.
Ton bloc menu qui va être à gauche et qui prendra toute la longueur de la page
Ton bloc contenu qui va être à droite et qui prendra toute la longueur de la page.

Répondre à OmaR

désolé sa ne marches pas

[b]* { margin: 0px; padding: 0px; }
html {background-image:url("coeur01.png" );}
body { text-align: center;}
#body
{
margin: auto;
text-align: left;
width: 780px;
border-left: 1px solid;
border-right: 1px solid;
}

#entete
{
height: 100px;
background-color: silver;
background-image:url("logocoluche.jpg" );
}
#milieu
{
overflow: auto;
height:100%;}
#menu
{
width: 168px;
background-color: pink;
float: left;
height:100%;}

#contenu
{
width: 610px;
float: right;
background-color: #EAF1EA;
height:100%;}
[/b]


voiloi le css et le html :


<body>
<div id="body">

<div id="entete">
<h1>On compte sur vous</h1>

</div>

<div id="milieu">

<div id="menu"><script type="text/javascript" src="menu.js"></script></div>

<div id="contenu">

<h1 id="Accueil">Accueil</h1>


<p class="centrer"><img src="coluche.jpg"/></p>

</div>
</div>
</div>
</body>
</html>


Message édité par ridespirit le 27-03-2008 à 11:27:20
Répondre à ridespirit
- 0 +

En effet, ça fonctionne sous Firefox, mais pas sous IE, je n'avais pas testé sous IE.
Essaie d'ajouter un DOCTYPE valide à ta page


Message édité par OmaR le 27-03-2008 à 13:40:15
Répondre à OmaR

moi sa marchais même pas sous ff ! mais bon en doctype j'ai

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Les restos du coeur!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
</head>


je sais pas on m'as parles de clear both mais aussi de spacer je ne sais pas c'est quoi sa te di peut être quelque chose

Répondre à ridespirit
- 0 +

Est-ce que ta page est en ligne, que je puisse voir ce qui va pas ?!

Répondre à OmaR

non mais en fait c'est bon j'ai juste mi a ma balise milieu un fond rose comme sa sa ne se voit pas !car c'était un projet pour l 'écoles il fallait le finir ! merci quand même

Répondre à ridespirit
Tom's Guide > Forum > Programmation > float html
Aller à :

Il y a 677 utilisateurs connus et inconnus. Pour voir la liste des connectés connus, cliquez ici.

Attention

Vous allez répondre sur un sujet resté inactif pendant plus de 6 mois.
Assurez-vous d'apporter des éléments nouveaux à la discussion avant de poursuivre.

Répondre Annuler
Liens