[Question][Truc] Faire un message d'en-tête en tableau/html/css

Toutes les questions concernant ce tutos se poseront ici.

Date d'inscription: 30/05/2011

Coucou, voici mon nouveau tableau. Mon problème c'est le code CSS, je ne vois pas ce que je dois mettre en "nom de class" et en "nom de id. Comment dire, j'arrive pas à commencé mon code CSS.

Ha je viens d'y penser, comment mettre de la musique sous cette forme ?

Voila sinon heu le code ^^ je met le code :

Code:

<div class="en_tete">

<table border="1">
<tr>

<td colspan="3"id="tab1_colA"><center>Nouveautés & Annonces</center>
<marquee behavior=scroll direction="left">Bienvenue sur Haruna :)</marquee>
            </td>
</tr>

<tr>
<td colspan="3"id="tab2_colA"><center>Lecteur<br>
   <object width="250" height="40"><param name="movie" value="http://grooveshark.com/songWidget.swf" /><param name="wmode" value="window" /><param name="allowScriptAccess" value="always" /><param name="flashvars" value="hostname=cowbell.grooveshark.com&songIDs=15666674&style=metal&p=0" /><embed src="http://grooveshark.com/songWidget.swf" type="application/x-shockwave-flash" width="250" height="40" flashvars="hostname=cowbell.grooveshark.com&songIDs=15666674&style=metal&p=0" allowScriptAccess="always" wmode="window" /></object></center><br></td>

</tr>

<tr>
<td id="tab3_colA"><center>Navigation Rapide</center>
   <UL TYPE="circle">
   <LI><a href="http://">Le guide du débutant</a> <br>
<LI> <a href="http://">Le réglement </a> <br>
<LI><a href="http://">La chatbox </a><br>
   <LI><a href="http://">Présentation</a><br>
   <LI><a href="http://">Postes Vacants</a><br>
   <LI><a href="http://">Events</a><br>
   <LI><a href="http://">Partenariat</a>
</UL>

   </td>



<td rowspan="2"id="tab3_colB"><center>Contexte
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rutrum hendrerit dolor. Nullam quis turpis. Proin pellentesque pharetra risus. Praesent ornare porta metus. Suspendisse ut nulla. Proin mauris est, auctor nec, bibendum non, vulputate vitae, ligula. Phasellus at mi in nisi consectetur mattis. Praesent justo. Suspendisse potenti. Proin sit amet ligula. Nullam rutrum, metus ut porta tempor, sem mi vulputate velit, et eleifend lorem felis at justo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rutrum hendrerit dolor. Nullam quis turpis. Proin pellentesque pharetra risus. Praesent ornare porta metus. Suspendisse ut nulla. Proin mauris est, auctor nec, bibendum non, vulputate vitae, ligula. Phasellus at mi in nisi consectetur mattis. Praesent justo. Suspendisse potenti. Proin sit amet ligula. Nullam rutrum, metus ut porta tempor, sem mi vulputate velit, et eleifend lorem felis at justo.
   </center> </td>
<td id="tab3_colC"><center>Postes Vacants
   <div class="infobulle"><img src="http://images.imagehotel.net/s3muf00hif.png" class="transparence"><span>Nom du perso<div><img src="http://images.imagehotel.net/ylwnqezsqd.png"></div><div><a href="http://">Fiche du perso</a></div></center><div><a href="http://"></a></div></span></div></td>
</tr>

<tr>
<td id="tab4_colA"><center>Staff
   <div class="infobulle"><img src="http://images.imagehotel.net/hkgssl9ud1.png" class="transparence"><span>Fondatrice<div><img src="http://images.imagehotel.net/c8es691myg.png"></div><div><a href="http://haruna.forumgratuit.org/u1">Profil</a></div><div><a href="http://haruna.forumgratuit.org/privmsg?mode=post&u=1">Mp</a></div></span></div></center></td>

<td id="tab4_colC"><center>Communauté
   <p>Chanteur/Chanteuse : <br>
   Compositeurs :<br>
   Auteurs-compositeurs-interprètes :<br>
   Chef d'orchestre :<br>
   Instrumentiste :<br>
   Lycéen, lycéenne : <br>
   Professeurs : <br>
   Directeurs : <br>
   Interprètes :<br>
   Citoyens :<br></p>
   </center></td>
</tr>

<tr>
<td colspan="3"id="tab5_colB">Partenariat
<marquee><a href="http://haruna.forumgratuit.org/" target="_blank"><img src="http://images.imagehotel.net/w8ljg89g9l.gif"></img></a></marquee></td>
</tr>

