Elargir mon site?

nico390 Messages postés 114 Date d'inscription Statut Membre Dernière intervention -
Profil bloqué - 20 mai 2013 à 12:40

Bonjour,

J'ai actuellement un site donc la largeur n'est pas grande
http://cnico39.free.fr/meteo

Pour des raisons pratiques, il faudrait que ma page (et donc la bannière et le menu) soit beaucoup plus grande.

Je sais que ca se passe dans le css mais je n'y arrive pas.
Quelqun peu m'aider?

/*************** STRUCTURE PRINCIPALE ***************/ 		
*  {
     margin:0;
     padding:50;
}
body, html {
    height:100%;
    background:#000 url(images/fond.jpg) repeat-x center top;
    background-attachment: fixed;
    font-family:tahoma, Verdana, Arial, Helvetica, sans-serif;
    font-size: 100%;
    font-size:0.9em;
    color:#FFF;
}

img, p, h1, h2, h3, h4, h5, h6, Span, object, table, td, tr, form {
    border:0;
    margin:0;
    padding:0;
} 

#conteneur {
    margin:0 auto;
    padding:0;
    width:920px;
}	  		
#header {
    background:url(images/header.png);
    width:915px;
    height:170px;
    text-align:left;
    padding:0 0 0 5px;
    position:relative;
    z-index: 9999;
}	
#contenu {
    background:url(images/contenu.png);
    width:900px;
    padding:0 10px;
    text-align:left;
}   
#colonne_gauche {
    float: left;
    width:700px;
    margin:0;
    padding:0;
}   
#colonne_droite {
    width:195px;
    margin:0 0 0 700px;
    padding:0;
    text-align:left;
    overflow:hidden;
} 				  
.petit_cadre_haut {
    background:url(images/petit_cadre_haut.png);
    width:195px;
    height:12px;
}	   
.petit_cadre_fond {
    background:url(images/petit_cadre_fond.png);
    width:183px;
    padding:0 6px;
    color:#626262;
    text-align:center;
	margin:0 auto;
}
.petit_cadre_bas {
    background:url(images/petit_cadre_bas.png);
    width:195px;
    height:15px;
}
.cadre {        
    margin:0 auto 20px auto;
    width:654px;
    text-align:left;
    background:#272c30;
    padding:10px;
    position:relative;
    -moz-border-radius: 6px 6px 6px 6px;
    -webkit-border-radius: 6px 6px 6px 6px;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0px 1px 5px #000;
}
.petit_cadre { 
    float:left;
    margin:0 auto 20px 14px;
    width:310px;
    text-align:left;
    background:#272c30;
    padding:10px;
    position:relative;
    -moz-border-radius: 6px 6px 6px 6px;
    -webkit-border-radius: 6px 6px 6px 6px;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0px 1px 5px #000;
}
.block {       
    margin:0 auto 20px auto;
	width:654px;
	text-align:left;
	background:#272c30;
	padding:10px;
	position:relative;
	-moz-border-radius: 6px 6px 6px 6px;
	-webkit-border-radius: 6px 6px 6px 6px;
	border-radius: 6px 6px 6px 6px;
	box-shadow: 0px 1px 5px #000;
}				     
.prez {
    background:url(images/prez.png);
	width:136px;
	padding:0;
	text-align:center;
	height:162px;
}
.prez  img {
    position:absolute;
	bottom:35px;
	left:50%;
	margin-left:-50px; /*On indique la moitié de la taille de l'image avec - devant*/
}
.info {
    font-size:0.7em;
	padding:3px 4px;
	width:136px;
	margin:-20px 15px 0 5px;
	color:#3b4349;
	font-weight:bold;
	float:left;
	position:relative;
	background:#e6e6e6;
	-moz-border-radius: 6px 6px 6px 6px;
	-webkit-border-radius: 6px 6px 6px 6px;
	border-radius: 6px 6px 6px 6px;
	box-shadow: 0px 1px 2px #000;
}
p.info1 {
	color:#FFF;
	font-size:1.1em;
	font-weight:normal;
	float:left;
	-moz-border-radius: 9px 9px 9px 9px;
	-webkit-border-radius: 9px 9px 9px 9px;
	border-radius: 9px 9px 9px 9px;
    background:#272c30;
	padding:3px 5px;
} 
p.info2 {
	color:#FFF;
	font-size:1.1em;
	font-weight:normal;
	float:right;
	-moz-border-radius: 9px 9px 9px 9px;
	-webkit-border-radius: 9px 9px 9px 9px;
	border-radius: 9px 9px 9px 9px;
    background:#2c9325;
	padding:3px 5px;
} 
/**************** PIED ****************/	
#pied {
    width:920px;
	padding:0;
	text-align:center;
	height:58px;
	background:url(images/pied.png);
}
#mentions {
	position:relative;
    float:right;
    width:170px;
    color:#131313;
    text-align:center;
    margin:0 10px 0 10px;
    background:#d6d6d6;
    padding:10px 10px 16px 10px;
    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
    background: -moz-linear-gradient(top, #d6d6d6 30%, #FFF);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d6d6d6), to(#FFF));
    -pie-background: linear-gradient(#d6d6d6, #FFF 100%); 
}
#mentions  a {
    color:#131313;
	text-decoration:none;
	outline:none;
	font-weight:normal;
	font-size:13px;
}
#mentions  a:hover, 
#partenaires  ul  li  a:hover {
    color:#2c9325;
}
#reseaux {
    position:relative;
	float:right;
	width:170px;
	color:#131313;
	text-align:center;
	margin:0 10px 0 0;
	background:#d6d6d6;
	padding:10px;
	-moz-border-radius: 6px 6px 0 0;
	-webkit-border-radius: 6px 6px 0 0;
	border-radius: 6px 6px 0 0;
	background: -moz-linear-gradient(top, #d6d6d6 30%, #FFF);
	background: (linear, 0% 0%, 0% 100%, from(#d6d6d6), to(#FFF));
	-pie-background: linear-gradient(#d6d6d6, #FFF 100%); 
}
#partenaires {
    position:relative;
	text-align:center;
	float:left;
	width:440px;
	color:#131313;
	margin:0 10px 0 10px;
	background:#d6d6d6;
	padding:10px;
	-moz-border-radius: 6px 6px 0 0;
	-webkit-border-radius: 6px 6px 0 0;
	border-radius: 6px 6px 0 0;
	background: -moz-linear-gradient(top, #d6d6d6 30%, #FFF);background: 
	-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d6d6d6), to(#FFF));
	-pie-background: linear-gradient(#d6d6d6, #FFF 100%); 
}
#partenaires  ul#dernier {
    float:left;
    margin:0;
	padding:0;
	text-align:center;
	width:140px;
	list-style-type: none;
	border:none;
	margin:0;
}
#partenaires  ul{
    float:center;
    margin:0;
	padding:0;
	text-align:center;
	width:340px;
	border-right:1px solid #131313;
	list-style-type: none;
	margin:0;
}

#partenaires  ul  li  a {
    color:#131313;
    text-decoration:none;
    outline:none;
    font-weight:normal;
    font-size:12px;
}
#partenaires table {
    margin:0 auto;
	text-align:center;
}
p.piedpage {
    position:relative;
    color:#FFF;
    font-size:12px;
    font-weight:normal;
    background:#272c30;
    padding:2px 0 2px 0;
    margin:0 0 10px 0;
	-moz-border-radius: 4px 4px 4px 4px;
	-webkit-border-radius: 4px 4px 4px 4px;
	border-radius: 4px 4px 4px 4px;
}

