Kit css + 2 menus

Question

le_castor

7 Feb 2006 à 17:48

bonjour,
voila ca fait 2 jours que je cherche pour réussir a placer le menu horizontal en bas du cadre "header".
j'ai revisité le code (notament par rapport au relation parent-enfants)
et il me semble avoir bien compris mais une autre partie du code m'empeche de l'aligner en bas.
si vous pouviez me guider ca serait super..
merci.

<!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>4 zones avec scroll</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

 padding-top: 200px;

<!--
/* CSS issu des tutoriels css.alsacreations.com */
body {
margin: 0;
padding: 0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
background-color: #fff; /*couleur de fond blanche*/
}

.conteneur { /*le conteneur global du site, qui sera centré */
width: 750px;
position: absolute;
left: 50%;
margin-left: -385px;
}

.header {
height: 100px;
background-color: #99CCCC;
}

#navcontainer1 ul
{
margin-top: 30px;
padding-left: 0;
margin-left: 0;
background-color: #036;
color: White;
float: left;
width: 100%;
font-family: arial, helvetica, sans-serif;
}

#navcontainer1 ul li { display: inline; }

#navcontainer1 ul li a
{
padding: 0.2em 1em;
background-color: #036;
color: White;
text-decoration: none;
float: left;
border-right: 1px solid #fff;
}

#navcontainer1 ul li a:hover
{
background-color: #369;
color: #fff;
}

.menu {
position: absolute;
left:0;
width: 166px;
height: 300px;
background-color:#CCCCFF;
}
.frame {
margin-left: 167px;
width: auto;
height: 300px;
background-color:#9999CC;
overflow: auto;
}
.footer {
height: 20px;
background-color: #99CC99;
}
p {
margin: 0 0 5px 0;
}
.menugauche {
list-style-type: none;
margin: 0;
padding:0;
}
.menugauche li {
margin-bottom: 5px;
}
.menugauche a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
.menugauche a:hover {
text-decoration: none;
}

#navcontainer { width: 166px; }

#navcontainer ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}

#navcontainer a
{
display: block;
padding: 3px;
width: 160px;
background-color: #036;
border-bottom: 1px solid #eee;
}

#navcontainer a:link, #navlist a:visited
{
color: #EEE;
text-decoration: none;
}

#navcontainer a:hover
{
background-color: #369;
color: #fff;
}
-->
</style>
</head>

<body>
<div class="conteneur">
<div class="header">contenu du header de taille fixe : 750px
<div id="navcontainer1">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
</div>
		<div class="menu">
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
		</div>
		<div class="frame">
		  <p>partie "frame" scrollable </p>
		  <p>partie "frame" scrollable </p>
		  <p>partie "frame" scrollable </p>
		  <p>partie "frame" scrollable </p>

		  <p>partie "frame" scrollable </p>
		  <p>partie "frame" scrollable </p>
		  <p>partie "frame" scrollable </p>
		  <p>partie "frame" scrollable </p>
		  <p>partie "frame" scrollable </p>
		  <p>partie "frame" scrollable </p>

		  <p>partie "frame" scrollable </p>
		  <p>partie "frame" scrollable </p>
		  <p>partie "frame" scrollable </p>
		  <p>partie "frame" scrollable </p>
		  <p>partie "frame" scrollable </p>
		  <p>partie "frame" scrollable </p>

		  <p>partie "frame" scrollable </p>
		  <p>partie "frame" scrollable </p>
		  <p>partie "frame" scrollable </p>
		  <p>partie "frame" scrollable </p>
		  <p>partie "frame" scrollable </p>
		  <p>partie "frame" scrollable </p>

		  <p>partie "frame" scrollable </p>
		  <p>partie "frame" scrollable </p>
		  <p>partie "frame" scrollable </p>
		  <p>partie "frame" scrollable </p>
		  <p>partie "frame" scrollable </p>
		  <p>partie "frame" scrollable </p>

		  <p>partie "frame" scrollable </p>
		  <p>partie "frame" scrollable </p>
		  <p>partie "frame" scrollable </p>
		  <p>partie "frame" scrollable </p>
		  <p>partie "frame" scrollable </p>
		  <p>partie "frame" scrollable </p>

		  <p>partie "frame" scrollable </p>
		</div>

	<div class="footer">contenu du footer de taille fixe :
    750px </div>
</div>
</body>
</html>

