Notifikationer

Markér alle som læst Log ud

apo Praktikant

07. juni 2005 - 20:00 Der er 20 kommentarer og
1 løsning

Div skubber tabel i Firefox

Hej :-)

Hvordan kan det være, at denne div (erstatning for <hr>) skubber den tabel jeg har opbygget mit design i? Det sker kun når jeg loader en side i Firefox, men hvis jeg opdaterer siden, ser alt ud som det skal:

<div style="margin-top:5px; margin-bottom:10px; overflow:hidden; height:1px; background-image:url('Gfx/hr.png');"></div>

Ovenstående div anvendes til at opdele tekst for at gøre den mere overskuelig. Hvis min metode ikke er hensigtsmæssig, hvordan laver jeg så en 'hjemmelavet' <hr> der virker i alle browsere?

Apo

Synes godt om

roenving Novice

07. juni 2005 - 20:18 #1

Hvorfor bruger du ikke bare en horizontal rule (<hr> ?-)

-- og hvordan indsætter du den ovenstående, for jeg kan ikke se nogen grund til at den skubber nogetsomhelst, hvis den er korrekt placeret i tabellen, nemlig ind i en celle med angivet bredde !-)

Synes godt om

apo Praktikant

08. juni 2005 - 12:39 #2

Til at begynde med brugte jeg en <hr> men kunne ikke styre den som jeg ville - Der var forskel på udseendet i henholdsvis IE og FF. Div'en ser derimod ens ud i begge browsere, men i FF opstår det nævnte problem...

Min div er placeret i en celle med angivet bredde, men i FF udvides cellen (og resten af tablet med omkring 30-40px, indtil jeg opdaterer vinduet :-/

Når jeg fjerner div'en ser alting ud som det skal...

Apo

Synes godt om

roenving Novice

08. juni 2005 - 13:52 #3

Hvordan angiver du bredden ?-)

-- hvis ikke du gør det i forvejen, så prøv at bruge en style-property:

<td style="width:250px;">

Synes godt om

apo Praktikant

08. juni 2005 - 15:29 #4

Jeg styrer min <td> via følgende:

<td style="padding-top:10px; padding-left:10px; padding-right:10px; width:520px; vertical-align:top;" class="tekst">

Apo

Synes godt om

roenving Novice

08. juni 2005 - 15:34 #5

Nu kan jeg selvfølgelig ikke gennemskue om der andre steder i din kode kan være noget, som skubber rundt på det, for hos mig virker det upåklageligt !-)

Synes godt om

apo Praktikant

08. juni 2005 - 15:37 #6

Det skal dertil siges, at det mystiske er at udvidelsen kun sker i højre side (Højre side skubbes ud over grænsen for topbilledets bredde, mens venstre side holder sig der hvor den skal). Grundtabellen er centreret i vinduet.

Grundtabellen er delt op i to celler (på horisontal linje med hinanden). Den venstre celle, hvor jeg vil have indsat div'en er der hvor selve indholdet/sideteksten er placeret. Den højre celle indeholder en højremenu.

Apo

Synes godt om

roenving Novice

08. juni 2005 - 16:00 #7

Kan du ikke lægge et link ?-)

Synes godt om

apo Praktikant

08. juni 2005 - 16:41 #8

Desværre ikke endnu da mine sider stadig er bag password-beskyttelse...

Kan du evt. bruge kildekoden til noget?

Apo

Synes godt om

roenving Novice

08. juni 2005 - 16:42 #9

Jada, men det var for at undgå at spamme eksperten !-)

Synes godt om

apo Praktikant

08. juni 2005 - 16:46 #10

Det kan vi så ikke undgå i det her spørgsmål ;-)

Her goes...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<title>Mitsite.dk | FAQ - Ofte stillede spørgsmål</title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta http-equiv="Content-Language" content="da">
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="imagetoolbar" content="false">
<meta name="description" content="[Sidens indhold]">
<meta name="keywords" content="[Sidens søgeord]">
<link rel="stylesheet" href="Css/Css.css" type="text/css">
<link rel="shortcut icon" href="/favicon.ico">
<script type="text/JavaScript">
imgs = new Array('/Gfx/baggrund.png','/Gfx/topbanner.png','/Gfx/overskrift_sogning.png','/Gfx/knap_soeg.png','/Gfx/overskrift_fv.png','/Gfx/baggrund_nyhedsbrev.png','/Gfx/ikon_overskrift.png','/Gfx/knap_tilmeld.png','/Gfx/spot_fv.png','/Gfx/baggrund_bundmenu.png');
pics = new Array();
for(i=0;imgs.length>i;i++){
pics[i] = new Image();
pics[i].src = imgs[i];
}
</script>
</head>

<body style="margin:0px; padding:0px; background-color:#BEB5AA; background-image:url('Gfx/baggrund.png');">
<div style="margin:0 auto; width:700px;">

