28172 sujets

CSS et mise en forme, CSS3

3 div dont une à 100%

Bonjour,

j'essaie de mettre 3 div sur la même ligne

<div id="global">
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
</div>

pour le css je met padding et margin a 0
et les 3 div en float left

concrètement mon problème est le suivant :

Je met les 2 premières div en taille fixe car les éléments sont fixe et la 3ème je voudrais qu'elle soit à 100% sauf qu'elle passe direct en dessous pour faire toute la largeur de l'écran,
logique je lui dit 100%...

donc comment mettre ma dernière div à 100% sur l'axe X
Modifié par tchaaaa (09 Apr 2009 - 11:52)
Bonjour,

Si j'ai bien compris ton problème, alors il faudra utiliser du javascript.

Est-ce le même cas qu'ici ?
Modifié par BeliG (09 Apr 2009 - 13:50)
Salut,

N'est-ce pas tout simplement quelque chose comme ça que tu veux (sans Javascript ...) :

<div style="float:left;width:100px;background:blue;"><p>texte 1</p></div>
<div style="float:left;width:150px;background:red;"><p>texte 2</p></div>
<div style="background:yellow;"><p>texte 3</p></div>
?
tchaaaa a écrit :
donc comment mettre ma dernière div à 100% sur l'axe X

Il faut lui dire «allez cocotte, lâche-toi, vas-y à fond!», et si elle est réceptive elle sera au taquet.

Par contre, si «à 100%» signifie autre chose que «au taquet», ça serait bien de préciser quoi. Smiley cligne

En l'occurrence, que signifie «à 100% sur l'axe X»? Est-ce à dire que la largeur de ce bloc doit être équivalente à 100% d'une autre largeur? Dans ce cas, quelle est cette largeur de référence? Le viewport (zone de visualisation du navigateur), la largeur du conteneur du bloc, autre chose encore?
Merci pour vos réponse !

Alors, oui j'aimerais faire ça sans JS car je pense que c'est faisable enfin j'espère en CSS

Pour le 1, 2, 3 c'est pour l'exemple

Oui Agylus c'est quelque chose comme ca que je veux mais tu as le même problème que moi
la 3 passe en dessous

upload/20890-t.jpg

Je voudrais que la 3 s'adapte(sur l'axe X) quelque soit la taille de l'ecran 17/19/30 pouces
tout en restant sur la même ligne

Ca vous parle ce problème ?

merci
Modifié par tchaaaa (09 Apr 2009 - 19:15)
tchaaaa a écrit :
Oui Agylus c'est quelque chose comment ca que je veux mais tu as le même problème que moi
la 3 passe en dessous

Heu, pas d'accord. J'ai testé sur Firefox 3, IE6, IE7 et je n'ai vu aucun problème. Sur quel navigateur as-tu testé ? Peut-on voir le code exact qui te pose problème (HTML et CSS) ? Ou un exemple en ligne ?
Salut,

Essaye-ca:

pour le style :

.div_content
{
width:100%;
}

.div1{
width:100px;
height:100px;
background-color:red;
float:left;
}

.div2{
width:100px;
height:100px;
background-color:fuchsia;
float:left;
}

.div3{
height:100px;
background-color:green;
}



pour le html:

<body>

<div class="div_content">

<div class="div1">
div1
</div>

<div class="div2">
div2
</div>

<div class="div3">
div3
</div>

</div>
</body>

J'ai teste sous IE et firefox

@+
Sur la 3ème colonne on peut aussi rajouter un margin-left égal à la somme des largeurs des deux autres pour éviter que son contenu ne "coule" autour.
Code D'origine :

css :

@charset "utf-8";
/* CSS Document */

body{
background-color:#000000;
margin:0 0 0 0;
padding:0 0 0 0;

}

#ligne_g{
margin-top:400px;
}

#logo{
margin:0 0 0 0;
padding:0 0 0 0;
float:left;
font-size:11px;
background-image:url(logo.png);
background-repeat:no-repeat;
height:40px;
width:150px;
}

#menu{
margin:0 0 0 0;
padding:0 0 0 0;
float:left;
height:40px;
width:70px;
font-size:11px;
}

#desc{
background-image:url(pn.png);
background-repeat:repeat-x;
margin:0 0 0 0;
padding:0 0 0 0;
font-size:11px;
float:left;
height:40px;
width:100%;
}


html :

<!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=utf-8" />
<title>Document sans nom</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="ligne_g">
<div id="logo"></div>
<div id="menu"></div>
<div id="desc"></div>
</div>

</body>
</html>

je teste cojack ton code merci
Modifié par tchaaaa (09 Apr 2009 - 19:19)
Ok ton code fonctionne !

Pour comprendre, c'est par ce que tu utilise des classes(en ligne plutôt quand bloc) plutôt que des id ?

BeliG pour ce que tu dis, en code je lui dis comment de fusionner les marges ?
Ça à un rapport avec les différentes interprétations des navigateurs ?


merci en tout cas
Modifié par tchaaaa (09 Apr 2009 - 19:14)
Bonjour,

Si je ne m'abuse, c'est la même problématique et les mêmes solutions qu'ici:
http://www.alsacreations.com/tuto/lire/588
La seule différence ici est que la colonne de droite sera en float:left et pas en float:right; (ou bien qu'on fera une colonne de gauche globale, à partager en deux sous-colonnes, éventuellement).
Sujet clos
Aller à