28220 sujets

CSS et mise en forme, CSS3

Je rajoute une maquette 'bidon' pour mieux voir
ici : http://club-7a.info/test/test.php [/url]

Avec ce 'test' le logo (neo-..) apparait en plein milieu de la colonne de droite - c'est pire (heu c'est pourtant le m^me code que le 'vrai fichier..donc la hauteur gloable impacterait?)

Bonjour à tous,

je bute sur la positionnment d'un logo.
A 2 doigts de passer en table, j'ai pour le moment opté pour une 'ruse' :

Dans un div container (de centrage, en beige), il y a un div 'main' (le contenu en bleu) qui n'aura pas d'overflow - donc la page va s'étendre verticalement, et le container aussi.

A sa droite un div de 153px de large (float right, en vert) qui n'est pas la zone de menus , mais recevant des liens et autre blocs.

Au début ce div faisait toute la hauteur car celle-ci était fixe et on utilisait overflow auto.
En passant à overflow hidden, ce div de droite n'a JAMAIS voulu s'aligner en hauteur sur le main.

Je lui est donc retiré son image de fond (il est alors transparent , pour l'attribuer au container de centrage beige. Ainsi on se fiche que le div de doite aille jusqu'en bas. (visuellement le résultat est identique)

Le souci, c'est que je n'arrive pas à remettre le logo prévu sous ce div de droite TOUT en bas contre le footer et sans faire remonter le main de la hauteur du logo.

Au mieux il se colle juste sous le div de droite.

J'ai vraiment regarder plains de méthodes postées ici, sans succès..heu m^me en table je ne vois plus comment y arriver d'ailleurs.

width: 600px;

help ?




voici un schema de la structure (joindre une image
--

x upload/5763-Q-alsa1.png

--


Merci
Modifié par elz64 (18 Aug 2006 - 18:37)
Salut

Tu peux (dois) utiliser les positions absolues pour faire cela.

En plaçant le logo directement dans le conteneur :
#container {
   position: relative;
}
#logo {
   position: absolute;
   bottom: 0;
   right: 0;
}


Le position: relative sert à désigner le coin supérieur gauche du #container comme point de référence pour le positionnement des éléments à l'intérieur de #global.
Merci,


Toutefois cela me ramène à la solution que j'ai tentée il y a 3 heures.

Ca affiche bien le logo à droite mais toujours JUSTE dessous la colonne de droite et non pas à la même position TOUT EN BAS juste au dessus du footer.

..
Le logo ne doit pas être à la bonne place dans le code html ... Pour que ça fonctionne, il faut qu'il soit un des "enfants" du #containeur :
<div id="container">
   <div id="main">....</div>
   <div id="col_droite">....</div>
   <div id="logo">....</div>
   <div id="footer">....</div>
</div>

Modifié par Sopo (13 Aug 2006 - 13:50)
Bonjour,

Merci de fournir une url. Le nombre d'erreurs potentielles est trop élevé pour jouer au devinettes Smiley cligne
Modifié par Laurent Denis (13 Aug 2006 - 13:50)
a écrit :
Et un #logo {clear:both;margin-right:0px;} dans les css ?


j'ai déjà tenté ce matin, c'est bien pour la position (encore qu'il faille jouer sur le contenu (avec un &nbsp; et un heigt)

MAIS

ca AJOUTE un 'saut' de la hauteur du div logo SOUS le container MAIN, qui ne touche plus le footer.

Et ca, ca va pas. En css3 y'aurait le moyen simplement, mais... c'est qd ??

J'ai ajouté une url pour se rendre compte (voir post en haut)
Modifié par elz64 (13 Aug 2006 - 15:38)
Bonjour (re)

Une fois le code HTML corrigé de ses erreurs de validité, et une fois le logo remis à sa place, c'est à dire en image <img> et non en background CSS, il n'y a aucune difficulté à le positionner comme sopo te l'a indiqué, à l'aide d'une position:absolute; bottom: 30px; right: 0;

Sinon, une remarque: un élément ne peut à être à la fois flottant et positionné en absolu. Le float est ignoré dans ce cas.
ben voila.

une autre aventure s'achève.

( en img et effectivemnt sans utiliser de backgroung )

Evidemment... (?)

Merci Smiley lol

Oula j'ai parlé trop vite .

Sous ie j'ai la totale...
va encore falloir tout se repeler..tain!
Modifié par elz64 (13 Aug 2006 - 16:57)
Re.

Il reste encore 15 erreurs à corriger avant que le document soit valide Smiley confus . Dont apparement des soucis avec les balises head & body

Faut corriger tout ça avant de pouvoir espérer un rendu cohérent Smiley cligne
La plupart viennent des trucs des liens de référencement et sont sans intérêts. C'est pas ca qui fait exploser le design en ie !
je vais les retirer de la maquette de test.

[pour head et body ... Je ne comprends pas ces erreurs. ....heu <head>, <body> 4 lettres, voilà qu'est ce qu'on faire de + ?????????????????????????????????????

J'ai fait tous les tests avec les 4 DTD possibles .]



C'était juste parce que je travaille avec mes TAGS EN MAJ, plus des /> manquants sur 2 ou 3 lignes.

Là, c'est valide xhtml trans. et évidemment ca ne change rien au design pourrave sous ie.



Faut peut être pas non plus faire uniquement de la focalisation sur les validations.. car les pages des intervenants du Forum ne sont pas forcément valides non plus...

Mais je suis vraiment ouvert à tout.

Merci
Modifié par elz64 (14 Aug 2006 - 09:59)
a écrit :
Faut peut être pas non plus faire uniquement de la focalisation sur les validations.. car les pages des intervenants du Forum ne sont pas forcément valides non plus...

C'est important, pourtant. C'est le seul moyen d'avoir une "assurance" sur le rendu adopté par les navigateurs.

Quitte à être pénible, il faut corriger ta feuille de style, aussi.
c'est bon désormais.

Je comprends tes remarques, en gros j'essaye d'obtenir du 'propre'.

Mais
1/ le html ne peut être valide qu'à la condition de resté dans une pure optique de dev perso.

Le but étant de passer ceci sous Typo3, ca va certainement ne plus pouvoir rester valide à 100%.

2/Pour la valid CSS, le simple fait d'utiliser des -moz-.... n'est déjà pas 'supporté'.

il faut aussi employer des "_width" pour obtenir ce qu'il faut avec ie (là, un seul pour le moment ds toute la css !)

Je considère qu'aller au plus grand dénominateur commun est ce qu'il convient de faire.
heu comme toi sur deep Storm (?)

Pour avoir tout, à 100% validé, j'attendrais (longtemps) que les navigateurs se mettent d'accords et que les normes pour lesquelles je vient de passer un W.E à bricoler soient un peu plus qu'une vue de l'esprit dans leur implémentation.

Merci de ton aide,
Smiley cligne
Modifié par elz64 (14 Aug 2006 - 11:41)