28173 sujets

CSS et mise en forme, CSS3

Un bloc sous 3 autres.

Bonjour, j'ai un gros problème avec un design extensible. Après l'avoir rendu extensible j'ai corriger tout les petis bugs sous FF, c'était parfait. Je vais voir sous IE, il y a un gros bug, je m'en doutais mais un comme celui-la ... Smiley sweatdrop Bref, j'ai trois blocs pour trois menus, deux a gauche une a droite et au millieu il y a le contenu. Mais sous IE le conteneur du contenu est en bas des trois menus, j'arrive pas a la remonter, si je fais display:inline sa marche pas, ni avec position:relative/fixed. J'ai tenté float : left pour le coller avec clui de gauche mais non ! Margin non plus bref. Smiley bawling
Voici mon code et le design :
CSS :

body {
background-color : #cfcfcf;
width:80%;
margin:auto;
}
* a {
border : 0;
outline : 0;
}
* img {
border : none;
}
.top {
background-image : url("images/top.gif");
background-repeat:no-repeat;
width : 922px;
height : 191px;
margin : auto;
}
#global{
width: 922px;
margin:auto;
height:auto;
}
#services {
background-image : url("images/services.gif");
background-repeat:no-repeat;
height: 36px;
width: 148px;
float : left;
margin-left:-8px;
}
.menu_texte {
padding-top : 40px;
padding-bottom : 10px;
padding-right : 3px;
padding-left : 30px;
}
.service_texte {
padding-top : 40px;
padding-bottom : 10px;
padding-right : 3px;
padding-left : 10px;
}
.pub_texte {
padding-top : 40px;
padding-bottom : 10px;
padding-right : 40px;
padding-left : 3px;
float:right;
text-align:left;
}
.barrehaute {
background-image: url("images/barrehaute.gif");
background-repeat:no-repeat;
width:922px;
height:36px;
float:left;
}
.centre {
width:922px;
height:1024px;
background-image: url("images/centre.gif");
background-repeat:repeat-y;
margin:auto;
}
html>body .centre {
height: auto;
min-height: 1024px;
} 
.centre_texte {
width : 525px;
height:auto;
padding-top : 10px;
padding-bottom : 10px;
padding-right : 40px;
padding-left : 200px;
position:relative;
}
.bottom {
background-image : url("images/bottom.gif");
background-repeat:no-repeat;
width : 922px;
height : 104px;
clear : both;
margin-top : -5px;
margin:auto;
position:relative;
}
.bottom_texte {
text-align:center;
}
.texte {
text-align: center;
}

HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" media="screen, handheld" />
<title>Design et decoupe par Bekhan de BN-Creations.</title>
</head>
<body>
<div class="top"></div>
<div id="global">

<div class="barrehaute">
<div class="pub_texte">
<script type="text/javascript"><!--
google_ad_client = "pub-9807639271564660";
google_ad_width = 120;
google_ad_height = 600;
google_ad_format = "120x600_as";
google_ad_type = "text_image";
google_ad_channel = "";
google_color_border = "02a2dd";
google_color_bg = "02a2dd";
google_color_link = "0000FF";
google_color_text = "000000";
google_color_url = "008000";
//-->
</script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div class="menu_texte">
Test 1<br />
Test 1<br />
Test 1<br />
Test 1<br />
Test 1<br />
Test 1<br />
Test 1<br />
Test 1<br />
Test 1<br />
Test 1<br />
Test 1<br />
Test 1<br />
Test 1<br />
Test 1<br />
Test 1<br />
<br />
<div id="services">

</div>
</div>
</div>
</div>
<div class="centre">
<div class="centre_texte">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis semper enim nec tortor. Morbi molestie cursus dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Praesent vulputate laoreet pede. Vestibulum facilisis est eget leo pretium mollis. Mauris tempus imperdiet dui. Aliquam ornare, purus ac malesuada imperdiet, ante ligula commodo lorem, ut porta odio dolor id arcu. Vivamus euismod velit sed elit. Nulla bibendum nibh et dolor. Mauris molestie dictum arcu. Curabitur eget turpis.

Fusce laoreet lobortis tellus. Nullam at justo. Suspendisse sapien. Curabitur tristique imperdiet odio. Nam congue, mauris nec tempus volutpat, tellus felis gravida ligula, non semper pede diam quis nibh. Nullam at tortor. Fusce nec neque. Morbi rutrum luctus sapien. Nunc vitae tellus vitae nunc tempor rhoncus. Praesent turpis. Etiam imperdiet lectus eu orci.

Phasellus vestibulum libero ac diam. Praesent eu velit vitae massa facilisis interdum. In eget est. Curabitur facilisis, felis vehicula rhoncus semper, nibh sapien congue metus, a dictum odio arcu sed odio. Sed imperdiet bibendum risus. Nam tempor quam non massa. Nunc ullamcorper risus vitae lacus. Pellentesque diam sem, mollis in, pulvinar a, porta consequat, dui. Curabitur sagittis lectus sed metus. Pellentesque dui. Aliquam sed neque non dui laoreet mattis. Aenean eu dui sit amet odio rhoncus fringilla. In nunc. Pellentesque condimentum arcu quis velit. Aliquam augue tellus, porta vel, facilisis vel, mollis in, erat.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus neque mauris, luctus ac, iaculis rutrum, iaculis et, dui. Praesent vel sem. Pellentesque non felis quis est mattis sollicitudin. Fusce elementum eros vitae orci euismod venenatis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec odio nibh, fermentum a, mollis quis, posuere et, massa. Phasellus tincidunt hendrerit risus. Cras lobortis. Praesent scelerisque aliquet massa. Fusce mi. Nullam massa ante, fringilla quis, cursus non, dictum a, nisl.

