CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

ngr Praktikant

24. maj 2010 - 23:57 Der er 9 kommentarer og
1 løsning

Webwriter: Billedet i den eksterne og i den interne browser er vidt forskellige

En html side med anvendelse af css ser vidt forskellig ud i hhv. den interne og den eksterne browser.
Hvad skal man så regne med?

Synes godt om

olebole Juniormester

25. maj 2010 - 13:14 #1

<ole>

Det siger vel sig selv, at du skal regne med det program, alle andre skal se siden med ... eller ...? =)

Er koden valid?

/mvh
</bole>

Synes godt om

ngr Praktikant

25. maj 2010 - 18:43 #2

Synes godt om

ngr Praktikant

25. maj 2010 - 18:46 #3

tror jeg

Synes godt om

olebole Juniormester

25. maj 2010 - 19:07 #4

Prøv at lægge et link til siden, så man kan se koden - og evt. til to billeder af, hvad du ser i Webwriter og browser

Synes godt om

olebole Juniormester

25. maj 2010 - 19:08 #5

- og koden kan du validere her:
http://validator.w3.org/

Synes godt om

ngr Praktikant

25. maj 2010 - 20:09 #6

Kan ikke lægge den på nettet nu.
Har fået en til at lave den for mig, og begynder selv at forstå en lillebitte smule af, hvad der foregår.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta name="Generator" content="Stone's WebWriter 4">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Title</title> <style type="text/css">

body{
margin:0;
padding:0;
line-height: 1.5em;
}

b{font-size: 110%;}
em{color: red;}

#maincontainer{
background-repeat:repeat-y;
width: 900px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/ border:solid #333333 1px; }

#topsection{
background-color: #000000;

height: 90px; /*Height of top section*/ }

#topsection h1{
margin: 0;
padding-top: 15px;
}

#contentwrapper{
background-repeat:repeat-y;
float: left;
width: 100%;
}

#contentcolumn{
background-color:#FFFFFF;
margin: 0 5px 0 200px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/ height:400px;
overflow: auto;
}

#leftcolumn{
background-color:#000000;
float: left;
width: 200px; /*Width of left column in pixel*/
margin-left: -900px; /*Set margin to that of -(MainContainerWidth)*/ height:400px;
}

#rightcolumn{
background-color:#FFFFFF;
float: left;
width: 5px; /*Width of right column*/
margin-left: -5px; /*Set left margin to -(RightColumnWidth)*/ height:400px; }

#footer{
height: 100px; /*Height of top footer section*/
clear: left;
width: 100%;
background: black;
color: #FFFFFF;
text-align: center;
padding: 4px 0;
background: red;

}

#footer a{
color: #FFFF80;
}

.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 20px;
}

h1 {
font: 16px arial, sans-serif;
color: yellow;
line-height: 22px;
text-align: center;
}

h2 {
font: 16px comic sans MS;
color: #00198d;
text-align: left;
}

</style>

</head>
<body>
<div id="maincontainer">

<div id="topsection"><div class="innertube">
<H1>
H1 tekst
</H1>
</div></div>

<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube">

<H2>Tekst i H2</H2>
aa

</div> </div> </div>

<div id="leftcolumn">
<div class="innertube">venstre kolone</div>
venstre kolonne<br><br><br><br>
venstre kolonne<br><br><br><br>

</div>

<div id="rightcolumn">
<div class="innertube">



</div> </div>

<div id="footer">Footer</div>

</div>
</body>
</html>

Synes godt om

olebole Juniormester

25. maj 2010 - 21:29 #7

Det undrer mig lidt, du ikke har valideret koden. Der er 25 HTML-fejl og en CSS-fejl. Nogle af dem alvorlige. Derudover er der lidt uhensigtsmæssig kode i CSS-koden til din innertube klasse. Prøv denne kode i stedet:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<meta name="Generator" content="Stone's WebWriter 4" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Title</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
line-height: 1.5em;
}
b{font-size: 110%;}
em{color: red;}
#maincontainer{
background-repeat:repeat-y;
width: 900px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
border: solid #333333 1px;
}

#topsection{
background-color: #000000;
/* background-image:url(top.jpg);
background-repeat:repeat-y; */
height: 90px; /*Height of top section*/
}
#topsection h1{
margin: 0;
padding-top: 15px;
}

#contentwrapper{
background-repeat: repeat-y;
float: left;
width: 100%;
}

#contentcolumn{
background-color: #FFFFFF;
margin: 0 5px 0 200px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
height: 400px;
overflow: auto;
}

#leftcolumn{
background-color: #000000;
float: left;
width: 200px; /*Width of left column in pixel*/
margin-left: -900px; /*Set margin to that of -(MainContainerWidth)*/
height: 400px;
}

#rightcolumn{
background-color: #FFFFFF;
float: left;
width: 5px; /*Width of right column*/
margin-left: -5px; /*Set left margin to -(RightColumnWidth)*/
height: 400px;
}

#footer{
height: 100px; /*Height of top footer section*/
clear: left;
width: 100%;
background: black;
color: #FFFFFF;
text-align: center;
padding: 4px 0;
background: red;
}
#footer a{
color: #FFFF80;
}
.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
padding-top: 20px;
}
h1 {
font: 16px arial, sans-serif;
color: yellow;
line-height: 22px;
text-align: center;
}
h2 {
font: 16px "comic sans MS";
color: #00198d;
text-align: left;
}
</style>
</head>
<body>

