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 :

Un padding CSS


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Profil pro
    Inscrit en
    Janvier 2011
    Messages
    11
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2011
    Messages : 11
    Par défaut Un padding CSS
    Bonjour tout le monde.

    Comme indiqué dans le titre j'ai un problème sur un padding que j'essaye de régler mais toutes mes tentatives sont veines. J'ai donc besoin d'un petit coup de pouce!

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    <li id="gourd">
    		<h3><a href="#gourd"><img src="images/1-4.jpg" alt="" />Gourd</a></h3>
    		<p>Gourds were the earliest plant species domesticated by humans and were originally used by man as containers or vessels before clay or stone pottery, and is sometimes referred to as 'nature's pottery'. The original and evolutional shape of clay pottery is thought to have been modeled on the shape of certain gourd varieties.</p>
    	</li>
    Voici mon html, je souhaite ajouter un padding de 0.5em sur l'ensemble mais pas sur l'image. Donc dans mon css j'ai fait :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
     
    li#gourd {
    	padding: 0.5em;
    }
     
    li#gourd img{
    	padding: 0em;
    }
    Mais ça ne fonctionne pas. J'obtiens ceci:



    La première image de la deuxième ligne est légérement décalée sur la droite alors que je voudrais qu'elle soit alignée comme les autres.

    J'espère avoir été assez clair.

    Merci de votre aide, bonne journée.

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 211
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 211
    Par défaut
    Bonjour,
    un peu plus de code de l'enchainement, conteneur des tes images ne serait pas de refus.

    Un petite remarque néanmoins sur cette ligne
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <h3><a href="#gourd"><img src="images/1-4.jpg" alt="" />Gourd</a></h3>
    le H3 dans un LI ???? cela me paraît moyen !

  3. #3
    Membre averti
    Profil pro
    Inscrit en
    Janvier 2011
    Messages
    11
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2011
    Messages : 11
    Par défaut
    Bonjour,

    Merci de votre réponse.
    Voici le reste du 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
    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
    <!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" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
    <link rel="stylesheet" type="text/css" media="all" href="css/init.css" />
    <link rel="stylesheet" type="text/css" media="all" href="css/layout.css" />
    <link rel="stylesheet" type="text/css" media="all" href="css/typoColor.css" />
    <title>Presentation d'une liste</title>
     
     
     
    </head>
     
    <body>
     
    <ul>
     
    	<li id="pomegranate">
    		<h3><a href="#pomegranate"><img src="images/1-1.jpg" alt="" />Pomegranate</a></h3>
    		<p>The Pomegranate (Punica granatum) is a fruit-bearing deciduous shrub or small tree growing to 5-8 m tall. The pomegranate is believed to have originated in eastern Iran and eastward, but its true native range is not accurately known because of millennia of extensive cultivation.</p>
    	</li>
     
    	<li id="carrot">
    		<h3><a href="#carrot"><img src="images/1-2.jpg" alt="" />Carrot</a></h3>
    		<p>The carrot (Daucus carota) is a root vegetable, usually orange or white in color with a woody texture. The edible part of a carrot is a taproot. It is a biennial plant which grows a rosette of leaves in the spring and summer while building up the stout taproot, which stores large amounts of sugars for the plant to flower in the second year.</p>
    	</li>
     
    	<li id="onion">
    		<h3><a href="#onion"><img src="images/1-3.jpg" alt="" />Onion</a></h3>
    		<p>Onion in the general sense can be used for any plant in the genus Allium but used without qualifiers usually means Allium cepa, also called the garden onion. Onions (usually but not exclusively the bulbs) are edible with a distinctive strong flavour and pungent odour which is mellowed and sweetened by cooking.</p>
    	</li>
     
    	<li id="gourd">
    		<h3><a href="#gourd"><img src="images/1-4.jpg" alt="" />Gourd</a></h3>
    		<p>Gourds were the earliest plant species domesticated by humans and were originally used by man as containers or vessels before clay or stone pottery, and is sometimes referred to as 'nature's pottery'. The original and evolutional shape of clay pottery is thought to have been modeled on the shape of certain gourd varieties.</p>
    	</li>
     
    	<li id="strawberry">
    		<h3><a href="#strawberry"><img src="images/1-5.jpg" alt="" />Strawberry</a></h3>
    		<p>The strawberry (Fragaria) is a genus of plants in the family Rosaceae, and the fruit of these plants. There are more than 20 named species and many hybrids and cultivars. The most common strawberries grown commercially are cultivars of the Garden strawberry, a Fragaria ananassa hybrid. Strawberries are a valuable source of vitamin C. See Garden Strawberry for information about the fruit as a food.</p>
    	</li>
     
    	<li id="lily">
    		<h3><a href="#lily"><img src="images/1-6.jpg" alt="" />Lily</a></h3>
    		<p>Lilies are native to the northern temperate regions. Their range in the Old World extends across much of Europe, the north Mediterranean, across most of Asia to Japan, south to the Nilgiri mountains in India, and south to the Philippines. In the New World they extend from southern Canada through much of the United States. </p>
    	</li>
     
    	<li id="fig">
    		<h3><a href="#fig"><img src="images/1-7.jpg" alt="" />Fig</a></h3>
    		<p>A fig fruit is derived from a specially adapted flower. The fruit (an accessory fruit called a syconium) has a bulbous shape with a small opening (the ostiole) in the end and a hollow area inside lined with small red edible seeds. The fruit/flower is pollinated by small wasps that crawl through the opening to fertilise the fruit.</p>
    	</li>
     
    	<li id="wine">
    		<h3><a href="#wine"><img src="images/1-8.jpg" alt="" />Wine</a></h3>
    		<p>Wine is an alcoholic beverage produced by the fermentation of the juice of fruits, usually grapes. Although a number of other fruits - such as plum, elderberry and blackcurrant - may also be fermented, only grapes are naturally chemically balanced to ferment completely without requiring additional sugars, acids, enzymes or other nutrients. Non-grape wines are called fruit wine or country wine.</p>
    	</li>
     
    	<li id="bean">
    		<h3><a href="#bean"><img src="images/1-9.jpg" alt="" />Bean</a></h3>
    		<p>Bean originally meant the seed of the broad bean, but was later broadened to include members of the genus Phaseolus such as the common bean or haricot and the runner bean and the related genus Vigna. The term is now applied in a general way to many other related plants such as soybeans, peas, lentils, vetches and lupins.</p>
    	</li>
    </ul>
     
    </body>
    </html>
    Et le css pour le layout :
    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
    ul {
    	width: 520px;
    	margin: auto;
    	padding-top: 510px;
    	position: relative;
    	}
     
     
    #pomegranate img{
    	position: absolute;
    	top: 0px;
    }
     
    #carrot img{
    	position: absolute;
    	top:0;
    	left: 170px;
    }
     
    #onion img{
    	position: absolute;
    	top:0;
    	left:340px;
    }
     
    #gourd img{
    	position: absolute;
    	top: 170px;
    }
     
    #strawberry img {
    	position: absolute;
    	top: 170px;
    	left: 170px;
    }
     
    #lily img{
    	position: absolute;
    	top: 170px;
    	left: 340px;
    }
     
    #fig img {
    	position: absolute;
    	top:340px;
    }
     
    #wine img {
    	position: absolute;
    	top: 340px;
    	left: 170px;
    }
     
    #bean img {
    	position: absolute;
    	top: 340px;
    	left: 340px;
    }
     
    h3, p {
    	display: inline;
    }
     
    li#gourd img{
    	padding: 0em;
    }
     
    li#carrot, li#lily, li#wine, li#gourd {
    	padding: 0.5em;
    }
     
    li#gourd img{
    	padding: 0em;
    }
    C'est un exercice de cours pour nous faire travailler le positionnement absolu, ce qui explique pourquoi il y en a partout ^^.

    Pour le h3 dans le Li, ce fichier nous a été donné par notre prof, mais c'est une mauvaise méthode? Car c'est la deuxième fois qu'on l'utilise.

    Merci

  4. #4
    Membre très actif
    Profil pro
    Inscrit en
    Janvier 2011
    Messages
    141
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2011
    Messages : 141
    Par défaut
    Bonjour,

    Pourquoi n'utilisez vous pas un tableau ?
    vos images seront disposer et pour faire un padding par la suite

  5. #5
    Membre averti
    Profil pro
    Inscrit en
    Janvier 2011
    Messages
    11
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2011
    Messages : 11
    Par défaut
    Bonjour,
    Car dans l'énoncé de l'exercice, nous devons utiliser le positionnement ^^

  6. #6
    Membre très actif
    Profil pro
    Inscrit en
    Janvier 2011
    Messages
    141
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2011
    Messages : 141
    Par défaut
    ah je vois.
    Sinon tu utilises une classe dans tes balises image
    tu pourrais te concentrer sur le css sur ta classe image

Discussions similaires

  1. [CSS] Padding, width et internet explorer
    Par Torpedox dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 30/12/2005, 14h46
  2. [CSS]width:100% avecmargin/padding/border ?
    Par Raay dans le forum Mise en page CSS
    Réponses: 14
    Dernier message: 03/11/2005, 15h15
  3. [CSS] Instruction Padding : FireFox pas trop comprendre ?
    Par DemonKN dans le forum Mise en page CSS
    Réponses: 9
    Dernier message: 11/08/2005, 15h23

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