Sujet Précédent Sujet Suivant

Problème de positionnement CSS

Fermé
sumator Messages postés 4 Date d'inscription dimanche 3 juillet 2011 Statut Membre Dernière intervention 21 août 2014 - 3 juin 2013 à 11:02
inspiring Messages postés 1813 Date d'inscription vendredi 28 janvier 2011 Statut Membre Dernière intervention 31 décembre 2018 - 3 juin 2013 à 18:15
Bonjour à tous,

J'ai un petit soucis de positionnement. En effet, je suis en train de coder une petite page toute simple, mais je me retrouve avec un soucis de positionnement sur une Div. Mon but étant d'avoir une page avec trois div positionné cote à cote. Voici mon code: 

<!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=UTF-8" />
<title>Document sans nom</title>

<style type="text/css">

#fond {
	visibility:visible;
	width:980px;
	height:600px;
	background-color:#FFFFFF;
	margin-right: auto;
	margin-left: auto;
	margin-top:100px;
}

#menu {
	visibility:visible;
	position:relative;
	width:180px;
	height:100%;
	z-index:1;
	font-family:"Helvetica Neue", "Helvetica Neue Light";
	font-size:10px;
	font-style:italic;
	float:left;
}

#corp {
	visibility:visible;
	position:relative;
	width:550px;
	height:600px;
	z-index:2;
	font-family:"Helvetica Neue", "Helvetica Neue Light";
	font-size:10px;
	font-style:italic;
	overflow:auto;
	top:0px;
	left:20px;
}

#logo {
	visibility:visible;
	position:relative;
	width:180px;
	height:40px;
	top:0px;
	left:0px;
}

a:link {
	color: #000000;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #000000;
}
a:hover {
	text-decoration: none;
	color: #999999;
}
a:active {
	text-decoration: none;
	color: #000000;
}

</style>

</head>

