CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg
Cookie ikon
Avatar billede thadoews Nybegynder
01. februar 2013 - 13:58 Der er 15 kommentarer

Floating divs

Hej!

Jeg er i gang med et nyt design på min hjemmeside, men jeg kan ikke rigtigt få det til at lykkes. Mit design består af flere elementer:
Top, menu, indhold(højre, midte, venstre) og en bund.

Al indhold og bunden er indsat i en container-div. Højre og venstre kolonne er med en fixed bredde og en højde på 90% af containerens. Idéen er så at midterkolonnen skal være dynamisk på den måde at alt efter sidens opløsning skal være enten breddere eller smallere og alt efter indholdets længde, skal denne så også være længere. Containerens højde skal så følge midterkolonnens højde. Min bund skal så altid være i forlængelse af midterkolonnen, men være lige så bred som containeren.

Jeg kan "som sådan" godt få det til at virke ved at sætte en afstand med margin-left og margin-right og sætte alt i midterkolonnen ind i en div med de egenskaber, men så kommer alt i den div til at stå nedenunder højre og venstre kolonnen.

Jeg har oprettet en testside til formålet:
http://simonhollander.dk/test/test.shtml

Her er en tegning hvordan jeg ønsker at det skal se ud og være:
http://gupl.dk/691157/

Jeg har prøvet forskellige cleaners men jeg synes slet ikke at det vil virke.

Det her er ikke et spørgsmål om at have tre divs til at stå side om side. Det er nemt nok, men spørgsmålet er at gøre containeren dynamisk med det indhold der kan være i midterkolonnen.
Avatar billede olebole Juniormester
01. februar 2013 - 17:59 #1
<ole>

"Det her er ikke et spørgsmål om at have tre divs til at stå side om side. Det er nemt nok"

Nej, det er såmænd ikke så svært, men det kræver, man bruger hensigtsmæssig kode - altså ikke float  =)

Nu, hvor de fleste har fundet ud af, at tabeller er rigtig dårlige til layoutformål, er float nok webkodens mest misforståede/misbrugte feature.

Float er beregnet til at lave tekstomløb, f.eks. omkring billeder - og det er den fortrinlig til.

For at kunne lægge block elementer (f.eks. DIV) ved siden at hinanden, har W3C skabt display værdien inline-block. Den får elementet til at opføre sig som et inline element udadtil, mens det opfører sig som et block element indadtil.

Det betyder, at to elementer med inline-block vil lægge sig ved siden af hinanden - mens de samtidigt kan indeholde block elementer.

Bruger du float til at lægge block elementer ved siden af hinanden, er du nødt til at 'hacke' dig ud af de derved skabte problemer med clear. Det er helt unødvendigt, når du bruger den feature, der er beregnet til det: display:inline-block  *o)

/mvh
</bole>
Avatar billede thadoews Nybegynder
01. februar 2013 - 19:07 #2
Hej Olebole

Jeg har tidligere forsøgt mig med inline-block uden et synderligt godt resultat. Resultatet er altid at fordi at indholdet i min midterste kolonne er lidt større, vil disse tre elementer komme til at stå ovenpå hinanden. Er der noget jeg misforstår mht. inline-block?
Avatar billede olebole Juniormester
01. februar 2013 - 19:22 #3
Det må der være, men hvad det er, kan jeg jo ikke vide. Generelt er der ingen problemer med elementer, der lægger sig ovenpå hinanden.

Jeg - og rigtig mange andre - har ingen problemer med det. Hvis du har, må du vise, hvad problemet er  =)
Avatar billede thadoews Nybegynder
01. februar 2013 - 19:46 #4
Jeg har søgt en del på nettet omkring disse inline-blocks og fulgt en masse eksempler, men jeg kan simpelthen ikke få det til at virke?!
Her er hvad jeg ser når jeg forsøger at bruge inline-block:

<html>
<head>
    <title>Untitled</title>
<style>
html
{
    height:100%;
}

body
{
    min-height: 100%;
}

.container
{
    background-color:grey;
    height: 98%;
}

.left
{
    background-color:green;
    height: 90%;
    width: 160px;
    display: inline-block;
    vertical-align:top;
}

.right
{
    background-color:blue;
    height: 90%;
    width: 200px;
    display: inline-block;
    vertical-align:top;
}

.center
{
    background-color:yellow;
    height: 90%;
    vertical-align:top;
}

.bottom
{
    background-color:red;
    width: 95%;
    text-align: center;
    bottom:0;
    margin: auto;
}

