28221 sujets

CSS et mise en forme, CSS3

Mettre un fond décoratif sans occasionner d'ascenseurs

Pages :
Bonjour,

j'ai une mise en page alignée à gauche qui fait 770px.
Je souhaiterais mettre une image à droite du contenu pour donner une décoration à ceux qui ont une résolution supérieure à 800/600

D'habitude je mets cette image dans le backgroud du body, mais celui-ci possède déjà une image (pour créer une colonne).

Mon problème est que je ne trouve pas de moyen de mettre cette image sans que cela occasionne un ascenseur horizontal jusqu''à la limite de cette image, ce qui ne convient pas pour la résolution de 800/600

QUi pourrait m'aider ?
Modifié le 23 Nov 2004 - 09:49
Bonjour,

Je pense que si tu ne veux pas d'ascenceur, il te faut obligatoirement inclure ton image dans ton background de body.

Inverse ta démarche, met cette image en premier et ensuite un autre conteneur avec ta colonne.

Jul
Bonjour,

tu peux utiliser overflow: hidden; pour cacher les ascenseurs
Modifié le 23 Nov 2004 - 10:46
Poire a écrit :
Bonjour,

tu peux utiliser overflow: hidden; pour cacher les ascenseurs


Merci Poire, j'ai bien essayé mais si je mets le overflow: hidden sur mon élément rien ne se passe et si je le mets sur le body, il n'y aura plus d'ascenseurs du tout évidemment Smiley decu
Bah tu met ta décoration dans le background justement.

Et ensuite ton histoire de colonne tu le calle dans le premier Div que tu décalles un peu avec un margin et ca devrait le faire. Il y a du texte dans ta décoration ou c'est juste une image en bg ?
juliofromlille a écrit :
Bah tu met ta décoration dans le background justement.

Et ensuite ton histoire de colonne tu le calle dans le premier Div que tu décalles un peu avec un margin et ca devrait le faire. Il y a du texte dans ta décoration ou c'est juste une image en bg ?


non c'est juste une image.

J'obtiens presque le bon résultat malheureusement, comme je mets une hauteur a 100% et qu'il y a le header qui vient avant, un scroll vertical de la hauteur du header apparait. (sous Mozilla uniquement)

Egalement si je mets un padding-top de la hauteur du header Smiley bawling


je crois que c'est bon, j'ai du créer un deuxième div qui lui contient le padding-top de la hauteur du header Smiley biggrin
Modifié le 23 Nov 2004 - 11:11
oui merci !!

S'il y a juste qqn qui pourrait encore m'aider pour le pied de page qui doit prendre toute la largeur et rester collé en bas, ca serait super Smiley lol
Modifié le 23 Nov 2004 - 11:16
Poire a écrit :
bottom: 0px; ?


malheureusement c'est plus compliqué que ca car si je mets mon div en position absolute avec bottom:0, il va se retrouver en bas de l'écran mais pas en bas de la page, donc dès que le contenu fais plus d' 1 écran de hauteur, ca ne va pas
il me semble que j'ai trouvé une solution,

j'ai simplement mis mon pieds tout à la fin, et pour pas que cela crée un ascenseur vertical, j'ai mis une margin-top: - la_hauteur_du_pieds

et pour que le pieds ne gêne pas le contenu j'ai mis un padding-bottom: la_hauteur_du_pieds.

Cela me parait trop beau pour être vrai !!??? Smiley eek
Pour ceux qui sont intéressés, vous pouvez voir l'ébauche du site à cette adresse.

et aussi une version avec beaucoup de texte pour tester le pied de page ici.
J'ai testé sous IE 6 et Firefox 1.0 sur PC.

Merci de me dire ce que vous en pensez, au niveau du code, de la feuille de style etc... Smiley biggrin
Modifié le 23 Nov 2004 - 14:23
Joli, joli...
.conteneur{
	width: 770px;
	background: url(images/gauche.gif) #F7EAE8 repeat-y;
	[b][#red]height: auto !important;
		height: 100%;[/#][/b]
	min-height: 100%;
}

Il faudrait savoir ! Smiley cligne

À part ça, salutations, cher confédéré Smiley lol

@+, HoPHP
Modifié le 23 Nov 2004 - 14:27
HoPHP a écrit :
Joli, joli...
.conteneur{
	width: 770px;
	background: url(images/gauche.gif) #F7EAE8 repeat-y;
	[b][#red]height: auto !important;
		height: 100%;[/#][/b]
	min-height: 100%;
}

Il faudrait savoir ! Smiley cligne

À part ça, salutations, cher confédéré Smiley lol

@+, HoPHP




oui c'était un petit hack que j'avais trouvé pour mettre une hauteur à 100% mais je ne crois pas qu'il soit très méchant et il fonctionne bien !!!

Eh eh salutation confédéré aussi ??????
Après avoir ôté la feuille de style, j'obtiens encore un commentaire:
<div class="header"><img src="images/logo_bauermeister.gif" /></div>
Pourquoi ? Au niveau sémantique, ce n'est pas excellent, parce qu'une personne qui travaillerait sans images ne saurait pas de quelle entreprise on parle. Je propose quelque chose comme ça:
<h1 id="main">Bauermeister & Muller SA</h1>
pour le (x)HTML

Je te laisse le soin d'écrire le CSS, parce que je ne vois pas vraiment. De plus, tu devrais mettre un "alt="" " et/ou un "title="" " sur ton image...

@+, HoPHP
HoPHP a écrit :

Je propose quelque chose comme ça:
<h1 id="main">Bauermeister & Muller SA</h1>



Moi j'utilise quelque chose un peu plus complexe : 

<div id="header">
<h1><a title="" href="index.html"><span>Compagnie bla-bla</span></a></h1>
</div>


<div> facultative, selon le contexte.
Logo en background du <h1>
Click <a> sur le header retourne en page d'accueil
Texte caché avec des <span> en utilisant "clip".
Modifié le 23 Nov 2004 - 15:57
j'ai mis une image car j'ai deja un background utilisé pour mettre en mosaique le reste du logo jusque tout à droite
Pages :
Sujet clos
Aller à