<body>
	<div id="fond">
    	<div id="menu" align="left" >
       	  <div id="logo"><a href="index.html"><img src="images/Logo.jpg" width="180" height="40" /></a></div>
            <table width="180" border="0">
            	<tr>
       			<td>&nbsp;</td>
			    </tr>
                <tr>
       			<td>&nbsp;</td>
			    </tr>
                <tr>
       			<td>&nbsp;</td>
			    </tr>
                <tr>
       			<td>&nbsp;</td>
			    </tr>
                <tr>
       			<td>&nbsp;</td>
			    </tr>
                <tr>
       			<td><a href="webpages/neolithic.html">NEOLITHIC</a></td>
			    </tr>
                <tr>
       			<td><a href="webpages/the_gardeners_choice_chair.html">THE GARDENER'S CHOICE CHAIR</a></td>
			    </tr>
                <tr>
       			<td><a href="webpages/brass_ensemble.html">BRASS ENSEMBLE</a></td>
			    </tr>
                <tr>
       			<td><a href="webpages/precious_chair.html">PRECIOUS CHAIR</a></td>
			    </tr>
                <tr>
       			<td><a href="webpages/scacciapensieri.html">SCACCIAPENSIERI</a></td>
			    </tr>
                <tr>
       			<td><a href="webpages/fake_castiglioni.html">FAKE CASTIGLIONI</a></td>
			    </tr>
                <tr>
       			<td><a href="webpages/glass type.html">GLASS TYPE</a></td>
			    </tr>
                <tr>
       			<td><a href="webpages/tensor voting.html">TENSOR VOTING</a></td>
			    </tr>
                <tr>
       			<td><a href="webpages/tudo a mao.html">TUDO A MAO</a></td>
			    </tr>
                <tr>
       			<td><a href="webpages/zen tools.html">ZEN TOOLS</a></td>
			    </tr>
                <tr>
       			<td><a href="webpages/vallemaggia.html">VALLEMAGGIA (research project)</a></td>
			    </tr>
                <tr>
       			<td>&nbsp;</td>
			    </tr>
                <tr>
       			<td>&nbsp;</td>
			    </tr>
                <tr>
       			<td>&nbsp;</td>
			    </tr>
                <tr>
       			<td>&nbsp;</td>
			    </tr>
                <tr>
       			<td>&nbsp;</td>
			    </tr>
                <tr>
       			<td>&nbsp;</td>
			    </tr><tr>
       			<td>&nbsp;</td>
			    </tr>
                <tr>
       			<td>&nbsp;</td>
			    </tr>
                <tr>
       			<td>&nbsp;</td>
			    </tr>
                <tr>
       			<td>&nbsp;</td>
			    </tr>
                <tr>
       			<td>&nbsp;</td>
			    </tr>
                <tr>
       			<td>&nbsp;</td>
			    </tr>
                <tr>
       			<td>&nbsp;</td>
			    </tr>
                <tr>
       			<td>&nbsp;</td>
			    </tr>
                <tr>
       			<td height="5">&nbsp;</td>
			    </tr>
                <tr>
       			<td>Giulio Parini<br />
				7, rue E. Racine, 1207 Genève<br />
				Switzerland</td>
			    </tr>
                <td><a href="mailto:giuliomoore@sunrise,ch">giuliomoore@sunrise.ch</a><br />
				0041.79.274.44.12</td>
			    </tr>
            </table>
        	</div>
       </div>
      <div id="corp">
      sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjd sdhskjd sdhskjdsdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjd sdhskjd sdhskjdsdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjd sdhskjd sdhskjdsdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjd sdhskjd sdhskjdsdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjd sdhskjd sdhskjdsdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjd sdhskjd sdhskjdsdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjd sdhskjd sdhskjdsdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjd sdhskjd sdhskjdsdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjd sdhskjd sdhskjdsdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjd sdhskjd sdhskjdsdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjd sdhskjd sdhskjdsdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjd sdhskjd sdhskjdsdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjd sdhskjd sdhskjdsdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjd sdhskjd sdhskjdsdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjd sdhskjd sdhskjdsdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjd sdhskjd sdhskjdsdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjd sdhskjd sdhskjdsdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjd sdhskjd sdhskjdsdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjd sdhskjd sdhskjdsdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjd sdhskjd sdhskjdsdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjd sdhskjd sdhskjdsdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjd sdhskjd sdhskjdsdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjd sdhskjd sdhskjdsdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjd sdhskjd sdhskjdsdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjd sdhskjd sdhskjdsdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjd sdhskjd sdhskjdsdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjd sdhskjd sdhskjdsdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjd sdhskjd sdhskjdsdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjd sdhskjd sdhskjdsdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjd sdhskjd sdhskjdsdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjd sdhskjd sdhskjdsdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjd sdhskjd sdhskjdsdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjd sdhskjd sdhskjdsdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjd sdhskjd sdhskjdsdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjd sdhskjd sdhskjdsdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjd sdhskjd sdhskjdsdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjd sdhskjd sdhskjdsdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjd sdhskjd sdhskjdsdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjd sdhskjd sdhskjdsdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjd sdhskjd sdhskjdsdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjd sdhskjd sdhskjdsdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjd sdhskjd sdhskjdsdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjd sdhskjd sdhskjdsdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjd sdhskjd sdhskjdsdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjd sdhskjd sdhskjdsdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjd sdhskjd sdhskjdsdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjd sdhskjd sdhskjdsdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjd sdhskjd sdhskjdsdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjd sdhskjd sdhskjdsdhskjdsdhskjdsdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjd sdhskjdsdhskjd sdhskjdsdhskjdsdhskjd 
      </div>
    </div>
 </body>
</html>


Seulement, voici le résultat lorsque je l'ouvre sur mon navigateur:

http://imageshack.com/f/nqcapturedecran20130603a1p

2 réponses

Réponse 1 / 2
Profil bloqué
3 juin 2013 à 18:09
Salut,

Je n'ai pas compris ce que tu souhaites (les tableaux ne s'utilisent plus vraiment en css pour faire le design), mais globalement, on utilise des div auxquelles on mets un width et un position:relative; et un float:left par exemple.
0
Réponse 2 / 2
inspiring Messages postés 1813 Date d'inscription vendredi 28 janvier 2011 Statut Membre Dernière intervention 31 décembre 2018 265
3 juin 2013 à 18:15
A la base, il te faut un conteneur qui englobe tes 3 div et ensuite positionner chacune de tes div avec une propriété float:left
faire attention au parametre tel que le width et l'overflow
0

Discussions similaires

[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses
trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses
tests du greta
yass -
yassir -

9 réponses
le test d'entrée pour le cesi en alternance
sab08600 -
sab08600 -

2 réponses
HTML - définir taille bouton
Diva -
Utilisateur anonyme -

14 réponses