.top
{
    background-color:red;
    width: 95%;
    text-align: center;
    bottom:0;
    margin: auto;
}

.menu
{
    background-color:blue;
    width: 95%;
    text-align: center;
    bottom:0;
    margin: auto;
}
</style>
</head>

<body>
<div class="top">
her er alt i toppen
</div>
<div class="menu">
her er menuen
</div>
<div class="container">
<div class="left">
Kolonne til venstre<br>
Kolonne til venstre<br>
Kolonne til venstre<br>
Kolonne til venstre<br>
Kolonne til venstre<br>
Kolonne til venstre<br>
Kolonne til venstre<br>
Kolonne til venstre<br>
Kolonne til venstre<br>
Kolonne til venstre<br>
<br>Kolonne til venstre<br>
Kolonne til venstre<br>

</div>
<div class="right">
Kolonne til højre
</div>
<div class="center">
Her er indhold i midten<br>
Her er indhold i midten<br>
Her er indhold i midten<br>
Her er indhold i midten<br>
Her er indhold i midten<br>
Her er indhold i midten<br>
Her er indhold i midten<br>

</div>
<div class="bottom">
Her er bunden
</div>
</div>

</body>
</html>
Avatar billede olebole Juniormester
01. februar 2013 - 19:56 #5
Begynd dokumentet med en (gyldig) DTD. Ellers kan du ikke forvente, CSS overhovedet virker  =)
Avatar billede olebole Juniormester
01. februar 2013 - 19:59 #6
PS: Husk i øvrigt i din 'dynamikbegejstring', at en tekst aldrig bør blive mere end ca. 650px bred. Ellers nedsættes læsbarheden væsentligt
Avatar billede thadoews Nybegynder
01. februar 2013 - 20:41 #7
Fik ikke lige min DTD med i kampens hede :)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">[/b]

Indholdet burde ikke blive mere end 4-5-600px bred...
Avatar billede olebole Juniormester
01. februar 2013 - 20:57 #8
Vises det ikke, som du ønsker? Det vises i store træk, som koden bør vises. Hvordan skulle det se ud?
Avatar billede thadoews Nybegynder
01. februar 2013 - 21:05 #9
Jeg havde tænkte mig noget lignende:

****** ++++++ ------
****** ++++++ ------
****** ++++++ ------
****** ++++++ ------

Men i stedet får jeg:
******
******
******
++++++
++++++
++++++
------
------
------
Avatar billede olebole Juniormester
01. februar 2013 - 21:17 #10
Det hjalp ikke voldsomt. Det her giver ingen problemer:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.foo {
    width: 200px;
    height: 400px;
    display: inline-block;
    background: red;
}
.bar {
    width: 200px;
    height: 400px;
    display: inline-block;
    background: yellow;
}
.baz {
    width: 200px;
    height: 400px;
    display: inline-block;
    background: blue;
}
.foobar {
    height: 40px;
    background: blue;
}
</style>
</head>
<body>

<div class="foo"></div>
<div class="bar"></div>
<div class="baz"></div>

<div class="foobar"></div>

</body>
</html>
Avatar billede thadoews Nybegynder
01. februar 2013 - 21:24 #11
Nej, men her er det resultat jeg får:
http://gupl.dk/691182/

Og det jeg gerne ville opnå:
http://gupl.dk/691183/

I den sidste har jeg brugt float, med hvilken jeg har liiidt problemer med, som du kan se her:
http://simonhollander.dk/test/test.shtml
Avatar billede olebole Juniormester
01. februar 2013 - 21:29 #12
Ja, og så? Har du testet den kode, jeg skrev ovenfor? Den virker, og den kan du så arbejde videre på.

Det nytter ikke, du kaster dig ud i fem samtidige ting, du ikke har helt styr på. Få styr på én ting ad gangen - så vil det helt sikkert lykkes for dig  =)
Avatar billede thadoews Nybegynder
01. februar 2013 - 21:56 #13
Det så jeg slet ikke! Jeg takker :) Ja, DEN virker og den vil jeg lige rode lidt med :)

Jeg faldt over denne artikel:
http://www.ternstyle.us/blog/float-vs-inline-block
Den underbygger det som jeg har fundet ud af, at enten er man til float eller også er man til inline-block. nu vil jeg i hvert fald rode noget mere og se hvad der passer mig bedst :)
Avatar billede olebole Juniormester
01. februar 2013 - 22:09 #14
Ja, der er så mange på WWW, der mener noget uden at have viden. Han er tydeligvis helt på bar bund, når han kan finde på at skrive om The Vertical Alignment Issue og The Spacing Issue  =)

Det har intet med 'issues' at gøre. Der er blot tale om to udtryk for, hvordan inline elementer er defineret til at skulle opføre sig.

Hvis elementer, der havde fået display:inline-block ikke opførte sig sådan, ville der være noget helt galt med browseren. De skal opføre sig sådan!

Du har helt ret: Enten kender man standarderne, og så er man til inline-block - eller også er man til float. Det værste er uvidende tågehorn, der skriver 'artikler' om emner, de ikke har fattet det første af. Dem er der desværre skræmmende mange af på WWW  :o|
Avatar billede thadoews Nybegynder
31. marts 2014 - 00:40 #15
Hej olebole! :) Ved godt det er noget tid siden, men tak for dine svar!
Jeg er ved at rydde lidt op og få lukket dem, som jeg aldrig fik lukket, hvis du stadig får notifikationer, så lig venligst et svar ellers lukker jeg den her om et par dage! :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Bredde på div elementer Af dane022 i HTML 2 16/02/202408:29 20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML 2 21/12/202322:51 22/12/202308:03
validering <input tlfnr. Af slein55 i HTML 5 15/10/202311:43 15/10/202314:51
Link fra form input Af jnrmgs i HTML 9 19/09/202319:10 23/09/202313:11
includere i HTML Af slein55 i HTML 3 15/09/202313:47 16/09/202309:40
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester



Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 19:08 Gmail shortcut på skrivebord eller processlinje Af nu_igen i E-mail programmer
I går 13:47 Hvis(og()) på baggrund af STØRSTE() og FORSKYDNING() Af AnnaS i Excel
I går 07:22 Konvertere h265x til MP4 Af HHA i Andet software
17/0417:06 ændre hasighed på streaming tv - eksempelvis DR TV Af Malm i Andet software
17/0414:04 Bil benzin regnskab ? Af fimo i Excel
White papers
Flere white papers »


Premium
Teaser billede
“Den investering, som jeg dengang foretog i krypto, er blevet mangedoblet. I dag er de 10.000 dollar blevet til 1,4 millioner kroner”
Læs mere »
Danske CloudNordic går konkurs efter stort ransomware-angreb
Efter ballade: Comm2ig skal levere computere til danske skoler med kæmpeordre til 629 millioner kroner
Afgørelse: Rejsekorts kæmpeaftale med Netcompany og Trifork bliver tvangs-ophævet - stor regning venter
Se alle »
Computerworld
Teaser billede
Du bør vente med at købe ny bærbar: En pc-revolution vil ramme allerede til sommer
Læs mere »
Test af ny generation af video-overvågning: Her tilbydes de bedste features – nu til en skarpere pris
Får du den løn, du fortjener? Få overblikket over hvor meget dine kolleger tjener hver måned
Guldager: Jeg har bare tre enkle ønsker til min næste bil
Se alle »
CIO
Teaser billede
Aldrende SAP-konsulenter er et kæmpe problem i markedet: Virksomheder tør ikke uddanne nye
Læs mere »
Kæmpe prisstigninger på vej fra Microsoft: Dynamics 365 bliver op til 16 procent dyrere
Stort angreb skyller ind over en lang række VPN-tjenester: Løsninger fra Cisco, Fortinet og andre ramt
Danfoss er i fuld gang med stor SAP-transformation: Særligt setup skal sikre, at selskabet forbliver herre i eget hus
Se alle »
Job & Karriere
Teaser billede
NNIT flytter til det centrale København: Her er selskabets nye hovedkvarter
Læs mere »
Får havudsigt: IBM Danmarks 700 medarbejdere flytter til nyt hovedkvarter om få dage
Knap 40 procent af disse it-folk tjener tjener mindst 57.000 kroner om måneden
Fujitsu Danmark fyrer medarbejdere og udfaser al nysalg af cloud
Se alle »
White paper
Teaser billede
Sådan høster du forretningsfordelene ved Internet of Things
Læs mere »
Sæt turbo på din cloudperformance og minimér risikoen for DDoS-angreb
Vejen væk fra WAN: Sådan skifter du til en moderne infrastruktur
Rapport kortlægger de 13 bedste muligheder for at sætte turbo på din cloud computing
Se alle »

Events
Flere events »
White papers
Flere white papers »
IT-Kurser
Se alle vores it-kurser »