28173 sujets

CSS et mise en forme, CSS3

[Resolu] Aligner 2 blocs consécutifs dans 1 header

Bonjour,

je débute en CSS, et je ne maîtrise pas trop la propriété float et les marges.
Quelqu'un pourrait-t-il m'expliquer, svp.
Voir image jointe.

upload/13183-css.jpg


Le menu "services, produits, actualités" correspont à ul#header
Le logo à h1#header
et le texte à h2#header

Voici mon code

div#header{
	height: 130px;
	background: url(../images/monimage.jpg) no-repeat left top;
}

h1#header{ 
	text-align:right;
	margin-right:15px;
}
			
h1#header a{
	width: 395px;
	height: 100px;
	display:inline;
	background: url(../images/logo_groupe_ibt.jpg) no-repeat;
	position:relative;
	top:0px;
}
			
h2#header {
	text-align:right;
	width: 770px ;
	line-height: 30px ;
	font-size: 1.0em ;
	font-weight: bold ;
	letter-spacing: 2px ;
	color: #999 ;
	display: block ;
	text-decoration: none ;
}


D'avance merci
Modifié par selinav (13 Jul 2007 - 08:30)
Bonjour

En l'absence de code Xhtml je vois deux solutions.

La plus probable :
#header h1 { ... }

Tu dois affecter dans la CSS les valeurs de float au <h1> compris dans #header...

L'autre :
div id="header"
h1 id="header"
h2 id="header"

qui suppose que tu as plusieurs id de même nom, ce qui n'est pas possible.
voici le code html


<body>
	<div id="conteneur">		
		<div id="header">
		<ul id="header">
			<li><a href="1.htm">Services</a></li>
			<li><a href="2.htm">Produits</a></li>
			<li><a href="3.htm">Actualité</a></li>
		</ul>
		
		<h1 id="header"><a href="../etape1.html" title="logo"></a></h1>
		<h2 id=header>CONSTRUCTEUR 100% FRAN&Ccedil;AIS D'EQUIPEMENTS POUR LA BOULANGERIE-P&Acirc;TISSERIE</h2>
		</div>
		<ul id="menu">
			<li><a href="../etape1.html">English</a></li>
			<li><a href="../etape2.html">Le groupe </a></li>
			<li><a href="../etape3.html">Nos m&eacute;tiers </a></li>
			<li><a href="../etape4.html">Nos conseils </a></li>
			<li><a href="../etape5.html">Plan du site </a></li>
			<li><a href="../etape5.html">Contact </a></li>
			<li><form action="" method="get">Recherche<input name="recherche" type="text" /></form></li>
		</ul>
		
		<div id="contenu">
			<h2>Titre de page, d'article...</h2>
Bonjour,

Comme te l'as déjà fait remarquer Arsène, tu as un problème d'identifiants multiples.
A ce sujet lire cet article : Quelle est la différence entre une classe et un id ?

Quant à ton problème de flottant, tu dois simplement faire floatter ton menu au moyen d'un float:left

Mais avant toutes chose, je te conseillerais de mettre un peu d'ordre dans ton code,
car il ne peut qu'être source de problèmes en l'état actuel ... Smiley cligne
selinav a écrit :
je débute en CSS, et je ne maîtrise pas trop la propriété float et les marges.
Quelqu'un pourrait-t-il m'expliquer, svp.

J'imagine que quelqu'un pourrait passer un quart d'heure à t'expliquer le fonctionnement du positionnement CSS avec la propriété float, mais le plus simple ne serait-il pas de lire les explications de ceux qui ont déjà pris le temps d'en donner?

Surtout que les explications en question sont plus complètes. Smiley cligne

Comment positionner les éléments en CSS ?
Initiation au positionnement CSS : 2.position float
je ne comprends Smiley bawling pas quand je reprends les exemples je n'arrive pas à obtenir ce que je veux par exemple un conteneur avec 3 blocs consécutifs.
Pouvez-vous m'éclairer sur les propriétés float et display :

voici mon code 

div#conteneur {
	background-color: blue;
	height: 100px;
	width: 100px;
	padding-top: 40px;
	display:block;
	}

.bloc1 {
	background-color: blue;height: 50px;
	width: 100px;
	float: left;
	}
	
.bloc2 {
	background-color: green;height: 50px;
	width: 100px;
	float: left;
	margin-left: 20px;}

.bloc3 {
	background-color: red;height: 50px;width: 100px;
	float: left;
	margin-left: 20px;}


et html


<body>
<div id="conteneur">
<div class="bloc1">bla bla bla</div>
<div class="bloc2">bli bli bli</div>
<div class="bloc3">blu blu blu</div>
</div>
</body>


D'avance merci.

J'ai bien lu l'article sur la différence entre class et id.
Peut-on mêler classe et id?
<div id="mon id" class="maclasse">...</div>?
Salut,

Oui tu peux mettre id et class dans la meme div.

Sinon tu parles de consecutif mais dans le sens horizontal ou vertical ?
consécutif de manière horizontale

j'obtiens ça
upload/13183-css2.jpg" alt="upload/13183-css2.jpgupload/13183-css2.jpg" />

au lieu d'un rectangle jaune avec les 3 carrés dessus.
Le texte apparraît sur le fond.
autant pour moi, je viens d'y arriver mais ça marchait pas car mon conteneur était pas assez large, la honte!

merci à tous
selinav a écrit :
autant pour moi, je viens d'y arriver mais ça marchait pas car mon conteneur était pas assez large, la honte!

merci à tous

Ton problèmes est donc [Résolu] Smiley ravi
Sujet clos
Aller à