Aide CSS

Résolu
Chabanus Messages postés 978 Date d'inscription   Statut Membre Dernière intervention   -  
Chabanus Messages postés 978 Date d'inscription   Statut Membre Dernière intervention   -
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

4 réponses

Réponse 1 / 4
Chupachups23 Messages postés 73 Date d'inscription   Statut Membre Dernière intervention   18
 
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.
1
Chabanus Messages postés 978 Date d'inscription   Statut Membre Dernière intervention   70
 
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%;
   }
0
Réponse 2 / 4
Chupachups23 Messages postés 73 Date d'inscription   Statut Membre Dernière intervention   18
 
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 .
1
Réponse 3 / 4
muska92 Messages postés 277 Date d'inscription   Statut Membre Dernière intervention   42
 
<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 ***/
}
0
Chabanus Messages postés 978 Date d'inscription   Statut Membre Dernière intervention   70
 
ç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;
0
Réponse 4 / 4
Chabanus Messages postés 978 Date d'inscription   Statut Membre Dernière intervention   70
 
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
0

Discussions similaires

Enlever le soulignement sous les liens en HTML/CSS
baissaoui -
baissaoui -

0 réponse
indice et exposant en css ?
yiv -
Kitkatryne -

19 réponses
Enlever trait sous un lien href
ponpon17430 -
trucmachinchose-rose -

30 réponses
CSS/Comment enlever couleur liens ?
alexou1984 -
Tonio -

6 réponses
Background color css
ernblp -
ernblp -

5 réponses