affichage xhtml et css ... prob positionnement IE et Firefox

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : affichage xhtml et css ... prob positionnement IE et Firefox

FreddoZ

suite a un conseil je réedite le post ...

Je me met au xhtml et css pour nos futurs site et j'essai d'adapter un script de http://openweb.eu.org/ et rien a faire, j'ai un scroll en bas de ma fenetre c'est la memerde !!!

si kkun as une idée en passant sinon je continu bien qu'il ne me reste plus beaucoup de cheveux

Une image etant plus parlant voila le source ...

Citation :

<?xml version="1.0" encoding="iso-8859-1"?>
<!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">
<head>
<title>grrrrrrrrrrr css </title>
<style>
BODY {
PADDING: 0px;
MARGIN: 0px;
PADDING-TOP: 0px;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
font-size : 0.8em;
}

.content {
width: 100%;
border: 1px solid #000000;
margin-left:150px;
}
.menu {
border: 1px solid #000000;
width: 150px;
}

html>body .menu {
position: fixed;
}
.centre {
width:30%;
float : left;
BACKGROUND-COLOR: #FFFFC8;
}
.gauche {
BACKGROUND-COLOR: #D4D0C8;
float : left;
width: 30%;
}
.droite {
BACKGROUND-COLOR: #C8C8FF;
float : left;
width: 40%;

}
</style>
</head>
<body>
<div class="menu">menu</div>

<div class="content">
<div class="centre"> centre</div>
<div class="gauche"> gauche</div>
<div class="droite"> droit</div>
</div>

<br /><br />

Et ce le resultat que je cherche :
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="150">menu</td>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="30%" bgcolor="#FFFFCC" >centre</td>
<td width="30%" bgcolor="#CCCCCC">gauche</td>
<td width="40%" bgcolor="#CCCCFF">droit</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Publicité

FreddoZ

Personne ? sniff quelqu'un connaitrai un forum special css alors ????

simogeo

j'ai jamais tué de chats, ...

je regarde ca plus tard

---------------
from here and there -- \o__________________________________ -- la révolution de la terre, en silence

FreddoZ

merci m'sieur ... ça fait des heures que je suis dessus !!!
je réponds aussi aux messages quand je sais, c'est comme l'auto-stop ça, ne s'arette que ceux qui en ont déja fait

S1290

Pffffff, cela me rappelle de mauvais souvenirs, d'ailleurs il y a des trucs que je ne maitrise toujours pas entre Internet Explorer et Mozilla par exemple :

Couleur de fond d'un bloc derrière un autre bloc auto-dimensionnable... Internet Explorer n'y arrive pas ! Mozilla si...

FreddoZ

Citation :

ça me rassure a moitié ... et la pour mon code t'as pas une idée ?

simogeo

j'ai jamais tué de chats, ...

tout a fait normal que ton navigateur se comporte de la sorte....

si je prend et j'additionne les width je trouve

150px (menu) + 100% (content)

donc forcement, il y a un dépassement de 150px [:spamafote]

il faut que tu passes ton menu en %.

essayes par exemple 20% et passe ton content à 80%

ca derait déjà être mieux

---------------
from here and there -- \o__________________________________ -- la révolution de la terre, en silence

shabata

petit deviendra grand

Bon, tu me diras ce que tu en penses, j'ai essayé cela :

Code :

body {
padding: 0px;
margin: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size : 0.8em;
}
.content {
width: 100%;
border: 1px solid #000000;
}
.menu {
border: 1px solid #000000;
width: 150px;
float : left;
}
.centre {
width:30%;
float : left;
background-color: #FFFFC8;
position:relative;
}
.gauche {
background-color: #D4D0C8;
float : left;
width: 30%;
position:relative;
}
.droite {
background-color: #C8C8FF;
float : left;
width: 40%;
position:relative;
}

Code :

<div class="menu">menu</div>
<div class="content">
<div class="centre"> centre</div>
<div class="gauche"> gauche</div>
<div class="droite"> droit</div>
</div>

bonne chance....
perso moi j'aurais gardé la structure en tableau et j'aurais juste changé les attributs

S1290

Oui, je crois qu'il s'agit d'un problème de boite :

--> Pour le même code source XHTML/CSS, deux présentations différentes :

