Oprettet man. d. 17. september 2012 kl. 11:36:36
30 point uddelt | 13 kommentarer
div box height auto virker ikke
har lavet en div "boks", hvis højde skulle tilpasse sig indholdet. Men når indholdet bliver "længere/højere" end selve div'en går det bare ud over kanten.Har lavet boksen som en funktion i php:
http://pastebin.com/ (...)
"height: auto " virker heller ikke.
Skrevet man. d. 17. september 2012 kl. 12:24:46| #1
mireigi (20.112 point)
Til en start kan du skifte alt dit inline-style ud med CSS classes. Det gør det hele meget mere overskueligt, både for dig selv, og også for os andre der skal kigge på koden.
Når det er sagt, så har du heller ikke angivet, hvilken af de mange DIV's der skal tilpasse sig.
Når det er sagt, så har du heller ikke angivet, hvilken af de mange DIV's der skal tilpasse sig.
Skrevet man. d. 17. september 2012 kl. 13:01:28| #2
langkiller (3.900 point)
Det der med min inline-style tager jeg mig af senere. Til at starte med vil jeg bare gerne finde ud af hvordan jeg kan løse mit problem med height.
"Når det er sagt, så har du heller ikke angivet, hvilken af de mange DIV's der skal tilpasse sig."
Hvad mener du helt præcis med det? Hvad ville du ændre?
"Når det er sagt, så har du heller ikke angivet, hvilken af de mange DIV's der skal tilpasse sig."
Hvad mener du helt præcis med det? Hvad ville du ændre?
Skrevet man. d. 17. september 2012 kl. 14:04:49| #3
olebole (216.718 point)
<ole>
Når man har HTML-spørgsmål, er det altid en fordel at vise en HTML-kode - og ikke en PHP-kode *o)
Det, du ønsker, kan ikke lade sig gøre. Absolut positionerede elementer er ikke del af sidens normale flow. De fylder derfor intet og påvirker ikke sidens flow - og altså heller ikke højden af et omkransende element.
Du er nødt til at finde en anden fremgangsmåde/løsning
/mvh
</bole>
Når man har HTML-spørgsmål, er det altid en fordel at vise en HTML-kode - og ikke en PHP-kode *o)
Det, du ønsker, kan ikke lade sig gøre. Absolut positionerede elementer er ikke del af sidens normale flow. De fylder derfor intet og påvirker ikke sidens flow - og altså heller ikke højden af et omkransende element.
Du er nødt til at finde en anden fremgangsmåde/løsning
/mvh
</bole>
Skrevet man. d. 17. september 2012 kl. 14:51:37| #4
langkiller (3.900 point)
Tænkte at det ikke betød så meget at det var en php funktion..
Men okay, det kan simpelthen ikke lade sig gøre?
Hvordan ville du anbefale mig at gribe det an så.. bare med float eller?
Men okay, det kan simpelthen ikke lade sig gøre?
Hvordan ville du anbefale mig at gribe det an så.. bare med float eller?
Skrevet man. d. 17. september 2012 kl. 14:57:47| #5
olebole (216.718 point)
Hvis du fortæller, hvad du vil lave, kan jeg måske komme med et bud =)
Skrevet man. d. 17. september 2012 kl. 15:01:48| #6
olebole (216.718 point)
PS: En HTML-kode med baggrundsfarver havde jeg blot smidt i en browser. Så havde mit spørgsmål i #5 været overflødigt. Bl.a. derfor er en HTML-kode i et HTML-spørgsmål altid hensigtsmæssig *o)
Skrevet tir. d. 18. september 2012 kl. 10:01:13| #7
langkiller (3.900 point)
Hvis jeg nu har følgende div :
<div style=\"width: ".$width."; float: left; border: 1px solid;\">
INDHOLD!!
</div>
Hvordan får jeg så placeret andre divs inde i den på bestemte stedet. I mit tilfælde skal det være hjørnerne og kanterne da de skal danne en "kant" rundt om div boksen.
<div style=\"width: ".$width."; float: left; border: 1px solid;\">
INDHOLD!!
</div>
Hvordan får jeg så placeret andre divs inde i den på bestemte stedet. I mit tilfælde skal det være hjørnerne og kanterne da de skal danne en "kant" rundt om div boksen.
Skrevet tir. d. 18. september 2012 kl. 11:37:37| #8
Skrevet tir. d. 18. september 2012 kl. 13:45:27| #9
olebole (216.718 point)
Det kan du gøre sådan:
<style type="text/css">
.framed-box {
position: relative;
display: inline-block;
width: 200px;
padding: 25px;
border: 1px solid red;
}
.framed-box div {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
}
.framed-box div.top {
height: 20px;
bottom: auto;
right: 20px;
background: yellow;
}
.framed-box div.right {
width: 20px;
left: auto;
bottom: 20px;
background: green;
}
.framed-box div.bottom {
height: 20px;
top: auto;
left: 20px;
background: blue;
}
.framed-box div.left {
width: 20px;
right: auto;
top: 20px;
background: silver;
}
</style>
<div class="framed-box">
INDHOLD!!<br>
INDHOLD!!<br>
INDHOLD!!<br>
INDHOLD!!<br>
INDHOLD!!<br>
INDHOLD!!<br>
INDHOLD!!<br>
INDHOLD!!<br>
<div class="box-frame">
<div class="top"></div>
<div class="right"></div>
<div class="bottom"></div>
<div class="left"></div>
</div>
</div>
.framed-box {
position: relative;
display: inline-block;
width: 200px;
padding: 25px;
border: 1px solid red;
}
.framed-box div {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
}
.framed-box div.top {
height: 20px;
bottom: auto;
right: 20px;
background: yellow;
}
.framed-box div.right {
width: 20px;
left: auto;
bottom: 20px;
background: green;
}
.framed-box div.bottom {
height: 20px;
top: auto;
left: 20px;
background: blue;
}
.framed-box div.left {
width: 20px;
right: auto;
top: 20px;
background: silver;
}
</style>
<div class="framed-box">
INDHOLD!!<br>
INDHOLD!!<br>
INDHOLD!!<br>
INDHOLD!!<br>
INDHOLD!!<br>
INDHOLD!!<br>
INDHOLD!!<br>
INDHOLD!!<br>
<div class="box-frame">
<div class="top"></div>
<div class="right"></div>
<div class="bottom"></div>
<div class="left"></div>
</div>
</div>
Skrevet tir. d. 18. september 2012 kl. 13:53:39| #10
langkiller (3.900 point)
ser godt ud, vil jeg lige afprøve :)
men hvorfor er z-index sat til -1 i framed-box?
men hvorfor er z-index sat til -1 i framed-box?
Skrevet tir. d. 18. september 2012 kl. 14:01:52| #11
olebole (216.718 point)
"men hvorfor er z-index sat til -1 i framed-box?" >> Det er heller ikke tilfældet. Det er det derimod for alle DIV i DIV'et med class="framed-box" *o)
Faktisk er jeg kun interesseret i, at det gælder for det DIV, som indeholder 'kanterne' - men det skader ikke, at 'kanterne' også får det xIndex. Jeg gør det for at presse kanterne ned under indholdet på Z-aksen
Faktisk er jeg kun interesseret i, at det gælder for det DIV, som indeholder 'kanterne' - men det skader ikke, at 'kanterne' også får det xIndex. Jeg gør det for at presse kanterne ned under indholdet på Z-aksen
Skrevet man. d. 24. september 2012 kl. 12:11:38| #12
langkiller (3.900 point)
hey undskyld mit langsomme svar.
Det kunne helt sikkert bruges det du skrev @olebole.
Tak for hjælpen! Smid endlig et svar hvis du lyster :)
Det kunne helt sikkert bruges det du skrev @olebole.
Tak for hjælpen! Smid endlig et svar hvis du lyster :)
Skrevet tir. d. 09. oktober 2012 kl. 10:38:16| #13
Accepteret svar!30 point tildelt
Log ind
Seneste spørgsmål
Fat footer skal fylde hele sidens bredde
Oprettet den 17. maj 2013 kl. 14.42
13thsky giver 60 point for svar | Giv et svar »
Horizontalt overlap af menupunkt billeder
Oprettet den 14. maj 2013 kl. 00.29
mojo69 giver 100 point for svar | Giv et svar »
Seneste guides
Seneste nyheder
Tips & Tricks fra PC World
Her er seks Google Labs-funktioner, som du skal slå til med det samme
Gmail Labs giver dig adgang til en masse smarte funktioner, som Googles ingeniører leger med i øjeblikket.
Anmeldelser fra PC World
Test: Samsung Galaxy S4 er et hit - trods gøglertricks
Kan Samsung beholde førertrøjen i det store Android-race? Galaxy S4 er smækfyldt med innovative funktioner, men også med en del gøgl. Er det for meget? Få vores dom over Samsungs nye topmodel.
Seneste blogindlæg
Tvangslukke spørgsmål: Hvad er den bedste løsning?
Hej Vi har mange åbne spørgsmål på Eksperten. Vi ville gerne tvangslukke dem - så et spørgsmål efter f.eks. 6 måneder lukkes. Men der er et par uklarheder som ville være gode at få lidt input til:...
Nyheder fra PC World
Tre smarte trick som gør Windows 8 bedre
Boot direkte til skrivebordet, få en strategisk godt placeret luk-knap og slip for at logge ind. Her er tre tips til Windows 8, som gør det nemmere at blive venner med styresystemet.
Nyheder fra Computerworld
Galleri: Her er Googles nyeste værktøj og legetøj
Google har i denne uge afholdt udviklerkonferencen I/O i San Francisco. Se her hvad søgegiganten kunne præsentere af nyskabelser.
IT Kurser
Samarbejdspartnere
Udgiver · © 2013 IDG Danmark A/S · Hørkær 18 · 2730 Herlev · Tlf.: 77 300 300 · Fax: 77 300 301 · Brug af personoplysninger