[CSS] background image

Marsh Posté le 04-05-2004 à 11:26:02

Salut,
je vous explique un peu mon site:
je l'ai fait en include PHP.
Dans ma page accueil.php (appellé a partir de index.php) et dans toutes les pages qui seront appellé par la suite au meme endroit, je voudrais qu'il y est une image en fond calée en haut à droite qui ne se repete pas.
J'ai essayé avec les CSS mais ça ne marche pas, dusmoins l'image n'apparait pas.
Pouvez vous me filez un coup de main?
merci

Reply

Marsh Posté le 04-05-2004 à 11:26:02

Reply

Marsh Posté le 04-05-2004 à 11:28:12

Peut on ecrire dans une feuille de style css, un tablo qui serait à 100% et qui aurait cette image en fond?

Reply

Marsh Posté le 04-05-2004 à 11:30:35

kameha a écrit :

J'ai essayé avec les CSS mais ça ne marche pas, dusmoins l'image n'apparait pas.

Montre ton code

---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire

Reply

Marsh Posté le 04-05-2004 à 11:39:10

voilà mon code dans ma feuille de style css:

Code :

}
.tablo-milieu {
background-image: url(../images/makette-1_11.gif);
background-repeat: no-repeat;
background-position: right top;
width: 100%;
}

Reply

Marsh Posté le 04-05-2004 à 11:40:52

Solution 1 : problème de chemin ou fichier manquant ?
Solution 2 : ton bloc n'a pas de hauteur donc ton image est là mais ne s'affiche pas

Reply

Marsh Posté le 04-05-2004 à 11:43:49

Le lien est bon.
J'ai mis de la hauteur a mon tablo, rien.

Otez moi un doute, dans ma page, mon style pour mon tableau, je l'appelle comme ça :

Code :

<table width="100%" border="0" cellspacing="0" cellpadding="0" style="tablo-milieu">

avec ça dans le head:

Code :

<link href="css/style.css" rel="stylesheet" type="text/css">

?

Reply

Marsh Posté le 04-05-2004 à 11:45:25

:non:

class="tablo-milieu"

Reply

Marsh Posté le 04-05-2004 à 11:46:02

pour le link, si ta feuille de style est dans le repertoire css et que ton fichier s'apelle style, laors oui, c'est bon

Reply

Marsh Posté le 04-05-2004 à 11:52:45

chacal_one333 a écrit :

:non:

class="tablo-milieu"

la voila l'erreur...merci

Reply

Marsh Posté le 04-05-2004 à 11:56:07

juste une question:
j'entends dire que les tableaux, pour etre au top, il ne faut les faire qu'avec les CSS. Ca veut dire qu'il n'y aurait plus de balise tr td dans ma page? Comment c'est possible ça?

Reply

Marsh Posté le 04-05-2004 à 11:56:07

Reply

Marsh Posté le 04-05-2004 à 11:57:25

si si, mais ca veut dire que toute les propriétés des tableau doivent etre ecrites en CSS

height, width, padding...

Reply

Marsh Posté le 04-05-2004 à 11:59:50

donc sachant que ce tableau sera sur toutes mes pages "milieu":

Code :

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="tablo-milieu">
<tr>
<td></td>
</tr>
</table>

je ne peux alleger plus et mettre tout ça dans mon fichier .css.
Obligé de la laisser dans mon code html (?)

Reply

Marsh Posté le 04-05-2004 à 12:02:42

kameha a écrit :

juste une question:
j'entends dire que les tableaux, pour etre au top, il ne faut les faire qu'avec les CSS. Ca veut dire qu'il n'y aurait plus de balise tr td dans ma page? Comment c'est possible ça?

Pas de tableaux = pas de tableaux pour la mise en page
http://openweb.eu.org/articles/problemes_tableaux/

Donc positionnement des éléments via CSS (lire les articles à ce sujet sur openweb)

Reply

Marsh Posté le 04-05-2004 à 12:03:51

pour la mise en page OK. Interessant ton lien.

Reply

Marsh Posté le 04-05-2004 à 12:04:00

table.tablo {
width:100%;
border:none;
border-collapse:collapse;
}

la c'est tout propre

Reply

Marsh Posté le 04-05-2004 à 12:05:43

kameha a écrit :

donc sachant que ce tableau sera sur toutes mes pages "milieu":

Code :

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="tablo-milieu">
<tr>
<td></td>
</tr>
</table>

je ne peux alleger plus et mettre tout ça dans mon fichier .css.
Obligé de la laisser dans mon code html (?)

tu peux virer le border aussi et le mettre en CSS
les cellspacing et cellpading peuvent rester dans le HTML (ils existent encore en XHTML 1.1)

Message édité par antp le 04-05-2004 à 12:06:04

---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire

Reply

Marsh Posté le 04-05-2004 à 14:12:43

chacal_one333 a écrit :

table.tablo {
width:100%;
border:none;
border-collapse:collapse;
}

la c'est tout propre

tu redefinis bien la balise "table" là?
J'ai inseré ton code dans ma feuille de style mais ça marche pas pour l'instant.

Reply

Marsh Posté le 04-05-2004 à 14:14:55

autant pour moi, jdis nimporte quoi, ça marche tres bien

Reply

Marsh Posté le 04-05-2004 à 14:15:17

non, là il faisait une classe pour une balise table
pour redéfinir table il faut virer le ".tablo" de son code

---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire

Reply

Marsh Posté le 04-05-2004 à 16:04:17

j'aimerais que mon tableau qui contient le site qoit centré dans la page. Comment je dois m'y prendre dans ma feuille de style.
Y a pas moyen d'intervenir au niveau du body?

Reply

Marsh Posté le 04-05-2004 à 16:04:52

http://incongru.webdynamit.net/CasPratiques
cf. les deux premiers liens

Reply

Marsh Posté le 04-05-2004 à 16:06:36

pourquoi t'as besoin d'un tableau pour contenir ton site ? :??:

Message édité par antp le 04-05-2004 à 16:06:56

---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire

Reply

Marsh Posté le 04-05-2004 à 16:20:43

excuses moi detre lourd mais:
voila mon .CSS:

Code :

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #000000;
text-decoration: none;
margin: 0px;
padding: 0px;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #FFFFFF;
scrollbar-arrow-color:#F0F0F0;
text-align: center;
}
div#principal {
margin-left: auto;
margin-right: auto;
text-align: left;
}

Mon tablo ne se centre pas. Si j'enleve "text-align: left;" tout est centré.

Reply

Marsh Posté le 04-05-2004 à 16:23:41

Et tout ton contenu est bien dans un div qui a "principal" comme id ?

---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire

Reply

Marsh Posté le 04-05-2004 à 16:27:07

Ma page part comme ça:

Code :

<body> <div id="principal">
<table cellpadding="0" cellspacing="0" class="tablo-pixel">

et fini comme ça:

Code :

</table> </div>
</body>

ça m'a l'air bon

Reply

Marsh Posté le 04-05-2004 à 16:31:51

Il fait quoi là ce tableau ?

---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire

Reply

Marsh Posté le 04-05-2004 à 16:36:45

il englobe mon site (un tablo divisé en 3 lignes).
voici mon code pour mieux comprendre:

Code :

<body> <div id="principal">
<table cellpadding="0" cellspacing="0" class="tablo-pixel">
<tr>
<td>
<? include('haut.php'); ?>
</td>
</tr>
<tr>
<td>
<div id="bloc1">
<div id="bloc2">
<div id="bloc3"><? include('accueil.php'); ?>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td bgcolor="#CC0000">
<? include('bas.php'); ?>
</td>
</tr>
</table> </div>
</body>

Message édité par kameha le 04-05-2004 à 16:39:07

Reply

Marsh Posté le 04-05-2004 à 16:39:49

Et t'as besoin d'un tableau pour 3 lignes ? :heink: pourquoi tu fais pas 3 div ?

---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire

Reply

Marsh Posté le 04-05-2004 à 16:45:57

grrrrrr...pourquoi les choses qui te semblent evidentes ne le sont pas pour moi???

genre ça ? :

Code :

