WN - Div funkar här men inte där?

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - Div funkar här men inte där? (https://www.wn.se/forum/showthread.php?t=35197)

Hej!

Jag har en halvfärdig shop design som jag försöker fixa som jag vill ha den innan en programmerare tar tag i den och ger den funktionerade kod. Den förra designen gjorde först en sida som avr menad för att skriva kommentarer till en produkt men jag ansåg att den kunde göras bättre och skapade derför en "pop up" div där man kan skriva kommentaren och sen skicka iväg istället för att forslas till en helt ny sida för att skriva en kommentar. Så jag snodde koden från den sidan och satta den på produktsidan men helt plötsligt är det som att förbindelsen med css filen är borta just för den diven och jag kan inte förstå varför.


<div class="grayback" style="position:absolute; left:5px; top:21px; z-index:99; padding:5px; border:#000 solid 1px;">
<form id="form3" name="form3" method="post" action="">
<table border="0" cellpadding="2" cellspacing="0" id="reviewform">
<tr align="left">
<td colspan="3">Title:
<label><input type="text" name="textfield4" id="textfield4" /></label>
</td>
</tr>
<tr align="left">
<td colspan="3">Comment:
<label><textarea name="textarea" id="textarea" cols="40" rows="5"></textarea></label></td>
</tr>
<tr align="left">
<td>Your name:
<label><input type="text" name="textfield3" id="textfield3" /></label></td>
<td> Your rating:

<label><select name="select" size="1" id="select">
<option value="1star">5 Stars</option>
<option value="2star">4 Stars</option>
<option value="3star">3 Stars</option>
<option value="4star">2 Stars</option>
<option value="5star">1 Star</option>
</select></label>
</td>
<td align="right"><div id="postreview"><label><input type="submit" name="button3" id="button3" value="Post" /></label></div></td> <--- denna rad läser inte av id="postreview" från css filen.
</tr>
<tr>
<td colspan="3">
Thank you for your rewiev!
It will be displayed within a day.
</td>
</tr>
</table>
</form>
</div>

Kod:

#shopcart table#reviewform td#ratings img {

        margin:0px 10px 0px 0px;

        border:none;

}

#shopcart table#reviewform td {

        padding:2px 14px 2px 14px;

}

#shopcart table#reviewform td input {

        width:200px;

        padding:2px 0px 2px 0px;

        height:17px;

        border:1px solid #d8dde6;

        border-top:1px solid #999999;

        font-size:12px;

        font-weight:normal;

}

#shopcart table#reviewform td textarea {

        width:200px;

        padding:2px 0px 2px 0px;

        height:120px;

        border:1px solid #d8dde6;

        border-top:1px solid #999999;

        font-size:12px;

        font-weight:normal;

}

#shopcart table#reviewform td #postreview {

        background-image:url(../images/review.jpg);

        background-repeat:no-repeat;

        background-position:top left;

        height:43px;

        padding:0px 0px 0px 0px;

        margin:0px 0px 0px 0px;

        width:77px;

}

#shopcart table#reviewform td #postreview input {

        height:25px;

        width:77px;

        background:none;

        font-weight:bold;

        color:#FFFFFF;

        border:none;

}

Är det någon som kan hjälpa mig med varför det inte funkar som tänkt? knappen ska ha en grafisk look "../images/review.jpg" och vara en annan storlek etc men den läser inte av css filen för den diven.
Observera att denna kod inte är rensad och tillfixad eftersom det är en blandning mellan 2 sidor.
http://img9.imageshack.us/img9/5600/postfh1.jpg

testa detta istället:

div#postreview { ...

istället för:
#shopcart table#reviewform td #postreview { ...

Kolla också att bilden har rätt sökväg och att den finns..

Citat:

Originally posted by taz76@Feb 17 2009, 16:31
testa detta istället:

div#postreview { ...

istället för:
#shopcart table#reviewform td #postreview { ...

Kolla också att bilden har rätt sökväg och att den finns..

Ja alltså jag tog som sagt samma kod som fanns på en annan sida och slistra in den och där funkade koden perfekt. Ska testa de du sa.

Citat:

Ursprungligen postat av Chidori

Citat:

Ursprungligen postat av taz76

testa detta istället:

div#postreview { ...

istället för:
#shopcart table#reviewform td #postreview { ...

Kolla också att bilden har rätt sökväg och att den finns..

Ja alltså jag tog som sagt samma kod som fanns på en annan sida och slistra in den och där funkade koden perfekt. Ska testa de du sa.

Nu funkar det.

Jag tog ut "#postreview" och skrev allt i ett eget avsnitt nedanför så nu ser det ut såhär.

Kod:

#shopcart table#reviewform td {

        background-image:url(../images/review.jpg);

        background-repeat:no-repeat;

        background-position:top left;

        height:43px;

        padding:0px 0px 0px 0px;

        margin:0px 0px 0px 0px;

        width:77px;

}

#postreview {

        background-image:url(../images/review.jpg);

        background-repeat:no-repeat;

        background-position:top left;

        height:43px;

        padding:0px 0px 0px 0px;

        margin:0px 0px 0px 0px;

        width:77px;