/**************** MENU ****************/	
#menu {
    list-style:none;
    width:920px;
    margin:0;
    height:37px;
	padding:0;
}
#menu li {
    float:left;
    display:block;
    text-align:center;
    position:relative;
    border:none;
}
#menu li a {
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px; 
    color: #000;
    display:block;
    outline:0;
    text-decoration:none;
}
#menu li .drop {
    background:url(images/menu.png) right no-repeat;
    width:130px;
    height:44px;
    padding:9px 0 0 0;
	color:#525252;
    font-size:12px;
    font-weight:bold;
}  
#menu li:hover .drop {
    background:url(images/menu.png) left no-repeat;
    width:130px;
    height:24px;
    padding:29px 0 0 0;
}
#menu li .drop_vide {
    background:url(images/menu.png) right no-repeat;
    width:130px;
    height:44px;
    padding:9px 0 0 0;
    cursor:default;
}  
.dropdown_1column, .dropdown_2columns, .dropdown_3columns, .dropdown_4columns,.dropdown_5columns {
	margin:0 auto 0 1px;
	float:left;
	position:absolute;
	left:-999em;
	text-align:left;
	padding:10px 5px 10px 5px;
	border-top:none;
	color:#787878;
	background:#FFF;
	background: -moz-linear-gradient(top, #fcfdff, #e2e3e5);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fcfdff), to(#e2e3e5));
	-pie-background: linear-gradient(#e2e3e5, #fcfdff 100%); 
    border:1px solid #d4d6d7;
	-moz-border-radius: 0px 5px 5px 5px;
	-webkit-border-radius: 0px 5px 5px 5px;
	 border-radius: 0px 5px 5px 5px;
	z-index: 9999;
	box-shadow: 0px 1px 2px #000;
}
.dropdown_1column  {width: 190px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}
#menu li:hover .dropdown_1column, #menu li:hover .dropdown_2columns, #menu li:hover .dropdown_3columns,#menu li:hover .dropdown_4columns,#menu li:hover .dropdown_5columns {
	left:-1px;top:auto;
	}
.col_1,.col_2,.col_3,.col_4,.col_5 {
	display:inline;
	float: left;
	position: relative;
	margin-left: 5px;
	margin-right: 5px;
	color:#787878;
}
.col_1 {width:170px;}
.col_2 {width:270px;}
.col_3 {width:410px;}
.col_4 {width:550px;}
.col_5 {width:690px;}
#menu li ul {
    width:140px;
	float:left;
    list-style:none;
    padding:5px;
    margin:0 10px;
	background:#f3f3f3;  
	border:1px solid #dfdfdf;	
	-moz-border-radius: 6px 6px 6px 6px;
	-webkit-border-radius: 6px 6px 6px 6px;
	 border-radius: 6px 6px 6px 6px;
}
#menu li ul li {
    font-size:12px;
    line-height:14px;
    float:none;
    text-align:left;
	margin:0;
	padding:0;
}
#menu li ul li:hover {
    background:none;
    border:none;
    padding:0;
    margin:0;
}
#menu li:hover div a {
    font-size:12px;
	margin:0;
	padding:0;
    color:#818b92
}
#menu li:hover div a:hover {
    color:#2c9325;
    font-weight:normal;
}

