Probleme de "container" pour deux div l'un à côté de l'aut

Question

~~supprimé~~

2 Nov 2009 à 20:54

Bonjours,

Cela fait plusieurs jour que je cherche à rendre ma page web un peux plus "propre", tout dabord en voulant mettre un div container (#page) qui fonctionne pour les 2 div du milieux (#content et #droite).

J'ai toujours eu de la peine pour ce qui est de positionner 2 div l'un à côté de l'autre et n'ai jamais trouver de réponse que je comprenais.

HTML:

<html>
	<head>
		<meta name="google-site-verification" content="Zg8c5lonZBFZqm61rDykrnzZZFqByDq2gkB5NU2Cm4A" />
		<title>blabla blabla - Apprentissage blabla</title>
        <script src="jquery132.js"></script>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" type="text/css" media="screen" charset="utf-8" href="css/styles.css" />

		
	<!-- CSS STYLE DIFFERENT IE/FIREFOX -->

		
	<!--	<?php
		//$_SERVER["HTTP_USER_AGENT"] : variable donnant le navigateur
		if (ereg("MSIE", $_SERVER["HTTP_USER_AGENT"])) {
			//Internet explorer
			echo "<link rel=\"stylesheet\" href=\"css/styles_ie.css\" type=\"text/css\" />";
		} else if (ereg("^Mozilla/", $_SERVER["HTTP_USER_AGENT"])) {
			//Les autres
			echo "<link rel=\"stylesheet\" href=\"css/styles.css\" type=\"text/css\" />";
		}
		?> -->
		
		<!-- END CSS STYLE DIFFERENT IE/FIREFOX -->
				
		<!-- LIGHTBOX -->
		
		<script type="text/javascript" src="lightbox/prototype.js"></script>
		<script type="text/javascript" src="lightbox/scriptaculous.js?load=effects,builder"></script>
		<script type="text/javascript" src="lightbox/lightbox.js"></script>
		<link rel="stylesheet" href="lightbox/lightbox.css" type="text/css" media="screen" />

		
		<!-- END LIGHTBOX -->

	</head>	
	<body>	
		
			<!-- MENU -->
			<div id="banner">&nbsp 
			
						              <p>&nbsp;</p>
                <div class="dolphincontainer">
                <div id="dolphinnav">
                <ul>
                <li><a href="index.html" title="css menus" class="current"><span>Home</span></a></li>

                <li><a href="entreprise.html" title="css menus"><span>Mon travail</span></a></li>
                <li><a href="cours.html" title="css menus"><span>Les cours</span></a></li>
                <li><a href="presentation.html" title="css menus"><span>A propos de moi</span></a></li>
                <li><a href="bonus.html" title="css menus"><span>Bonus</span></a></li>
                <li><a href="contact.php" title="css menus"><span>Contact Us</span></a></li>
                </ul>

                </div>
              </div>  
			</div>
			<!-- END MENU -->
		
			<div id="page">
				<div id="content">		
					<h1>
						Bienvenue !					</h1>
              	  <a href="http://www.licencephoto.com/mini_photos/Yi1Y8ZkdQE/Divers-Misc-64080.jpg" rel="lightbox" title="Titre de l'image">LightBox Test</a>

					<p>
						Changement du graphique du site en cours             	   </p>
					<a href="http://www.licencephoto.com/mini_photos/Yi1Y8ZkdQE/Divers-Misc-64080.jpg" rel="lightbox[roadtrip]" title="titre de l'image">LightBox Test</a>
					<a href="images/menu/accueil.png" rel="lightbox[roadtrip]">LightBox Test2</a>
					<a href="http://www.e-annuaire.ch/news/images/Gastronomie/divers/vignes-suisse.jpg" rel="lightbox[roadtrip]" title="titre de l'image !!!">LightBox Test 3</a>				</div>
            
                
                <div id="droite">

                    	<p>Partie droite du site [cligne]</p>
               	</div>
		</div>
		
		
<br clear="all"/>

		<div id="footer"><p id="footertext">
			Copyright © 2009 blabla blabla
		</p></div>
		
		<!-- GOOGLE ANALYTICS -->

			<script type="text/javascript">
			var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
			document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
			</script>
			<script type="text/javascript">
			try {
			var pageTracker = _gat._getTracker("UA-10993711-1");
			pageTracker._trackPageview();
			} catch(err) {}</script>
		<!-- END GOOGLE ANALYTICS -->
	</body>
	
</html>

CSS:

* { margin:0; padding:0; } 

body
{
background:url(../images/bg_body.jpg) #0d0d0d center no-repeat;
height:100%;
width:100%;
}

#reponsemsg
{
color:#00FF00;
font-weight:700;
}

p
{
color:white;
font-size: 12px;
font-family: Verdana, "Arial", "Times New Roman", serif;
}

li
{
color:white;
padding:0px 10px 0px 10px;
font-size: 12px;
font-family: Verdana, "Arial", "Times New Roman", serif;
}



h1
{
color:#5983af;
text-align:left;
font-variant: small-caps;
font-family: Verdana, "Arial", "Times New Roman", serif;
}

h2
{
color:#5969af;
padding:0px 10px 0px 10px;
font-family: Verdana, "Arial", "Times New Roman", serif;
}

h3
{
padding:0px 10px 0px 10px;
font-family: Verdana, "Arial", "Times New Roman", serif;
}

h4
{
padding:0px 10px 0px 10px;
font-family: Verdana, "Arial", "Times New Roman", serif;
}

#banner
{
background:url(../images/banner.png) center;
height:255px;
}

.no_cadre{
border:none;
} 

#page
{
margin: 0 auto;
padding-bottom:0;
position:relative;
width:1024px;
}

#content
{
padding-top:35px;
width:512px;
float:left;
height:517px;
}

#content
a {
font-family: Verdana, "Arial", "Times New Roman", serif;
font-size: 12px;
color:95a2d7;
text-decoration:none;
}

#footer
{
margin:0px 0 0 0;
background:url(../images/footer.png) center;
height:250px;
}

#footertext
{
color:#FFFFFF;
text-align:right;
padding-top: 218px; 
padding-right: 32px;
}

#droite
{
padding-top:35px;
padding-left:10px;
position:relative;
width:502px;
height:517px;
float:right;
background:url(../images/separe.png) left no-repeat
}


/* ---------------------- nav ---------------------- */
#dolphincontainer
{
position:relative;
height:56px;
color:#E0E0E0;
background:#143D55;
width:100%;
font-family:Helvetica,Arial,Verdana,sans-serif;
}

#dolphinnav{
position:relative;
height:33px;
font-size:12px;
text-transform:uppercase;
font-weight:bold;
background:#fff url(../images/menu/dolphin_bg.gif) repeat-x bottom left;
padding:0 0 0 20px;
}

