Sujet Précédent Sujet Suivant

Question de css

Fermé
SophieH - 25 nov. 2008 à 18:18
Groarh Messages postés 682 Date d'inscription vendredi 1 août 2008 Statut Membre Dernière intervention 28 juin 2015 - 27 nov. 2008 à 10:07
Bonjour,
j'ai un petit problème de CSS, j'ai mis une image de fond dans mon css mais je voudrais qu'elle s'affiche TOUJOURS sur la droite de l'écran. Or, j'ai beau batailler, l'image revient toujours sur la gauche. Je ne veux pas la placer avec un tableau. Que faire ?
Voici mon CSS :
body { background-image: url("index1-marche-medieval.jpg"); background-repeat: no-repeat; align=right; background-color: 000000; }
Merci de me conseiller
A voir également:

15 réponses

Réponse 1 / 15
zoby44 Messages postés 818 Date d'inscription vendredi 3 novembre 2006 Statut Membre Dernière intervention 7 avril 2010 199
25 nov. 2008 à 18:22
Salut, au lieu de mettre align:right, met background-position:right;
0
Réponse 2 / 15
Groarh Messages postés 682 Date d'inscription vendredi 1 août 2008 Statut Membre Dernière intervention 28 juin 2015 185
25 nov. 2008 à 18:31
Salut SophieH,
zoby44 a raison, tu t'es mélangé les pinceaux ^^ mais ça arrive à tout le monde.
Le mieux est d'abandonner totalement les attributs HTML de présentation, et de tout faire en CSS. Comme ça tu ne confondras plus :P

Tu vas avoir une erreur avec la couleur également, il faut mettre un dièse ; et si c'est bien du noir que tu veux, tu peux utiliser le mot-clé black, il est standard.

(Il y a 17 noms standards de couleurs, voir par ici) 
body {
  background-image: url("index1-marche-medieval.jpg");
  background-repeat: no-repeat;
  background-position: right;
  background-color: #000000;
}


Tu peux aussi condenser ta propriété background : 
body {
  background: url("index1-marche-medieval.jpg") no-repeat right black;
}


Bonne soirée ;)
0
SophieH
25 nov. 2008 à 18:39
Merci à tous les deux, j'ai mis la balise "background position" et depuis mon image est parfaitement alignée à droite, malheureusement tout le haut de l'image a disparu en haut de la page (je sais pas si je me fais comprendre), ctdre que je vois que la partie inférieure de mon image. Une idée ?
0
Réponse 3 / 15
zoby44 Messages postés 818 Date d'inscription vendredi 3 novembre 2006 Statut Membre Dernière intervention 7 avril 2010 199
25 nov. 2008 à 18:41
essaye avec background-position: top right;
0
SophieH
25 nov. 2008 à 19:26
Oui, merci, comme ça, ça marche très bien... Quelqu'un aurait-il une astuce pour faire un menu vertical ? J'ai essayé plusieurs javascripts, mais ça bloque d'un explorateur à l'autre. Merci de vos réponses. Cordialement.
0
Réponse 4 / 15
antic80 Messages postés 4785 Date d'inscription lundi 30 mai 2005 Statut Contributeur Dernière intervention 9 septembre 2009 1 159
25 nov. 2008 à 19:48
un menu vertical donc placer sur la gauche de ton écran c'est bien ca ?
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 15
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
25 nov. 2008 à 19:56
SALUT

