28173 sujets

CSS et mise en forme, CSS3

Une marge sous mon footer et des marges en trop dans mon menu

Bonjour,

Je procède à une mise à jour de mon site et je me suis décidé à lui offrir un nouveau design. Après avoir lu divers tuto sur ce site et des autres je suis parvenu à obtenir ceci: http://users.skynet.be/bk377295/test.html mais comme vous pouvez le constater, divers problèmes sont encore à résoudre.

- Comment faire pour que mon menu s'allonge lorsque je désire ajouter des rubriques à celui-ci ?

- Pourquoi dans mes sous-rubriques, la première cellule (exemple "Musées" soit bien entourée par les marges alors que la cellule en dessous (Expositions) possède une marge au dessus ?

- Comment faire pour pouvoir mettre une marge sous mon footer comme je suis parvenu à mettre en haut ? (Ici cette marge apparait car mon menu pousse la page vers le bas)

Merci pour vos aides.
Modifié par fgaascht (12 May 2006 - 18:41)
Bonjour,

après une petite analyse rapide de ton code, je pense que tu mélange certaines propriété de certains de tes div. par exemple le fond de ton menu est en fait le fond de ton conteneur. Le plus intéressant dans ton cas serait que ton menu ai son fond propre.

Deplus, tu peux positionner plus facilement ton menu a l'aide de float:left;
ce qui te permet après d'utiliser clear:both; pour ton pied de page, ce qui l'amene naturellement en fin de page.

tu peux essayer cette feuille de styles avec les petites modifs pour voir :

body
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin-top: 30px;
background: #0066CC;
}

#header
{
height: 50px;
background-color: #36526D;
border-bottom: 1px solid #000000;
}

ul#header
{
height: 25px;
margin: 0;
padding: 0;
list-style-type: none;
}
	
ul#header li
{
float: left;
text-align: center;
}
		
ul#header li a
{
width: 126px;
line-height: 25px;
font-size: 1.2em;
font-weight: bold ;
letter-spacing: 2px ;
color: #fff;
display: block;
text-decoration: none;
}
		
#bann
{
height: 150px;
background-color: #FFFFFF;
}

#liner
{
height: 5px;
background-color: #36526D;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}

div#conteneur
{
position: absolute;
width: 756px;
left: 50%;
margin-left: -380px;
background-color:#FFF;
border: 1px solid #000000;
}

#texte
{
margin-left: 150px;
text-align: justify;
line-height: 2;
padding-left: 3px;
padding-right: 3px;
}

#menu
{
border-right: 1px solid #000000;
float:left;
left:0;
width: 150px;
background-color:#6D7F91;
}

.sous_menu
{
margin: 5px;
padding: 0px;
border : solid 1px #a3c0d5;
border-bottom: none;
}

.sous_menu li
{
text-align: center;
list-style-type:none;
margin: 0px;
padding: 0px;
border-bottom: 1px solid #a3c0d5;
}

.menu_element
{
list-style-type: none;
margin: 0px;
padding:0px;
}

.menu_element h4
{
display: block;
text-align: center;
margin: 5px;
padding: 5px;
font-size: 1.2em;
font-weight: bold;
color: #FFFFFF;
background-color: #36526D;
border: solid 2px #004B91;
}

.menu_element li
{
margin-bottom: 5px;
}

.menu_element a
{
display: block;
margin: 0px;
color:#CC9200;
background: #204160;
font-weight: bold;
text-decoration: none;
}

.menu_element a:hover
{
text-decoration: none;
color: #CCB399;
background-color: #99744C;
}

.menu_element a:visited
{
text-decoration: none;
color: #CCB399;
}

#footer
{
clear:both;
height: 48px;
background-color: #36526D;
border-top: 1px solid #000000;
text-align: center;
color: #FFFFFF;
padding-top: 3px;
}

p {margin: 0 0 10px 0;}


j'espere que ca pourra te filer un coup de main Smiley cligne
Modifié par Jib (12 May 2006 - 11:06)
Merci bien Jib, c'est tout à fait ce que je désirais.
J'ai donc modifié le titre de mon sujet car maintenant je tente de résoudre mes problèmes de marges:

==> Mettre une marge sous mon footer.

==> Retirer la marge qui apparait au dessus de certaines cellules de mon menu.
j'ai bien une idée mais je ne sais si c'est la meilleur ! Smiley langue Tu fais un autre conteneur avec la couleur de fond du menu dans le quel tu places ton div menu puis ton div texte ; ton conteneur2 avec un height:100%;qui sera donc poussé par ton texte et qui par sa couleur donnera l'impression de l'allongement de ton menu ! Mais je débute et encore une fois je ne sais pas si c'est la meilleur solution mais ca marche.
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>
<title>ma page de mise en page</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

body
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
margin-top: 30px;
background: #0066CC;
}

