28220 sujets

CSS et mise en forme, CSS3

Bonjour (ou plutot bonsoir) à tous.
Je poste mon premier message sur ce forum, mais ca fait déjà quelques temps que je suis inscrit ici et que je lit de temps à autres un topic qui m'intéresse à l'aide du fille rss. Smiley cligne

Je vais donc profiter de se poste pour faire une petite présentation comme il est coutume de faire dans un premier message sur un forum.

Je me prénomme Xavier, j'ai 17 ans et j'habites en Belgique.
Il y a d'ici plus ou moins 1 et 1/2 je me suis lancé dans l'infographie avec photoshop. Ca été mon "débouché" dans l'informatique surtout sur le web, j'ai commencé à fréquenté plusieurs forum et curieux de nature j'ai diversifié mes "connaissance". J'ai commencé l'apprentissage du HTML 4.3 ignorant tout des standards, du w3c et autres à l'époque. Je me suis maintenant mit au XHTML et au CSS ainsi qu'au PHP.

Bon assez parlé de ma vie Smiley lol j'en vient au fait.


----------


Comme à chaque découpe de design, une fois qu'on croit avoir fini et qu'on vérifie son nouveau petit site dans Internet Explorer, on se rend compte qu'il n'en est rien. Smiley eek

La plupart du temps j'arrive à contourner les (petits) défauts mais, là je bloque.

il y a 3 problèmes dont 2 sont de la même nature :

- Le site n'est pas aligné au centre.
- En haut et en bas des "titres" des menus il y a des espaces.
- A gauche du "titre" du texte il y a aussi un espace.

Le site

<?xml version="1.0" encoding="iso-8859-1"?>

<!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="fr">

	<head>
		<title>Design by Tekila</title>
		
		<meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1" />
		<meta name="author" content="www.webeffect-fr.com" />
		
		<link rel="stylesheet" media="screen" type="text/css" href="style.css" title="style" />
	</head>
	
	<body>
	
	<div id="habillage">
		
		<div id="header">
			<p id="logo"><a href="index.html"><img src="images/logo.jpg" alt="Site, slogan" title="Retour à l'accueil" /></a></p>
			<p id="bouton"><a href="index.html"><img src="images/b_accueil.jpg" /></a> <a href="contact.html"><img src="images/b_contact.jpg" /></a></p>
		</div>
		
		
		<div id="menu">
			<h4></h4>
			<ul>
				<li><a href="#">Lien</a></li>
				<li><a href="#">Lien</a></li>
				<li><a href="#">Lien</a></li>
			</ul>
			
			<h4></h4>
			<ul>
				<li><a href="#">Lien</a></li>
				<li><a href="#">Lien</a></li>
				<li><a href="#">Lien</a></li>
			</ul>
			
			<h4></h4>
			<ul>
				<li><a href="#">Lien</a></li>
				<li><a href="#">Lien</a></li>
				<li><a href="#">Lien</a></li>
			</ul>
		</div>
		
		
		<div id="texte">
			<h4 id="titre"></h4>
			<p id="first">
				Vivamus non tellus ut ligula luctus posuere. Nam neque nibh, lobortis vel, consequat at, sollicitudin commodo, purus elit nulla feugiat enim, 
				vel scelerisque quam elit sed purus. Suspendisse potenti. Ut vel eros. Nunc viverra venenatis sem. Mauris congue libero non dolor fermentum scelerisque.
			</p>
			
			<p>
				Pellentesque porta velit vel purus. Proin fringilla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. 
				Praesent aliquam, eros sodales rutrum ornare, ipsum mi condimentum nibh, in vestibulum sem urna vehicula odio.a velit. In facilisis arcu sed enim. 
				In molestie eleifend libero.
			</p>
			
			<p id="last">
				Pellentesque porta velit vel purus. Proin fringilla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. 
				Praesent aliquam, eros sodales rutrum ornare, ipsum mi condimentum nibh, in vestibulum sem urna vehicula odio.a velit. In facilisis arcu sed enim. 
				In molestie eleifend libero.
			</p>
		</div>
		
		
		<div id="footer">
		</div>
		
	</div>
	
	</body>
  
</html>


body {
background-color: #ADADAD;
}

a img {
border: none;
}

#habillage {
background-color: #F2F2F2;
border: 1px solid black;
width: 95%;
margin-left: auto;
margin-right: auto;
padding: 20px;
}

#header {
background: url('images/header.jpg') right top no-repeat;
}

#header #logo {
margin: 0px;
padding: 5px;
}

#header #bouton {
margin: 0px;
margin-top: 10px;
margin-bottom: 10px;
padding: 0px;
text-align: right;
}

#menu {
width: 166px;
float: left;
}

#menu h4 {
width: 166px;
height: 12px;
background: url('images/menu_titre.jpg') left no-repeat #DFE2EE;
margin: 0px;
padding: 0px;
}

#menu ul {
width: 166px;
background: url('images/menu.jpg') left repeat-y;
border-bottom: 1px solid black;
margin: 0px;
margin-bottom: 10px;
padding: 0px;
list-style-type: none;
}

#menu li {
margin: 0px;
padding: 5px;
}

#texte {
background-color: #EEEDDF;
border-top: none;
margin-left: 200px;
}

