[Løst]Store problemer angående layout i DW vs Firefox

[Erelend]

Hei. Jeg holder på med en nettside for elevbedriften min men har støtt på en del problemer når det gjelder layouten.

 

i grove trekk skal menyen se slik ut og det er slik den ser ut i DW.

 

 

en tabell med bakrunnsbilder og en klikkbar link.

 

men når jeg skal over i FF så ser den slik ut

 

 

her er css og html

 

<table cellpadding="0" cellspacing="0">
<tr>
<td width="11" class="menustart"></td>
<td width="172" class="activebutton"><h3><a href="index.html">Hovedside</a></h3></td>
<td width="172" class="button"><h3><a href="galleri.html">Galleri</a></h3></td>
<td width="172" class="button"><h3><a href="tjenester.html">Tjenester</a></h3></td>
<td width="172" class="button"><h3><a href="Kontaktoss.html">Kontakt oss</a></h3></td>
<td width="75" class="menuspacer"></td>
<td class="menuend"></td>
</tr>
</table>

 

.menustart {
background-image: url(images/layout_07.jpg);
width: 11px;
height: 36px;
}
.activebutton {
background-image: url(images/layout_08.jpg);
height: 36px;
width: 172px;
}
.activebutton a {
position: relative;
top: 15px;
text-align: center;
}


.button {
background-image: url(images/layout_09.jpg);
height: 36px;
width: 172px;
}
.button a {
top: 15px;
position: relative;
text-align: center;
}

.menuend {
background-image: url(images/layout_12.jpg);
height: 36px;
width: 20px;
}

 

dette er og problemet med selve layouten til siden

 

slik ser den ut i DW

 

og slik ser det ut i FF

 

 

igjen html og css

 

<table cellspacing="0" cellpadding="0">
<tr>
   	<td class="topl"></td>
       <td class="topm"></td>
       <td class="topr"></td>
</tr>
   <tr>
   	<td class="middlel" height="300"></td>
   	<td class="middlem"><h1>Lorem ipshum ahmed</h1></td>
   	<td class="middler"></td>
   </tr>
   <tr>
   	<td class="bottoml"></td>
   	<td class="bottomm"></td>
   	<td class="bottomr"></td>
   </tr>

</table>

 

.topl {
background-image: url(images/images/mainsclice_03.jpg);
height: 40px;
width: 40px;
display: block;
}
.topm {
background-image: url(images/images/mainsclice_04.jpg);
display: block;
width: 735px;
height: 40px;
}
.topr {
background-image: url(images/images/mainsclice_06.jpg);
width: 40px;
display: block;
height: 40px;
}
.middlel {
background-image: url(images/images/mainsclice_08.jpg);
height: auto;
width: 40px;
}
.middlem {
background-color: #629AD3;
margin: 10px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
vertical-align: top;
}
.middler {
background-image: url(images/images/mainsclice_10.jpg);
}
.bottoml {
background-image: url(images/images/mainsclice_10-13.jpg);
height: 40px;
}
.bottomm {
background-image: url(images/images/mainsclice_14.jpg);
}
.bottomr {
background-image: url(images/images/mainsclice_15.jpg);
}

 

Ja jeg er klar over den ekstremt uryddige kodingen, men jeg har ikke så veldig lang erfaring med html og CSS og det er en del ting som er relativt uklare for meg enda.

 

Hadde satt veldig stor pris på å få vite hva jeg gjør feil og litt hjelp med akkuratt dette problemet.

 

Mvh. Erlend

[ButterScotch]

Når det gjelder menyen, så må h3 ha styling. Hvis den ikke har det, så har den padding og/eller margin som default som vil gjøre hele greia høyere enn det er plass til i menyen.

 

Løsning kan da være:

td h3 {

padding: 0;

margin: 0;

}

 

(Ville satt en klasse på meny-tabellen for å kunne fokusere på den, eller du kan gjøre det på både .button h3 og .activebutton h3).

 

Hvis du har styling på h3, så må jeg fundere litt mer.

 

EDIT: Sjekk at du har en DOCTYPE øverst som stemmer, ellers kan du få masse rare resultater.

Endret 5. februar 2009 av jorgenys

[Erelend]

Ah selvfølgelig! Forbaskede default greier. Fungerte på menyen så nå er den i boks. Tusen takk!

 

Jeg ser selv på det andre eksempelet mitt at jeg har gjort det ganske tungvindt.

Er det noen måte jeg kan plassere de bildene som en ramme rundt hovedteksten uten å ty til de hauger med tables jeg har satt opp?

Mvh Erlend

[ButterScotch]

