28173 sujets

CSS et mise en forme, CSS3

Gabarit compliqué...

Bonjour!
Voilà un certain temps que je parcours ce forum sans m'être jamais inscrit, alors vala, parce que j'ai besoin d'un chtit coup de main Smiley cligne

Je dois faire un site en css avec pour gabarit cela : http://img199.imageshack.us/img199/7325/gabarit014lm.gif

J'ai regardé un peu dans les modèle proposé ici, mais rien qui semble correspondre, parce que je voudrais la barre de scroll pas à coté du bloc content, mais bien au bord de la page. Le gabarit a une largeur fixe.

Le résultat que je voudrais au final est un truc comme ça : http://img518.imageshack.us/img518/4882/image42cz.jpg

Mes soucis sont essentiellement :
La barre de scroll que je veux plus loin que le bloc "content", le menu en bas qui doit rester en bas, même si on redimensionne.

Merci pour vos pistes Smiley smile
Modifié par r2d2 (23 Apr 2006 - 19:03)
Modérateur
bonjour,

apres avoir modifier legerement un gabarit proposé la il y a quelques temps :
http://forum.alsacreations.com/topic.php?fid=4&tid=8891&s=gabarit

et ce coup ci ça tombe bien , le scroll s'affiche sur toute la hauteur.


<!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>pouet pouet</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-15" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<style  type="text/css">

* {margin:0;padding:0;}
html,body{
	height:100%;margin:0 ;
	background-color:#B28695;

}
#conteneur {
width:800px;margin:0 auto;
height:100%;
margin-bottom:-30px;
background-color:#C2D1CB;
overflow:auto;
}
#margeban {height:100px;}
#header {
height:100px;
background-color:#666666;
top:0;
	position:fixed!important;
position:absolute;
width:784px;
z-index:1;
}
#margepied {height:30px;}
#footer {
margin:0 auto;
height:30px;
width:784px;
background-color:#A89F57;
position:relative;
left:-8px;
z-index:1;
}
#menu{

	float:right;
	height:100%;
	background-color:#868686;
	width:130px;
}
ul{top:100px;
	position:fixed!important;/* hack a passer en commentaires conditionnels peut-etre ? */
position:absolute;
	padding-left:1.5em;
	margin-left:1.5em;
}
</style> 
</head>
<body>
<div id="conteneur">
<div id="header">Bannière supérieure</div>
<div id="margeban">
</div>
<div id="menu" >
<ul>
<li><a href="#" title="#">lien</a></li>
<li><a href="#" title="#">lien</a></li>
<li><a href="#" title="#">lien</a></li>
<li><a href="#" title="#">lien</a></li>
<li><a href="#" title="#">lien</a></li>
</ul>
</div>
debut <br/>
bla bla <br/>
bla bla <br/>
bla bla <br/>
bla bla <br/>
bla bla <br/>
bla bla <br/>
bla bla <br/>
bla bla <br/>
bla bla <br/>
bla bla <br/>
bla bla <br/>
bla bla <br/>
bla bla <br/>
bla bla <br/>
bla bla <br/>
bla bla <br/>
bla bla <br/>
bla bla <br/>
bla bla <br/>
bla bla <br/>
bla bla <br/>
bla bla <br/>
bla bla <br/>
bla bla <br/>
bla bla <br/>
bla bla <br/>
bla bla <br/>
bla bla <br/>
bla bla <br/>
bla bla <br/>
fin !
<div id="margepied"></div>
</div>
<div id="footer">Pied de page </div>
</body>
</html>


Pour les menus , tu as la "gallerie" d'alsacreationS ( Smiley smile ) qui pour ce que tu veut requiert du javascript et un traitement special pour les png , traitement pour IE.

Voila une base , pour commencer a "travaillé" si cela te convient.

Pour le menu "deroulant" en javascript , un autre topic serait peut-etre plus a propos ...

++
Modifié par gcyrillus (23 Apr 2006 - 23:11)
Modérateur
de rien Smiley smile ,
je te laisse le soin de le prendre en main ...

++

heu , resolu ?
Modifié par gcyrillus (23 Apr 2006 - 22:53)
Yop, j'ai regardé un peu, Ya juste une chtite couille sur IE6, le menu de droite scroll aussi... Smiley eek

Et sur Opera, ya le header et le menu de droite qui scroll, mais je m'en fout un peut plus d'opera...

Vais cherché un peu. Pitetre qu'avec IE7 (le javascript magique, pas l'explorateur)
Modérateur
a écrit :
Voila une base , pour commencer a "travaillé" si cela te convient.


une petite recherche sur les positions , "absolute" et "fixed", devrait te permettre de regler ça je pense Smiley smile ,

ff et opera comprennent tres bien le fixed !

sinon reprend le code un peu plus haut
++
Vi vi, vais surement assez vite trouver Smiley smile

En tout cas merci Smiley cligne
Modifié par r2d2 (23 Apr 2006 - 23:19)
Bon, j'ai avancé un peu, et j'ai deux-trois truc pour lesquels j'ai de nouveau besoin d'aide... Smiley ohwell

Alors, voilà ou j'en suis : http://r2d2.cocotier.ch/alakran/
(encore rien testé sous explorer, que firefox)

