CSS et comportement etrange

Recherche :

Mot : Pseudo : Filtrer
Page : 1 2 Page Suivante Page Précédente Bas de page
Auteur	Sujet : CSS et comportement etrange

samuelp

J'essaye de générer automatiquement une feuille HTML avec du CSS dedans.
Helas quand je fais ceci, le div qui est encapsulé herite automatiquement des propriétés du div parent.
Pire encore ! Si le parent contient un text-decoration: underline ; et le dic encapsulé un text-decoration: none; ce dernier attribut est ignoré et le text reste souligné.

Vla le HTML genere :

Code :

<div id="container">
<div id="menuBackground">
</div><div id="pagecontainer">
<div class='sheetcontainer'>
<div class='sheettitle'>Adding an user :
<div class='sheetsubtitle'>Recommendation
<p><span class="sheettext">You can add an user whenever you want if you have the requested ability to do that ! <br> Please take care to associate the right of use according to your wishes.</span>
<span class="sheettext">You can access the page by clicking on <a href="useradd.php">here</a>.</span>
</p>
</div>
</div>
</div>
<div class='sheetcontainer'>
<div class='sheettitle'>Editing or deleting an user :
<div class='sheetsubtitle'>Recommendation
<p><span class="sheettext">You can edit or delete an user whenever you want if you have the requested ability to do that ! <br> Please take care to do not delete a user that is necessary in using the software.</span> </p>
<span class="sheettext">You can access the page by clicking on <a href="useredit.php">here</a>.</span> </p>
</p>
</div>
</div>
</div>
</div>
</div>

Le probleme est en gras.

A chaque fois le underline de la class subtitle deborde sur le div sheettext.

J'ai essayé avec <div class="sheettext"> Mais c toujours pareil

Une idee ?

Publicité

samuelp

Tiens un joce bug, le gras n'apparait pas

antp

Super Administrateur
Champion des excuses bidons

samuelp a écrit :

Tiens un joce bug, le gras n'apparait pas

non c'est voulu

Message édité par antp le 22-08-2003 à 18:23:25

---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire

samuelp

HotShot a écrit :

Commence par fermer et ouvrir correctement toutes les balises... <p> etc.

C fait, toujours le meme resultat

Le Castor

Neurasténique...

C'est complètement étrange, mois j'ai déjà fait des structures de ce genre, sans ton problème...

---------------
W3C : Leading the Web to Its Full Potential... - Membre du W3C l33t club

simogeo

j'ai jamais tué de chats, ...

déjà il y a </p></p> qui se ferme en trop apparemment...
après ca peut etre bien d'avoir la feuille de script elle-même

---------------
from here and there -- \o__________________________________ -- la révolution de la terre, en silence

samuelp

Vla le code HTML entre les TAGS <body> :

Code :

<div id="container">
<div id="menuBackground">
</div>
<div id="pagecontainer">
<div class='sheetcontainer'>
<div class='sheettitle'>Welcome to CRM software :
<div class='sheetsubtitle'>Introduction<p> <span class="sheettext">This is currently a development software so you can't use it properly. Please wait for the first Alpha version that will be released any times soon</span>
</p></div>
</div>
</div>
</div>
</div>

Vla le CSS (pas tout ) :

Code :

p
{
font-size: 12px ;
margin-top: 0px;
margin-left: 0px;
margin-bottom: 0px;
margin-right: 0px;
text-align: justify ;
font-decoration: none ;
}
#menuBackground
{
font-weight: bold ;
border: none ;
border-width : 0px;
width: 100%;
height: 30px;
color: #000000;
background-color : #006bc9;
}
#pagecontainer
{
margin-bottom : 0px;
margin-left: auto ;
margin-right: auto ;
margin-top: 10px;
font-family : verdana, Arial ;
width : 90% ;
background-color : #aeaefc ;
padding-left : 20px;
padding-right: 10px;
padding-top: 0px;
padding-bottom: 0px;
filter: alpha(Opacity=30);
}
#container
{
background : url(test.png) no-repeat top right ;
padding-left : 0px ;
padding-right : 0px ;
padding-top : 0px;
padding-bottom : 0px;
}
.sheettext
{
font-family: verdana, Arial ;
font-size: 12px;
text-align: justify ;
color: #000000;
font-weight: 100 ;
background-color : #aeaefc ;
text-decoration: none ;
}
.sheettitle
{
font-family : verdana, Arial ;
font-size : 20px;
font-weight: bold ;
text-align: center ;
text-decoration: none ;
background-color : #aeaefc ;
margin-left: 0px ;
margin-right: 0px ;
margin-top: 10px;
margin-bottom: 10px;
}
.sheetsubtitle
{
font-family : verdana, Arial ;
text-align: left ;
font-size: 14px ;
font-weight: bold ;
text-decoration: underline ;
background-color : #aeaefc ;
margin-left: 0px ;
margin-right: 0px ;
margin-top: 10px;
margin-bottom: 10px;
}
.sheetcontainer
{
font-family : verdana, Arial ;
width : 100% ;
background-color : #aeaefc ;
filter: alpha(Opacity=30);
}

