5568 sujets

Sémantique web et HTML

Site en largeur (tout sur une page)

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

d'accord,

Merci je vais commencer à le coder, et je vais mettre le rendu une fois fini Smiley smile
Bonjour,

Je viens de commencer mon projet (pour mes études) donc le site en largeur, j'ai quelque que questions.

Screenshot du site en ce moment, avec ton code _laurent

Pourquoi il ne colle pas les bords du haut et de gauche (alors que j'ai fait) :

#conteneur{
	top:0px;
	left:0px;
}
.part{
	top:0px;
	left:0px;
}


pareil j'ai ajouté une max-height mais cela ne marche pas comment ça se fait ?
et je n'arrive pas à ce que toute la page prenne l'écran même avec 

.part{
	float:left;
	width:25%;
}


sinon j'ai fait widht:25.4% cela prends toute ma page (je suis en 1600*900 avec firefox) mais après le dernier "p4" se mets en dessous des autres et non aligné, alors que j'ai augmenté en même temps le widht de la div conteneur à 401.6%

On peut m'aider ?

Merci

Sincères salutations.
Bonsoir,

J'ai réglé le problème, voilà ce que j'ai fait

body{margin:0px;}
#conteneur{
	height:100%;
	width: 8000px;
}

#menu{
	background-color:#fff;
	position:fixed;
	width:100px;
}

.part{
	position: relative;
	float:left;
	width: 2000px;
	height:880px;
}

#p1{
	background-color:#000000;
}

#p2{
	background-color:#555555;
}

#p3{
	background-color:#999999;
}

#p4{
	background-color:#cccccc;
}


j'ai donc defini la largeur du site à 8000px et avec chaque page 2000px de largeur. Pour reglé le problème du "#conteneur" qui ne collait pas le haut ni la gauche j'ai donc fait : 
body{margin:0px;}
qui à réglée ce problème.

Maintenant j'essaye de mettre un menu fixe sur la gauche Smiley smile
sauf que maintenant je veux mettre un menu à gauche, fixe mais je n'y arrive pas

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>international</title>
<link href="css/style2.css" rel="stylesheet" type="text/css">
</head>
<body>
		
		<div id='conteneur'>   
			<div id='left' >
				<div id='menu' >
				</div>
			</div>
			<div id='right' >
				<div id="home" class="part"> </div>
				
				<div id="actualite" class="part"> </div>
				
				<div id="carte" class="part"> </div>
				
				<div id="contact" class="part"> </div>
			</div>
		</div>
</body>
</html>


body{margin:0px;}
#conteneur{
	height:100%;
	width: 400%;
}

#left{
	float:left;
	height:100%;
	background-color:#696969;
	position:fixed;
	width:8%;
}

#right{
	position: relative;
	float:right;
	height:100%;
	width:17%;
}

#menu{
	height:100%;
	background-color:#696969;
}

.part{
	position: relative;
	float:left;
	width: 25%;
	height:900px;
}

#p1{
	background-color:#000000;
}

#p2{
	background-color:#555555;
}

#p3{
	background-color:#999999;
}

#p4{
	background-color:#cccccc;
}

Modifié par Dr.Revolte (11 Jan 2012 - 14:23)
_laurent a écrit :
et pour les smartphone il te faux un second site adapté spécialement aux téléphones...

Pour un site simple une utilisation des Media Queries en CSS suffira largement. Pas besoin de second site.
(Et pour un site compliqué ça peut également être fait avec une même base HTML, et des Media Queries voire un peu de JavaScript, mais ça va dépendre de ce qu'on veut faire exactement, c'est à voir au cas par cas.)

Dr.Revolte a écrit :
sauf que maintenant je veux mettre un menu à gauche, fixe

Avec du positionnement fixe bien utilisé, ça devrait être assez simple.
En passant, ça ne sert à rien de combiner position:fixed et float, ce dernier sera simplement ignoré. Et si tu utilises le positionnement fixe, tu voudras sans doute préciser au moins une partie des coordonnées de l'élément (par exemple top et left).

Dr.Revolte a écrit :
sinon j'ai fait widht:25.4% cela prends toute ma page (je suis en 1600*900 avec firefox) mais après le dernier "p4" se mets en dessous des autres et non aligné

Mathématiques niveau CM1: 25,4 multiplié par 4 ça fait 101,6. Forcément, si le contenu à faire tenir en largeur fait 101,6% de la largeur du conteneur, ça va déborder. Smiley cligne

Dr.Revolte a écrit :
j'ai ajouté une max-height mais cela ne marche pas comment ça se fait ?

Un height ou un min-height en pourcentages sur un élément ne sera pris en compte que si son élément parent a une hauteur (height) explicite. C'est assez restrictif comme comportement, et du coup les hauteurs en pourcentages sont rarement utilisables en dehors de cas bien spécifiques.
Modifié par fvsch (11 Jan 2012 - 23:21)
Merci beaucoup pour ton aide.

Je viens enfin de réussir à le mettre, j'ai ajouté z-index:5 et le blocs est apparu.

encore merci
Maintenant que j'ai mon conteneur en largeur qui fait 4 pages, et un bloc fixe sur la gauche.

J'aimerai faire en sorte que les divers blocs que j'ajoute qu'ils soient centrés en hauteur et largeur, par rapport à toute les résolutions, comment je fais ?

Cependant sur la largeur il faut retirer la partie qui est caché par le contenu fixe (de gauche appelé "left") et centrer ce qu'il reste de visible. Le contenu dans le blocs fixe à une largeur fixe. Dois-je le passé en % ?

J'ai ajouté le site en ligne sur mon ftp de travail (de l'iut) : http://195.83.128.55/~src11c06/projet/index.html

Pour que vous puisez voir le travail en directe

Mon autre problème aussi est le commencement de ma page contact. J'aimerai que le blocs de contact par email, colle la droite.

<div id="contact" class="part">
			<header>Contactez-nous!</header>
				<form class="form">  
					<p class="name">  
						<input type="text" name="name" id="name" />  
						<label for="name">Nom</label>  
					</p>  
					<p class="email">  
						<input type="text" name="email" id="email" />  
						<label for="email">E-mail</label>  
					</p>  
					<p class="web">  
						<input type="text" name="web" id="web" />  
						<label for="web">N° de t&eacute;l&eacute;phone</label>  
					</p>  
					<p class="text">  
						<textarea name="text"></textarea>  
					</p>  
					<p class="submit">  
						<input type="submit" value="Send" />  
					</p>  
				</form> 
		</div>



mais en faisant 

.form{
	right:0px;
}


Cela ne fonctionne pas. Comment faire ?
Car en passant par la droite j'éviterais le problème du blocs "left" qui est fixe (à gauche)

La solution pour les blocs et de tout passer en position:absolute ?

Merci beaucoup
Modifié par Dr.Revolte (16 Jan 2012 - 11:54)
Pages :
Sujet clos
Aller à