Kære gæst, velkommen til Tweak.dk. Hvis dette er dit første besøg her, bør du læse Hjælp. Her forklares i detaljer hvordan denne side fungerer. For at benytte alle funktionerne på denne side, bør du overveje at lade dig registrere. Benyt venligst registreringsformularen for at registrere her eller læs yderligere information om registreringsprocessen. Hvis du allerede er registreret, så log på her.

1

mandag, 12. marts 2007, 12:51


Jeg har altid mest brugt tabels når jeg har lavet det grundliggende layout til hjemmesider. Det var sådan man gjorde i gamle dage da jeg lærte det. Dengang var der stadig mange der brugte frames så det er noget tid siden.

Nu har jeg kastet mig over at komme lidt mere ind i at styrere layouts via css og div tags.

Har sidet og lavet nogle divs og smidt andre inde i og lavet indhold.

Jeg har en div som indholder alt andet, altså alle de andre divs. Hvis jeg sætter højden på den til auto så smutter den op og bliver nærmest usynlig selvom den jo indeholder de andre divs.

En der har en forklaring på dette ?

| asus maximus VI Hero | i7 4770K | 2 x 8gb G.skill | Asus GTX 750 Ti OC |
Common sense is creativities biggest enemy

2

mandag, 12. marts 2007, 13:15


Du har ikke en test-side hvor vi kan se det?
Har du angivet en højde og bredde i body? Hvis ikke kan det give problemer, idet der ikke er noget højde at angive i forhold til.

Hvorfor egentligt "height:auto;"

/ask

IBM t42 and IBM t23 still alive and kicking

3

mandag, 12. marts 2007, 13:27


Hvis nu vi siger at body baggrund er hvid.

Så har jeg en masse indhold midt på hvor al baggrund skal være grå.

Så laver jeg en div som indeholder alt dette og giver den grå baggrund sætter højden til auto så den udvider sig alt efter hvor meget indhold jeg smider i...

http://www.eurostofogstil.dk/css_test/

Der burde så være en 800pixel bred baggrund under header, content og side bar.

Det er som om den ikke ser de divs der er inde i den som indhold og gør sig selv større efter dem. Hvis jeg laver en masse linebreaks bliver den større og kommer frem som baggrund.

| asus maximus VI Hero | i7 4770K | 2 x 8gb G.skill | Asus GTX 750 Ti OC |
Common sense is creativities biggest enemy

4

mandag, 12. marts 2007, 13:57


Det kommer af din position:absolute; denne river <div>'en ud af sin context!

dvs

#site_div{
background-color: #CCCCCC;
color:inherit;
width:800px;
margin:0 auto;
}

giver dig en 800px bred centreret div med grå baggrund.

#header {
width:100%;
height:100px;
background-color: #FFFF00;

}

#content {
width:570px;
height:auto;
background-color: #0000FF;
color: #FFFFFF;
float:left;
}

#menu {
width: 200px;
float:left;
}

#menu1 {
width:100%;
background-color: #FF0000;
}

#menu2 {
width:100%;
background-color: #00FF00;


header i fuld bredde (af den div den ligger i)

resten af elementerne:

Nemmest:

<div id=site_div>
<id id =header> header text</div>
<div id=content> content </div>
<div id=menu>
<div id=menu1> menu 1 text</div>
<div id=menu2> menu 2 text </div>
</div>

skulle virke.

/ask

EDIT: istedet for en menu med undermenuer i, kan du floate disse right (med en clear right på den nederste, for at undgå at den bare ligger sig op af den øverste.

IBM t42 and IBM t23 still alive and kicking

Dette indlæg er blevet redigeret 1 gange, senest redigeret af "jacobask" (12.03.2007, 14:00)


5

mandag, 12. marts 2007, 14:04


Ok magter ikke hvordan man skal styrer positioner på de ting.

Syntes det er rodet at styrer sammenlignet med tabels.

Hvornår bruger man hvad og hvorfor ?

| asus maximus VI Hero | i7 4770K | 2 x 8gb G.skill | Asus GTX 750 Ti OC |
Common sense is creativities biggest enemy

6

mandag, 12. marts 2007, 14:05


glemte lige: for at sikre dig en fuld højde af bagrunden skal du lave en footer (ellers kan menuerne falde ud...)

#footer {
width:100%
clear:both;
}

dvs:

<div id=site_div>
<id id =header> header text</div>
<div id=content> content </div>
<div id=menu>
<div id=menu1> menu 1 text</div>
<div id=menu2> menu 2 text </div>
<div id=footer> footer text </div>
</div>

