28173 sujets

CSS et mise en forme, CSS3

Mise en page d'une page html

Pages :
(reprise du message précédent)

Et le bloc texte lui peut faire 600*500 il ne bougera plus car je vais mettre un overflow pour le scroll ainsi la page du site ne bouge jamis en taille
Voici le résultat avec le menu :

<!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>page d'acceuil</title>
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>


<style type="text/css">
<!--
a {
	text-decoration: none;
	color:#FF9900;
}
a:hover {
	text-decoration: underline overline;
	color:#FF6600;
}
p {
	margin:0;	
}
* {
	font-family : Verdana, Helvetica, sans-serif;
	font-size : 12px;
}
body { margin:0; }
#page {
	margin:0 auto;
	height: 750px;
	width: 900px;
	border: 1px solid #777777;
	background: url(image.jpg) no-repeat center top;
}
#page #header {
	margin: 0px auto;
	height: 180px;
	width: 100%;
}
#page #header #logo {
	margin:  0 auto 10px auto;
	height: 100px;
	width: 600px;
	border: 1px solid #DDDDDD;
}
#page #corps {
	margin: 0 auto;
	height: 500px;
	width: 600px;
	border: 1px solid #DDDDDD;
	overflow:auto;
}
#page #header #menu {
	margin: auto;
	height: 30px;
	width: 600px;
	border: 0px solid #DDDDDD;
}
 #footer {
	margin: 0 auto;
	height: 35px;
	width: 600px;
	border: 0px solid #BBBBBB;
}
/*-------------------------------- Menu------------------------------------------------------ */
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu1 {
position: absolute; /* placement du menu, à modifier selon vos besoins */
top: 200;
left: 300;
z-index:100;
width: 100%; /* correction pour Opera */
}
#menu1 dl {
float: left;
width: 10em;
}
#menu1 dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
margin: 1px;
}
#menu1 dd {
display: none;
border: 1px solid gray;
}
#menu1 li {
text-align: center;
background: #fff;
}
#menu1 li a, #menu1 dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu1 li a:hover, #menu1 li a:focus, #menu1 dt a:hover, #menu1 dt a:focus {
background: #eee;
}
/* PIED DE PAGE ------------------------------------------------------ */

#pied {
	text-align: center;
	border:0;
	padding-bottom: 10px;
	padding-top: 10px;
}
</style>
</head>
<body>
<div id="page">
	<div id="header">
		<div id="logo">
			logo
		</div>
			<div id="menu">
				<div id="menu1">
	<dl>

		<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>
	</dl>
	
	<dl>			
		<dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>

		<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
			<ul>
				<li><a href="#">Sous-Menu 1.1</a></li>
				<li><a href="#">Sous-Menu 1.2</a></li>
				<li><a href="#">Sous-Menu 1.3</a></li>
				<li><a href="#">Sous-Menu 1.4</a></li>
				<li><a href="#">Sous-Menu 1.5</a></li>
				<li><a href="#">Sous-Menu 1.6</a></li>
				</ul>
		</dd>
	</dl>
	
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu2');">Menu 2</dt>

			<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
			<ul>
				<li><a href="#">Sous-Menu 2.1</a></li>
				<li><a href="#">Sous-Menu 2.2</a></li>
				<li><a href="#">Sous-Menu 2.3</a></li>
				<li><a href="#">Sous-Menu 2.4</a></li>
			</ul>

			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
			<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
			<ul>

				<li><a href="#">Sous-Menu 3.1</a></li>
				<li><a href="#">Sous-Menu 3.2</a></li>
				<li><a href="#">Sous-Menu 3.3</a></li>
				<li><a href="#">Sous-Menu 3.4</a></li>
				<li><a href="#">Sous-Menu 3.5</a></li>
			</ul>

			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu4');">Menu 4</dt>
			<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
			<ul>

				<li><a href="#">Sous-Menu 4.1</a></li>
				<li><a href="#">Sous-Menu 4.2</a></li>
				<li><a href="#">Sous-Menu 4.3</a></li>

			</ul>
			</dd>
	</dl>

</div>
			</div>
	</div>
	<div id="corps">
		esasaisdifjisdf dfijsdfj <br>
		sdfjsdfk<br><br><br><br><br><br><br><br>essai
		<br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br>essai
	</div>
	<br>
	<div id="footer">
		<div id="pied">
			developper par <a href="#">www.univfgf.com</a>
		</div>
	</div>
</div>
</body>
</html>


Mais j'aimerais que le bas footer l'écriture soit plus basse et plus petite c'est possible je pense de définir d'autre taille d'écriture.
Oki merci Mr.

sinon si je veux qu'il y est un espace avant entre le bordure et le texte dans le copr il faut mettre quoi. Car je veux pas que l'écriture soit collé je veux un petit espace.
oui je connais les balise <p> <ul> <h1> <h2>..
Mais je n'ai pas réussit à mettre un espace entre la bordure du corp et le texte.
Mais bon c'est grave c'est cool quand même.

Sinon je te remercie vraiment de ton aide. Sinon j'ai été voir ton site vriament pas mal aussi.
Si tu le veux on peux faire un partenaria car moi aussi j'ai un site (en tableau lol et oui pas encore en div).
Tien si tu veux y jetter un oeil http://www.univers-du-pc.com
Escuse moi de t'ennuiyer encore, mias j'ai essayé d'insérer un fond d'écran mais ca ne marche pas, il m'affiche rien ....
pour le partenariat suis ok ton site traite d'un sujet qui m'interesse.
Pour la mise en page j'ai mis en ligne sur la page quelques fioritures pour te montrer comment proceder a la mise en forme du contenu
Ben c'est dasn mon pc, mais en une que tu veux en no repeat comme ca c pas grave pour la taille juste voir si toi ca marche car moi que dal.
C'est bizard car ca marche avec ton image même si je l'enregistre sur mon pc, mais le mienne non ca ne marceh pas !
lecobra_20 a écrit :
Ben c'est dasn mon pc, mais en une que tu veux en no repeat comme ca c pas grave pour la taille juste voir si toi ca marche car moi que dal.



Bonjour Smiley smile

Attention, s'il vous plait, de bien prendre garde à la qualité de vos échanges, imaginez le texte ci-dessus lu par un lecteur vocal, pensez-vous que ce sera compréhensible ?

Smiley cligne Merci d'avance !
Modifié par dominique (31 Jan 2006 - 17:10)
ok Je reformule :

a écrit :
Pourtant c'est dans mon pc, mais celle que tu veux en "no-repeat" comme ca c'est pas grave pour la taille juste voir si toi ca marche car moi pas du tout.


Voilà !
Il faut faire attention au chemein de ton image qui doit etre relatif la feuille de style et non pas au document html
Oui parfaitement, c'est vraiment sympa de ta part. Car j'avou que dans les tableau ect je me débrouille. Mais la je veux en faire un que en CSS et sans tableau, et j'avou que l'approche est totalement différente donc plus compliqué.
Enfin ca va tu as été là pour m'aider.
Sinon moi je suis plus doué dans le php, c'est plus mon domaine. Enfin comme on dit son truc. Donc si un jour ta un souci n'hésite pas. Et en ce qui concerne le partenariat, pour faciliter les choses je te propose de remplir le formulaire dans la partie de mon site prévue à cette effet.
Ainsi tu auras tous les renseignements nécessaire. !

Cordialement !
Pages :
Sujet clos
Aller à