Hvis du vil gjøre det enkelt for deg selv, så gi opp avrundede hjørner og bruk border-styles i css.

 

Tror det er noen browsere som støtter avrundede hjørner via css også, og det finnes js-libs som gjør hele greia for deg.

 

Dermed kan du bare ha en div rundt innholdet og definere utseende på den.

[Erelend]

Nei designet blir som det er. jeg fant ut av hva de rare resultatene på hoveddelen skyltes. jeg hadde satt display: block i cssen for en liten stund tilbake og glemt å fjerne det igjen. Tusen takk for all hjelp Vet jeg alltid kan regne med diskusjon.no!

[maglame]

Denne metoden er ganske stygg, men akkurat nå bruker du tabeller så det er vel en forbedring: link!

[ButterScotch]

Syns ikke den var veldig stygg (har sett mye verre), men problemet er at det ikke er dynamisk i forhold til bredden, som selvsagt ikke er et problem så lenge du aldri vil forandre på den.

[Erelend]

Takk for rådene, men jeg tror jeg holder meg til tabell metoden her, selv om jeg vet om ulempene ved det. Det står vel mest på tid så jeg vil helst ha siden oppe så raskt som mulig, så orker ikke gjøre store endringer nå. Men uansett tusen takk for hjelpen!

[FrodeNilsen]

Når det gjelder menyen, så må h3 ha styling.

...

 

Problemet er ikke at h3 ikke har styling, men at h3 her ikke markerer en overskrift.

 

Frode

Endret 7. februar 2009 av FrodeNilsen

[ButterScotch]

Når det gjelder menyen, så må h3 ha styling.

...

 

Problemet er ikke at h3 ikke har styling, men at h3 her ikke markerer en overskrift.

 

Frode

 

Bare semantisk sett, ikke teknisk...

[FrodeNilsen]

Tullball.

 

Ett semantisk nøytralt element som div eller span gir mindre tekniske utfordringer. Du slipper rotete formatering i CSS og får en vesentlig mer søkemotor vennlig kode.

 

Det er også teknisk vanskelig å tolke en kode som roter med hvordan overskrifter markeres. Det er vanskeligere å tolke koden for blinde, samt teknisk vanskeligere å implementere løsninger for å formidle struktur til blinde.

 

HTML semantikk er teknikk. Det er en teknikk for å strukturere informasjon. HTML har en langt på vei universell struktur, som faktisk er en del av informasjonen. Hvis strukturen fjernes eller brytes, så forsvinner vesentlig informasjon. Det er enormt teknisk krevende å hente ut informasjon fra tulle-html.

 

Det er en grund for at XML ikke har fortrengt HTML, og det er den universelle HTML strukturen, og de tekniske fordelene denne gir. De informasjons-strukturelle tekniske fordelene. Det er også derfor flash har tapt kampen med HTML som informasjonsformidler.

 

Frode

[ButterScotch]

Tullball.

 

Ett semantisk nøytralt element som div eller span gir mindre tekniske utfordringer. Du slipper rotete formatering i CSS og får en vesentlig mer søkemotor vennlig kode.

Søkemotorvennlig kode har jo med semantikk å gjøre.

 

De fleste bruker eller anbefaler reset style sheets for å unngå browser-spesifikk styling uansett, så at div og span gir mindre tekniske utfordringer er jeg uenig i.

 

Det er også teknisk vanskelig å tolke en kode som roter med hvordan overskrifter markeres. Det er vanskeligere å tolke koden for blinde, samt teknisk vanskeligere å implementere løsninger for å formidle struktur til blinde.

Dette har igjen med semantikk å gjøre. Betydningen blir annerledes for elementene og blir selvsagt derfor feil i disse tilpassede miljøene. I så hensyn ville jeg droppet div og span-bruken helt og brukt ul og li for menyen. Det gir semantisk fornuft og er mer tilgjengelig.

 

HTML semantikk er teknikk. Det er en teknikk for å strukturere informasjon. HTML har en langt på vei universell struktur, som faktisk er en del av informasjonen. Hvis strukturen fjernes eller brytes, så forsvinner vesentlig informasjon. Det er enormt teknisk krevende å hente ut informasjon fra tulle-html.

Å hente ut og strukturere informasjon er jo igjen relatert til semantikken. Browseren er jo lagd allerede for å tolke all mulig slags tullball, så du øker ikke akkurat den tekniske utfordringen for utviklerne eller hva du måtte henvise til.

 

Det er en grund for at XML ikke har fortrengt HTML, og det er den universelle HTML strukturen, og de tekniske fordelene denne gir. De informasjons-strukturelle tekniske fordelene. Det er også derfor flash har tapt kampen med HTML som informasjonsformidler.

 

