28172 sujets

CSS et mise en forme, CSS3

Positionnement d'un div dans un autre (débutant)

Bonjour à tous je franchis le pas j'essaie de faire mon template en css cligne

j'ai un petit probleme avec mon code css, suivre le lien pour mieux comprendre :

http://www.usi-kickboxing.com/usinouveau/

je voudrais que dans mon template , le "div news"(en bleu foncé, et dans le code css "div#newsletter"), se place en dessous du "div agenda"(en rouge), tous en restant dans le "div contenu"( en jaune ).

je poste mon code html :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="styles.css">
<title>Positionnement CSS</title>
<style type="text/css">
<!--
body {
background-color: #181818;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onLoad="MM_preloadImages('images/menu/home2.jpg','images/menu/horaires2.jpg','images/menu/tarifs2.jpg','images/menu/contact2.jpg','images/menu/photo2.jpg','images/menu/video2.jpg','images/menu/forum2.jpg')">
<div id="conteneur">
<div id="bandeau"><img src="images/header2.jpg" width="1000" height="376"></div>
<div id="menuhor"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Accueil','','images/menu/home2.jpg',1)"><img src="images/menu/home.jpg" alt="Accueil" name="Accueil" width="146" height="41" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Horaires','','images/menu/horaires2.jpg',1)"><img src="images/menu/horaires.jpg" alt="Horaires" name="Horaires" width="141" height="41" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Tarifs','','images/menu/tarifs2.jpg',1)"><img src="images/menu/tarifs.jpg" alt="Tarifs" name="Tarifs" width="143" height="41" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Contact','','images/menu/contact2.jpg',1)"><img src="images/menu/contact.jpg" alt="Contacts" name="Contact" width="143" height="41" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Galerie','','images/menu/photo2.jpg',1)"><img src="images/menu/photo.jpg" alt="Galerie" name="Galerie" width="142" height="41" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Video','','images/menu/video2.jpg',1)"><img src="images/menu/video.jpg" alt="Vidéos" name="Video" width="143" height="41" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Forum','','images/menu/forum2.jpg',1)"><img src="images/menu/forum.jpg" alt="Forum" name="Forum" width="142" height="41" border="0"></a></div>

<div id="contenu">
<div id="menu">
<div id="menu_haut">Menu haut</div>
<div id="menu_bas">boite de défilement info</div>

</div>
<div id="agenda">agenda</div>
<div id="newsletter">news</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed egestas faucibus nunc. Morbi quis neque laoreet ante varius rutrum. Nam arcu ipsum, blandit placerat, pharetra ut, pulvinar in, nulla. Vivamus condimentum, elit eu faucibus sollicitudin, nisi metus fermentum mi, sed egestas purus nunc sit amet est. Cras imperdiet, arcu sed placerat viverra, arcu justo malesuada augue, a tristique nunc neque vitae ligula. Mauris bibendum. Praesent nibh. Sed in lacus semper dui lobortis dignissim. Nunc iaculis, tortor sed commodo tincidunt, neque ligula porttitor orci, venenatis bibendum ante mi id massa. Pellentesque ipsum urna, posuere non, pellentesque non, tempus at, ipsum. Aliquam lacinia nisl sit amet ipsum. Nam volutpat vulputate lacus. Integer orci dui, lacinia non, blandit sit amet, vulputate vel, sem. Vestibulum mi neque, pharetra ut, venenatis et, ultricies vitae, urna.
</div>
<div id="pied_page"><img src="images/footer.jpg" width="1002" height="40"></div>
</div>
</body>
</html>


et mon CSS:

div {
text-align:left;
}
div#conteneur {

width:1000px;

min-height:700px;

margin:0 auto;

}

div#bandeau {
width:1000px;
height:376px;
background-color:#181818;
}
div#menuhor {
width:1000px;
height:41px;
background-color:#181818;
}
div#menu {
float:left;
width:256px;
height:400px;
background-color:#FF6699;
}
div#menu_haut {
width:256px;
height:200px;
background-color:#66CC33;
}
div#menu_bas {
width:256px;
height:200px;
background-color:#CC99CC;
}
div#contenu {
margin:0px;
width:1000px;
height:400px;
background-color:#FFCC00;
}
div#agenda {
float:right;
width:230px;
height:230px;
background-color:#FF3300;
}
div#newsletter {
float:right;
width:270px;
height:230px;
background-color:#186060;
}

div#pied_page {
clear:both;
width:1000px;
height:40px;
background-color:#181818;
}


j'ai essayé plusieurs solutions mais je n'y arrive pas Smiley fache si une ame charitable pourrais m'aider je lui en serait reconnaissant ! Smiley lol

a noter que le div en bleu foncé ( news ) et plus large que le div en rouge ( agenda).

merci d'avance ! Smiley cligne [/i][/i][/i][/i][/i]
Modifié par Mikachu (02 Apr 2010 - 14:03)
Salut,

Le mieux pour faire ce genre de mise en page, est de créer d'abord tes grandes zones de la page, notamment 3 colonnes, dans lesquelles tu vas ensuite créer des sous zones (vert et mauve à gauche, rouge et turquoise à droite).

Tu peux partir des gabarits Alsacréations que tu adapte ensuite à tes besoin en subdivisant les zones déja existantes. Smiley smile
Tous d'abord merci pour vos réponses. Smiley cligne

je vais opter pour la deuxieme soluce je pense pouvoir me débouiller avec .

merci encore ! Smiley lol
raknal a écrit :
Moi aussi je suis novice en CSS mais j'ai remarqué que tu n'utilises pas du tout de position = absolute ou relative

Ce n'est pas un mal. À priori, il n'en a pas besoin ici.
Pour s'y retrouver un peu dans le positionnement CSS, savoir quoi utiliser en priorité, je recommande cette lecture: Guide de survie du positionnement CSS. Bien sûr on lira au préalable tous les articles d'introduction au positionnement CSS qui y sont indiqués. Smiley smile

team94, je te conseille de revoir en partie ta structure HTML. Tu as ceci:
<div id="contenu">
  <div id="menu"></div>
  <div id="agenda"></div>
  <div id="newsletter"></div>
  Ici tout le contenu.
</div>

Je te recommande la structure suivante:
<div id="centre">
  <div id="menu">
    Menu partie 1
    Menu partie 2
  </div><!--#menu-->
  <div id="outils">
    <div id="agenda"></div><!--#agenda-->
    <div id="newsletter"></div><!--#newsletter-->
  </div><!--#outils-->
  <div id="contenu">
    Ici tout le contenu
  </div><!--#contenu-->
</div><!--#centre-->

Tu peux faire flotter #menu à gauche, #outils à droite, et mettre des marges à gauche et à droite pour #contenu. Il faudra ensuite gérer le dépassement des flottants sur #centre (le plus simple étant de rajouter un overflow:hidden pour ce conteneur).

Pour info les commentaires sous la forme <!--#identifiant--> ou <!--.classe--> sont juste des repères dans le code HTML. Ça évite de se retrouver avec des portions de code qui ressemblent à ça: </div></div></div> <div>Hop</div></div></div>.

Explorer les gabarits et analyser leur code (en lisant les commentaires dans le CSS, en suivant les liens donnés...) est une bonne piste pour s'y retrouver. Smiley cligne
Modifié par Florent V. (02 Apr 2010 - 15:16)
Sujet clos
Aller à