<tr>
<td id="tab6_colA"> <center> Top Site </center>
<a href="http://haruna.forumgratuit.org/"><img
style="border: 0px solid ; width: 28px; height: 59px;" alt=""
src="http://images.imagehotel.net/6rsj58xr6d.png"></a>

   </td>
<td id="tab6_colB"></td>
<td id="tab6_colC"><center>Crédit<br>
   Forum crée par Haruna.<br>
Administré par Haruna.<br>
Thème, page d'accueil, CSS & HTLM By Haruna.</center></td>
</tr>
</table>
</div>

Voila merci d'avance Smile

Date d'inscription: 25/04/2011

Coucou, =)

Comme un exemple vaut mieux que de beaux discours...
Regarde bien ton code html et imaginons que l'on veuille changer la présentation de la partie Nouveautés & Annonces. On va donc regarder la partie concernée que je mets ci dessous:

Code:

<td colspan="3"id="tab1_colA"><center>Nouveautés & Annonces</center>
<marquee behavior=scroll direction="left">Bienvenue sur Haruna :)</marquee>
</td>

Là on voit que la cellule (le td) a un id :

Code:

id="tab1_colA"

Pour personnaliser donc ce bloc ci, on introduit ses propriétés css en réutilisant le nom de l'id du code HTML. On aura donc:

Code:

#tab1_colA {
Code CSS;
}

Ici on avait bien id="tab1_colA" donc on met un "#" devant le nom et pas un point que l'on mettrai pour une class (dans le cas où on aurai dans notre td: class="nomdeclasse").

Voilà, sinon pour la musique il faut aller sur Mixpod.com et faire une playlist. Mais bon pour ce dernier c'est pas l'endroit pour poser la question la prochaine fois songe à la rubrique "aide spécifique". Euuuuh

Date d'inscription: 14/06/2011

Bonjour. J'aimerais que mon tableau aille jusqu'au bout. Car là il est en plein milieu. Serait t'il possible que sa aille jusqu'au bout ?

Voici à quoi il ressemble pour le moment.

Spoiler:

Merci d'avance Bisous.

Et le code misstinguette ? Sans ça, on ne peut rien faire Smile

_________________

SoP Story :: 2ème votes éliminatoires

Date d'inscription: 14/06/2011

Ah... xD Le voila :

Code:

<div class="en_tete">

<table>
<tr>
<td>
<h1 id="titre_en_tete">Bienvenue</h1>
<p id="contenu_en_tete">Bienvenue sur Wonder' Graph.</p> </td>

<td>
<h1 id="titre_en_tete">Navigation Importante</h1>
<p id="en_tete_nav">* <a href="#" id="lien_en_tete">Lien 1</a></p>
<p id="en_tete_nav">* <a href="#" id="lien_en_tete">Lien 2</a></p>
<p id="en_tete_nav">* <a href="#" id="lien_en_tete">Lien 3</a></p>
<p id="en_tete_nav">* <a href="#" id="lien_en_tete">Lien 4</a></p>
<p id="en_tete_nav">* <a href="#" id="lien_en_tete">Lien 5</a></p> </td>
</tr>

<tr>
<td>
<h1 id="titre_en_tete">Le Staff</h1> <p id="staff_en_tete"><a href="#"><img src="staff.png" alt="pseudo" /></a><a href="#"><img src="staff.png" alt="pseudo" /></a><a href="#"><img src="staff.png" alt="pseudo" /></a><a href="#"><img src="staff.png" alt="pseudo" /></a><a href="#"><img src="staff.png" alt="pseudo" /></a><a href="#"><img src="staff.png" alt="pseudo" /></a></p> </td>
<td>
<h1 id="titre_en_tete">Nos Partenaires</h1>
<p id="logo_en_tete"><a href="#"><img src="logo.png" alt="nom du forum" /></a><a href="#"><img src="logo.png" alt="nom du forum" /></a></p></td>
</tr>

<tr>
<td> <h1 id="titre_en_tete">Les News</h1>
<p id="contenu_en_tete">Les News.</p></td>
<td><h1 id="titre_en_tete">Votez pour le fofo'</h1>
<p id="contenu_en_tete">Vote vite !</p> </td></td>
</tr>

<tr>
<td><h1 id="titre_en_tete">La Bannière du mois.</h1>
<p id="contenu_en_tete">Ici la Bann'</p> </td>
<td><h1 id="titre_en_tete">Crédits</h1>
<p id="contenu_en_tete">Ici Crédits</p></td>
</tr>
</table>

