Xhtml/css - Help

Salon multimédia et support technique. Problèmes de navigation sur le forum, bugs, questions techniques, aide utilisateurs, tests, software, hardware, etc.

Messagepar LoveMode » 24 Aoû 2005, 21:57

Est-ce que quelqu'un connaît bien ces normes ?

J'ai des petits soucis de positionnement de calques, en fait je patauge entre les float, position absolue/relative etc... Je suis allé sur des sites comme Alsacréations, mais je ne capte pas tout, si quelqu'un pouvait m'expliquer, ça serait sympa ;)
C'est plus dur de traire une vache qui avance !

CowMode[Off]
Avatar de l’utilisateur
LoveMode
 
Messages: 1109
Inscription: 04 Juin 2004, 15:50
Localisation: RP

Messagepar jb » 24 Aoû 2005, 23:25

Je n'ai pas bien saisi la question mais la différence entre les chemins relatifs et absolus est fondamentale. Tu peux faire deux types de code : par exemple
Code: Tout sélectionner
http://voxel9.free.fr/images/dm_devotion_64.gif
est un chemin absolu. Absolu dans le sens ou on a répété (ce qui n'est pas toujours nécessaire) l'adresse totale http avec le nom de domaine et tout et tout.

Alors que si je place une image dans une page avec un lien relatif à la racine de mon site ou de mon repertoire, cela donne un code de type
Code: Tout sélectionner
<img src="/sofad1.gif">
et cela revient au final au même pour l'internaute. Tu vois la différence ?

Certains serveurs ne tolèrent que des chemins absolus pour des scripts, c'est souvent le cas avec les CGI sous Unix si je me souviens bien. Tout dépend à mon sens de la machine sur laquelle tu vas travailler et héberger et ce que tu vas y faire. Le mieux, si tu en as la possibilité c'est de contacter ton hébergeur et de lui poser ces questions.

En esperant que cela t'aide (pas certain en me relisant).

Bon courage.
But of course darling it's normal
Avatar de l’utilisateur
jb
Admin
 
Messages: 9998
Inscription: 04 Oct 2001, 14:45
Localisation: Paris e(s)t sa banlieue

Messagepar biloumousse » 25 Aoû 2005, 08:58

Non JB,

Il s'agit ici des positionnement CSS:
.style{
position: absolute;
}
ou
.style{
position: relative;
}
ou.style{
float : left;
}
etc...

LoveMode, peux- tu donner un exemple de ce que tu veux faire exactement?
Avatar de l’utilisateur
biloumousse
 
Messages: 191
Inscription: 18 Jan 2002, 21:02
Localisation: Paris / france

Messagepar LoveMode » 25 Aoû 2005, 10:16

Merci JB pour ton aide, mais c'est effectivement biloumousse qui a raison.

Voici le design du site, que j'ai découpé avec Image Ready.

Je me suis ensuite basé sur ce modéle pour faire ma mise en page. Mais comme on peut le voir, le menu gauche du modéle doit être remplacé par une image. C'est cette image que j'aimerais placer en bas du calque, et qu'elle y reste selon le contenu (plus ou moins long).

Je ne sais pas si c'est clair. Voici la mise en page que j'aimerais avoir (je l'ai un petit peu modifié, mais en gros c'est ça).

Si ça peut aider, voici mes codes sources, qui ne doivent pas être optimisés, mais c'est pas le soucis pour le moment :

HTML

Code: Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Socoba</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="socoba.css" />
</style>
</head>

<body>

<div id="conteneur">

     <div id="header"></div>

     <div id="haut">
     
         <ul class="menuhaut">
         <li>
            <img class="img" src="images/img_menug.jpg" alt="" width="153" height="39" /></li>
         <li><a href="">
            <img class="img" src="images/accueil.jpg" alt="" width="81" height="39" /></a></li>
         <li><a href="">
            <img class="img" src="images/realisations.jpg" alt="" width="129" height="39" /></a></li>
         <li><a href="">
            <img class="img" src="images/references.jpg" alt="" width="126" height="39" /></a></li>
         <li><a href="">
            <img class="img" src="images/recrutements.jpg" alt="" width="142" height="39" /></a></li>
         <li><a href="">
            <img class="img" src="images/contact.jpg" alt="" width="134" height="39" /></a></li>
         <li><a href="">
            <img class="img" src="images/img_menud.jpg" alt="" width="15" height="39" /></a></li>

         </ul>
      
     </div>

     <div id="gauche"></div>
     
     
       <div id="centre">

       partie centrale qui &quot;pousse&quot; les colones vers le bas.<br />
       partie avec du contenu occupant le reste de la largeur<br />
       partie avec du contenu occupant le reste de la largeur<br />
       partie avec du contenu occupant le reste de la largeur<br />
       partie avec du contenu occupant le reste de la largeur<br />

       partie avec du contenu occupant le reste de la largeur<br />
       partie avec du contenu occupant le reste de la largeur<br />
       partie avec du contenu occupant le reste de la largeur<br />
       partie avec du contenu occupant le reste de la largeur<br />
       partie avec du contenu occupant le reste de la largeur<br />
       partie avec du contenu occupant le reste de la largeur<br />
       
       partie avec du contenu occupant le reste de la largeur<br />
       partie avec du contenu occupant le reste de la largeur<br />
       partie avec du contenu occupant le reste de la largeur<br />
       partie avec du contenu occupant le reste de la largeur<br />
       partie avec du contenu occupant le reste de la largeur<br />
       partie avec du contenu occupant le reste de la largeur<br />       

       partie avec du contenu occupant le reste de la largeur<br />
       partie avec du contenu occupant le reste de la largeur<br />
       partie avec du contenu occupant le reste de la largeur<br />
       partie avec du contenu occupant le reste de la largeur<br />       
     </div>
     
     <div id="pied"><br />©2005 www.socoba.fr - Tous droits réservés</div>
</div>
     

</body>
</html>


CSS

Code: Tout sélectionner
body {
background: url('images/bg.jpg') fixed;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0
}
#header {
height: 177px;
background: url('images/header.jpg');
}
#haut {
height: 39px;
}
#conteneur {
position: absolute;
width: 780px;
left: 50%;
margin-left: -390px;
background-color:#e0e0e0;
}
#centre {
background:#fff;
margin-left: 155px;
}
#gauche {
position: absolute;
left:0;
width: 155px;
background: #E0E0E0;
}
#pied {
height: 32px;
background: url('images/footer.jpg') no-repeat;
text-align: center;
color: #fff;
}
.menuhaut {
list-style-type: none;
margin: 0;
padding:0;
}
.menuhaut li {
float: left;
display: inline;
margin: 0px;
}
.menuhaut a {
margin: 0 0px;
color: #000000;
}
.menuhaut a:hover {
text-decoration: none;
}
p {margin: 0 0 10px 0;}
.img {
border:0px;
}
C'est plus dur de traire une vache qui avance !

