28172 sujets

CSS et mise en forme, CSS3

Un gabarit tout mou en pourcentage, avec un header fixe....

Salut....

Suite à mon d'intérêt pour le css, je viens de reprendre un vieux gabarit que j'avais bidouillé y à quelque temps déjà et qui est encore loin d'être parfait....

Sans plus attendre, le code en vrac...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

      "http://www.w3.org/TR/html4/strict.dtd">

<html>

	<head>

		<title>Yeah!!!</title>

		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

		<style type="text/css">



/****STRUCTURE GENERALE****/		



/*Page*/

html, body

{

  height: 100%;

  margin: 0;

  font-size:12px;

}



/*Conteneur du corps et du pied de page, centré et s'adaptant à la taille de l'écran*/

#global

{

	height:100%;

	width: 98%;

	padding: 0 1%;

	margin: 0 auto;

}

		

/*En tête fixe qui défile avec l'écran*/	

#haut

{

  position: fixed;

  top:0;

  left: 1%;

  min-height: 3em;

  width: 98%;

  z-index:10000;

  background: #ccc;

}



/*Corps de page*/

#centre

{

  min-height: 95%;

  width: 100%;

  background: #f00;

  background: url(../images/trait.png) 25% repeat-y;

}



/*La barre de navigation de gauche*/

#left

{

  float:left;

  width: 25%;padding-right:2px;

  margin: 0;

  background: #0cf;

  padding-bottom: 20px;

}



/*Le véritable contenu*/

#right

{

  margin-left: 25%;

  border-left: solid 1px;



  background: #0f0;

}



/*.decalDuHaut correspond à #left et #right. Le padding top sert à réserver la place pour la banière*/

.decalDuHaut{padding-top:3em}



/*Pied de page*/

#bas

{

  min-height: 5%; 

  width: 100%;

  background: #00f;

}





/****NAVIGATION PAR ONGLETS****/		



/*Les menus  de navigations. Bidouille pour ne pas afficher les pipes*/

.menu 

{

  visibility:hidden;

  word-spacing: -1em;

  width: 100%;

}



/*Chaque lien de menu*/

.menu a

{

  display: block;

  visibility: visible;

  margin: 0;

  padding: 5px;

  font-size: 1em;

  text-decoration: none;

  border: solid 1px black;

}





/*Lien du menu du haut*/

#haut .menu a

{

  float: left;

  border-top: none;

}



#haut .menu a:not(:first-child)

{

  margin-left: -1px

}



/*Lien du menu de gauche*/

#left .menu a

{

  float: left;

  clear: both;

  margin-top: -1px;width: 100%; background: #ddd;padding-left: 0; padding-right: 0;

}





/***REINTEGRATION DES FLOTTANTS DANS LE FLUX****/



.clearfix:after

{

  content: "";

  display: block;

  clear: both;

}







/*DIVERS CACA*/



h1

{

  margin: 0;

  padding: 0;

  background: transparent;

}



#left .menu a, #left{background : transparent; border-color: red}







		</style>

		

<!--		<link rel="stylesheet" type="text/css" href="css/style.css" />-->

<!--		<link rel="shortcut icon" href="images/icone.ico" />-->

		

	</head>



	<body>

		<div id="haut">

			<div class="menu">

					<a href="#">Lien1Lien1Lien1Lien1</a>|

					<a href="#">Lien2Lien2Lien2Lien2</a>|

					<a href="#">Lien3</a>|

					<a href="#">Lien4</a>|

					<a href="#">Lien5</a>|

			</div>

		</div>

		

		<div id="global" >

			<div id="centre" class="clearfix">



				<div id="left" class="decalDuHaut">

					<div class="menu">

						<a href="#">Lien1</a>|

						<a href="#">Lien2</a>|

						<a href="#">Lien3</a>|

						<a href="#">Lien4</a>|

						<a href="#">Lien5</a>|

					</div>

				</div>





				<div id="right" class="decalDuHaut">

					<p><!--Premiere ligne-->

YeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeah

YeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeah

YeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeah

YeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeah

YeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeah

YeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeah

YeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeah

YeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeah

YeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeah

YeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeah

YeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeah

YeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeah

YeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeah

YeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeahYeah

					</p>



					<p>YEAH</p>

					<h1>I'm BONO!</h1>

				</div>



			</div><!--Fin du div center-->



			<div id="bas">

			Ici : le pied de page

			</div>

		</div><!--Fin du div global-->

	</body>

</html>


Y a pas mal de pixels de décalage qui se baladent encore pour l'instant ; mais c'est pas mon souci principal....Ce que je n'arrive pas à comprendre (et que j'ai très certainement sous les yeux Smiley sweatdrop ), c'est pourquoi il y a un tel décalage entre mon header (en gris) et mon premier paragraphes....

Si quelqu'un voit à coté de quoi je passe, je le remercie d'avance....
Bonjour,

coccimaster a écrit :
Sans plus attendre, le code en vrac...

Une page en ligne eut été plus efficace.
J'aurais bien voulu, j'ai pas d'hébergement sous la main malheureusement.....Je vis quand même voir ce que je peux faire...
Sujet clos
Aller à