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

onsdag, 20. oktober 2010, 10:50


Hej tweak!

Jeg synes det andet topic var ved at blive for rodet og for uoverskueligt. Derfor har jeg lukket det og opretter nu et nyt.

Jeg er gået i gang med at skulle lære kodning af hjemmesider. Jeg bruger ikke noget WYSIWYG halløj. Koder i xhtml, css og php. Bruger indtil videre kun php til at importere min menu men finder nok på mere hen ad vejen.

Jeg starter med at lave en side til min guild i wow. www.immersion-eu.com er den rigtige hjemmeside. Til tests og eksempler som jeg stiller spørgsmål til her vil jeg dog bruge http://test.elektronikhjælp.dk

Jeg vil løbende ændre på begge sider så men test siden vil kun blive ændret til spørgsmål der bliver stillet her.

Og nu til det første spørgsmål:!

I starten lavede jeg en ramme rundt om mine elementer på siden f.eks.
<div id="content"></div> (html del)
div#content {
border: 1px solid red;
}
(css del)
Og det var fint for at kunne forholde sig til elementernes størrelse. Da jeg så ville nærmere det endelige resultat og havde fået placeret elementerne korrekt i forhold til hinanden stødte jeg ind i et ret overraskende problem.
Da jeg fjernede rammerne opstod der nogle mellemrun som kan ses på http://test.elektronikhjælp.dk. Der er også et link til en side med rammerne ind på siden. Har prøvet at sætte border: none, margin: 0, padding: 0 og ved ikke hvad jeg skal gøre længere. Hjælp?

Corsair 500R
MSI Z87-G45 Gaming
Core i5-4670k@3.4Ghz Cooled by Cooler Master Hyper 212 EVO
Gainward GTX 275
Samsung 840 series SSD 250gb
WD Black series 1TB Sata 6
G.Skill Ripjaws-Z 2x8 gb
Corsair CX750m

2

onsdag, 20. oktober 2010, 11:00


Du kan starte med at lave din div#banner height om til 134 istedet for 150px

Så husk at når det kommer til web så husk at sige hvad browser du optimere til.

Intel I5 2500k | Gigabyte Z68 | 16GB Kingston | Radeon 6950 | 2xOCZ Vertex 3 120GB Raid 0 | OCZ 650W
27" (U2711) DELL | 24" (2408WFP) DELL | Ergotron LX Dual Side-by-Side

Canon 5DM2 | 16-35mm 2.8L | 24-70mm 2,8L | 85mm 1.2L USM II | 70-200mm 2.8L IS
Nogle Speedlites | PocketWizards

3

onsdag, 20. oktober 2010, 11:11


Ehm. Jeg tror at jeg optimere til IE 8.
Og hvorfor skal mit banner laves om? Mit banner er jo 150px :S

Edit: kan godt se at det hjalp. Men kan du fortælle mig hvorfor? Vil gerne forstå det. Er der noget moms eller sådan noget? :P

Corsair 500R
MSI Z87-G45 Gaming
Core i5-4670k@3.4Ghz Cooled by Cooler Master Hyper 212 EVO
Gainward GTX 275
Samsung 840 series SSD 250gb
WD Black series 1TB Sata 6
G.Skill Ripjaws-Z 2x8 gb
Corsair CX750m

Dette indlæg er blevet redigeret 1 gange, senest redigeret af "Uldar" (20.10.2010, 11:14)


4

onsdag, 20. oktober 2010, 12:01


prøv lige at få den til at validere først

http://validator.w3.org/check?uri=http:/…=Inline&group=0

Kan ikke lige se fejlen sådan lige umiddelbart...

Men prøv at tage nogle af alle dine CSS ting væk, og start mere basalt...
Mange af dine settings gør ingen forskel, de er der bare, og det forvirre rent faktisk bare.

Intel I5 2500k | Gigabyte Z68 | 16GB Kingston | Radeon 6950 | 2xOCZ Vertex 3 120GB Raid 0 | OCZ 650W
27" (U2711) DELL | 24" (2408WFP) DELL | Ergotron LX Dual Side-by-Side

Canon 5DM2 | 16-35mm 2.8L | 24-70mm 2,8L | 85mm 1.2L USM II | 70-200mm 2.8L IS
Nogle Speedlites | PocketWizards

5

onsdag, 20. oktober 2010, 12:08


altså nu har jeg rettet et par fejl jeg selv kunne finde ud af. Men den fejl der skulle være med banneret kan jeg ikke forstå. Kan du se det link ?validator

Edit: og tænker du på mængden af divs eller hvad de divs har af attributes i mit stylesheet. Kan ikke se hvordan jeg kan gøre det meget nemmere. :S