Voila un exemple de menu entierement configurable sans js !!!! 

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>RAD ZONE Webcreation</title>
<meta name="author" content="http://radservebeer.free.fr" />
<meta name="generator" content="PSPad editor, www.pspad.com" />
<style type="text/css">
    <![CDATA[*/ 
.menu {
        margin: 10px;
        height: 100px;
        font-size: 10pt;
        font-family: verdana;
}
.menu ul {
        margin: 0pt;
        padding: 0pt;
        position: relative;
        z-index: 500;
        list-style-type: none;
        width: 11em;
}
.menu li {
        background-color: #cccc99;
        float: left;
}
.menu li.sub {
        background-color: #cccc99;
}
.menu table {
        position: absolute;
        border-collapse: collapse;
        top: 0pt;
        left: 0pt;
        z-index: 100;
        font-size: 1em;
        margin-top: -1px;
}
.menu a, .menu a:visited {
        border: 1px solid #ffffff;
        display: block;
        text-decoration: none;
        height: 2em;
        line-height: 2em;
        width: 11em;
        color: #000000;
        padding-left: 1em;
        font-weight: normal;
        font-style: normal;
        font-variant: normal;
        text-transform: none;
}
.menu b {
        float: right;
        margin-right: 5px;
}
* html .menu a, * html .menu a:visited {
        width: 11em;
}
* html .menu a:hover {
        color: #ccff66;
        background-color: #999966;
        position: relative;
        font-weight: normal;
        font-style: normal;
        font-variant: normal;
        text-decoration: none;
        text-transform: none;
}
.menu li:hover {
        position: relative;
}
.menu a:active, .menu a:focus {
        color: #ccff66;
        background-color: #999966;
        font-weight: normal;
        font-style: normal;
        font-variant: normal;
        text-decoration: none;
        text-transform: none;
}
.menu li:hover > a {
        color: #ccff66;
        background-color: #999966;
        font-weight: normal;
        font-style: normal;
        font-variant: normal;
        text-decoration: none;
        text-transform: none;
}
.menu li ul {
        padding: 2em;
        visibility: hidden;
        position: absolute;
        top: -2em;
        left: 7em;
        background-color: transparent;
}
.menu li:hover > ul {
        visibility: visible;
}
.menu ul a:hover ul ul {
        visibility: hidden;
}
.menu ul a:hover ul a:hover ul ul {
        visibility: hidden;
}
.menu ul a:hover ul a:hover ul a:hover ul ul {
        visibility: hidden;
}
.menu ul a:hover ul {
        visibility: visible;
}
.menu ul a:hover ul a:hover ul {
        visibility: visible;
}
.menu ul a:hover ul a:hover ul a:hover ul {
        visibility: visible;
}
.menu ul a:hover ul a:hover ul a:hover ul a:hover ul {
        visibility: visible;
}
/*]]>*/     
</style>
</head>  
  <body>    
    <div class="menu">      
      <ul><li>        
        <a href="#"><b>»</b>Menu 1           
          <!--[if IE 7]>
                    <!--></a>          
        <!--<![endif]-->         
        <!--[if lte IE 6]>
                <table>
                <tr>
                <td>
                <![endif]-->         
        <ul><li>          
          <a href="#">Sub Menu 1a</a></li><li>          
          <a href="#">Sub Menu 1b</a></li>        
        </ul>        
        <!--[if lte IE 6]>
                </td>
                </tr>
                </table>
                </a>
                <![endif]--></li><li>        
        <a href="#"><b>»</b>Menu 2           
          <!--[if IE 7]>
                    <!--></a>          
        <!--<![endif]-->         
        <!--[if lte IE 6]>
                <table>
                <tr>
                <td>
                <![endif]-->         
        <ul><li>          
          <a href="#">Sub Menu 2a</a></li><li>          
          <a href="#"><b>»</b>Sub Menu 2b             
            <!--[if IE 7]>
                        <!--></a>            
          <!--<![endif]-->           
          <!--[if lte IE 6]>
                    <table>
                    <tr>
                    <td>
                    <![endif]-->           
          <ul><li>            
            <a href="#"><b>»</b>Sub sub Menu 2b               
              <!--[if IE 7]>
                            <!--></a>              
            <!--<![endif]-->             
            <!--[if lte IE 6]>
                        <table>
                        <tr>
                        <td>
                        <![endif]-->             
            <ul><li>              
              <a href="#">Sub Menu 2ba</a></li>            
            </ul>            
            <!--[if lte IE 6]>
                        </td>
                        </tr>
                        </table>
                        </a>
                        <![endif]--></li>          
          </ul>          
          <!--[if lte IE 6]>
                    </td>
                    </tr>
                    </table>
                    </a>
                    <![endif]--></li><li>          
          <a href="#">Sub Menu 2Bb</a></li>        
        </ul>        
        <!--[if lte IE 6]>
                </td>
                </tr>
                </table>
                </a>
                <![endif]--></li><li>        
        <a href="#">Menu 3</a></li><li>        
        <a href="#">Menu 4</a></li>      
      </ul>    
    </div>  
  </body>
</html>


RAD
0
SophieH
25 nov. 2008 à 20:34
Ouah, je lis pas très bien le code mais il a l'air génial, rien qu'avec des listes... et il marche aussi sur Mozilla ? Je vais l'essayer tout de suite je t'en dirais des nouvelles.
Merci à tous les deux.
Trois
Etc
D'après ce que j'ai vu il va falloir que je change la position z-index: 500 dans menu Ul pour le caler à peu près sur ma gauche. Je vais tenter ça tout de suite, tant pis pour le repas !
0
Réponse 6 / 15
zoby44 Messages postés 818 Date d'inscription vendredi 3 novembre 2006 Statut Membre Dernière intervention 7 avril 2010 199
25 nov. 2008 à 20:41
Testé sous ie6-7 et Firefox, il fonctionne nickel, par contre, il faut enlever <![CDATA[*/ ... /*]]>*/
au niveau du css, sinon il ne fonctionne pas sous FF.
0
Réponse 7 / 15
SophieH
26 nov. 2008 à 10:49
Salut Zoby, salut DadZone, et les autres.
Je progresse dans ma page grace à vos excellent conseils mais alors certains trucs que j'avais mis ne fonctionnent plus. Je pense notamment à un javascript défilant qui affichait les activités de l'association. Voilà ma question, y a t-il un script, CSS ou php ou xml qui permette de faire défiler un texte sur une page ?
0
Réponse 8 / 15
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
26 nov. 2008 à 10:57
SALUT

en js , mais quel type de scroller tu veux ??

horizontal , vertical ??

RAD
0
SophieH
26 nov. 2008 à 11:14
je voudrais que le texte défile de bas en haut. Merci de ta patience.
0
Réponse 9 / 15
Sophie-H Messages postés 10 Date d'inscription mercredi 26 novembre 2008 Statut Membre Dernière intervention 30 mars 2017
26 nov. 2008 à 11:58
bonjour,
laissez tomber pour le texte défilant ça me semble trop.
par contre, j'ai essayé de mettre le code envoyé dans un tableau.C donne rien, les liens ont un fond blanc qui déborde sur toute la page.
voici mon code :


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type"><title>site du
Marché Médiéval de Bayonne,
organisé par l'Amicale de la rue d'Espagne</title> <link
type="text/css" href="css-marche-medieval.css"
rel="stylesheet">
<meta name="author" content="http://radservebeer.free.fr"><meta
name="generator" content="PSPad editor, www.pspad.com">
<style type="text/css">
<![CDATA[*/ .menu {
margin: 10px;
height: 100px;
font-size: 10pt;
font-family: verdana;
}
.menu ul {
margin: 0pt;
padding: 0pt;
position: relative;
z-index: 500;
list-style-type: none;
width: 11em;
}
.menu li {
background-color: #cccc99;
float: left;
}
.menu li.sub {
background-color: #cccc99;
}
.menu table {
position: absolute;
border-collapse: collapse;
top: 0pt;
left: 0pt;
z-index: 100;
font-size: 1em;
margin-top: -1px;
}
.menu a, .menu a:visited {
border: 1px solid #ffffff;
display: block;
text-decoration: none;
height: 2em;
line-height: 2em;
width: 11em;
color: #000000;
padding-left: 1em;
font-weight: normal;
font-style: normal;
font-variant: normal;
text-transform: none;
}
.menu b {
float: right;
margin-right: 5px;
}
* html .menu a, * html .menu a:visited {
width: 11em;
}
* html .menu a:hover {
color: #ccff66;
background-color: #999966;
position: relative;
font-weight: normal;
font-style: normal;
font-variant: normal;
text-decoration: none;
text-transform: none;
}
.menu li:hover {
position: relative;
}
.menu a:active, .menu a:focus {
color: #ccff66;
background-color: #999966;
font-weight: normal;
font-style: normal;
font-variant: normal;
text-decoration: none;
text-transform: none;
}
.menu li:hover > a {
color: #ccff66;
background-color: #999966;
font-weight: normal;
font-style: normal;
font-variant: normal;
text-decoration: none;
text-transform: none;
}
.menu li ul {
padding: 2em;
visibility: hidden;
position: absolute;
top: -2em;
left: 7em;
background-color: transparent;
}
.menu li:hover > ul {
visibility: visible;
}
.menu ul a:hover ul ul {
visibility: hidden;
}
.menu ul a:hover ul a:hover ul ul {
visibility: hidden;
}
.menu ul a:hover ul a:hover ul a:hover ul ul {
visibility: hidden;
}
.menu ul a:hover ul {
visibility: visible;
}
.menu ul a:hover ul a:hover ul {
visibility: visible;
}
.menu ul a:hover ul a:hover ul a:hover ul {
visibility: visible;
}
.menu ul a:hover ul a:hover ul a:hover ul a:hover ul {
visibility: visible;
}
/*]]>*/ </style></head>
<body><table style="text-align: left; width: 100%;"
border="0" cellpadding="2" cellspacing="2"> <tbody>
<tr>
<td align="undefined" valign="undefined"></td><td
align="undefined" valign="undefined"></td>
<td align="right" valign="undefined"><br><br>
<br>
<br> <div class="menu"> <ul><li> <a
href="#"><b>»</b>Menu 1<!--[if IE 7]>
<!--> </a>
<!--<![endif]--><!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]--> <ul><li>
<a href="#">Sub Menu 1a</a></li><li> <a
href="#">Sub Menu 1b</a></li> </ul><!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]--> </li><li>
<a href="#"><b>»</b>Menu 2<!--[if IE 7]>
<!--> </a>
<!--<![endif]--><!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]--> <ul><li>
<a href="#">Sub Menu 2a</a></li><li> <a
href="#"><b>»</b>Sub Menu 2b<!--[if IE 7]>
<!--> </a>
<!--<![endif]--><!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]--> <ul><li>
<a href="#"><b>»</b>Sub sub Menu 2b<!--[if IE 7]>
<!--> </a>
<!--<![endif]--><!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]--> <ul><li>
<a href="#">Sub Menu 2ba</a></li> </ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]--></li>
</ul><!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]--> </li><li>
<a href="#">Sub Menu 2Bb</a></li> </ul>
<!--[if lte IE 6]>
</td>
</tr>
</table>
</a>
<![endif]--></li><li>
<a href="#">Menu 3</a></li><li> <a
href="#">Menu</a></li> </ul> </div>
<br> <br> <br> <br>
<br> <br> </td> </tr> </tbody></table><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br></body></html>