#header
{
height: 50px;
background-color: #36526D;
border-bottom: 1px solid #000000;
}

ul#header
{
height: 25px;
margin: 0;
padding: 0;
list-style-type: none;
}

ul#header li
{
float: left;
text-align: center;
}

ul#header li a
{
width: 126px;
line-height: 25px;
font-size: 0.9em;
font-weight: bold ;
letter-spacing: 2px ;
color: #fff;
display: block;
text-decoration: none;
}

#bann
{
height: 150px;
background-color: #FFFFFF;
}

#liner
{
height: 5px;
background-color: #36526D;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}

div#conteneur
{
position: absolute;
width: 756px;
left: 50%;
margin-left: -380px;
background-color: #FFF;
border: 1px solid #000000;
}
#conteneur2{
position: absolute;
height:100%;
width: 100%;
background-color:#6D7F91;
border: 0px solid #000000;
}
#texte
{
margin-left: 150px;
text-align: justify;
font-size: 0.8em;
line-height: 2;
padding: 5px 8px 5px 8px;
background:white;
}

#menu
{
border-right: 1px solid #000000;
float: left;
left: 0;
width: 150px;
background-color:#6D7F91;
padding: 7px 0px 10px 0px;
}

.sous_menu
{
margin: 0px 5px;
padding: 0px;
border : solid 1px #a3c0d5;
border-bottom: none;
}

.sous_menu li
{
text-align: center;
list-style-type: none;
border-bottom: 1px solid #a3c0d5;
}

.menu_element
{
list-style-type: none;
padding-bottom: 7px;
}

.menu_element h4
{
display: block;
text-align: center;
margin: 10px 5px 3px 5px;
padding: 3px;
font-size: 1em;
font-weight: bold;
color: #FFFFFF;
background-color: #36526D;
border: solid 2px #004B91;
}

.menu_element li
{
margin-bottom: 0px;
line-height: 20px
}

.menu_element a
{
font-size: 0.8em;
display: block;
margin: 0px;
height: 20px;
vertical-align: middle;
color: #CC9200;
background: #204160;
font-weight: bold;
text-decoration: none;
}

.menu_element a:hover
{
text-decoration: none;
color: #CCB399;
background-color: #99744C;
}

.menu_element a:visited
{
text-decoration: none;
color: #CCB399;
}

#footer
{
clear: both;
height: 48px;
background-color: #36526D;
border-top: 1px solid #000000;
text-align: center;
color: #FFFFFF;
padding-top: 3px;
}

p
{
margin: 0 0 10px 0;
}

</style>
</head>
<body>

<div id="conteneur">

	<ul id="header">
		<li><a href="accueil.html">Home</a></li>
		<li><a href="favoris.html">Agenda</a></li>
		<li><a href="agenda.html">Forum</a></li>
		<li><a href="forum.html">Livre d'or</a></li>
		<li><a href="livres.html">Merci à...</a></li>
		<li><a href="index.html">Langues</a></li>
	</ul>
	
	<div id="bann"></div>
	
	<div id="liner"></div>