Sed eu ante. Ut ut sem eget nisl mollis tristique. Maecenas nunc magna, semper ac, condimentum eu, malesuada in, pede. Nulla sagittis lobortis orci. Vivamus scelerisque. Aliquam feugiat tortor nec neque. Nunc iaculis dolor et velit. Donec rhoncus semper ante. Sed iaculis, sapien pharetra nonummy adipiscing, nulla tellus imperdiet ipsum, non aliquam odio lectus quis sapien. Curabitur dolor ligula, nonummy id, egestas non, rhoncus quis, metus. Sed sapien augue, semper non, cursus ut, accumsan at, lacus. Nunc lacinia interdum pede. Aenean nec nulla non nibh consequat euismod. Aliquam quis massa ullamcorper augue gravida faucibus. Ut eros risus, tincidunt non, dapibus ut, mollis condimentum, enim. Fusce odio. Nam est odio, tincidunt id, dapibus ac, gravida vel, pede. In vulputate malesuada erat. In quis tellus nec magna interdum ullamcorper.

Nulla eget nibh. Pellentesque quis nisi et pede vestibulum placerat. Aenean a pede ac nunc mollis imperdiet. Integer egestas accumsan orci. Nunc non quam. Vestibulum purus arcu, volutpat a, sagittis vitae, suscipit in, orci. Fusce facilisis tortor. Nullam vel felis. Sed justo libero, pretium sit amet, aliquet sed, gravida id, tellus. Nulla id urna quis ante rutrum tempor. Morbi vitae mi. In hac habitasse platea dictumst. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In hac habitasse platea dictumst. Aliquam vel mauris. Nulla porttitor odio nec metus. In hac habitasse platea dictumst. Praesent commodo sollicitudin neque. Cras pretium condimentum arcu.

Donec semper nisl eu nibh pulvinar tristique. Fusce vel ante. Aliquam dapibus nisl eget nulla dictum porttitor. Nullam et orci. Cras ligula velit, blandit a, faucibus eget, iaculis eu, risus. Praesent imperdiet arcu non tellus. Proin venenatis justo sed odio. Morbi gravida. In ac tellus non mi egestas egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras sed sapien nec risus posuere posuere. Sed interdum quam id pede. Pellentesque dignissim. Ut ac purus ac lacus consectetuer varius. Phasellus ipsum justo, adipiscing non, scelerisque quis, mollis at, libero. Aenean lacinia. Sed ullamcorper. In laoreet enim nec lectus. Ut sit amet neque sodales risus egestas consequat.

Vivamus vel turpis in metus sollicitudin pellentesque. Aenean libero odio, rutrum eget, interdum eget, placerat ultricies, diam. Aliquam erat volutpat. Fusce sem sapien, iaculis nec, faucibus id, pharetra et, neque. Maecenas dapibus, justo non iaculis suscipit, lacus lacus dignissim eros, at viverra justo dui vitae dolor. Pellentesque mattis mattis quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque lorem eros, feugiat pretium, lacinia in, fringilla euismod, arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis vel orci. Ut est. Nullam elit. Fusce hendrerit sapien vel velit.

Donec a magna. Suspendisse sem lectus, vulputate ut, facilisis non, suscipit ut, enim. Duis placerat arcu eu arcu. Sed lectus neque, auctor a, mattis eu, venenatis eget, lorem. Sed tellus dui, varius quis, tincidunt vel, porttitor id, massa. In euismod dictum libero. Aliquam erat volutpat. Vestibulum placerat est a velit. Etiam felis. Nam condimentum ligula non massa. Quisque eget neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Curabitur eleifend. Vivamus accumsan libero nec libero. Suspendisse ac ipsum. Donec nec massa. Aliquam erat volutpat. Cras ornare nonummy ligula. In hac habitasse platea dictumst. Fusce urna dui, posuere eu, egestas non, nonummy ut, dui.

Aenean sodales feugiat eros. Pellentesque quis ligula eu ligula fermentum vestibulum. Morbi condimentum fringilla nisl. Cras vehicula mi mollis libero. Sed malesuada magna vehicula mi. Cras in lorem nec nunc ornare pulvinar. Donec ligula felis, auctor quis, luctus a, lacinia quis, sapien. Mauris nisl purus, sagittis vel, porttitor ut, blandit a, augue. Nam sem. Fusce lacus.

Curabitur libero dui, elementum in, sodales sed, eleifend id, est. Morbi convallis. Ut tempor posuere nisl. Ut augue lacus, convallis ac, consectetuer non, rhoncus tristique, elit. Fusce erat justo, lobortis vitae, gravida nec, luctus a, sapien. Donec in eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam dignissim nunc. Etiam tempor dui cursus turpis. Proin rhoncus, urna a mattis congue, metus lectus vestibulum urna, quis facilisis eros risus adipiscing nulla. Donec dolor urna, bibendum id, congue at, sollicitudin id, augue. Suspendisse.
</div>
</div>

</div>
</body>
</html>

Et le lien en ligne : http://www.actu-pc.com/test/index.html

Merci d'avance. Parce que la ... Smiley biggol
Modifié par bekhan (03 Sep 2007 - 13:23)
Je viens de tenté z-index avec position:fixed, avec ça il se ramenait a sa place mais recouvre le menu, j'ai tenté z-index. Rien :s
Sujet clos
Aller à