Aller au contenu

Structure en css sans position:absolute

Anaon

Par Anaon
dans (X)HTML et CSS

 Partager

Sujets conseillés

Anaon

Anaon

Posté
Posté

Bonjour,

Pas facile de contenter et Mozilla et IE... C'est même un vrai casse-tête... Je voulais faire un truc qui me paraissait simple, à savoir, faire une page avec un menu fixe à gauche, en haut, et peut-être un autre en bas, à droite, toujours positionné en bas, fixe aussi.

Mais alors IE ne reconnaît pas le position:fixed :fou:

Bon alors j'ai finalement trouvé comment contourner cette lacune mais le fait est que maintenant, je ne peux plus utiliser les position:absolute...

C'est tout bête mais du coup, je n'arrive pas à mettre en place une entête de 140px de hauteur disons, avec en dessous le contenu, qui défile suivant la quantité de texte. Vous voyez le genre?

Est-ce possible sans les positions absolues?

Merci beaucoup :)

Lien vers le commentaire
Partager sur d’autres sites
Anaon

Anaon

Posté
  • Auteur
Posté

Malheureusement, je n'ai rien en ligne pour l'instant, sinon j'aurais mis l'adresse.

Le code sur lequelle je travaille en ce moment est le suivant:

<!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>
<title>Magmor V7</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.php" /> 
<style type="text/css">
body, html {
height: 100%;
margin: 0;
padding: 0;
}
html {
overflow: visible;
}
body {
overflow: auto;
}
#menu {
position:absolute;
top :150px;
left: 50%;
margin-left: 330px;
text-align:left;
}
ul[id=menu] {
position: fixed !important;
}
html > body {
overflow: visible !important;
}
#menu li a:link, #menu a:visited {
	background-position: 0% 50%;
	padding-left: 15px;
}
</style>
</head>

<body>
<div id="conteneur">

<h1>nanoum.net</h1>

<ul id="menu">
<li>Pouet pouet</li>
<li>Pouet pouet</li>
<li>Pouet pouet</li>
<li>Pouet pouet</li>
<li>Pouet pouet</li>
<li>Pouet pouet</li>
<li>Pouet pouet</li>
<li>Pouet pouet</li>

<li>Pouet pouet</li>
<li>Pouet pouet</li>
<li>Pouet pouet</li>
<li>Pouet pouet</li>
<li>Pouet pouet</li>
<li>Pouet pouet</li>
<li>Pouet pouet</li>
</ul>
<div id="header"><h3>page de test<span>jeudi 28 octobre 2004</span></div>

<div id="contenu"><h3>page de test<span>jeudi 28 octobre 2004</span></h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse elementum metus eu urna. Nullam molestie ornare magna. Nam auctor sodales tortor. Vivamus porta neque a wisi. Pellentesque risus justo, suscipit eget, ornare ac, blandit sed, neque. Vestibulum nec odio. Aliquam augue wisi, facilisis eget, congue ac, interdum vitae, risus. Nullam dapibus blandit sem. Curabitur porta. Ut nonummy. Vivamus wisi mi, pharetra id, vehicula ac, laoreet at, wisi. Nulla et diam sit amet neque porta consequat. Etiam sagittis odio ut mi. Fusce molestie, eros sed ultrices auctor, ante sem tincidunt justo, eget porttitor nulla justo quis odio. Nullam rhoncus metus non nulla. Quisque in ligula. Vestibulum sapien. Suspendisse potenti. Duis purus orci, vehicula in, luctus eu, tincidunt ut, enim. Nam diam.
</p>
<p>
Pellentesque eget velit non ante pulvinar mollis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut luctus eros. Nam auctor malesuada dolor. Etiam pretium magna tempor urna. Pellentesque at mi nec velit dictum laoreet. Etiam eget odio non nisl sodales gravida. Duis metus lectus, dapibus et, pulvinar sit amet, consectetuer eu, metus. Nunc vestibulum ultrices erat. Nullam non augue.
<br />
Vestibulum malesuada vulputate tellus. Pellentesque felis dui, ullamcorper a, aliquet ac, mattis molestie, purus. Aliquam sed tellus sit amet odio imperdiet venenatis. Ut gravida. Etiam ultrices ornare quam.</p>
</div>

<div id="pied"></div>
</div>

</body>

</html>

Et la css:

body {
color: #cccccc;
background: #000000 url(images/body.jpg) fixed;
text-align:center;
font-family:"Trebuchet MS",Verdana,Geneva,Arial,Helvetica,sans-serif;
font-size:0.8em;
}
#conteneur {
margin-left:50px;
width:750px;
background-color: Aqua;
}
#pied {
background-image:url(img/pied.png);
height: 33px;
}
ul, li, form, body, h2, h3, h4 {
margin:0;
padding:0;
}
img {
border: 2px;
border-color: Green;
}