<div id="maincontainer">
<div id="topsection">
<div class="innertube">
<h1>H1 tekst</h1>
</div>
</div>

<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube">
<h2>Tekst i H2</h2>
aa
</div>
</div>
</div>

<div id="leftcolumn">
<div class="innertube">venstre kolone</div>
venstre kolonne<br /><br /><br /><br />
venstre kolonne<br /><br /><br /><br />
</div>

<div id="rightcolumn">
<div class="innertube">

</div>
</div>

<div id="footer">Footer</div>
</div>

</body>
</html>

Jeg tager ikke stilling til kodens opbygning. Jeg har udelukkende ryddet op i den, så den vises nogenlunde ens i forskellige browsere - og stillet den lidt mere overskueligt op.

Synes godt om

olebole Juniormester

25. maj 2010 - 21:36 #8

- og da W3C har opgivet at videreføre XHTML standarden, som vi kender den, kan du ligeså godt skrive den i HTML 4.01:

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

<head>
<meta name="Generator" content="Stone's WebWriter 4">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Title</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
line-height: 1.5em;
}
b{font-size: 110%;}
em{color: red;}
#maincontainer{
background-repeat:repeat-y;
width: 900px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
border: solid #333333 1px;
}

#topsection{
background-color: #000000;
/* background-image:url(top.jpg);
background-repeat:repeat-y; */
height: 90px; /*Height of top section*/
}
#topsection h1{
margin: 0;
padding-top: 15px;
}

#contentwrapper{
background-repeat: repeat-y;
float: left;
width: 100%;
}

#contentcolumn{
background-color: #FFFFFF;
margin: 0 5px 0 200px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
height: 400px;
overflow: auto;
}

#leftcolumn{
background-color: #000000;
float: left;
width: 200px; /*Width of left column in pixel*/
margin-left: -900px; /*Set margin to that of -(MainContainerWidth)*/
height: 400px;
}

#rightcolumn{
background-color: #FFFFFF;
float: left;
width: 5px; /*Width of right column*/
margin-left: -5px; /*Set left margin to -(RightColumnWidth)*/
height: 400px;
}

#footer{
height: 100px; /*Height of top footer section*/
clear: left;
width: 100%;
background: black;
color: #FFFFFF;
text-align: center;
padding: 4px 0;
background: red;
}
#footer a{
color: #FFFF80;
}
.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
padding-top: 20px;
}
h1 {
font: 16px arial, sans-serif;
color: yellow;
line-height: 22px;
text-align: center;
}
h2 {
font: 16px "comic sans MS";
color: #00198d;
text-align: left;
}
</style>
</head>
<body>

<div id="maincontainer">
<div id="topsection">
<div class="innertube">
<h1>H1 tekst</h1>
</div>
</div>

<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube">
<h2>Tekst i H2</h2>
aa
</div>
</div>
</div>

<div id="leftcolumn">
<div class="innertube">venstre kolone</div>
venstre kolonne<br><br><br><br>
venstre kolonne<br><br><br><br>
</div>

<div id="rightcolumn">
<div class="innertube">

</div>
</div>

<div id="footer">Footer</div>
</div>

</body>
</html>

- og så ville jeg helt klart vælge utf-8 som tegnsæt i stedet:

Det kræver dog, at du gemmer dine filer som utf-8. Du kan evt. tjekke hvilket tegnsæt, filen er gemt med ved at åbne den i Notepad. Vælg så Save as..., hvor tegnsættet kan ses/vælges forneden i dialogen.

Bruger du database, skal du også sørge for, at den kører utf-8. Så er du til gengæld kompatibel med resten af verden og moderne webteknologier ;o)

Synes godt om

ngr Praktikant

25. maj 2010 - 21:50 #9

Hej Olebole
1000 tak skal du have. Jeg validerede den også, da jeg så dit link, men anede ikke, hvad jeg skulle stille op med alle fejlene. Som sagt har jeg ikke selv lavet den - men håber på at kunne blive klogere på css ved at lege med den (filen, altså).
Jeg bruger webwriter, men kan ikke umiddelbart se, at man kan vælge at gemme som utf-8 eller noget, der ligner.
Mvh

Synes godt om

ngr Praktikant

20. december 2010 - 00:19 #10

nkn,nk,n

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

Programmeringssprog kurser

Kurser inden for grundlæggende programmering

Se alle Programmeringssprog kurser

Flere spørgsmål fra Programmeringsværktøjer kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
senior Af Uroda i Programmeringsværktøjer	1	22/06/202418:29	23/06/202413:17
Sort Skærm Af Kaj Sondrup i Programmeringsværktøjer	5	25/02/202421:45	27/02/202420:17
DATA (D) Af rene1111 i Programmeringsværktøjer	3	21/02/202415:03	22/02/202409:08
Power Automate, åben en fil der er delt med mig Af KATM i Programmeringsværktøjer	1	16/02/202409:07	19/02/202409:10
Prisberegner til hjemmeside Af Michael Vahl i Programmeringsværktøjer	4	14/01/202417:30	21/01/202409:21

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