samuelp

:bounce:

Le Castor

Neurasténique...

Tiens, ça chie sous IE, mais ça marche sous mozilla... doit y avoir une faute de frappe quelque part...

---------------
W3C : Leading the Web to Its Full Potential... - Membre du W3C l33t club

Le Castor

Neurasténique...

Déjà :
p
{
font-size: 12px ;
margin-top: 0px;
margin-left: 0px;
margin-bottom: 0px;
margin-right: 0px;
text-align: justify ;
font-decoration: none ;
}

C'est text-decoration, et pas font, mais ça change rien...

---------------
W3C : Leading the Web to Its Full Potential... - Membre du W3C l33t club

Publicité

simogeo

j'ai jamais tué de chats, ...

déjà :

Code :

p
{
font-size: 12px ;
margin-top: 0px;
margin-left: 0px;
margin-bottom: 0px;
margin-right: 0px;
text-align: justify ;
text-decoration: none ;
}

mais ca ne vient pas de la

edit : grillaid 3nimutes en plus

Message édité par simogeo le 23-08-2003 à 14:25:30

---------------
from here and there -- \o__________________________________ -- la révolution de la terre, en silence

Le Castor

Neurasténique...

Sous mozilla, ça marche nickel ! la span n'est pas soulignée... JE cherche encore...

---------------
W3C : Leading the Web to Its Full Potential... - Membre du W3C l33t club

simogeo

j'ai jamais tué de chats, ...

Le Castor a écrit :

Sous mozilla, ça marche nickel ! la span n'est pas soulignée... JE cherche encore...

firebird c'est souligné [:spamafote]

---------------
from here and there -- \o__________________________________ -- la révolution de la terre, en silence

Le Castor

Neurasténique...

Bon, bah on va dire que IE n'aime pas qu'on change la propriété text-decoration à l'intérieur d'une div....

---------------
W3C : Leading the Web to Its Full Potential... - Membre du W3C l33t club

samuelp

Merci pour ces aides.
Bon je vais corriger le petit probleme et je vais voir ce soir.
Quand meme bizard que ça passe sous certaines versions de Mozilla et pas sous IE

simogeo

j'ai jamais tué de chats, ...

très bizarre [:adsl1978]

---------------
from here and there -- \o__________________________________ -- la révolution de la terre, en silence

samuelp

Un petit up desespéré :bounce: (toujours pas trouvé)

kadreg

profil: Utilisateur

samuelp a écrit :

[:hello_cass]

---------------
brisez les rêves des gens, il en restera toujours quelque chose... -- laissez moi troller sur discu !

Le Castor

Neurasténique...

moi je dis, fait plutot un truc comme ça :

Code :

<div id="container">
<div id="menuBackground">
</div>
<div id="pagecontainer">
<div class='sheetcontainer'>
<div class='sheettitle'>Welcome to CRM software :
<div class='sheetsubtitle'>
<span class="underlined">Introduction</span>
<p>
<span class="sheettext">This is currently a development software so you can't use it properly. Please wait for the first Alpha version that will be released any times soon</span>
</p>
</div>
</div>
</div>
</div>
</div>

<span class="underlined">Introduction</span>

comme ça, t'as juste "Introduction" qu'est souligné

Message édité par Le Castor le 24-08-2003 à 12:40:44

---------------
W3C : Leading the Web to Its Full Potential... - Membre du W3C l33t club

antp

Super Administrateur
Champion des excuses bidons

