28172 sujets

CSS et mise en forme, CSS3

Collr un élément en haut de la page ?

Bonjour a tous,
j'essaye de faire le design de mon site, et je rencontre un problème bizzare.
je veux avoir mon BG, en dégradé... donc ca c'est fait, apres je souhaite faire une sorte de "barre" noire collée en haut de ma page de dans seront les liens vers les menus, mais la cette "barre" ne veut pas se coller Smiley biggol Smiley biggol Smiley biggol
voila comment ca fait la :
http://img38.imageshack.us/img38/9625/sanstitreere.jpg


voici mon code html
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>
	<title>Prog-toshop - Graph & Prog</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>

<body>
    <div id="menu">
	    <ul id="navigation"> <!--Liste des menus -->
                <li><a href="#" title="Accueil">Accueil</a></li>
				<li><a href="#" title="Ressources">Ressources</a></li>
                <li><a href="#" title="Acces au Forum">Forum</a></li>
                <li><a href="#" title="contact">Contact</a></li>
        </ul>
            <!-- DEBUT : LOGIN -->         
        <div id="login">Bienvenue <strong>Pseudo</strong> !&nbsp;&nbsp;<a href="#" title="">Profil</a> - <a href="#" title="">Déconnection</a></div>
        </div>
	</div>

</body>

</html>



et voici mon code CSS :
body{
    background:url(theme/background.jpg) repeat-x #ffbd00;
	margin:0;
	padding:0;
	font-family:Comic Sans MS, Verdana, Geneva, sans-serif;
	font-size:12px;
}

#menu{
    height:50px;
	background:url(theme/menus.png) repeat-x top;
	text-align:center;
	font-size:20px;
	color:#FFFFFF;
}

#navigation {
	height: 50px;
	padding-left: 12px;
	overflow: hidden;
}

#navigation li {
	list-style-type: none;
	width: 105px;
	height: 50px;
	background: url(theme/nav-separation.png) no-repeat right top;
	padding-left:12px;
	padding-right:12px;
	text-align: center;
	float: left;
}

#navigation li a {
	width: 105px;
	height: 24px;
	display: block;
	color: #baceda;
	padding-top: 9px;
	text-decoration: none;
}

#navigation li a:hover {
	color: #fff;
}



merci d'avance a tous
longue vie a ce fofo exceptionnel et a ses membres Smiley lol
Bonjour,

Qu'est ce que tu entends pas "se coller" ?

Que la barre de navigation reste toujours au même endroit par rapport à l'écran lors d'un scroll ?
Si c'est le cas, tu peux utiliser position:fixed (incompatible avec IE6, donc prévoir un style alternatif à base d'absolu pour lui).

Quel la barre soit positionnée au bord du haut de la page ?
Si c'est le cas, tu dois mettre toutes les margin- et padding- top à 0 pour tes listes (ul et li).
Modifié par Laurie-Anne (27 Jun 2009 - 12:13)
en fait, je veux qu'elle soit collée en haut de la page, lorsque je scroll qu'elle reste en haut (comme celle du fofo en noir en haut) ou mettre les padding-top a 0 ? car j'ai essayé dans menu.
no-fonte a écrit :
YESSSS
ca marche (enfin ca fonctionne)
merci pour tout
je pense que vous allez me revoir dans pas longtemps Smiley langue Smiley biggol Smiley biggol Smiley biggol Smiley biggol

Pour signifier que ton sujet est [résolu] ? Smiley murf
Euh non, je vais poser ma question ici car c'est encore un problème de "collage" voila je veux coller mon corps (div : principal) qui est fait a base d'une ligne de 1px avec des repeat-y, pour que ca soit extensible avec mon header (div: header) j'ai essayé de mettre un margin/padding top 0 sur mon corps et un margin/padding bottom 0 sur le header mais rien a faire...
voici mon html :

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>
	<title>Prog-toshop - Graph & Prog</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>