#texte #titre {
height: 11px;
padding: 0px;
margin: 0px;
background: url('images/texte_titre.jpg') left top no-repeat #F2F2F2;
}

#texte p {
padding: 5px;
padding-bottom: 10px;
padding-top: 10px;
margin: 0px;
border-left: 1px solid black;
border-right: 1px solid black;
}

#texte #first {
border-top: 1px solid black;
padding-top: 5px;
margin-top: 0px;
}

#texte #last {
padding-bottom: 5px;
margin-bottom: 0px;
border-bottom: 1px solid black;
}

#footer {
clear: both;
height: 25px;
background: url('images/footer.jpg') top center no-repeat;
}


Merci d'avance pour votre aide Smiley cligne

P.S. la charte graphique du site est tout bonnement excellente
Modifié par Angel (18 Mar 2005 - 22:17)
Bonjour,

En passant... essaye width: 100% à body dans le css
Pour le reste je regarde un peu plus...
Erreur...


#habillage {
background-color: #F2F2F2;
border: 1px solid black;
margin-left: auto;
margin-right: auto;
padding: 20px;
}


Le centrage est corrigé...
pour l'esthétique, un ajout:

#footer {
	clear: both;
}
	-->


pour l'espace au dessus et au dessous des titres du menu, peut-etre:

#menu ul {
width: 166px;
background: url('images/menu.jpg') left repeat-y;
border-bottom: 1px solid black;
margin: 0px;
padding-bottom: 10px;
padding: 0px;
list-style-type: none;
}
DSC a écrit :
Erreur...


#habillage {
background-color: #F2F2F2;
border: 1px solid black;
margin-left: auto;
margin-right: auto;
padding: 20px;
}


Le centrage est corrigé...


oui mais ma page ne fait plus 95% Smiley sweatdrop

DSC a écrit :
pour l'esthétique, un ajout:

#footer {
	clear: both;
}
	-->



la fin du code est pas passé dans le premier post j'ai édité. En fait "clear: both" y était déjà.

DSC a écrit :

pour l'espace au dessus et au dessous des titres du menu, peut-etre:

#menu ul {
width: 166px;
background: url('images/menu.jpg') left repeat-y;
border-bottom: 1px solid black;
margin: 0px;
padding-bottom: 10px;
padding: 0px;
list-style-type: none;
}


Mais si je remplace margin par padding j'ai plus d'espaces entre les menus Smiley rolleyes

Merci quand même pour tes réponses Smiley cligne
Administrateur
Angel a écrit :
Bonjour (ou plutot bonsoir) à tous.
Je poste mon premier message sur ce forum, mais ca fait déjà quelques temps que je suis inscrit ici et que je lit de temps à autres un topic qui m'intéresse à l'aide du fille rss. Smiley cligne

Je vais donc profiter de se poste pour faire une petite présentation comme il est coutume de faire dans un premier message sur un forum.

Je me prénomme Xavier, j'ai 17 ans et j'habites en Belgique.
Il y a d'ici plus ou moins 1 et 1/2 je me suis lancé dans l'infographie avec photoshop. Ca été mon "débouché" dans l'informatique surtout sur le web, j'ai commencé à fréquenté plusieurs forum et curieux de nature j'ai diversifié mes "connaissance". J'ai commencé l'apprentissage du HTML 4.3 ignorant tout des standards, du w3c et autres à l'époque. Je me suis maintenant mit au XHTML et au CSS ainsi qu'au PHP.

C'est pour le Topic de Présentation dans le Bar du Forum ça!
Bienvenu sur ce Forum Smiley coucou
Bonjour,

a écrit :
oui mais ma page ne fait plus 95% Smiley sweatdrop


#habillage {
background-color: #F2F2F2;
border: 1px solid black;
margin-left: 2,5%;
padding: 20px;
}

a écrit :
Mais si je remplace margin par padding j'ai plus d'espaces entre les menus Smiley rolleyes

Le <height> est plus petit que le font des <h4> et n'est pas interprete de la meme manière sous FF et IE.
Je dois dire que je ne vois pas tres bien les espaces dont tu parles... J'ai l'impression que les seul espace viennent de <ul> avec margin-bottom: 10px;...
Bonne continuation
Smiley cligne
DSC a écrit :
Bonjour,

Je dois dire que je ne vois pas tres bien les espaces dont tu parles... J'ai l'impression que les seul espace viennent de <ul> avec margin-bottom: 10px;...
Bonne continuation
Smiley cligne


http://h.carron.free.fr/webeffect/miniature/2066364712.bug_ie.jpg

une image vaut mieux qu'un long discoure Smiley lol

Comme tu peux le voir sur l'image, après avoir fait la modification :

#habillage {
background-color: #F2F2F2;
border: 1px solid black;
margin-left: 2,5%;
padding: 20px;
}


Le texte ne s'affiche plus et si je le sélectionne (ctrl +a) il réapparaît... Internet Exploreur fonctionnerai mal chez moi?


Felipe a écrit :

C'est pour le Topic de Présentation dans le Bar du Forum ça!
Bienvenu sur ce Forum Smiley coucou


Je l'ai fait mais un peu en retard Smiley ravi