IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Positionnement float css


Sujet :

Positionnement en CSS

  1. #1
    Membre confirmé
    Profil pro
    Inscrit en
    Février 2012
    Messages
    135
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2012
    Messages : 135
    Par défaut Positionnement float css
    bonjour,

    désolé encore un problème de positionnement, habituellement, je m'en sors mais la je ne vois pas quel est le problème.

    Je dois placer un logo sur gauche et une image en background sur droite qui doit s'adapter à la taille de l'écran.

    Voici mon code PHP :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    <body>
     
    <!-- container -->
    <div id="container">
     
    	<!-- header -->
    	<div id="header">
    				<!-- logo -->
    				<div id="logo">
    					<a href="#" title="<?php echo  $titre_logiciel;?>"><img src="images/logo.png" alt="<?php echo  $titre_logiciel;?>" border="0"/></a>
    				</div>
    				<!-- / end logo -->
     
    				<!-- recherche -->
    				<div id="search">
    					<div id="search-content">
    					<a href="#"><img src="images/header-recherche-btn-loupe.png" alt="Lancer la recherche" title="Lancer la recherche" border="0"/></a>   
    					<span class="header-recherche-champ"><input name="recherche" type="text" id="recherche" size="30" value="Recherche..." onblur="if(this.value=='') { this.value = 'Recherche...' ;} " onclick="if(this.value=='Recherche...') { this.value='';} "></span>
    					</div>
    				</div>
    				<!-- / end recherche -->
     
    	<div class="clear"></div>		
    	</div>
     
    	<!-- wrapper -->
    	<div id="wrapper">
     
    	<div class="clear"></div>		
    	</div>
    	<!-- /end div #wrapper -->
     
    		<!-- footer --> 
    	<div id="footer">		  			 	
    		<!-- copyright text -->
    		<div class="copyright">Copyright © 2013 .</div>
    		<!-- / copyright text -->			
    	</div>
    	<!-- / end div #footer --> 
     
    </div>
    <!-- end div #container --> 
     
    </body>
    </html>

    Voici les CSS :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    /* #### Mobile Phones Portrait #### */
    @media screen and (max-device-width: 480px) and (orientation: portrait){
    	#container{
    	min-width:320px;
    	max-width:480px;
    	}
    }
     
    /* #### Mobile Phones Portrait or Landscape #### */
    @media screen and (max-device-width: 640px){
    	#container{
    	min-width:480px;
    	max-width:640px;
    	}
    }
     
    /* #### iPhone 4+ Portrait or Landscape #### */
    @media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){
    	#container{
    	min-width:320px;
    	max-width:480px;
    	}
    }
     
    /* #### Tablets Portrait or Landscape #### */
    @media screen and (min-device-width: 768px) and (max-device-width: 1024px){
    	#container{
    	min-width:768px;
    	max-width:1024px;
    	}
    }
     
    /* #### Desktops #### */
    @media screen and (min-width: 1024px){
    	#container{
    	max-width:1990px;
    	}
    }
     
    /* ----------------------------------------------------
    	GOOGLE FONTS
    ------------------------------------------------------- */
     
    	/* Oswald */
    	@import url(http://fonts.googleapis.com/css?family=Oswald);
     
    	/* Droid Sans */
    	@import url(http://fonts.googleapis.com/css?family=Droid+Sans:400,700);
     
    	/* Droid Serif */
    	@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic,700,700italic);
     
    /* ----------------------------------------------------
    	GLOBAL STRUCTURE
    ------------------------------------------------------- */
     
    /* --------------------------- CSS Reset ----------------------------*/
     
    html, body, div, span, applet, object, iframe, h1, h2, h3,
    h4, h5, h6, p, blockquote, pre, a, abbr, acronym,
    address, big, cite, code, del, dfn, em, font, img, ins,
    kbd, q, s, samp, small, strike, strong, sub, sup, tt,
    var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {margin: 0 auto;padding: 0;border: 0;outline: 0;font-weight: inherit;font-style: inherit;font-size: 12px;font-family: inherit;vertical-align: baseline;}
    :focus { outline: 0;}
    div { margin: 0; padding: 0; }
    a, a:link, a:visited, a:hover, a:active{text-decoration:none}
    table {	border-collapse: separate;border-spacing: 0;}
    th, td {text-align: left; font-weight: normal;}
    img, iframe {border: none; text-decoration:none;}
    ol, ul {list-style: none;}
    input, textarea, select, button {font-size: 100%;font-family: inherit;}
    select {margin: inherit;}
    hr {margin: 0 -20px 16px -20px; padding: 0;border: 0;background-color: #d4d4d4;height: 1px; clear: both; width: auto;}
     
    	/* body */
    	body {
    		font-family: 'Droid Sans', Arial, Helvetica, sans-serif;
    		line-height:20px; 
    		position:relative;
    		background:url(../images/header-page-trait-gris.png) center top repeat-x #FFFFFF;		
    		color:#666;
    		padding:0 0 0 1px;
    	}
     
    	/* Layout general*/
    	#container{
    		width:100%;
    		margin:0 auto 0 auto; 
    		position:relative;
    		display: block;
    		border:0 !important; 
    	}
     
    	/* Layout general*/
    	#wrapper{
    		width:960px;
    		margin:0 auto 0 auto; 
    		position:relative;
    		display: block;
    		padding:0;
    		border:0 !important;
    		z-index:4;
    	}
     
    	/* header*/
    	#header{
    		margin-top:3em;
    		width:100%;	
    		height:10em;
    	}	
     
    	/* logo position */
    	#logo{
    		float:left;
    		padding:0.5em 0em 2em 2em;
    		width:15%;
    		min-width:15%;
    	}
    	/* recherche */
    	#search{
    		background:url(../images/header-recherche-trait-rouge.png) right top no-repeat #FFFFFF;
    		float:left;
    		padding:0;
    		width:80%;
    	}	
    	/* recherche */
    	#search-content{
    		background:url(../images/header-recherche-bg-gris.png) right 2em repeat-x;
    		width:100%;
    		height:5em;
    		padding:2.2em 2em 0em 2em;
     
    	}	
     
    	.header-recherche-champ{
    		position:absolute;
    		padding:1em 0 0 2em;
    	}
    J'ai 2 problèmes qui sont peut-être liés :

    J'ai mon background de la colonne de droite qui n'est pas vraiment aligné à droite, il est repoussé légèrement à gauche de 10%. Si je met un float right, le navigateur me crée un scroll horizontal permanent.

    Lorsque je redimensionne mon navigateur, mon background de la colonne de droite vient se superposer sur le logo.

    Je vous remercie de votre aide.

  2. #2
    Membre Expert
    Avatar de rodolphebrd
    Homme Profil pro
    Indépendant
    Inscrit en
    Novembre 2012
    Messages
    2 336
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Indépendant
    Secteur : Conseil

    Informations forums :
    Inscription : Novembre 2012
    Messages : 2 336
    Par défaut
    Pouvez-vous envoyez vos images en pièces jointes.

  3. #3
    Membre confirmé
    Profil pro
    Inscrit en
    Février 2012
    Messages
    135
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2012
    Messages : 135
    Par défaut
    Bonjour,

    voici les images, j'ai un bon positionnement en plus de 1024px et dès que je redimensionne plus, la bande de recherche se positionne sous le logo, alors qu'elle se redimensionne correctement.

    Je souhaiterais qu'elle reste à la droite du logo.




  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 211
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 211
    Par défaut
    Bonjour,
    mets un min-width au conteneur.

  5. #5
    Membre très actif
    Inscrit en
    Janvier 2009
    Messages
    598
    Détails du profil
    Informations forums :
    Inscription : Janvier 2009
    Messages : 598
    Par défaut
    Juste une remarque qui te dépanne pas mais peut te servir, ta barre grise de recherche est très longue alors que le champ de recherche est très petit.
    Peut-être que tu n'as pas besoin d'une si longue barre grise.

  6. #6
    Membre expérimenté
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Novembre 2008
    Messages
    162
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Santé

    Informations forums :
    Inscription : Novembre 2008
    Messages : 162
    Par défaut
    Bonjour, le problème que tu rencontres est tout à fait normal. Tu as deux images qui font une certaine taille, si tu redimensionnes ta fenêtre à une résolution inférieure à la largeur de tes deux images cumulées, ton navigateur va se débrouiller pour tout afficher et donc les mettre l'une en dessous de l'autre.

    A savoir maintenant, quel comportement souhaites tu adopter dans ce cas ? Si la résolution est inférieure :
    - mettre une scrollbar ? (proprité css overflow: auto)
    - superposer les images ? (propriété css position: absolute)
    - réduire la taille des images ? (images fluides)
    - Ne plus afficher une des images ? (voir avec les media queries)

  7. #7
    Membre confirmé
    Profil pro
    Inscrit en
    Février 2012
    Messages
    135
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2012
    Messages : 135
    Par défaut
    Bonjour,

    je dois en effet gérer petites et grandes tailles d'affichage, car ce site doit être visible en grand format sur les écrans d'ordinateur et sur les Ipad 2-3+ et les Ipad Mini. J'ai d'ailleur utilisé des media queries dans les CSS pour la taille des champs (champ de recherche)

    Je souhaite que le logo ne soit pas redimensionne, par contre, la barre grise de recherche doit l'être.

    Je préférerai donc la solution :
    - réduire la taille des images ? (images fluides)

    Une question cependant :

    Pour sur ma 2ème image, la barre grise commence à passer en dessous alors qu'on le voit sur la 3ème image elle peut être plus petite ?
    Je ne parviens pas à me l'expliquer.

  8. #8
    Membre Expert
    Avatar de rodolphebrd
    Homme Profil pro
    Indépendant
    Inscrit en
    Novembre 2012
    Messages
    2 336
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Indépendant
    Secteur : Conseil

    Informations forums :
    Inscription : Novembre 2012
    Messages : 2 336
    Par défaut
    Avez-vous un lien vers votre site?

    Pour rendre une image fluide:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
     
    img {
    max-width:100%;
    width:100%;
    height:100%;
    box-sizing:border-box;
    }

Discussions similaires

  1. Positionnement Div Css float clear
    Par Ashgenesis dans le forum Mise en page CSS
    Réponses: 8
    Dernier message: 02/03/2007, 14h19
  2. [HTML] pb de positionnement float:right;
    Par Emcy38 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 18
    Dernier message: 24/08/2006, 17h00
  3. Positionnement en CSS 2, un vrai casse tête !
    Par c_may dans le forum Mise en page CSS
    Réponses: 6
    Dernier message: 02/08/2006, 11h16
  4. [CSS]positionnement "FLOAT"
    Par leup dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 05/05/2006, 21h13
  5. [CSS] Positionnement float, comment clearer correctement ?
    Par Séb. dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 02/11/2005, 16h35

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo