[CSS] background image

Recherche :

Mot : Pseudo : Filtrer
Page : 1 2 3 Page Suivante Page Précédente Bas de page
Auteur	Sujet : [CSS] background image

kameha

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

Publicité

kameha

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

antp

Super Administrateur
Champion des excuses bidons

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

kameha

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%;
}

fastclemmy

(re-)Dictateur en plastique

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

kameha

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">

Profil supprimé

:non:

class="tablo-milieu"

Profil supprimé

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

kameha

chacal_one333 a écrit :

:non:

class="tablo-milieu"

la voila l'erreur...merci

kameha

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?

Publicité

Profil supprimé

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

height, width, padding...

kameha

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 (?)

fastclemmy

(re-)Dictateur en plastique

kameha a écrit :

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)

kameha

pour la mise en page OK. Interessant ton lien.

Profil supprimé

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

la c'est tout propre

antp

Super Administrateur
Champion des excuses bidons

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

kameha

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.

kameha

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

antp

Super Administrateur
Champion des excuses bidons

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

kameha

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?

fastclemmy

(re-)Dictateur en plastique

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

antp

Super Administrateur
Champion des excuses bidons

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

kameha

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

antp

Super Administrateur
Champion des excuses bidons

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

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

kameha

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

antp

Super Administrateur
Champion des excuses bidons

Il fait quoi là ce tableau ?

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

kameha

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

antp

Super Administrateur
Champion des excuses bidons

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

kameha

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

kameha

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

antp

Super Administrateur
Champion des excuses bidons

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

kameha

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

antp

Super Administrateur
Champion des excuses bidons

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

kameha

ç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?

antp

Super Administrateur
Champion des excuses bidons

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

kameha

: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;
}

kameha

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

antp

Super Administrateur
Champion des excuses bidons

ç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

kameha

ç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">

Profil supprimé

oublie pas le / a la fin du link

Publicité

Page : 1 2 3

Page Suivante

Page Précédente

Haut de page

FORUM HardWare.fr

Programmation

HTML/CSS

[CSS] background image

Sujets relatifs
Page avec menu en (x)html/css	[CSS] width: (100% - 140px)
lien sur une image	[CSS XHTML PRO] Avis sur 2 pages
[CSS] mise en page et largeur dynamique	Disposition de blocs en CSS
affichage d'image en C	[html/css] espacement vertical ?
Transformer une image monochrome en tableau de bit	[CSS] background-image: Problème
Plus de sujets relatifs à : [CSS] background image

Page générée en 0.077 secondes