× Aidez la recherche contre le COVID-19 avec votre ordi ! Rejoignez l'équipe PC Astuces Folding@home
 > Tous les forums > Forum des Webmasters
 Probleme de mise en page css
Ajouter un message à la discussion
Page : [1] 
Page 1 sur 1
ogd
  Posté le 16/03/2007 @ 10:29 
Aller en bas de la page 
Astucien

Hello!

Je suis en train de revoir la mise en page de mon blog...

Je rencontre un souci avec les blocs de login et recherhe...

Je n'arrive pas à supprimer l'espace entre les differentes lignes,pour réduire la taille de ces blocs...

peut etre pouvez vous m'aider?

voici la page : http://www.frequenceplusfm.com/blogtest/summary.php

et le code:

[code]

<div id="line1">
<div id="lineg" style="width: 753; height: 91">
<form id="loginForm" method="post" action="admin.php">
<input type="hidden" name="op" value="Login" />
<fieldset class="inputField" style="width: 753; height: 81">
<p style="margin-top: -1; margin-bottom: -1">Connexion
<div class="field" style="width: 734; height: 22; margin-top:-1">
<label for="userName">{$locale->tr("username")}</label>
<input type="text" tabindex="10" name="userName" id="userName" value="" maxlength="50" size="20" />
</div>
<div class="field" style="width: 328; height: 22">
<p style="margin-top: -1; margin-bottom: -1">
<label for="userPassword">{$locale->tr("password")}</label>
<input type="password" tabindex="11" name="userPassword" id="userPassword" maxlength="50" size="20" /><input type="submit" class="button" name="Login" value="{$locale->tr("login")}" tabindex="12" />
<a href="?op=resetPasswordForm">mot de passe perdu?</a>
</div>
</fieldset></form>
</div>
<div id="line1d">
<form id="searchForm" method="post" action="{$smarty.server.PHP_SELF}">
<fieldset class="inputField">
<div class="field">
<label for="searchTerms">{$locale->tr("search_terms")}</label><br />
<input type="text" tabindex="20" name="searchTerms" id="searchTerms" value="" size="20" />
</div>
<div class="field">
<label for="searchType">{$locale->tr("search_type")}</label><br />
<select name="searchType" id="searchType">
<option value="1">{$locale->tr("posts")}</option>
<option value="2">{$locale->tr("blogs")}</option>
<option value="3">{$locale->tr("resources")}</option>
</select>
<input type="submit" class="button" name="summarySearch" value="{$locale->tr("search")}" tabindex="21" /></div>
<input type="hidden" name="op" value="summarySearch" />
&nbsp;</fieldset>
</form>
</div>

[/code]

et le css :

[code]

#line1
{
height : 100%;
width : 100%;
background : #9FCDD4 url('../imgs/panelsumblogh.gif') repeat-y center;
padding : 0px;
margin : 0px;
}

#lineg
{
float: left;
width: 50%;
}
#line1d
{
float: right;
width: 50%;
}

/* -------------------------------------------------------------- */
/* Form controls (input, ...) */
/* -------------------------------------------------------------- */

form
{
margin : 0px;
}

fieldset
{
border : 1px solid #DEDEDE;
color : #000000;
font-family : verdana, tahoma, sans-serif;
font-size : 0.90em;
font-weight : bold;
padding-bottom : 0px;
margin : 0px;
}

textarea, input, select
{
background : #E4C6C7;
border : 1px solid #b2b2b2;
color : #000000;
font-family : verdana, tahoma, sans-serif;
font-size : 0.95em;
}

input:focus, textarea:focus, label:focus
{
border : 1px solid #5583BE;
}

.checkbox, .radio
{
border : 0px;
}

.submit
{
/*margin-left : 4px;*/
}

.list_action_button a img
{
border : 0px;
padding : 0px;
}

.list_action_button a:hover img
{
/* filter : alpha(opacity=60);
opacity : 0.6; */
}

.field
{
top : -1;
left : 0;
margin : 0 1em 1em 0;
}

.field .field
{
margin : 1em 0 0 0;
}

.field label
{
font-size : 100%;
font-weight : bold;
}

.field_checkbox
{
top : 0;
left : 0;
}

.field_checkbox label
{
font-size : 100%;
}

