Notifikationer

Markér alle som læst Log ud

anders159 Nybegynder

20. juni 2006 - 13:56 Der er 23 kommentarer og
1 løsning

CSS <div> placering

Er ved at kigge lidt på CSS, men synes nu ikke det virker så fantastisk som nogen gør det til.

Ved ikke om jeg forstår det rigtigt.

Men har fattet det som at man ikke bruger tabeller..Men at man placere alt i div tags, også bestemmer hvor tagget skal stå på siden, igennem css.

jeg forstår også godt hvad absolute gør, men så kommer det.

------------------------------------------------
Jeg har en <div>topbar der er absoulte.

En <div>content som skal kunne have variabel højde.

også en <div>footer, der altid skal sidde tilsidst på siden.
------------------------------------------------------

Størrelsen(højden) af content kan afhæge af et søgeresultat mm.

synes det lugter lidt af, at jeg skal bruge relativ...Men det FATTER jeg ikke en meter af.

så er der nogen der har et bud på hvordan dette løses, ville jeg blive glad :)

Synes godt om

mm12010 Nybegynder

20. juni 2006 - 14:54 #1

Hvem end der har fortalt dig at man ikke bruger tabeller tager fejl, man må antage at det er vedkommende der ikke forstår det rigtigt...

Det skal dog tilføjes at der er vise tilfælde, hvor det kan være mest hensigtsmæssigt udelukkende at bruge divs, men ellers bør du bruge tabeller når det er deres egenskaber du skal bruge til at løse en given opgave.

Synes godt om

anders159 Nybegynder

20. juni 2006 - 15:08 #2

enig, til visning af data er tabellen vel stadig det rigtigste.

men hvad med den gennerelle side opbugning?

er det ikke gjort med div?

Synes godt om

Slettet bruger

20. juni 2006 - 17:03 #3

Denne web-site er udelukkende lavet med CSS

www.visithaven.dk

Synes godt om

mclemens Nybegynder

20. juni 2006 - 17:04 #4

div's vs. table's hmm, Jeg har selv brugt mange tables i tables i tables indtil sidste år hvor jeg konverterede til css og div's - dog har tables nogle styrker div's ikke har og modsat - typisk bruger man div's til grundstruktur og evt. tables hvis du har noget tabulært data der skal fremvises ... men decideret ombygning table's vs. div's afhænger ofte af siders kontruktion og hvad der falder bedst i ens smag...

- Ved height 100% har table en fordel da den kan fordele resterende plads imellem de div's der ikke har fastsat height - eller rettere det kan den i FF... for at den kan i IE skal doctype fjernes ... sammenlign evt. denne: http://www.eksperten.dk/spm/716493 (dog virker IE fint med det uden doctypen :/ ) vs. denne: http://www.eksperten.dk/spm/712486#rid6300689

... Men nu er height 100% en tricky ting hvor man sommetider tyr til javascript for at få den til at ramme plet m.v. - dog bør du som mm12010 siger bruge table's hvis der er table's egenskaber du har behov for - men hvad der er bedst afhænger af flere faktorer der bestemmes af design og opbygning ...

Synes godt om

mclemens Nybegynder

20. juni 2006 - 17:06 #5

http://www.google.dk/search?hl=da&q=landbrug+leget%C3%B8j+gummiged&meta=lr%3Dlang_da
^ Første link her er også udelukkende css... (bare for at kaste et eksempel også)

Synes godt om

mclemens Nybegynder

20. juni 2006 - 17:10 #6

udelukkende css.. <- Forkert formuleret ... øhm, kun div's
Mens eksperten er en blanding af både table's og div's...
table's og div's er markup ... css er styling af markup så at sige et design er udelukkende css er egentlig forkert... det kan være udelukkende div's eller table's ... men, stadig table's er ikke noget "udgående" markup :o)

Synes godt om

mclemens Nybegynder

20. juni 2006 - 17:20 #7

