28172 sujets

CSS et mise en forme, CSS3

Bloc chasse en dessous autre bloc

Bonjour à tous,

J'ai un petit problème de mise en page de css.

J'ai un logo a gauche et un login à droite. Avec un espace de plusieurs pixels entre les 2.

Je souhaite lorsque je redimensionne la page le login se décale jusqu’à coté du logo mais une fois qu'il n'a pu de place qui ne chasse pas en dessous de mon logo mais qu'il reste a sa hauteur et que si on a trop diminuer la fenêtre on ne le voit plus.


.logo{
float:left;
height:65px;
margin:5px 0 0 20px;
width:230px;
outline:none;
}

.login_right{
background:url("../images/background.png") no-repeat;
float:right;
height:80px;
width:290px;
margin-top:-5px;
}


Je pense que c'est très simple mais je ne trouve pas la solution.
Si quelqu'un à une idée, merci pour votre aide.
Bonjour,

Difficile de t'aider dans le code HTML.

En gros, ce qu'il faut c'est que ces deux blocs soit dans un conteneur ayant un min-width de 540px (si j'ai bien fait l'addition).
Je suis en train d'essayer avec un autre bloc qui chassait en dessous de mon autre bloc mais je ne vois pas pourquoi ca ne fonctionne pas.

Voici mon code : 

.container{
	width:90%; 
	height:74%;
	background: url("../images/background/background_bottom.jpg") repeat-x scroll bottom;
	position:static;
	z-index:1;
}
.grid_top{
    height: 6%;
    margin: 0px 0 0 10px;
    width: 98%;
}

.grid{
	float:left;
	width:82%;
	height:77%;
	margin-left:10px;
	}

.rigth{
	background-color:#fff;
	border:2px solid #25364d;
	float:right;
	width:15%;
	height:77%;
	text-align:center;
	line-height:8px;
	margin-right:17px;
	margin-top:-2px;
	padding:10px;
	float:right;
	}


J'ai essayer de mettre le min-width sur mon container mais je ne vois pas pourquoi ca ne fonctionne pas. Et ce qu'il y à quelque chose que je n'ai pas fait?

Merci pour votre aide si précieuse....
Bonjour,
moi j'essaierai d'affirmer la position du 1er élément par
{position:absolute;
top:2em;
left:2em;}
et du 2ème élément par un
{position:absolute;
top:2em;
left:6em;}
par exemple,

et donner un n° d'index à chaque élément
z-index:2; /*pour le 1er élément */
z-index:-1; /*pour le 2ème élément */
(l'ordre va de -& à +& en tournant autour de 0 évidemment.

Des exemples évidemment pour "forcer" chaque élément à se tenir devant ou derrière.
A tester et à affiner bien sûr

Les redites "float:right;" sont bien sûr inutiles. Attention à la syntaxe, des fois, un point-virgule oublié, deux points oubliés ... et rien ne va comme on veut
Bon courage
galatajoie, le positionnement absolu, n'est pas vraiment des plus simple à maitriser pour un débutant.

etouicmoi, tu mélange % et px; il est normal qu'à un moment il y ait un problème de place. Essaye de te limiter aux largeurs fixes pour le moment.
Merci pour vos réponses mais j'utilise les pourcentages car je souhaite faire une interface qui s'adapte en fonction de la résolution de l’écran.
Donc je suis bien obligé d'utiliser les pourcentages? n'est ce pas?

Cependant je viens de trouver une petite bidouille:

.grid{
	float:left;
	width:75%;
	height:77%;
	margin-left:10px;
	}

Changer le width de mon élément grid ce qui permet à mon .right de ne pas se décaler.
Ca à l'air de fonctionner...
Sujet clos
Aller à