Ses le Html.

Et le css :

Code:

.en_tete{

background-color:#FFFFFF;

border:solid 1px #CCCCCC;
}

/****** Mise en page des colonnes ******/

table tr{
vertical-align:top;
}

#tab1_col1{

padding:12px;
}

#tab1_col2{

padding:12px;
}

#tab1_col3{

padding:12px;
}

#tab2_col1{

padding:12px;
}

#tab2_col2{

padding:12px;
}

/****** Mise en page des titres ******/

#titre_en_tete{
background-color:#68a4a9;
border:1px dashed #ffffff;

font-family:Georgia, "Times New Roman", Times, serif;
font-size: 16px;
color:#ffffff;
text-align:center;

}

/****** Mise en page du texte ******/

#en_tete_nav{
font-family:Tahoma;
font-size:16px;
color:#0d1128;
margin-left:35px;
margin-bottom:-4px;
}

#contenu_en_tete{
font-family:Tahoma;
font-size:14px;
color:#0d1128;
text-align:justify;
text-indent:12px;
padding-left:8px;
padding-right:8px;
margin-bottom:-4px;
}

#en_tete_infos_forum{
font-family:Tahoma;
font-size:12px;
color:#0d1128;
text-align:justify;
text-indent:12px;
padding-left:8px;
padding-right:8px;
margin-bottom:-4px;
}

#en_tete_news{
font-family:Tahoma;
font-size:16px;
color:#0d1128;
margin-left:12px;
margin-bottom:-4px;
}

#logo_en_tete, #staff_en_tete{
text-align:center;
}

#logo_en_tete a, #staff_en_tete{
text-decoration:none;
}

#logo_en_tete img{
padding-bottom:4px;
}

#staff_en_tete img{
padding-left:6px;
}

/****** Mise en page des liens ******/

#lien_en_tete{
color:#0d1128;
text-decoration:none;
}

#lien_en_tete:hover{
border-bottom:dotted 1px #0d1128;
font-weight:bold;
}

#vers_profil{
color:#0d1128;
text-decoration:none;
font-style:italic;
}

#vers_profil:hover{
border-bottom:dotted 1px #0d1128;
}

Ajoute une largeur à ton tableau et à ton bloc "en_tete"

_________________

SoP Story :: 2ème votes éliminatoires

Date d'inscription: 14/06/2011

Comment faire ?

Date d'inscription: 24/06/2010

alors

Pour régler une largeur : width: XXpx;
Pour régler une hauteur : height:XXpx;

_________________

J’ai toujours rêvé que mon ordinateur soit aussi simple à utiliser que mon téléphone.
Ce rêve est devenu réalité : je ne comprends plus comment utiliser mon téléphone [ by Bjarne Stroustrup ]

Mes cadeaux de Noel : Merci Clo

Merci Volt

Date d'inscription: 14/06/2011

Merci ;D

Date d'inscription: 29/06/2010

Hello,
Es-ce possible dans le css au lieu de faire des colonnes, faire des lignes :Oops: ? Bisous Do

Date d'inscription: 28/07/2011

Coucou ^^
C'est encore moiii Very Happy

Bon alors, voici mon html :

Html:

Code:

<div class="en_tete">

<table>
<tbody><tr>
<td id="tab1_col1">
<h1 id="titre_en_tete">Les nouveautés</h1>
<p id="en_tete_news"></p><ul><li>Ouverture officielle du forum le 06 septembre 2011</li>
<li>Le groupe des animateurs voit le jour!</li>
<li>Prochainement : une nouvelle section d'animation :D</li></ul><p></p>