IBM t42 and IBM t23 still alive and kicking

7

mandag, 12. marts 2007, 14:11


Det er for så vidst relativt simpelt (når man lige kommer ind i det).

float - egenskaben ligger dine elementer op af den side du floater det til. Er der andre elemter der ligger der i forvejen ligger de sig op af hinanden (hvis der er plads, ellers skiftes der linie).

Dvs hvis du ligger din contnt til højre gør du det ved "float:right;" Da du er sikker på at du har plads nok i venstre side til din menu (pga bredden af din side) kan du ligge menuerne til venstre med float:left.

for at undgå at de skal ligge sig udenpå hinanden sætter du clear:right på det nederste element (denne egenskaber ligger elementet på en ny linie (sørger for at det er det yderste element).

Som skrevet før, så kan du sikre dig at din side (baggrundsfarven) når helt til bunden med en footer der er sat til clear:both; (sikre sig at der ikke er nogle elemter ved siden af denne - derved er det under de foregående)).

Håber det gav lidt mening.

/ask

IBM t42 and IBM t23 still alive and kicking

8

mandag, 12. marts 2007, 14:15


Hmm prøv lige linket igen nu har jeg rettet til efter det du skrev men syntes sgu ikke lige det var sådan det skulle se ud :)

*Fandt lidt en af fejlen med en manglende afslutning på menu div

**en mere med header der hed id id

| asus maximus VI Hero | i7 4770K | 2 x 8gb G.skill | Asus GTX 750 Ti OC |
Common sense is creativities biggest enemy

9

mandag, 12. marts 2007, 14:19


Se evt http://ask.exo.dk/test

Er det noget i den stil.

her har jeg floated menuen til højre og sat lidt padding på div_site (dette giver lidt luft).

/ask

EDIT: en god ide, hvis man er i tvivl om, hvilke elemter der ligger hvor er med "border:1px solid red;" så kan man altid se den.

EDIT2: dette er iøvrigt en rigtigt lækker FF extension når man skal fejlfinde. Med den kan du rette i css'en på en side du ser i FF og få output med det samme.

IBM t42 and IBM t23 still alive and kicking

Dette indlæg er blevet redigeret 2 gange, senest redigeret af "jacobask" (12.03.2007, 14:23)


10

mandag, 12. marts 2007, 14:28


Har rodet lidt nu og kan se jeg er ved at få lidt mere fat i det.

Hvis du kigger linket igen så har jeg nu lidt grå over min header kan.

Desuden syntes jeg ikke den reagere ens.

Har lagt en padding-left på min menu div og det gav fint nok 10px luft.

Men smider jeg en på content for at give luft i venstre side rykker den istedet teksten ind.

| asus maximus VI Hero | i7 4770K | 2 x 8gb G.skill | Asus GTX 750 Ti OC |
Common sense is creativities biggest enemy

11

mandag, 12. marts 2007, 14:37


det grå felt i toppen er fordi du har en "<div id="site_div"><br />" i toppen!

Padding er på indersiden af dine <div>'s, skal du have luft i venstre side af headeren skal du enten have fat i margin ellers skal du lave padding på din site_div.

Hvis du laver marin på din header skal du være obs på at denne kommer ud over din bredde, dvs denne skal justeres.

se evt html.dk's guide til "boks-modellen".

/ask

EDIT: grunden til at det virker på din menu-div, er et menu1 og menu2 så først starter 10px inde i menu.

IBM t42 and IBM t23 still alive and kicking

Dette indlæg er blevet redigeret 1 gange, senest redigeret af "jacobask" (12.03.2007, 14:38)


12

mandag, 12. marts 2007, 14:39


Det var ikke headeren jeg ville have rykket det var content.

Har fundet ud af den nu skulle bare være margin istedet for pading.

Desuden kan jeg se at min kontent bare løber ned over min footer nu. Hvis jeg fylder mere indhold i den.

| asus maximus VI Hero | i7 4770K | 2 x 8gb G.skill | Asus GTX 750 Ti OC |
Common sense is creativities biggest enemy

13

mandag, 12. marts 2007, 14:43


Prøv at slet din ekstra <div id="site_div">

se http://ask.exo.dk/test/

/ask

IBM t42 and IBM t23 still alive and kicking

Dette indlæg er blevet redigeret 1 gange, senest redigeret af "jacobask" (12.03.2007, 14:45)


14

mandag, 12. marts 2007, 14:47


