WEBDESIGN: Placera en bild längst ner i mitten

2009-10-17 00:24

Medlem

Registrerad: Nov 2003

●

WEBDESIGN: Placera en bild längst ner i mitten

Jag har stött på ett problem som jag inte kan lösa. Det är antagligen jättelätt för den som kan, men jag har inte hittat en lösning någonstans (har googlat och sniffat forum)

Det jag vill göra är simpelt:

i xhtml

Jag vill göra en sida som är helt tom, förutom en enda bild, som skall befinna sig längst ner i mitten av webbläsarförnstret, mot nedre kanten.

Jag vill även att den alltid är längst ner i mitten oavsett om man byter storlek på webbläsarfönstret eller använder olika sorters webbläsare.

Finns det någon som kan hjälpa mig?

Visa signatur

Coolermaster Centurion, 2800+ AMD, 1024 mb minne (2x 512 mb ddr dualchannel), Seagate SATA 160 GB, HIS Excalibur 128 MB Radeon 9800 PRO

Rapportera Redigera

Citera flera Citera

2009-10-17 00:28

Permalänk

You

Medlem

Plats: Göteborg
Registrerad: Jan 2007

●

#bild {
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -[halva din bilds bredd]px;
}

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Rapportera Redigera

Citera flera Citera

2009-10-17 00:29

Permalänk

Phiiber

Medlem

Plats: Umeå
Registrerad: Jul 2006

●

Sök på positionering med CSS. Var tyvärr för länge sedan jag höll på med något sådant för att jag skulle kunna vara till någon vidare hjälp men tror inte det är svårt att fixa bara man läser lite.

Rapportera Redigera

Citera flera Citera

2009-10-17 01:33

Permalänk

St0rm69

Medlem

Registrerad: Nov 2003

●

You,

du skulle inte ha något emot att göra en fil och skicka till mig, eller bara posta hela filtexten här? Jag fattar inte riktigt vart i koden det ska in... Det hade varit underbart sjysst!

Visa signatur

Coolermaster Centurion, 2800+ AMD, 1024 mb minne (2x 512 mb ddr dualchannel), Seagate SATA 160 GB, HIS Excalibur 128 MB Radeon 9800 PRO

Rapportera Redigera

Citera flera Citera

2009-10-17 01:53

Permalänk

Leedow

Medlem ★

Plats: Falun
Registrerad: Dec 2003

●

Jaha...?

Visa signatur

ηλί, ηλί, λαμά σαβαχθανί!?

Rapportera Redigera

Citera flera Citera

2009-10-17 02:14

Permalänk

You

Medlem

Plats: Göteborg
Registrerad: Jan 2007

●

Citat:

Ursprungligen inskrivet av St0rm69
You,

du skulle inte ha något emot att göra en fil och skicka till mig, eller bara posta hela filtexten här? Jag fattar inte riktigt vart i koden det ska in... Det hade varit underbart sjysst!

Kolla ordentligt på hur man skriver CSS och HTML ordentligt...

<!DOCTYPE html>
<title>En sida med en bild</title>
<style type="text/css">
  #bild {
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -[halva din bilds bredd]px;
  }
</style>
<img id="bild" src="din-bild.png" alt="Vad din bild föreställer">

(inb4 folk klagar på min fullständigt giltiga HTML5-kod)

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Rapportera Redigera

Citera flera Citera

2009-10-17 10:45

Permalänk

St0rm69

Medlem

Registrerad: Nov 2003

●

jaha, va bra, nu förstår jag den där biten tack så jättemycket!

ska lära mig koda ordentligt, har bara inte hittat någon gratiskurs än

tack så jättemycket You!

Visa signatur

Coolermaster Centurion, 2800+ AMD, 1024 mb minne (2x 512 mb ddr dualchannel), Seagate SATA 160 GB, HIS Excalibur 128 MB Radeon 9800 PRO

Rapportera Redigera

Citera flera Citera

2009-10-17 10:56

Permalänk

timerx

Medlem ★

Plats: Localhost
Registrerad: Mar 2002

●

http://www.w3schools.com/

Där står allt man behöver veta. Behövs inga kurser för detta.

Rapportera Redigera

Citera flera Citera

2009-10-17 12:45

Permalänk

Teknocide

Medlem ★

Registrerad: Sep 2007

●

Citat:

Ursprungligen inskrivet av You

#bild {
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -[halva din bilds bredd]px;
}

Det måste vara position: fixed om bilden ska ligga kvar längst ner när det resterande innehållet blivit så högt att det måste scrollas.

Visa signatur

Kom-pa-TI-bilitet

Rapportera Redigera

Citera flera Citera

2009-10-17 14:19

Permalänk

You

Medlem

Plats: Göteborg
Registrerad: Jan 2007

●

Citat:

Ursprungligen inskrivet av Teknocide
Det måste vara position: fixed om bilden ska ligga kvar längst ner när det resterande innehållet blivit så högt att det måste scrollas.

Vilket inte kommer hända om bilden är det enda på sidan.
Dessutom specifierar TS inte om det ska vara längst nere på sidan eller längst nere i förnstret.
Men du har rätt

Sen skulle jag vilja rekommendera TS att läsa Webboken.

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!