Mes problème sont les suivants :
- j'arrive pas à trouver une bonne méthode pour fixer le menu de droite (gris). Pour le moment, c'est le ul qui est fixé, et pas le div du menu... et avec la hauteur en % par rapport à la page, ça fout la merde... Smiley ohwell
- j'arrive pas à trouver une bonne méthode pour laisser le blanc sous l'image (j'aimerais un truc style clear:vertical Smiley langue )

Si vous avez des idées...
Modifié par r2d2 (24 Apr 2006 - 13:28)
Hello,

Il me semble que cet article pourrait t'éclairer grandement sur certaines idées (sauf erreur de ma part).

Pour fixer le menu gris, je ne vois que le passer en 'absolu'. En effet, le 'double scroll' fait défiler le contenu du conteneur... Un peu comme sur mon blog tu utilises un conteneur avec un OVERFLOW ayant la propriété SCROLL.

Cela fait que tu dois le fixer à l'intérieur de ton DIV conteneur et non par rapport à ce qui l'entoure (sauf si j'ai mal compris le problème). Permet-moi alors de t'indiquer un autre article.

A te lire,

G.
Ok, bon, ça avance un peu... Smiley langue

http://r2d2.cocotier.ch/alakran/

Le menu de droite est maintenant fixé +- comme il faut (en tout cas, ça marche : D) et pour le blanc sous l'image, j'ai fait pour finir en donnant une largeur au content de gauche et non une largeur au div de l'image (ce que j'aurais préféré, d'ailleurs, si quelqu'un a une idée...).

Donc à part cette petite question, pas trop d'autre chose pour le moment...

Ah, si, un chtit truc, si quelqu'un a IE6 sous la main, ça donne une catastrophe ou ça va...?
Modérateur
bonjour ,
sous I6 , c'est une catastrophe

plusieurs probleme:

1)bug de marge gauche doublé sur les flottant.
2)menu horizontale non fixe (oubli du position :absolute pour IE.
3)Une barre de scroll apparait pour la fenetre (du au margin-bottom:-30px sur le conteneur global.
4)Une partie du menu horizontal disparait.
5)les images "png" ne sont pas "transparentes" et le haut du menu horizontale ainsi que la premiere ligne de contenu disparait.
6)la "banniere" et le "pied" se redimensionnentet semble deborder du conteneur principal.
...
Au vue du nombre de "defaut", il devient preferable de corriger les faceties de IE a part a l'aide des commentaire conditionnels jusyte avant la balise fermantes </head>.
<!--[if IE]>
<style type="text/css">
html,  body {
	overflow-y:hidden; /* scroll barre horizontal inutile sur le body */
}
#header {
	height:115px;/* transparence png ignoré , on raccourcie la hauteur de afin de laisser voir le texte */
	position:absolute; /* on "fixe" sa position */
	overflow-x:hidden;/* on lui interdit de se redimensionner en largeur */
}
#toolsbar_fixed {
	position:absolute;/* on "fixe" sa position */
}
#menu {
	overflow-x:hidden;/* on lui interdit de se redimensionner en largeur */
	}

#menu dt a  {
	position: relative;/* rappel de positionnement pour les lien du menu horizontal en dehors des liste */
	width:40px;*/ dimension arbitraire */
}

</style>
<![endif]-->
</head>


en reprenant chaque comportement desagreable de IE , les uns apres les autres et de preferences en reprenant les parents en premier et en suivant le flux , j'arrive a un resultat dans (mon) IE tres similaire a ce que je vois dans firefoxe .

++
Merci, me suis rappelé que j'avais un virtual PC qui trainait, et j'ai pu voir...
C'était pas trop ça Smiley langue
J'ai ajouté ton code, et c'est nettement mieux Smiley smile
faut juste que j'arrive à mettre le div "right" à côté du div "content" (là il se fout en dessous/à coté, très louche).

Encore merci à vous qui prenez du temps pour nous Smiley smile
Modérateur
:)

remplace les margin-left, de tes flottant par des padding-left de même valeurs , et IE devrait enfin avoir un rendu acceptable et ne plus doublé la valeur de la marge gauche sur #content
comme ceci par exemple.

#content {
	float: left;
	margin: 5px 0px 40px 0px;/* marge exterieur gauche a zero */
        padding-left:50px;/* marge interieur gauche en lieu et place  afin d'eviter un le "bug" d IE */
	width: 380px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	text-align: justify;
}


le fond de ce "conteneur " est transparent, pas de bordure non plus , la marge gauche exterieur passé en marge interieur convient bien dans ce cas ...

++
Merci Smiley smile

Alors, ça fonctionne au poil sur FireFox / Safari (avec les transparences) et au poil aussi avec IE6 (mais sans la transparence. D'ailleurs si quelqu'un sait comment la mettre, j'ai essayer
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.png',sizingMethod='scale');
mais ça marche pas Smiley decu )

Vala Smiley smile

edit : C'est nickel aussi sur Konqueror, mais ça je m'en doutais... Smiley ravi

edit2 : http://r2d2.cocotier.ch/alakran/
Modifié par r2d2 (27 Apr 2006 - 00:20)
Modérateur
bonjour,

a écrit :
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.png',sizingMethod='scale');


A eviter avec IE quand les zones conscernées contiennent des liens, ils deviennent incliquables .... et zut de zut !
tu peut eventuellemnt te rabattre sur sur un filter "alpha" et rendre les menu "opaques".

++
Modifié par gcyrillus (27 Apr 2006 - 02:18)
Vi, j'ai essayé, et il a pas trop aimé... Smiley langue
Pour le menu, il mettait la transparence lors du chargement, et ensuit, en mode "déroulant", il la mettait plus! Smiley eek
Sujet clos
Aller à