ul {
list-style-type:none;
}
/*..............................................................*/
#header {
background-color:orange;
height:140px;
}
#menu {
background-color:#920000;
text-align:right;
margin-left:750px;
width:120px;
}
#menu a:link, #menu a:visited {
height: 20px;
text-decoration: none;
color: #565656;
background-image:url(img/puce_off.png);
background-position: 100% 60%;
background-repeat: no-repeat;
padding-right: 15px;
line-height:inherit;
display:block;
}
#menu a:active, #menu a:hover {
background-image:url(img/puce_on.png);
}

/*................................................................ TITRES*/
h1 {
display:none;
}
h2 {
height: 36px;
background-repeat: no-repeat;
background-position: 0 0;
text-indent: -2000px;
}
/*
____________________________________ article
*/
#contenu {
top:140px;
margin: 0px;
width: 740px;
text-align: justify;
height:1000px;
background-color: Gray;
}

h3 {
background: url(img/pointille.png) repeat-x 0px 17px;
/*background:#cccccc;*/
padding: 0 0 0 5px;
font-size:1.2em;
margin: 20px 5px 0 5px;
height:35px;
line-height:1.1em;
}

#contenu h3 a:link, #contenu h3 a:visited {
text-decoration:none;
color: #000000;
}
#contenu h3 a:hover, #contenu h3 a:active {
text-decoration:none;
color: #666666;
}
h3 span {
font-size:0.6em;
font-weight: normal;
color: #949494;
padding-right:4px;
display:block;
text-align:right;
}
#contenu h4 {
font-weight: bold;
text-decoration:underline;
margin: 0px 10px;
}
#contenu p {
margin: 10px;
}
#contenu a:link, #contenu a:visited {
color: #cc0066;
text-decoration: none;
}
#contenu a:hover, #contenu a:active {
color: #cc0066;
text-decoration: underline;
}
#contenu em {
font-style: normal;
color: #A64253;
}

form p {
margin:0;
padding:0;
}
#contenu form {
width: 400px;
margin-left:30px;
text-align:center;
}
#contenu textarea {
width: 350px;
height:100px;
margin:2px;
}
#contenu fieldset input {
float: right;
width:200px;
margin:1px;
}
input, textarea {
border:1px solid #aaaaaa;
}
#contenu fieldset {
margin:0 22px 5px 22px;
padding:0;
border: 1px solid #ffffff;
text-align:left;
}
#contenu fieldset label {
line-height:24px;
}
/*
____________________________________ liens
*/
#liens  {
margin:10px;
}
#liens ul {
margin-left:20px;
}
#liens p {
margin:0 0 5px 10px;
padding:0;
}

Mais c'est tellement anarchique pour l'instant que ça ne doit pas vous dire grand chose...

Lien vers le commentaire
Partager sur d’autres sites
jeanpierre949

jeanpierre949

Posté
Posté (modifié)

peut-etre une soluce 

#header {
background-color:orange;
height:140px;
position:fixed ! important;
position:absolute;
top:0;
margin-left:-5px;
}
#contenu {
top:140px;
margin: 0px auto;
padding-top:180px;
width: 740px;
text-align: justify;
height:1000px;
background-color: Gray;
}

Modifié par jeanpierre949
Lien vers le commentaire
Partager sur d’autres sites
Anaon

Anaon

Posté
  • Auteur
Posté

Bonjour,

Merci pour ton aide :)

le problème, c'est que le header se trouve fixé lui aussi....

C'est même bête tout ça... Je ne sais plus comment on fait sans position absolue... :blink:

Lien vers le commentaire
Partager sur d’autres sites
Anaon

Anaon

Posté
  • Auteur
Posté

Je viens de mettre en ligne la page et sa feuille de style à cette adresse

Pour ce qui est du menu fixe à droite, ça fonctionne très bien sous Mozilla mais impossible de retrouver l'ascenseur dans IE :boude:

Sinon, à part ça, je voudrais donc rajouter une entête, tout en haut logiquement...

A noter qu'il y a des éléments css sur la page html elle-même...

Lien vers le commentaire
Partager sur d’autres sites
Anaon

Anaon

Posté
  • Auteur
Posté
l'en tete tu veux qu'elle soit fixe ou qu'elle defile ?

<{POST_SNAPBACK}>

Et bien je voudrais qu'elle défile aussi. Je crois que j'ai trouvé dans l'ensemble, ça donnerait quelque chose comme ça (les couleurs sont volontairement moches pour m'y retrouver :P )

Lien vers le commentaire
Partager sur d’autres sites
Anaon

Anaon

Posté
  • Auteur
Posté

En fait maintenant, j'aimerais bien que la div des sous-menus ("A La Une" et "Archives") chevauffe la div du contenu (en vert foncé).

D'ailleurs, cette div de contenu, elle est en "float:left" mais du coup, je ne sais pas bien comment elle se comporte horizontalement, sur mon petit écran, elle est à peu près centrée mais sur un écran à haute résolution :whistling:

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...