Det ændrede ikke rigtig noget.

Hvis jeg fylder mere i en af menu kasserne så skubber de den grå kant med ned men content gør ikke.

| asus maximus VI Hero | i7 4770K | 2 x 8gb G.skill | Asus GTX 750 Ti OC |
Common sense is creativities biggest enemy

15

mandag, 12. marts 2007, 14:59


Efter lidt søgen tror jeg at jeg fandt fejlen. Du mangler et ";" efter witdh:100% i din footer....

/ask

IBM t42 and IBM t23 still alive and kicking

16

mandag, 12. marts 2007, 15:00


Citeret

Originally posted by jacobask
Efter lidt søgen tror jeg at jeg fandt fejlen. Du mangler et ";" efter witdh:100% i din footer....

/ask


Ahh tak det giver jo mening :)

Har da lært lidt i dag blandt andet det der centrerings trik med 0 auto sgu egentlig smart nok selvom det ikke er så logisk.

| asus maximus VI Hero | i7 4770K | 2 x 8gb G.skill | Asus GTX 750 Ti OC |
Common sense is creativities biggest enemy

17

mandag, 12. marts 2007, 15:06


har faktisk lige testet det. Det er ikke nødvendigt med det 0, og så giver det også mere mening.

Jeg har tidligere brugt 0'et da jeg ønskede 0 afstand til toppen og jeg vidst bare copy-pastede derfra....

du sammentrækker alle margin-definitioner sådan:

margin:"top" "right" "bottom" "left";

så det jeg havde gjort med margin:0 auto; giver en topmargin på 0 og resten auto. Grunden til at siden så ikke stod helt i toppen er at der er en default paddig på body'en, hvis du ikke har angivet andet.

Iøvrigt er det altid en god ide at angive alle margin og padding værdier på body'en, idet default værdierne ikke er ens i alle browsere....

/ask

IBM t42 and IBM t23 still alive and kicking

18

mandag, 12. marts 2007, 15:18


Citeret

Originally posted by jacobask
har faktisk lige testet det. Det er ikke nødvendigt med det 0, og så giver det også mere mening.

Jeg har tidligere brugt 0'et da jeg ønskede 0 afstand til toppen og jeg vidst bare copy-pastede derfra....

du sammentrækker alle margin-definitioner sådan:

margin:"top" "right" "bottom" "left";

så det jeg havde gjort med margin:0 auto; giver en topmargin på 0 og resten auto. Grunden til at siden så ikke stod helt i toppen er at der er en default paddig på body'en, hvis du ikke har angivet andet.

Iøvrigt er det altid en god ide at angive alle margin og padding værdier på body'en, idet default værdierne ikke er ens i alle browsere....

/ask


Takker det er jo godt at vide :)

| asus maximus VI Hero | i7 4770K | 2 x 8gb G.skill | Asus GTX 750 Ti OC |
Common sense is creativities biggest enemy

19

mandag, 12. marts 2007, 15:54


Jeg ved ikke hvor meget du har været igang med vores sticky?

Men vil foreslå at kigge på nedenstående link:

http://www.hotdesign.com/seybold/index.html

Herefter kan du finde gode færdige eksempler på nedenstående links, som kan hjælpe dig til at forstå opsætningen bedre.

http://www.thenoodleincident.com/tutoria…sson/boxes.html
http://www.dynamicdrive.com/style/

Anyways, når først du er kommet godt ind i divs, så begynder man at synes, at tabeller er pisse langhårede at arbejde med.


20

mandag, 12. marts 2007, 19:18


Citeret

Originally posted by Macimuz
Jeg ved ikke hvor meget du har været igang med vores sticky?

Men vil foreslå at kigge på nedenstående link:

http://www.hotdesign.com/seybold/index.html

Herefter kan du finde gode færdige eksempler på nedenstående links, som kan hjælpe dig til at forstå opsætningen bedre.

http://www.thenoodleincident.com/tutoria…sson/boxes.html
http://www.dynamicdrive.com/style/

Anyways, når først du er kommet godt ind i divs, så begynder man at synes, at tabeller er pisse langhårede at arbejde med.


Et par gode links den første har jeg vist skimmet meget hurtigt på et tidspunkt.

| asus maximus VI Hero | i7 4770K | 2 x 8gb G.skill | Asus GTX 750 Ti OC |
Common sense is creativities biggest enemy

Nyeste Videoer og Trailers

Indsend nyhed
Har du fundet en fed nyhed så indsend den så alle andre på Tweak.dk kan få glæde af den.