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 :

[CSS] Placement "bancal" de blocs div


Sujet :

Positionnement en CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Inscrit en
    Mai 2004
    Messages
    40
    Détails du profil
    Informations forums :
    Inscription : Mai 2004
    Messages : 40
    Par défaut [CSS] Placement "bancal" de blocs div
    Bonjour,

    J'ai un petit problème gênant au niveau de la prise en charge des blocs div et de leur agencement en CSS. Voici déjà le code HTML :

    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
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Document sans nom</title>
    <link href="css/main.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="container">
    	<div id="top">
    		<h1>Kerbos</h1>
    	</div>
    	<div id="body">
    		<div id="menu">
    			<ul>
    				<li><a href="index.php?q=1:0:0:0:0:0">Accueil</a></li>
    				<li><a href="index.php?q=1:0:0:0:0:0">Jouer</a></li>
    				<li><a href="index.php?q=1:0:0:0:0:0">Forum</a></li>
    				<li><a href="index.php?q=1:0:0:0:0:0">Messages</a></li>
    				<li><a href="index.php?q=1:0:0:0:0:0">Profil</a></li>
    				<li><a href="index.php?q=1:0:0:0:0:0">A propos</a></li>
    			</ul>		
    		</div>
    		<div id="content">
    			<div id="lipsum">
    				<p>Lorem ipsum dolor sit amet, consectetuer [...]</p>
    				<p>[...]</p>
    				<p>[...]</p>
    				<p>[...]</p>
    				<p>[...]</p>
    		  </div>
    		</div>
    	</div>
    </div>
    </body>
    </html>
    Le code 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
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    /*
    -------------------------------------------------------------------
    Global Definitions
    -------------------------------------------------------------------
    */
     
    body {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	margin: 0px;
    	padding: 0px;
    }
     
    /*
    -------------------------------------------------------------------
    Global Skelton
    -------------------------------------------------------------------
    */
     
    #top h1 {
    	display: none;
    }
     
    #top {
    	height: 0px;
    }
     
    #container {
    	width: 100%;
    	position: absolute;
    	top: 0px;
    	left: 0px;
    	padding-top: 74px;
    	background: #FFFFFF url('../images/kerbos_medium.jpg') no-repeat 15px 15px;
    }
     
    #body {
    	border-top: 1px solid #CCCCCC;
    	border-bottom: 1px solid #CCCCCC;
    }
     
    #content {
    	margin: 0px 0px 0px 200px;
    	padding: 0px 10px 10px 10px;
    	background-color: #FF0000;
    }
     
    #menu {
    	width: 200px;
    	height: 100%;
    	float: left;
    	background: #F2F2F2 url('../images/menu_bottom.gif') no-repeat bottom left;
    }
     
    /*
    -------------------------------------------------------------------
    Menu
    -------------------------------------------------------------------
    */
     
    #menu ul {
    	list-style-type: none;
    	padding: 0px 0px 5px 0px;
    	margin: 0px;
    }
     
    #menu li {
    	border-bottom: 1px solid #DDDDDD;
    	padding: 8px 10px 8px 15px;
    	border-right: 1px solid #DDDDDD;
    }
     
    #menu a {
    	font-size: 12px;
    	color: #000000;
    	text-decoration: none;
    }
     
    #menu a:hover {
    	text-decoration: underline;
    }
    Et enfin une capture de ce que ça donne sous Safari (idem Firefox et IE...) :



    La coloration rouge est faite à des fins de test, et vous aurez compris qu'au final je voudrais coller le bloc du contenu à la bordure haute. Mais ça ne marche pas....

    D'avance merci.

  2. #2
    Membre expérimenté
    Profil pro
    Inscrit en
    Août 2005
    Messages
    221
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Août 2005
    Messages : 221
    Par défaut


    Sans doute un :
    Ou
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    p{
    margin-top: 0;
    }
    devrait régler ton problème.

  3. #3
    Candidat au Club
    Profil pro
    Inscrit en
    Juin 2005
    Messages
    4
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Juin 2005
    Messages : 4
    Par défaut Oui mais...
    J'ai à peu de choses près les même partages de ma fenêtre sauf que suivant la page, à la place de la boite content, j'ai 2 colonnes une ou je mets le texte et dans l'autre je l'illustre.
    Tout allait bien tant que je travaillais avec des top: et left: et que tout partait du coins en haut à gauche. Les écrans larges étant de plus en plus répendus, je me suis dit que j'allais tout mettre dans le milieu de l'écran avec une largeur fixe. Et dès lors j'ai un gros problèmes avec les boites qui sont côte à côte Quelqu'un aurait-il un exemple à me montrer ??
    Merci d'avance.

Discussions similaires

  1. [CSS][Débutant]Alonger un bloc div jusqu'en bas de la page
    Par Thomzz dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 07/09/2005, 22h58

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