1

onsdag, 9. maj 2007, 19:37


Jeg er ved at lave en hjemmeside til et eksamensprojekt i kommunikation/It på HTX.

Link til hjemmesiden: www.diox.dk/hjemmeside

Problemet er at i Internet Explorer er menuens top og bund for store (se i firefox for forskel). Problemet mener jeg er fordi at IE umiddelbart ikke kan lave mindre div-højde end 20px.

Mit spørgsmål er så om det kan lade sig gøre?
Eller er jeg bar en tumpe som har overset en kode til højde i IE? ;)

Her er koden til menuen:

Kildekode

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
		<div id="Insideleft1">
			<div id="menu_top">
				<font face="Verdana" size="2">Menu</font>
			</div>
			<div id="menu_middle">
				<div id="Menu">
					<font color="#000000" face="Verdana" size="2">Menu</font>
					<br>
					<font color="#000000" face="Verdana" size="1">&nbsp;· <a target="_top" href="Hoejttalere.html">Højttalere</a></font>
					<br>
					<font color="#000000" face="Verdana" size="1">&nbsp;· <a target="_top" href="Forstaerkere.html">Forstærkere</a></font>
					<br>
					<font color="#000000" face="Verdana" size="1">&nbsp;· <a target="_top" href="Information.html">Information</a></font>
					<br>
					<font color="#000000" face="Verdana" size="1">&nbsp;· <a target="_top" href="Tilbehoer.html">Tilbehør</a></font>
					<br>
				</div>
			</div>
			<div id="menu_bund">
			</div>
		</div>


CSS:

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
#Insideleft1{
	Height: 250px;
	Width: 148px;
	float: left;
	background-image: url("bginside.jpg");
}
#Menu_top{
	text-align: center;
	margin-top:5px;
	margin-left:24px;
	background-image: url("Menu_top.gif");
	Width: 100px;
	height: 16px;
}
#Menu_middle{
	background-image: url("Menu_middle.png");
	margin-left:24px;
	Width: 100px;
	Height: 105;
}
#Menu{
	text-align: left;
	Height: auto;
	Width: auto;
	float: left;
	margin-bottom:4px;
	margin-left:8px;
}
#Menu_bund{
	margin-left:24px;
	background-image: url("Menu_bund.gif");
	Width: 100px;
	height: 14px;
}

Lehn

Dette indlæg er blevet redigeret 1 gange, senest redigeret af "Kenny" (09.05.2007, 19:39)


2

onsdag, 9. maj 2007, 20:15


Jeg er ikke nogen haj til programmering.. Men kan du ikke angive det i procent i stedet for?

Intel i5-4690K @ 4,7ghz
Coolmaster EVO212
ASUS Z97-A
Crucial Ballistix Sport 2x4GB
Crucial MX100 240GB SSD
Gigabyte 970 G1 4GB
Fractal Design Arc Midi R2

3

onsdag, 9. maj 2007, 20:20


Jeg kan umiddelbart ikke lige se mig frem til nogle problemer.

Eventuelt prøv at smække margin og padding = 0 på de 2 ønskede div's.

Anyways, du kunne med fordel droppe alle de font-tags og holde det hele i css'en.

Dertil, så kunne du med fordel opstille din menu i en liste, som de iøvrigt bør være ;)

Plus, du bør holde dig fra at bruge left, right osv. i navnegivningen af dine elementer. I fremtiden kan det være, at et element til højre pludselig kommer til at ligge til venstre.


4

onsdag, 9. maj 2007, 20:21


Citeret

Originally posted by celfa
Jeg er ikke nogen haj til programmering.. Men kan du ikke angive det i procent i stedet for?


Men nu når højden skal være 20px, så hjælper procentangivelse vidst ikke noget ;)


5

onsdag, 9. maj 2007, 20:27


Citeret

Originally posted by Macimuz
Jeg kan umiddelbart ikke lige se mig frem til nogle problemer.

Eventuelt prøv at smække margin og padding = 0 på de 2 ønskede div's.

Anyways, du kunne med fordel droppe alle de font-tags og holde det hele i css'en.