<h1 id="titre_en_tete">L'animation du moment</h1>
<p id="en_tete_anim">En cours de préparation...</p>
</td>
<td id="tab1_col2">
<h1 id="titre_en_tete">Bienvenue sur le forum *** !</h1>
<p id="contenu_en_tete">Encore un forum de discussion générale?! Et bien non! Celui-ci parle des enfants, plus particulièrement des enfants de la grossesse jusqu'à 6 ans.
En effet, Les Petits Loustics vous propose de suivre le développement de l'enfant de l'état de foetus jusqu'à la troisième maternelle.
Vous pourrez alors découvrir le développement psychologique et psychomoteur de votre petit loup ^^
N'est-ce pas fantastique?
Mais ce n'est pas tout!
Chez nous, vous pourrez également nous parler de vos expériences, nous raconter de petites anecdotes ou encore partager des jeux, recettes et autres activités réalisables avec les enfants.
Sur Les Petits Loustics, nous sommes en famille. Alors n'hésitez plus à venir nous rejoindre ;)
<br><br>
Forum optimisé pour Mozilla Firefox <img src="http://i18.servimg.com/u/f18/13/08/32/68/firefo10.gif" alt="" border="0"></p>
</td>
<td id="tab1_col3">
<h1 id="titre_en_tete">Les partenaires officiels</h1>
<p id="en_tete_offi"></p><ul><a href="http://loustics.forumgratuit.be"><img src="http://img4.hostingpics.net/thumbs/mini_486820Logo8831.png" alt="Heberger image"></a>
<a href="http://www.hostingpics.net/viewer.php?id=486820Logo8831.png"><img src="http://img4.hostingpics.net/thumbs/mini_486820Logo8831.png" alt="Heberger image"></a></ul><p></p>

<h1 id="titre_en_tete">Crédits</h1>
<p id="en_tete_credits"></p><ul><a href="http://www.school-of-pub.net/"><img src="http://i754.photobucket.com/albums/xx188/School_of_pub/printemps_2010/logo_sop.png"></a>
<br><br>
<a href="http://loustics.forumgratuit.be/u1">Saray</a>
<br><br>
<a href="http://www.copyrightfrance.com/certificat-depot-copyright-france-D3691B9.htm"><img src="http://img11.hostingpics.net/pics/599901D3691B91.gif"></a>
</ul><p></p>
</td>
</tr>
</tbody></table>

<table>
<tbody><tr>
<td id="tab2_col1">
<h1 id="titre_en_tete">Playlist</h1>
<p id="en_tete_playlist">En construction...</p>
</td>
<td id="tab2_col2">
<h1 id="titre_en_tete">Les Partenaires</h1>
<p id="en_tete_partenaires"><span><marquee><a href="http://www.hostingpics.net/viewer.php?id=486820Logo8831.png"><img src="http://img4.hostingpics.net/thumbs/mini_486820Logo8831.png" alt="Heberger image"></a>**<a href="http://www.hostingpics.net/viewer.php?id=486820Logo8831.png"><img src="http://img4.hostingpics.net/thumbs/mini_486820Logo8831.png" alt="Heberger image"></a></marquee></span></p>
</td>
</tr>
</tbody></table>

</div>

Ainsi que mon CSS :

Css:

Voici un screen de mon en-tête actuellement :

Alors alors... La colonne 1 du tableau 1 refuse d'afficher ma couleur de fond ainsi que ma bordure... Et j'avoue que là, je comprends plus rien.
J'ai déjà essayé de mettre .en_tete afin d'appliquer la bordure à toute l'en-tête mais là encore il refuse de l'afficher... :/

Une âme charitable pour éclaire ma lanterne? ^^"

_________________

Don't worry, be happy. (Bobby McFerrin)

Sans coeur, nous ne serions que des machines. (W. Shakespeare)

Date d'inscription: 28/09/2010

Coucou Saray,

je ne vois pas où est ton problème. J'ai testé ton code avec Chrome et Firefox et je n'ai pas vu de problème.
(ou alors je n'ai pas compris où il était)...
Parce que dans mon test la colonne 1 du tableau 1 est bien en "violet".

_________________

Spoiler:

Date d'inscription: 28/07/2011

Bah chez moi le background ne s'affiche pas et les bordures non plus :/
Pourtant je suis sous Mozilla...

_________________

Don't worry, be happy. (Bobby McFerrin)

Sans coeur, nous ne serions que des machines. (W. Shakespeare)

Date d'inscription: 24/06/2010

Hum déjà le code couleur pour ton fond n'est pas le même pour la colonne 1 et pour la colonne2.

Code:

#tab1_col1{

background: #CC4466;

#contenu_en_tete{

background: #FFEEEE ;

#tab1_col2{

background: #FFEEEE;

Ensuite pour coder une bordure il faut procéder ainsi :

Code:

border: couleur type épaisseur;

et pour un coté :

Code:

border-top: couleur type épaisseur;

_________________

J’ai toujours rêvé que mon ordinateur soit aussi simple à utiliser que mon téléphone.
Ce rêve est devenu réalité : je ne comprends plus comment utiliser mon téléphone [ by Bjarne Stroustrup ]

Mes cadeaux de Noel : Merci Clo

Merci Volt