<div id="conteneur2">
	<div id="menu">
	<div class="menu_element">
		<h4>On-line</h4>
			<ul class="sous_menu">
			<li><a href="webcam.html">Webcam</a></li>
			<li><a href="meteo.html">Météo</a></li>
			<li><a href="paysages.html">Paysages à 360°</a></li>
			<li><a href="radios.html">Webradios</a></li>
			</ul>
	</div>
	
	<div class="menu_element">
		<h4>Sortir à Arlon</h4>
			<ul class="sous_menu">
			<li><a href="webcam.html">Cafés</a></li>
			<li><a href="meteo.html">Restaurants</a></li>
			<li><a href="paysages.html">Cinéma</a></li>
			<li><a href="radios.html">Concerts</a></li>
			<li><a href="radios.html">Spectacles</a></li>
			<li><a href="radios.html">Salons & Foires</a></li>
			</ul>
	</div>

	<div class="menu_element">
		<h4>Culture</h4>
			<ul class="sous_menu">
			<li><a href="musees.html">Musées</a></li>
			<li><a href="expositions.html">Expositions</a></li>
			<li><a href="liens.html">Liens</a></li>
			</ul>
	</div>
	
	<div class="menu_element">
		<h4>Tourisme</h4>
			<ul class="sous_menu">
			<li><a href="musees.html">Venir à Arlon</a></li>
			<li><a href="expositions.html">Office du tourisme</a></li>
			<li><a href="expositions.html">Histoire</a></li>
			<li><a href="expositions.html">Folklore</a></li>
			<li><a href="expositions.html">Gastronomie</a></li>
			<li><a href="expositions.html">Logements</a></li>
			<li><a href="liens.html">Monuments</a></li>
			</ul>
	</div>

</div>
	  
	<div id="texte">Je me damande ce que je vais mettre dans
mon site pour pouvoir créer du contenu et pouvoir intéresser les gens à
venir visiter Arlon. Ceci est également un site web qui fera du bien
pour mettre sur mon CV et montrer de quoi je suis capable. Il me manque
notament quelques trucs à faire sur ce design. notament à mettre une
marge plus large à droite je trouve. Egalement trouver comment mettre
un espace sous mon footer comme j'ai fais en haut. Et dire que demain
je reprend deja le train pour Strasbourg enfin, on sera encore vite aux
examens et surtout en vacances. Il faudra aussi que je pense à rendre
le menu de gauche un peu plus attactif comme par exemple mettre un peu
plus de couleurs mais pas de trop. Je penses que de légères nuances de
gris devraient suffire. En tout cas je tiens à remerci les personnes
qui répondent aux questions sur webmaster-hub.com car ils sont vraiment
sympa d'aider les gens comme ça. Je remarque que les styles sur mon
menu ne fonctionnent pas (par exemple la couleurs et la taille des
liens). Je me demande ensuite pourquoi il pleut. Alors que la semaine dernière je me plaignait du bon temps. A présent je suis occupé à réaliser mon menu qui se trouve sur la droite mais là je vois que celui-ci ne s'agrandit pas ou ne s'allongent pas avec celui-ci. Il faut donc que le menu s'allongent en fonction que je rajoute des rubriques dans le menu de mon site. Je ne sais pas quoi faire ce soir à la maison, j'ai déja étudié mon cours de biologie animale et mon chat dort sur mon lit. Et dire que mes parents sont parti en vacances à la mer sans moi, et qu'ils m'ont abandonné tout seul à la maison avec le frigo vide. Les deux chats (Monsieur Vivaldi et Princesse) sont déjo occupé à dormir sur mon lit. Au moins pour l'instant ils ne sont pas occupés à se disputer ou a jouer. Le pire c'est quand ils courent alors que je suis occupé à dormir. C'est presque pire que lorsque j'entend mes phasmes manger des feuilles qui sont sèches. Dire que demain on annonce de la pluie et même des orages heureusement que je suis parvenu à m'occuper de mes plantes aujourd'hui.<br>
</div>

<div id="footer">
<p>© Gaascht François 2006</p>
</div>
</div>

</div>
</body>
</html>
Sujet clos
Aller à