28221 sujets

CSS et mise en forme, CSS3

[résolu]Probléme de mise en page

bonjour a tous j'ai un petit probleme avec mon design,
je voudrais arriver à cela:
[#]

1.Un logo centré (pour ça c'est bon)

2.Une barre de menu horizontale en dessous du logo depassant de
deux pixels de chaques côtés (pour ça aussi c'est bon)


3.deux blocs de chaque côté du logo jusqu'en bas de page touchant la barre de menu horizontale([i]c'est la que ça coince!![/b] Smiley decu )
voici mon code css:

.logo {
margin-left: auto;
margin-right: auto;
background-image: url('design/head1.jpg');
width:  600px;
height: 150px;
}
.menu1 {
margin-left: auto;
margin-right: auto;
margin-top: 2px;
background-image: url('design/menu1.jpg');
width:  604px;
height:  20px;
}

voici mon code xhtml:

<!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">
<head>
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="logo"></div>
<div class="menu1"></div>
</body>
</html>

Pourquoi le logo en background me direz-vous? Smiley smile
et bien pour pouvoir integrer une phrase du jour Smiley cligne

Ma question est bien plus simple que l'exposé de mon probléme Smiley langue :
Comment puis-je integrer dans mon design les blocs de gauche et de droite sans que mon logo et ma barre y passent en dessous?
Merci pour vos réponses Smiley smile
Modifié le 02 Jan 2005 - 15:54
Administrateur
Salut,

As-tu pensé à commencer ta visite du forum par le lien "Aide et Règles" ?
Tu y découvriras par exemple qu'il est vivement conseillé de baliser tes codes correctement, afin qu'ils soient lisibles pour tous Smiley smile

Ensuite, tu devrais peut-être modifier ton titre afin de le rendre plus explicite (difficile de savoir ce qu'est un "problème de div" a priori) : cela facilitera aussi la tâche aux autres qui comprendront alors de quoi parle ton sujet exactement.

Bonne chance Smiley cligne

PS : quel intérêt de mettre ton logo en background alors qu'il s'agit d'une image qui a du sens et qui apporte du contenu ?
Bonjour et bienvenue à toi sur ce forum.

Pour une meilleure compréhension de tous, il est d'usage de mettre les extraits de code dans les balises appropriées (voir Mise en forme générale des messages). Elles sont disponibles sous la zone d'édition du post ([ code][ /code] sans les espaces). Merci d'éditer ton message.

Comme c'est ton premier post tu peux si tu le souhaites passer par le bar du forum pour les présentations.

édit: gril.. Smiley lol
Modifié le 26 Dec 2004 - 15:29
Julien a écrit :
bonjour a tous j'ai un petit probleme avec mon design,
je voudrais arriver à cela:
[#]

1.Un logo centré (pour ça c'est bon)

2.Une barre de menu horizontale en dessous du logo depassant de
deux pixels de chaques côtés (pour ça aussi c'est bon)


3.deux blocs de chaque côté du logo jusqu'en bas de page touchant la barre de menu horizontale([i]c'est la que ça coince!![/b] Smiley decu )
voici mon code css:

.logo {
margin-left: auto;
margin-right: auto;
background-image: url('design/head1.jpg');
width:  600px;
height: 150px;
}
.menu1 {
margin-left: auto;
margin-right: auto;
margin-top: 2px;
background-image: url('design/menu1.jpg');
width:  604px;
height:  20px;
}

voici mon code xhtml:

<!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">
<head>
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="logo"></div>
<div class="menu1"></div>
</body>
</html>

Pourquoi le logo en background me direz-vous? Smiley smile
et bien pour pouvoir integrer une phrase du jour Smiley cligne

Ma question est bien plus simple que l'exposé de mon probléme Smiley langue :
Comment puis-je integrer dans mon design les blocs de gauche et de droite sans que mon logo et ma barre y passent en dessous?
Merci pour vos réponses Smiley smile
OUPS sorry,
j'ai trouver Smiley confused
Sa m'aprendras à vouloir allez trop vite.
c'etait "float"
pfff je suis naze
la honte lool
Si tu as trouvé, ce serait bien que nous expliques comment tu as résolu ton problème, comme cela tout le monde en profitera. Smiley smile
Du coup il ne manque plus qu'un tag [Résolu] dans le titre de ton post (en éditant ton message).
erff pas tout a fait resolus

j'ai réussis a mettre le logo ,la partie gauche et le menu
mais aucun moyen de mettre la partie droite.

css:

 .menu1 {
position: absolute;
margin-left: 0px;
margin-top: 152px;
background-image: url('design/menu1.jpg');
width:  604px;
height:  20px;
}
.gauche {
margin-left: 0px;
margin-right: 0px;
background-color: #FF0000;
width:  100px;
height: 600px;
float: left;
}
.logo {
margin-left: 2px;
margin-right: 0px;
background-image: url('design/head1.jpg');
width:  600px;
height: 150px;
float: left top;
}


HTML:

<!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">
<head>
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="menu1"></div>
<div class="gauche"></div>
<div class="logo"></div>

</body>
</html>

s'il vous plait aidez moi, j'en peux plus lool
Bonsoir,
Je te conseillerais de faire un tour sur les tutoriels et de t'assurer que tu as bien saisis les principes de positionnement avec css. Une bonne base serait également Openweb et ses trois articles sur le positionnement.
Alsacréations propose aussi des modèles de mises en page qui peuvent être de bonnes bases. Enfin une recherche dans les posts du forum seraient un plus. Smiley cligne
Je te remercie j'ai trouver mon bonheur.Ces tutos sont vraiment super
merci encore Smiley smile
j'ai toujour fais des mise en page simple (photoshop et imageready!!)
mais xhtml et css sont vraiments passionnants.
Sujet clos
Aller à