.formHelp
{
font-size : 90%;
color : #76797c;
margin : 0 0 0.2em 0;
}

.formHelp a
{
text-decoration : underline;
}

.formHelp:hover
{
color : Black;
cursor : default;
}

fieldset
{
border : 1px solid #8cacbb;
margin : 1em 0em 1em 0em;
padding : 0em 1em 1em 1em;
line-height : 1.5em;
width : auto;
}

.inputField
{
width: 85%;
margin-left: auto;
margin-right: auto;
background-color: url('../imgs/panelsumr.gif');
border: 1px solid #DEDEDE;
}

.buttons
{
width: 88%;
margin-left: auto;
margin-right: auto;
text-align: right;
}

.inputField input
{
width:100%;
}

.inputField legend
{
font-weight: bold;
}

.inputField .dateTime
{
width: 80%;
}

.inputField .checkbox, .inputField .button, .inputField .radio
{
width: auto;
}

.inputField .file
{
width: auto;
}

.pager
{
float:left;
}

/* -------------------------------------------------------------- */
/* Data lists parameters & search bar */
/* -------------------------------------------------------------- */

#list_nav_bar
{
margin-left : auto;
margin-right : auto;
width : 98%;
background-color : #F3F1FF;
padding-bottom : 4px;
padding-left : 4px;
padding-right : 4px;
margin-bottom : 10px;
border : 0px solid #DEDEDE;
}

#list_nav_bar fieldset
{
border : 1px solid #DEDEDE;
color : #000000;
font-family : verdana, tahoma, sans-serif;
font-size : 0.90em;
padding : 0px;
margin : 0px;
height : 60px;
}

#list_nav_select
{
float : left;
width : 100%;
text-align : center;
}

#list_nav_search
{
float : left;
width : 30%;
text-align : center;
}

.list_nav_option
{
float : left;
text-align : left;
padding : 0px 4px 4px 4px;
margin-left : 5px;
}

#list_nav_bar legend
{
font-family : trebuchet ms, tahoma, sans-serif;
font-size : 1.1em;
font-weight : bold;
letter-spacing : 0.08em;
}

#list_nav_select label
{
}
[/code]

Merci

Bonne journée

Ogd

Publicité
Malcolm
 Posté le 16/03/2007 à 12:53 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Astucien

Salut,

dans ta CSS tu as défini 2x le "fieldset". Fais attention à ce qu'il n'y ait pas de confusions dans les propriétés CSS.

essaie de mettre pour ton .field et/ou lep qu'il contient les margin à 0.

ogd
 Posté le 16/03/2007 à 13:08 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Merci, Malcolm !

En fait, je n'arrive toujours pas à supprimé l'interligne, si c'en est une, entre le champs pseudo et le libellé mot de passe...

D'autre part, j'essaie de placer les champs à côté de leur libellé mais en vain...

Merci pour ton aide

elle
 Posté le 16/03/2007 à 15:49 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Salut,

Deux liens qui pourront peut-être t'aider :

Des formulaires plus simples (Étape 3 : Aligner les intitulés et les champs )

http://openweb.eu.org/articles/formulaire_accessible/



Modifié par elle le 16/03/2007 15:51
ogd
 Posté le 19/03/2007 à 17:35 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Merci Elle pour tes liens...

J'essaie de styler la balise laber mais je dois mal m'y prendre car, ça ne change rien quant à l'interligne qui est toujours là...

voici mon code pour cette partie de la page:

[code]

<div id="line1g" style="width: 753; height: 91">
<form id="loginForm" method="post" action="admin.php">
<input type="hidden" name="op" value="Login" />
<fieldset class="inputField" style="width: 753; height: 81">
<p style="margin-top: -1; margin-bottom: -1">Connexion
<div class="field" style="width: 734; height: 22; margin-top:-1">
<label style="float: left" for="userName">{$locale->tr("username")}</label>
<input type="text" tabindex="10" name="userName" id="userName" value="" maxlength="50" size="20" />
</div>
<div class="field" style="width: 328; height: 22">
<p style="margin-top: -1; margin-bottom: -1">
<label style="margin-top: -1; margin-bottom: -1" for="userPassword">{$locale->tr("password")}</label>
<input type="password" tabindex="11" name="userPassword" id="userPassword" maxlength="50" size="20" /><input type="submit" class="button" name="Login" value="{$locale->tr("login")}" tabindex="12" />
<a href="?op=resetPasswordForm">mot de passe perdu?</a>
</div>
</fieldset></form>
</div>
[/code]