Dertil, så kunne du med fordel opstille din menu i en liste, som de iøvrigt bør være ;)

Plus, du bør holde dig fra at bruge left, right osv. i navnegivningen af dine elementer. I fremtiden kan det være, at et element til højre pludselig kommer til at ligge til venstre.


Tak for svaret, ser lige om snart om det virker, der står bare lige en matematik aflevering og puster mig i nakken :$

Og vil du ikk lige uddybe det med at stille en menu op i en liste? Ved ikk om du mener på selve hjemmesiden eller i koden :)

Lehn

6

onsdag, 9. maj 2007, 21:30


Citeret

Originally posted by Kenny

Citeret

Originally posted by Macimuz
Jeg kan umiddelbart ikke lige se mig frem til nogle problemer.

Eventuelt prøv at smække margin og padding = 0 på de 2 ønskede div's.

Anyways, du kunne med fordel droppe alle de font-tags og holde det hele i css'en.

Dertil, så kunne du med fordel opstille din menu i en liste, som de iøvrigt bør være ;)

Plus, du bør holde dig fra at bruge left, right osv. i navnegivningen af dine elementer. I fremtiden kan det være, at et element til højre pludselig kommer til at ligge til venstre.


Tak for svaret, ser lige om snart om det virker, der står bare lige en matematik aflevering og puster mig i nakken :$

Og vil du ikk lige uddybe det med at stille en menu op i en liste? Ved ikk om du mener på selve hjemmesiden eller i koden :)


Hehe, det er i selve koden. Et eksempel nedenfor:

Kildekode

1
2
3
4
5
6
7
<ul>
	<li>Punkt 1</li>
	<li>Punkt 2</li>
	<li>Punkt 3</li>
	<li>Punkt 4</li>
	<li>Punkt 5</li>
</ul>


Og frygt ej, sådan en kan styles på et utal af måde. Og den kan sagtens gøres horisontal, hvis det er det man ønsker.

Når du alligevel har gang i at anvende et css-layout, så kan du ligeså godt gå hele vejen og få semantikken med også. Forstået på den måde, at din kode står ganske flot og når du slår stylesheetet fra, så vil din menu i en fin opstillet liste.


7

torsdag, 10. maj 2007, 17:25


IE er lidt drilsk med størrelsen på blok elementer. Det er fordi det er lavet, så der altid er plads til teksten i elementets standardstørrelse. Du kan løse det ved at sætte skriftstørrelsen til 0px. f.eks:


Kildekode

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#Menu_top{
	text-align: center;
	margin-top:5px;
	margin-left:24px;
	background-image: url("Menu_top.gif");
	Width: 100px;
	height: 16px;
        font-size: 0px;
}

#Menu_bund{
	margin-left:24px;
	background-image: url("Menu_bund.gif");
	Width: 100px;
	height: 14px;
        font-size: 0px;
}

Dette indlæg er blevet redigeret 1 gange, senest redigeret af "Nueaf" (10.05.2007, 17:26)


8

torsdag, 10. maj 2007, 20:05


Mange tak for svaret Nueaf, lige det der skulle til ;)

Og Macimuz, er det i orden hvis jeg må tilføje dig på msn? Det er lidt nemmere at få vejledning der, for lyder som om du har en fix måde der at få en menu opstillet på :)

Lehn

9

torsdag, 10. maj 2007, 21:23


Citeret

Originally posted by Kenny
Mange tak for svaret Nueaf, lige det der skulle til ;)

Og Macimuz, er det i orden hvis jeg må tilføje dig på msn? Det er lidt nemmere at få vejledning der, for lyder som om du har en fix måde der at få en menu opstillet på :)


Du tilføjer bare :)

Anyways, så er Nueaf løsning altså heller ikke nogen god udvej. Hvad hvis du skal have tekst i de felter?

Fik at vide du vidst nok skal sætte Line-spacing = 0 og 1 ting mere, som jeg lige pt har glemt.


10

lørdag, 12. maj 2007, 08:04


Hvis der skal være tekst i, så kan man bare sætte font-size til en mindre størrelse, f.eks. 14px. Så længe den ikke er større en den height man prøver at sætte sit element til.


11

