28172 sujets

CSS et mise en forme, CSS3

Mise en forme d'un design "inline"

Bonsoir,

je débute le xhtml/css plus précisement la mise en page depuis un design réalisé sous photoshop.
j'ai lu les tutos sur l'initiation au positionnement, cependant je ne comprends pas comment mettre en page ceci:
upload/33974-alsacrea.JPG

en bleu il s'agit d'une simple image de fond répétée en "repeat-x", puis en rouge une image de taille précise, puis encore en bleu le fond répété.

Car avec une image de fond je ne peux pas utiliser de div car div étant de type "block".
Donc comment faire ?
Merci
Bonsoir,

ce n'est pas trés clair Smiley smile , quel est la structure html que tu veut styler. Combien d'images ?

GC
Euh... c'est vrai que c'est pas clair.
Vu ton image et ta description je dirais que tu peux faire:
<div style="padding-left: 200px; background: url(une-image) repeat-x;">
  <img alt="" src="une-autre-image">
</div>

Niveau contenu ça ne veut rien dire (ça serait pour de la déco pure), par contre.
Bonjour,

merci pour vos réponse.

En faite je souhaiterai comprendre la méthode exacte à utiliser pour coder des designs.
Car l'utilisation des div, impose des retours chariots à chaque fois.
Donc comment faire si j'ai n images horizontales ?

Voici mon cas:

upload/33974-alsacrea2.JPG
bonjour,

Il te faut prendre un peu plus de recul et envisager ta page en zones autant graphiques que de contenus et distribuer les images de fond décorative sur une structure html cohérente et qui comporte deja des contenus (factices ou non).
Ces zones s'imbriquent et, ou ce suivent. Regarde comment sont construit les gabarits proposé sur ce site ou ailleurs et ce tutoriel par exemple: http://www.alsacreations.com/tuto/lire/555-design-css-complet-5-etapes.html

Impossible de t'expliquer en 10 lignes comment passer d'une maquette graphique a une page web.

Ton image ne me montre pas de contenu en ligne(inline). tout au plus le haut d'un conteneur principal et 1 onglet ou le haut d'une colonne ?

GC
Bonjour,

merci pour vos réponses.

Je vous mets mon code je pense que ce sera plus clair.
<!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>
 <link rel="stylesheet" type="text/css" href="style.css" />
 </head>
 <body>
<div id="conteneur">
<div id="header">
<div id="imgheader1"></div>
<div id="imgheader2"></div>

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


body{ margin: 0px;}

div#conteneur{ margin: 0px;}

div#header{
border:1px solid black;
width:100%;
height:26px;
}

#imgheader1{
background: url('img/fond.png') repeat-x;
width:150px;
height:26px;
}

#imgheader2{
background: url('img/fond2.png');
width:150px;
height:26px;
margin-left:150px;
}



Il s'agit d'images de fond, rien ne sera "écrit dessus".

Donc en gros voici le rendu:

upload/33974-alsa3.PNG

Donc voici mes questions:

-Comment faire pour mettre à la suite les images ?
-Est-ce que j'utilise la bonne méthode pour mettre en oeuvre mon habillage graphique ?
Modifié par jeanjean6 (08 Nov 2010 - 17:32)
Sujet clos
Aller à