[ Jeg har en <div>topbar der er absoulte.

En <div>content som skal kunne have variabel højde.

også en <div>footer, der altid skal sidde tilsidst på siden.

så er der nogen der har et bud på hvordan dette løses, ville jeg blive glad :) ]

- Check linket i 17:04:23 , er det noget i den stil du tænker på?

Synes godt om

mclemens Nybegynder

20. juni 2006 - 17:28 #8

Men hvis den ikke skal fylde 100% i højden er den vel god nok med 3 div's opbygning?

<!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>Ingen titel</title>

<style type="text/css">
#top{background:#aaa;}
#content{background:#888;}
#footer{background:#666;}
</style>

</head><body>
<div id="top">TOP</div>
<div id="content">TOP</div>
<div id="footer">TOP</div>
</body></html>

Synes godt om

mclemens Nybegynder

20. juni 2006 - 17:34 #9

[ Er ved at kigge lidt på CSS, men synes nu ikke det virker så fantastisk som nogen gør det til. ] - Det fantastiske ved css er at du kan rette design på alle sider ved at pille i en fil ... og det der definerer designet fylder kun 1 gang pr. besøg og ikke 1 gang pr. side...

[ Men at man placere alt i div tags, også bestemmer hvor tagget skal stå på siden, igennem css. ] - Du kan også bestemme tabellen placering med css

[ jeg forstår også godt hvad absolute gør, men så kommer det. ]
...
[ synes det lugter lidt af, at jeg skal bruge relativ...Men det FATTER jeg ikke en meter af. ]
- Relative placerer objectet relativt til den normale placering på siden ... absolute placerer objectet relativt til det første øvre relativt placerede object ... kommer lige med et eksempel på relative og absolute...

Synes godt om

mclemens Nybegynder

20. juni 2006 - 17:41 #10

<!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>Ingen titel</title>

</head><body>aaaaaaaaaaaaaaaaaaaaaa
<div style="width:200px;position:absolute;top:0px;right:0px;background:#aaa;">Top right absolute</div>
aaaaaaaaaaa
<div style="width:200px;height:250px;position:relative;top:100px;right:100px;background:#aaa;">
<div style="width:100px;height:75px;position:absolute;top:0px;right:0px;background:#888;">Top right absolute</div>
</div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</body></html>

Synes godt om

anders159 Nybegynder

20. juni 2006 - 19:10 #11

du er for vild :) er lige kommet fra arbejde og der er sq sket noget siden jeg sidst kiggede forbi. 1000 tak ;) Du har allerede hjulpet mig meget, så her er lige lidt points......... har du tid og lyst, høre jeg gerne hvad du har at sige til nedenstående.

har rodet en del med kode, dog aldrig html.

er godt med på den med tabellen til tabel visning og at HTML er koden og CSS er til at style og placere med..

har rodet en del med frame simulering, men synes ikke koden blev køn og let at vedligeholde.. jeg har derfor besluttet mig for at hele siden må scrolle.. og top og menu vil forsvinde efterhånden som man scroller ned af siden....lidt allá Eksperten. Hvad hælder du selv mest til?

så den med "Top - Content - Footer" er god nok. Mit problem er når "Content" bliver større end angivet. altså ALTID at få placeret "Footer" nederst(reklame banner på eksperten). Men kan i dit eks(17:28:58) se at det sker automatisk... Er det fordi man ikke angiver nogen placering/Højde?

Kan godt forstå den med at relative er højde og drøjde iforhold til et udgangspunkt(den normale placering på siden..som du skriver og jeg har læst 100 gange på nettet:)

Forstår det som at Absolute og Relative er "placerings typer"......Men hvad er placeringen?

hvis noget ikke har højde/placering angivet, hvad er så normalt på en side?
Altså, hvorfra ved f.eks. en div box hvad der normalt?

Kan godt forstå hvis du synes det lyder rodet ;)
men ved ikke lige hvordan jeg ellers skal forklare det.

Synes godt om

anders159 Nybegynder

20. juni 2006 - 19:12 #12

og send lige et svar ik´ ;)

Synes godt om

mclemens Nybegynder

20. juni 2006 - 19:50 #13

