Probleme de mise en page

David -  
 David -
Bonjour à tous,

Je suis en train de concevoir un site internet en vue de la création de mon entreprise et j'ai un défaut sur la mise en page que je n'arrive pas à fixer.

Je n'arrive pas à cadrer l'image juste au dessus de ma bannière pour l'aligner au reste.
Il doit y avoir un défaut quelque part et pas moyen de le rectifier. Ça fait 2 jours que bute dessus.

Je suis ouvert à toute remarque concernant le code et à la mise en page car je débute sur la création de site.

Merci d'avance pour vos réponses.

Voici l'adresse du site : http://autonhomesolution.olympe.in/

Voici le code HTML de la page :

<!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" />
<title>AUTOnHOME solution</title>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/menu.css" rel="stylesheet" type="text/css" />
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top"><table width="950" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="top"><table width="950" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="top"><img src="images/banniere_haut.gif" alt="" width="950" height="23" /></td>
</tr>
<tr>
<td align="left" valign="top"><table width="950" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="6" align="left" valign="top" class="body_left_bg"></td>
<td align="left" valign="top" class="header_image_box"><table width="928" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="top"> <img src="images/banniere.jpg" width="928" height="180" /></td>
</tr>

</table></td>
<td width="6" align="left" valign="top" class="body_right_bg"></td>
</tr>
<tr>
<td align="left" valign="top" class="body_left_bg"></td>
<td align="left" valign="top" class="menu_bg"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>

<ul id="menu">

<li><a href="#">Accueil</a></li>
<li><a href="#">Présentation</a></li>
<li>
<a href="#">Accessibilité PMR</a>
<ul>
<li><a href="#">Particuliers</a></li>
<li><a href="#">Professionnels</a></li>
<li><a href="#">Collectivités</a></li>
</ul>
</li>
<li>
<a href="#">Domotique</a>
<ul>
<li><a href="#">Lien 1</a></li>
<li><a href="#">Lien 2</a></li>
</ul>
</li>
<li>
<a href="#">Chauffage</a>
<ul>
<li><a href="#">Lien 1</a></li>
<li><a href="#">Lien 2</a></li>
</ul>
</li>
<li>
<a href="#">Infos utiles</a>
<ul>
<li><a href="#">Lien 1</a></li>
<li><a href="#">Lien 2</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>

</ul>

</table></td>
<td align="left" valign="top" class="body_right_bg"></td>
</tr>
</table></td>
</tr>

</table></td>
</tr>
<tr>
<td align="left" valign="top"><table width="950" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="8" align="left" valign="top" class="body_left_bg"></td>
<td align="left" valign="top" class="body_text_box">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p></td>
<td width="8" align="left" valign="top" class="body_right_bg"></td>
</tr>
</table></td>
</tr>
<tr>
<td align="left" valign="top"><table width="950" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="6" align="left" valign="top"><img src="images/footer_left.gif" alt="" width="6" height="25" /></td>
<td align="left" valign="top"><img src="images/footer_bg.gif" alt="" width="938" height="33" /></td>
<td width="6" align="left" valign="top"><img src="images/footer_right.gif" alt="" width="6" height="25" /></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>

</body>
</html>


A voir également:

6 réponses

Réponse 1 / 6
astuces72 Messages postés 8349 Date d'inscription   Statut Membre Dernière intervention   1 641
 
bonjour,

alors je t'arrête avant d'allez trop loin, un site en tableau ça n'existe plus depuis pas mal de temps :)

penche toi sur le css et tu verras que tu galéreras beaucoup moins.

ce n'est que mon avis personnel !
3
Réponse 2 / 6
astuces72 Messages postés 8349 Date d'inscription   Statut Membre Dernière intervention   1 641
 
re 

<style type="text/css">
body {
	margin:0px auto;
	padding:0px;
	background-color:#A1CF2B;
}

#banniere{
	margin: 0 auto;
	width: 950px;
}
#banniere_haut {
	float: left;
	height: 23px;
	width: 950px;
	background-image: url(../images/banniere_haut.jpg);
}
#bord_gauche {
	float: left;
	height: 192px;
	width: 8px;
	background-image: url(../images/bord_gauche.jpg);
}
#banniere_logo {
	float: left;
	height: 192px;
	width: 934px;
	background-image: url(../images/banniere_logo.jpg);
}
#bord_droite {
	float: left;
	height: 192px;
	margin-bottom: 0;
	width: 8px;
	background-image: url(../images/bord_droite.jpg);
}
</style>


<div id="banniere">
<div id="banniere_haut"></div>
<div id="bord_gauche"></div>
<div id="banniere_logo"></div>
<div id="bord_droite"></div>
</div>
1
Réponse 3 / 6
astuces72 Messages postés 8349 Date d'inscription   Statut Membre Dernière intervention   1 641
 
<style type="text/css">
body {
margin:0px auto;
padding:0px;
background-color:#A1CF2B;
}

