[html] tableau/bordure

[Résolu/Fermé]
Signaler
Messages postés
336
Date d'inscription
dimanche 15 octobre 2006
Statut
Membre
Dernière intervention
25 juin 2009
-
 pixel -
Bonsoir à tous ! Pourriez vous m'aider sur la création de mon site web. Je suis à la page d'acceuil , je voudrais faire exactement la meme structure que ce site :[URL="http://infonationale.free.fr/MyWebSite/home.html"]http://infonationale.free.fr/MyWebSite/home.html[/URL]

C'est à dire avec deux collone une à droite ( qui est peu large )où je vais mettre les différentes parties de mon site et une à droite qui est plus large où je vais présenter mon site , et je voudrais aussi la même bordure que ce site , on voit bien la bordure en bas de la page. J'ai essayé de faire les collones avec photoshop , mais je sais pas si c'est ca qu'il fallait faire:bug:

Donc voilà ci joint les collones que j'ai fais + la sorte de bordure + l'index.html

[url]http://rapidshare.com/files/25147392/Nouveau_dossier.rar.html[/url]

Merci de bien vouloir le modifier afin d'avoir la même structure que ce site!

Merci de votre aide!!:king:

12 réponses

Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
914
salut,

Merci de bien vouloir le modifier afin d'avoir la même structure que ce site!

non, non, non et non.
tu nous demandes de faire le boulot à ta place et puis quoi encore ???
tu veux pas être payé en plus ?

