28220 sujets

CSS et mise en forme, CSS3

2 éléments bloc, chacun dans un coin...

Salut à tous !
Encore une fois je me rend fou pour rien je pense...

Voila le blème :

Pour le CSS :
ul#menu {margin:0; padding:0; font:1em Tahoma, "Times New Roman", Times, serif; list-style-type:none;}
#menu li {float:left; margin:0 5px;}
#menu a{display:block; width:120px; color:white; text-decoration:none; text-align:center;}
#menu a:hover {color:white; font-weight:bold; border-bottom: 4px solid #D01A71;}


Pour le HTML:
<div style="background-color:000;">

<ul id="menu">
<li><a href="http://www.photollivier.com/">Index</a></li>
<li><a href="http://www.photollivier.com/howto.php">Mode d'emploi</a></li>
<li><a href="http://www.photollivier.com/contact/contact.php">Contact</a></li>
</ul>

<object type="application/x-shockwave-flash" style="text-align:right; width:240px;"data="dewplayer-multi.swf?mp3=
xerxes_angelina.mp3|xerxes_deja_vu.mp3|xerxes_can_you_see_this.mp3|xerxes_defuse.mp3|xerxes_lofi_beauty.mp3
&amp;bgcolor=000000&amp;volume=80" width="240" height="20"><param name="movie" value="dewplayer-multi.swf?mp3=test.mp3|test2.mp3&amp;bgcolor=000000&amp;volume=80" /></object>
</div>


Je voudrais mettre le menu de navigation dans le coin en haut à gauche (donc il y est par défaut...)

puis le lecteur dewplayer, dans le coin en haut à droite...

J'ai bidouillé les différents positionnements mais je n'y arrive pas ! Pouvez vous m'expliquer ? J'ai un arrière plan blanc et il n'y a que le dew player qui s'affiche !
Modifié par stanfield (28 Jan 2007 - 21:13)
Bon, là j'ai l'arrière plan noir mais le lecteur est revenu se coller à gauche...

<style type="text/css">
ul#menu {margin:0; padding:0; font:0.8em Tahoma, "Times New Roman", Times, serif; list-style-type:none;}
#menu li {float:left; margin:0 5px;}
#menu a{display:block; width:120px; color:white; text-decoration:none; text-align:center;}
#menu a:hover {color:white; font-weight:bold; border-bottom: 4px solid #D01A71;}
</style>


<body>
<div style="background:#000000;">
<ul id="menu">
<li><a href="http://www.photollivier.com/">Index</a></li>
<li><a href="http://www.photollivier.com/howto.php">Mode d'emploi</a></li>
<li><a href="http://www.photollivier.com/contact/contact.php">Contact</a></li>
</ul>

<object type="application/x-shockwave-flash" style="text-align:right;" data="dewplayer-multi.swf?mp3=
xerxes_angelina.mp3|xerxes_deja_vu.mp3|xerxes_can_you_see_this.mp3|xerxes_defuse.mp3|xerxes_lofi_beauty.mp3
&amp;bgcolor=000000&amp;volume=80" width="240" height="20"><param name="movie" value="dewplayer-multi.swf?mp3=test.mp3|test2.mp3&amp;bgcolor=000000&amp;volume=80" /></object>
</div>
Bonjour,

Si j'ai tout bien compris essaye :
<!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=iso-8859-1" />
<title>test</title>

<style type="text/css">
#conteneur{
background: #000;
position: relative;
overflow: hidden;
}

ul#menu {
height: 20px;
margin:0; 
padding:0; 
font:0.8em Tahoma, "Times New Roman", Times, serif; 
list-style-type:none;
}

#menu li {
float:left; 
margin:0 5px;
}

#menu a{
display:block; 
width:120px; 
color:white; 
text-decoration:none; 
text-align:center;
border-bottom: 4px solid #000;
}

#menu a:hover {
color:white; 
font-weight:italic; 
border-bottom: 4px solid #D01A71;
}

#player{
position: absolute;
right: 10px;
top: 0;
width:240px;
height: 20px;
background: yellow;
}

</style>
<body>