Frode

Nå har vel XHTML tatt over blant de fleste seriøse, som i bunn og grunn er XML. Betydningen av tagger defineres jo ikke i XML, så jeg skjønner ikke helt argumentet ditt. Ikke at jeg skjønner hva XML har med saken å gjøre uansett.

 

Holder fortsatt fast på at det er semantisk feil å bruke h3 i tilfellet, og ikke teknisk feil.

[FrodeNilsen]

I dette tilfellet så ble informasjon markert som en overskrift, uten å være det. Jeg mener at dette er feil bruk av overskrifts elementet, og har derfor sett på dette som en symantisk feil. Jeg mener at den universelle strukturen er kjernen i html symantikken.

 

Det kommer heller ikke som noen overraskelse at noen mener at XHTML har tatt over for HTML. Problemet er at hvis XHTML ble benyttet som XML, så må koden validere. Det som er situasjonen, er at mange benytter kvasi XML syntax, på noe som egentlig er HTML. Derfor får vi HTML5 og ikke XHTML2.

 

Situasjonen er ikke den at XML tar over, men at XML taper. Heldigvis så vil det finnes XHTML5, men sett utifra dagens kaos, og dagens CMS systemer, så er det html som gjelder. Til og med fri struktur taper for universell struktur.

 

Frode

[ButterScotch]

I dette tilfellet så ble informasjon markert som en overskrift, uten å være det. Jeg mener at dette er feil bruk av overskrifts elementet, og har derfor sett på dette som en symantisk feil. Jeg mener at den universelle strukturen er kjernen i html symantikken.

Helt enig. Du er derimot ikke helt enig med deg selv i ditt forrige innlegg...

 

Det kommer heller ikke som noen overraskelse at noen mener at XHTML har tatt over for HTML. Problemet er at hvis XHTML ble benyttet som XML, så må koden validere. Det som er situasjonen, er at mange benytter kvasi XML syntax, på noe som egentlig er HTML. Derfor får vi HTML5 og ikke XHTML2.

Det at koden må validere, er jo hele fordelen med XHTML etter min mening. At folk bruker ting feil har alltid vært et problem, som man ser utspilt i all sin prakt med IE sine rariteter. Dette gjelder på ingen måte bare XHTML.

 

Situasjonen er ikke den at XML tar over, men at XML taper. Heldigvis så vil det finnes XHTML5, men sett utifra dagens kaos, og dagens CMS systemer, så er det html som gjelder. Til og med fri struktur taper for universell struktur.

 

Frode

Dagens CMS-systemer er noe av det dummeste å se på hvis man skal se hva som er gode måter å gjøre ting på. De fleste systemer av litt størrelse har håpløs struktur både i HTML-koden sin og i PHP-koden (eller hvilket språk det måtte være). Det kan jo være en effekt av at altfor mange folk jobber med det, og legger inn sine egne dårlige vaner i samme slengen.

 

CMS-systemer har også den ulempen at brukerne skal kunne generere innhold, som gjerne gjør det mye vanskeligere å forvente at de skal følge en strict standard som XHTML.

[ButterScotch]