<body>
<div id="principal">
<? include('haut.php'); // L'entete ?>
<div id="bloc1">
<div id="bloc2">
<div id="bloc3"><? include('accueil.php'); // milieu ?></div>
</div>
</div>
<? include('bas.php'); // bas ?>
</div>
</body>

Message édité par kameha le 04-05-2004 à 16:47:13

Reply

Marsh Posté le 04-05-2004 à 16:53:40

c't'allegement de code!!

le centrage horizontale ne passe tjrs pas par contre

Message édité par kameha le 04-05-2004 à 16:53:58

Reply

Marsh Posté le 04-05-2004 à 17:29:07

j'aurais dit trois blocs l'un après l'autre, pas l'un dans l'autre (si tu veux avoir l'équivalent de tes trois td)

---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire

Reply

Marsh Posté le 04-05-2004 à 17:41:03

ils sont bien l'un apres l'autre non?
Les blocs imbriqués sont pour l'affichage correct de l'image de fond dans accueil.php, enfin je crois

Reply

Marsh Posté le 04-05-2004 à 17:44:42

l'un après l'autre c'est différent d'imbriqué pour moi
ton image de fond tu la mets dans principal alors

---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire

Reply

Marsh Posté le 04-05-2004 à 17:52:42

ça devient tech.
Mettre mon image de fond principal? jvois pas pourquoi?
elle se retrouve calé en haut a droite de ma page mais pas dans accueil.php?

Reply

Marsh Posté le 04-05-2004 à 18:07:20

Ha elle doit être que dans acceuil ? mais dans ce cas je ne vois pas pourquoi tu veux imbriquer tes div.
Je pensais que l'image était définie au niveau de la table

---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire

Reply

Marsh Posté le 04-05-2004 à 18:18:19

:pt1cable: au secours.
non cette images ne doit pas etre que dans accueil mais partout.

Il faut donc que je la mette dans div#principal ?

de ça:

Code :

}
div#bloc1, div#bloc2 {
width : 790px;
height : 362px;
}
div#bloc1 {
background-image : url(../images/makette-1_11.gif);
background-repeat: no-repeat;
background-position: right top;
overflow : auto;
}
div#bloc2 {
overflow : auto;
}
div#bloc3 {
padding : 10px 0 0 20px;
}
div#principal {
margin-left: auto;
margin-right: auto;
text-align: left;
}

il faut faire ça ? :

Code :

}
div#bloc1, div#bloc2 {
width : 790px;
height : 362px;
}
div#bloc1 {
overflow : auto;
}
div#bloc2 {
overflow : auto;
}
div#bloc3 {
padding : 10px 0 0 20px;
}
div#principal {
margin-left: auto;
margin-right: auto;
text-align: left;
background-image : url(../images/makette-1_11.gif);
background-repeat: no-repeat;
background-position: right top;
}

Reply

Marsh Posté le 04-05-2004 à 18:20:16

Pour info, j'ai suivi la methode au bas de cette page http://openweb.eu.org/articles/overflow_fond_fixe/.

Reply

Marsh Posté le 04-05-2004 à 19:56:33

ça me semble logique, si l'image doit servir de fond aux trois div

par contre tu devrais aussi spécifier la largeur de principal je pense

Message édité par antp le 04-05-2004 à 19:57:20

---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire

Reply

Marsh Posté le 05-05-2004 à 10:01:32

ça marche po mal...merci bien.

Je pars sur totalement autre chose au sujet de W3C.
J'ai des messages d'erreurs que je ne capte pas:

Code :

Line 21, column 60: end tag for "link" omitted, but OMITTAG NO was specified
<link rel="stylesheet" href="css/style.css" type="text/css">
Line 21, column 0: start tag was here (explain...).
<link rel="stylesheet" href="css/style.css" type="text/css">
Line 26, column 4: "DOCTYPE" declaration not allowed in instance
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR
Line 27, column 66: document type does not allow element "html" here (explain...).
...tp://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">

Reply

Marsh Posté le 05-05-2004 à 10:04:54

oublie pas le / a la fin du link

Reply

Marsh Posté le

Reply

[CSS] background image

Sujets relatifs:

Leave a Replay