<table style="width:700px; height:20px; border:0px; background-color:#282828;" cellpadding="0" cellspacing="0" class="toptekst">
<tr>
<td style="padding-left:20px; padding-right:10px; width:520px; height:20px; text-align:left;"></td>
<td style="padding-left:10px; padding-right:20px; width:180px; height:20px; text-align:right;"><span style="margin-left:0px; margin-right:2px;">»</span><a href="/Oversigt.asp" class="link1">Oversigt</a></td>
</tr>
</table>



<div style="width:700px; height:120px; text-align:center; cursor:pointer; background-color:#313131; background-image:url('Gfx/topbanner.png');" title="Tilbage til Mitsite.dk" onclick="document.location.href='/Default.asp'"></div>


<table style="width:700px; text-align:left; border-left:1px solid #736759; border-right:1px solid #736759; border-bottom:1px solid #736759; background-color:#FFFFFF;" cellspacing="10" cellpadding="0" border="0">

<tr>
<td style="padding-left:10px; width:520px; text-align:left;" class="toptekst"><span style="margin-left:0px; margin-right:2px;">»</span><a href="/Default.asp" class="link4">Forsiden</a><span style="margin-left:4px; margin-right:2px;">»</span><a href="/Faq.asp" class="link4">FAQ - Ofte stillede spørgsmål</a></td>
<td style="padding-right:10px; width:180px; text-align:right;" class="tekst"></td>
</tr>

<tr>

<td style="padding-top:10px; padding-left:10px; padding-right:10px; width:520px; vertical-align:top;" class="tekst">
<h1 style="margin-bottom:3px;">FAQ - Ofte stillede spørgsmål</h1>
<span class="blikfang">Blablablabla</span>
<div style="margin-top:5px; margin-bottom:10px; overflow:hidden; height:1px; background-image:url('Gfx/hr.png');"></div>
<table style="vertical-align:top;" cellspacing="1" cellpadding="10" border="0" class="tekst">
<tr>
<td style="background-color:#E1DCD7;" colspan="2">
<a href="#1" class="link3">#1 Hvem står bag Mitsite.dk?</a><br>
</td>
</tr>
<tr>
<td id="1" style="width:80px; vertical-align:top; background-color:#E1DCD7;" class="fednormaltekst">#1</td>
<td style="width:400px; background-color:#E1DCD7;" class="normaltekst"><cite>Hvem står bag Mitsite.dk?</cite></td>
</tr>
<tr>
<td style="width:80px; vertical-align:top; background-color:#EAE6E2;" class="fednormaltekst">Svar</td>
<td style="width:400px; background-color:#EAE6E2;">
Blablabla
</td>
</tr>
</table>
<div style="margin-top:5px; margin-bottom:10px; overflow:hidden; height:1px; background-image:url('Gfx/hr.png');"></div>
Blablabla
</td>



<td style="width:180px; vertical-align:top; border:1px solid #CDC5B7; background-color:#EFEBE7;">
<table style="vertical-align:top;" cellpadding="0" cellspacing="10" border="0" class="menunormaltekst">
<tr>
<td>

</td>
</tr>
<tr>
<td style="height:1px; background-image:url('Gfx/hr2.png')"></td>
</tr>
<tr>
<td>
<img src="Gfx/overskrift_relaterede.png" style="margin-bottom:3px; width:150px; height:18px;" alt=""><br>
<span style="margin-left:0px; margin-right:2px;" class="menulinktekst">»</span><a href="Information.asp" class="link4">Mitsite.dk</a><br>
<span style="margin-left:0px; margin-right:2px;" class="menulinktekst">»</span><a href="Nyhedsbrev.asp" class="link4">Nyhedsbrev</a><br>
<span style="margin-left:0px; margin-right:2px;" class="menulinktekst">»</span><a href="Kontakt.asp" class="link4">Kontakt</a><br>
<span style="margin-left:0px; margin-right:2px;" class="menulinktekst">»</span><a href="Faq.asp" class="link4">FAQ</a>
</td>
</tr>
<tr>
<td style="height:1px; background-image:url('Gfx/hr2.png')"></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</td>

</tr>
<tr>
<td style="width:520px;">



</td>

<td style="width:180px; text-align:center; border:1px solid #CDC5B7; background-color:#EFEBE7;"></td>

</tr>
<tr>

<td style="padding-left:10px; padding-right:10px; width:520px; height:19px; border:1px solid #83919D; background-image:url('Gfx/baggrund_bundmenu.png');" class="bundtekst_f">

</td>
<td style="padding-left:10px; padding-right:10px; width:180px; height:19px; text-align:right; border:1px solid #83919D; background-image:url('Gfx/baggrund_bundmenu.png');" class="bundtekst_n">

</td>