merci de me dire ce qui ne va pas.
0
Réponse 10 / 15
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
26 nov. 2008 à 15:15
SALUT

voila un squelette de site avec le menu insere ! ;-)) 

<!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>
    <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
    <title>RAD ZONE Webcreation</title>
<meta name="author" content="http://radservebeer.free.fr" />
<meta name="generator" content="PSPad editor, www.pspad.com" />
     <style type="text/css" media="screen">
/*<![CDATA[*/
    <!--
    
    html {
    padding:0px;
    margin:0px;
    }
    body {
    background-color: #e1ddd9;
    font-size: 12px;
    font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
    color:#564b47;
    padding:0px;
    margin:0px;
    }
    p, h2  {
    margin: 0px;
    padding: 5px 20px 5px 20px;
    }
    a {
    color: #ff66cc;
    font-size: 11px;
    background-color:transparent;
    text-decoration: none;
    }
    .menu {
        margin: 10px;
        height: 100px;
        font-size: 10pt;
        font-family: verdana;
}
.menu ul {
        margin: 0pt;
        padding: 0pt;
        position: relative;
        z-index: 500;
        list-style-type: none;
        width: 11em;
}
.menu li {
        background-color: #cccc99;
        float: left;
}
.menu li.sub {
        background-color: #cccc99;
}
.menu table {
        position: absolute;
        border-collapse: collapse;
        top: 0pt;
        left: 0pt;
        z-index: 100;
        font-size: 1em;
        margin-top: -1px;
}
.menu a, .menu a:visited {
        border: 1px solid #ffffff;
        display: block;
        text-decoration: none;
        height: 2em;
        line-height: 2em;
        width: 11em;
        color: #000000;
        padding-left: 1em;
        font-weight: normal;
        font-style: normal;
        font-variant: normal;
        text-transform: none;
}
.menu b {
        float: right;
        margin-right: 5px;
}
* html .menu a, * html .menu a:visited {
        width: 11em;
}
* html .menu a:hover {
        color: #ccff66;
        background-color: #999966;
        position: relative;
        font-weight: normal;
        font-style: normal;
        font-variant: normal;
        text-decoration: none;
        text-transform: none;
}
.menu li:hover {
        position: relative;
}
.menu a:active, .menu a:focus {
        color: #ccff66;
        background-color: #999966;
        font-weight: normal;
        font-style: normal;
        font-variant: normal;
        text-decoration: none;
        text-transform: none;
}
.menu li:hover > a {
        color: #ccff66;
        background-color: #999966;
        font-weight: normal;
        font-style: normal;
        font-variant: normal;
        text-decoration: none;
        text-transform: none;
}
.menu li ul {
        padding: 2em;
        visibility: hidden;
        position: absolute;
        top: -2em;
        left: 7em;
        background-color: transparent;
}
.menu li:hover > ul {
        visibility: visible;
}
.menu ul a:hover ul ul {
        visibility: hidden;
}
.menu ul a:hover ul a:hover ul ul {
        visibility: hidden;
}
.menu ul a:hover ul a:hover ul a:hover ul ul {
        visibility: hidden;
}
.menu ul a:hover ul {
        visibility: visible;
}
.menu ul a:hover ul a:hover ul {
        visibility: visible;
}
.menu ul a:hover ul a:hover ul a:hover ul {
        visibility: visible;
}
.menu ul a:hover ul a:hover ul a:hover ul a:hover ul {
        visibility: visible;
}

    .alignright {
    margin-top: 0;
    text-align: right;
    font-size: 10px;
    }
    h2 {
    font-size:14px;
    padding-top:10px;
    text-transform:uppercase;
    color: #564b47;
    background-color: transparent;
    }
    h1 {
    font-size: 11px;
    text-transform:uppercase;
    text-align: right;
    color: #564b47;
    background-color: #90897a;
    padding:5px 15px;
    margin:0px
    }
    strong {
    font-size: 13px;
    }
    /*  positioning-layers statisch und absolut */
    #gauche {
    position: absolute;
    left: 0px;
    width: 190px;
    color: #564b47;
    margin: 0px;
    padding: 0px;
    }
    #centre {
    margin: 0px 190px 0px 190px;
    border-left: 2px solid #564b47;
    border-right: 2px solid #564b47;
    border-bottom: 2px solid #564b47;
    padding: 0px;
    background-color: #ffffff;
    }
    #droite {
    position: absolute;
    right: 0px;
    width: 190px;
    color: #564b47;
    background-color: #ff99cc;
    margin: 0px;
    padding: 0px;
    }
    -->
    /*]]>*/
    </style>
  </head>
  <body>
    <div id="gauche"><h2>MENU</h2>
      <div class="menu">
        <ul><li>
          <a href="#"><b>»</b>Menu 1 
            <!--[if IE 7]>
                                <!--></a> 
          <!--<![endif]--> 
          <!--[if lte IE 6]>
                          <table>
                          <tr>
                          <td>
                          <![endif]-->
          <ul><li>
            <a href="#">Sub Menu 1a</a></li><li>
            <a href="#">Sub Menu 1b</a></li>
          </ul>
          <!--[if lte IE 6]>
                          </td>
                          </tr>
                          </table>
                          </a>
                          <![endif]--></li><li>
          <a href="#"><b>»</b>Menu 2 
            <!--[if IE 7]>
                                <!--></a> 
          <!--<![endif]--> 
          <!--[if lte IE 6]>
                          <table>
                          <tr>
                          <td>
                          <![endif]-->
          <ul><li>
            <a href="#">Sub Menu 2a</a></li><li>
            <a href="#"><b>»</b>Sub Menu 2b 
              <!--[if IE 7]>
                                      <!--></a> 
            <!--<![endif]--> 
            <!--[if lte IE 6]>
                                <table>
                                <tr>
                                <td>
                                <![endif]-->
            <ul><li>
              <a href="#"><b>»</b>Sub sub Menu 2b 
                <!--[if IE 7]>
                                            <!--></a> 
              <!--<![endif]--> 
              <!--[if lte IE 6]>
                                      <table>
                                      <tr>
                                      <td>
                                      <![endif]-->
              <ul><li>
                <a href="#">Sub Menu 2ba</a></li>
              </ul>
              <!--[if lte IE 6]>
                                      </td>
                                      </tr>
                                      </table>
                                      </a>
                                      <![endif]--></li>
            </ul>
            <!--[if lte IE 6]>
                                </td>
                                </tr>
                                </table>
                                </a>
                                <![endif]--></li><li>
            <a href="#">Sub Menu 2Bb</a></li>
          </ul>
          <!--[if lte IE 6]>
                          </td>
                          </tr>
                          </table>
                          </a>
                          <![endif]--></li><li>
          <a href="#">Menu 3</a></li><li>
          <a href="#">Menu 4</a></li>
        </ul>
      </div>
      <p>Lorem ipsum dolor sit amet<br />Consectetuer Sed et interdum Nulla<br />Nibh Nulla consectetuer lobortis porta<br />Pretium urna auctor mauris sed<br />Egestas justo id sapien pretium<br />Neque tincidunt at congue quis<br />Eget orci Phasellus ac quis<br />Nisl augue turpis vitae elit<br />Sed elit sit penatibus urna<br />Lacus sed pede tellus nulla<br />Facilisis tristique tellus tellus dui<br />Tempor natoque fames id pellentesque<br />Et semper Sed Nam nisl<br />Velit cursus cursus tortor turpis<br />
      </p>
    </div>
    <div id="droite"><h2>DROITE</h2>
      <p>Lorem ipsum dolor sit amet consectetuer Nulla fermentum vel orci dictum. Ac accumsan velit metus Duis vel laoreet Cum Morbi vitae at. Consectetuer at tempus libero nunc ut nibh vitae volutpat hendrerit tempus. Congue Nam quis dui Curabitur nibh malesuada Nunc orci Suspendisse Sed. Curabitur quis nec velit feugiat et nascetur nibh pellentesque a morbi. Ornare venenatis In ullamcorper tellus odio vitae velit elit volutpat magnis. Condimentum tempus Nullam.
      </p>
    </div>
    <div id="centre"><h2>CONTENU</h2>
      <p>Lorem ipsum dolor sit amet consectetuer risus egestas elit sociis mauris. Fringilla congue tempus ut pharetra pellentesque justo ligula cursus dis eget. Nec Ut leo Praesent risus Sed nonummy at mauris fames volutpat. Nisl libero Aenean platea tellus pretium laoreet lacinia id quis fringilla. Laoreet parturient ante ut interdum Vestibulum cursus pellentesque sem lacus Praesent.
      </p>
      <p>Tincidunt ante leo Curabitur velit orci urna Curabitur nibh nisl elit. Odio porttitor nec felis leo interdum tincidunt ultrices venenatis enim hendrerit. Pellentesque felis eleifend id Vivamus mollis ligula ullamcorper pede porttitor tristique. Vestibulum Aenean elit consequat amet nec metus dignissim fringilla Pellentesque dignissim. Ut Suspendisse non tincidunt ridiculus sed Praesent vel nibh sollicitudin est. Pharetra nunc lobortis.
      </p>
      <p>Elit orci justo In Donec Nullam ullamcorper mauris aliquet consectetuer Nulla. At interdum In vel Aliquam Mauris aliquam faucibus consectetuer egestas gravida. Pede et pulvinar elit quam vitae pellentesque dui Suspendisse id Phasellus. Eu libero vel aliquam vitae gravida lacus eu neque velit vitae. Enim Morbi Mauris amet euismod et libero Fusce.
      </p>
      <p>Nibh elit quis ipsum senectus facilisis Lorem tellus magna laoreet nibh. Justo vel orci fermentum id mi Proin In eleifend tempor metus. Justo condimentum tincidunt velit tincidunt tincidunt dolor egestas platea rutrum ante. Nisl laoreet dui vitae metus libero non aliquam parturient cursus enim. A massa egestas malesuada eleifend mauris at id mi interdum risus. Libero non purus Nullam Donec dictum est enim Proin et vel. Pellentesque pede vel.
      </p>
      <p>Lorem ipsum dolor sit amet consectetuer eros purus nec mauris ut. Nulla tellus enim Aliquam nisl odio Phasellus Quisque pellentesque nascetur tempus. Nam commodo non Pellentesque natoque lacinia urna purus lacus Maecenas augue. Faucibus iaculis et Morbi et Vivamus Phasellus id sem Donec vel. Sed elit urna nunc id sit.
      </p>
      <p>Turpis Integer tempus nibh lorem congue semper vel laoreet sem In. Id natoque montes pellentesque tortor at dis sed cursus tincidunt Nulla. Mi dapibus interdum ac orci consectetuer nunc urna tempus magnis Curabitur. Vel consequat ac et quam tincidunt eget facilisis felis Phasellus nunc. Suspendisse Sed nunc lacus elit est.
      </p>
      <p>Aenean nascetur velit ut sollicitudin penatibus laoreet molestie accumsan tempor venenatis. Id fringilla urna sem facilisis ultrices elit tortor tempus lorem Phasellus. Sagittis pretium vel massa neque tempus Nunc nunc porttitor eget lorem. Eros accumsan justo mauris tempus tristique sed non cursus vitae fringilla. Eget a cursus accumsan ipsum interdum felis vel Morbi elit Pellentesque. Maecenas Sed ac egestas Nam et quis metus Sed.
      </p>
      <p>Orci pulvinar nibh elit Donec montes interdum lacinia In Phasellus pede. Accumsan ligula ac sit tellus fames sapien dapibus sem scelerisque at. Nibh Phasellus congue pretium convallis Aliquam Morbi Maecenas leo urna ipsum. Tellus nulla Curabitur In Nulla nunc ligula et tellus urna In. Curabitur malesuada tincidunt nibh Phasellus nibh ipsum euismod euismod Sed fermentum. Convallis eget cursus Morbi sit lorem Curabitur eros pretium Sed id. Ligula consequat faucibus.
      </p>
    </div>
  </body>
