CSS-position i förhållande till vald box

Tråden skapades och har fått 24 svar. Det senaste inlägget skrevs .
1
  • Medlem
  • Stockholm
  • 2006-06-28 22:15

Är det möjligt att med css ange positioneringen av ett gäng div:ar i förhållande till en annan div? Alltså jag skulle vilja ange antal pixlar från top och left men inte från övre vänstra hörnet av browsern utan från en vissa div som jag lagt ut på sidan.

Jag vet att det går att använda position: relative men då bestämst ju utgångspunkten hela tiden från den div som kommer innan i HTML-koden. Jag vill skälv kunna säga att alla lager ska ange positioneringen efter en viss punkt.

Eftersom det kanske låter lite flummigt har jag gjort en liten illustration.

Det jag vill uppnå är alltså att ha en layout som hela tiden är centrerad (den röda rutan) och att de andra rutorna ska positioneras ut med utgångspunkt från övre vänstra hörnet på den röda rutan. Någon som förstår vad jag menar och som har en lösning på det hela?

Jag förstår inte varför du inte vill använda position: relative; som ju är till för att lösa just sådana problem.

  • Medlem
  • Stockholm
  • 2006-06-28 22:48

Jo för jag vill att sidan ska kunna vara dynamisk i höjdled. Om jag t.ex. först placerar ut den blå rutan och sedan den gula och sätter positionering relative på den så måste jag ju ange ett negativt top-värde (eftersom den ska var uppe i det vänste hörnet på den blåa.). Men eftersom innehållet på den blåa styr dess höjd vet jag inte hur många pixlar den gula ska ha minus i top. Flera liknande rutor kommer att placeras ut lika dant så att i detta fall placera ut den gula rutan först i koden ändrat inte på problematiken eftersom liknande situationer kommer uppstå senare. Eller har jag missat något vad gäller position i css?

Det jag skulle vilja är att ange position: absolute med den röda som utgångsvärde.

  • Medlem
  • Karlstad
  • 2006-06-28 22:52

Du kan ju inte ha en absolut postionering eftersom den gröna kanske expanderar neråt (om du inte bara har en bild i den alltså).

Det spelar ingen roll hur mycket den blå bygger neråt. Den gula sitter ju i samma position ändå.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled Document</title>
<meta name="MSSmartTagsPreventParsing" content="true">
<meta http-equiv="imagetoolbar" content="no">
<link rel="shortcut icon" href="http://www.mysite.com/favicon.ico">
<style type="text/css">

</style>
</head>
<body>
<div id="wrapper">
<div id="green">GREEN</div>
<div id="blue">BLUE
<div id="yellow">YELLOW</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem,
consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam
nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque.
Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus
dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu
non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim
nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu,
ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros
eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper
eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
<p>Sed et lectus in massa imperdiet tincidunt. Praesent neque tortor, sollicitudin
non, euismod a, adipiscing a, est. Mauris diam metus, varius nec, faucibus at,
faucibus sollicitudin, lectus. Nam posuere felis ac urna. Vestibulum tempor vestibulum
urna. Nullam metus. Vivamus ac purus. Nullam interdum ullamcorper libero. Morbi
vehicula imperdiet justo. Etiam mollis fringilla ante. Donec et dui. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
Etiam mi libero, luctus nec, blandit ac, rutrum ac, lectus.</p>
<p>Morbi consequat felis vitae enim. Nunc nec lacus. Vestibulum odio. Morbi egestas,
urna et mollis bibendum, enim tellus posuere justo, eget elementum purus urna
nec lacus. Nullam in nulla. Praesent ac lorem. Donec metus risus, accumsan ut,
mollis non, porttitor eget, mi. Aliquam aliquet, tortor a elementum aliquam,
erat odio sodales eros, suscipit blandit lectus dolor sit amet elit. In eros
wisi, mollis vitae, tincidunt in, suscipit id, nibh. Class aptent taciti sociosqu
ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus ornare.
Suspendisse potenti. Mauris convallis. Vestibulum nec mauris in augue porta mollis.
Proin ut nunc. Mauris aliquam dui eget purus.</p>
</div>
</div>


</body>
</html>
  • Medlem
  • Stockholm
  • 2006-06-28 23:04

tack Danne, men när jag fyller den blåa rutan i dit exempel med innehåll så att den växer i höjdled ja då följer ju den gula med och flyttar sig längre och längre ner på sidan. Det är just det som är mitt problem. Jag vill att den ska ligga kvar uppe i hörnet.