Edit: 2 sorry, efter lidt google fandt jeg også løsningen på det problem. Så nu er den korrekt ifølge validator. Men ved stadigvæk ikke hvorfor jeg skulle lave den 134 høj i stedet for 150 da det er højden på banneret :S

Corsair 500R
MSI Z87-G45 Gaming
Core i5-4670k@3.4Ghz Cooled by Cooler Master Hyper 212 EVO
Gainward GTX 275
Samsung 840 series SSD 250gb
WD Black series 1TB Sata 6
G.Skill Ripjaws-Z 2x8 gb
Corsair CX750m

Dette indlæg er blevet redigeret 2 gange, senest redigeret af "Uldar" (20.10.2010, 12:14)


6

onsdag, 20. oktober 2010, 12:29


Kildekode

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
div#banner {
position: relative; <----------<<<<<
width: 1000px;
height: 134px;
margin-right: auto;
margin-left: auto;
padding: 0px;
z-index: 1;<----------<<<<<
top: 0;<----------<<<<<
bottom: 0;<----------<<<<<
}
div#wrapper {
position: relative;<----------<<<<<
width: 1000px;
min-height: 600px;
margin-left: auto;
margin-right: auto;
top: 0;
bottom: 0;
z-index: 1;<----------<<<<<
background-color:#B6D2D2;
}
div#footer {
position: relative;<----------<<<<<
width: 1000px;
height: 50px;
margin-left: auto;
margin-right: auto;
text-align: center;
background-color: blue;
padding-top: 3px;
padding-bottom: 3px;
top: 0;<----------<<<<<
bottom: 0;<----------<<<<<
}
div#omslag {
padding: 0px;
margin: 0px;
border: none;
}
body {
background-color: white;
padding: 0;
margin: 0;
}
.menu a {
float: left; <----------<<<<<
text-decoration: none;
z-index: 15;<----------<<<<<
border: none;
}
.menu a:hover {
text-decoration: none;
color: black;
z-index: 15;<----------<<<<<

}
.menu a:visited {
text-decoration: none;
color: black;
z-index: 15;<----------<<<<<
}
img {
border: none;
}

Intel I5 2500k | Gigabyte Z68 | 16GB Kingston | Radeon 6950 | 2xOCZ Vertex 3 120GB Raid 0 | OCZ 650W
27" (U2711) DELL | 24" (2408WFP) DELL | Ergotron LX Dual Side-by-Side

Canon 5DM2 | 16-35mm 2.8L | 24-70mm 2,8L | 85mm 1.2L USM II | 70-200mm 2.8L IS
Nogle Speedlites | PocketWizards

7

onsdag, 20. oktober 2010, 12:31


du kan prøve at starte med at udkommentere alle de <----------<<<<< markerede

og lav bannerede tilbage til 150

Intel I5 2500k | Gigabyte Z68 | 16GB Kingston | Radeon 6950 | 2xOCZ Vertex 3 120GB Raid 0 | OCZ 650W
27" (U2711) DELL | 24" (2408WFP) DELL | Ergotron LX Dual Side-by-Side

Canon 5DM2 | 16-35mm 2.8L | 24-70mm 2,8L | 85mm 1.2L USM II | 70-200mm 2.8L IS
Nogle Speedlites | PocketWizards

8

onsdag, 20. oktober 2010, 13:21


Det er hermed gjort, men der er stadigvæk mellemrum mellem content og footer.

btw, tak for al hjælpen.

Corsair 500R
MSI Z87-G45 Gaming
Core i5-4670k@3.4Ghz Cooled by Cooler Master Hyper 212 EVO
Gainward GTX 275
Samsung 840 series SSD 250gb
WD Black series 1TB Sata 6
G.Skill Ripjaws-Z 2x8 gb
Corsair CX750m

9

onsdag, 20. oktober 2010, 13:36


prøv lige at sætte denne regl.

*
{
margin: 0px;
padding: 0px

}


tror faktisk du har problemer med det i din footers p tag, at det er den der har for står margin.

Intel I5 2500k | Gigabyte Z68 | 16GB Kingston | Radeon 6950 | 2xOCZ Vertex 3 120GB Raid 0 | OCZ 650W
27" (U2711) DELL | 24" (2408WFP) DELL | Ergotron LX Dual Side-by-Side

Canon 5DM2 | 16-35mm 2.8L | 24-70mm 2,8L | 85mm 1.2L USM II | 70-200mm 2.8L IS
Nogle Speedlites | PocketWizards

10

onsdag, 20. oktober 2010, 13:40


har sat det som du sagde og har også prøvet at lave en
.p {
margin: 0px;
padding: 0px;
}

