/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
xml validering og design!
Fra : Daniel Valentin


Dato : 30-10-04 08:21

Hej allesammen!

Jeg er stille og roligt ved at bygge siden www.marival.dk op i
asp/xml!
Den er bygget således op:

<div class="header">&nbsp;</div><-- Header
<div style="height:100%;"> <-- Container omkring menu+indhold
<span class="menu">&nbsp;</span> <-- Flyder venstre
<span class="content">&nbsp;</span>
</div>

Jeg har pakket menu+indhold ind i en div fordi så følger menuens
længde indholdets, med height:100%; (Ihvertfald i IE).

Men så kommer problemerne:
1. I Mozilla følger menuen ikke indholdets længde. Når menuen
stopper ryger indholdet helt hen til venstre på siden
2. Den vil ikke validere! Jeg må hverken have <p> eller <form> i
mit content span. Hvorfor ikke? valideringsresultaterne kan ses
her:
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.marival.dk%2Fi
ndex.asp%3Fcat%3Dbukser

Det var alt jeg kunne komme i tanke om indtil videre! :]
Jeg håber i har tid til at hjælpe mig!
-Daniel Valentin

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

 
 
Claus Jacobsen (30-10-2004)
Kommentar
Fra : Claus Jacobsen


Dato : 30-10-04 09:06

Daniel Valentin wrote:
> Hej allesammen!
>
> Jeg er stille og roligt ved at bygge siden www.marival.dk op i
> asp/xml!
> Den er bygget således op:
>
> <div class="header">&nbsp;</div><-- Header
> <div style="height:100%;"> <-- Container omkring menu+indhold
> <span class="menu">&nbsp;</span> <-- Flyder venstre
> <span class="content">&nbsp;</span>
> </div>
>
> Jeg har pakket menu+indhold ind i en div fordi så følger menuens
> længde indholdets, med height:100%; (Ihvertfald i IE).
>
> Men så kommer problemerne:
> 1. I Mozilla følger menuen ikke indholdets længde. Når menuen
> stopper ryger indholdet helt hen til venstre på siden

Du har et inlineelement floatet left! det svarer i Word til at du blot
indsætter et billede og lader teksten flydde om det! Det du skal gøre,
er at lave en margin-left på dit indhold! (eller padding) og så giv det
et baggrundsbillede med den mørkere røde i venstre side. Det er et lille
workaround for geckos manglende understøttelse af height:100% Det
behøver blot være 1 px høj og i virkeligheden også kun i menuens længde.
Sæt så baggrunden som background: #din lyserøde farve url("billedet")
repeat-y 0 0;
> 2. Den vil ikke validere! Jeg må hverken have <p> eller <form> i
> mit content span. Hvorfor ikke? valideringsresultaterne kan ses
> her:
> http://validator.w3.org/check?uri=http%3A%2F%2Fwww.marival.dk%2Fi
> ndex.asp%3Fcat%3Dbukser
>
Hvorfor som xml og strict? så snart <xml ver.... kommer ind bliver IE
sat i quirksmode og du får en hulens masse problemer, du bliver også
nødt til at angive mimetype som application/xml for at det virker
nogenlunde korrekt. Nej brug transitional og lav det så strict som du
kan. Når browsere understøtter xhtml bedre så kan du blot ændre det
tilbage! når du bruger strict og vil have xml-struktur, så er css
forkert! alt indhold i <style>.....</style> skal indsættes i cdata
format (altså der skal være cdata om alt indholdet ikke omkring selve
taggene!) CSS på den måde er ikke konform xml struktur! Din tabel er
ulovlig fordi du har cellpadding og spacing som ikke er i style! (i css
skriver du: table { padding:0; margin:0; border:0;} så er den klaret!
Jeg ville nok også tage at smide al indhold i en div og give det en ID.
Det er mere korrekt! (i stedet for et span!!)

> Det var alt jeg kunne komme i tanke om indtil videre! :]
> Jeg håber i har tid til at hjælpe mig!
> -Daniel Valentin
>

