PDA

View Full Version : Css-positionering

Type
2004-12-20, 09:17
Hej
Jag har ett problem som jag inte vet hur jag ska lösa...

Det ska vara en bild längst ner till vänster på sidan.

Då lägger jag till left:0px;bottom:0px;
Allt är frid och fröjd tills man behöver scrolla på sidan. Scrollas den ner ligger den inte längre längst ner...

Då tänkte jag att jag kunde lägga den relativt under lagret som innehåller texten som gör att den behöver scrollas... Det blir inte heller riktigt rätt... För jag vill inte behöva scrolla PÅ GRUND AV bilden längst ner till vänster. Det skulle i så fall bli fallet...

Jag hoppas att någon har förstått vad jag babblar om...

Skickar ändå med lite kod för att visa hur det ser ut nu...
Koden för lagret där bilden som ska vara längst ner till vänster:

div#bild{
position:absolute;
left:0px;
z-index:1;
bottom:0px;
margin:0px;
padding:0px;
}

Jag har eget z-index just för att den ska kunna ligga bakom ett annat lager...

Sidan (ursäkta att det blev så mycket):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv">
<head>
<title>STEFAN LINDBERG</title>
<link rel="stylesheet" type="text/css" href="stilmall.css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="funktioner.js"></script>
<script type="text/javascript">
<!--hide
function init(){
visibleButton='button_2_';
}
//-->
</script>
</head>
<body onload="init();">
<div id="content">
<!-- LEFT BEGIN-->
<div id="left">
<a href="index.html"><img src="bilder/head.gif" alt="STEFAN LINDBERG"/></a>
</div>
<!-- LEFT END-->

<!-- MIDDLE BEGIN -->
<div id="middle">

<!-- MAIN BEGIN -->
<div class="main_top"><img src="bilder/back_main_top.gif"/></div>
<div class="main">
<p>My name is Stefan Lindberg, born in 1982 in Västerås, Sweden. I have played guitar since about 1998. Currently I live in Karlstad, Sweden where I study for a masters degree in information technology, which leaves me with not too much time practicing guitar.</p>
<p>Originally, I come from a very small swedish town called Kolbäck where I grew up. Before I discovered how great and fun guitarplaying is I played (not too much though) flute, keyboard, bass and march drum. One day a good friend of mine played the intro riff in the song "Master of Puppets" by Metallica. From that day I sold my soul to distorted guitars and heavy metal. I bought a guitar shortly after and began practicing like a maniac.</p>
<p>My first influense were, besides Metallica, Iron Maiden. But constantly seeking new challenges and improve my guitar playing I discovered songs written by many extraordinary guitar players like Yngwie Malmsteen, Steve Vai and Joe Satriani.</p>
<p>Today I get most of my inspiration from Paul Gilbert, Nuno Bettencourt and the greatest of them all; Mattias "IA" Eklundh of Freak Kitchen.</p>

</div>
<div class="main_bottom"><img src="bilder/back_main_bottom.gif"/></div>
<!-- MAIN END -->

<!-- PICTURES BEGIN -->
<div class="main_top"><img src="bilder/back_main_top.gif"/></div>
<div class="main">
pictues
</div>
<div class="main_bottom"><img src="bilder/back_main_bottom.gif"/></div>
<!-- PICTURES END -->

</div>
<!-- MIDDLE END -->

<!-- RIGHT BEGIN -->
<div id="right">

<!-- MENU BEGIN -->
<div class="menu">
<a href="index.html"><img src="bilder/menu_home_off.gif" name="button_7_" onmouseover="rollIn('button_7_')" onmouseout="rollOut('button_7_')" onclick="rollInClick('button_7_');" alt="HOME"/></a><br>
<a href="bio.html"><img src="bilder/menu_bio_off.gif" name="button_1_" onmouseover="rollIn('button_1_')" onmouseout="rollOut('button_1_')" onclick="rollInClick('button_1_');" alt="BIO"/></a><br/>
<a href="licks.html"><img src="bilder/menu_licks_on.gif" name="button_2_" onmouseover="rollIn('button_2_')" onmouseout="rollOut('button_2_')" onclick="rollInClick('button_2_');" alt="LICKS"/></a><br/>
<a href="scales.html"><img src="bilder/menu_scales_off.gif" name="button_3_" onmouseover="rollIn('button_3_')" onmouseout="rollOut('button_3_')" onclick="rollInClick('button_3_');" alt="SCALES"/></a><br/>
<a href="discography.html"><img src="bilder/menu_discography_off.gif" name="button_4_" onmouseover="rollIn('button_4_')" onmouseout="rollOut('button_4_')" onclick="rollInClick('button_4_');" alt="DISCOGRAPHY"/></a><br/>
<a href="links.html"><img src="bilder/menu_links_off.gif" name="button_5_" onmouseover="rollIn('button_5_')" onmouseout="rollOut('button_5_')" onclick="rollInClick('button_5_');" alt="LINKS"/></a><br/>
<a href="guestbook.php"><img src="bilder/menu_guestbook_off.gif" name="button_6_" onmouseover="rollIn('button_6_')" onmouseout="rollOut('button_6_')" onclick="rollInClick('button_6_');" alt="GUESTBOOK"/></a>
</div>
<!-- MENU END -->