#menu li .drop #ico_menu {
    position:absolute;
    margin:-20px 0 0 60px;
    width:16px;
    height:16px;
    background-repeat:no-repeat;
    left:-999em;
}
#menu li:hover .drop #ico_menu {
    left:-1px;
    top:auto;
}
/****************ZONE MEMBRE****************/
p#login{
    font-size:11px;
	color:#787878;
}
p#mdp {
	font-size:11px;
	color:#787878;
}
input {
	width:120px;
	height:25px;
	margin:2px 0;
}
#inscription  {
	float:right;
	width:120px;
	border-left:1px solid #787878;
	padding:0 0 0 10px;
	margin:5px 0 0 0;
	font-size:11px;
}
.separation {
	border-bottom:1px dotted #787878;
	margin:10px 0;
	width:100px;
	height:1px;
}
#bt_connexion {
	border:1px solid #e8e8e8;
	color:#787878;
	padding:0px 5px 0 5px;
	background:#096a02;
	text-align:center;
	display:inline;
	margin:5px 0 5px 5px;
	width:70px;
	height:20px;
	cursor:pointer	
}
/****************NEWSLETTER****************/
input#newsletter {
	width:130px;
	height:25px;
	margin:5px 0 5px 0;
	display:inline;
}
#bt_newsletter {
border:1px solid #b0b0b0;
color:#787878;padding:3px 5px;
background:#FFF;
text-align:center;
display:inline;
margin:5px 0 5px 5px;
width:20px;
height:20px;
cursor:pointer;
}
/*************** SLIDE ***************//* Featured Content Slider by: Chris Coyier */																									   		  				  
#page-wrap { 
    margin:0 auto;
    width: 160px; 
    position: relative; 
    min-height:240px;
}
ul { 
    list-style: square inside; 
}
blockquote { 
    padding: 0 20px; 
    margin-left: 20px; 
    font-size: 14px; 
    font-family: Georgia, serif; 
    font-style: italic; 
    margin-top: 10px;
}
.slider-wrap { width: 160px;
    float:right;
    height:240px;
}			
.panel ul { 
    text-align: left; 
    margin: 0 15px 0 30px; 
}
.stripViewer { 
    position: relative; 
    overflow: hidden; 
    width: 160px; 
    height:240px; 
}
.stripViewer .panelContainer { 
    position: relative; 
}
.stripViewer .panelContainer .panel { 
    float: left;
    height: 100%; 
    position: relative; 
    width: 160px; 
}
.stripNavL, .stripNavR, .stripNav { 
    display: none; 
}
#movers-row	{ 
    margin: 0; 
    width:160px;
}
#movers-row div { 
    float: left; 
    width:160px;
    margin: 0;
}
#movers-row div a.cross-link { 
    float: left;
    margin:5px 0 0 2px; 
}
.photo-meta-data {
    background: url(images/transpBlack.png); 
	padding: 10px; 
	height: 30px; 
	margin-top: -52px;
	width:502px; 
	position: relative; 
	z-index: 9998; 
	color: white; 
}
.photo-meta-data span { 
    font-size: 13px; 
}
.cross-link	{ 
    display: block; 
	width:50px;
	height:44px;
	position:relative; 
	z-index: 9998; 
	margin: 0;
	padding:6px 0 0 0;
	background:url(images/fpis.png);
} 
/************CLASS POUR PRÉSENTATION KIT************/
#drp {
    background:#e9e9e9;
    border:1px solid #c3c3c3;
    padding:10px;
    width:250px;
    margin:5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
}
/************FLASH INFO************/
#window  {
    width:183px; 
    height:40px; 
    overflow:hidden; 
    position:relative; 
}
#slideshow {
    width:400px; 
    height:700px; 
    overflow:hidden; 
    position:relative;
    font-size:12px;
}
#slideshow li {
    width:183px; 
    height:40px; 
    float:left; 
    display:inline;
}
/************ BALISE GÉNÉRIQUE************/
a                             {color:#FFF;text-decoration:none;outline:none}	 
a:hover                  {color:#2c9325;}		
span.vert               {color:#2c9325;} 
span.grand              {color:#2c9325;font-size:14px;font-weight:bold;}
span#welcome          {font-size:13px;font-weight:bold;color:#787878;display:inline;}
p.italic                {font-style:italic;}
h1                           {font-size:13px;}
h2                           {font-size:14px;}
h3                           {font-size:15px;}
h4                           {font-size:16px;}
h5                           {font-size:17px;}
h6                           {font-size:18px;}
h1, h2, h3, h4, h5, h6 {font-weight:bold}
hr                            {width:50%;margin:10px 0}

Afficher la suite

A voir également:

Elargir mon site?
Site de telechargement - Accueil - Outils
Site comme coco - Accueil - Réseaux sociaux
Quel site remplace coco - Accueil - Réseaux sociaux
Site x - Guide
Site pour vendre des objets d'occasion - Guide

7 réponses

Réponse 1 / 7

Ysabe_l Messages postés 12717 Date d'inscription Statut Contributeur Dernière intervention 277

Bonjour,

Tout ton site est contenu dans la div dont l'id est "conteneur" c'est donc sa largeur qu'il faut modifier dans le CSS.

Par contre la bannière il va falloir faire une image plus large ou mettre une couleur de fond (mais ça risque de faire bizarre).

Pour le menu les cases ont une largeur fixe donc il va falloir la modifier pour qu'elle soit correcte (#menu li .drop).

Je te conseille d'utiliser le navigateur firefox et d'y ajouter l'extension firebug (https://addons.mozilla.org/fr/firefox/addon/firebug/) ou le navigateur chrome avec l'extension firebug (https://chrome.google.com/webstore/detail/firebug-lite-for-google-c/bmagokdooijbeehmkpknfglimnifench?hl=fr) en utilisant l'option "inspecter" tu verras très rapidement les noms des choses à modifier, tu pourras aussi faire des tests de changements avant de les faire réellement dans ton CSS.

Profil bloqué

Je te conseille chrome, tu peux faire clic droit et inspecter sans l'extension, et, surtout, c'est le navigateur le plus performant & moderne qui soit. Par exemple, il gère de nombreux éléments que firefox et autres ne gèrent pas, tels que les input type="date" etc.

Sinon rien à rajouter à ce que Ysabe_l vient de dire, hormis, peut-être pour compléter, te conseiller de mettre tes dimensions en % (width:90%; par exemple) et d'y ajouter un min-width:XXX en pixels par exemple.

Réponse 2 / 7

nico390 Messages postés 114 Date d'inscription Statut Membre Dernière intervention 3

Salut
Merci de ton aide
Je viens de mettre le conteneur à 1500px pour essayer, mais ca ne donne pas le rendu voulu(tu peux le vérifier sur le site)
Rien n'est élargi.
Pourquoi?

D'accord pour firebug et la bannière;)

Ysabe_l Messages postés 12717 Date d'inscription Statut Contributeur Dernière intervention 277

Salut,

Dans ton CSS tes "header", "contenu" et "pied" ont toujours une largeur fixe (inférieure à 1500px) je faut enlever complètement la largeur qu'ils ont et ils devraient prendre celle de leur conteneur.

nico390 Messages postés 114 Date d'inscription Statut Membre Dernière intervention 3

Merci je viens de le faire, mais rien de plus...

nico390 Messages postés 114 Date d'inscription Statut Membre Dernière intervention 3

EDIT: si un peu mieux, tout ne se décalle pas (comme les deux cadres sur la droite)

nico390 Messages postés 114 Date d'inscription Statut Membre Dernière intervention 3

Je dois y aller, mais si tu as moyen de m'aiguiller ou même si tu as le temps de faire les modifications directement sur mon css, ce serait vraiment génial. Merci d'avance

Ysabe_l Messages postés 12717 Date d'inscription Statut Contributeur Dernière intervention 277

Alors par contre la largeur de 1250px est risquée, le site aura un ascenseur vertical sur certains écrans, et c'est le genre de trucs super désagréable qui risque de faire fuir certaines personnes.

Si tu ne veux pas que ta bannière se répète il faut modifier le

background-repart : initial initial;

background-repeat : no-repeat;

Et en fait ce n'est pas que tes colonnes se répètent mais que tu as mis une image de fond blanche, le plus simple est de supprimer cette image et de mettre une couleur de fond, pour ça enlève ça dans le #contenu :

background:url(images/contenu.png);

et ajoutes-y ça :

background-color : #ffffff;

Et pour que ta partie de droite soit totalement à droite, ajoute dans #colonne_droite :

float : right;

Réponse 3 / 7

nico390 Messages postés 114 Date d'inscription Statut Membre Dernière intervention 3

Bonsoir
J'ai réussi à mettre 2cadres sur 3 en haut de mon site. Mais mon troisième cadre ne veut pas monter!
Une idée?
Merci:)

Profil bloqué

Salut,

Essaie de remplacer

.cadre_station {
margin: 0 auto 20px 100%;
width: 30%;
text-align: left;
background: #272c30;
padding: 10px;
position: relative;
display: block;
float: left;
-moz-border-radius: 6px 6px 6px 6px;
-webkit-border-radius: 6px 6px 6px 6px;
border-radius: 6px 6px 6px 6px;
box-shadow: 0px 1px 5px #000;
}

par

.cadre_station {
margin: 0 auto 20px 3%;
width: 30%;
text-align: left;
background: #272c30;
padding: 10px;
position: relative;
display: block;
float: left;
-moz-border-radius: 6px 6px 6px 6px;
-webkit-border-radius: 6px 6px 6px 6px;
border-radius: 6px 6px 6px 6px;
box-shadow: 0px 1px 5px #000;
}

PS ça prend forme tout ça !

nico390 Messages postés 114 Date d'inscription Statut Membre Dernière intervention 3

Salut, merci pour l'aide, mais ca ne marche pas (Tu peux voir le rendu sur cnico39.free.fr/meteo) une autre idée?

Profil bloqué

Remplace

#colonne_gauche {
float: left;
width: 700px;
margin: 0;
padding: 0;
}

par

#colonne_gauche {
float: left;
width: 100%;
margin: 0;
padding: 0;
}

nico390 Messages postés 114 Date d'inscription Statut Membre Dernière intervention 3

Toujours pas, ca fait un truc bizarre :/

Profil bloqué

Ha je sais !

Tu as mis ton div cadre station en dehors de ton div cadre accueil, il faut que tu le mettes à l'intérieur.

Réponse 4 / 7

bg62 Messages postés 23735 Date d'inscription Statut Modérateur Dernière intervention 2 409

J'ai actuellement un site donc la largeur n'est pas grande

largement suffisante (actuellement)
bon mais peut-être à cause des modifs déjà effectuées ... je découvre :)

nico390 Messages postés 114 Date d'inscription Statut Membre Dernière intervention 3

Oui c'est du à l'aide qui m'a déja été apportée.
On cherche maintenant à ce que le site ait un bon rendu sous IE (car actuellement, seul le rendu est correct sous firefox)

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 7

nico390 Messages postés 114 Date d'inscription Statut Membre Dernière intervention 3

Varaldi, je n'arrive pas à mettre en forme le menu ou les mentions. A mon avis je ne dois pas bien voir ou tu veux que j'insère la mise en forme

Réponse 6 / 7

Profil bloqué

Tu l'as bien fait, il prend toute la largeur mais tu ne le vois pas car il faut maintenant que tes <li> occupe cette place.

Pour ce faire, ajoute de la même manière

li{width:14.3%;}

et ajoute aussi ça

ul{overflow:none;}

sinon ça va dépasser un tout petit peu

nico390 Messages postés 114 Date d'inscription Statut Membre Dernière intervention 3

En effet, ca prend toute la longueur:)
C'est bien sous IE, mais sous firefox, peut t'on réduire l'écart entre chaque menu?