<div class='sheettitle'>Welcome to CRM software :
<div class='sheetsubtitle'>
<span class="underlined">Introduction</span>

[:fear]

moi j'aurais mis :

<h1>Welcome to CRM software :</h1>
<h2>Introduction</h2>

- bcp plus léger
- valide au niveau de la sémantique/logique (pcq utiliser des div pour des titres... :heink:

---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire

Le Castor

Neurasténique...

antp a écrit :

J'ai failli le mettre celui-là ! En fait ch'avais pas s'il avait une structure titre/sous-titre/etc..., alors j'ai fait du "générique"

Message édité par Le Castor le 24-08-2003 à 13:08:15

---------------
W3C : Leading the Web to Its Full Potential... - Membre du W3C l33t club

samuelp

antp a écrit :

Ben c'est pour uniformiser un peu la feuille. En utilisant QUE du CSS et QUE du Div, j'ecarte les critques de ceux qui peuvent me dire : "ouah regardes l'autre il fait du HTML 4.01" :heink:

samuelp

kadreg a écrit :

[:hello_cass]

[:samuelp]

Le Castor

Neurasténique...

samuelp a écrit :

Ben c'est pour uniformiser un peu la feuille. En utilisant QUE du CSS et QUE du Div, j'ecarte les critques de ceux qui peuvent me dire : "ouah regardes l'autre il fait du HTML 4.01" :heink:

ben une bonne structure h1/h2/etc..., montre que t'as tenté de structurer ta page en une certaine logique, typique de l'xhtml

---------------
W3C : Leading the Web to Its Full Potential... - Membre du W3C l33t club

antp

Super Administrateur
Champion des excuses bidons

samuelp a écrit :

En utilisant QUE du CSS et QUE du Div, j'ecarte les critques de ceux qui peuvent me dire : "ouah regardes l'autre il fait du HTML 4.01" :heink:

je vois pas le rapport... tu montres juste que t'as pas compris tout l'intérêt du HTML strict / XHTML

---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire

samuelp

Le Castor a écrit :

ben une bonne structure h1/h2/etc..., montre que t'as tenté de structurer ta page en une certaine logique, typique de l'xhtml

Bon ok je vais faire ça. J'imagine que je suis obligé de redefinir les attributs des tags h1, h2... dans mes feuilles de style, non ?

CF : Euh, j'arrive plus a acceder a TYP, normal ?

samuelp

Excusez moi mon ignorance mais :
<p></p> formate le texte en tant que paragraphe non ?
cad, a chaque ouverture/fermeture de p on passe à la ligne c'est ça ?

<span> c'est bien pour eviter de faire des blocs (div) et donc de ne pas passer forcement à la ligne, en gros c'est ça ?

antp

Super Administrateur
Champion des excuses bidons

samuelp a écrit :

J'imagine que je suis obligé de redefinir les attributs des tags h1, h2... dans mes feuilles de style, non ?

bah oui, mais ça fait pas plus de boulot que de créer des classes "titre" "soustitre" etc.

---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire

samuelp

antp a écrit :

bah oui, mais ça fait pas plus de boulot que de créer des classes "titre" "soustitre" etc.

De toute façon c'est fait. Merci pour la supposition

Maintenant j'essaie de creer des formulaires en me passant des <table> habituels (tout en div)

Ce sera moins beau mais le HTML sera plus clair.

Sinon, est ce que l'emploi de <FIELDSET> (au lieu d'un div approprié) c'est crade ou ça passe encore ?

antp

Super Administrateur
Champion des excuses bidons

heu si c'est pour présenter ton formulaire dans un tableau, il n'y a pas de raison de ne pas employer <table> ...

---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire

samuelp

antp a écrit :

heu si c'est pour présenter ton formulaire dans un tableau, il n'y a pas de raison de ne pas employer <table> ...

Le probleme du table c'est que, une fois la structure etablie, on ne peut plus tellement jouer sur les propriétés pour pouvoir, par exemple, afficher les champs et label sur la meme ligne, ou en colonne.

Mais bon, j'essaye, si j'arrive pas, je fais marche arriere

samuelp

HotShot a écrit :

<fieldset><label><input> tout ça c'est bon... et y a moyen de faire aussi bien (voire mieux) qu'un tableau

