Rechercher : dans
Par :

CSS mise en page/marge

Dernière réponse le 25 jui 2007 à 14:57:12 mahudtouch, le 24 jui 2007 à 13:11:41 
 Signaler ce message aux modérateurs

Bonjour,

J'ai un petit souci de marge sous CSS.
Voici le lien de mon blog: http://tokyotouch.mabulle.com/

je voudrais que le menus soit colle a gauche de la zone bleue. sans marge mais je n'arrive pas a l'enlever.

voila a quoi ressemble ma page css

/* style du blog
-------------------------------------------------------- */
html,body{
margin:0;
padding:0;
}
body{
text-align:center;
}
p{
margin:1em 0;
}
h3{
font-size:1em;
}
form{
border:0px;
}
fieldset{
border:none;
}
p.field{
clear:left;
margin-left:10px;
}
label.float{
position:relative;
float:left;
width:45%;
}
input,textarea,option{
-moz-border-radius:7px;
padding:2px;
font-size:12px;
}
input.text:focus,textarea:focus{
border-style:inset;
}
textarea{
width:100%;
}
.erreur,.message{
margin-top:5px;
border-left:6px solid #8b120d;
margin:20px;
padding:15px;
width:100%;
}
.message{
border-left:6px solid #006600;
}
.erreur span,.message span{
color:#8b120d;
font-weight:bold;
}
.message span{
color:#006600;
}
.erreur li{
list-style-type:square;
}
img{border:0;}

/* style de la page
-------------------------------------------------------- */
#page{
width:816px;
text-align:right;
margin:0 auto;
padding:0;
}

/* Style de l'entête (haut)
-------------------------------------------------------- */
#haut{
height:150px;
}
#haut h1{
margin:0;
padding-top:49px;
padding-left:115px;
font-size:61px;
font-weight:lighter;
}
#haut a{
text-decoration:none;
}
#prelude{
display:none;
}

/* style du contenant et contenu
-------------------------------------------------------- */
#contenant{
float:right;
margin:-30px 0 0;
padding:0;
}
#contenant #contenu{
width:500px;
margin-right:10px;
}

/* contenu: style des articles
-------------------------------------------------------- */
.day-date{
border-bottom-width:1px;
border-bottom-style:solid;
font-weight:bold;
font-size:20px;
text-align:right;
text-color:#5B2B15;
}
.post{
text-align:justify;
padding-bottom:12px;
}
.post-titre{
text-align:left;
font-weight:bold;
line-height:0px;
font-size:1.1em;
padding-top:10px;
}
html> #post-titre{
text-align:left;
font-weight:bold;
font-family:"trebuchet ms",geneva,arial,helvetica,sans-serif;
line-height:0px;
padding-top:0px;
font-size:1.1em;
}
.post-titre a{
text-decoration:none;
font-size:1.1em;
}
.post-info{
text-align:left;
font-size:0.7em;
margin-top:0px;
}
.post-contenu,.post-chapo{
clear:left;
font-size:0.75em;
}
.comment-info{
margin:1em 0 0 0;
font-size:0.8em;
}
.post-info a{
text-align:left;
margin-top:0px;
}
.com-info{
text-align:left;
font-size:0.75em;
margin-top:15px;
}
.post a{
clear:left;
}

/* contenu: style des commentaires et rétroliens
-------------------------------------------------------- */
#trackbacks blockquote,#comments blockquote,#preview blockquote{
margin-left:5px;
}
#trackbacks blockquote p,#comments blockquote p{
margin:-10px 0px 0px;
padding:0px 0px 5px 10px;
border-top:0px;
border-right:0px;
border-bottom:0px;
}
#trackbacks p,#comments p{
border:0px;
margin:0px;
padding:0px;
padding-bottom:5px;
font-size:0.75em;
}

/* style du menu
-------------------------------------------------------- */
#menu form{
height:30px;
border:0px;
}
#menu{
float:left;
width:260px;
font-size:0.7em;
}
#menu div{
padding:5px 10px 5px 15px;
margin:0 0 15px 80px;
text-align:left;
-moz-border-radius:4px;
}
#menu h2{
line-height:16px;
font-weight:bold;
text-transform:uppercase;
margin:0;
font-size:1.1em;
}
#menu ul,li{
margin:0px;
margin-left:0px;
padding:0px;
list-style-type:none;
}
#menu li{
margin-left:0.5em;
}
#menu a{
text-decoration:none;
letter-spacing:1px;
}
#menu input,#comment-form input,#comment-form textarea{
font-size:1em;
padding:1px;
-moz-border-radius:4px;
}