moi je te donne mon savoir-faire si tu veux :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="fr" xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head> 
	<title>Sévèrement burné</title>
	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
	<style type="text/css">
		body{width:768px;margin:0 auto;}
		div{border:1px solid #333;}
		#banner{height:228px;}
		#left{height:498px;width:139px;float:left;}
		#content{height:498px;width:625px;float:left;}
		#footer{height:63px;width:766px;clear:left;}
	</style>
</head>
<body>
	<div id="banner"></div>
	<div id="left"></div> 
	<div id="content"></div> 
	<div id="footer"></div> 
</body>
</html>


si le code t'effraie tu peux voir le résultat.
et remarque bien que je t'arnaque pas sur la marchandise : la même structure et le tout validé xhtml 1.0 Strict et CSS 2.0 !
par contre pour le Mars, faudra aller au distributeur.
4
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 41989 internautes nous ont dit merci ce mois-ci


Pourquoi ne pas utilisé le code source de la page ?
Tu fais un copier coller dans dreamweaver exemple et tu essaies de voir ce qui t'interesse ou pas . tu modiefies un peu pour voir ce que ca donne jusqu'a arrivé au résultat que tu cherches a obtenir .

Il faut aussi chercher avant d'avoir des réponses toutes faites .
génération d'assisté !
Messages postés
336
Date d'inscription
dimanche 15 octobre 2006
Statut
Membre
Dernière intervention
25 juin 2009
4
J'ai essayé comme tu as dit avec dreamweaver mais celà ne marche pas ,'j'obtent rien de bon..
Messages postés
336
Date d'inscription
dimanche 15 octobre 2006
Statut
Membre
Dernière intervention
25 juin 2009
4
Merci 1000* Dalida escuse moi d'avoir agit ainsi , mais je voulais te demander le CSS ce n'est pas pareil que l'html? Car je me débrouille en html mais pas en CSS. C'est possible de faire la même structure que tu as faite juste en utisant l'HtML?

Et encore une question comment fait ton pour que celà soit validé CSS et xhtml?

Merci de ton aide!
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
914
salut,

html et css : même combat, c'est la même chose !
html c'est le contenu (par exemple, le titre sera "Faut que je me fasse un autre café") et css c'est la mise en forme (par exemple, centré et de couleur rouge).

dans le structure que je t'ai indiqué css permet de définir la taille des divisions, donc difficile de t'en passer. par ailleurs, la hauteur de chacune est définie et ce n'est pas forcement une bonne idée.

pour la validation :
HTML
CSS

pour apprendre les css :
Alsacréations
Pompage
une démonstration de css
Messages postés
336
Date d'inscription
dimanche 15 octobre 2006
Statut
Membre
Dernière intervention
25 juin 2009
4
Je suis entrain d'étudier le CSS actuellement. Pourrais tu me dire si celà ne te dérange pas comment ajouter un du texte dans la collone de droite , mettre ma bannière je sias que la balise c'est <img src="bannière.jpg"> mais je sais pas si sa s'applique pour le CSS !

Je dois crée moi même les images pour le fond de chaque collone par exemple avec photoshop ou je peux le faire directement avec le CSS. Car pour la bordure tous en bas je trouve celà difficile de le faire avec du CSS :s.

Merci à toi

A++
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
914
re,

tu n'es pas censé te "débrouiller en html". m'enfin...
le mieux c'est de se le faire expliquer en entier.
Messages postés
336
Date d'inscription
dimanche 15 octobre 2006
Statut
Membre
Dernière intervention
25 juin 2009
4
J'ai dejà éttudier l'html dans un bouquin mais là il me faudrait maitriser le CSS afin de comprendre corectement le code que tu m'as filé!

J'ai trouvé un article qui pourrais m'être plus utile qu'autres afin de comprendre le code que tu ma filé.

http://css.mammouthland.net/tableaux-bordures-fines-border-css.php
Messages postés
336
Date d'inscription
dimanche 15 octobre 2006
Statut
Membre
Dernière intervention
25 juin 2009
4
Dalida , on peut pas faire ce genre de structure qu'en html?
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
914
ce n'est que du html. mais pour mettre en forme tes balises html il faut leur appliquer un style. pour cela trois façons :

- en ligne
<html>
	<head>
		<title>Titre document</title>
	</head>
	<body>
		<p style="color:red;">blabla</p>
	</body>
</html>

- en en-tête du document html
<html>
	<head>
		<title>Titre document</title>
		<style type="text/css">
			p {color:red;}
		</style>
	</head>
	<body>
		<p>blabla</p>
	</body>
</html>

- lié au document html (une feuille de style)
<!-- ### Document html (index.html) ### -->
<html>
	<head>
		<title>Titre document</title>
		<link rel="stylesheet" type="text/css" href="style.css" />
	</head>
	<body>
		<p>blabla</p>
	</body>
</html>
<!-- ### Fin html ### -->

/* ### Feuille de style (style.css) ### */
p {color:red;}
/* ### Fin style ### */


mais tout est du 'pur' html. je ne sais pas quoi te dire de plus...
qu'est-ce qui te dérange ?
tu n'arrives pas à appliquer le style, la méthode ne te plait pas ?...
l'autre technique pourrait être celle du tableau (mais je ne te la conseille pas) et là encore il faut le mettre en forme avec un style de la même façon que ci-dessus.
Messages postés
336
Date d'inscription
dimanche 15 octobre 2006
Statut
Membre
Dernière intervention
25 juin 2009
4
Ce qui me dérange c'est celà :

<style type="text/css">
body{width:768px;margin:0 auto;}
div{border:1px solid #333;}
#banner{height:228px;}
#left{height:498px;width:139px;float:left;}
#content{height:498px;width:625px;float:left;}
#footer{height:63px;width:766px;clear:left;}
</style>
</head>
<body>
<div id="banner"></div>
<div id="left"></div>
<div id="content"></div>
<div id="footer"></div>
</body>

Ce n'est pas du Html.. mais du CSS c'est pour celà je n'arrive pas à bien le manier . Comment faire pour remplir les différents collones?
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
914
oki !

on reprend depuis le début !!!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="fr" xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head> 
	<title>Boulet or not boulet ?</title>
	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
	<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
	<div id="banner">
		<h1>Titre du document</h1>
	</div>
	<div id="left">
		<p>Navigation</p>
		<ul>
			<li>Menu 1</li>
			<li>Menu 2</li>
			<li>Menu 3</li>
		</ul>
	</div> 
	<div id="content">
		<h2>Titre</h2>
		<p>bla bla bla</p>
		<h2>Sous-titre</h2>
		<p>bla bla bla</p>
		<p>bla bla bla</p>
		<p>bla bla bla</p>
	</div> 
	<div id="footer">
		<a href="#">infos légales</a>
	</div> 
</body>
</html>


dans un fichier nommé 'style.css' et enregistré dans le même dossier que ta page tu mettra la mise en page :
 body{width:768px;margin:0 auto;}
div{border:1px solid #333;}
#banner{height:228px;}
#left{height:498px;width:139px;float:left;}
#content{height:498px;width:625px;float:left;}
#footer{height:63px;width:766px;clear:left;} 


ça devrait ressembler à ça.
mais utilise les indications au dessus et pas le fichier en ligne sinon tu vas patauger.

pour décorer tu peux appliquer un style à chaque balise (<div>, <a>...)

finalement j'aurai mieux fait de te faire le boulot directement, limite boulet sur ce coup là...
Messages postés
336
Date d'inscription
dimanche 15 octobre 2006
Statut
Membre
Dernière intervention
25 juin 2009
4
Voilà j'ai modifier ma page mais il ya un problème:

http://img408.imageshack.us/img408/7991/zarbdm2.jpg

Voilà le code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="fr" xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head> 
	<title>I'm not bouley ok?</title>
	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
	<style type="text/css">
		body{width:768px;margin:0 auto;}
		div{border:0px solid #333;}
		#banner{height:228px;}
		#left{height:498px;width:139px;float:left;}
		#content{height:498px;width:625px;float:left;}
		#footer{height:63px;width:766px;clear:left;}
	</style>
</head>
<body leftmargin="0" topmargin="0" background="background.gif">

	<div id="banner">
	<img src="essai2tl4.png" width="768" height="228"/>	
	</div>
	
	<div id="left">
	<img src="menu_g.gif" width="139" height="498"/>
	<p>Navigation</p>
		<ul>
			<li>Menu1</li>
			<li>Menu 2</li>
			<li>Menu 3</li>
	</div> 
	
	<div id="content">
	<body background="center.gif" width="625" height="498"/><font face"comic sans ms"> BIENVENU SUR MON SITE
	</div> 
	
	<div id="footer">
	<img src="bottom.gif" width="766" height="63"/>
	</div> 
	
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
914
je t'avais conseillé de mettre le style dans un fichier séparé mais bon...
c'est zarbi en effet le code html est pas correct du tout.
par habitude j'ai mis un doctype xhtml, donc il faut être pointilleux sur la rédaction et fermer toutes les balises.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="fr" xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head> 
	<title>l'important c'est d'y croire</title>
	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
	<style type="text/css">
		body{width:768px;margin:0 auto;background-image:url("background.gif");background-repeat:none;}
		div{border:0px solid #333;}/*tu veux la bordure autour des <div> ?*/
#banner{height:228px;background-image:url("essai2tl4.png");background-repeat:none;}
#left{height:498px;width:139px;float:left;background-image:url("menu_g.gif");background-repeat:none;}
		#content{height:498px;width:625px;float:left;background-image:url("center.gif");background-repeat:none;}
		#footer{height:63px;width:766px;clear:left;background-image:url("bottom.gif");background-repeat:none;}
		h1{display:none;}
#content p{font-family:"Comic Sans MS";}
	</style>
</head>
<body>
	<div id="banner">
		<h1>Vaut mieux mettre un header de niveau 1, il ne se verra pas (cf style h1)</h1>	
	</div>
	
	<div id="left">
	    <p>Navigation</p>
		<ul>
			<li>Menu1</li>
			<li>Menu 2</li>
			<li>Menu 3</li>
               </ul>
	</div> 
	
	<div id="content">
	<p>BIENVENU SUR MON SITE</p>
	</div> 
	
	<div id="footer">
	
	</div>
</body>
</html> 


toutes les images qui sont décoratives doivent passer en 'background-image'. pour faire une colonne pas besoin de mettre l'image dans toute sa hauteur. tu fais une image de 8px de haut et tu ajoutes
 image-repeat:repeat-y;
le navigateur fera le reste et c'est autant d'octets en moins à charger, donc beaucoup plus rapide !
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
914
et si tu veux que ta bannière soit un lien regarde .
Messages postés
13531
Date d'inscription
jeudi 9 janvier 2003
Statut
Contributeur
Dernière intervention
16 mai 2014
530
#left{height:498px;width:139px;float:left;background-image: url('bg_menu.gif');}


et voilà.
A+
Excellent Dalida merci tu m' as fait gagner des semaines.
[flame]Dommage que la plupart des css boys sont d' arrogants petits messieurs.[/flame]
Messages postés
336
Date d'inscription
dimanche 15 octobre 2006
Statut
Membre
Dernière intervention
25 juin 2009
4
Merci dalida et tous les autres de m'avoir aidé!
Bonjour,

Je suis de même à la recherche d'un modèle de tableau de bord en RH. Je désire m'initier à l'utilisation de tableaux de bord donc j'aurais besoin de votre aide afin de mieux comprendre la portée de ces outils à travers des exemples ou modèles.

Je vous remercie de votre générosité,

Karine