#banniere{
margin: 0 auto;
width: 950px;
}
#banniere_haut {
float: left;
height: 23px;
width: 950px;
background-image: url(../images/banniere_haut.png);
}
#bord_gauche {
float: left;
height: 192px;
width: 8px;
background-image: url(../images/bord_gauche.png);
}
#banniere_logo {
float: left;
height: 192px;
width: 934px;
background-image: url(../images/banniere_logo.png);
}
#bord_droite {
float: left;
height: 192px;
margin-bottom: 0;
width: 8px;
background-image: url(../images/bord_droite.png);
}
</style> 
<div id="banniere">
<div id="banniere_haut"></div>
<div id="bord_gauche"></div>
<div id="banniere_logo"></div>
<div id="bord_droite"></div>
</div>
1
Réponse 4 / 6
David
 
Ton code est niquel il m'a bien permis de comprendre comment ça marche.
Tout s'emboite correctement avec un width de 681px car les images sont prévu pour cette largeur à la base.
Il va falloir que je redimensionne mes images car je pensais que l'image prendrait la largeur du div comme si je faisais en html : <img src='mon_image.jpg' width='950' /> mais ce n'est pas le cas.

Sinon j'ai une question par rapport aux bords arrondis et la fonction border radius.
Pour mon menu déroulant j'utilise cette fonction pour que les bords du menu qui se déroulent soient arrondis ( jusque la ça marche) et lorsque je survole un sous menu, le fond change de couleur avec les bords arrondis en haut pour le premier et en bas pour le dernier de la liste.
Ça marche lorsque je test sur dreamweaver mais pas sur firefox v17 ni IE9

Voici mon CSS pour les arrondi des sous listes au survol : 

#menu ul li:first-child > a 
{
		-webkit-border-top-left-radius: 9px;
		-moz-border-radius-topleft: 9px;
		-webkit-border-top-right-radius: 9px;
		-moz-border-radius-topright: 9px;
}
#menu ul li:last-child > a 
{
		-webkit-border-bottom-left-radius: 9px;
		-moz-border-radius-bottomleft: 9px;
		-webkit-border-bottom-right-radius: 9px;
		-moz-border-radius-bottomright: 9px;
}
1

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 6
David
 
Merci pour cette réponse. Je suis en train de me pencher sur le css mais je n'arrive pas à mettre en forme la bannière.
Je m'explique : ma bannière est composée de 4 images, une image un haut avec les bords arrondi, une image centrale entourée de 2 images qui servent de bord gauche et droite.

J'aimerai mettre les images "bord_gauche", "banniere" et "bord_droite" sur la même ligne juste en dessous de l'image "banniere_haut". et tout cela centré sur la page.

Voila ce que j'ai fait :

CODE HTML : 
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
	<link rel="stylesheet" href="css/style.css" />
	<title>AUTO n HOME solution</title>
</head>

<body>
	<header>
			<div id="banniere_haut"></div>
            <div class="banniere">
            	<div id="bord_gauche"></div>
                <div id="banniere_logo"></div>
                <div id="bord_droite"></div>
            </div>
	</header>     
</body>

</html>


CODE CSS : 

body
{
	margin:0px auto;
	padding:0px;
	background-color:#A1CF2B;
}



div#banniere_haut
{
	background-image: url(../images/banniere_haut.png);
	background-repeat: no-repeat;
  	width: 950px;
  	height: 23px;
  	padding: 0;
  	margin: auto;
}

div#banniere
{
	width: 950px;		
  	background-repeat: no-repeat;	
	margin: auto;
}

div#banniere_logo
{
	background-image: url(../images/banniere.png);
	background-repeat: no-repeat;
  	width: 928px;
  	height: 192px;
  	margin: auto;
}



div#bord_gauche
{
	background-image:url(../images/bord_gauche.png) left top repeat-y;
	width: 8px;	
	float: left;
}
div#bord_droite
{
	background-image:url(../images/bord_droite.png) left top repeat-y;
	width: 8px;
	float: right;
}
0
Réponse 6 / 6
David
 
J'ai de nouveau un soucis par rapport à mes bords.
En effet, j'aimerai que mes images de bords gauche et droite se répètent
sur toute la hauteur du bloc où elles se situent.
Cependant, ce bloc n'a pas de hauteur défini car il va s'agrandir en fonction
du texte qu'il y a dedans et c'est ce qui pose problème.

Voici ce que j'ai fait :

Code HTML : 

<div id="box">
    	<div id="bord_gauche"></div>
        <div id="body_text_box"></div>
        <div id="bord_droite"></div>
</div>


Code CSS : 

#bord_gauche
{
	float: left;
	width: 6px;
	position: absolute;
	background-image: url(../images/bord_gauche.png); 
	background-repeat: repeat-y;

}

#bord_droite
{
	float: left;
	width: 6px;
	margin-bottom: 0;
	position: absolute;
	background-image: url(../images/bord_droite.png); 
	background-repeat: repeat-y;
}

#box
{
	width: 950px;	
	margin: auto;	
}

#body_text_box
{
	padding:35px 30px 15px 30px;
	width: 878px;
	height: 642px;
	background-color:#FFFFFF;
	color: #5B5A5A;
	float: left;
}
0

Discussions similaires

[référencement] Ne pas être référencé
kij_82 -
Searaphina -

10 réponses