28173 sujets

CSS et mise en forme, CSS3

Mise en page d'une page html

Pages :
Bonjour !

Je suis nouveau sur se forum, je tenais donc dans un premier temps me présenter. Voilà je suis un jeune amateur de web (php, java...) Et depuis peu je m'essais sur le css et hml.
Bon ces présentations faites, passons dans le vif du sujet.

Voilà j'aimerais avoir une aide concernnt la mise en forme d'une page web avec les feuilles de styles css et les div.
J'aimerais en faites une page qui possède un fond d'écran, dans le haut une image, puis un menu verticale sur le haut (Ce menu je les déjà créé). Ensuite un bloc au milieu pour mettre mon texte et dans le bas un footer pour mettre un copyright.
J'aimerais que cela soit centré avec une taille pour faire en sorte de pas avoir de scrollbar, une page entière.
Une personne pourrait m'aider à faire cette mise en page, qui je dois deviné ne doit pas être compliquer, pour un pro mais très pour un novice.


Merci d'avance.


......................................................................
.                                                                    .
.                                                                    .
.                     logo du haut                              .
.....................................................................
.....................................................................
.                                                                   .
.                ..........................................         .
.                .                                        .         . 
.                .                                        .         .
.                .                                        .         .  
.                .                                        .         .
.                .                                        .         .
.                .                                        .         . 
.                .                                        .         .
.                ..........................................         .
.                                                                   .
.                                                                   . 
..................................................................... 
.....................................................................
Lu.
Je veux bien te faire ta mise en page , mais d'ores et deja une question:
" 1menu vertical en haut ", tu as voulu dire horizontale non?
en faite le fond d'écran possède de colone sur les coté et le centre vide ce qui permet de mettre un bloc texte qui é égal à 600 environ
Oui c'est parfait ! Croix-tu que je peux insérer mon menu facilement ?

Voici le code :


<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>

</head>


<body>
<center><div id="conteneur">
<div id="texte">
<div id="menu">
	<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></center>

</body>


et la feuille de style :


body {
margin: 0;
padding: 0;

background: white;
font: 80% verdana, arial, sans-serif;
}
#conteneur{
	 
	
	width:800px;
}
#texte {
	background-color: #F5F8FC;
	border:1px solid #6699FF;
	padding: 10px;
	height:800px;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute; /* placement du menu, à modifier selon vos besoins */
top: 200;
left: 300;
z-index:100;
width: 100%; /* correction pour Opera */
}
#menu dl {
float: left;
width: 8em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
margin: 1px;
}
#menu dd {
display: none;
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #eee;
}
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray; 
}


Et sinon pour que le page soit compatible un max de résolution cela est ok.
Et je peux insérer mon arrière plan facilement ? avec ton code ?

Voilà Merci encore de m'aider. C'est très sympa
pour le footer et le header je supprime les marges mais pour le menu tu m'avais ditb 600px et je vois que ton #container fait 800px faut donc que je redimentionne le #menu pour l'image d'arriere plan tu n'as plus qu'a mettre l'url de ton image a la place de"image.jpg dans la regle css #page
non le conteneur ne sert pas dans mon menu, c'était juste un essai c'est le menu que j'ai récupéré sur le site je vais le dimensionner à 600 environs.
aytre chose pour inserer ton menu supprime toute la partie du code avant <div id="container"> ainsi que </body>et</html>
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
Pages :
Sujet clos
Aller à