Mise en forme pour template CSS et problème avec ie7

Question

Damas

14 Dec 2010 à 11:22

Bonjour à tous,
Après avoir construit mes sites durant des années avec des tableaux, je découvre enfin les joies des CSS que je n'utilisais jusqu'à maintenant que pour le style typographique de mes pages.
Je suis confrontée à un problème de taille, car ma mise en page me satisfait sous Safari et Firefox, en revanche sous ie, tout est bancal.
Si quelqu'un pouvait me donner un coup de main, je lui en serai grandement reconnaissante Smiley cligne

Tout d'abord la structure à laquelle je souhaite parvenir :

http://farm6.static.flickr.com/5284/5259926243_2431eb3c67.jpg

Et maintenant mon CSS, que j'ai récupéré à droite à gauche, pour obtenir le résultat voulu :

* {
	margin: 0;
	padding: 0;
}
header, nav, section, article, aside, footer {
	display: block;
	
}
body {
	width: 100%;
	margin-bottom: 50px;
	margin-top: 20px;
	/* Fond degradé */
	
	/* Anciens navigateurs */
	background: #8a8a8a url("images/gradient-bg.jpg") repeat-x top;
	-o-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	/* Navigateurs récents */
	background: -moz-linear-gradient(
		top,
		#e2e2e2,
		#8a8a8a
	);
	background: -webkit-gradient(
		linear,
		left top, left bottom,
		from(#e2e2e2),
		to(#8a8a8a)
	);
}

img {
	border: none;
}
input {
	vertical-align: middle;
}
#wrapper {
	margin: 0 auto;
	width: 1000px;

	background-color:#fff;
	-moz-border-radius: 11px; /* Arrondi*/
	-webkit-border-radius: 11px;
	border-radius: 11px;
	
	-moz-box-shadow: 10px 10px 20px #666; /* Ombre*/
	-webkit-box-shadow: 10px 10px 10px #666;
	box-shadow: 10px 10px 20px #666;
	behavior: url(/ie-css3.htc); /* Script must be placed in website root*/
}


/* Header
-----------------------------------------------------------------------------*/
#header {
	height: 250px;
	margin: 0;
	padding:  20px 30px 0 0;
	background: url(/images/header.jpg) no-repeat;
	-moz-border-radius: 11px 11px 0 0;
	-webkit-border-radius: 11px 11px 0 0;
	border-radius: 11px 11px 0 0;
	behavior: url(/ie-css3.htc);
	text-align:right;
}

/* Main container
-----------------------------------------------------------------------------*/
#middle {
	border-left: 160px solid #FFF;
	height: 1%;
	position: relative;
	text-align:justify;
}
#middle:after {
	content: '.';
	display: block;
	clear: both;
	visibility: hidden;
	height: 0;
}
#container {
	width: 100%;
	float: left;
	overflow: hidden;
	margin-right: -100%;
}
#content {
	padding: 15px;
	}

/* Menu Horizontal
-----------------------------------------------------------------------------*/

#navigation{

	height: 12px;
	margin: 0;
	padding: 20px 15px;
	background:#CCCF02;
	position: relative;
	z-index: 10;
	
	}

/* Sidebar Left
-----------------------------------------------------------------------------*/
#sideLeft {
	float: left;
	width: 160px;
	position: relative;
	text-align: top;
	text-align:justify;
	left: -160px;
}

.boite {

padding:0 0 0 15px;
margin:0px 0px 10px 0px;
line-height:1.3em;
}

.boite p {
padding: 0px 10px 0px 10px;
margin: 0px:
}

/* Footer
-----------------------------------------------------------------------------*/
#footer {
	background:#CCCF02;
	height: 50px;
	-moz-border-radius: 0 0 11px 11px;
	-webkit-border-radius: 0 0 11px 11px;
	border-radius: 0 0 11px 11px;
	behavior: url(/ie-css3.htc);
}

Bon, j'ai rajouté un menu horizontal et un menu vertical.

Voici le code HTML :

<!DOCTYPE html>
<html>
<head>
  <title>TITLE</title>
	<meta name="title" content="" />
	<meta name="keywords" content="" />
	<meta name="description" content="" />
  <link href="/stylesheets/structure.css?1292318804" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/table.css?1292258206" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/text.css?1292258206" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/Vstyle_menu.css?1292258206" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/Hstyle_menu.css?1292258206" media="screen" rel="stylesheet" type="text/css" />
  <script src="/javascripts/prototype.js?1291139084" type="text/javascript"></script>