lørdag, 12. maj 2007, 10:26


Citeret

Originally posted by Nueaf
Hvis der skal være tekst i, så kan man bare sætte font-size til en mindre størrelse, f.eks. 14px. Så længe den ikke er større en den height man prøver at sætte sit element til.


Dur desværre ikke, hvis man beskæftigere sig med XHTML.

Det er også en smule åndsvagt at definere sådanne ting manuelt, når man kan drage fordel af css.


12

lørdag, 12. maj 2007, 12:13


Eksempel på mene lavet med liste http://www.fotoklubbenmidtjylland.dk/info.php

Den i toppen er lavet udelukkende med liste og css

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

13

lørdag, 12. maj 2007, 14:10


Jeg mente også at det skulle sættes i CSS. :) Det burde ikke gøre nogen forskel om det er xhtml eller almindelig html.

Men jeg er overhovedet ikke uenig i den del med at det burde laves med en liste og lidt færre div tags. Det giver en lidt pænere kode, og det er også bedre for søgemaskinerne.


14

lørdag, 12. maj 2007, 14:29


Ved ikk om det bare er mig, men jeg synes det der <ul> <li> er sværre at styre og finde ud af end den kode jeg har nu... Nu sir i at jeg får en pænere kode, men det er jo ikk koden man skal se på ;)

Når jeg sætter såen en <li> menu ind bliver punkterne flyttet alt for langt til højre og jeg kan ikk styre prikkernes størrelse...

Hvis i går ind på siden kan i også se jeg har et andet problemen med menuen Nyheder, den har såen en sort streg ude til højre og den er kommet efter jeg har sat padding på...

Lehn

15

lørdag, 12. maj 2007, 14:40


Citeret

Originally posted by Kenny
Ved ikk om det bare er mig, men jeg synes det der <ul> <li> er sværre at styre og finde ud af end den kode jeg har nu... Nu sir i at jeg får en pænere kode, men det er jo ikk koden man skal se på ;)

Når jeg sætter såen en <li> menu ind bliver punkterne flyttet alt for langt til højre og jeg kan ikk styre prikkernes størrelse...

Hvis i går ind på siden kan i også se jeg har et andet problemen med menuen Nyheder, den har såen en sort streg ude til højre og den er kommet efter jeg har sat padding på...


Jeg synes du skulle kigge i sticky'en her på foraet. Der kan du finde masser hjælp til menuer i listeform.

Det er meget nemmere for dig selv at have den på en liste, da du kan styre det hele via dit stylesheet.


16

tirsdag, 15. maj 2007, 08:25


Citeret

Originally posted by Kenny
Ved ikk om det bare er mig, men jeg synes det der <ul> <li> er sværre at styre og finde ud af end den kode jeg har nu... Nu sir i at jeg får en pænere kode, men det er jo ikk koden man skal se på ;)


Kan godt være du ikke skal kigge på den, men pænere kode betyder hurtigere side og færre fejl i forskellige browsere.

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

17

tirsdag, 15. maj 2007, 10:23


Citeret

Originally posted by _WHAT_

Citeret

Originally posted by Kenny
Ved ikk om det bare er mig, men jeg synes det der <ul> <li> er sværre at styre og finde ud af end den kode jeg har nu... Nu sir i at jeg får en pænere kode, men det er jo ikk koden man skal se på ;)


Kan godt være du ikke skal kigge på den, men pænere kode betyder hurtigere side og færre fejl i forskellige browsere.


Plus, at det er nemmere for søgemaskinerne.

Det tæller en del hos Google, men alligevel kun en "lille" del af en god placering. Men det er nemmere og hurtigere for google at gennemse et site med en god struktur i koden. Det er hurtigere at læse et css-layout end en kæmpe uoverskuelig tabelstruktur.

Kan kun opfordrer dig til at rode meget mere med et rent css-layout. Ikke kun grundet søgemaskinerne, men det er 100 gang lettere, næste gang dit site skal have et nyt layout.


18

tirsdag, 15. maj 2007, 20:08


Ok, tak for svarene, i har sgu fået mig overtalt ;) vil kigge på det her om et par dage...

Lehn

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.