[html] tableau/bordure

Résolu

bioman93 Messages postés 336 Date d'inscription Statut Membre Dernière intervention -
pixel - 12 août 2008 à 05:39

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

A voir également:

[html] tableau/bordure
Tableau word - Guide
Tableau ascii - Guide
Tableau croisé dynamique - Guide
Trier tableau excel - Guide
Bordure de page word - Guide

12 réponses

Réponse 1 / 12

Dalida Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention 922

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.

Réponse 2 / 12

Utilisateur anonyme

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 .

Réponse 3 / 12

pixel

génération d'assisté !

Réponse 4 / 12

bioman93 Messages postés 336 Date d'inscription Statut Membre Dernière intervention 4

J'ai essayé comme tu as dit avec dreamweaver mais celà ne marche pas ,'j'obtent rien de bon..

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 12

bioman93 Messages postés 336 Date d'inscription Statut Membre Dernière intervention 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!

Dalida Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention 922

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

Réponse 6 / 12

bioman93 Messages postés 336 Date d'inscription Statut Membre Dernière intervention 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++

Dalida Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention 922

re,

tu n'es pas censé te "débrouiller en html". m'enfin...
le mieux c'est de se le faire expliquer en entier.

Réponse 7 / 12

bioman93 Messages postés 336 Date d'inscription Statut Membre Dernière intervention 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

Réponse 8 / 12

bioman93 Messages postés 336 Date d'inscription Statut Membre Dernière intervention 4

Dalida , on peut pas faire ce genre de structure qu'en html?

Dalida Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention 922

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.

Réponse 9 / 12

bioman93 Messages postés 336 Date d'inscription Statut Membre Dernière intervention 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?

Dalida Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention 922

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

Réponse 10 / 12

bioman93 Messages postés 336 Date d'inscription Statut Membre Dernière intervention 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>

Dalida Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention 922

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

Dalida Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention 922

et si tu veux que ta bannière soit un lien regarde là.

foobar47 Messages postés 13536 Date d'inscription Statut Contributeur Dernière intervention 533

#left{height:498px;width:139px;float:left;background-image: url('bg_menu.gif');}

et voilà.
A+

JeanBat

Excellent Dalida merci tu m' as fait gagner des semaines.
[flame]Dommage que la plupart des css boys sont d' arrogants petits messieurs.[/flame]

Réponse 11 / 12

bioman93 Messages postés 336 Date d'inscription Statut Membre Dernière intervention 4

Merci dalida et tous les autres de m'avoir aidé!

Réponse 12 / 12

karine11

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

Discussions similaires

Formule taux de marque

la balise <br> ou <br />

Votre réponse

Discussions similaires