Profil bloqué

Remplace

#menu li .drop {
background: url(images/menu.png) right no-repeat;
width: 130px;
height: 44px;
padding: 9px 0 0 0;
color: #525252;
font-size: 12px;
font-weight: bold;
}

par

#menu li .drop {
background: url(images/menu.png) right no-repeat;
width: 100%;
height: 44px;
padding: 9px 0 0 0;
color: #525252;
font-size: 12px;
font-weight: bold;
}

Profil bloqué

PS quand tu mets un truc à 100%, souvent tu enlèves le padding ou margin

exemple : supprime le padding et met à jour, ton footer dépassera plus.

#partenaires {
position: center;
text-align: center;
float: center;
width: 100%;
color: #131313;
background: #d6d6d6;
padding: 10px;
-moz-border-radius: 6px 6px 0 0;
-webkit-border-radius: 6px 6px 0 0;
border-radius: 6px 6px 0 0;
background: -moz-linear-gradient(top, #d6d6d6 30%, #FFF);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d6d6d6), to(#FFF));
-pie-background: linear-gradient(#d6d6d6, #FFF 100%);
}

nico390 Messages postés 114 Date d'inscription Statut Membre Dernière intervention 3

Ca commence à y ressembler :p Mais ce n'est pas tout à fait ca

Profil bloqué

Essai

#menu li:hover .drop {
background:url(images/menu.png) left no-repeat;
width:100%;
height:24px;
padding:29px 0 0 0;
}