<div id="conteneur">
	<ul id="menu">
		<li><a href="http://www.photollivier.com/">Index</a></li>
		<li><a href="http://www.photollivier.com/howto.php">Mode d'emploi</a></li>
		<li><a href="http://www.photollivier.com/contact/contact.php">Contact</a></li>
	</ul>

	<div id="player">player
	</div>

</div>
</body>
</html>
je m'en suis sorti comme ça :
<style type="text/css">
ul#menu {margin:0; margin-top: padding:0; font:0.8em Tahoma, 'Times New Roman', Times, serif; list-style-type:none;}
#menu li {float:left; margin:0 5px;}
#menu a{display:block; width:120px; color:white; text-decoration:none; text-align:center;}
#menu a:hover {color:white; font-weight:bold; border-bottom: 4px solid #D01A71;}
#menu a:active {color:white; font-weight:bold; border-bottom: 4px solid red;}
</style>





<body>
<div style="background:#000000; height:20px;">
<ul id="menu">
<li><a href="http://www.photollivier.com/">Index</a></li>
<li><a href="http://www.photollivier.com/howto.php">Mode d'emploi</a></li>
<li><a href="http://www.photollivier.com/contact/contact.php">Contact</a></li>
</ul>

<object type="application/x-shockwave-flash" style="float:right;" data="dewplayer-multi.swf?mp3=xerxes_angelina.mp3|xerxes_deja_vu.mp3|xerxes_can_you_see_this.mp3|xerxes_defuse.mp3|xerxes_lofi_beauty.mp3&amp;bgcolor=000000&amp;volume=80" 
width="240" height="20"><param name="movie" value="dewplayer-multi.swf?mp3=test.mp3|test2.mp3&amp;bgcolor=000000&amp;volume=80" /></object>
<h1 style="color:gray; text-align:right; margin:0px; font:0.8em Tahoma, 'Times New Roman', Times, serif; float:right; text-decoration:blink;">Un peu de musique ? &gt;&gt;</h1>
</div>


lequel est le mieux ?
par contre j'ai des bandes blanches qui séparent ce bloc du reste de la page ! (voir http://www.photollivier.com/portfolio/#album=1)

C'est du à quoi ?
Modifié par stanfield (28 Jan 2007 - 23:35)
stanfield a écrit :
par contre j'ai des bandes blanches qui séparent ce bloc du reste de la page ! (voir http://www.photollivier.com/portfolio/#album=1)

C'est du à quoi ?

Le texte repousse les limites du bloc. Si tu agrandis le texte, la bande blanche s'agrandit également, tandis que si tu le réduis elle disparait.

Il sera sans doute utile de jouer sur line-height (réduire la hauteur de ligne) pour corriger ça. Mais l'idéal est bien sûr de prévoir un agrandissement de la taille du texte, ce qui implique de ne pas fixer la hauteur de l'en-tête (actuellement : hauteur fixée à 20px), et de prévoir le dépassement des flottants, tant qu'à faire (sur les flottants qui sortent de leur conteneur, voir la FAQ du forum).
Justement, autre question : quand je supprime le height:20px des l'entête, la page devient blanche, le texte disparait ainsi que le menu ! je comprend pas non plus pourquoi...
stanfield a écrit :
Justement, autre question : quand je supprime le height:20px des l'entête, la page devient blanche, le texte disparait ainsi que le menu ! je comprend pas non plus pourquoi...

Le texte ne disparait pas, il est juste peu visible.

Le fond de ta page est blanc. Ton texte est blanc. Si le bloc qui contient le texte a une hauteur de 0px, tu auras du texte blanc sur fond blanc.

Pourquoi est-ce que le bloc qui contient le texte ne s'agrandit pas en fonction de son contenu ? C'est un comportement normal, dû à l'utilisation de flottants.

Je me permet en passant de citer mon précédent message Smiley cligne :
a écrit :
prévoir le dépassement des flottants, tant qu'à faire (sur les flottants qui sortent de leur conteneur, voir la FAQ du forum)


Bonne continuation. Smiley smile
oui je sais je les sort du flux, je me rapellais plus que la font était blanche donc forcément...

Je m'en suis encore tiré en mettant height:24px

Sinon, d'une façon purement "structurelle", quelle est la "meilleure" méthode ? celle de ghost ou la mienne ?
Sujet clos
Aller à