cette partie fait varier la hauteur de mon menu horizonal:

avec ca

#navcontainer1 ul
{
margin-top: 40px;

la partie principale disparait
tandis qu'avec(et d'autres valeurs

#navcontainer1 ul
{
margin-top: 35px;

le menu monte ou desend mais une fois une valeur dépassée la partie principal disparait Smiley biggol

Modifié par le_castor (07 Feb 2006 - 20:51)

Michel

7 Feb 2006 à 18:55

Bonjour

essaye un

height:auto;

dans la class .frame

@+

le_castor

7 Feb 2006 à 19:06

Michel a écrit :
Bonjour

essaye un
height:auto;
dans la class .frame

@+

merci de ta réponse mais inclure cette ligne me fait perdre l'effet de scroll qui est justement l'interet de ma présentation.
Smiley lol

[ Topic mis à jour ]
Modifié par le_castor (07 Feb 2006 - 19:12)

Michel

7 Feb 2006 à 19:18

Re

Ton bonheur est peut être là ==>

http://css.alsacreations.com/xmedia/exemples/frames/frames2.php

@+

le_castor

7 Feb 2006 à 19:47

Michel a écrit :
Re

Ton bonheur est peut être là ==>

http://css.alsacreations.com/xmedia/exemples/frames/frames2.php

@+

je veux vraiment pas faire mon dificile mais je voudrais comprendre pourquoi il se comporte comme ca, pas tellement avoir une solution ou encore moins contourner le problème

Michel

7 Feb 2006 à 20:41

Ah oK !!!

J'avais pas tout compris, essaye ==>

overflow: auto;

dans la class .frame

Et la lumière sera Smiley smile

@+

le_castor

7 Feb 2006 à 20:50

Michel a écrit :
Ah oK !!!

J'avais pas tout compris, essaye ==>
overflow: auto;
dans la class .frame

Et la lumière sera

@+

cette ligne était déja présente dans le code... lol Smiley biggol

le top serait que tu fasse toi meme les test en copiant collant le code dans un .html Smiley biggrin

Modifié par le_castor (07 Feb 2006 - 20:52)

Michel

7 Feb 2006 à 22:52

Re ==> Castor

Bon je vais être bon prince, mais ne me parle plus de overflow:auto; Smiley ohwell

Par contre peux tu m'expliquer à quoi sert [padding-top: 200px;]
Que j'ai laissé volontairement dans le code ci-dessous
==>en haut de ton style ???


<!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>4 zones avec scroll</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
 padding-top: 200px;
<!--
/* CSS issu des tutoriels css.alsacreations.com */
body {
  margin:0;
  padding:0;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size:0.8em;
  background-color:#fff; /*couleur de fond blanche*/

}

.conteneur { /*le conteneur global du site, qui sera centré */
  width:750px;
  position:absolute;
  left:50%;
  margin-left: -385px;
 }

.header {
  margin:0;
  padding:0;
  height:100px;
  background-color:#99CCCC;
}

#navcontainer1 ul{
  margin-top:30px;
  padding-left 0;
  margin-left:0;
  background-color:#036;
  color: White;
  float: left;
  width: 100%;
  font-family: arial, helvetica, sans-serif;
}

#navcontainer1 ul{
  margin:0 0 1px 0;
  padding:0;
  height:auto
}

#navcontainer1 li {
  display:inline;
}

#navcontainer1  li a{
  margin:0;
  padding:0.2em 1em;
  background-color:#036;
  color:White;
  text-decoration:none;
  float:left;
  border-right:1px solid #fff;
  display:inline;
}

#navcontainer1 li a:hover{
  background-color:#369;
  color:#fff;
}

.menu {
  left:0;
  width:166px;
  height:300px;
  margin:0 0 0 0;
  padding:0;
  background-color:#CCCCFF;
  float:left;
}

.frame {
  width:584px;
  height:300px;
  background-color:#9999CC;
  overflow:auto;
  float:left;
}
.frame p{
  margin:0 0 0 2em;
  padding:0;
}
.frame h1{
  font-size:1em;
  margin:1em 0 2em 2em;
  padding:0;
}

.footer {
  height:20px;
  background-color: #99CC99;
  clear:both;
}

p {
  margin:0 0 5px 0;
}

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

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

.menugauche a {
  margin:0 2px;
  color:#000000;
  text-decoration: underline;
}