CowMode[Off]
Avatar de l’utilisateur
LoveMode
 
Messages: 1109
Inscription: 04 Juin 2004, 15:50
Localisation: RP

Messagepar jb » 25 Aoû 2005, 11:11

Au risque de me tromper à nouveau, si c'est <div id="gauche"> qui pose problème, pourquoi ne pas l'aligner tout simplement vers le haut ? Je ne sais pas si tu dois le mettre dans le code de ta page ou dans ton css, mais un attribut valign="top" devrait faire l'affaire, non ?
But of course darling it's normal
Avatar de l’utilisateur
jb
Admin
 
Messages: 9998
Inscription: 04 Oct 2001, 14:45
Localisation: Paris e(s)t sa banlieue

Messagepar LoveMode » 25 Aoû 2005, 11:42

D'aprés ce que j'ai compris, tous les positionnements se font dans le css, or la le code que tu proposes semble être du html, donc à placer dans le code html. De plus, penses-tu qu'utiliser un valign="top" placera mon image en bas et y restera selon le contenu ?

A la question "pourquoi le xhtml et le css ?", je réponds parce que ça allége pas mal le code de la page (donc plus compréhensible et moins lourd à charger), qu'en faisant appel à des classes et des id (entre autres) on touche au design complet du site (trés pratique pour les sites avec beaucoup de pages, mais pas seulement), et enfin parce que la majorité des navigateurs interpretent correctement ces codes, donc normalement pas de mauvaises surprises quant à l'affichage, même si Internet Explorer est utilisé en grande majorité.
C'est plus dur de traire une vache qui avance !

CowMode[Off]
Avatar de l’utilisateur
LoveMode
 
Messages: 1109
Inscription: 04 Juin 2004, 15:50
Localisation: RP

Messagepar biloumousse » 25 Aoû 2005, 15:01

jb a écrit:un attribut valign="top" devrait faire l'affaire, non ?

Pas dans un DIV.
valign est réservé aux cellules de tableaux, or le but de LoveMode est de ne pas utiliser de tableaux.
C'est la nouvelle mode et, très certainement, la futur norme.

==> LoveMode : j'ai commencé les tests avec ton code mais j'aimerais comprendre exactement ce que tu veux avant de me prendre la tête pour rien. C'est bien l'image très fondue que l'on voit sur le Design de ton site et qui se trouve en bas à gauche juste au dessus du footer?
Avatar de l’utilisateur
biloumousse
 
Messages: 191
Inscription: 18 Jan 2002, 21:02
Localisation: Paris / france

Messagepar LoveMode » 25 Aoû 2005, 16:16

Oui biloumousse c'est exactement ça. On ne va peut-être pas utiliser ce DIV finalement, et garder toute la largeur du contenu (780 px, la même que le header). Tu ne te prendras pas la tête en essayant, car ça m'interesse de savoir comment on fait. J'ai plusieurs projets de sites donc ça me sera sûrement trés utile.

Merci à vous en tout cas ;)
C'est plus dur de traire une vache qui avance !

CowMode[Off]
Avatar de l’utilisateur
LoveMode
 
Messages: 1109
Inscription: 04 Juin 2004, 15:50
Localisation: RP

Messagepar BassBeat » 30 Aoû 2005, 23:35

Je ne suis pas rentré dans le détail, mais ce site a l'air de donner pas mal d'explications.
"Just want your sexuality, (...) write me your poetry in motion.
Write it just for me, and sign it with a kiss."
K. Bush
Avatar de l’utilisateur
BassBeat
 
Messages: 621
Inscription: 04 Oct 2001, 12:35
Localisation: Châteaubleuteucheuls


Retourner vers Multimedia, What am I supposed to do?

Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 1 invité