28173 sujets

CSS et mise en forme, CSS3

[résolu] positionnement texte + question sur feuille de style

salut.

bon déjà j'ai un petit problème avec le positionnement d'un texte sur l'image de mon footer.
en fait j'n'ai aucune problème pour le positionnement horizontal mais quand je veux le déplacer vers le bas de 22 pixel, l'image se répète verticalement et c'est plus trop ca.

http://img462.imageshack.us/img462/6533/cssxf4.jpg

avant de copier-coller mon code, j'ai aussi une question au sujet des feuille de style.
peut-on mettre des liens directement dans la feuille de style pour ne pas avoir a les metre pour chaque page ?
comment ?

merci.

mon code...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>


  
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!--<link rel="stylesheet" type="text/css" href="css/style_index.css">-->


  


  
  <title>index</title>
  <style type="text/css">
body{
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
padding-top: 0px;
font-size: 0.8em;
margin: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #C9F2FF
}
.conteneur{
position:relative;
top: 10px;
left:50%;
width:800px;
margin:0 0 0 -380px;
}
.header{
height: 161px;
background: url('images/index_01.gif')
}
.frame{
margin-right: 158px;
overflow: auto;
width: auto;
height: 485;
border-left: solid thin;
border-color: #606060;
background: url('images/index_02.gif')
}

.menu{
right: 0px;
height: 485;
width: 158px;
position: absolute;
top: 161;
background: url('images/index_03.gif')
}
.footer{
height: 44px;
width: auto;
background: url('images/index_04.gif')
}
.footer LI{
margin-left: 100;
margin-right: auto;
margin-top: 0px;
font-family: sans-serif;
font-size: xx-small;
list-style-type: none
}
.footer A{
color: #000000;
text-decoration: none
}
P{
margin: 0px 0px 5px
}
.menudroite1{
position: right;
padding-left: 40px;
padding-right: auto;
padding-bottom: 0px;
padding-top: 0px;
margin: 0px;
list-style-type: none
}
.menudroite1 LI{
margin-bottom: 5px;
margin-top: 5px
}
.menudroite1 A{
margin: 0px 2px;
color: #000000;
text-decoration: none
}
.menudroite1 A:hover{
text-decoration: overline underline
}
.menudroite2{
position: right;
padding-left: 40px;
padding-right: auto;
padding-bottom: 0px;
padding-top: 45px;
margin: 0px;
list-style-type: none
}
.menudroite2 LI{
margin-bottom: 5px;
margin-top: 5px
}
.menudroite2 A{
margin: 0px 2px;
color: #000000;
text-decoration: none
}
.menudroite2 A:hover{
text-decoration: overline underline
}
.menudroite3{
position: right;
padding-left: 35px;
padding-right: auto;
padding-bottom: 0px;
padding-top: 55px;
margin: 0px;
list-style-type: none
}
.menudroite3 LI{
margin-bottom: 5px;
margin-top: 5px
}
.menudroite3 A{
margin: 0px 2px;
color: #000000;
text-decoration: none
}
.menudroite3 A:hover{
text-decoration: none
}
  </style>
</head>


<body>


<div class="conteneur">
<div class="header"></div>


<div class="frame">
partie "frame" scrollable <br>


partie "frame" scrollable <br>


partie "frame" scrollable <br>


partie "frame" scrollable <br>


partie "frame" scrollable <br>


partie "frame" scrollable <br>


partie "frame" scrollable <br>


partie "frame" scrollable <br>


partie "frame" scrollable <br>


partie "frame" scrollable <br>


partie "frame" scrollable <br>


partie "frame" scrollable <br>


partie "frame" scrollable <br>


partie "frame" scrollable <br>


partie "frame" scrollable <br>


partie "frame" scrollable <br>


partie "frame" scrollable <br>


partie "frame" scrollable <br>


partie "frame" scrollable <br>


partie "frame" scrollable <br>


partie "frame" scrollable <br>


partie "frame" scrollable <br>


partie "frame" scrollable <br>


partie "frame" scrollable <br>


partie "frame" scrollable <br>


partie "frame" scrollable <br>


partie "frame" scrollable <br>


partie "frame" scrollable <br>


partie "frame" scrollable <br>


partie "frame" scrollable <br>


partie "frame" scrollable <br>


</div>


<div class="menu">
<ul class="menudroite1">


  <li><a href="index.html">Acceuil</a> </li>


  <li><a href="">Avant propos</a> </li>


  <li><a href="">FAQ</a> </li>


  <li><a href="">Background</a></li>


  <li><a href="">Le jeu</a> </li>


  <li><a href="">M&eacute;dias</a> </li>


  <li><a href="">Forum</a> </li>


  <li><a href="">Site map</a></li>

  
</ul>


<ul class="menudroite2">


<li><a href="">Lien</a></li>


  <li><a href="">Lien</a></li>


  <li><a href="">Lien</a></li>


  <li><a href="">Lien</a></li>

  
  <li><a href="">Lien</a></li>

  
  <li><a href="">Lien</a></li>

  
