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)

grinditwp

2008-06-23 12:37

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?

Vimp	2008-06-23 13:19

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.

grinditwp

2008-06-23 15:14

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...

Vimp	2008-06-23 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.

grinditwp

2008-06-23 16:33

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!

Jonathan P

2008-06-23 20:17

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;

dAEk	2008-06-23 23:36

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.

grinditwp

2008-06-24 09:30

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

Vimp	2008-06-24 09:34

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

grinditwp

2008-06-24 09:53

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"?

allstars

2008-06-24 10:22

Citat:

Är inte conditional comments enbart för html-filer och inte css?

Jo, det var väl det han menade. Han skrev ju inget annat ;)

Kod:

 

<!--[if IE 6]>

<style type="text/css">

.my-ie6-style {color: blue;}

</style>



<link rel="stylesheet" type="text/css" href="style-ie6.css"/>

<![endif]-->

grinditwp

2008-06-24 10:37

Citat:

Originally posted by allstars@Jun 24 2008, 10:22

Citat:

Är inte conditional comments enbart för html-filer och inte css?

Jo, det var väl det han menade. Han skrev ju inget annat

Kod:

--if IE 6 style type=text/css .my-ie6-style {color blue;} /style link rel=stylesheet type=text/css href=style-ie6.css/ endif--

Jo, men eftersom jag jobbar i css fil, så undrar jag vad det heter då, så jag vet vbad jag ska söka på :P

Hursom, tack för alla bra svar, hoppas tråden även hjälper några andra i surret av cross-browser css.

Vimp	2008-06-24 11:02

Jo, jag menar just det som allstars visade.

Jag brukar ha en main.css med all css för sidan så att den ser bra ut i firefox, någorlunda bra ut i IE 7 och förjävlig ut i IE 6. Sedan så kör jag det här:

Kod:

<!--[if lt IE 7]><link rel="stylesheet" type="text/css" media="all" href="/styles/ie6.css" /><![endif]-->

<!--[if gte IE 7]><link rel="stylesheet" type="text/css" media="all" href="/styles/ie7.css" /><![endif]-->

Då har jag en fil med fulhack för ie 6 och en med fulhack för ie 7. Under tiden som IE 8 bara är i beta-stadiet så är det lika bra att köra med det här längst upp i head:

Kod:

<meta http-equiv="X-UA-Compatible" content="IE=7" />

Den raden gör så att sidan renderas som IE 7 (samt skickar med IE 7:s user agent). När hela IE 8 har släppts så kommer man förhoppningsvis kunna ha samma CSS som för Firefox. :)

Hjalmarsson

2008-06-24 16:11

Citat:

Originally posted by grinditwp@Jun 24 2008, 09:30
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

Jag har tyvärr bara IE6, ff3 och safari installerat just nu men med all sannolikhet ska det se bra ut.

Först och främst så är din markup inte nåt att hänga i granen väldigt mycket onödiga taggar, ett bra tips kan vara att just skriva din markup (html) innan du ger dig på CSS'n samt använda list's för din navigering/meny (för det är ju trots allt va det är :D).

iaf IE hanterar paddings tillsammans med absolute positionering lite knas, ett absolute positionerat element känner tyvärr av paddingen av sin container :/, går ju enkelt att fixa till med !important hack, slängde upp ett litet snabbt exempel du kan ta och kika på, hoppas du inte har något imot det.

http://www.iamfake.com/work/kupolium_help/ (kolla, källa)

Sen funkar det så på samma princip som "underscore" och "backslash" hacken, medans modernare webbläsare ignorerar raden så läser IE fortfarande in din #bottom defination. Vet att _bottom (som exempel) inte validerar aldrig brytt mig att ta reda på om bo\ttom gör det.. men att föredra är då att dra till med !important "hacket"(samma princip men tvärtom, IE förstår sig inte på det) istället.

Alla tider är GMT +2. Klockan är nu 19:38.