</html>


si tu part sur une base saine et que tu apprend a utiliser des div pour la mise en page , ce squelette te permettras au moins la premiere etape !!
partir sur une base saine !!

RAD
0
Réponse 11 / 15
Sophie-H Messages postés 10 Date d'inscription mercredi 26 novembre 2008 Statut Membre Dernière intervention 30 mars 2017
26 nov. 2008 à 17:07
Merci, je vais essayer, je te remercie beaucoup
0
Réponse 12 / 15
Groarh Messages postés 682 Date d'inscription vendredi 1 août 2008 Statut Membre Dernière intervention 28 juin 2015 185
26 nov. 2008 à 18:00
Base saine base saine, c'est vite dit...

C'est déjà mieux que faire sa mise en page en tableaux, mais les div sont des balises non sémantiques. Il vaut mieux limiter le plus possible leur utilisation.

Je vous renvoie, RAD et Sophie, à une lecture intéressante :
http://blog.alsacreations.com/2005/07/28/175-semantique-semantique-est-ce-que-jai-une-tete-de-semantique
http://www.lepotlatch.org/index.php/2007/04/25/73-vers-un-dveloppement-web-durable

Bonne lecture !
0
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
26 nov. 2008 à 18:14
lis bien !!! j ai dis squelette ;-)) je n ai pas dis modele !!