Prøv at fixe lidt af det her og leg lidt med position relative på en
#side div som eventuelt er centreret. når du så skriver position
relative i andre elementer vil de være det i forhold til din overordnede
#side.

Nå der er vist lidt stof til eftertanke, write back :)

Claus

Stig Nygaard (30-10-2004)
Kommentar
Fra : Stig Nygaard


Dato : 30-10-04 09:46

Hej Daniel


Daniel Valentin wrote:

> <div class="header">&nbsp;</div><-- Header
> <div style="height:100%;"> <-- Container omkring menu+indhold
> <span class="menu">&nbsp;</span> <-- Flyder venstre
> <span class="content">&nbsp;</span>
> </div>

> 2. Den vil ikke validere! Jeg må hverken have <p> eller <form> i
> mit content span. Hvorfor ikke?

span er et inline element. Du må ikke have blok-elementer som p og form
inde i et inline-element. Så lav din menu- og content-dele om til
div'er. Det ville nok også være mere logisk at bruge et id end class på
dem, da jeg ikike går ud fra at du vil flere af dem på én side?

<div id="header">&nbsp;</div><-- Header
<div style="height:100%;"> <-- Container omkring menu+indhold
<div id="menu">&nbsp;</div> <-- Flyder venstre
<div id="content">&nbsp;</span>
</div>

Husk så at du i CSS referer et id med "havelåge" foran i stedet for
punktum som du bruger til klasser.

Du får iøvrigt nok også et problem med din height på 100% medmindre du
også sætter den højde på html og body-elementerne.


Mvh. Stig
www.rockland.dk

Daniel Valentin (30-10-2004)
Kommentar
Fra : Daniel Valentin


Dato : 30-10-04 13:05

Mange tak for hjælpen hertil!

> span er et inline element. Du må ikke have blok-elementer som p og
> form
> inde i et inline-element. Så lav din menu- og content-dele om til
> div'er. Det ville nok også være mere logisk at bruge et id end class på
> dem, da jeg ikike går ud fra at du vil flere af dem på én side?
Du har helt ret! Det er blevet fixet.
> Du får iøvrigt nok også et problem med din height på 100% medmindre du
> også sætter den højde på html og body-elementerne.
Ordnet!

xml er sat til transitional! Det gode er at den validerer nu, og det ser
pænt ud.
Jeg havde menuen og indholdet inde i en container fordi jeg tænkte det var
en nem måde at sætte en eventuel footer på, og at få menuen til at følge
indholdet. Footeren er ikke nødvendig lige nu, så jeg har kasseret den ide.
Siden ser nu sådan ud:
<div id="header">&nbsp;</div>
<div id="menu">&nbsp;</div> <-- Flyder venstre
<div id="content">&nbsp;</div>

Height:100%; er sat på html og body!
Baggrundsbilledet på indholds div'en virkede ikke. Jeg satte margin på, og
teksten står pænt nu, men baggrundsbilledet står ikke hvor det skal, det
starter inde i indholdsdiven. Jeg ved ikke om det er fordi løsningen er en
anden nu!?

-Daniel Valentin

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Erik Ginnerskov (30-10-2004)
Kommentar
Fra : Erik Ginnerskov


Dato : 30-10-04 14:13

Daniel Valentin wrote:

> Siden ser nu sådan ud:
> <div id="header">&nbsp;</div>
> <div id="menu">&nbsp;</div> <-- Flyder venstre
> <div id="content">&nbsp;</div>

Dit problem med, at menuens mørkerøde farve ikke fortsætter til sidens bund,
hvis #indhold er længere end menuen, løser du let og enkelt sådan:

Du lavr en bg.gif 1 px høj og med menuens bredde og farve. Derefter
indsætter du den som baggrund på siden sådan:

body {
background-image:url(bg.gif) top left repeat-y;
}

Du skal så bare sørge for, at topbaren kan dække det øverste af
bagrundsgiffen. Efterfølgende behøver du ikke spekulere på noget med height
på body eller menu. Det regulerer sig selv helt automatisk.

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://html-faq.dk
http://ginnerskov.frac.dk



Daniel Valentin (30-10-2004)
Kommentar
Fra : Daniel Valentin


