[CSS] espace vertical

Recherche :

Mot : Pseudo : Filtrer
Page : 1 2 Page Suivante Page Précédente Bas de page
Auteur	Sujet : [CSS] espace vertical

kameha

Salut,
je suis sur la construction des menus de mon site et j'ai une question assez basique.
Dans ma colonne à gauche, je veux un espace vertical entre mon logo et mon menu.
Il vaut mieux que je mette un <br>, que je creer dans mon css un truc comme .espace-menu-gauche ou que je mette un pixel transparent?
merci

Publicité

T509

$job->GetJob(now)

un div logo, un div menu et une propriété margin

---------------
fermez vos topics résolus avec le tag [Résolu] en fin de titre. Merci !

Hermes le Messager

Breton Quiétiste

T509 a écrit :

un div logo, un div menu et une propriété margin

+1 tout simplement. [:spamafote]

sibelius

Vous êtes sûr ?

Voire simplement un logo (sans div autour , un menu (sans div autour ) et des marges

Message édité par sibelius le 13-05-2004 à 12:52:34

---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com

skylight

Made in France.

Rajoute
margin-bottom : 10px;

aux propriétés CSS de ton logo.

Hermes le Messager

Breton Quiétiste

Si on veut vraiment être perfectionniste, on laisse le logo avec le margin-bottom (puisque c'est un élément unique) et on fait un div menu en dessous (étant donné que le menu comporte plusieurs éléments).

skylight

Made in France.

Oui

Car un div logo juste pour mettre une image.. c'est pas vraiment sémantiquement top, quoi

Et puis ça dépend, si le menu est de type texte, alors on peut éviter de faire un div et utiliser les puces [:banzai]

Hermes le Messager

Breton Quiétiste

skylight a écrit :

Et puis ça dépend, si le menu est de type texte, alors on peut éviter de faire un div et utiliser les puces [:banzai]

:jap:

kameha

merci ben.
dans mon css j'ai ça:
.logo {
margin-bottom: 10px;
}
et mon html:
<img src="images/home/logo.gif" class="logo">

ça vous semble ok?
oui mon menu c'est du texte

T509

$job->GetJob(now)

essaie et regarde si cela fonctionne. A priori l'idée est là

---------------
fermez vos topics résolus avec le tag [Résolu] en fin de titre. Merci !

Publicité

skylight

Made in France.

Oui, c'est bon

si ton menu est du texte, alors utilise les puces, et personnalise-les avec les CSS.

Tu augmentera la sémantique, la lisibilité, et l'accessibilité aux handicapés.

kameha

pour mon menu j'ai utilisé <ul> <li> et compagnie...c'est ça les puces

skylight

Made in France.

:jap:

protoinou

Ouai c'est ça LOL, c'est skylight, qui ne sait pas parler :pt1cable:

:ange:

Il voulait parler de liste tout simplement, tu mets pas de div du coup, tu mets juste class="menu" dans ton <ul>

Vala

kameha

yep merci

sibelius

Vous êtes sûr ?

Hermes le Messager a écrit :

Le <ul> est un conteneur suffisant non? Pourquoi y rajouter un div ? :??:

---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com

kameha

J'aimerais faire un menu de ce genre:

Les bloques insides outside otherside, jles gere comment?
Jme prends la tete a les découper (fleche+titre) et a reconstruire tout ça ou j'exporte les 3 images et basta?
qu'en pensez vous?

sibelius

Vous êtes sûr ?

kameha a écrit :

J'aimerais faire un menu de ce genre:
http://www.courchevel.com/temp/menu-2005.jpg

Les bloques insides outside otherside, jles gere comment?
Jme prends la tete a les découper (fleche+titre) et a reconstruire tout ça ou j'exporte les 3 images et basta?
qu'en pensez vous?

Pour ce genre de menu (avec titre + description), je pense que la structure la plus propre est une liste de définition.
Voir ce lien : http://www.pompage.net/pompe/listesdefinitions/

---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com

Hermes le Messager

Breton Quiétiste

SIBELIUS a écrit :

Le <ul> est un conteneur suffisant non? Pourquoi y rajouter un div ? :??:

Oui, bien que cela dépende des cas.

kameha

SIBELIUS a écrit :

Pour ce genre de menu (avec titre + description), je pense que la structure la plus propre est une liste de définition.
Voir ce lien : http://www.pompage.net/pompe/listesdefinitions/

tu crois que j'utilise quand meme les <ul> et les <li> avec ces balise <dl>?

sibelius

Vous êtes sûr ?

kameha a écrit :

tu crois que j'utilise quand meme les <ul> et les <li> avec ces balise <dl>?

Non, c'est l'un ou l'autre dans ton cas :
Avec les ul/li, tu n'auras pas de notion de titre, et tu les as (dt) avec les DL

---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com

kameha

ok merci

css - j'ai donc ça :

Code :

}
.menugauche {
list-style-type: none;
margin: 0;
padding: 0;
}
.menugauche a {
margin: 0 2px;
width: 139px;
height: 15px;
display: block;
text-align: left;
text-decoration: none;
color: #000;
background: #fff;
margin-bottom: 1px;
}
.background-image dt {
margin: 0 0 1em 0;
padding: 0 0 0 0px;
background-image: url(../images/home/tt-gauche-fond.gif);
background-repeat: no-repeat;
height: 18px;
width: 100%;
}
.background-image dd
{
margin: 0 0 0 0;
padding: 0 0 0 0;
}

html:

Code :

<dl class="background-image">
<dt>Inside</dt>
<dd class="menugauche">
<a href="">Hébergement</a>
<a href="">Restaurants / Bars</a>
<a href="">Shopping / Services</a>
<a href="">Séminaires</a>
</dd>
</dl>

ça donne :
http://www.courchevel.com/temp/tes [...] -tablo.php

sibelius

Vous êtes sûr ?

Personnellement, j'aurais mis chaque élément de menu (a) dans un dd à part.

PS : en tout cas, ton gabarit commence à prendre forme

---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com

Flyman30

et comme ça :

Code :

.menu
{
background-color: #FFFFFF;
color: #000000;
margin-top: 5px;
margin-left: 5px;
border-bottom: 1px solid #008040;
op: 115px;*/
width: 150px;
}
.titres-categories
{
text-align: center;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
margin-top: 0px;
width: 148px;
border: 1px solid #008040;
background-color: #008040;
}
a.menul
{
display: block;
text-align: left;
padding: 5px 2px 0px 12px;
border-left: 1px solid #008040;
border-right: 1px solid #008040;
background-color: #fffff0;
text-decoration: none;
color: #OOOOOO;
}
html>body #a.menul
{
width: auto;
}
a.menul:hover
{
padding: 5px 2px 0px 12px;
background-color:#7CFC00;
text-decoration: none;
color: #000000;
}
html>body #a.menul:hover
{
width: auto;
}

Code :

<div class="menu">
<div class="titres-categories">NAVIGATION</div>
<a href="index.asp" class="menul">Accueil</a>
<a href="News.asp" class="menul">News</a>
<a href="Editorial.asp" class="menul">Editorial</a>
<a href="astuces.asp" class="menul">Astuces</a>
<a href="Rencontres.asp" class="menul">Rencontres</a>
<a href="Coins_peche.asp" class="menul">Coins de pêche</a>
<a href="trombi_choix.asp" class="menul">Trombinoscope</a>
<a href="proposition.asp" class="menul">Proposer un article</a>
<a href="#" class="menul"></a>
<div class="titres-categories">FORUM</div>
<a href="Forum/default.asp" class="menul">Forum</a>
<a href="#" class="menul"></a>
</div>

ce qui donne : http://www.assoc-sempe.com/test.asp

Message édité par Flyman30 le 14-05-2004 à 12:25:10

sibelius

Vous êtes sûr ?

@Flyman30 > Le résultat revient au même sauf que les divs dans ton cas n'ont aucune valeur sémantique.
Le DL de la liste de définition indique bien une liste (d'élément de menu). Le DT indique bien un titre et les DD indiquent bien les différents éléments qui se rapportent au titre.
C'est beaucoup plus clair que de mettre des div à tout va.

---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com

Flyman30

SIBELIUS a écrit :

Ok merci, je vais voir ça

skylight

Made in France.

et puis je connais pas cette propriété .. : html>body #a.menul

Flyman30

skylight a écrit :

et puis je connais pas cette propriété .. : html>body #a.menul

c'est le hack pour padding (IE)

kameha

SIBELIUS a écrit :

Personnellement, j'aurais mis chaque élément de menu (a) dans un dd à part.

PS : en tout cas, ton gabarit commence à prendre forme

ça veut dire ça?

Code :

<dl class="background-image">
<dt>Inside</dt>
<dd class="menugauche">
<a href="">Hébergement</a>
</dd>
<dd class="menugauche">
<a href="">Restaurants / Bars</a>
</dd>
<dd class="menugauche">
<a href="">Shopping / Services</a>
</dd>
<dd class="menugauche">
<a href="">Séminaires</a>
</dd>
</dl>

sibelius

Vous êtes sûr ?

Plus simple :

Code :

<dl class="background-image">
<dt>Inside</dt>
<dd><a href="">Hébergement</a></dd>
<dd><a href="">Restaurants / Bars</a></dd>
<dd><a href="">Shopping / Services</a></dd>
<dd><a href="">Séminaires</a></dd>
</dl>

Et tu appliques ta css ".menugauche" sur "dd" ou ".background-image dd"

---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com

kameha

euh....
j'ai fais ça:

Code :

}
.background-image dt {
margin: 0 0 1em 0;
padding: 0 0 0 0px;
background-image: url(../images/home/tt-gauche-fond.gif);
background-repeat: no-repeat;
height: 18px;
width: 100%;
}
.background-image dd
{
padding: 0 0 0 0;
margin: 0 2px;
width: 139px;
height: 15px;
display: block;
text-align: left;
text-decoration: none;
color: #000;
background: #fff;
margin-bottom: 1px;
}

+l'html que tu m'as montré

mais les propirétés de text ne sont pas pris en compte. Les liens sont bleu basique.

Message édité par kameha le 14-05-2004 à 14:05:20

skylight

Made in France.

rajoute ",a"

.background-image dd,a
{
padding: 0 0 0 0;
margin: 0 2px;
width: 139px;
height: 15px;
display: block;
text-align: left;
text-decoration: none;
color: #000;
background: #fff;
margin-bottom: 1px;
}

kameha

merci.

si je veux que "inside" soit une image (d'autre arrive dessous avec le meme fond bleu+fleche).
Je fais un .image-inside dans mon .css?

kameha

j'ai fais ça:

Code :

<dt class="tt-gauche"><img src="images/home/tt-inside.gif" /></dt>

l'image s'affiche : http://www.courchevel.com/temp/tes [...] -tablo.php mais je n'arrive pas à la centrer verticalement parlant.

css tt-gauche:

Code :

.tt-gauche {
margin-top: 3px;
}

C'est pas un margin-top qui faut mettre pour le centrer?
merci

kameha

ou un vertical align ptetre?

skylight

Made in France.

padding-top : 5px;

kameha

morchepo
http://www.courchevel.com/temp/tes [...] -tablo.php
?

kameha

c'est bon, j'ai du mettre ça
}
.tt-gauche {
padding-top: 4px;
}

mais aussi et surtout (sinon, il se passe rien),ça:
}
.background-image dt {
margin: 0 0 4px;
padding: 0 0 4 0px;
background-image: url(../images/home/tt-gauche-fond.gif);
background-repeat: no-repeat;
height: 18px;
width: 145;
}

Message édité par kameha le 14-05-2004 à 16:31:36

skylight

Made in France.

ce que t'as marqué, c'est pareil que padding-top : 4px; pourtant.

kameha

jpeux pas enlever le tt-gauche?

Message édité par kameha le 14-05-2004 à 16:52:01

Publicité

Page : 1 2

Page Suivante

Page Précédente

Haut de page

FORUM HardWare.fr

Programmation

HTML/CSS

[CSS] espace vertical

Sujets relatifs
CSS et Safari	TUTORIEL COMPLET : plusieurs CSS au choix...
[PHP] Upload photo + Galerie CSS XHTML [Résolu]	Une CSS au choix en cliquant sur un bouton img....
petit pb de css surement : page qui s'affiche pas tjs en entier	<marquee> ou equivalent defilement vertical en xtml help!
Alignement vertical dans un div	Aide sur les CSS
CSS et PHP : Quel est le probleme ?	CSS : avoir des blocs (DIV) fixes quelques soit la taille de la page
Plus de sujets relatifs à : [CSS] espace vertical

Page générée en 0.138 secondes