Pour le Fieldset c'est ce que je faisais.
Merci quand meme

samuelp

C'est moi ou c'est vachement plus simple de gerer en div/span + CSS que de gerer des table ?

antp

Super Administrateur
Champion des excuses bidons

bah les div c'est souvent plus simple une fois qu'on sait comment ça marche (faut absolument que je modifie mon site), mais il faut pas tomber dans l'excès en mettant des div pour des trucs qui doivent aller dans des h1, p, etc.

---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire

samuelp

J'ai quand meme un probleme

Voici le HTML généré :

Code :

div id="pagecontainer">
<h1>Please complete the user value</h1>
<form action="" method="POST" name="Please complete the user value">
<fieldset style="">
<legend class="formsubtitle">User specification</legend>
<div class=" formcontainer">
<div class="formlinecontainer">
<span class="formelement">
<span class="necessary">Gender</span>
<select name="titreid">
<option value="1">M</option>
<option value="2">Mlle</option>
<option value="3">Mme</option>
<option value="4">Dr</option>
<option value="5">Mgr</option>
</select>
</span>
</div>
<div class="formlinecontainer">
<span class="formelement">
<span class="necessary">Surname</span>
<input type="TEXT" value="" name="name" style="width:160px"></input>
</span>
</div>
<div class="formlinecontainer">
<span class="formelement">
<span class="formtext">First Name</span>
<input type="TEXT" value="" name="firstname" style="width:160px"></input>
</span>
</div>
<div class="formlinecontainer">
<span class="formelement">
<span class="necessary">Function</span>
<select MULTIPLE name="functionid[]" style="width:160px">
<option value="-1">SYSFONCTION</option>
<option value="1">ADMINISTRATEUR</option>
</select>
</span>
<span class="formelement">
<span class="necessary"></span>
<input type="BUTTON" value="Create" name="functionadd" onclick="window.open('functionadd.php','this','width=640,height=480,scrollbars=yes');"></input>
</span>
</div>
<div class="formlinecontainer">
<span class="formelement">
<span class="formtext">Email</span>
<input type="TEXT" value="" name="email" style="width:160px"></input>
</span>
</div>
<div class="formlinecontainer">
<span class="formelement">
Available modules<select MULTIPLE name="moduleid[]" style="width:160px;" size="5" onClick="selapp(document.forms['Please complete the user value'],document.forms['Please complete the user value'].elements['moduleid[]'],document.forms['Please complete the user value'].elements['moduleautorizedid[]'])">
<option value="1">Administration</option>
</select>
</span>
<span class="formelement">
<span class="necessary">Autorized Modules</span>
<select MULTIPLE name="moduleautorizedid[]" style="width:160px;" size="5" onClick="selapp(document.forms['Please complete the user value'],document.forms['Please complete the user value'].elements['moduleautorizedid[]'],document.forms['Please complete the user value'].elements['moduleid[]'])">
</select>
</span>
</div>
</div>
</fieldset>
<fieldset style="">
<legend class="formsubtitle">Autentification specification</legend>
<div class=" formcontainer">
<div class="formlinecontainer">
<span class="formelement">
<span class="necessary">Login</span>
<input type="TEXT" value="" name="login"></input>
</span>
</div>
<div class="formlinecontainer">
<span class="formelement">
<span class="necessary">Password</span>
<input type="PASSWORD" value="" name="password"></input>
</span>
</div>
<div class="formlinecontainer">
<span class="formelement">
<span class="necessary">Re-enter the password</span>
<input type="PASSWORD" value="" name="passwordretry"></input>
</span>
</div>
</div>
</fieldset>
<fieldset style="">
<legend class="formsubtitle">Optionals specification</legend>
<div class=" formcontainer">
</div>
</fieldset>
<fieldset style="">
<legend class="formsubtitle">Validate your user</legend>
<div class=" formcontainer">
<div class="formlinecontainer">
<span class="formelement">
<span class="formtext"></span>
<input type="BUTTON" value="Validation" name="Please complete the user value" onclick="fillSelect(document.forms['Please complete the user value'].elements['moduleautorizedid[]']),checkForm(arrayToVerify,document.forms['Please complete the user value'],'Please verify you have correctly fill all the requested field. Please also verify the length of your data','The length of the field should be contain in this range')"></input>
</span>
<span class="formelement">
<span class="formtext"></span>
<input type="RESET" value="Reset"></input>
</span>
</div>
</div>
</fieldset>
</form>
</div>