[ har rodet en del med frame simulering, men synes ikke koden blev køn og let at vedligeholde.. jeg har derfor besluttet mig for at hele siden må scrolle.. og top og menu vil forsvinde efterhånden som man scroller ned af siden....lidt allá Eksperten. Hvad hælder du selv mest til? ]

- Frames og iframes, det er et fy ord, hvis vi snakker SEO så dem går jeg langt uden om ... de har dog kodemæssige fordele når vi snakker html output begrænsning ved sideskift.

- Min egen side scroller det hele ... den er dog også optimeret til 800x600 pixels, og der fylder browseren meget af den tilgængelige plads så scrolling foretrækker jeg som regel...

- Du kan dog sagtens lave en "frame" simulation "let" med 3 absolute placerede div's en i top 1, 1 i midten, i bund og så defineret med height i % hver især og top i % også... du skal dog have html,body{margin:0px;padding:0px;height:100%;} ind i din css også... - og så skal du nok have scrolleren til at være på content div'en med en overflow:auto sat på den...

[ så den med "Top - Content - Footer" er god nok. Mit problem er når "Content" bliver større end angivet. altså ALTID at få placeret "Footer" nederst(reklame banner på eksperten). Men kan i dit eks(17:28:58) se at det sker automatisk... Er det fordi man ikke angiver nogen placering/Højde? ]

- Den lægger sig altid under de andre da:

Der ikke er andet indhold der er (float:left; eller float:right;) floatet - Hvis det var tilfældet skulle der også være plads til at de to div's kunne være ved siden af hinanden (en width:100% hjælper måske med at sikre at det ikke sker ... ellers kan man f.eks. sætte en clear:both; ind.)

- Hvis nu man havde angivet placeringer ville man også kunne få problemer med placeringen når indholdet udvidede sig så du har ramt plet på det punkt ;o)

- Og det samme gælder med højde defineringer som du siger ... pas på med / undlad at definere højden hvis den skal kunne udvide sig. (man kan senere når IE understøtter det bruge min-height:antalpx; ... men ikke p.t. )

[ Forstår det som at Absolute og Relative er "placerings typer"......Men hvad er placeringen? ]

- Jeg er ikke så god til at formulere det godt nok, men prøver lige:

Absolute placerer et element/object (f.eks. div'en) relativt/i forhold til det nærmeste element den er lagt i der har en position:relative;

Relative placerer et element/object (f.eks. div'en) relativt/i forhold til sin egen placering (det reserverer pladsen hvor det blev lagt på til "positions holder" ) og sørger for at indre absolute placerede elementer placeres i forhold til dette position:relative element

... se evt. 17:41:25 og læg mærke til hvor teksten dukker frem i forhold til hvor det er sat ind ... relative lægger henover teksten f.eks...

[ hvis noget ikke har højde/placering angivet, hvad er så normalt på en side? ]
- Hvis den ingen højde har defineret er den height:auto; d.v.s. den udvider sig i forhold til de indre elementer der ikke er placeret med position:absolute ... Den burde normalt ikke udvide højden baseret på floatede elementer som ie også gør ... det gør FF ikke, hvis den skal gøre det skal man indsætte nogle elementer med clear:right; - eller left eller both lige efter afslutningen af et floatet element - hvis nu borderen på en ydre div skal følge med nedaf.

- m.h.t. width så har den typisk 100% width ... med mindre den er floatet relativ eller absolute placeret ... så bør man definere width for at være sikker - bemærk hvis du selv bruger % defineringer i style er width defineret ud fra det position:relative element det ligger i...

[ Altså, hvorfra ved f.eks. en div box hvad der normalt? ]
- Browserne er ikke helt enige om det desværre ... nogle gange ville man ønske at der slet ikke var padding og margin m.v. på noget fra starten af ... ovenstående er dog en del af de ting der gør sig gældende for div's ... men der er meget andet f.eks. p.t. problem med margin på floatede elementer i IE ... men når man får et problem css mæssigt, så er der jo altid forummet :o)

[ Kan godt forstå hvis du synes det lyder rodet ;)
men ved ikke lige hvordan jeg ellers skal forklare det. ]
- Lyder ikke spor rodet, mit lyder nok mere rodet... men der er mange problemer man kan få i css kodning (dog flere problemer uden css) så det er svært at opsummere dem alle - og forhåbentlig løber du ikke ind i alle problemerne ... ellers så kan de nok løses henad vejen ...

- Men, en god ting er: Inden man bygger sit site helt op så find ud af hvilke elementer du vil have hvor og få selve rammen for designet lagt ... der er ikke noget mere trist end at man koder design og så kommer man til bunden af dokumentet og opdager at det element man nu vil placere på en bestemt måde ikke kan lade sig gøre uden man skifter fra absolute placerede elementer til floatede elementer i hinanden eller modsat ... jeg bruger typsisk selv floatede elementer...

Synes godt om

mclemens Nybegynder

20. juni 2006 - 19:55 #14

For ikke at spamme tråden helt så er det problem med margin og float på
div elementet vist her: http://www.eksperten.dk/spm/713785#rid6293709
... håber ikke det blev for uoverskueligt / kludret formuleret ...
(kan ikke kaste alt fra rygraden ned i tråden ... desværre
- da jeg selv løser problemerne efterhånden som de kommer)

Synes godt om

mclemens Nybegynder

21. juni 2006 - 09:06 #15

Tak for point :o)