Varför kan jag inte ha all på en å samma rad när det funkar på en annan sida ?!? Fattar inget :/ Känns som en massa onödig kod. Detta måste gå att fixa på nått sätt.

Citat:

Ursprungligen postat av Chidori

Citat:

Ursprungligen postat av Chidori

Varför kan jag inte ha all på en å samma rad när det funkar på en annan sida ?!? Fattar inget :/ Känns som en massa onödig kod. Detta måste gå att fixa på nått sätt.

Då är det säkert något med selectorerna.. du haden en gigantisk "sökväg" först.. sen då du kortade ner den så funkade det.

I den html du har i inlägget så finns inget element med id #shopcart... är du säker på att du har det på båda ställena?

Dessutom lämnar html-koden mycket att önska; bl a tabell-baserad layout och en direkt felaktig användning av label-elementet... att inte ha korrekt och välstrukturerad kod är ofta skäl till huvudvärk. Svårt att säga om det har någon direkt inverkan i detta fallet dock.

"direkt felaktig användning av label-elementet" Hjälp mig, vad du menar med det?

Här är ett till problem som är likt.

Inget av id'erna funkar när det står så här.

#reviewform select #reviewform input {
border:1px solid #7F7F7F;
border-top:1px solid #999999;
font-size:12px;
font-weight:normal;
}

Men skriver jag dem i sperata stycker funkar det utmärkt, varför är det så? skriver jag något fel?

det verkar ha någonting att göra med att det är i en absolut div, alla rader oavset vad det är så länge det finns i diven som är abolut så funkar det inte att definera 2st di's på samma rad.

Du skall selektera båda typerna med ett komma-tecken som separator

Kod:

#reviewform select,

#reviewform input {

border:1px solid #7F7F7F;

border-top-color: #999;

font-size:12px;

font-weight:normal;

}

Vidare så förstår jag inte detta:

Kod:

<label><select name="select" size="1" id="select">

<option value="1star">5 Stars</option>

<option value="2star">4 Stars</option>

<option value="3star">3 Stars</option>

<option value="4star">2 Stars</option>

<option value="5star">1 Star</option>

</select></label>

Etikett använder man för text för att hänvisa till(döpa) fältet

Kod:

<label for="myselect">Betyg</label>

<select name="betyg" size="1" id="myselect">

<option value="1star">5 Stars</option>

<option value="2star">4 Stars</option>

<option value="3star">3 Stars</option>

<option value="4star">2 Stars</option>

<option value="5star">1 Star</option>

</select>

Notera att jag ändrat id och name på selecten för att du skall förstå skillnaden.

Ditt första mysterium kan bero på att du inte har ett element med id="shopcart" runt exempelkoden du klistrade in här.

Att ha ett label-element runt sitt formulärelement är helt ok (du måste inte ha for-attributet) men vitsen försvinner lite i ditt fall eftersom du inte även inkluderar texten (t ex "Your rating").

Även om det nu är tillåtet att "wrappa" formulärelement med label så är det enligt uppgift inte tillrådigt då det skapar problem för t ex screen readers. Se http://green-beast.com/blog/?p=254

Märk väl att det i IE7 inte heller går att klicka på en wrappad label för att sätta fokus till det berörda formulärelementet om for-attributet inte är satt.

Citat:

Originally posted by HMH@Feb 18 2009, 00:06
Även om det nu är tillåtet att "wrappa" formulärelement med label så är det enligt uppgift inte tillrådigt då det skapar problem för t ex screen readers. Sehttp://green-beast.com/blog/?p=254

Crap. Jag brukar använda mig av hybridmodellen, dvs både uttryckligen associera labelen med formulärkontrollen och kapsla in det inom labelnoden. Exempelvis:

Kod:

<label for="email">

        <span>E-post</span>

        

        <input type="text" name="email" id="email">

</label>

Hade för mig att det var dåligt men har inte brytt mig om att kolla upp det så tack för länken!

Någon som har en bra länk om labels så man kan läsa på?

Med tanke på hur grötig koden var skulle du nog behöva en generell länk om semantisk html i största allmänhet.

Det viktiga (som du har missat) med label-elementet är att det innehåller texten som beskriver vad som ska anges i input/select-elementet och hänvisar till vilket input/select-element det gäller antingen med attributet for eller genom att innesluta både input/select-elementet och beskrivningstexten.

Citat:

Originally posted by martine@Feb 18 2009, 14:00
Med tanke på hur grötig koden var skulle du nog behöva en generell länk om semantisk html i största allmänhet.

Det viktiga (som du har missat) med label-elementet är att det innehåller texten som beskriver vad som ska anges i input/select-elementet och hänvisar till vilket input/select-element det gäller antingen med attributet for eller genom att innesluta både input/select-elementet och beskrivningstexten.

Är inte detta något programmeraren gör?

En designer kan för den delen också göra markup.
Beror på hur rollerna är tilldelade på arbetsplatsen (i projektet) eller hur kunnig designern är.