Dato : 30-10-04 14:33


> Du lavr en bg.gif 1 px høj og med menuens bredde og farve. Derefter
> indsætter du den som baggrund på siden sådan:
>
> body {
> background-image:url(bg.gif) top left repeat-y;
> }
>
> Du skal så bare sørge for, at topbaren kan dække det øverste af
> bagrundsgiffen. Efterfølgende behøver du ikke spekulere på noget med height
> på body eller menu. Det regulerer sig selv helt automatisk.
Selvfølgelig! Mange tak!!

Der er bare det sære, at FF ikke vil lade mig sætte margin-top:0px;! Der bliver
ved med at være en 10px margin i toppen hvor baggrunden vises!
Mit css:
body{
height:100%;
background:#ffd1e2 url(contentbg.gif) repeat-y 0 0;
color:#b51b67;
font-family:verdana, arial, sans serif;
font-size:12px;
margin:0px;
margin-left:10px;
}

-Daniel Valentin

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Erik Ginnerskov (30-10-2004)
Kommentar
Fra : Erik Ginnerskov


Dato : 30-10-04 14:39

Daniel Valentin wrote:

>> body {
>> background-image:url(bg.gif) top left repeat-y;
>> }
>
> Der er bare det sære, at FF ikke vil lade mig sætte margin-top:0px;!
> Der bliver ved med at være en 10px margin i toppen hvor baggrunden
> vises!

Nogle browser vil have margin-top:0;, andre vil have padding-top:0; - så sæt
begge definitioner for at få alle med.

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://html-faq.dk
http://ginnerskov.frac.dk



Daniel Valentin (30-10-2004)
Kommentar
Fra : Daniel Valentin


Dato : 30-10-04 14:46

> Nogle browser vil have margin-top:0;, andre vil have padding-top:0; - så sæt
> begge definitioner for at få alle med.
Det har jeg! Samme problem..


--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Erik Ginnerskov (30-10-2004)
Kommentar
Fra : Erik Ginnerskov


Dato : 30-10-04 14:53

Daniel Valentin wrote:
>> Nogle browser vil have margin-top:0;, andre vil have padding-top:0;
>> - så sæt begge definitioner for at få alle med.
> Det har jeg! Samme problem..

Nej, du har sat det på #header. Flyt definitionerne til body.

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://html-faq.dk
http://ginnerskov.frac.dk



Daniel Valentin (30-10-2004)
Kommentar
Fra : Daniel Valentin


Dato : 30-10-04 14:58

> Nej, du har sat det på #header. Flyt definitionerne til body.
Måske har jeg siddet her alt for længe og overser noget åbenlyst :)
Men..
body{
height:100%;
background:#ffd1e2 url(contentbg.gif) repeat-y 0 0;
color:#b51b67;
font-family:verdana, arial, sans serif;
font-size:12px;
margin-top:0px;
padding-top:0px;
padding-bottom:0px;
margin-left:10px;
margin-bottom:0px;
}
#header{
background-image:url('titleimg2.gif');
background-repeat:no-repeat;
height:100px;
width:700px;
text-align:right;
margin-top:0px;
padding-top:0px;
}

Jeg har sat det begge steder! Nogle forslag...?

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Erik Ginnerskov (30-10-2004)
Kommentar
Fra : Erik Ginnerskov


Dato : 30-10-04 15:20

Daniel Valentin wrote:
>> Nej, du har sat det på #header. Flyt definitionerne til body.
> Måske har jeg siddet her alt for længe og overser noget åbenlyst :)

> Jeg har sat det begge steder! Nogle forslag...?

Tag et kig på http://hjemmesideskolen.dk/hss.css

og se, at det kan lade sig gøre at få topbaren helt op i venstre hjørne:

http://hjemmesideskolen.dk/

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://html-faq.dk
http://ginnerskov.frac.dk



Søg
Reklame
Statistik
Spørgsmål : 177560
Tips : 31968
Nyheder : 719565
Indlæg : 6408946
Brugere : 218888

Månedens bedste
Årets bedste
Sidste års bedste