Corsair 500R
MSI Z87-G45 Gaming
Core i5-4670k@3.4Ghz Cooled by Cooler Master Hyper 212 EVO
Gainward GTX 275
Samsung 840 series SSD 250gb
WD Black series 1TB Sata 6
G.Skill Ripjaws-Z 2x8 gb
Corsair CX750m

11

onsdag, 20. oktober 2010, 13:43


ahh prøv lige på * ikke p

derud over hedder det ikke .p da p ikke er en class men et element.

Intel I5 2500k | Gigabyte Z68 | 16GB Kingston | Radeon 6950 | 2xOCZ Vertex 3 120GB Raid 0 | OCZ 650W
27" (U2711) DELL | 24" (2408WFP) DELL | Ergotron LX Dual Side-by-Side

Canon 5DM2 | 16-35mm 2.8L | 24-70mm 2,8L | 85mm 1.2L USM II | 70-200mm 2.8L IS
Nogle Speedlites | PocketWizards

12

onsdag, 20. oktober 2010, 14:18


Okay nu prøvede jeg på * og det virkede. Men det er på alle elementer ikke? Vil jo gerne kunne bruge padding nogle steder. :S

Men det var måske bare for at se hvilket parameter vi skulle kigge på?

Corsair 500R
MSI Z87-G45 Gaming
Core i5-4670k@3.4Ghz Cooled by Cooler Master Hyper 212 EVO
Gainward GTX 275
Samsung 840 series SSD 250gb
WD Black series 1TB Sata 6
G.Skill Ripjaws-Z 2x8 gb
Corsair CX750m

13

onsdag, 20. oktober 2010, 14:48


Altså jeg ville sætte den til 0 som du har nu..

Også arbejde ud fra det, og sætte padding og margin de steder du ønsker det.

Intel I5 2500k | Gigabyte Z68 | 16GB Kingston | Radeon 6950 | 2xOCZ Vertex 3 120GB Raid 0 | OCZ 650W
27" (U2711) DELL | 24" (2408WFP) DELL | Ergotron LX Dual Side-by-Side

Canon 5DM2 | 16-35mm 2.8L | 24-70mm 2,8L | 85mm 1.2L USM II | 70-200mm 2.8L IS
Nogle Speedlites | PocketWizards

14

onsdag, 20. oktober 2010, 15:26


Ja okay nu er jeg med. Troede at den der * overridede de andre. Tusind tak for hjælpen indtil nu. Lige et sidste problem. :S

Nu har jeg gjort det. Og sat
div#footer {
padding-tip: 25px;
padding-bottom: 3px;
}

Men der er stort stykke padding i bunden jeg ikke kan komme af med. :S

Corsair 500R
MSI Z87-G45 Gaming
Core i5-4670k@3.4Ghz Cooled by Cooler Master Hyper 212 EVO
Gainward GTX 275
Samsung 840 series SSD 250gb
WD Black series 1TB Sata 6
G.Skill Ripjaws-Z 2x8 gb
Corsair CX750m

15

onsdag, 20. oktober 2010, 17:35


Prøv at mindsk din højde med 25+3

Boxmodellen sætter den "egentlige" bredde til height+padding.. Det er ud fra den tanke at man sætter den "indre" bredde/højde, så den bredde man sætter er den bredde som evt. tekst kan udbrede sig til

Jeg vil forresten anbefale dig at sætte layoutgrafik op med background-image.. Fandt et link der ser ud til at forklare det: http://www.tutorialhero.com/tutorial-52-…image_guide.php


16

onsdag, 20. oktober 2010, 18:13


Citeret

Oprindeligt indlæg af Karga
Prøv at mindsk din højde med 25+3

Boxmodellen sætter den "egentlige" bredde til height+padding.. Det er ud fra den tanke at man sætter den "indre" bredde/højde, så den bredde man sætter er den bredde som evt. tekst kan udbrede sig til

Jeg vil forresten anbefale dig at sætte layoutgrafik op med background-image.. Fandt et link der ser ud til at forklare det: http://www.tutorialhero.com/tutorial-52-…image_guide.php


Ehm jeg tror da også jeg bruger den funktion på den rigtige side. Og har ikke rigtig brug for baggrund på min testside. Kigger lige på det med højden.

Corsair 500R
MSI Z87-G45 Gaming
Core i5-4670k@3.4Ghz Cooled by Cooler Master Hyper 212 EVO
Gainward GTX 275
Samsung 840 series SSD 250gb
WD Black series 1TB Sata 6
G.Skill Ripjaws-Z 2x8 gb
Corsair CX750m

17