.menugauche a:hover {
  text-decoration: none;
}
#navcontainer {
  width: 166px;
  margin:0;
}

#navcontainer ul{
  margin:0;
  padding:0;
  list-style-type:none;
  font-family: Arial, Helvetica, sans-serif;
}

#navcontainer a{
  display:block;
  padding:3px;
  width:160px;
  background-color:#036;
  border-bottom:1px solid #eee;
}

#navcontainer a:link, #navlist a:visited{
  color: #EEE;
  text-decoration: none;
  margin:0;
}

#navcontainer a:hover{
  background-color:#369;
  color: #fff;
}
-->
</style>

</head>

<body>

<div class="conteneur">
<div class="header">contenu du header de taille fixe : 750px</div>
<div id="navcontainer1">

<ul>
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

<div class="menu">
<div id="navcontainer">
<ul id="navlist">

<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
</div>
<div class="frame">
<h1>partie scroll</h1>
        <p>partie "frame" scrollable </p>
	<p>partie "frame" scrollable </p>
	<p>partie "frame" scrollable </p>
	<p>partie "frame" scrollable </p>
	<p>partie "frame" scrollable </p>
        <p>partie "frame" scrollable </p>
	<p>partie "frame" scrollable </p>
	<p>partie "frame" scrollable </p>
	<p>partie "frame" scrollable </p>
	<p>partie "frame" scrollable </p>
	<p>partie "frame" scrollable </p>
	<p>partie "frame" scrollable </p>
	<p>partie "frame" scrollable </p>
	<p>partie "frame" scrollable </p>
	<p>partie "frame" scrollable </p>
	<p>partie "frame" scrollable </p>
	<p>partie "frame" scrollable </p>
	<p>partie "frame" scrollable </p>
	<p>partie "frame" scrollable </p>
	<p>partie "frame" scrollable </p>
	<p>partie "frame" scrollable </p>
	<p>partie "frame" scrollable </p>
	<p>partie "frame" scrollable </p>
	<p>partie "frame" scrollable </p>
	<p>partie "frame" scrollable </p>
	<p>partie "frame" scrollable </p>
	<p>partie "frame" scrollable </p>
	<p>partie "frame" scrollable </p>
        <p>partie "frame" scrollable </p>
	<p>partie "frame" scrollable </p>
	<p>partie "frame" scrollable </p>
	<p>partie "frame" scrollable </p>
	<p>partie "frame" scrollable </p>
	<p>partie "frame" scrollable </p>
	<p>-------THE END------- </p>
</div>
<div class="footer">contenu du footer de taille fixe:750px </div>
</div>
</body>
</html>

Tout n'est pas encore FINI ,tu as encore quelques petits réglages.
Mais je pense que cette fois on est sur la piste. Smiley cligne

@+
Modifié par Michel (07 Feb 2006 - 22:56)

le_castor

7 Feb 2006 à 22:57

Michel a écrit :
Re ==> Castor

Bon je vais être bon prince, mais ne me parle plus de overflow:auto; Smiley ohwell

Par contre peux tu m'expliquer à quoi sert [padding-top: 200px;]
Que j'ai laissé volontairement dans le code ci-dessous
==>en haut de ton style ???


<!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>4 zones avec scroll</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
 padding-top: 200px;
<!--
/* CSS issu des tutoriels css.alsacreations.com */
body {
  margin:0;
  padding:0;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size:0.8em;
  background-color:#fff; /*couleur de fond blanche*/

}

.conteneur { /*le conteneur global du site, qui sera centré */
  width:750px;
  position:absolute;
  left:50%;
  margin-left: -385px;
 }

.header {
  margin:0;
  padding:0;
  height:100px;
  background-color:#99CCCC;
}

#navcontainer1 ul{
  margin-top:30px;
  padding-left 0;
  margin-left:0;
  background-color:#036;
  color: White;
  float: left;
  width: 100%;
  font-family: arial, helvetica, sans-serif;
}

#navcontainer1 ul{
  margin:0 0 1px 0;
  padding:0;
  height:auto
}

#navcontainer1 li {
  display:inline;
}

#navcontainer1  li a{
  margin:0;
  padding:0.2em 1em;
  background-color:#036;
  color:White;
  text-decoration:none;
  float:left;
  border-right:1px solid #fff;
  display:inline;
}

#navcontainer1 li a:hover{
  background-color:#369;
  color:#fff;
}