Bør kanskje også nevne at XML har tatt fullstendig over i mange andre sammenhenger, spesielt når det gjelder deling av data (alle åpne API'er jeg kommer på bruker XML, som facebook, ebay, yr, for ikke å nevne RSS).

 

Så du bør referere til XHTML og ikke XML når du snakker om web-sider...

[FrodeNilsen]

...

Så du bør referere til XHTML og ikke XML når du snakker om web-sider...

 

Nei.

 

XML benyttes som API til informasjonsutveksling. Det passer glimrende til det. Det er det du referer til. Det vel kun RSS feeds som leses direkte i nettlesere, og dette har svært begrenset utbredelse. XML er primært ett språk som benyttes til informasjons utveksling. Det begynner også å få fotfeste som dokument format, ala odf.

 

Websider er ment for å leses i en nettleser, og der er det html som gjelder.

 

XHTML er en XML variant. XHTML er XML. Å omtale XHTML som XML er helt korrekt. Jeg har omtalt hovedgrunnene til at XML ikke egner seg for websider. Ikke med dagens webdesignere og defacto praksis.

 

HTML er SGML. Det passer til defacto praksis.

 

Og nei, jeg er ikke uenig med meg selv. Jeg ser ingen selvmotsigelser overhodet i det jeg har skrevet. Jeg ser derimot at du ikke forstår hva jeg skriver, men det er noe helt annet.

 

Frode

[ButterScotch]

Når det gjelder menyen, så må h3 ha styling.

...

 

Problemet er ikke at h3 ikke har styling, men at h3 her ikke markerer en overskrift.

 

Frode

 

Bare semantisk sett, ikke teknisk...

 

 

Tullball.

 

Frode

 

 

I dette tilfellet så ble informasjon markert som en overskrift, uten å være det. Jeg mener at dette er feil bruk av overskrifts elementet, og har derfor sett på dette som en symantisk feil. Jeg mener at den universelle strukturen er kjernen i html symantikken.

 

Jeg sier det er semantisk feil, og ikke teknisk. Du sier dette er tullball. Deretter sier du det er feil bruk av overskriftselementet og en semantisk feil. Ikke selvmotsigende?

 

Situasjonen er ikke den at XML tar over, men at XML taper. Heldigvis så vil det finnes XHTML5, men sett utifra dagens kaos, og dagens CMS systemer, så er det html som gjelder. Til og med fri struktur taper for universell struktur.

 

Frode

Her snakker du om at XML taper kampen, men det bør uansett spesifiseres at det er XHTML du snakker om, siden XML som eget format på ingen måte taper... Heller ikke i websammenheng da dette fort kan brukes på andre måter enn bare som XHTML. RSS er som du også sier en av dem.

 

Her er vi i utgangspunktet enige, jeg bare mener det er for uspesifikt å snakke om XML når du egentlig snakker om XHTML, selv om XHTML er et subset om du vil, av XML...

[FrodeNilsen]

...

Jeg sier det er semantisk feil, og ikke teknisk. Du sier dette er tullball. Deretter sier du det er feil bruk av overskriftselementet og en semantisk feil. Ikke selvmotsigende?

...

 

Nei!

 

Jeg har beskrevet hvordan feil bruk av elementer gir tekniske problemer. Det blir dermed ett teknisk problem også. I denne tråden så får du tekniske problemer grunnet formateringering til overskriftselementer er anderledes enn de nøytrale.

 

...

Her snakker du om at XML taper kampen, men det bør uansett spesifiseres at det er XHTML du snakker om, ...

 

Nei!

 

XML har tapt kampen om å bli det neste nettleser språket. html 5, css og javascript er fremtiden. xml benyttes primært til å utveksle informasjon mellom systemer, noe som også er primær oppgaven til rss.

 

For ordens skyld så glemmer du at xml også benyttes til databaser. Også der ser relasjons databasene til å forbli de dominerende.

 

Frode

[Wæsp]

Som jeg lærte av Plakatmannen her på forumet, å lage nettsider med DW blir som å skrive engelskstil med google-translate.

Det funker, men resultatet blir ikke helt topp..

Jeg ville brukt Div-tags til å kode designet mitt i, ikke bruke tables.

For, som jeg også lærte av Plakatmannen, tables egner seg ikke til så mye annet enn nettopp å lage tabeller. De burde iallefall ikke brukes til å lage layouts.

 

Du kan PM'e meg hvis det er noe mer du lurer på

-Fredrik

[ButterScotch]

...

Jeg sier det er semantisk feil, og ikke teknisk. Du sier dette er tullball. Deretter sier du det er feil bruk av overskriftselementet og en semantisk feil. Ikke selvmotsigende?

...

 

Nei!

 

Jeg har beskrevet hvordan feil bruk av elementer gir tekniske problemer. Det blir dermed ett teknisk problem også. I denne tråden så får du tekniske problemer grunnet formateringering til overskriftselementer er anderledes enn de nøytrale.

 

Teknisk sett bør man ikke anta noe som helst om formateringen siden de forskjellige browserne gjør forskjellige valg. Men det er fint at du klargjør hva du mener.

 

...

Her snakker du om at XML taper kampen, men det bør uansett spesifiseres at det er XHTML du snakker om, ...

 

Nei!

 

XML har tapt kampen om å bli det neste nettleser språket. html 5, css og javascript er fremtiden. xml benyttes primært til å utveksle informasjon mellom systemer, noe som også er primær oppgaven til rss.

 

For ordens skyld så glemmer du at xml også benyttes til databaser. Også der ser relasjons databasene til å forbli de dominerende.

 

Frode

Ser ikke helt at databaser var noe jeg hadde "glemt", da jeg kun ville klargjøre at du tidligere snakket om at XML har tapt som om hele språket er dødt, uten å være klar på at det var XHTML du mente.

 

Sikkert flere andre områder hvor XML har vært et alternativ men ikke slo gjennom, men ser ikke relevansen av dette til saken. Selvsagt, med mindre du fortsatt mener at hele språket XML er dødt... I så fall bør du spesifisere hvor du egentlig står.