WN - valign...

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

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

- - valign... (https://www.wn.se/forum/showthread.php?t=30083)

Finns det någon motsvarighet för valgin när man jobbar med div-taggar.

Ex i tabell.

Kod:

<table style="width:200px; height:200px;" border="0" cellspacing="0" cellpadding="0">

 <tr>

  <td valign="bottom">Nere</td>

 </tr>

</table>

Texten ligger alltså i nederkanten av tabellen.

Men om jag då istället gör en div-tag med samma proportioner.

Kod:

<div style="width:200px; height:200px;">

Nere

</div>

Hur får jag nu innehåller att ligga i nederkanten?
Både align="right" och text-align:right; fungerar för att högerställa innehållet. Dock så finner jag inget som fungerar som valgin.

Nu tänker jag framför allt med design i tanke, text är kanske inte det enda jag behöver placera i nederkant.

Någon?

Kod:

<div style="width:200px; height:200px; position: relative;">

 *<p style="position: absolute; bottom: 0px; right: 0px;">

 * *Text nere i högra hörnet

 *</p>

</div>

Du kan givetvis använda t.ex. en img-tagg med absolut positionering på samma sätt. Genom att sätta divens position till relativ så blir alla absolut positionerade element i den relaterade till just den.

Tack för din hjälp! Tänkte inte på det. Självklart nu i efterhand.
Anyway, har fortsatt att leka vidare.

Har dock ett problem... I min meny jag håller på att tillverka så skiljer det sig en pixel i Explorer och övriga webbläsare (Firefox, Opera, Safari).

Ta en titt på: http://www.zebramedia.se/kupolium/divutbildning.php

Det ser bra ut i t.ex. Firefox medans menyns grafik ligger 1 pixel för högt upp i övriga.
Varför och hur löser man detta?

CSS-filen:

Kod:

.top {

        background-image:url(../image_layout/layout_top.png);

        background-repeat:no-repeat;

        width:990px;

        height:145px;

        position:relative;

}



.zebdropdownmenu{

        position:absolute;

        bottom:0px;

        right:30px;

        text-align:right;

        display:block;

}

.zebmenublock{

        background:url(../image_layout/layout_menubuttom.png) repeat-x;

        width:120px;

        height:60px;

        float:right;

}

.zebmenublocktext{

        text-align:center;

        margin-top:10px;

}

HTML/PHP:

Kod:

<body class="bodybg">

  <div align="center">

    <div class="top">

  <? include('menu.php'); ?>

    </div>

    <div class="middle"></div>

    <div class="bottom"></div>

  </div>

</body>

menu.php

Kod:

//KOD SOM HÄMTAR MENYN, PALLAR EJ SKRIVA UT HELA; DET ÄR EN DEL...

<div class="zebdropdownmenu" id="zebdropdownmenu">

      <div class="zebmenublock"><p class="zebmenublocktext">//MENY ALTERNATIV 1</p></div>

      <div class="zebmenublock"><p class="zebmenublocktext">//MENY ALTERNATIV 2</p></div>

      <div class="zebmenublock"><p class="zebmenublocktext">//MENY ALTERNATIV 3</p></div>

      //OSV...

</div>

Tror det är den väsentliga biten...

Testa först att sätta no-repeat på bakgrunden, då jag antar att den inte ska repeteras. Fungerar inte det så kan du testa att ändra höjden så att rutan blir lite högre samt sätta background-position till bottom.

Citat:

Originally posted by Vimp@Jun 23 2008, 16:01
Testa först att sätta no-repeat på bakgrunden, då jag antar att den inte ska repeteras. Fungerar inte det så kan du testa att ändra höjden så att rutan blir lite högre samt sätta background-position till bottom.

Tack för tipsen, men det hjälpte dessvärre icke.
Jag testade även att lägga på 1 pixel på "top" också, men det hjälpte inte heller, utan då lade sig grafiken 1 pixel under istället när man kollade på det i Explorer...

Några fler idéer?

Tack på förhand!

Citat:

Originally posted by grinditwp@Jun 23 2008, 12:37
[...] Hur får jag nu innehållet att ligga i nederkanten?
Både align="right" och text-align:right; fungerar för att högerställa innehållet. Dock så finner jag inget som fungerar som valgin. [...]

Du kan använda dig av CSS-attributet vertical-align. Exempelvis:

Kod:

vertical-align:bottom;

vertical-align funkar bara för inline-element och tabellceller. Annars brukar det fungera att köra med pos. relative och positive som redan föreslagits.

Är du nybörjare på CSS är det A och O att köra med en doctype som triggar standards mode i webbläsarna, exempelvis <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">. Och det får inte komma någon output annat än blanktecken före doctypen för då ryker standards mode i IE.

Sen skulle inte jag bry mig om ifall saker hamnar en pixel snett. Även om det går att få till det pixelperfekt är det ingen som helst garanti för att det kommer se bra ut på besökarnas datorer eftersom de kanske använder annan webbläsare, annan storlek eller annat teckensnitt etc. Så gör dig själv en tjänst och strunta i pyttedetaljer om du kan.

Av någon anledning så löste sig problemet med att jag lade in:

Kod:

bottom:0px;

#bottom:-1px;

...på zebdropdownmenu.

Nu verkar det som Firefox med flera läser bottom 0px och IE tolkar -1px. Inget jag provat förut men av någon anledning testade jag.

Någon som kan förklara detta? hehe

Om du ska ha specifika hack för IE så bör du kika på conditional comments.

Citat:

Originally posted by Vimp@Jun 24 2008, 09:34
Om du ska ha specifika hack för IE så bör du kika på conditional comments.

Är inte conditional comments enbart för html-filer och inte css?
http://www.quirksmode.org/css/condcom.html

Typ:

Kod:

<!--[if IE 6]>

Kod för IE 6.

<![endif]-->

Någon som har en bra länk för att läsa om CSS "hacks/fixes"?