lørdag, 23. oktober 2010, 12:50


Okay nu tager jeg jer lige med hen på den rigtige side. Jeg kan ikke få det til at give mening.

Se på immersion-eu.com

På index.php (home) er der 10 px margin i toppen og i bunden af content blokken.
På guildrules.php (guild rules) er der ikke noget. Den eneste forskel er at der er mere tekst. Har prøvet at lave min
p.content{
margin: 10px;
}
til comment og det fjerne problemet men så kommer det til at se helt forkert ud. Se test.immersion-eu.com

Har også prøvet at bruge padding i stedet for margin men det ser også helt forkert ud.

Hvad er det lige der sker? :(

Håber i kan hjælpe mig.

Corsair 500R
MSI Z87-G45 Gaming
Core i5-4670k@3.4Ghz Cooled by Cooler Master Hyper 212 EVO
Gainward GTX 275
Samsung 840 series SSD 250gb
WD Black series 1TB Sata 6
G.Skill Ripjaws-Z 2x8 gb
Corsair CX750m

18

lørdag, 23. oktober 2010, 13:18


Jeg er lidt i tvivl om hvad dit problem egentligt er lige pt....

Hvis det er footeren der er for "høj"? i givet fald så fjern height:50px; på footeren - det er den der skaber den nuværende højde på test.immersion-eu.com.

Jeg vil iøvrigt råde til at arbejde i FF og med firebug pluginnet installeret - det letter arbejdet rigtigt meget! Hvis du sikre dig at din side validerer så vil det vises meget ens i alle browsere undtagen nogle udgaver af IE.

Noget andet. Istedet for at deklerere for * så lav disse under body deklerationerne. Det giver samme resultat og er i mine øjne nemmere at holde styr på, idet du ikke har "globale" ting deklereret 2 forskellige steder.

En detalje mere. Jeg ville lave en div til content og så lave "p'er" inde i denne, istedet for at lave en p med classen content, og derefter angive div.content width i % hvis det er pakket ind i wrapperen - dette går at hvis du senere ændrer wrapper-størrelsen, så følger content med.

Ligeledes ville jeg også ligge footeren inde i wrapperen, hvis den skal følge bredden af denne - og igen angive den med width:100%;

Dvs alt i alt:

Kildekode

1
2
3
4
5
6
7
8
9
10
11
<div class=wrapper>
    <div class=menu>
       menu indhold
    </div>
    <div class=content>
       "content tekst som du vil have det stylet via p.content"
    </div>
    <div class=footer>
       footer indhold
    </div>
</div>


Så kan du style alle elementer i content via .content dvs p.content, h1.content,....


/ask

IBM t42 and IBM t23 still alive and kicking

Dette indlæg er blevet redigeret 2 gange, senest redigeret af "jacobask" (23.10.2010, 13:25)


19

lørdag, 23. oktober 2010, 14:17


Ehm problemet er det mellemrum der er imellem content og footer. Bemærk at det ikke er der under guildrules.

Og så prøvede jeg lige at lave de ændringer du foreslog. Gjorde det lidt ad gangen for at kunne se hvad der gik galt hvis noget gik galt. Og det gik galt allerede ved at flytte margin: 0p; og padding: 0px; til body i stedet for *

Der kom større mellemrum imellem content og footer og mellemrummet kom også under guild rules.

Og når man begynder at sætte width til 100% bliver det flyttet til højre når du så sætter margin på. og padding udvider det. Ved godt at det har noget med boxmodel at gøre. Men skal man så skrive 100% - padding eller hvad?

test.immersion-eu.com er opdateret med en del af de ændringer du foreslår og så lidt rettelser bagefter for at få det til at se nogenlunde ud. Men det er stadigvæk noget rod. Hvis du får tid til at kigge på det må du meget gerne.

Corsair 500R
MSI Z87-G45 Gaming
Core i5-4670k@3.4Ghz Cooled by Cooler Master Hyper 212 EVO
Gainward GTX 275
Samsung 840 series SSD 250gb
WD Black series 1TB Sata 6
G.Skill Ripjaws-Z 2x8 gb
Corsair CX750m

Dette indlæg er blevet redigeret 2 gange, senest redigeret af "Uldar" (23.10.2010, 14:43)


20

lørdag, 23. oktober 2010, 17:56


Gider du ikke lige at sende mig et zip'ed udgave af filerne så jeg kan prøve selv? Gerne med et billede af hvordan det skal se ud.

jacob_ask(a)hotmail.com

/ask

IBM t42 and IBM t23 still alive and kicking

Dette indlæg er blevet redigeret 1 gange, senest redigeret af "jacobask" (23.10.2010, 17:57)


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.