all html : Le portail des webmaster

liste des forums liste des discussions Participer à la discussion

Message publié le vendredi 18 juin 2010 - 10h41 par grapheyes.

Bonjour à tous,
Je suis nouveau sur le forum et je me suis inscrit suite à un problème en face duquel je me trouve aujourd'hui.

Je suis graphiste de formation et webmaster (depuis peu) de plusieurs sites. Je souhaiterais comme le sujet du post l'indique obtenir à partir d'un tableau html comportant plusieurs lignes un arrière plan "en débord" sur la première ligne et un arrière plan "en débord" sur la dernière ligne du tableau.

Je veux dire par "en débord" un arrièplan (couleur web ou gif) qui déborde du tableau html et qui s'affiche (sur toute la hauteur de la ligne bien sûre) sur toute la largeur de la fenetre d'un navigateur web quelquesoit l'échelle de l'affichage.

Voici une maquette vite faite ce matin sur photoshop pour illustrer ce que je cherche à faire sur l'arrière plan du site, au niveau du haut de page et du bas de page. Ci contre le lien : http://www.studio-liguane.fr/MiseEnPage.jpg
En espérant que cela sera plus clair pour tout le monde.

Je serais ravi que quelqu'un me guide vers un tutorial ou m'explique comment faire afin de réaliser ce genre de chose car je suis loin d'être développeur.

Merci encore à ceux qui prendront le temps de m'orienter.

• participer

Message publié le vendredi 18 juin 2010 - 23h19 par nours312. nours312.com -- je ne suis pas codeur bénévol, mais j'aide gratos ;)

salut !...

donc, pour commencer, je te conseil d'oublier la notion de "tableau", meme si tu vois très souvent des <table>, cet élément n'est pas fait pour mettre en place un design ;)

pour ton design, rien de bien complexe :

<div id="header"> <div class="content"> ... </div> </div> <div id="main"> <div class="content"> ... </div> </div> <div id="footer"> <div class="content"> ... </div> </div>

on a notre structure html coupée en 3 partie (sur toute la largeur de la page, vus que c'est une <div> )
à l'interrieur de chacune des parties, j'ai placé une autre div, qui ont toutes les trois une même classe, ça facilitera la mise en place du CSS

#header{ backgroud: url(...); } #main{ backgroud: url(...); } #footer{ backgroud: url(...); } .content{ width:1000px; margin:0 auto; border:1px solid black; }

là on a clairement demandé à ce que nos trois div "parent" aient chacune un bg différent
nos div.content (class=content) ont elles une largeur fixes et des marges droites et gauche automatique, cela signifi qu'elles vont se centrer par rapport à leurs parent ... (et donc par rapport à la largeur de la page ^^)

et voila !... Bienvenu ;)

• participer

Message publié le lundi 21 juin 2010 - 11h42 par Force4. Les oiseaux ont des ailes pour voler, et moi j'ai un coeur pour aimer. &#9829;

Bonjour,

Pour agrémenter la réponse de nours, voici quelques modèles de mise en page CSS, made in alsacreations :

http://www.alsacreations.com/static/gabarits/liste.html

Bon courage !

• participer

Message publié le lundi 21 juin 2010 - 17h57 par grapheyes.

Bonjour et surtout Merci de m'avoir répondu.
Je vais exploiter votre code et créer une page type que je mettrais en ligne pour voir un peu si cela va dans le sens de vos explications.
Encore merci à Nours et Force4.

• participer

Message publié le jeudi 24 juin 2010 - 11h27 par grapheyes.

Bonjour,
Désolé d'avoir pris un peu de temps pour répondre mais à vrai dire je bloque. Je ne sais pas comment lier le code CSS à ma page html.

<code>
<div id="header">
<div class="content"> ... </div>
</div>
<div id="main">
<div class="content"> ... </div>
</div>
<div id="footer">
<div class="content"> ... </div>
</div>
</code>

et

<code>
#header{ backgroud: url(...); }
#main{ backgroud: url(...); }
#footer{ backgroud: url(...); }
.content{
width:1000px;
margin:0 auto;
border:1px solid black;
}
</code>


Si quelqu'un pouvait m'aiguiller sur la marche à suivre, ce serait sympa.

Merci pour votre accompagnement.

• participer

Message publié le jeudi 24 juin 2010 - 11h43 par Force4. Les oiseaux ont des ailes pour voler, et moi j'ai un coeur pour aimer. &#9829;

Bonjour,

J'aurais espéré que tu t'intéresses au lien que je t'ai fourni, et fourres le nez dans le code des magnifiques gabarits d'alsacreations.com ! Tu y aurais trouvé ton bonheur, autant que dans les milliers de cours pour débutants concernant CSS & HTML ailleurs sur la toile.

La méthode conseillée est l'utilisation de la balise suivante pour lier une feuille de style externe à un document HTML :
<link rel="stylesheet" type="text/css" href="styles/base.css" media="all" />

• participer

Message publié le jeudi 24 juin 2010 - 13h19 par grapheyes.

Re-bonjour,
J'avais bien jetté un coup d'oeil rapide sur ton lien mais c'est vrai que je ne m'y suis pas attardé. J'aurais dû il me semble. Désolé Force4...
En tout cas ta réponse m'aide surtout à comprendre et je t'en remercie.
Je vais m'attarder un peu plus maintenant sur le lien que tu viens de m'envoyer.
Merci encore.

• participer

Message publié le jeudi 24 juin 2010 - 16h29 par grapheyes.

Encore merci à vous (Force4 et Nours312), j'ai réussi assez facilement a exploiter les ressources d'alsacreations.
C'est vraiment top!!

• participer

Message publié le jeudi 24 juin 2010 - 23h27 par nours312. nours312.com -- je ne suis pas codeur bénévol, mais j'aide gratos ;)

J'aurais espéré que tu t'intéresses au lien que je t'ai fourni, et fourres le nez dans le code des magnifiques gabarits d'alsacreations.com !

... t'as des actions chez eux !.. hein ? avoue !..:D

• participer

liste des forums liste des discussions Participer à la discussion

Vous devez obligatoirement vous identifier en tant que membre pour participer à cette discussion.