[CSS] Décalage d'un DIV par rapport à un autre

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [CSS] Décalage d'un DIV par rapport à un autre

sanpellegrino

Bonjour !

Je débute en CSS et suis en train de construire un site pour un association.

Mon problème:

.centre {
margin-left: 180px;
margin-top:0px;
width: 620px;
height:400px;
background-image:url(site_V1/back.jpg);
background-repeat:no-repeat;
background-position:bottom right;
}

.texte{
margin-left:15px;
margin-right:15px;
margin-top:15px;
margin-bottom:15px;
}

Le div centre se place sous mon header et à droite du menu gauche.

Sous IE tout s'affiche bien. Mais sous FF il met une marge de 15px entre le header et le div centre quand mon html est ceci:

Où est l'erreur (bug de FF ? Pas possible) ? Merci d'avance !

---------------
Got spyware ? | HFR HijackThis Tutorial

Publicité

Mjules

Parle dans le vide

il est où le header ?

---------------
Celui qui pose une question est idiot 5 minutes. Celui qui n'en pose pas le reste toute sa vie. | Membre du grand complot pharmaceutico-médico-scientifico-judéo-maçonnique.

FlorentG

Ben évidemment, si tu met margin-top:15px; dans le div class="texte", il va te mettre 15px de marge :??:

sanpellegrino

Dans le css:

.head1 {
text-align:left;
vertical-align:top;
background-image:url(site_V1/haut.jpg);
width:800px;
height:100px
}

Ensuite je l'utilise comme ça dans mon html:

C'est bizarre comme méthode ?

Merci !

---------------
Got spyware ? | HFR HijackThis Tutorial

FlorentG

Ben comme dit, tu as donné une marge à ton div, c'est normal que FF y mette une marge, non ?

sanpellegrino

FlorentG a écrit :

Ben évidemment, si tu met margin-top:15px; dans le div class="texte", il va te mettre 15px de marge :??:

Il devrait mettre 15px de margin-top par rapport à mon conteneur texte, non par rapport à mon header. J'ai une bande blanche entre mon header et mon div centre... C'est là le problème !

---------------
Got spyware ? | HFR HijackThis Tutorial

FlorentG

Ca s'appelle du margin-collapse. Met un padding à la place.

masklinn

í dag viðrar vel til loftárása

sanpellegrino a écrit :

C'est bizarre comme méthode ?

Merci !

Oui, les gens normaux ne mettent pas un header vide, ils mettent un header avec du contenu (texte habituellement) qu'ils remplacent par leur image/header via CSS, ce qui permet aux navigateurs textuels et aux crawlers (googlebot par exemple) de "voir" correctement les infos de la page

---------------
I mean, true, a cancer will probably destroy its host organism. But what about the cells whose mutations allow them to think outside the box by throwing away the limits imposed by overbearing genetic regulations? Isn't that a good thing?

sanpellegrino

FlorentG a écrit :

Ca s'appelle du margin-collapse. Met un padding à la place.

Merci ça marche .

C'est quoi la différence entre padding et margin alors :??:

Masklinn a écrit :

Tu as un exemple ?

---------------
Got spyware ? | HFR HijackThis Tutorial

FlorentG

Padding, c'est une marge interne, et margin c'est externe. On a, dans l'ordre :

margin - border - padding - content

Publicité

sanpellegrino

Merci :jap:

---------------
Got spyware ? | HFR HijackThis Tutorial

sanpellegrino

Masklinn a écrit :

J'y ai pensé mais dans l'image de fond de mon header il y a un texte avec ombres et lueurs fait dans Photoshop. Ca donne mieux qu'avec un texte remis en forme par CSS.

Il y a une autre méthode ? Exemples ?

---------------
Got spyware ? | HFR HijackThis Tutorial

masklinn

í dag viðrar vel til loftárása

sanpellegrino a écrit :

Tu as un exemple ?

http://www.csszengarden.com/ tout simplement

dans le div d'id "pageHeader", on trouve le titre de la page dans un h1 et le sous titre dans un h2, quasiment toutes les CSS de CSSZG les remplacent par une/des image(s) (et font de même avec les titres de paragraphes) et dans tous les CSS on peut trouver la ligne

/* using an image to replace text in an h1. This trick courtesy Douglas Bowman, http://www.stopdesign.com/articles/css/replace-text/ */

qui pointe vers cet article (long et en anglais, mais à lire en entier)