/* menu: style des blocs
-------------------------------------------------------- */
#calendrier table{
border-collapse:collapse;
font-size:0.9em;
font-family:geneva,arial,helvetica,sans-serif;
}
#calendrier caption{
padding:0 0 3px 0;
font-size:11px;
}
#calendrier abbr{
border:none;
}
#calendrier th{
border:none;
padding:1px;
}
#calendrier td{
border:none;
padding:1px;
}
#calendrier td{
text-align:center;
}
#calendrier td.active a{
font-weight:bold;
}
#calendrier a{
font-weight:bold;
text-decoration:underline;
}

/* style du pied de page (bas)
-------------------------------------------------------- */
#bas{
clear:both;
margin-top:5px;
text-align:center;
font-size:10px;
}
#bas ul{
clear:both;
margin:5px;
padding:0;
}
#bas li{
display:inline;
list-style-type:none;
}

est-ce que quelqu'un peut m'aider?

merci d'avance et bonne soiree a tous.

Configuration: Windows XP
Firefox 2.0.0.5

Meilleures réponses pour « CSS mise en page/marge » dans :
Javascript - Centrer verticalement une page web VoirPour centrer verticalement une page web, impossible de s'en sortir en css. Une solution bien pratique : JavaScript. 1. Le fichier .js 2. La page .html 3. Utilisation 4. Inconvénients 5. Rappel Merci à Dalida pour la source du...
Déclaration d'une feuille de style (CSS) VoirDéclaration d'une feuille de style Les feuilles de style sont un sur-ensemble du langage HTML, cela signifie qu'elle ne sont pas intégrées directement dans les recommandations HTML du W3C. Ainsi, il est nécessaire de renseigner le code HTML avec...
Mise en page de XML avec XSL VoirIntroduction à XSL XML est un langage de structuration des données, et non de représentation des données. Ainsi XSL (eXtensible StyleSheet Language) est un langage recommandé par le W3C pour effectuer la représentation des données de documents XML....

1

s.spark, le 24 jui 2007 à 14:00:58

Salut,

Avec

#menu{
	float:left;
	width:260px;
	font-size:0.7em;
	padding: 0 0 0 24px; 
}



Ca le fait ?

Sinon j'aurais plutôt mis pour un menu :

#menu{
	position: absolute;
	left:50px;
	width:260px;
	font-size:0.7em;
}

Répondre à s.spark

2

mahudtouch, le 24 jui 2007 à 16:16:23

Merci beaucoup pour ta reponse.

effectivement, ca fait bien bouger le menu, par contre, je pense que je me suis mal exprimee.
ce que je voudrais faire c'est decaler le menu completement vers la gauche (vraiment colle a la zone marron) mais il y a comme une ligne invisible qui empeche le menu d'aller plus vers la gauche.

tu vois ce que ca peut etre?

Répondre à mahudtouch

3

s.spark, le 24 jui 2007 à 18:08:57

C'est à cause de ça :

#menu div{
	padding:5px 10px 5px 15px;
	margin:0 0 15px 80px;
	text-align:left;
	-moz-border-radius:4px;
}


Tu as mis un margin de 80px à gauche. C'est normale que tu cherche partout, c'est un bodel monstre, l'html est pas indenter, le CSS utilisé à outrance pour corriger les défauts, alors que dès le départ ce sont des mauvais choix selon moi. Perso je referais tout.

Tu devrais jeter un oeil à ça :

http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS


C'est en forgeant que l'on devient forgeron

;-)

Répondre à s.spark

4

mahudtouch, le 25 jui 2007 à 06:41:37

Merci beaucoup pour cette reponse.
comme tu peux l'imaginer, j'ai juste modifie le CSS du blog donne par mabulle. je n'ai rien fait moi meme au depart.
je vais visiter le lien que tu m'as donne pour voir si je me lance dans la grande aventure du webmastering by myseylf.
merci encore.

Répondre à mahudtouch

5

s.spark, le 25 jui 2007 à 14:33:36
Répondre à s.spark

6

 mahudtouch, le 25 jui 2007 à 14:57:12

Merci!
bon, maintenant je n'ai plus d'excuses

Répondre à mahudtouch
Collection CommentÇaMarche.net