Je ne comprends pas pourquoi cette interligne s'impose à ce point?

Merci



Modifié par ogd le 19/03/2007 17:38
ogd
 Posté le 19/03/2007 à 17:48 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Je ne comprends pas non plus pourquoi la case ne se place pas à droite de son libellé, on dirait que c'est sa taille qui l'en empêche alors que normalement, elle devrait être de taille modérée (voir page http://www.blog.frequenceplusfm.com puisque le code est copié de cette page)

Merci pour votre aide

Ogd

ogd
 Posté le 22/03/2007 à 16:38 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Hello!

Personne ne peut m'aider?

Merci beaucoup d'avance,

Ogd

ogd
 Posté le 26/03/2007 à 09:39 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

petit up
Malcolm
 Posté le 27/03/2007 à 09:36 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Astucien

es-tu sûr que ton style s'applique ? (mets-lui au passage un background red, tu verras de suite s'il s'applique)
Publicité
ogd
 Posté le 27/03/2007 à 16:58 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Hello!

Oui, il s'applique (en fait, je dois systématiquement le mettre à jour dans le panneau administratif du Blog, mais il s'applique puisque j'ai modifié d'autres choses dans la page qui sont prises en compte...

En fait, il n'y a vraiment que ce bloc qui me pose problème pour l'instant...

Peut-être du fait qu'il y aurait un ordre contraire soit dans la css soit dans la page, mais j'ai regardé et n'ai rien vu de particulier...

Merci

pastazere
 Posté le 28/03/2007 à 06:33 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

Bonjour

<div id="line1g" style="width: 753; height: 91">
<form id="loginForm" method="post" action="admin.php">
<input type="hidden" name="op" value="Login" />
<fieldset class="inputField" style="width: 753; height: 81">
<p style="margin-top: -1; margin-bottom: -1">Connexion
<div class="field" style="width: 734; height: 22; margin-top:-1">
<label style="float: left" for="userName">{$locale->tr("username")}</label>
<input type="text" tabindex="10" name="userName" id="userName" value="" maxlength="50" size="20" />
</div>
<div class="field" style="width: 328; height: 22">
<p style="margin-top: -1; margin-bottom: -1">
<label style="margin-top: -1; margin-bottom: -1" for="userPassword">{$locale->tr("password")}</label>
<input type="password" tabindex="11" name="userPassword" id="userPassword" maxlength="50" size="20" /><input type="submit" class="button" name="Login" value="{$locale->tr("login")}" tabindex="12" />
<a href="?op=resetPasswordForm">mot de passe perdu?</a>
</div>
</fieldset></form>
</div>

Pour voir supprime cette ligne (en rouge).

Si c'est bon, ce serait tout simplement les marges automatiques du paragraphe p qui créent cet espace.

a+

ogd
 Posté le 28/03/2007 à 10:25 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Hello,

J'ai trouvé !

C'est dans la css que se trouvait le style à virer...

Par contre, j'ai toujours ce souci de champs texte pour le login et le password qui ne veulent pas se mettre à coté de leur label

Merci à toutes et tous !

Bonne journée



Modifié par ogd le 28/03/2007 10:29
elle
 Posté le 28/03/2007 à 18:04 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

ogd a écrit :


Par contre, j'ai toujours ce souci de champs texte pour le login et le password qui ne veulent pas se mettre à coté de leur label


Salut,

Tu as bien défini des longueurs... pas trop longues?

ogd
 Posté le 29/03/2007 à 09:14 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

les valeurs des champs sont celles-ci:

<input type="text" tabindex="10" name="userName" id="userName" value="" maxlength="50" size="20" />

J'ai essayé de les changer mais sans effet en ligne.

Merci

ogd
 Posté le 24/05/2007 à 09:46 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

hello, j'ai a nouveau besoin de vos lumières sur un soucis CSS...

j'ai une page d'administration dont je veut changer les couleurs, donc je vais dans la css et grâce à ff, je retrouvle les balises à modifier...

sous ff, l'affichage est conforme à ce que je souhaite, mais sous ie, le background ne se place pas complètement et en plus il bouge en fonction de la position de la page (quand on utilise l'ascenseur...)