.menu {
  left:0;
  width:166px;
  height:300px;
  margin:0 0 0 0;
  padding:0;
  background-color:#CCCCFF;
  float:left;
}

.frame {
  width:584px;
  height:300px;
  background-color:#9999CC;
  overflow:auto;
  float:left;
}
.frame p{
  margin:0 0 0 2em;
  padding:0;
}
.frame h1{
  font-size:1em;
  margin:1em 0 2em 2em;
  padding:0;
}

.footer {
  height:20px;
  background-color: #99CC99;
  clear:both;
}

p {
  margin:0 0 5px 0;
}

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

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

.menugauche a {
  margin:0 2px;
  color:#000000;
  text-decoration: underline;
}

.menugauche a:hover {
  text-decoration: none;
}
#navcontainer {
  width: 166px;
  margin:0;
}

#navcontainer ul{
  margin:0;
  padding:0;
  list-style-type:none;
  font-family: Arial, Helvetica, sans-serif;
}

#navcontainer a{
  display:block;
  padding:3px;
  width:160px;
  background-color:#036;
  border-bottom:1px solid #eee;
}

#navcontainer a:link, #navlist a:visited{
  color: #EEE;
  text-decoration: none;
  margin:0;
}

#navcontainer a:hover{
  background-color:#369;
  color: #fff;
}
-->
</style>

</head>

<body>

<div class="conteneur">
<div class="header">contenu du header de taille fixe : 750px</div>
<div id="navcontainer1">

<ul>
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

<div class="menu">
<div id="navcontainer">
<ul id="navlist">

<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
</div>
<div class="frame">
<h1>partie scroll</h1>
        <p>partie "frame" scrollable </p>
	<p>partie "frame" scrollable </p>
	<p>partie "frame" scrollable </p>
	<p>partie "frame" scrollable </p>
	<p>partie "frame" scrollable </p>
        <p>partie "frame" scrollable </p>
	<p>partie "frame" scrollable </p>
	<p>partie "frame" scrollable </p>
	<p>partie "frame" scrollable </p>
	<p>partie "frame" scrollable </p>
	<p>partie "frame" scrollable </p>
	<p>partie "frame" scrollable </p>
	<p>partie "frame" scrollable </p>
	<p>partie "frame" scrollable </p>
	<p>partie "frame" scrollable </p>
	<p>partie "frame" scrollable </p>
	<p>partie "frame" scrollable </p>
	<p>partie "frame" scrollable </p>
	<p>partie "frame" scrollable </p>
	<p>partie "frame" scrollable </p>
	<p>partie "frame" scrollable </p>
	<p>partie "frame" scrollable </p>
	<p>partie "frame" scrollable </p>
	<p>partie "frame" scrollable </p>
	<p>partie "frame" scrollable </p>
	<p>partie "frame" scrollable </p>
	<p>partie "frame" scrollable </p>
	<p>partie "frame" scrollable </p>
    <p>partie "frame" scrollable </p>
	<p>partie "frame" scrollable </p>
	<p>partie "frame" scrollable </p>
	<p>partie "frame" scrollable </p>
	<p>partie "frame" scrollable </p>
	<p>partie "frame" scrollable </p>
	<p>THE END </p>
</div>
<div class="footer">contenu du footer de taille fixe:750px </div>
</div>
</body>
</html>

Tout n'est pas encore FINI ,tu as encore quelques petits réglages.
Mais je pense que cette fois on est sur la piste. Smiley cligne

@+

euh... comment dire... il sert à rien Smiley lol

je l'avais mis la pour avoir plusieurs lignes de code sous la main et j'ai omis de l'enlever...
Smiley lol

en tout cas merci c'est exactement ce que j'avais en tête,
peux tu m'expliquer tes modifications ?
Modifié par le_castor (07 Feb 2006 - 22:59)

Michel

8 Feb 2006 à 01:12

Bonsoir

==>le_castor

Imprime les codes et compare les, ça t'éclaircira plus que mes explications.
Je risque d'être, très mauvais pédagogue.

@+

le_castor

8 Feb 2006 à 11:47

Michel a écrit :
Bonsoir

==>le_castor

Imprime les codes et compare les, ça t'éclaircira plus que mes explications.
Je risque d'être, très mauvais pédagogue.

@+

merci beaucoup encore, et je vais m'ateller à la comphrénsion de tes modifications.

Sujet clos

CSS et mise en forme, CSS3

Kit css + 2 menus