Passer de HTML 4 en XHTML 1 ?

phelibre

phelibre

Membre actif
21 Avril 2005
685
10
17000 La Rochelle
phelibre.free.fr
Bonjour,

J'ai mon site perso ici qui est dépassé : html 4 & tableaux ...
J'aimerai le passer en xhtml avec menu déroulant voir image jointe et donc quitter les tableaux.
Comment arriver a avoir un ensemble centrale de 850x500 qui reste au centre du navigateur et avoir une boite au dessus 850x le reste et une autre en dessous 850x le reste de manière a avoir entre le top et le bottom 100% d'utilisé ?

:zen:
 
Ok vue la signature ;)
Voilà le code qui me convient :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Centrer une boite en CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">
body {
background: #333333 url(images/hautgalerie.png) repeat-y center;
margin: 0;
padding: 0;
}

#global {
position:absolute;
left: 50%;
top: 40%;
width: 850px;
height: 500px;
margin-top: -200px; /* moitié de la hauteur */
margin-left: -425px; /* moitié de la largeur */
border: 0px;
background-color: #800;
}
</style>
</head>

<body>
<div id="global">
<p>Ici le contenu</p>
</div>
</body>
</html>

bon hautgalerie fait 850px en x of course :)
Mais maintenant pour mettre différentes boite css dans global ça se passe comment ?
 
tu devrais faire un tour sur le site du zero, tu aurais moins de questions à poser.
Je ne me considère pas comme quelqu'un de "bon", mais le site dans ma signature, je l'ai fait après avoir fait un tour sur le site du zero et après quelques questions à Google (ya même du html 5 :D ).

Simple question aux autres : est-il possible de faire un "include" sans passer par du php ? C'est la seul méthode que je connaisse pour ne pas avoir à répéter un élément fixe dans toutes les pages comme pour un menu par exemple
 
Plusieurs remarques :


  1. Le positionnement absolu est à éviter, c'est mieux d'utiliser les marges.
  2. Comme dans le tuto de ma signature tu peux imbriquer les divs.
  3. Sur le forum c'est mieux d'utiliser les balises [code ]
Voici un exemple :
Bloc de code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Centrer une boite en CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">
body {
background: #333333 url(images/hautgalerie.png) repeat-y center;
margin: 0;
padding: 0;
}

#global {
width: 830px;
height: 500px;
margin: auto;
margin-top: 50px; /* moitié de la hauteur */
border: 0px;
background-color: #800;
padding: 10px;
}
#nav {
    margin: 0;
    padding: 0;
    float: right;
}
#nav li {
    float: left;
}
hr {
    visibility: hidden;
    clear: both;
}

</style>
</head>

<body>
<div id="global">
    <h1><img src="logo.png" alt="Phelibre"/></h1>
    <ul id="nav">
        <li><img src="map.png" alt="plan du site"></li>
        <li><img src="enveloppe.png" alt="envoyez-moi un email"></li>
    </ul>
    <hr/>
    <div id="content">
        <p>Ici le contenu</p>
    </div>
</div>
</body>
</html>

Mais si tu veux partir de zéro, lis ce tutoriel pour débutants. ;)

---------- Nouveau message ajouté à 23h43 ---------- Le message précédent a été envoyé à 23h40 ----------
daffyb a dit:
Simple question aux autres : est-il possible de faire un "include" sans passer par du php ? C'est la seul méthode que je connaisse pour ne pas avoir à répéter un élément fixe dans toutes les pages comme pour un menu par exemple
Cliquez pour agrandir...

Il y a les server side includes de Apache, faut voir si ton serveur est configuré pour. C'est très peu utilisé à l'heure actuelle, je ne connais pas les inconvénients du système.
 
alors pour commencer.
Dans le html
Bloc de code: 
<html>
	<body>
		<div id="content">
			<div id="en-tete">
			</div>
			<div id="corps">
			</div>
			<div id="pied-page>
			</div>
		</div>
	</body>
</html>

Dans le css.
Bloc de code: 
body
{
	background-color: #800;
}
#content
{
	width: 830px;
	margin: auto; /* Pour centrer notre page */
}


---------- Nouveau message ajouté à 00h57 ---------- Le message précédent a été envoyé Hier à 23h50 ----------

Bon, j'ai fait ça
html :
Bloc de code: 
<!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" xml:lang="fr" lang="fr">
<head>
	<title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    	<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
