Aide CSS

Résolu/Fermé

Chabanus Messages postés 978 Date d'inscription dimanche 23 décembre 2007 Statut Membre Dernière intervention 11 novembre 2011 - 13 nov. 2008 à 16:47
Chabanus Messages postés 978 Date d'inscription dimanche 23 décembre 2007 Statut Membre Dernière intervention 11 novembre 2011 - 14 nov. 2008 à 12:43

Bonjour,
S'il vous plait aidez-moi a positionner correctement mes images comme ceci:
https://imageshack.com/
Voici l'html:

<div class="cadre">
 <div class="haut_1">
                <div class="haut_2">
                        <div class="haut"></div>
    </div>
        </div>
</div>

et le css:

.cadre
     {
     width : 370px;
     }
.haut_1
      {
	  
	  height:20px;
      background : url("images/photo_03.gif") bottom no-repeat ;
      margin-left : 169px;
      }

.haut_2
      {
	  width:67px;
	  height:20px;
      background : url("images/photo_03.gif") bottom no-repeat;
      padding-left : 229px;
      }
 /
.haut
    {
    background : url("images/photo_03.gif") bottom repeat-x;
   
    padding-Left : 300px; */
    }

Merci

A voir également:

Aide CSS
Css download - Télécharger - HTML
Background color css ✓ - Forum CSS
Css premier plan ✓ - Forum CSS
Enlever couleur lien css ✓ - Forum CSS
Enlever le soulignement d'un lien css ✓ - Forum Webmastering

4 réponses

Réponse 1 / 4

Chupachups23 Messages postés 73 Date d'inscription jeudi 13 novembre 2008 Statut Membre Dernière intervention 9 décembre 2009 18
13 nov. 2008 à 17:27

Bonjour , je suis pas un expert mais quand j'arrive pas a placer ou je veux une partie ,j'utilise position : absolute .

CSS

#cadre
{
background-color: #CFE1EB;
width : 500px;
height: 30px;
}

#haut_3
{
background-color: yellow;
width :150px;
position: absolute;
left: 320px;
height: 20px;
top: 10px;
}

#haut_2
{
background-color: yellow;
position: absolute;
left: 165px;
top: 10px;
width :150px;
height: 20px;
}

#haut_1
{
background-color: yellow;
width :150px;
position: absolute;
left: 10px;
top: 10px;
height: 20px;
}

HTML

<div id="cadre">
<div id="haut_1"></div>
<div id="haut_2"></div>
<div id="haut_3"></div>

Il te reste a modifier background-color: yellow; dans le CSS part l'image de fond que tu veux , je pense que ca posera pas de souci.

Chabanus Messages postés 978 Date d'inscription dimanche 23 décembre 2007 Statut Membre Dernière intervention 11 novembre 2011 70
13 nov. 2008 à 18:08

Merci ça marche, maintenant s'il vous plait comment faire pour le bas afin de réaliser la page entière:
https://imageshack.com/

J'ai essayé avec ces pages-ci, mais le bas passe en dessous du haut.

Le HTML:


<div id="cadre">
<div id="haut_1"></div>
<div id="haut_2"></div>
<div id="haut_3"></div>

      
<div class="bas_1"></div>
  <div class="bas"></div>
  <div class="bas_2"></div>
                       
        
 
</div>

Le CSS:

.cadre
     {
     width : 370px;
     }
	
#haut_3
{
 background : url("images/photo_03.gif") no-repeat;
position: absolute;
left: 300px;
height: 20px;
width :67px;
top: 10px;
margin-bottom:10px;
}

#haut_2
{
 background : url("images/photo_03.gif") no-repeat;
position: absolute;
left: 220px;
top: 10px;
width :67px;
height: 20px;margin-bottom:10px;
}

#haut_1
{
 background : url("images/photo_03.gif") no-repeat;
width :67px;
position: absolute;
left: 140px;
top: 10px;
height: 20px;margin-bottom:10px;
}


.bas_1
     {
	 margin-top:15px;
	 height:153px;
     background : url("images/photo_09.gif") no-repeat;
     }
 
.bas_2
     {
	  height:160px;
     background : url("images/photo_12.gif") no-repeat;
     }
 
.bas
   {
    height:65px;
   background : url("images/photo_11.gif") repeat-y;
   width : 100%;
   }

Réponse 2 / 4

Chupachups23 Messages postés 73 Date d'inscription jeudi 13 novembre 2008 Statut Membre Dernière intervention 9 décembre 2009 18
13 nov. 2008 à 22:19

Ba je te dirais bien de refaire le même procédé, donc pour la première :

#bas_1
{
 background : url("images/photo_09.gif") no-repeat;
width :100px; /* Image 100x100 par exemple*/
height: 100px;
position: absolute;
left: 140px; /* |--> 140 pixel par rapport au coté gauche */
top: 100px; /* V 100pixel par rapport au haut de ta page*/
}

Je te laisse faire les autres , rien de bien compliqué , vu les infos que je te donne avec le premier , pour les suivantes , il te suffit de changer la ligne 'top: 100px; /* V 100pixel par rapport au haut de ta page*/' si tu veux les aligner .

Réponse 3 / 4

muska92 Messages postés 277 Date d'inscription lundi 14 février 2005 Statut Membre Dernière intervention 14 août 2009 42
13 nov. 2008 à 16:56

<div id="cadre">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<ul>
</div>

CSS :
DIV#cadre {
border:solid 1px;
width:370px;
padding-top:25px;
height:50px; /** a titre d'exemple**/
}
DIV#cadre li {
display:block;
margin-left:5px;
float:right; /** Left ou right **/
hight : 25px; /** a titre d'exemple ***/
}

Chabanus Messages postés 978 Date d'inscription dimanche 23 décembre 2007 Statut Membre Dernière intervention 11 novembre 2011 70
13 nov. 2008 à 17:10

ça peut marcher avec ta méthode mais ce que je veux faire ne va pas avec les ul, il me faut que des div, merci.
J'ai essayé ce CSS, l'affichage est bon mais lors de l'aperçu le navigateur affiche rien !

.cadre
{
width : 370px;
}
.haut_1
{

background : url("images/photo_03.gif") bottom right no-repeat ;
padding-right: 140px;
}

.haut_2
{
background : url("images/photo_03.gif") bottom right no-repeat;
padding-left: 150px;
}

.haut
{
background : url("images/photo_03.gif") bottom right no-repeat;

padding-left: 150px;

Réponse 4 / 4

Chabanus Messages postés 978 Date d'inscription dimanche 23 décembre 2007 Statut Membre Dernière intervention 11 novembre 2011 70
14 nov. 2008 à 12:43

Merci ça marche avec ta méthode, mais j'ai préféré les tableaux finalement:

<table id="Table_01" width="370" height="100%" border="0" cellpadding="0" cellspacing="0">
<div id="cadre">
<tr>
<td><div id="haut_1"></div></td>
<td><div id="haut_2"></div></td>
<td><div id="haut_3"></div></td>
</tr>
<tr><td><div class="bas_1"></div></td></tr>
<tr><td><div class="bas"></div></td></tr>
<tr><td><div class="bas_2"></div></td></tr>

</div> </table>
Bon week-end

Discussions similaires

trait horizontal avec du css

indice et exposant en css ?

Enlever le soulignement sous les liens en HTML/CSS

HTML - définir taille bouton

[CSS] Forcé retour à la ligne