28220 sujets

CSS et mise en forme, CSS3

Positionnement absolu

Bonjour,

J'utilise le positionnement absolu car il n'y a pas de décalage entre IE et FF contrairement au float. Mais un problème surgit, le div global ne veut pas s'étendre en hauteur.

Pouvez-vous m'aider ?

Styles.css
Index.html

Merci.
Salut à toi !

Évite les reposts comme tu le fais, ça ne sert généralement pas à grand chose, si ce n'est énerver les gens. Si tu veux que ton sujet remonte en haut de la file, donne un complément d'information. Si les gens n'y répondent pas, c'est car ils ne savent pas, ou ils n'ont pas le temps.
Reposter comme ca en si peu de temps ne les encouragera pas à te répondre!
De plus, c'est encore une période de vacances, et le forum n'est pas du tout à 100% de sa "productivité".

Pour ce qui est de ton soucis, pourquoi ne te bases-tu pas sur les excellents gabarits que nous a concocté Raphaël ?

J'en vois un très bien qui te semble taillé sur mesure, et si tu ne veux pas de son pied de page, enlève le !
bonjour

la feuille de style retouchée


/* Mise en page */
html, body {/*certains navigateurs calculent html, d'autres body*/
padding: 0;
margin: 0;
background: #294963;
font-family: Arial, Verdana, sans-serif;
font-size: 0.8em;/*attention aux valeurs em avec ie! 0.8 c'est très petit*/
color: #000;
text-align: center;/*pour ie5/6*/
}

/* Global */
#global {
width: 60%;
height: 100%;
margin-top: 20px;
margin-right: auto;
margin-left: auto;
text-align: left;/*pour rétablir l'alignement du texte*/
}
 
/* Header */
#header {
background: #3F6F96;/*pour ie5/6 la couleur est indispensable içi*/
height: 80px;
color: #FFF;
}

#header h1 {
font-size: 2.7em;
font-weight: normal;
padding: 0;
margin: 20px 0 0 30px;
}

#header p {
text-align: right;
padding: 5px;
margin: 0;
}
.conteneur {/*ajout d'un div pour menu et contenu*/
width: 100%;
height: auto;
}
/* Menu */
#menu {
float: left;
width: 20%;
margin: 50px 0 0;
background: #719DC2;
}

#menu ul {
list-style-type: none;
padding: 0;
margin: 0;
text-align: center;
}

#menu ul li a{
display: block;
background: #719DC2;
height: 25px;
}

#menu ul li a:hover{
background: #FFF;
}

/* Contenu */
#contenu {
float: right;
width: 80%;
background: #FFF;
}

#contenu h1, h2, p {
padding: 5px;
}
/*il manque les classes actu*/


le html


<!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" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
<title>Arcane</title>
</head>
<body>
<div id="global">
<!-- Header -->
<div id="header">
<h1>Arcane</h1>
<p>Site Web h&eacute;berg&eacute; par Neeweb.com</p>
</div>
<div class="conteneur"
<!-- Menu -->
<div id="menu">
<ul>
	<li><a href="index.php" title="Accueil">Accueil</a></li>
	<li><a href="index.php" title="Accueil">Accueil</a></li>
	<li><a href="index.php" title="Accueil">Accueil</a></li>
	<li><a href="index.php" title="Accueil">Accueil</a></li>
</ul>
</div>
<!-- Contenu -->
<div id="contenu">
<h1>Bienvenue sur mon site Web</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque lacinia ante id odio vehicula facilisis. Etiam eget pede. Morbi sollicitudin sagittis ante. Cras ut est at velit auctor vulputate. Etiam at ligula. Phasellus dui leo, tempor eu, gravida eget, interdum pulvinar, nibh. Aliquam eget nibh. Sed non augue. Maecenas laoreet. Fusce id ante vel lectus hendrerit nonummy. Suspendisse turpis lacus, tincidunt non, fringilla in, adipiscing vitae, arcu. Praesent quis justo at turpis eleifend interdum. Fusce eu nulla. Nunc consectetuer justo ultricies libero. Suspendisse sit amet neque. Aenean vestibulum dui eu enim. Nulla facilisi. Morbi cursus ornare nibh.</p>
<!-- Actualit&eacute;s -->
<h2>Actualit&eacute;s de mon site Web</h2>
<div class="titre_actu">Ouverture de mon site Web<span> - le 22/08/2005 &agrave; 15h30</span></div>
<div class="actu">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque lacinia ante id odio vehicula facilisis. Etiam eget pede. Morbi sollicitudin sagittis ante. Cras ut est at velit auctor vulputate. Etiam at ligula. Phasellus dui leo, tempor eu, gravida eget, interdum pulvinar, nibh. Aliquam eget nibh. Sed non augue. Maecenas laoreet. Fusce id ante vel lectus hendrerit nonummy. Suspendisse turpis lacus, tincidunt non, fringilla in, adipiscing vitae, arcu. Praesent quis justo at turpis eleifend interdum. Fusce eu nulla. Nunc consectetuer justo ultricies libero. Suspendisse sit amet neque. Aenean vestibulum dui eu enim. Nulla facilisi. Morbi cursus ornare nibh.</p>
</div>
<!-- Footer -->
<div id="footer">
<p>Copyright Gaspar 2005 - <a href="index.php" title="Administration">Administration</a> - <a href="contact.php" title="Nous contacter">Contact</a></p>
</div></div></div></div>
</body>
</html>


je pense que c'est ce que tu cherches à obtenir.avec netscape7, tu devras passer heigth à auto.100% n'est pas supporté.
Sujet clos
Aller à