</head>
    <body>
		<div id="content">
			<div id="en-tete">
			</div>
			<div id="menu">
			</div>
			<div id="corps">
				<h1>Ceci est un titre H1</h1>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed lacus mi. Nunc vel tellus ut metus accumsan ultrices. Sed felis nisi, sodales eu placerat ornare, imperdiet sit amet mauris. Vestibulum est tortor, consectetur eget auctor ut, adipiscing ut diam. Vestibulum neque massa, aliquet mattis vestibulum ut, porttitor eget massa. Fusce dapibus neque vitae odio vulputate in semper nisi ullamcorper. Donec eget tortor non mauris suscipit semper vitae at nibh. Quisque malesuada, arcu nec sodales porttitor, enim mauris elementum mi, ac hendrerit massa arcu eu eros. Nullam convallis mi ut dolor cursus interdum. Fusce tincidunt dolor a sapien condimentum hendrerit. Cras nec turpis orci, facilisis ultrices purus. Curabitur ut odio arcu, non adipiscing purus. Integer nec facilisis quam. Vivamus non adipiscing massa. Nam non nisi in massa fringilla scelerisque in quis odio. Fusce erat est, semper sed accumsan a, placerat id nibh. Vestibulum in mauris mi. Proin quis purus erat.</p>
					<h6>Generated 5 paragraphs, 714 words, 4852 bytes of <a href=http://www.lipsum.com/">Lorem Ipsum</a></h6>
			</div>
			<div id="pied-page">
				<img src="bas.jpg" />
			</div>
		</div>		
	</body>
</html>

CSS
Bloc de code: 
body
{
	background-color: #333333;
}

#content
{
	width: 850px;
	margin: auto; /* Pour centrer notre page */
}

#en-tete
{
	background-image: url("top.gif");
	background-repeat: repeat-y;
	height: 50px;
}

#menu
{
	background-image: url("menu.jpg");
	background-repeat: none;
	height: 94px;
}

#corps
{
	padding: 10px;
	background-color: #595959;	
}

#pied-page
{
	background-image: url("bottom.gif");
	background-repeat: repeat-y;
	height: 100px;
}

C'est un bon début. Il ne reste plus qu'à faire les boutons etc. @+
 
Ok, merci pour les tuyaux , un petit tour sur des tutoriaux ...
Par contre si vous allez sur la page de ma galerie on voit une barre horizontale pour le défilement ...

Comment avec mes boites en float: left ; je peux dépasser mes 850 px dans le cas présent ?

NB: jai finis la mise en page de l'accueil (sans tableaux) en xhtml , merci :zen:
 
daffyb a dit:
Simple question aux autres : est-il possible de faire un "include" sans passer par du php ?
Cliquez pour agrandir...
Oui, tu peux éventuellement faire ça via JavaScript ou directement en html en faisant quelque chose du style:
Bloc de code: 
<object data="brol.html" type="text/html">
La meilleure solution reste néanmoins un include côté serveur :)
 
Ouaip l'include tu peux le faire facilement en javascript, genre tu remplaces le innerhtml d'un élément par un truc chargé par une requête ajax (pour ce dernier point, utilise une lib javascript légère, genre prototype, ça facilite nettement le boulot).
Mais t'es jamais à l'abris que la requête foire, que ça fasse un affichage bizarre pendant que ça charge, etc... Bref, je plussoie ce qui a été dit avant, si c'est un bête include, autant le faire côté serveur.
Pour le centrage, horizontalement ça pose pas de problème, verticalement, tu peux chercher en javascript côté YUI, il doit y'avoir des choses pour le faire je pense (non vérifié), juste faire gaffe à pas inclure 50 fichiers JS qui vont alourdir la page.
 
Je le répète: le centrage vertical et horizontal avec marges négatives n'est pas utilisable avec l'iPhone, lors d'un zoom il est impossible de déplacer la zone pour se balader sur la page. Pareil quand l'élément centré est plus grand que la zone de visualisation. Svp ne faites pas ce genre truc. ;)
 

Sujets similaires

L
iPhone SE ne recharge plus du jour au lendemain...
Réponses
5
Affichages
3K
iPhone
flotow
flotow
G
2025 - O.C.L.P : OS upgrade SANS clef de boot ET universelle (directement depuis MacOS existant) .
Réponses
11
Affichages
4K
Hackintosh
Guinioul38
G
pocketalex
Xreal Air ... le Vision Pro avant le Vision Pro ?
Réponses
30
Affichages
15K
Réagissez !
pocketalex
pocketalex
K
Automator : désarchiver automatiquement les archives se trouvant dans plusieurs dossiers différent
Réponses
9
Affichages
3K
Raccourcis et automatisation
Kersey
K
M
Bug iPhone aide svp
Réponses
16
Affichages
7K
iPhone
Membre supprimé 1099458
M
Haut Bas