Pour être plus clair, voici une capture:

En fait toutes les listes devraient être comme sous blogs ettraduction, mais on voit clairmeent un souci pour la liste "membres"... alors que sous ff, l'affichage est nickel...

De plus, ce style s'applique à plusieurs page (c'est sur un blog avec un système de templates) et si c'est le cas dans Firefox, sous ie, là encore, le style est appliqué sur certaines pages mais de manière erratique comme sur la photo, ou n'est pas appliqué du tout...

voici l'extrait de la css:

/**
* styles for the 'manage' page and similar.
*/
#content .menuTop
{
list-style-type : none;
padding-left: 45px;
padding-right: 45px;
margin: 0px;
}

#content .menuTop ul
{
padding: 0px;
margin: 0px;
background-color : #c8d9f2;
}

#content .menuTop .Level_1
{
font-family : trebuchet ms, tahoma, sans-serif;
font-size : 1.0em;
font-weight : bold;
letter-spacing : 0.08em;
border-bottom : 1px solid #DEDEDE;
padding-top : 10px;
text-align : left;
}

#content .menuTop .Level_0
{
padding-left: 10px;
font-weight : normal;
background-color : #c8d9f2;
}

#content .menuTop .Level_0 a
{
color : #888888;
text-decoration : none;
}

#content .menuTop .Level_0 a:hover
{
color : #5583BE;
text-decoration : none;
}

Si vous pouviez m'aider, parce que j'y ai passé l'apres midi hier et là

Merci,

Ogd

Page : [1] 
Page 1 sur 1

Vous devez être connecté pour poster des messages. Cliquez ici pour vous identifier.

Vous n'avez pas de compte ? Créez-en un gratuitement !


Les bons plans du moment PC Astuces

Tous les Bons Plans
14,90 €Prise connectée Wi-Fi TP-Link HS100 à 14,90 €
Valable jusqu'au 24 Septembre

Amazon fait une promotion sur la prise intelligente Wi-Fi TP-Link HS100 qui passe à 14,90 € alors qu'on la trouve habituellement autour de 35 €. Cette prise peut être contrôlée à distance en utilisant l'app gratuite KASA sur votre smartphone (iOS ou Android). Vous pouvez créer des planifications horaires pour allumer ou éteindre automatiquement et quand vous le souhaitez, l'appareil qui y est branché. Pour en savoir plus, n'hésitez pas à lire notre dossier pratique Contrôler une prise électrique à distance.


> Voir l'offre
314,03 €Lego Technic 42115 Lamborghini Sian FKP 37 à 314,03 € livrée
Valable jusqu'au 19 Septembre

Amazon Allemagne fait une promotion sur le Lego Technic 42115 Lamborghini Sian FKP 37 qui passe à 298,93 € (avec la TVA ajustée). Comptez 15,10 € pour la livraison en France soit un total de 314,03 € livré. On la trouve ailleurs à 379,90 €. 


> Voir l'offre
149,99 €Ecran 24 pouces ViewSonic VX2458-C-MHD (incurvé, FullHD, 144Hz, 1ms) à 149,99 €
Valable jusqu'au 22 Septembre

Darty fait une promotion sur l'écran 24 pouces ViewSonic VX2458-C-MHD qui passe à 149,99 €. On le trouve ailleurs à partir de 170 €. Cet écran dédié aux joueurs dispose d'une dalle incurvée FullHD 1 ms à 144 Hz, un filtre lumière bleue et de la technologie anti scintillement Flicker Free. Il est compatible FreeSync, GSync et a des entrées HDMI, DP et DVI. Il intègre des haut-parleurs. 


> Voir l'offre

Sujets relatifs
mise ne page css - probleme...
Problème de mise en page/rendu
problème mise en page
Problème de mise en page avec Div!
problème de mise en page
probleme mise en page dreamweaver
problème de mise en page par css
probleme de mise en page avec front page
Probleme de mise en ligne de fichier sur un serveur
Probleme d'affichage sur page d'accueil de mon SITE
Plus de sujets relatifs à Probleme de mise en page css
 > Tous les forums > Forum Forum des Webmasters