IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Onglets avec float


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Inscrit en
    Février 2007
    Messages
    18
    Détails du profil
    Informations forums :
    Inscription : Février 2007
    Messages : 18
    Par défaut Onglets avec float
    Bonjour,

    Je ne comprends pas, j'ai suivi le tutoriel et pourtant mon DIV embarque sur mes onglets...

    Les images d'onglets sont en pièce jointe.

    index.html
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
    <head>
    	<title>toto</title>
    	<meta http-equiv="Content-Type" content="text/xml; charset=iso-8859-1" />
    	<link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
    	<div id="page">
    		<div id="menuongl">
    			<ul>
    				<li style="margin-right:15px;"><a href="#">ongl5</a></li>
    				<li><a href="#">ongl4</a></li>
    				<li><a href="#">ongl3</a></li>
    				<li><a href="#">ongl2</a></li>
    				<li id="current"><a href="#">ongl1</a></li>
    			</ul>
     
    		</div>
    		<div id="contenu">
    			aaalllooo
    		</div>
    	</div>
    </body>
    </html>

    style.css
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    html,body{
    	height:100%;
    	margin:0;
    	font:10pt sans-serif;
    	background:url('images/structure/bleu.png') repeat-y #ffcc00;
    	background-position:center;
    }
    #page {
    	position:relative;
    	margin:auto;
    	background:url('images/structure/head.png') repeat-x #84b6ff;
    	width:780px;
    	height:100%;
    }
    #contenu{
    	margin:auto;
    	background:#fff;
    	width:750px;
    	min-height:76%;
    	padding:0px 5px 0px 5px;
    }
    #menuongl {
      float:left;
      width:100%;
      background:url("images/structure/menubg.png") no-repeat bottom;
      font-size:93%;
      line-height:normal;
    	margin-top:50px;
      }
    #menuongl ul {
      margin:0;
      padding:10px 10px 0;
      list-style:none;
      }
    #menuongl li {
      float:right;
      background:url("images/structure/onglleft.png") no-repeat left top;
      margin:0;
      padding:0 0 0 9px;
      }
    #menuongl a {
      float:left;
      display:block;
      background:url("images/structure/onglright.png") no-repeat right top;
      padding:5px 15px 4px 6px;
      text-decoration:none;
      font-weight:bold;
      color:#765;
      }
    /* Commented Backslash Hack
       hides rule from IE5-Mac \*/
    #menuongl a {float:none;}
    /* End IE5-Mac hack */
    #menuongl a:hover {
      color:#333;
      }
    #menuongl #current {
      background-image:url("images/structure/onglleft_on.gif");
      }
    #menuongl #current a {
      background-image:url("images/structure/onglright_on.gif");
      color:#333;
      padding-bottom:5px;
      }
    Merci

    Louperivois
    Images attachées Images attachées     

  2. #2
    Rédacteur
    Avatar de MasterOfChakhaL
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2004
    Messages
    2 147
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juin 2004
    Messages : 2 147
    Par défaut
    Salut et bienvenue à toi sur les forums de developpez.com,

    Citation Envoyé par louperivois
    ... et pourtant mon DIV embarque sur mes onglets...
    Je pense qu'il faudrait que tu décrives plus précisement ton problème...

    Qu'entends-tu par embarquer? Est-ce que tu retrouves ton problème sous tous les navigateurs que tu as essayé?
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    N'oubliez pas de cliquer sur quand votre question à trouvé une solution.

    Si vous n'avez pas encore lu les règles du club, mieux vaut tard que jamais!

  3. #3
    Membre averti
    Inscrit en
    Février 2007
    Messages
    18
    Détails du profil
    Informations forums :
    Inscription : Février 2007
    Messages : 18
    Par défaut
    Et bien, mon div contenu commence avant mon div menuongl mais son contenu n'apparaît qu'après. Mes explications vous semblent peut-être floues, voyez plutôt la pièce jointe. Le div contenu commence dès le début de la page et cache la belle image d'arrière-plan d'en-tête, alors qu'il ne devrait commencer qu'après les onglets. Impossible de régler ça avec des marges : sous Linux, entre autres, et sûrement iMac, la ligne délimitant les onglets est masquée par le div contenu.

    Merci

    Louperivois
    Images attachées Images attachées  

  4. #4
    Membre averti
    Inscrit en
    Février 2007
    Messages
    18
    Détails du profil
    Informations forums :
    Inscription : Février 2007
    Messages : 18
    Par défaut
    Eh bien, plus de réponses ?

    Désinterêt ou impossibilité de régler le bug ?

    Louperivois

Discussions similaires

  1. onglet avec calque
    Par cloeuf dans le forum Balisage (X)HTML et validation W3C
    Réponses: 17
    Dernier message: 12/01/2006, 14h16
  2. Problème avec float.
    Par Paulinho dans le forum Débuter
    Réponses: 1
    Dernier message: 29/11/2005, 10h27
  3. [CSS] Utilisation de deux div avec float
    Par Ditch dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 06/10/2005, 15h48
  4. pb positionnement avec float
    Par jerome38000 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 4
    Dernier message: 17/08/2005, 19h40
  5. Creer onglet avec forms9
    Par simpletz dans le forum Forms
    Réponses: 5
    Dernier message: 10/08/2005, 12h46

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo