28172 sujets

CSS et mise en forme, CSS3

[Avis - Conseil] Squelette

Bonjour à tous!

Je pense avoir trouvé le bon siteweb pour me conseiller sur la conception du squelette de mon projet!

J'aimerais avoir vos avis et conseils (je n'ai pas peur de me faire descendre Smiley smile ) sur ce que j'ai réalisé.

Voici ce que cela donne sur Chrome 9:
upload/36159-webchrome.png


Sur FireFox 3.6:
upload/36159-webfirefox.png


Et finalement Internet Explorer 8:
upload/36159-webie.png

Au moins, vous savez de quoi je parle Smiley smile

Maintenant le code: indexp.php

<html>
	<head>
		<title</title>
		<link rel="stylesheet" type="text/css" href="css/gambitcss.css" />
	</head>
	<body>
		<div id="head">
			<?php
				include ('pages/shortcut.php');
			?>
		</div>
		<div id="columnLeft">
			<?php
				include ('pages/menu.php');
				include ('pages/login.php');
			?>
		</div>
		<div id="columnRight">
		</div>
		<div id="content">
		</div>
	</body>
</html>


et mon css:

body {width: 1024px; margin: auto; }

#head {width: 100%; height: 150px; background-color: red;}
	#shortcutHeader {width: 400px; height: 50%; float: right; margin-top: 7.2%; background-color:pink;}

#columnLeft {width: 18%; height: 500px;float: left; background-color: blue;}
	#navigation {width: 100%;  height:250px; background-color: black;}
	#menuLogin {width: 100%;  height:250px; float: left; background-color: grey;}

#columnRight {width: 18%; height: 500px; float:right; background-color: blue;}

#content {width: 82%; height: 500px; background-color: green;}


Voilà!

Donc maintenant j'aimerais avoir vos avis sur:
- La construction niveau <div> (grand débat)
--> Chaque page appelé par un include renferme un <div>
- La construction css (mise en place des différents blocks)
- Virer l'espace bleu dans ma columnLeft (qui est l'arrière du block columnLeft)
- Essayer d'avoir une homogénéité dans les différents browser...

Je sais que c'est un très gros post et très vaste, mais je pense qu'il est temps pour moi d'arrêter de bricoler des pages web et de passer à quelque chose de plus conventionnelle et surtout, plus propre!

Je vous remercie d'avance pour votre aide!
Modifié par haNjo (08 Feb 2011 - 11:44)
Bonjour et bienvenue sur Alsacréations,

Le mieux serait de nous montrer une page en ligne, nous n'avons pas besoin du code php mais de la page html produite (au pire nous donner le code html).

A ce sujet dans le code que tu nous soumets il n'y a pas de doctype et il devrait y en avoir un Smiley cligne
Je développe sur un serveur local, c'est pour cela que je vous ai mis des screens Smiley smile
pour le code, voici:

<html>
	<head>
		<title</title>
		<link rel="stylesheet" type="text/css" href="css/gambitcss.css" />
	</head>
	<body>
		<div id="head">

			&#65279;<div id="shortcutHeader">

                        </div>	
                </div>
		<div id="columnLeft">
			&#65279;<div id="navigation">
                       </div>
                       &#65279;<div id="menuLogin">
                       </div>	
          	</div>

		<div id="columnRight">
		</div>

		<div id="content">
		</div>
	</body>
</html>


Je suppose que les doctypes servent à "normaliser" un code?
Modifié par haNjo (08 Feb 2011 - 12:08)
Personne pour des commentaires constructifs? Smiley decu
Modifié par haNjo (09 Feb 2011 - 12:36)
Je viens d'ajouter le doctype, et c'est déjà plus uniforme.

Les rendus sont tous pratiquement identiques, hormis chrome qui me met un petit écart entre mon content et ma colonne de droite.

Je reprends un peu l'orientation de mon sujet qui est:
- une construction "multi-div" comme celle-ci est-elle la meilleure solution pour créer les différents blocks?
- le code css est-il propre? (pas au niveau de la présentation mais bien de son contenu)
- L'espace bleu au dessus des mes deux blocks de ma colonne de gauche est-il effaçable sans passer par un "margin-top: -xxpx" ?