--> Va voir cette page si ça aide :
http://openweb.eu.org/articles/dimensions_boites_css/

Bonne chance.

Voici pour information le code source XHTML 1.0 correspondant à l'image ci-dessus :

Code:

Citation :

<?xml version="1.0" encoding="ISO-8859-1"?>
<!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>Test XHTML -- CSS</title>
<link rel="StyleSheet" type="text/css" href="style_testbloc.css" />
</head>
<body>
<div class="conteneur">
<div class="boite1"><p>Contenu</p></div>
</div>
</body>
</html>

Et la CSS externe correspondante au document HTML ci-dessus :

Code:

Citation :

body {
background: #996699;
text-align: center;
margin: 0;
padding: 0;
border: 0;
}
.conteneur {
background: #999999;
margin-left: auto;
margin-right: auto;
text-align: left;
width: 778px;
}
.boite1 {
background-color: #990099;
margin: 48px;
padding: 24px;
border: 12px outset #336699;
width: 250px;
}
p {
background-color: #993399;
}

Message édité par S1290 le 17-06-2004 à 17:35:44

shabata

petit deviendra grand

S1290 a écrit :

Oui, je crois qu'il s'agit d'un problème de boite :--> Pour le même code source XHTML/CSS, deux présentations différentes

terrrrrible
c'est trop bien comme schéma....

Publicité

S1290

:lol: :lol: :lol:

Message édité par S1290 le 17-06-2004 à 17:39:14

shabata

petit deviendra grand

il faut savoir s'étonner de pas grand chose

FreddoZ

Merci a tous

je vais tacher de repondre a tous ... dans l'ordre !!

simogeo

Citation :

si je prend et j'additionne les width je trouve

150px (menu) + 100% (content)

donc forcement, il y a un dépassement de 150px

il faut que tu passes ton menu en %.

essayes par exemple 20% et passe ton content à 80%

vi vi ok, mais justement je ne veux pas que mon menu soit redimentionnable ... d'ou la taille fixe !! j'ai essayé et meme comme ça IE me met un decalage en haut ???? merci
BODY {
PADDING: 0px;
MARGIN: 0px;
PADDING-TOP: 0px;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
font-size : 0.8em;
}
.content {
width: 80%;
float:right;
}
.menu {
width: 20%;
}

html>body .menu {
position: fixed;
}
.centre {
width:30%;
float : left;
BACKGROUND-COLOR: #FFFFC8;
}
.gauche {
BACKGROUND-COLOR: #D4D0C8;
float : left;
width: 30%;
}
.droite {
BACKGROUND-COLOR: #C8C8FF;
float : left;
width: 40%;

}

shabata :

Citation :

bonne chance....
perso moi j'aurais gardé la structure en tableau et j'aurais juste changé les attributs

non ça marche po avec ton code, je veux vraiment faire un affichage css pour passer tout par feuille de style, les tableaux ne me servant qu'a l'affichage de données, merci

S1290

Citation :

v
--> Va voir cette page si ça aide :
http://openweb.eu.org/articles/dimensions_boites_css/

Bonne chance.

;( vi vi je connais que trop ce site ... bon ben je vais tester encore cette nuit et sinon on prendra le prob autrement merci ...

en tout cas merci a tous je fini les quelques touffes de cheveux qui me reste et aprés je me met a la couture, ou au point de croix j'hésite ... bonne soirée

gm_superstar

Appelez-moi Super

Et la prochaine évite de faire 50000 topics pour le même problème ça m'évitera de répondre pour rien...

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

FORUM HardWare.fr

Programmation

HTML/CSS

affichage xhtml et css ... prob positionnement IE et Firefox

Sujets relatifs
peut on forcer l'affichage systematique de la scrollbar verticale ?	affichage de vue
Prob Vba Docmd.OpenForm	Affichage du schema d'une base MySql?
prob de variable de session	[Java/SWT] : asyncExec et syncExec, Threads, affichage.
Quelle taille optimisée d'une page web pour un affichage en 800*600 ?	prob lors de l'affichage de variables de session
Prob affichage image sur site perso free .. help please
Plus de sujets relatifs à : affichage xhtml et css ... prob positionnement IE et Firefox

Page générée en 0.072 secondes