</div>
<!-- RIGHT END -->
</div>

<div id="bild"><img src="bilder/vit.jpg" alt="STEFAN LINDBERG"/></div>
<div id="madeby"><a href="http://www.sigvardsson.nu" target="_new"><img src="bilder/madeby.gif" alt="LINK: WWW.SIGVARDSSON.NU"/></a></div>
</body>
</html>
zcorpan
2004-12-20, 11:24
Du kanske vill ha position: fixed;? Det fungerar iofs inte med IE, men det spelar kanske inte så stor roll...
Insider
2004-12-20, 11:53
Förstod inte riktigt hur du ville ha det.
Men om du vill att bilden ska ligga som en sidfot längst ner kan du ju kolla på den här sidan.
http://member.webforum.nu/Jarvklo/okkidos_bilskola.html
Yoda
2004-12-20, 12:11
Jag har kollat in länken som Insider skickat med. Så har jag försökt göra flera gånger utan bra resultat. Att sidfoten hänger med ner liksom.
Så, hur gör man det då?
PepeJeria
2004-12-20, 13:22
Jag har kollat in länken som Insider skickat med. Så har jag försökt göra flera gånger utan bra resultat. Att sidfoten hänger med ner liksom.
Så, hur gör man det då?

Såg du zcorpan svar? Som han sa så stöder inte IE detta. Det finns alternativa lösningar dock, en är att ha position:fixed för riktiga browsers plus ett Javascript som räknar ut höjden på sidan. Beroende på sidans höjd switschar du mellan static och bottom på den div:en.

Ta en titt på denna (http://www.alistapart.com/articles/footers/) sida som förhoppningsvis kan vägleda dig.
Yoda
2004-12-20, 13:46
Aha, inget bra om det inte funkar i IE, jag ska kolla in sidan du skickade. Tack
Insider
2004-12-20, 14:20
Aha, inget bra om det inte funkar i IE, jag ska kolla in sidan du skickade. Tack
Men om du kollade på länken jag skickade med din webläsare såg du väl med egna ögon att det funkar i IE. Du behöver inte blanda in javascript.
Det är en kombination av min-height:100% och height:100% som ger önskvärt resultat. Man får lägga in en enkel IF-sats för att ge IE rätt egenskap för höjden.

Som jag har förstått det så stödjer inte IE min-height och tolkar height:100% felaktigt.

<!--[if IE]>
<style type="text/css">
#container {height:100%}
</style>
<![endif]-->


Att använda position fixed som zcorpan gjorde ger en helt annan effekt (trådskaparen var luddig med vad han ville åstadkomma), och den effekten funkar ef i IE.
zcorpan
2004-12-20, 16:19
Att använda position fixed som zcorpan gjorde ger en helt annan effekt (trådskaparen var luddig med vad han ville åstadkomma), och den effekten funkar ef i IE.Jag gillar den effekten, och brukar använda den. För IE brukar jag då vara snäll och sätta position:absolute; istället med conditional comments, samma metod som du använder height:100%; för IE. Självklart ger det inte samma effekt för IE, men jag tänker inte undvika godbitar i CSS bara för att en webbläsare har dåligt stöd för CSS.

Samma sak gäller HTML. Jag använder gärna tex <q> och <abbr> trots att IE inte vet vad det är.
Insider
2004-12-20, 18:45
Jo, det är ju rätt utgångspunkt att justera för IE i efterhand.
Det här exemplet fungerar faktiskt i IE6:
http://www.456bereastreet.com/lab/cssframes/

position:absolute för IE6 samt:

html {
overflow:hidden;
}

body {
height:100%;
overflow:auto;
}

Men det var kanske så du menade...


...och det här funkar tydligen för IE5 med. Kanske pga scriptet.
http://devnull.tagsoup.com/fixed/horizontal.html
Type
2004-12-20, 20:20
trådskaparen var luddig med vad han ville åstadkomma
Jag må vara luddig men faktum är att du förstod på en gång! Funka perfekt när jag applicerat det på min sida. Det jag fick ändra är att bilden ligger i ett lager längst ner. Det gör i sin tur att bilden inte kan ligga under det andra men det kan jag leva med.
Attans. Nu blev det luddigt igen ;)

Tack så mycket Insider!
zcorpan
2004-12-20, 20:59
Det här exemplet fungerar faktiskt i IE6:Jaha, coolt. Jag ska kolla närmare på det... :h
Insider
2004-12-20, 21:02
Tack så mycket Insider!
God jul från en värmlänning till en annan.
Ja, jag är från Karlstad!