<script src="/javascripts/effects.js?1291139084" type="text/javascript"></script>
<script src="/javascripts/dragdrop.js?1291139084" type="text/javascript"></script>
<script src="/javascripts/controls.js?1291139084" type="text/javascript"></script>
<script src="/javascripts/rails.js?1291139084" type="text/javascript"></script>
<script src="/javascripts/HMenuScript.js?1292258206" type="text/javascript"></script>
<script src="/javascripts/VMenuScript.js?1292258206" type="text/javascript"></script>
<script src="/javascripts/jquery.min.js?1292260688" type="text/javascript"></script>
<script src="/javascripts/application.js?1291139084" type="text/javascript"></script>
  <meta name="csrf-param" content="authenticity_token"/>
<meta name="csrf-token" content="KTJaZ1wCaEhM/mJZRFoDu0r+1BRJlQn7XIC2pb4Irug="/>

</head>
<body>

<div id="wrapper"><!-- Contient le site-->
<!-- #Header-->
<header id="header">
	
	<div id="user_nav">

		<!-- following 2 lines below are related to notices of devise for example.
		@FIXME: to add ajax to have notices and authentication dynamically in same div -->

		<p class="notice"></p>
	    <p class="alert"></p>

			<a href="/users/sign_up">Register new user</a> or <a href="/users/sign_in">sign in</a>.
	</div>

</header>
<!-- Fin #header-->


<!-- #bloc menu horizontal-->
<div id=navigation>
<ul class="menu" id="menu">
	<li><a href="#" class="menulink">Dropdown One</a>
		<ul>
			<li><a href="#">Navigation Item 1</a></li>
			<li>
				<a href="#" class="sub">Navigation Item 2</a>
				<ul>
					<li class="topline"><a href="#">Navigation Item 1</a></li>
					<li><a href="#">Navigation Item 2</a></li>
					<li><a href="#">Navigation Item 3</a></li>
					<li><a href="#">Navigation Item 4</a></li>
					<li><a href="#">Navigation Item 5</a></li>
				</ul>
			</li>
			<li>
				<a href="#" class="sub">Navigation Item 3</a>
				<ul>
					<li class="topline"><a href="#">Navigation Item 1</a></li>
					<li><a href="#">Navigation Item 2</a></li>
					<li>
						<a href="#" class="sub">Navigation Item 3</a>
						<ul>
							<li class="topline"><a href="#">Navigation Item 1</a></li>
							<li><a href="#">Navigation Item 2</a></li>
							<li><a href="#">Navigation Item 3</a></li>
							<li><a href="#">Navigation Item 4</a></li>
							<li><a href="#">Navigation Item 5</a></li>
							<li><a href="#">Navigation Item 6</a></li>
						</ul>
					</li>
					<li><a href="#">Navigation Item 4</a></li>
				</ul>
			</li>
			<li><a href="#">Navigation Item 4</a></li>
			<li><a href="#">Navigation Item 5</a></li>
		</ul>
	</li>
	<li><a href="/tickets" class="menulink">Tickets</a></li>
	<li>
		<a href="#" class="menulink">Dropdown Two</a>
	  <ul>
			<li><a href="#">Navigation Item 1</a></li>
			<li>
				<a href="#" class="sub">Navigation Item 2</a>
				<ul>
					<li class="topline"><a href="#">Navigation Item 1</a></li>
					<li><a href="#">Navigation Item 2</a></li>
					<li><a href="#">Navigation Item 3</a></li>
				</ul>
			</li>
		</ul>
	</li>
	<li>
		<a href="#" class="menulink">Dropdown Three</a>
	  <ul>
			<li><a href="#">Navigation Item 1</a></li>
			<li><a href="#">Navigation Item 2</a></li>
			<li><a href="#">Navigation Item 3</a></li>
			<li><a href="#">Navigation Item 4</a></li>
			<li><a href="#">Navigation Item 5</a></li>
			<li>
				<a href="#" class="sub">Navigation Item 6</a>
				<ul>
					<li class="topline"><a href="#">Navigation Item 1</a></li>
					<li><a href="#">Navigation Item 2</a></li>
				</ul>
			</li>
			<li><a href="#">Navigation Item 7</a></li>
			<li><a href="#">Navigation Item 8</a></li>
			<li><a href="#">Navigation Item 9</a></li>
			<li><a href="#">Navigation Item 10</a></li>
		</ul>
	</li>
</ul>
</div>
<!-- #Fin bloc menu horizontal-->




