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 :

Mise en page


Sujet :

CSS

  1. #1
    Membre éclairé Avatar de fazpedro
    Homme Profil pro
    Inscrit en
    Août 2009
    Messages
    506
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Août 2009
    Messages : 506
    Par défaut Mise en page
    Bonjour,
    je suis débutant en CSS, et je souhaite avoir dans un premier temps la mise en page suivante de haut en bas :
    - image en haut à gauche
    - un commentaire texte en-dessous
    - des liens (Accueil...)
    - une zone de texte

    Mon problème: le texte se retrouve à droite de l'image et pas en-dessous...

    Merci de votre aide.
    -----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
    <!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>
    <title>MON SITE</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="style.css" rel="stylesheet" type="text/css">	
    </head>
    <body>
    <div id="fixe-haut"><img src="image.gif" width="636" height="115" align="left" /></div>
    <div id="main">mon site a voir</div>
    <hr>
    <p>le site des decouvertes</p>
    <p>&nbsp;</p>
    <ul id="tabnav">
    <li class="active"><a href="#">Accueil</a></li>
         <li><a href="#">Agenda</a></li>
         <li><a href="#">Liens</a></li>
         <li><a href="#">Nous Contacter</a></li>
    </ul>
    </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
    body {
        font: 100% verdana, arial, sans-serif;
        background-color: #fff;
        margin: 50px;
    }
    #fixe-haut
    	{
    	    height          : 70px;
    		position		: fixed;
    		top				: 0;
    		width			: 100%;
    		left			: 0;
    }
    #en_tete {
    	font: 100% Bodonie, Verdana, sans-serif;
    	float: left;
    	font-size: 15px;
    	line-height: 14px;
    	font-weight: bold;
    	margin: 0 10px 4px 10px;
    	text-decoration: none;
    	color: #000080;
    	}
     
    #tabnav {
    	margin: 0;
    	padding: 0 0 20px 20px;
    	border-bottom: 1px solid #696;
    	}
     
    #tabnav li {
    	margin: 0;
    	padding: 0;
    	display: inline;
    	list-style-type: none;
    	}
     
    #tabnav a:link, #tabnav a:visited {
    	float: left;
    	font-size: 20px;
    	line-height: 14px;
    	font-weight: bold;
    	margin: 0 10px 4px 10px;
    	text-decoration: none;
    	color: #9c9;
    	}
    #tabnav li.active a:link, #tabnav li.active a:visited, #tabnav a:hover {
    	border-bottom: 4px solid #696;
    	padding-bottom: 2px;
    	background: #fff;
    	color: #363;
    	}
    #tabnav a:hover {
    	color: #696;
    	}
    ----------------------------

  2. #2
    Modérateur
    Avatar de Bisûnûrs
    Profil pro
    Développeur Web
    Inscrit en
    Janvier 2004
    Messages
    9 931
    Détails du profil
    Informations personnelles :
    Âge : 42
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2004
    Messages : 9 931
    Par défaut
    C'est normal, tu as mis ton bloc image en position:fixed, il sort donc du flux de la page et le texte n'a pas de point de repère pour se positionner par rapport à lui.
    Supprime cette propriété ou met un margin-top à ton texte.

  3. #3
    Membre éclairé Avatar de fazpedro
    Homme Profil pro
    Inscrit en
    Août 2009
    Messages
    506
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Août 2009
    Messages : 506
    Par défaut Mise en page CSS
    Voilà ce que j'ai modifié en gras dans le .CSS:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    #fixe-haut
    	{	    height          : 70px;
    	/*	position		: fixed; */
    	float: left;
    		top				: 0;
    		width			: 100%;
    		left			: 0; }
    Voilà ce que j'ai modifié en gras dans le .HTML:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <div id="fixe-haut"><img src="image.gif" width="636" height="115" align="left" /></div>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    et c'est bon, le titre se retrouve bien en-dessous.

    Merci.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [VB6+API][Impression] Mise en page
    Par HPJ dans le forum VB 6 et antérieur
    Réponses: 4
    Dernier message: 06/09/2004, 17h11
  2. [CR.NET][VS.NET] mise en page et sections
    Par guignol dans le forum SDK
    Réponses: 8
    Dernier message: 06/08/2004, 15h07
  3. mise en page (Header and Footer) en XML-XSL.
    Par christine dans le forum XSL/XSLT/XPATH
    Réponses: 4
    Dernier message: 01/03/2004, 16h31
  4. [CR] Mise en page
    Par akolyto dans le forum SAP Crystal Reports
    Réponses: 4
    Dernier message: 14/10/2003, 12h22
  5. [mise en page] pour bien indenter son code
    Par bihorece dans le forum C++Builder
    Réponses: 4
    Dernier message: 06/08/2003, 16h14

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