Je vous remets le code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/gambitcss.css" />
	</head>
	<body>
		<div id="head">
			<div id="shortcutHeader">
			</div>
		</div>
		
		<div id="columnLeft">
			<div id="navigation">
			</div>
			<div id="menuLogin">
			</div>
		</div>
		
		<div id="columnRight">
		</div>

		<div id="content">
		</div>
	</body>
</html>


CSS
body {
	width: 1024px; 
	margin: auto; }

#head {
	width: 100%; 
	height: 150px; 
	background-color: red;}
	
	#shortcutHeader {
		width: 400px; 
		height: 50%; 
		float: right; 
		margin-top: 7.2%; 
		background-color:pink;}

#columnLeft {
	width: 18%; 
	height: 500px;
	float: left; 
	background-color: blue;}
	
	#navigation {
		width: 100%; 
		height:250px; 
		background-color: black;}
		
	#menuLogin {
		width: 100%; 
		height:250px; 
		float: left; 

		background-color: grey;}

#columnRight {
	width: 18%; 
	height: 500px; 
	float:right; 
	background-color: blue;}

#content {
	width: 82%; 
	height: 500px; 
	background-color: green;}

Vue sous chrome:

upload/36159-webchrome.png
Modifié par haNjo (09 Feb 2011 - 15:08)
Bonjour, je relance le sujet pour une question sur certains de mes div.
En image: upload/36159-leftcol.png

C'est donc ma colonne de gauche. J'aimerais que le <div> contenant mon menu soit placé tout en haut du <div> de ma colonne, et donc que le petit espace disparaisse.

Y-a-t'il une autre possibilité que de commencer à chipoter avec des margin négatif et autre?

Voici le code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

	<head>

		<title>Gambit</title>

		<link rel="stylesheet" type="text/css" href="css/gambitcss.css" />

	</head>

	<body>

		<div id="head">

			&#65279;<div id="shortcutHeader">

<a href="http://www.facebook.com/pages/Gambitt-Officiel/153997411317036"><img src="images/icon_facebook.png" /></a>

<a href="#"><img src="images/icon_twitter.png" /></a>



</div>		</div>

		<div id="columnLeft">

			&#65279;<div id="navigation">

	<ul>

		<li><a href="index.php?page=home" title="Accueil">Accueil</a></li>

		<li><a href="index.php?page=media" title="Media">Media</a></li>

		<li><a href="index.php?page=agenda" title="Agenda">Agenda</a></li>

		<li><a href="index.php?page=biographie" title="Biographie">Biographie</a></li>

		<li><a href="index.php?page=contact" title="Partenaires">Partenaires</a></li>

		<li><a href="index.php?page=contact" title="Contact">Contact</a></li> 

	</ul>

</div>

				<br><br>

			&#65279;<div id="menuLogin">

<form id="startSession">

	<img src="images/icon.user.png" />

	<input type="text" value="Utilisateur" onclick="this.value=''">

	<img src="images/icon.lock.png" />

	<input type="password" value="password" onclick="this.value=''">

	<input type="submit" value="Connecter" style="margin-left: 50%">

</form>

</div>		</div>

		<div id="columnRight">

		</div>

		<div id="content">

			&#65279;en construction		</div>

	</body>

</html>


CSS: 
#columnLeft {
	width: 18%; /*** 185px ***/
	height: 500px;
	float: left; 
	background-color: red;}
	
	#navigation {
	width: 181px;
	border-style: none solid none solid;
	border-color: #D0D0D0;
	border-width: 1px;}
	
	#navigation ul {
		list-style: none;
		margin: 0;
		padding: 0;}

	#navigation li a {
		height: 24px;
		text-decoration: none;} 
 
	#navigation li a:link, #navigation li a:visited {
		color: #777;
		display: block;
		background: url(../images/menu5.gif);
		padding: 8px 25px 0 10px;
		text-align: right;}

	#navigation li a:hover {
	color: #fff;
	background: url(../images/menu5.gif) 0 -32px;
	padding: 8px 25px 0 10px;
	text-align: right;
	}

	#navigation li a:active {
	color: #fff;
	background: url(../images/menu5.gif) 0 -64px;
	padding: 8px 25px 0 10px;
	text-align: right;
	}n: right;
	}
	
		
	#menuLogin {
		width: 100%; 
		height:250px; 
		float: left; }

Modifié par haNjo (17 Feb 2011 - 08:36)
Sujet clos
Aller à