28173 sujets

CSS et mise en forme, CSS3

Aide alignement deux div et image

Bonjour à tous !

Voilà je débute en CSS et je viens de créer ma première page entièrement cssisée lol.
Je rencontre des problème lorsque je dois mettre deux div l'une à côté de l'autre. J'utilise comme dans le tutoriel la fonction float left mais après j'ai des problèmes d'alignement interne et de dimenssionnement.

Ici mon premier problème ce trouve dans la DIV "main", J'ai créé deux div conteneur "main_left" et "main_right". Jusque là tout va bien les deux div s'alignent correctement.
Mais lorsque je veux mettre une image en bas à droite de ma div "main_right", impossible ! Smiley decu Smiley decu

Deuxième problème assez étrange:
J'utilise la même feuille de style pour l'impression et l'affichage.
Ma div "box_contact" est bien alignée à 15px du bas au centre pour l'impression alors que pour l'affichage elle est décalée d'envrion 10px trop haute.

http://img63.imageshack.us/img63/6097/boxcontactcc3.png 


<body>
<div id="conteneur">
	<div id="header">
		<div id="logo"><img height="50" src="../../<?php echo $user_image; ?>"/></div>
		<div id="title"><?php echo $title; ?></div>
	</div>
	
	<div id="black_line"></div>
	
	<div id="main">
		<div id="main_left">
			<div id="product"><img height="550" width="388" src="../../<?php echo $prod_image1; ?>" alt="product" /></div>
		</div>
		<div id="main_right">
			<div id="description"><span class="title_underline"><?php echo $prod_name1; ?></span><br /><?php echo $prod_description1; ?></div>
			<div id="advantages"><span class="title"><?php echo $title_custom; ?></span><br /><?php echo $custom; ?></div>
			<div id="exel_logo"><img src="../../images/Exel_row_logo.gif" alt="Exel" /></div>			
		</div>
	</div>
	
	<div id="bottom">
		<div id="left">
			<div id="photo"><img height="300" width="174" src="../../<?php echo $prod_image2; ?>" alt="" /></div>
			<div id="text">
				<div id="design"><?php echo $prod_name2; ?></div>
				<div id="descrip"><?php echo $prod_description2; ?></div>
			</div>
		</div>
		<div id="right">
			<div id="photo"><img height="300" width="174" src="../../<?php echo $prod_image3; ?>" alt="" /></div>
			<div id="text">
				<div id="design"><?php echo $prod_name3; ?></div>
				<div id="descrip"><?php echo $prod_description3; ?></div>
			</div>
		</div>
	</div>
	
	<div id="box_contact">
		<div id="contact"><?php echo "Company: ".$campany_name."<br>Phone: ".$phone; ?></div>
	</div>
		
	<div id="black_line"></div>
	
	<div id="footer_bar"></div>
</div>
</body>


Ma feuille de style :

body
{
	margin:0;
	border:0;
}
div#conteneur
{
	position: relative; /* on positionne le conteneur */
    margin-left: auto;
    margin-right: auto;
    width: 210mm;
	height:270mm;
    text-align: left;
}
div#black_line
{
	height:5px;
	background-color:#000000;
}
div#header
{
	height: 70px ;
	background:#CC0000;
}
div#logo
{
	height:50px;
	width:140px;
	margin-left:25px;
	margin-top:15px;
	float: left;
}
div#title
{
	margin-top:20px;
	margin-left:150px;
	float: left;
	font-size:28px;
	font-weight:bold;
	color:#FFFFFF;
}
div#main
{
	height:600px;
	background-color:#FFFFFF;
}
div#product
{
	padding:10px;
	float:left;
}
div#main_left
{
	float:left;
	width:390px;
}
div#main_right
{
	float:left;
	margin-left:20px;
	width:310px;;
}
div#description
{
	margin-left:50px;
	margin-top:30px;
	color:#000000;
}
div#advantages
{
	margin-left:50px;
	margin-top:30px;
	color:#000000;
}
div#exel_logo
{
	height:179px;
	width:250px;
	margin-top:50px;
	margin-left:50px;
}
div#bottom
{
	background-color:#CCCCCC;
	height:350px;
}
div#left
{
	float:left;
	padding:10px;
}
div#photo
{
	float:left;
	background-color:#CCCCCC;
}
div#text
{
	float:left;
	margin-top:20px;
	width:190px;
}
div#design
{
	color:#000000;
	font-size:18px;
	font-weight:bold;
}
div#descrip
{
	color:#000000;
	font-size:16px;
}
div#right
{
	float:left;
	margin-left:10px;
	padding:10px;
}
div#box_contact
{
	position: absolute;
	width:210mm;
    bottom: 15px;
	text-align:center;
}
div#contact
{
	width:220px;
	margin-left:auto;
	margin-right:auto;
	border:1px solid black;
	text-align:center;
	color:#000000;
	background-color:#999999;
	font-size:16px;
	padding:2px;
}

div#footer_bar
{
	height:10px;
	background:#CC0000;
}
.title
{
	color:#000000;
	font-size:24px;
	font-weight:bold;
}
.title_underline
{
	color:#000000;
	font-size:24px;
	font-weight:bold;
	text-decoration:underline;
}

Modifié par xender (11 May 2007 - 20:16)
Salut,
désolé mais je n'ai pas lu ton code, celui-ci étant pour l'instant trop imposant.

Par contre, ce que j'ai pu remarquer au premier coup d'oeil et ce qui m'a choqué, c'est : que de div !

C'est bien de vouloir se mettre au CSS, mais si c'est pour mettre autant de div que de cellules d'un tableau, ça n'a aucun interêt.

A vrai dire, je n'ai jamais vu autant de div que sur ta page.

De plus, je vois à la fin de ton code des div comme ceci :

<div id="footer_bar"></div>

Essaye d'éviter, fais plutôt ça :

<div id="footer_bar">
&nbsp;
</div>

Si tu pouvais nous mettre ta page en ligne se serait plus simple, histoire d'avoir un support visuel.
Sujet clos
Aller à