Följ länken nedan så får ni se hur hela layouten ska se ut så kanske det blir lite klarare. Jag vill alltså att både den svarta och den vita rutan ska kunna var flexibla i höjdled. Blommorna ska alltid vara i hörnen.

http://hem.mac.se/felix/design.png

  • Medlem
  • Karlstad
  • 2006-06-28 23:15
Ursprungligen av Bridell:

tack Danne, men när jag fyller den blåa rutan i dit exempel med innehåll så att den växer i höjdled ja då följer ju den gula med och flyttar sig längre och längre ner på sidan. Det är just det som är mitt problem. Jag vill att den ska ligga kvar uppe i hörnet.

Nej det gör den inte i mitt exempel (som iofs behöver ha auto som höger och vänstermarginaler i den blå och gröna divven).

Ursprungligen av Bridell:

Följ länken nedan så får ni se hur hela layouten ska se ut så kanske det blir lite klarare. Jag vill alltså att både den svarta och den vita rutan ska kunna var flexibla i höjdled. Blommorna ska alltid vara i hörnen.

http://hem.mac.se/felix/design.png

Skit i att laborera med divvar om det bara är bilder du vill ha där. Lägg istället in bilderna som bakgrunder. Den vänstar övre blomman som bakgrund i den svarta divven, den nedre högra blomman som bakgrund i den vita divven. Eventuellt måste du photoshoppa blommorna för att ge dom rätt bakgrunder och "byte" av bakgrunder. Svårt att förklara. Hoppas du hajar.

Ta bort float: left; från css:en så borde det fungera som du vill.

  • Medlem
  • Stockholm
  • 2006-06-28 23:12

Samma resultat då Niklas.
Jag skulle kunna lösa det genom att sätta ut hårda värden på alla ställen men då kommer ju inte sidan att vara centrerad hela tiden vilket vore lite synd. Har även funderat på att använda gamla frames för att få sidan centrerad och efter det kunna använda position: absolute på alla men det tar emot. Blir ju inte så bra om en undersida hittas av en sökmotor.

Ursprungligen av Bridell:

Samma resultat då Niklas.

Mitt fel, jag som inte sitter i en position då jag kan testa det jag slänger ur mig.

  • Medlem
  • Stockholm
  • 2006-06-28 23:19

Jag förstår vad du menar. Har tänkt på liknande saker själv. Dock vill jag göra det ännu lite svårare för mig själv genom att blomman nera i högra hörnet ska ligga över innehållet som visas i den vita rutan Japp, ska det va så ska det va...

Och jo fyllar jag den blåa rutan med innehåll åker den gula ner. Jag testade det själv nyss. La in lite rader text direkt efter ordet BLUE.

  • Medlem
  • Karlstad
  • 2006-06-28 23:52
Ursprungligen av Bridell:

Jag förstår vad du menar. Har tänkt på liknande saker själv. Dock vill jag göra det ännu lite svårare för mig själv genom att blomman nera i högra hörnet ska ligga över innehållet som visas i den vita rutan Japp, ska det va så ska det va...

Ojsan...

Ursprungligen av Bridell:

Och jo fyllar jag den blåa rutan med innehåll åker den gula ner. Jag testade det själv nyss. La in lite rader text direkt efter ordet BLUE.

Du ska givetvis inte lägga in texten FÖRE den gula divven, utan efter. Pucko.

EDIT: "Pucko" var alltså på skoj.
Vi tar det här imorron igen.

Senast redigerat 2006-06-29 00:14
  • Medlem
  • Stockholm
  • 2006-06-29 00:16

Ja det har du ju rätt i så klart... ojoj, nu måste jag nog sova på saken. Tack för hjälpen och kolla gärna i tråden senare för att stötta och heja på

  • Medlem
  • Vallentuna
  • 2006-06-29 08:29
Ursprungligen av Bridell:

Jag vet att det går att använda position: relative men då bestämst ju utgångspunkten hela tiden från den div som kommer innan i HTML-koden. Jag vill skälv kunna säga att alla lager ska ange positioneringen efter en viss punkt.

Jag förstod inte riktigt vad du menade med detta, men om du inte visste det:

Om du sätter en div "A" som t.ex. position:relative (utan att sen behöva flytta den med left:/top:/vadhelst), så kommer ju alla element med position:absolute som ligger inom A att positioneras utifrån A snarare än utifrån hela viewporten.

  • Medlem
  • Stockholm
  • 2006-06-29 10:27