a elle ensuite de respecter plus ou moins la sémantique dans ces ajouts ! mais partir d un 2 ou 3 ou 4 div en squelette en fonction de la mise en page voulue est une chose saine , je réitère !;-))

RAD
0
Réponse 13 / 15
Sophie-H Messages postés 10 Date d'inscription mercredi 26 novembre 2008 Statut Membre Dernière intervention 30 mars 2017
26 nov. 2008 à 18:30
merci à tous les deux pour vos éclairages. J'essaie de voir si on pourrait mettre le CSS dans un fichier CSS externe. Je vous tiens au courant. Merci
0
Réponse 14 / 15
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
26 nov. 2008 à 18:47
J'essaie de voir si on pourrait mettre le CSS dans un fichier CSS externe

oui bien sur ;-)

le css que j ai nome "style.css" 
html {
	padding: 0px;
	margin: 0px;
}
body {
	background-color: #e1ddd9;
	font-size: 12px;
	font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
	color: #564b47;
	padding: 0px;
	margin: 0px;
}
p, h2 {
	margin: 0px;
	padding: 5px 20px 5px 20px;
}
a {
	color: #ff66cc;
	font-size: 11px;
	background-color: transparent;
	text-decoration: none;
}
.menu {
	margin: 10px;
	height: 100px;
	font-size: 10pt;
	font-family: verdana;
}
.menu ul {
	margin: 0pt;
	padding: 0pt;
	position: relative;
	z-index: 500;
	list-style-type: none;
	width: 11em;
}
.menu li {
	background-color: #cccc99;
	float: left;
}
.menu li.sub {
	background-color: #cccc99;
}
.menu table {
	position: absolute;
	border-collapse: collapse;
	top: 0pt;
	left: 0pt;
	z-index: 100;
	font-size: 1em;
	margin-top: -1px;
}
.menu a, .menu a:visited {
	border: 1px solid #ffffff;
	display: block;
	text-decoration: none;
	height: 2em;
	line-height: 2em;
	width: 11em;
	color: #000000;
	padding-left: 1em;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	text-transform: none;
}
.menu b {
	float: right;
	margin-right: 5px;
}
* html .menu a, * html .menu a:visited {
	width: 11em;
}
* html .menu a:hover {
	color: #ccff66;
	background-color: #999966;
	position: relative;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	text-decoration: none;
	text-transform: none;
}
.menu li:hover {
	position: relative;
}
.menu a:active, .menu a:focus {
	color: #ccff66;
	background-color: #999966;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	text-decoration: none;
	text-transform: none;
}
.menu li:hover > a {
	color: #ccff66;
	background-color: #999966;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	text-decoration: none;
	text-transform: none;
}
.menu li ul {
	padding: 2em;
	visibility: hidden;
	position: absolute;
	top: -2em;
	left: 7em;
	background-color: transparent;
}
.menu li:hover > ul {
	visibility: visible;
}
.menu ul a:hover ul ul {
	visibility: hidden;
}
.menu ul a:hover ul a:hover ul ul {
	visibility: hidden;
}
.menu ul a:hover ul a:hover ul a:hover ul ul {
	visibility: hidden;
}
.menu ul a:hover ul {
	visibility: visible;
}
.menu ul a:hover ul a:hover ul {
	visibility: visible;
}
.menu ul a:hover ul a:hover ul a:hover ul {
	visibility: visible;
}
.menu ul a:hover ul a:hover ul a:hover ul a:hover ul {
	visibility: visible;
}
.alignright {
	margin-top: 0;
	text-align: right;
	font-size: 10px;
}
h2 {
	font-size: 14px;
	padding-top: 10px;
	text-transform: uppercase;
	color: #564b47;
	background-color: transparent;
}
h1 {
	font-size: 15px;
	text-transform: uppercase;
	text-align: right;
	color: #564b47;
	background-color: #90897a;
	padding: 5px 15px;
	margin: 0px
}
strong {
	font-size: 13px;
}
#gauche {
	position: absolute;
	left: 0px;
	width: 190px;
	color: #564b47;
	margin: 0px;
	padding: 0px;
}
#centre {
	margin: 0px 190px 0px 190px;
	border-left: 2px solid #564b47;
	border-right: 2px solid #564b47;
	border-bottom: 2px solid #564b47;
	padding: 0px;
	background-color: #ffffff;
}
#droite {
	position: absolute;
	right: 0px;
	width: 190px;
	color: #564b47;
	background-color: #ff99cc;
	margin: 0px;
	padding: 0px;
}