</tr>
</table>
<div style="width:700px; height:50px;"></div>
</div>
</body>
</html>

Måske kan du samtidig give lidt kritik af HTML'en, hvis du finder nogle kritiske fejl :-)

Apo

Synes godt om

roenving Novice

09. juni 2005 - 02:05 #11

Jeg kunne altså ikke få den til at hoppe på nogensomhelst måde ...

-- men andre kommentarer kan du da godt få:

Når du er færdig med designet, så flyt alle dine styles ud i det eksterne stylesheet !o]

-- kun hvis du har brug for at tilgå en property vha. javascript, og ikke kan initialisere den forud, bør den befinde sig inline (selvom det ofte kan være nemmere at overskue design-time !-)

Din menu er i en tabel med to celler, der ville jeg nok bare smide et element til højre, og derefter includen til menuen (jeg kan ikke se om du har nogle farve-ting, som gør span'en med » nødvendig !-), men ellers i stedet for hele tabellen:

<div style="padding-left:10px; padding-right:20px; width:180px; height:20px; float:right; text-align:right;"><a href="/Oversigt.asp" class="link1">» Oversigt</a></div>
<div style="padding-left:20px; padding-right:10px; height:20px; text-align:left;"></div>

-- og så har jeg ikke gennemskuet dit måde at lave tables i tables, men ville umiddelbart gætte på, at det meste af indholdet med fordel kunne placeres som ialt to celler med bredde på 520 og 180, hvori de andre elementer kunne placeres, men det er sandsynligvis mere et spørgsmål om kodestil end egentlig forskel/fordel i kodning !o]

Synes godt om

apo Praktikant

09. juni 2005 - 19:52 #12

Det lyder mærkeligt, at det kun er mig der oplever det. Kan det være en fejl i min FF?

Godt med lidt feedback på min HTML. Så min HTML-kode fik dig ikke til at løbe skrigende bort? :-)

Hvis jeg flytter mine styles ud i eksterne stylesheets, vil det så ikke nedsætte hastighed/performance og dermed brugervenligheden, eller gælder det kun hvis man har for mange includes (ASP)?

Grunden til min <span> med » er, at » skal have samme farve som det tilhørende link. ;-) Jeg har valgt at bruge et table da jeg havde svært ved, at styre menuen med divs.

Mit hovedtable er delt op i 8 celler hvilket har et formål (Det du kalder for tables i tables). Hver celle har et særligt indhold som (Jeg har vurderet) gør sig bedst i en særskilt celle. Desuden anvender jeg cellspacing til, at skabe luft mellem cellerne (Hvilket udgør en del af designet).

Bortset fra de nævnte punkter er min HTML-kode så acceptabel? Giv gerne yderligere kritik :-)

Apo

Synes godt om

roenving Novice

11. juni 2005 - 11:14 #13

-- om en style skal hentes i en ekstern fil eller er skrevet ind i, skulle ikke betyde anden forskel, end at der skal ske eet http-kald mere til serveren, men mængden af overførte data skulle ikke ændre sig ...

-- medmindre du så opdager, at du har endnu flere elementer med (næsten) samme style, så du med fordel kan sætte en class på !-)

-- og nu har du jo allerede din css-fil, så det er jo bare et spørgsmål om, hvor der faktisk kigges ...

Jeg har selvfølgelig ikke dissekeret din html-kode fuldstændigt, men efter noget kiggen på den, synes jeg ikke den ser speciel grim ud ...

-- og kunne du ikke, som jeg viste, bare sætte den der » ind i linket ?-)

Synes godt om

apo Praktikant

11. juni 2005 - 11:36 #14

Hvad er, helt præcist, forskellen på id="" og class=""? Jeg har læst, at id="" kræver flere ressourcer.

Nu har jeg flyttet næsten alle mine styles over i det eksterne stylesheet. Stort set alle styles varierer fra hinanden, så de skal vel kaldes via id="", ikke?

Det er da godt at høre, at jeg ikke skriver skrækindjagende HTML, som da jeg brugte FrontPage ;-)

» vil jeg helst have uden for linket da jeg synes, at det ser pænere ud på den måde. Gør det den store forskel?

Apo

Synes godt om

roenving Novice

11. juni 2005 - 12:07 #15

» gør du med, som du synes !o]

Principielt er der ikke ressource-mæssig forskel på at bruge #- og .-selektorer ...

-- men da en class kan bruges på flere elementer, mens der kun må findes een af et unikt id, kan classes være en anelse hurtigere at indlæse ...

-- men i browserens DOM-træ gør det ingen forskel, for det er baseret på hvert enkelt element alligevel !-)

Og så er der forskel på 'vigtigheden' af en class- og en id-selektor:

-- for hvilken property, som bruges på et element styres af noget med vigtighed og nærhed, hvor en inline style er allervigtigst, en baseret på id næstvigtigst, derefter class, så element-type og sidst en generel (selektoren * !-)

