Discussion :

[pierrot10]

Bonjour
Voici mon code

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
  <div id="row1">
    <div id="vitrine_splash"> <a href="http://www.dom.fr"><img src="img/img.jpg" alt="Home" height="200" width="375" border="0"/></a> </div>
    <div id="slogan">Slogan</div>
    <div id="title-page">Titre page</div>
  </div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
#row1{position:relative; background-color:#993300; height:220px;}
#vitrine_splash{
	padding-top: 20px;
	width: 375px;
	float: left;
	margin: 0px;
	position: relative;
}
#slogan{padding-top:20px;}
#title-page{position:relative; bottom:0px;}

Comment modifier mon #title-page{}, pour qu'il soit toujour "coller" au border-bottom du <div id="row1"> et que les l'autre <div id="slogan"> soit toujours en haut du <div id="row1">

M'avez vous compris? J'arrive pas coller le <div="title-page"> en bas du <div id="row1"> meme avec un bottom:0px.

Comment puis resoudre mon probleme?

Merci

[Bisûnûrs]

Change ton nom d'identifiant title-page en title_page dans ton code HTML et dans ton code CSS.

[pierrot10]

Ben non, ca rien changer

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
#title_page{height:50px; bottom:0px; vertical-align:bottom; background-color:#00FFCC; width:500px;}
#row1{position:relative; height:220px;}
#row2{position:relative; clear:both;}
#vitrine_splash{
	padding-top: 20px;
	width: 375px;
	float: left;
	margin: 0px;
	position: relative;
}
#slogan{padding-top:20px;}

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
  <div id="row1">
    <div id="vitrine_splash"> <a href="http://www.dom.fr"><img src="img/img_home.jpg" alt="Home" height="200" width="375" border="0"/></a> </div>
    <div id="slogan">Slogan</div>
    <div id="title_page">Titre page</div>
  </div>

[Bisûnûrs]

Pourquoi tu as modifié le CSS de title_page ?

Remets position:relative; ...

[pierrot10]

esolé, mais ca mache toujours poa

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
#title_page{
	position:relative;
	bottom:0px;
	height:50px;
	background-color:#00FFCC;
}

[pierrot10]

Bonjour,
Enfin, j'ai la reponse a mon problème que je vous communique pour ceux qui tomberaient sur ce post.
PS: ma solution est un resultat de plusieurs solutions que j'ai trouvé sur la toile et sur ce forum, et étant donné que je n'ai pas inventé le CSS, peut etre que ma solution pourrait être améliorée ou corrigée. Alors n'hésiter pas!!

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<div id="row1">
	<div id="img">
		<img src="img/home.jpg" alt="Home" height="200" width="375" border="0"/>
	</div>
	<div id="slogan">Votre slogan sera en haut, à la meme hauteur que l'image, avec une marge d'env. 10px de l'image</div>
	<div id="title_page">Ici sera votre texte qui sera placé en bas de <div id="row1"></div>
</div>

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
#row1{
	margin-top:20px;
	position:relative;
	height:200px;
	background-color:#CCCC00;
}
#row1 #img{
	width: 375px;
	float: left;
	margin: 0px;
	top:0px;
	position:absolute;
	height:200px;
}
#row1 #slogan{
	top: 0px;
	left:385px; position:absolute;
}#row1 #title_page{
	width:400px;
	position:absolute;
	bottom:0px;
	left:385px;
	background-color:#CC3300;
}

[MasterOfChakhaL]

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
	<div id="title_page">Ici sera votre texte qui sera placé en bas de <div id="row1"></div>

Ceci, serait plus correct:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="title_page">Ici sera votre texte qui sera placé en bas de &lt;div id="row1"&gt;</div>

Sinon, tu as une balise ouverte qui n'est pas fermé, et un id identique dans deux balises...