et tu remplace le css embarque par le lien vers ce "style.css" 
<!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>
    <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
    <title>RAD ZONE Webcreation</title>
<meta name="author" content="http://radservebeer.free.fr" />
<meta name="generator" content="PSPad editor, www.pspad.com" />

       <link rel="stylesheet" href="style.css" type="text/css" /> <!--LE LIEN VERS LE CSS-->
</head>


RAD
0
Réponse 15 / 15
Groarh Messages postés 682 Date d'inscription vendredi 1 août 2008 Statut Membre Dernière intervention 28 juin 2015 185
27 nov. 2008 à 10:07
@RADZONE : joli travail, tu es un maître !
Le design est agréable, ça ne se déforme pas quand on agrandit le texte, et le code est valide. (Ton CMS est allemand ? "statisch und absolut" xD)
Par contre j'ai toujours tendance à me méfier des commentaires conditionnels. Je suis sous Linux donc je n'ai pas IE pour tester... En l'occurence les sélecteurs avancés comme li:hover > ul ne marchent de toute façon pas sous IE, alors pourquoi chercher à portabiliser le reste du code ?

En tout cas tu me donnes une leçon, j'ai souvent l'impression que très peu de gens savent utiliser toute la puissance du CSS, tu es la preuve du contraire :)
0

Discussions similaires

trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses
Enlever le soulignement sous les liens en HTML/CSS
baissaoui -
baissaoui -

0 réponse
HTML - définir taille bouton
Diva -
Utilisateur anonyme -

14 réponses
[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses
indice et exposant en css ?
yiv -
Kitkatryne -

19 réponses