Nämen se på fan, eller rättare sagt: se på malesca! Det är just den kombinationen som jag letat efterl, trodde inte att det gick. Tusen tack för den och tack ni andra för att ni hjälpte till och svarade på frågor.

  • Medlem
  • Karlstad
  • 2006-06-29 11:24
Ursprungligen av Bridell:

Nämen se på fan, eller rättare sagt: se på malesca! Det är just den kombinationen som jag letat efterl, trodde inte att det gick. Tusen tack för den och tack ni andra för att ni hjälpte till och svarade på frågor.

Testa den här. Behöver putsas har bl.a. lite onödig CSS, men funkar väl att jobba vidare på:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled Document</title>
<style type="text/css">
body {
	background: #CC3300;
	margin: 0px;
	text-align: center;
}
#wrapper {
	background: #000000;
	width: 750px;
	text-align: center;
	margin: 0px auto;
	padding-top: 20px;
	padding-bottom: 20px;
	position: relative;
}
#topMenu {
	background: #339900;
	width: 650px;
	height: 30px;
	margin-right: auto;
	margin-left: auto;
	position: relative;
}
#upperFlower {
	background: #FFFF00;
	width: 200px;
	position: relative;
	height: 200px;
	left: 50px;
	float: left;
	top: 20px;
}
#sideMenu {
	background: #FF3399;
	float: left;
	height: 200px;
	width: 150px;
	position: absolute;
	left: 50px;
	top: 280px;
}
#mainContainer {
	width: 500px;
	text-align: left;
	margin: 30px 30px 30px 190px;
	background: #FFFFFF;
}
#lowerFlower {
	background: #FF00FF;
	float: right;
	height: 200px;
	width: 200px;
	margin-right: -20px;
	position: relative;
	bottom: 180px;
}
p {
	background: #FFFFFF;
	text-align: left;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="topMenu">TOPPMENY</div>
<div id="upperFlower">ÖVRE BLOMMA </div>
<div id="sideMenu">SIDOMENY</div>
<div id="mainContainer">

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem,
consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam
nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque.
Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus
dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu
non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim
nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu,
ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros
eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper
eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
<p>Sed et lectus in massa imperdiet tincidunt. Praesent neque tortor, sollicitudin
non, euismod a, adipiscing a, est. Mauris diam metus, varius nec, faucibus at,
faucibus sollicitudin, lectus. Nam posuere felis ac urna. Vestibulum tempor vestibulum
urna. Nullam metus. Vivamus ac purus. Nullam interdum ullamcorper libero. Morbi
vehicula imperdiet justo. Etiam mollis fringilla ante. Donec et dui. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
Etiam mi libero, luctus nec, blandit ac, rutrum ac, lectus.</p>

<p>Morbi consequat felis vitae enim. Nunc nec lacus. Vestibulum odio. Morbi egestas,
urna et mollis bibendum, enim tellus posuere justo, eget elementum purus urna
nec lacus. Nullam in nulla. Praesent ac lorem. Donec metus risus, accumsan ut,
mollis non, porttitor eget, mi. Aliquam aliquet, tortor a elementum aliquam,
erat</p>
<div id="lowerFlower">NEDRE BLOMMA </div>
</div>
</div>
</body>
</html>
  • Medlem
  • Stockholm
  • 2006-06-29 16:07

Tackar Danne V. Ska knåpa vidare.

  • Medlem
  • Stockholm
  • 2006-06-29 17:36

HAHA! Nu börjar det fungera. Hatar IE på PC lite ännu mera nu, men till slut så är det nästan bra. Den lilla blomman nere i högra hörnet har en felplacering på 1px i IE.

Kolla gärna in resultatet och meddela om nåt ser knasigt ut.
http://hem.mac.se/felix/

Och åter igen ett stort tack för hjälpen!

Ursprungligen av Bridell:

Kolla gärna in resultatet och meddela om nåt ser knasigt ut.
http://hem.mac.se/felix/

Sidan renderas lite slumpmässigt i Safari (10.4.7), ibland hamnar den nedre blomman rätt, ibland för högt (i kant med och delvis över) när man laddar om sidan.

Sidan saknar en DOCTYPE-deklaration, vilket ibland ger slumpmässiga renderingar (framför allt i Safari).

Dreamweaver-fråga:
Om en div har position: absolute; så syns den i DWs lagerpalett men om den är relative så syns den inte. Att kunna se "nested layers" i paletten ger snabbt en bra bild av förhållandet mellan divarna men med den översta diven som relative så blir det bara tomt i lagerpaletten.

Finns det någon möjlighet att ändra detta beteende i DW?

  • Medlem
  • Karlstad
  • 2006-06-30 10:38
Ursprungligen av Anders Täpp:

Dreamweaver-fråga:
Om en div har position: absolute; så syns den i DWs lagerpalett men om den är relative så syns den inte. Att kunna se "nested layers" i paletten ger snabbt en bra bild av förhållandet mellan divarna men med den översta diven som relative så blir det bara tomt i lagerpaletten.

Finns det någon möjlighet att ändra detta beteende i DW?

Termen "lager" (eller "layer") myntades an Netscape nån gång på medeltiden och annamades direkt av Macromedia i deras Dreamweaver. Termen betyder just "absolutely positioned div". Inte "relatively positioned" eller nåt annat.

Följaktligen så visar DWs lagerpalett bara "lager" (absolutely positioned divs) eftersom det heter "lagerpalett". Och eftersom en relativt positionerad div (alltså INTE ett lager) inte ska synas i en lagerpalett, så syns inte det som finns inuti den divven heller vilket är logiskt. Hängde du me?

Men jag är själv ganska förvirrad när det gäller divvar med olika attribut (relativa, absoluta, fixerade eller inget attribut alls) och hur dom funkar tillsammans, t.ex. att en absolut positionerad div inte växer vertikalt med innehållet osv. Kanske för att jag inte jobbar med web mer än 10-20% av min tid, och kanske därför att jag föredrar tabeller (som jag tycker är f-n så mycket enklar och stabilare ju mer komplicerad en layout är). Så om nån annan tycker det är rörigt, så är dom inte ensamma.

Det enda vettiga, men tyvärr tidsödande, sättet att kolla är att ideligen testa i oilka webbläsare. Gärna efter varenda förändring man gör.

EDIT: Rätade ngåra stvafel
EDIT IGEN: Jag tror jag lyckades skriva allt det där utan att svara på frågan (borde kanske bli politiker). Alltså: Nej, jag har aldrig hört talas om att det skulle gå att ändra. Men i DW8 har man ju ganska bra koll i designview ändå. Och som jag skrev: Det är nog bara att ideligen kolla i "skarpt läge" i olika läsare. Annars kan det lätt gå åt h-e i verkliga livet ändå, även om man skulle kunna se alla typer av divvar i DW som ju bara visar SITT sätt att rendera koden.

Ursprungligen av Danne V:

Hängde du me?

Yup.

De kanske skulle byta namn på paletten till Div & Layers så de slapp det där lite bakvända tankesättet.

  • Medlem
  • Karlstad
  • 2006-06-30 11:26

Kanske. Egentligen borde dom sluta använda termen "layers". Men eftersom det finns en massa javascripter som kan köras mot layers men inte mot andra typer av divvar, så kanske det skulle förvirra på ett annat sätt.

Men struligt är det. När våra barnbarn gör tredimensionella sajter via ett röststyrd program i datorn som egentligen är ett skrivbord (hela bordskivan är en stor jäkla skärm) så kan vi ju berätta hur överjävligt vi hade det.

  • Medlem
  • Stockholm
  • 2006-07-30 16:52

Nu är allt klart. De som är intresserade av att se resultatet kan ta sig till:
http://felix.kreafe.se

Tack för hjälpen ni som var med i tråden.

  • Medlem
  • International user
  • 2006-07-30 23:59

Är det egenutvecklad portfolio-funktion eller är det open source?

  • Medlem
  • Vallentuna
  • 2006-07-31 07:47
Ursprungligen av Chilleboy:

Är det egenutvecklad portfolio-funktion eller är det open source?

Sådant som "photoMenu_NoFaces.php" får mig att tro att det är egenutvecklat

Bridell: Varför har du så mycket information i URLen? Åtminstone höjd- och breddangivelserna borde du kunna utläsa från själva bildfilen i din kod (med t.ex. imagesx()), i stället för att kräva det explicit i URLen. Om du lagrar information i en databas som knyter ett unikt id-nummer för varje bild till path, filnamn etc så räcker ju rentav en URL som http://felix.kreafe.se/123, eller http://felix.kreafe.se/nofaces/123.

Det känns lite oroväckande med pathFolder och file direkt i URLen. Har du noga sett till att täppa till alla säkerhetshål det öppnar? Så att man inte kan skriva in oväntade katalog- eller filnamn för att komma åt annat än dina bilder?

1
Bevaka tråden