28220 sujets

CSS et mise en forme, CSS3

Problème de compréhension des bases de positionnement

Bonjour,

Voulons remplacer mon site construit sur une base de tableau par du css, j'ai lu (pas mal) les tutoriaux, les posts sur ce forum, etc, ...

En me lançant dans l'opération, je me suis confronté rapidement à un problème de positionnement.

Concrêtement, on peut dire que le site se décompose en 3 parties
- Un header lui même composé
-> d'un logo et d'un cadre "recherche" sur la même ligne
-> d'une barre de navigation en dessous ces deux blocs
-> d'un bloc "Pub" sous la barre de navigation

- Un contenant de 2 colonnes
• dans la colonne de gauche, 3 blocs (avec des styles distincts) se suivent de façon verticale
-> sous ces 3 blocs, 2 blocs adjacents
• dans la colonne de droit, 4 blocs (avec des styles disctincts) se suivent verticalement...

- Pour finir la barre de navigation du bas

Si j'ai bien compris le tout doit être placé dans un conteneur général qui peut par exemple définir le style de la police, la taille de la page, etc...

J'ai donc opéré de la sorte en créant un conteneur général, un conteneur "head", un conteneur central incluant deux conteneurs colonnes et pied (lui, il est facile à mettre en place)... en me basant sur un gabarit du site.

Le 1er problème rencontré :

- Dans le conteneur "head", je n'arrive à aligner le logo avec mon formulaire et faire suivre la barre de navigation puis l'espace pub.


body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}
#header {
padding: 5px;
background-color: ffffff;
}
# head1 {
margin-right: 300px;
float:left;
}
# head2 {
float: left;
margin-top: 15px;
margin-left: 10px;
}
#conteneur {
position: absolute;
width: 800px;
background-color:#CCCCFF;
}


Où est mon erreur ?

Merci pour votre précieuse aide.
Les deux blocs head1 et head2 sont contenus dans le Header, c'est ça ?

Si tu les mets l'un après l'autre en float : left, ils se mettront à la suite les uns des autres, comme expliqué ici
ça fonctionne effectivement quand les blocs ne sont pas dans un conteneur.

Comme je souhaite ma barre de navigation et l'espace pub dans le "header", j'ai pris pour partie de créer un conteneur "header" et là : rien ne va plus...
bon
j'ai finallement résolu le problème en éliminant le conteneur head principal... Tout fonctionne simplement sans rajouter des lignes en plus...

Par contre, je me retrouve maintenant toujours avec le même problème qu'hier.

Dans mes 2 colonnes de contenu, j'ai différent blocs avec des styles différents.

En essayant d'appliquer un style à un bloc ce dernier n'apparaît pas.

une idée pour m'aider à comprendre et à avancer ? (je n'ai vraiment envi de retourner vers une solution à base de tableau)

petite précision, le flux d'information est générée par des boucles SPIP, excepté un sondage en php.


body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}
/* HEADER */
.head1 {
height: 40px;
width: 500px;
float: left;
}
.head2 {
height: 54px;
width: 200px;
float: left;
margin-left: 10px;
padding-top: 15px;
}

/* Navigation */
.barrenav {
clear: both;
width: 800px;
left:0;
z-index: 2;
}

/* Pub haut */
.pubhaute {
background-image: url('http://www.phonethik.com/head1.gif');
width: 800px;
height:100px;
border: 1px solid #C0C0C0;
z-index: 1;
}

.logo {
margin-top: 3px;
border: 0;
}

#centre {
position: absolute;
left: 505px;
top: 200px;
width: 290px;
background-color:#DCDCDC;
margin: 5px;
}
#gauche {
position: absolute;
left: 0px;
top: 200px;
width: 495px;
margin: 10px;
border-right: 1px solid #C0C0C0;
}
/* Sondage */
. sondage {
border: 1px solid #C0C0C0;
background-color: yellow;
}


Pour la partie HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitionam//EN" "http://www.w3.org/TR/html/strict/dtd">

	<head>
<title>PhonethiK</title>
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<!-- Ceci est la feuille de style par defaut pour les types internes a SPIP -->
<link rel="stylesheet" href="spip_style.css" type="text/css" />

<!-- Les feuilles de style specifiques aux presents squelettes -->
<link rel="stylesheet" href="http://www.phonethik.com/typographie2.css" type="text/css" />

<!-- media="..." permet de ne pas utiliser ce style sous Netscape 4 (sinon plantage) -->
<link rel="stylesheet" href="http://www.phonethik.com/habillage2.css" type="text/css" media="print, projection, screen, tv" />

<!-- Lien vers le backend pour navigateurs eclaires -->
<link rel="alternate" type="application/rss+xml" title="<:syndiquer_site:>" href="backend.php3" />

</head>

<SCRIPT language="JavaScript" src="http://www.phonethik.com/fx_menu.js"></SCRIPT>
<SCRIPT language="JavaScript" src="http://www.phonethik.com/menu_1.js"></SCRIPT>
<SCRIPT language="JavaScript" src="http://www.phonethik.com/menu_2.js"></SCRIPT>
<link rel="stylesheet" href="http://www.phonethik.com/menu_1.css">

<body>

<!-- Header-->
<div class="head1"> <a href="http://www.phonethik.com"><img src="http://www.phonethik.com/logo1.gif" class="logo1" alt="logo1" /></a></div>
<div class="head2">
<form action="http://phonethik.com/recherche.php3" method="get">
<input type="text" name="recherche" size="15" maxlength="50" value="Rechercher" æ  onfocus="value=' '"><input type="image" src="http://www.phonethik.com/search.gif" alt="" height="15" width="15" border="0">
</form>
[(#DATE|nom_jour)] [(#DATE|affdate)]</div>
<!-- Menu de navigation -->
<div class="barrenav">
<script>
generationMenu(800,20,'menu_1',150); 
</script>
</div>

<!-- Pub haut -->
<div class="pubhaute" align="center">
<img src="http://www.phonethik.com/pub2.gif" class="logo" alt="logo">
<script language="Javascript" type="text/javascript" src="http://www.phonethik.com/cgi-bin/pg-bannierespro.cgi?type=js&pool=banniere">
</script>
<noscript>
<a href="http://www.phonethik.com/cgi-bin/pg-bannierespro.cgi?type=clic&pool=banniere" target="_blank"><img src="http://www.phonethik.com/cgi-bin/pg-bannierespro.cgi?type=img&pool=banniere" border="0"></a>
</noscript>
</div>

<div id="gauche">
<BOUCLE_articles(ARTICLES){id_rubrique=1}{par date}{inverse}{0,1}>
[(#LOGO_ARTICLE_RUBRIQUE|left|reduire_image{100,100})]
<div class="surtitre">#SURTITRE</div>
<div class="titre1"><a href="#URL_ARTICLE">#TITRE</a></div>
<div class="chapo1">#CHAPO</div>
</BOUCLE_articles>
<br>
<BOUCLE_titres(ARTICLES){id_rubrique=1}{par date}{inverse}{1,10}>
<div class="titre2">
			<a href="#URL_ARTICLE">&#149; #TITRE</a></div>
</BOUCLE_titres><br>

<!-- sondage -->
<?php require './sympoll/booth.php'; 
$var=newest_booth(); ?>
<div class="sondage">
<?php echo $var; ?>
</div>
		
	  </div>
	  
	  <div id="centre">
  	  partie centrale qui &quot;pousse&quot; les colonnes vers le bas.<br />
  	  partie avec du contenu occupant le reste de la largeur<br />

  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />

  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	</div>

	  
</div>


</div>

</body>
</html>


Merci pour votre aide...
Sujet clos
Aller à