</ul>

  
<ul class="menudroite3">

<li>Total</li>
<li>Aujourd'hui</li>
<li>Connecté</li>

</ul>


</div>


<div class="footer">
<ul class="footer1">
<li>This 
<span xmlns:dc="http://purl.org/dc/elements/1.1/" href="http://purl.org/dc/dcmitype/" rel="dc:type">work</span> is licensed under a 
<a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/">Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 License</a></li>
</ul>
</div>


</div>


</body>
</html>

Modifié par noals (01 Sep 2007 - 05:00)
Pour ta première question, si je comprends, c'est la ligne 
link rel="stylesheet" type="text/css" href="css/style_index.css"
que tu as mis en commentaire qui appelle ta feuille de style externe.

C'est dans cette feuille de style externe que tu colleras le contenu de ta css, celle qui se trouve en ce moment dans 
<style type="text/css"> ... </style>


pour ton pb de répétition de ton image de fond dans ton footer :

.footer{
height: 44px;
width: auto;
background: url('images/index_04.gif') no-repeat;
}
bon pour le no-repeat; c'est nikel merci.

pour la feuille de style séparé, je le sais, c'est pour ca que je l'avais en mis commentaire, pour séparé ensuite.
c'est juste plus pratique en une seul page pour modifier, etc...
c'est ma première feuille ^^;

mais pour y ajouté des lien ?
est-ce que j'peux metre mes classe dans ma feuille de style séparé avec les balise body aussi pour qu'ensuite j'n'ai qu'a metre le contenu du frame dans ma page html ?
si c'est ca, ben c'est nikel, j'savais pas que c'ete possible lol.

merci
Modifié par noals (01 Sep 2007 - 02:40)
non, ca a pas l'air possible, j'ai dis n'importe quoi encore.

en fait, ce que j'voudrai c'est que mon index affiche bien tous le site mais avec les liens dans ma feuille de style pour que je n'ai pas a recopier x fois les liens sur toute les page si j'veux en changer.

et aussi sans iframe ^^; ( j'suis difficile )

'fin bon, j'sais pas si c'est possible sinon j'laisserai comme ca, tampis.

je sais qu'il y a aussi peut etre un moyen avec du ssi (c'est bien ca ?), pour metre a jour toute mes page a l'aide d'une commande ou code injecté dans mon serveur mais c'est peu etre pas le mieu pour la sécurité je pense et comme j'm'y connais pas de trop...
Les feuilles de style ne sont pas là pour gérer le contenu de ta page, mais juste pour "habiller" ta page. Tu ne peux pas t'en servir pour stocker les liens de ta page.

Si ce que tu cherches à faire, c'est d'avoir un fichier (qui contient donc tes liens) que tu puisse appeler depuis n'importe quel page de ton site, il va falloir que tu utilises du php.

Ainsi dans ton code xhtml, tu inséreras :
<?php include "liens.html";?>


et dans ton liens.html, tu mettras uniquement la div de tes liens par exemple.

SI tu veux plus d'info, tu fais une recherche sur "php include" dans google, ou tu peux aller voir sur ALL HTML - Fonctions include
nikel merci, j'vais me renseigner, au moin je sais quoi chercher ^^
( si toute fois je dois chercher vu que t'as mi un lien Smiley smile )
a+
Modifié par noals (01 Sep 2007 - 03:44)
bon ben non en fait, j'ai déjà un problème
a cette adresse
http://www.quest-project.net/
j'ai trois fichiers
index.php
menu.inc.php
liens.inc.php

dans le fichier menu.inc.php, j'ai remplacer le premier lien "acceuil" du site mais j'ai eu beau remplacé les fichier plusieur fois en ftp et vidé mon cache IE, rien n'y fait, il redirige quand meme sur index.html qui n'existe pas.

c'est du a quoi ?

edit : meme dans la source il met 
<li><a href="index.html">Acceuil</a> </li>

j'sais pas pourquoi
Modifié par noals (01 Sep 2007 - 04:57)
noals a écrit :
bon ben non en fait, j'ai déjà un problème
a cette adresse
http://www.quest-project.net/
j'ai trois fichiers
index.php
menu.inc.php
liens.inc.php

dans le fichier menu.inc.php, j'ai remplacer le premier lien "acceuil" du site mais j'ai eu beau remplacé les fichier plusieur fois en ftp et vidé mon cache IE, rien n'y fait, il redirige quand meme sur index.html qui n'existe pas.

c'est du a quoi ?

edit : meme dans la source il met 
<li><a href="index.html">Acceuil</a> </li>

j'sais pas pourquoi


edit2 : autant pour moi, j'm'ete tromper de fichier, ca dois etre la fatigue... ^^
( j'me suis meme tromper de bouton pour editer mon message..., désolé )

encore merci
Modifié par noals (01 Sep 2007 - 05:02)
Sujet clos
Aller à