<!-- #container central-->
<section id="middle">
		<div id="container">
			<div id="content">
				
				<h1>La liste des tickets</h1>

	
			</div><!-- #content-->
			
		</div><!-- #Fin container central-->

		<!-- #Colonne menu gauche-->
		<aside id="sideLeft">
		    <div class="boite"><!-- 1ère boîte-->
		        <p>
		        <ul id="navmenu-v">
		        <li><a href="#">Home</a></li>
		        <li><a href="#">Work +</a>
		          <ul>
		            <li><a href="#">Websites +</a>

		              <ul>
		                <li><a href="#">qrayg.com</a></li>
		                <li><a href="#">craigerskine.com</a></li>
		                <li><a href="#">dt.qrayg.com</a></li>
		                <li><a href="#">legendofmana.info</a></li>
		              </ul>
		            </li>

		            <li><a href="#">Sketchbook</a></li>
		            <li><a href="#">Free Interfaces</a></li>
		          </ul>
		        </li>
		        <li><a href="#">Learn +</a>
		          <ul>
		            <li><a href="#">Fireworks +</a>

		              <ul>
		                <li><a href="#">Aqua Button</a></li>
		                <li><a href="#">Aqua Button 2</a></li>
		                <li><a href="#">Water Drop</a></li>
		                <li><a href="#">Light FX</a></li>
		                <li><a href="#">Light FX2</a></li>

		              </ul>
		            </li>
		            <li><a href="#">CSS +</a>
		              <ul>
		                <li><a href="#">CSS Menus</a></li>
		                <li><a href="#">Sprite Nav</a></li>
		                <li><a href="#">@import</a></li>

		              </ul>
		            </li>
		          </ul>
		        </li>
		        <li><a href="#">Contact</a></li></ul></div>

		        <div class="boite"><!-- Seconde boîte-->
		          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
		          <p>C'est une example pour demontre methodo de creation contenu en different langs.  Et encore une ligne.</p>
		        </div>

			</aside><!-- #sideLeft -->
		
</section><!-- #middle-->




<footer id="footer">

<div id="content">
	<a href="/">Return to main page </a> | <a href="/portal_admin/list">Return to admin list page </a>
</div>

</div><!-- #wrapper -->

<!--
<script type="text/javascript">
	var menu=new menu.dd("menu");
	menu.init("menu","menuhover");
</script> -->
</body>
</html>

Donc, mes problèmes :
- il y a une bande qui s'affiche parfois en bas de page après le dégradé
- je ne peux pas modiifer la hauteur de la div menu horizontal sans que l'ensemble de la mise en page soit chamboulée
- sous ie 7, l'image de fond du header ne s'affiche pas, celui-ci disparaît, les menus également... Smiley decu

Je suis prête à rapratir de zéro si ma structure n'est pas adaptée, à vot' bon coeur !

Mabelle

14 Dec 2010 à 11:38

Bonjour, si tu avais une page en ligne, cela nous aiderait à constater le problème.

Il y a cette page sur alsacréations si tu veux améliorer ta structure.
Gabarits HTML et CSS simples

Laurie-Anne

14 Dec 2010 à 12:07

Bonjour,

Peut-être faudrait-il ajouter le JS qui permet à IE de reconnaitre les éléments HTML5...

Damas

14 Dec 2010 à 13:13

@ Mabelle : c'est à partir de cette page que j'ai travaillé mon template. Pour le site, il n'est pas accessible en ligne malheureusement.
@ Laurie Anne : à quel fichier fais tu référence ? Où puis-je télécharger ce fichier ?

Laurie-Anne

14 Dec 2010 à 13:14

Google ?

Damas

14 Dec 2010 à 13:30

Ah, toutes mes excuses, je pensais que ton intervention allait dans le sens de mon appel à l'aide. Je n'avais pas compris qu'il s'agissait d'une devinette.

Damas

14 Dec 2010 à 13:47

Voilà, j'ai mis la maquette en ligne. On voit bien la bande qui apparaît dans le bas de la page et qui disparaît quand le contenu est plus important.
C'est moche, hein, c'est qu'une maquette.
C'est la structure que je cherche à corriger ici. Merci !

ICI

Patidou

14 Dec 2010 à 16:12

Ce que Laurie-Anne voulais te dire c'est qu'avec une petite recherche sur google tu aurais trouvé un script pour corriger tout ça. Sur mon site, j'utilise ce code juste avant les css :

<!--[if lte IE 8]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Le script n'est utilisé que par IE8 et prédécesseurs grâce aux commentaires conditionnels.
Modifié par Patidou (14 Dec 2010 - 16:12)

Patidou

14 Dec 2010 à 16:17

Mince il y en a des scripts et css dans ta page. Smiley sweatdrop

Il faudrait essayer de rassembler au maximum tes fichiers. Smiley cligne

Damas

15 Dec 2010 à 09:29

Salut Patidou et merci pour tes réponses. Je vais repartir à 0, ce sera plus simple que d'utiliser un template et d'y rajouter des trucs au p'tit bonheur la chance, et d'essayer de comprendre ce qui coince ensuite.

Sujet clos

CSS et mise en forme, CSS3

Mise en forme pour template CSS et problème avec ie7