La méthode de base est le Fahrner Image Replacement (FIR)
on trouve également des variantes (mentionnées en fin d'article) telles que le Leahy/Langridge Image Replacement (LIR), le Rundles Text-Indent Method et le Cover-up Method.

et un article de Dave Shea (fondateur de CSSZenGarden) en faveur du FIR:

Citation :

In Defense of Fahrner Image Replacement
By Dave Shea
Published on August 5, 2003

The CSS-based background image replacement technique, also known as Fahrner Image Replacement (FIR), is a vital cornerstone of all future Web design.

As the Web moves away from presentational, hacked-up HTML towards a structural future, code is becoming abstract and graphic designers are losing their traditional control. CSS offers wonderful methods of regaining it, and in many ways goes further than HTML ever did. But it doesnt go far enough yet, and designers still need images.

Whether theyre photographs, individual headlines, or crisply anti-aliased and typographically beautiful pullquotes, images play a large part in a designers role on the Web. We can continue to use the img tag and lock ourselves into its quirks (and face its demise in XHTML 2.0, but I digress). FIR, however, offers more flexibility due to its fundamentally configurable nature. We dont just drop an image onto a page; instead, we create a structure for the image and then lay it over the structure. Plus, we can modify the image from the style sheet itselfa true separation of content and presentation.

FIR is an absolutely essential tool to both the designer and the coder as HTML becomes less and less about presentation. It is far too important to be cast aside over some of the problems it has encountered, and this article aims to tell you what it is, how to use it, some of the problems in using it, and possible solutions.
A note from a graphic designer to coders and accessibility and usability experts who still dont get it: You may try telling us that image-based text is against what the Web is about, but thats blindly ignoring our needs, and the last time that happened the Web ended up with spacer.gifs and table hacks. Image is what pays us, and it pays well. Work with us, and we can create a better Web for everyone.

sanpellegrino a écrit :

t'as pas compris tout le principe.

le but n'est pas d'enlever l'image, mais d'avoir une information textuelle remplacée par la même information sous forme d'image via CSS, de manière à ce que les gens n'ayant pas accès aux images ou CSS ne perdent rien.

Message édité par masklinn le 14-01-2005 à 11:58:30

sanpellegrino

Masklinn a écrit :

Génial merci du lien et du conseil. Quasiment tout lu et je mets en application, le résultat est pas mal du tout [:romf]

J'aimerais juste comprendre comment faire correctement un menu avec rollover qui passe bien même sans style CSS. Ces li, ul c'estun peu du chinois

---------------
Got spyware ? | HFR HijackThis Tutorial

masklinn

í dag viðrar vel til loftárása

un menu avec rollover genre les objets qui changent de couleur toussa?
(parce que les menus déroulants pur CSS MSIE ne les gère pas)

http://css.maxdesign.com.au/listamatic/

sanpellegrino

Masklinn a écrit :

un menu avec rollover genre les objets qui changent de couleur toussa?
(parce que les menus déroulants pur CSS MSIE ne les gère pas)

http://css.maxdesign.com.au/listamatic/

Aaah excellent :love:

---------------
Got spyware ? | HFR HijackThis Tutorial

sanpellegrino

:??: Comprends pas ce qui se passe ici. Sur une page j'ai un menu de 50px de haut, dans mon div centre. Du coup j'ai crée un nouveau div texte2, comme le div texte, avec un padding-top de 65px.

.texte2{
padding-top:65px;
padding-left:15px;
color:#FFFFFF;
font-weight:bold;
text-align:justify;
}

Mon premier titre, une image (FIR, quand tu nous tiens ), s'affiche néanmoins en dessous de mon menu... et ce uniquement sous IE ! Sous FF l'affichage est impec.

Que changer pour que ça passe sous IE ?

Edit: Le problème venait du div contenant mon menu horizontal, moins large que le conteneur centre, c'est résolu .

Maintenant pourquoi le résultat était différent sur FF et IE :??:

Message édité par sanpellegrino le 15-01-2005 à 16:34:53

---------------
Got spyware ? | HFR HijackThis Tutorial

FORUM HardWare.fr

Programmation

HTML/CSS

[CSS] Décalage d'un DIV par rapport à un autre

Sujets relatifs
[CSS] Atribut pour alignement vertical du texte	importation d'un fichier css
[HTML][PHP][CSS] possible de remplir 2 div en même temps ?	HTML CSS - décalage dans mes tables
[RESOLU]CSS et rechargement	du php dans un fichier css
[CSS] FireFox <> IE problèmes d'affichage....	[CSS] Menu horizontal 1 ligne style www.macromedia.com ???
Plus de sujets relatifs à : [CSS] Décalage d'un DIV par rapport à un autre

Page générée en 0.064 secondes