Synes godt om

anders159 Nybegynder

21. juni 2006 - 09:43 #16

1000 tak for alt din tid. Fik næsten løst broblemet.

prøvede med float, men så gik det galt i FF.
Og forstår ikke lige den med clear.

findes der ikke en fremgangsmåde der dækker begge, uden man skal tage specielle hensyn i koden?

Synes godt om

mclemens Nybegynder

21. juni 2006 - 10:05 #17

[ findes der ikke en fremgangsmåde der dækker begge, uden man skal tage specielle hensyn i koden? ] - Hvis det ydre element ikke skal udvide sig og ingen border og baggrundsfarve har kan du bare floate ... så behøver du (måske) ikke at cleare ... hvis du behøver det i dette tilfælde - behøver du det af hensyn til opbygningen i begge browsere... Du kan også bruge position:absolute; der burde de reagere ens ... det er dog ikke altid lige optimalt... Alt i alt afhænger det af hvordan det skal se ud.

[ Og forstår ikke lige den med clear. ] - clear:left; gøre at der ikke kan være noget til venstre for elementer - right til højre og both, ja rigtig gættet ... begge :o) ...

[ prøvede med float, men så gik det galt i FF. ]
- Du kan altid kaste noget kilde :o)

Synes godt om

mclemens Nybegynder

21. juni 2006 - 10:10 #18

Eksempel på problemer:

<!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>Ingen titel</title>
</head><body>

<div style="width:200px;border:1px solid #000;background:#aaa;">
<div style="width:50px;height:50px;background:#888;">Test</div>
</div><br><br><br><br>

<div style="width:200px;border:1px solid #000;background:#aaa;">
<div style="width:50px;height:50px;float:right;background:#888;">Test</div>
</div><br><br><br><br>

<div style="width:200px;border:1px solid #000;background:#aaa;">
<div style="width:50px;height:50px;background:#888;float:right;">Test</div>
<div style="font-size:0px;height:0px;overflow:hidden;clear:both;"> </div>
</div><br><br><br><br>

<div style="width:200px;border:1px solid #000;background:#aaa;">
<div style="width:50px;height:50px;background:#888;float:right;">Test</div>
<div style="width:50px;height:50px;background:#888;float:right;">Test</div>
</div><br><br><br><br>

<div style="width:200px;border:1px solid #000;background:#aaa;">
<div style="width:50px;height:50px;background:#888;float:right;">Test</div>
<div style="font-size:0px;height:0px;overflow:hidden;clear:both;"> </div>
<div style="width:50px;height:50px;background:#888;float:right;">Test</div>
</div><br><br><br><br>