Desuden betyder css jo Cascading Style Sheets, og derfor indgår også noget hierarkisk, så hvis der findes en style på en parent-element, vil den arves af et barn (medmindre der findes en property, som er henvendt til elementet !-)

-- og det hierarki er det også muligt at bruge i selektorer, hvor man angiver at en style skal gælde for et barn ved at sætte en mellemrum, f.eks. .menu a{}, som så kun vil gælde a-tags, hvis de forekommer inde i et element med class="menu" ...

Samtidig er det muligt at sætte flere classes på et element, så man kan nogen gange komme langt ved at kombinere sig til ting med f.eks. class="toptekst red" ...

Endvidere kan flere forskellige selektorer sættes til at dække den samme style, f.eks. .menu a,a:hover{}, som både vil dække a-tags i .menu-elementer og a-elementer udenfor, som musen er over !-)

-- og et eksempel:

.leftCell{padding-left:10px; width:520px; text-align:left;}
.rightCell{padding-right:10px; width:180px; text-align:right;}
.firstLink{margin-left:0px; margin-right:2px;}
.nextLink{margin-left:4px; margin-right:2px;}

<td class="toptekst leftCell"><span class="firstLink">»</span><a href="/Default.asp" class="link4">Forsiden</a><span class="nextLink">»</span><a href="/Faq.asp" class="link4">FAQ - Ofte stillede spørgsmål</a></td>
<td class="tekst rightCell"></td>

--og:


<td class="leftCell" style="padding-top:10px; padding-right:10px;" class="tekst">

-- og måske:

.leftCell a{} i stedet for .link4{} !-)

Synes godt om

apo Praktikant

11. juni 2005 - 12:26 #16

Jeg skal lige se om jeg har forstået det korrekt...

"Desuden betyder css jo Cascading Style Sheets, og derfor indgår også noget hierarkisk, så hvis der findes en style på en parent-element, vil den arves af et barn (medmindre der findes en property, som er henvendt til elementet !-)"

Så hvis man f.eks. har en struktur som følgende:

<style>
.1 {
text-align:left;
}
</style>

<div class="1">
<div style="text-align:right;">Test1</div>
<div>Test2</div>
</div>

Vil ovenstående tekst 'Test1' blive højrestillet mens 'Test2' vil blive venstrestillet?

"Samtidig er det muligt at sætte flere classes på et element, så man kan nogen gange komme langt ved at kombinere sig til ting med f.eks. class="toptekst red" ..."

<style>
.1 {
text-align:left;
}
.red {
color:red;
}
</style>

<div class="1 red">
<div style="text-align:right;color:blue;">Test1</div>
<div>Test2</div>
</div>

Her vil 'Test1' blive højrestillet, og i blå farve, mens 'Test2' vil være venstrestillet, og i rød farve. Korrekt?

Apo

Synes godt om

roenving Novice

11. juni 2005 - 12:36 #17

Jepz til begge !o]

-- men undlad at bruge tal som første karakter i nogensomhelst identifier, da det er at lægge op til problemer, da det i mange sammenhænge ikke er tilladt !-)

-- og du kan f.eks. kigge her:

http://www.w3.org/TR/html401/struct/global.html#h-7.5.2

og her (se også hele dokumentet, men vær opmærksom på, at IE ikke understøtter en del af mulighederne, f.eks. child-selektoren > og attribute-selektorer !-)

http://www.w3.org/TR/REC-CSS2/selector.html#class-html

PS. Lad være med at spare de få tastetryk og skriv et korrekt style-tag hver gang !o]

<style type="text/css">

Synes godt om

apo Praktikant

11. juni 2005 - 14:11 #18

Så er jeg (igen) blevet så meget klogere :-)

Jeg tror (For at vende tilbage til mit hovedspørgsmål), at jeg har lokaliseret problemet med mine hr-divs... I mine includes (ASP) indsætter jeg noget HTML (Tables/divs med borders, padding, margin osv.) som formentlig modarbejder hovedtabellens oprindelige dimensioner, og skaber en form for konflikt. Jeg gætter på, at det ordner sig når jeg får rettet det.

Du skal have mange tak for din tid og hjælp. Jeg er igen blevet en del klogere på HTML/CSS, så jeg laver lige en point-fordobling som tak ;-)

Smid et svar, så er der points...

Apo

Synes godt om

roenving Novice

11. juni 2005 - 14:17 #19

-- ja, det kunne jo være et problem, som jeg ikke ville se !-)

Velbekomme '-)

Synes godt om

apo Praktikant

11. juni 2005 - 14:33 #20

Jeg tror, problemet ligger der. Endnu en gang tak for hjælpen :-)

// Lukker

Apo

Synes godt om

roenving Novice

11. juni 2005 - 14:41 #21

Tak for point ;~}

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