<body>
  
    <div id="menu">
	<!-- Div de l'ensemble de la abrre de menus en haut =p -->
	    <ul id="navigation"> <!--Liste des menus -->
                <li><a href="#" title="Accueil">Accueil</a></li>
				<li><a href="#" title="Ressources">Ressources</a></li>
                <li><a href="#" title="Acces au Forum">Forum</a></li>
                <li><a href="#" title="contact">Contact</a></li>
        </ul>
		
        <!-- DEBUT : LOGIN -->         
        <div id="login">
		Bienvenue <strong>Pseudo</strong> !&nbsp;&nbsp;<a href="#" title="">Profil</a> - <a href="#" title="">Déconnection</a>
		</div>
		
	</div>
	
    <div id="header">
	<!-- ICI c'est la div du Header -->
	</div>
	
	<div id="principal"><!-- ICI c'est la div du contenu principal du site,de la "page" ou seront les articles --> 
	<p>essaiessaiessaiessaiessa</p>
	<p>iessaiessai<strong>essai</strong>essaiessaiessaiessaiessaiessai</p>essaiessaiessaiessaiessaiessaiessaiessaiessaiessaiessaiessai
	essai
	</div>

</body>

</html>




et mon code css 

/********************************************
   AUTHOR:  		   Cousin Maxime (Toshop)
  *******************************************/


body{
    background:url(theme/background.jpg) repeat-x #ffbd00;
	margin:0;
	padding:0;
	font-family:Comic Sans MS, Verdana, Geneva, sans-serif;
	font-size:12px;
}

#header{
    width:790px;
	height:314px;
	background: url(theme/header.png) no-repeat 0 0;
	margin:0 auto 0 auto;
    padding: 0;

}


#menu{
    height:35px;
	background:url(theme/menus.png) repeat-x top;
	text-align:center;
	font-size:14px;
	color:#FFFFFF;
}

#navigation {
	height: 35px;
	margin-top: 0px;
	padding-top: 0px;
	padding-left: 12px;
	overflow: hidden;
}

#navigation li {
	list-style-type: none;
	width: 105px;
	height: 35px;
	background: url(theme/nav-separation.png) no-repeat right top;
	padding-left:12px;
	padding-right:12px;
	text-align: center;
	float: left;
}

#navigation li a {
	width: 105px;
	height: 24px;
	display: block;
	color: #baceda;
	padding-top: 7px;
	text-decoration: none;
}

#navigation li a:hover {
	color: #fff;
}

#login {
	position: absolute;
	right: 40px;
	top: 0px;
	color: #9db2bf;
	padding: 6px 32px 0 0;
	min-height: 30px;
}

#login a { color: #9db2bf; }
#login a:hover { color: #9db2bf; }

#principal {
    width:790px;
	margin:0 auto;
	background:url(theme/extensible.png)repeat-y;

}
du menu ???
mais qu'est ce qu'il vient faire ici celui la (en moi qui croyais en etre débarrassé :lol: ), c'est le header et le corps qui sont en cause non ?

voici ce que ca donne :

[EDIT laurie-Anne : Photo trop grande] http://img36.imageshack.us/img36/7714/sanstitre1yjy.png
Modifié par Laurie-Anne (01 Jul 2009 - 14:43)
ce qui est bizzare c'est que si je met un padding 0 a navigation ca me le colle pas, si je met un padding 2 ca me le colle mais ca ne me le centre plus, et si je met paddin 2 auto 0 auto
ca ne me le colle pas
Euh... Tu as essayer de faire comme je te le conseillais ?

Sans code actualisé personne ne pourras t'aider plus, et accessoirement les up journaliers c'est particulièrement bloquant quand on veux aider.
Bah c'est exactement le meme code sauf que j'ai rajourté une margin:0 et un padding:0 a navigation li
et pour l'histoire de ca ??? :
ce qui est bizzare c'est que si je met un padding 0 a navigation ca me le colle pas, si je met un padding 2 ca me le colle mais ca ne me le centre plus, et si je met paddin 2 auto 0 auto
ca ne me le colle pas
Sujet clos
Aller à