<div style="width:200px;border:1px solid #000;background:#aaa;">
<div style="width:50px;height:50px;background:#888;float:right;">Test</div>
<div style="font-size:0px;height:0px;overflow:hidden;clear:both;"> </div>
<div style="width:50px;height:50px;background:#888;float:right;">Test</div>
<div style="font-size:0px;height:0px;overflow:hidden;clear:both;"> </div>
</div>

</body></html>

Synes godt om

mclemens Nybegynder

21. juni 2006 - 10:12 #19

Manglede denne udgave også
<div style="width:200px;border:1px solid #000;background:#aaa;">
<div style="width:50px;height:50px;background:#888;float:right;">Test</div>
<div style="width:50px;height:50px;background:#888;float:right;">Test</div>
<div style="font-size:0px;height:0px;overflow:hidden;clear:both;"> </div>
</div><br><br><br><br>

- men sommetider behøver man kun at cleare
left eller right afhængig af ens behov...

Synes godt om

anders159 Nybegynder

21. juni 2006 - 10:42 #20

tak igen igen igen:)
Du skal bare stoppe når det bliver for meget ;) men nu køre jeg lige på...

ville gerne have dette.

en topbar - fast størrelse
en leftmenu - fast størrelse
en content - variabel størrelse -> til sideindhold
en footer - faststørrelse

Måske vi lige skal se om jeg overhovedet griber det rigtigt an :)

Jeg skriver det i .net og c#, men ved ikke helt hvordan det her hænger sammen med kode genbrug(include-filer).

har somsagt igen erfaring, har tænkt mig at lave 1 CSS til de 4 divs der styre grundformen
og en CSS til det kode der danner sideindholdet, der så sættes ind i content. Er det helt hen i vejret.

Hvad er den normale måde at genbruge kode på i .NET? f.eks.en Menu (webUserControls??)

hvordan er den gængse fremgangsmåde når man bygger sider som denne .NET?
Er godt med på den gennerelle fuktionalitet med codebehind.

Synes godt om

mclemens Nybegynder

21. juni 2006 - 10:55 #21

Kigger på en grundstruktur senere (skal lige pakke nogle pakker) - men den ser fin ud dog koder jeg selv i notesblok og bruger php så .net og c# har jeg ikke rørt ved / læst om ...

[ har somsagt igen erfaring, har tænkt mig at lave 1 CSS til de 4 divs der styre grundformen
og en CSS til det kode der danner sideindholdet, der så sættes ind i content. Er det helt hen i vejret. ]
Jeg ville nok kun have 1 css fil hvor man havde alt css til div's og indholdet
- det andet med mere end 1 css fil tror jeg ikke bliver ikke lettere...

Synes godt om

mclemens Nybegynder

21. juni 2006 - 11:04 #22

Umiddelbart svær at sige hvordan du vil have strukturen men her er noget simpelt med left og right float samt en footer og header og centrering...

<!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>Ingen titel</title>

<style type="text/css">
#cont{width:770px;margin:0px auto;}
#ctop{width:100%;height:50px;background:green;}
#cleft{width:150px;float:left;background:red;}
#cright{width:610px;float:right;background:blue;}
#footer{width:100%;background:gray;}
</style>

<script type="text/javascript">

</script>

</head><body>
<div id="cont">
<div id="ctop">Top</div>
<div id="cleft">Left</div>
<div id="cright">Right</div>
<div id="footer">Footer</div>
</div>
</body></html>

Synes godt om

mclemens Nybegynder

21. juni 2006 - 11:04 #23

Script blokken var en fejl...

Synes godt om

mclemens Nybegynder

21. juni 2006 - 12:24 #24

[ men ved ikke helt hvordan det her hænger sammen med kode genbrug(include-filer). ]
- Det indentil style blokken kan lægges ud i ekstern fil med etnavn.css og så kan hele style blokken i head sectionen rettes til: <link rel="stylesheet" type="text/css" href="enavn.css"> - så fylder styles kun 1 gang da du bruger samme stylesheet på alle sider...

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

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.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS