28219 sujets

CSS et mise en forme, CSS3

Bonsoir à vous,

Je suis originaire du Québec, plus précisément à Montréal ! Je suis étudiant en technique d'intégration multimédia et je fais des sites Web depuis quelques temps déjà, mais je fais plus les designs que la programmation... enfin c'était ma brève description Smiley cligne

J'ai commencé à coder une interface et sous firefox évidemment tout va bien tandis que sous IE ça choke pas mal... :S Le problème principal est l'alignement sous IE...

Si quelqu'un pourrait regarder mon code j'apprécierais.

Merci et bonne journée.

CODE CSS
a écrit :
body {
margin: 0px;
padding: 0px;
background-color: gray;
color: white;
font-family: verdana, sans-serif;
font-size: 0.7em;
}

div#principal {
margin-left: 250px;
margin-top: 30px;
position: relative;
width: 750px;
height: 520px;
background-color: black;
}

div#pageHeader {
background-image: url(images/header.png);
background-repeat: no-repeat;
width: 750px;
height: 200px;
background-color: #FFFFFF;
}

div#menu {
float: left;
clear: left;
width: 250px;
padding: 0px;
margin-left: 5px;
}

div#menu h2 {
position: relative;
padding: 0px;
margin-top: 5px;
color: white;
text-align: center;
}

div#menu ul {
margin: 0px;
padding: 0px;
}

div#menu ul li {
line-height: 20px;
margin-bottom: 5px;
list-style: none;
padding: 0px;
background-color: #FFFFFF;
font-family: verdana, sans-serif;
font-size: 1.2em;
}

div#menu ul li a {
color: black;
}

div#menu ul li a:hover {
text-decoration: none;
color: red;
}

div#contactMe {
clear: left;
float: left;
width: 250px;
margin-top: 5px;
margin-left: 5px;
text-align: center;
background-color: #404040;
}

div#contactMe h2 {
font-family: verdana, sans-serif;
position: relative;
padding: 0px;
color: white;
text-align: center;
}

div#contactMe p {
font-family: verdana, sans-serif;
text-align: left;
margin-left: 5px;
}

div#bienvenue {
clear: right;
margin-left: 260px;
width: 485px;
padding-bottom: 47px;
background-color: #6E4444;
}

div#bienvenue h2 {
font-family: verdana, sans-serif;
text-align: center;
margin-top: 5px;
}

div#bienvenue p {
font-family: verdana, sans-serif;
font-size: 1.0em;
margin-left: 15px;
}

div#footer {
background-color: white;
}

div#footer h2 {
color: black;
text-align: center;
font-family: verdana, sans-serif;
font-size: 1.0em;
}


CODE HTML
a écrit :
<body>
<div id="principal">
<div id="pageHeader">
<h2></h2>
</div>
<div id="menu">
<!!><h2>Menu</h2>
<ul>
<li><a href="index.html" title="Accueil">Accueil</a></li>
<li><a href="motivations.html" title="Motivations du groupe">Biographie</a></li>
<li><a href="albums.html" title="Albums du groupe">Albums</a></li>
<li><a href="membres.html" title="Membres du groupe">Membres</a></li>
<li><a href="liens.html" title="Liens">Liens</a></li>
<li><a href="contact.html" title="Me contacter">Contact</a></li>
</ul
</div>

</body>
<div id="contactMe">
<h2>Me contacter</h2>
<p>Courriel : hgfjgj@gmail.com</p>
<p>Téléphone : 514-123-4567</p>
</div>
<div id="bienvenue">
<h2>Bienvenue sur mon site d'Anti-Flag</h2>
<p>texte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte ici
texte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte ici
texte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte ici
texte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte
texte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte ici
</p>

<p>texte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte ici
texte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte ici
texte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte ici
texte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte
texte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte ici
</p>
</div>

<div id="footer">
<h2></h2>
</div>


</div>
Essaye ça

CSS :


body {
margin: 0px;
padding: 0px;
background-color: gray;
color: white;
font-family: verdana, sans-serif;
font-size: 0.7em;
}

div#principal {
margin-left: 250px;
margin-top: 30px;
position: relative;
width: 750px;
height: 520px;
background-color: black;
}

div#pageHeader {
background-image: url(images/header.png);
background-repeat: no-repeat;
width: 750px;
height: 200px;
background-color: #FFFFFF;
}

div#menu {
float: left;
clear: left;
width: 250px;
padding: 0px;
margin-left: 5px;
}

div#menu h2 {
	position: relative;
	padding: 0px;
	margin-top: 5px;
	color: white;
	text-align: center;
}

div#menu ul {
margin: 0px;
padding: 0px;
}

div#menu ul li {
line-height: 20px;
margin-bottom: 5px;
list-style: none;
padding: 0px;
background-color: #FFFFFF;
font-family: verdana, sans-serif;
font-size: 1.2em;
}

div#menu ul li a {
color: black;
}

div#menu ul li a:hover {
text-decoration: none;
color: red;
}

div#contactMe {
clear: left;
float: left;
width: 250px;
margin-top: 5px;
margin-left: 5px;
text-align: center;
background-color: #404040;
}

div#contactMe h2 {
	font-family: verdana, sans-serif;
	position: relative;
	padding: 0px;
	color: white;
	text-align: center;
}

div#contactMe p {
font-family: verdana, sans-serif;
text-align: left;
margin-left: 5px;
}

div#bienvenue {
clear: right;
margin-left: 260px;
width: 485px;
padding-bottom: 47px;
background-color: #6E4444;
}

div#bienvenue h2 {
font-family: verdana, sans-serif;
text-align: center;
margin-top: 5px;
}

div#bienvenue p {
font-family: verdana, sans-serif;
font-size: 1.0em;
margin-left: 15px;
}

div#footer {
background-color: white;
}

div#footer h2 {
color: black;
text-align: center;
font-family: verdana, sans-serif;
font-size: 1.0em;
}
h2 {
	font-size: 150%;
}


Html :


<link href="style.css" rel="stylesheet" type="text/css">
<body>
<div id="principal">
<div id="menu">
<!!>
<h2>Menu</h2>
<ul>
<li><a href="index.html" title="Accueil">Accueil</a></li>
<li><a href="motivations.html" title="Motivations du groupe">Biographie</a></li>
<li><a href="albums.html" title="Albums du groupe">Albums</a></li>
<li><a href="membres.html" title="Membres du groupe">Membres</a></li>
<li><a href="liens.html" title="Liens">Liens</a></li>
<li><a href="contact.html" title="Me contacter">Contact</a></li>
</ul
>
</div>
</body>
<div id="contactMe">
<h2>Me contacter</h2>
<p>Courriel : hgfjgj@gmail.com</p>
<p>Téléphone : 514-123-4567</p>
</div>
<div id="bienvenue">
<h2>Bienvenue sur mon site d'Anti-Flag</h2>
<p>texte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte ici
texte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte ici
texte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte ici
texte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte
texte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte ici</p>
<p>texte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte ici
texte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte ici
texte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte ici
texte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte
texte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte icitexte ici</p>
</div>
Merci d'avoir pris le temps de regarder mon code...

En faite je viens de me rendre compte que ma balise <ul> n'était bizarrement pas fermée et que la fermeture de mon body n'était plus à la fin... je sais pas comment j'ai fait ça, mais bon :S

Maintenant ça fonctionne Smiley cligne

Merci encore et bonne journée à tous !