28173 sujets

CSS et mise en forme, CSS3

Problème de décalage

Bonjour tout le monde, je suis en train de me developper un blog perso, donc je me fais aussi le design par la même occasion, et j'ai un problème de décalage quand change de page en fait.

Voici la page : http://romain.bertolucci.free.fr/blog/

Cliquer sur le lien 'Le Site' sous le header, et regarder le input 'rechercher, il va se décaler sur la droite d'au moins 5 bon pixel.

Le bloc du fomulaire de recherche est en position absolute, car je n'ai aps réussi à le placer sur la même ligne que le formulaire de login, et je ne trouve pas la solution pour résoudre ce problème.

Voici une partie du code du css et de l'index.


#site {
	background-color: #141414;
	width: 800px;
	margin: 10px auto 10px;
	border-top: 1px solid #2e2e2e;
	border-bottom: 1px solid #2e2e2e;
}

#log {
	width: 400px;
	margin-left: 5px;
}

#search {
	position: absolute;
	top: 11px;
	left: 635px;
	width: 390px;
	text-align: right;
	margin-right: 5px;
}

#header {
	background-color: #000000;
	background-image: url(images/fond_head.jpg);
	margin: 0px;
	width: 100%;
	height: 230px;
	margin-bottom: 10px;
	border-bottom: 1px solid #2e2e2e;
}



et l'index


<div id="site">
    <div id="header">
    	<div id="log">
    		<?php include("log.php"); ?>
        </div>
        <div id="search">
        	<form name="search"><input type="text" name="login" size="10" class="form_input" id="rechercher" value="Rechercher" onfocus="clean_search(3);" /><input type="submit" value="" class="valid_search" /></form>
        </div>
    	<a href="?r=index"><div id="header_img"></div></a>
        <div id="menu">
        	<a href="?r=test"><div id="menu_site"></div></a>
        	<a href="#"><div id="menu_warcraft"></div></a>
            <a href="#"><div id="menu_warhammer"></div></a>
            <a href="#"><div id="menu_aides"></div></a>
            <a href="#"><div id="menu_series"></div></a>
        </div>
    </div>
    <div id="page">
    	<?php include("$page"); ?>
        <hr />
    </div>
</div>


Ce que j'aimerai faire c'est mettre le formulaire de log et de recherche sur la même ligne, mais comme c'est des div sa saute la ligne automatiquement et quand je met des float: left, ca marche pas.



Merci.
Salut Asraam,

Cette solution vaut ce quelle vaut mais on obtient peu ou prou l'effet visuel que tu désires :

body {
background-color: #000000;
color: #FFFFFF;
[#blue]margin:0 auto;[/#]
}
#search {
position:absolute;
[#blue]right:105px;
top:12px;[/#]}
#header_img {
background:url(header.jpg) no-repeat;
height:130px;
[#blue]position:absolute;
top:43px;[/#]width:100%;
}
#menu {
height:35px;
position:absolute;
[#blue]top:173px;[/#]
width:100%;
}

Peut-être quelques petites choses à modifier au niveau du positionnement, mais en attendant mieux... Smiley lol
Voili, voilou...
Cdt,
Sylvain
Bonsoir

Ce décalage ne serait-il pas provoqué par la présence de la barre de scroll verticale dans la 1ere page puis à son absence dans la 2eme page.

En effet dans cette deuxième page il n'y a qu'une ligne de texte aussi cette barre disparaît. Essaye en mettant du texte qui va jusqu'en bas (ou +) de l'écran.

Pour ta balise #search essaye en passant left: 635px; en 515px.
Sujet clos
Aller à