Et le CSS :

Code :

#container
{
background : url(test.png) no-repeat top right ;
padding-left : 0px ;
padding-right : 0px ;
padding-top : 0px;
padding-bottom : 0px;
}
.formlinecontainer
{
font-family : verdana, Arial ;
width : 100% ;
background-color : #aeaefc ;
filter: alpha(Opacity=30);
}
.formheadelement
{
font-family : verdana, Arial ;
width : 100% ;
background-color : #aeaefc ;
font-weight: bold ;
}
.formelement
{
font-family : verdana, Arial ;
width : 500px;
margin-left: auto ;
margin-right: auto ;
background-color : #aeaefc ;
}
.necessary
{
font-family : verdana, Arial;
font-weight: normal ;
color : #FF0000 ;
vertical-align: middle ;
background-color : #b6b6c6 ;
}
.missnecessary
{
font-family : verdana, Arial;
font-weight: bold ;
color : #FFFF00 ;
vertical-align: middle ;
background-color : #b6b6c6 ;
}
h1
{
font-family : verdana, Arial ;
font-size : 20px;
font-weight: bold ;
text-align: center ;
text-decoration: none ;
background-color : #aeaefc ;
margin-left: 0px ;
margin-right: 0px ;
margin-top: 10px;
margin-bottom: 10px;
}
h2
{
font-family : verdana, Arial ;
text-align: left ;
font-size: 14px ;
font-weight: bold ;
text-decoration: underline ;
background-color : #aeaefc ;
margin-left: 0px ;
margin-right: 0px ;
margin-top: 10px;
margin-bottom: 10px;
}

Le probleme c'est que j'arrive pas du tout a faire quelque chose de bien construit, cas aligner les cases avec les span.

Meme en voulant center le span (margin-lft: auto; margin-right: auto
ça marche po.

Qu'est ce qui peut clocher ?

samuelp

HotShot a écrit :

:fou: lis la Faq vindiou

Pardon ? Le truc sur les CSS ?

Le Castor

Neurasténique...

On ne peut pas center un span.

Un span est un élément de type inline, la div de type block. Un block est dimensionnable et positionnable. Un inline, non. L'inline est, comme son nom l'indique, un truc "en ligne", donc qui va avec le texte par exemple. Un block est un espèce de container, qui va contiendre d'autres trucs...

---------------
W3C : Leading the Web to Its Full Potential... - Membre du W3C l33t club

samuelp

Le Castor a écrit :

Merci pour ces precisions.
Donc si je veux placer mes elements (labels, INPUT...) de maniere unifirme, je dois utiliser des Div c'est ça ?
Le probleme avec les div c'est que celui ci implique un retour a la ligne non ? CAD je ne pourrais pas mettre sur la meme ligne le Label et le champ correspondant, ce qui est plutot ennuyant non ?

N'y a t-il pas un moyen de proceder autrement ? Par exemple, dans un span, mettre des div, pour le dimmensionnement ?

Le Castor

Neurasténique...

samuelp a écrit :

Même avec des divs dans un span, ça fera un retour à la ligne...

---------------
W3C : Leading the Web to Its Full Potential... - Membre du W3C l33t club

samuelp

Le Castor a écrit :

Même avec des divs dans un span, ça fera un retour à la ligne...

Aie. On ne peut donc pas faire de formulaires évolué en CSS
A moins que quelque chose m'ait echappé.

Publicité

Page : 1 2

Page Suivante

Page Précédente

Haut de page

FORUM HardWare.fr

Programmation

HTML/CSS

CSS et comportement etrange

Sujets relatifs
Petit problème avec une CSS...	[CSS] Site deux colonnes
[XHTML + CSS] Utilisation de la property css background	[XHTML CSS] Passer site de table en div
[CSS] chevauchement de divs	Réaction étrange du serveur MySQL avec le UNIX_TIMESTAMP
CSS et passage de parametres	Tutoriels et exercices CSS
[CSS] @page	[Validation] XHTML 1.0 Transitional CSS, Omittag No et Background
Plus de sujets relatifs à : CSS et comportement etrange

Page générée en 0.189 secondes