#dolphinnav ul{
margin:0;
padding:0;
list-style-type:none;
width:auto;
float:left;
}

#dolphinnav ul li{
display:block;
float:left;
margin:0 1px;
}

#dolphinnav ul li a{
display:block;
float:left;
color:#EAF3F8;
text-decoration:none;
padding:0 0 0 20px;
height:33px;
}

#dolphinnav ul li a span{
padding:12px 20px 0 0;
height:21px;
float:left;
}

#dolphinnav ul li a:hover{
color:#fff;
background:transparent url(../images/menu/dolphin_bg-OVER.gif) repeat-x bottom left;
}

#dolphinnav ul li a:hover span{
display:block;
width:auto;
cursor:pointer;
}

#dolphinnav ul li a.current,#dolphinnav ul li a.current:hover{
color:#fff;
background:#1D6893 url(../images/menu/dolphin_left-ON.gif) no-repeat top left;line-height:275%;
}

#dolphinnav ul li a.current span{
display:block;
padding:0 20px 0 0;
width:auto;
background:#1D6893 url(../images/menu/dolphin_right-ON.gif) no-repeat top right;height:33px;
}
/* ---------------------- nav ---------------------- */

J'éspère trouver mon bohneur Smiley biggrin

Merci bonne soirée
Modifié par flow041 (26 Mar 2013 - 19:49)

fvsch

2 Nov 2009 à 22:28

Bonjour,

Je suis plutôt étonné. Comment peut-on, en 2009, créer une page HTML sans Doctype? Par curiosité, sur quel site, dans quel livre ou dans quel cours as-tu appris les bases de HTML? (C'est une question honnête, ça m'intéresse vraiment.)

Il faut donc commencer par là: un Doctype en bonne et due forme. Pas d'exception. Pour ma part, je ne suis pas assez téméraire et masochiste pour créer des pages sans Doctype, et pas plus pour aider des personnes à débuguer des pages sans Doctype. Voilà pourquoi (et plus d'informations ici).

a écrit :
J'ai toujours eu de la peine pour ce qui est de positionner 2 div l'un à côté de l'autre et n'ai jamais trouver de réponse que je comprenais.

Tu peux commencer par le guide de survie du positionnement CSS, par exemple.

fvsch

2 Nov 2009 à 22:34

En passant, tu devrais pouvoir virer le code PHP commenté qui fait (ou ferait, s'il était décommenté) du browser sniffing. Le browser sniffing, c'est mal, tout bêtement parce que ce n'est pas fiable. Et aussi parce que ça gère en général très mal l'arrivée sur le marché de nouveaux navigateurs (Chrome, les navigateurs mobiles...), ou de nouvelles versions des navigateurs visés. À bannir.

Si on a vraiment besoin d'appliquer des styles différents à certains navigateurs:
- éviter de le faire autant que possible;
- une fois qu'on aura évité de le faire autant que possible, il est probable que les seuls problèmes qui restent concernent IE6, éventuellement IE7;
- utiliser les commentaires conditionnels en HTML pour viser ces versions d'IE, afin de leur faire télécharger une feuille de correctifs CSS.

Tu peux te renseigner sur les commentaires conditionnels en lisant l'article à ce sujet ici même sur Alsacréations.

Et on finira en rappelant que les hacks CSS c'est mal. Smiley smile

fvsch

2 Nov 2009 à 22:40

En passant, cette collection de fontes est une horreur absolue (pour le dire pas gentiment):

font-family: Verdana, "Arial", "Times New Roman", serif;

Un peu de lecture pour améliorer ça: Quelles polices de caractères (fontes) utiliser sur le Web ?

Il y a beaucoup à apprendre, mais il y a beaucoup de ressources disponibles pour le faire. La vie est belle et tout.

~~supprimé~~

2 Nov 2009 à 23:17

Super l'accueil. J'ai meme pas remarqué que j'ai pas mis le doctype Smiley lol

Le code PHP qui définit les CSS est en commentaires.. ok.. donc il est pas activé (je pense que tu devrait savoir).

Sujet clos

Questions générales et questions de débutants

Probleme de "container" pour deux div l'un à côté de l'aut