au lieu de

#menu li:hover .drop {
background:url(images/menu.png) left no-repeat;
width:130px;
height:24px;
padding:29px 0 0 0;
}

Réponse 7 / 7

nico390 Messages postés 114 Date d'inscription Statut Membre Dernière intervention 3

Salut
Merci j'ai à peu près réussi à m'en sortir

Dernière question:
Je voudrais créer une sorte de "menu de navigation" sous forme de texte sur les pages annexes, en haut de ma page (juste en dessous de la bannière).
Mais je voudrais que ce texte soit toujours visible, même quand je scroll la page.
Que faut t'il faire?

Profil bloqué

Il faut que ton bloc qui correspond à ton menu (de mémoire c'est une liste <ul>...</ul>) soit positionné comme ça :

.laclassedetonuldumenu{position:fixed;z-index:20000;top:0px;}

nico390 Messages postés 114 Date d'inscription Statut Membre Dernière intervention 3

Ok parfait je regarde ca.
Par contre, peut tu me dire si mon site est long à chargé chez toi?

Profil bloqué

Non, c'est normal.

Et le mien ?

nico390 Messages postés 114 Date d'inscription Statut Membre Dernière intervention 3

Le tiens est bien fluide, aucun soucis.

Profil bloqué

Discussions similaires

C'est quoi le site qui remplace coco chat

Coco Chat : nouveau lien !

Votre réponse

Discussions similaires