Avatar billede madssch Nybegynder
06. november 2006 - 10:19 Der er 19 kommentarer og
2 løsninger

En snak om CSS

Hej Eksperter,

Jeg har altid været vant til at opbygge mine websites i tables. Da jeg skal til at opbygge et større projekt, som skal kan vises på pc, håndholdt, psp, ipod m.v. må jeg nok hellere overveje CSS og XHTML-standarden.

Jeg har ikke den store erfaring i opbygning af websites med layers. Der indgår formentlig noget positioning, og min erfaring siger mig, at det kan give et underligt cross-browser resultat.

Jeg står altså nu overfor den opgave, at opbygge sitet ved hjælp af CSS. Jeg har derfor brug for sparring omkring, hvordan jeg griber tingene an. Jeg har kigget diverse tutorials rundt omkring, men deres eksempler er for simple. Typisk noget med at positionere 2 elementer!

I "table-sprog" skal mit website indeholde følgende:

- 1 række til topgrafik
- 1 række til banner
- 1 række tip topmenu
- 1 række med 2 kolonner (til venstremenu og indhold)
- 1 række til adresseoplysninger
- 1 række til footer (Webdesign: xxx)

Websitet skal være 960px bred og centreret. Desuden noget baggrundgrafik, som følger de forskellige "rækker".

Kan nogen give hjælp omkring dette?

Jeg skal måske sige, at jeg har mange års erfaring i både HTML og CSS, men har ikke forsøgt dette før.

På forhånd tak!
Avatar billede mewm Nybegynder
06. november 2006 - 10:49 #1
Du kan købe en artikel herinde (for point) omkring det at droppe tables of bruge CSS.

Du kan evt kigge i andre koder. Kig evt http://geektalk.dk. Den er bygget op i div.

Du kan også gå på google og søge på "tableless design" "drop tables use div" "div instead of tables" "div designs"

Sådan lærte jeg det. :)

Mht, hvordan div sider bygges op. Så skal du først have en wrapper er er ugen om det hele 100% bred. Så positionere du efter dem. (jeg bruger kun rigtig sjælden position: attributen). Og spar IKKE på div. Brug masser af dem.

Mht crossbrowser så findes der IE hacks. Bare søg på google: "IE css hack" og læs lidt om det.

Du kan sagtens kode op i mod XHTML standarden, men den behøves ikke være valid. Min lærer her på webintegrator uddannelsen siger at højst sandsynligt vil 100% valide sider "fucke" op i de forskellige browsers.

Anyways, husk! Google er f.eks. IKKE valid.
Avatar billede madssch Nybegynder
06. november 2006 - 10:56 #2
Super.

Forstår ikke helt hvad du mener med wrapper?

Jeg er startet lidt, og har p.t. følgende kode:

    <div id="PageHolder">

       
        <div id="PageTop"></div>
       
       
        <div id="PageBanner">
       
            <img src="gfx/top_banner.gif" alt="" />
           
        </div>
       
       
        <div id="PageTopmenu" class="TopmenuBG"></div>
       
       
        <div id="PageContent">
       

            <div id="PageContentLeft">
           
                <!-- #include file = "include/inc_menu_left.asp" -->
           
            </div>
   

            <div id="PageContentMiddle">
           
                <!-- #include file = "include/inc_page_content.asp" -->
           
            </div>
       

        </div>
   
       
        <div id="PageBottom" class="PageBottom">
       
            <% Call FnGetBottomAddress () %>
       
        </div>
   
       
        <div id="PageFooter">
       
            <a href="http://www.directit.dk" target="_blank" class="Footer">
       
                Webdesign: directIT
               
            </a>
       
        </div>

       
    </div>

Har disse 2 problemer:

1. Siden er ikke centreret

2. PageContentLeft og PageContentMiddle er placeret ved siden af hinanden vha. float: left. Men når der er for meget indhold i PageContentMiddle flyder det rundt om PageContentLeft (som jeg har bedt den om!). Hvilken kommando benytter jeg i stedet?
Avatar billede madssch Nybegynder
06. november 2006 - 11:01 #3
Spalte-problemet er løst. Jeg bad bare begge layers om at være 100% høj i forhold til PageContent.

Så mangler vi bare at få siden centreret!
Avatar billede olebole Juniormester
06. november 2006 - 11:11 #4
<ole>

Foreløbig har MS endnu ikke udgivet en browser, der understøtter XHTML - og FF gør det kun delvist og buggy. Derfor er der ingen grund til at bruge XHTML, som WWW ser ud nu - og det næste lange stykke tid.

mewm skriver godt nok:
    "Du kan sagtens kode op i mod XHTML standarden, men den behøves ikke være valid"

- men da dokumenterne så parses som dårlig HTML-tagsoup, ville det være en rigtig skidt idé. Der er ingen grund til at skaffe sig ulemper på halsen, når man ikke får fordele til gengæld  ;o)

Læs evt:
    http://www.eksperten.dk/artikler/537
    http://www.eksperten.dk/artikler/538

/mvh
</bole>
Avatar billede madssch Nybegynder
06. november 2006 - 11:41 #5
Skal vi to nu til at diskutere browser-kompatibilitet igen?!  :)

Tak for links. Vil studere dem med det samme...
Avatar billede madssch Nybegynder
06. november 2006 - 11:44 #6
Øh... Du skriver jo selv:

Ligesom der rundt omkring stadig lever Amiga-geeks i støvede skabe, vil der sikkert i en tid fremover være et parallelt HTML-net ... men der, hvor det virkelig sner, kommer den helt afgjort til at stå på XHTML. Fordele og muligheder ved XHTML/XML er så store, at der ikke er nogen - bare lettere avanceret - koder, der vil gide beskæftige sig med HTML som andet end et nostalgisk, historisk fænomen.
Det må således forventes, at der indenfor de næste par år kommer til at ske den måske største omvæltning på WWW, vi har været vidne til siden 1992.

Umiddelbart er der således al mulig god grund til at skrive XHTML ...

Hvorfor råder du mig så nærmest til at lade være?
Avatar billede olebole Juniormester
06. november 2006 - 11:45 #7
Njaaahhh, det er egentlig ikke browserkompatibilitet, der er problemet. Nærmere det, at XHTML endnu kun er en eksperimentel standard og at ingen endnu understøtter det ordentligt ... og samtidig er der kun uendeligt få, der kan skrive valid kode til standarden  =)
Avatar billede olebole Juniormester
06. november 2006 - 11:46 #8
"Umiddelbart er der således al mulig god grund til at skrive XHTML ...

Hvorfor råder du mig så nærmest til at lade være?"

- det er jo det, jeg har brugt alle de andre bogstaver i artiklerne til at forklare  ;o)
Avatar billede jowii Nybegynder
06. november 2006 - 11:56 #9
Eventuelt - www.webdesign101.dk
Under design.
Avatar billede madssch Nybegynder
06. november 2006 - 12:04 #10
Har nu læst artiklerne igennem, og forstår udmærket hvor du vil hen.

Jeg har ikke gået nærmere i dybden med XHTML ud over det gængse med hvilke HTML-tags der går ud, alle tags skal lukkes osv. osv. Men XHTML1.1 må vel være et skridt i den rigtige retning for at "fremtidssikre" sine sites..?

Sagt på en anden måde: her i overgangsfasen er browseren måske bedst tjent med HTML4.01, men i det lange løb ligner XHTML1.1 vel mere den kommende XHTML2.0 end HTML4.01 gør? Nu hvor du selv nævner det med at skifte over-night...
Avatar billede madssch Nybegynder
06. november 2006 - 12:36 #11
jowii > tak for link! Så blev sitet centreret.

Smid gerne et svar, så du kan få del i points.
Avatar billede mewm Nybegynder
06. november 2006 - 12:53 #12
Ole, nu tænkte jeg mere med alt skal være i lowercase. (embed kan ikke valideres uden JS)
Self skal koden være nogenlunde valid. Jeg tænkte forkert, mener at CSS kan blive svær at validere eftersom at man nogle gange er nød til at bruge IE hacks for at få det til at se rigtig ud i browsere.
Avatar billede olebole Juniormester
06. november 2006 - 13:39 #13
madssch >> Jo, 1.1 er nærmere 2.0, men personligt foretrækker jeg HTML4.01-Strict, til jeg kan begynde at bruge XHTML2.0  :)

Faktisk er det ekstremt sjældent, jeg har brug for IE-hacks - og når jeg har, gør det ondt langt ind i sjælden at være nødt til at bruge dem ... det er altid noget skidt at bygge sin kode på browser-bugs (og de kendte IE-CSS-hacks er alle bugs). Somregel laver jeg hellere små ændringer i designet.

Hvornår man skal bruge tabeller - og til hvad - er en lang og ofte religiøst præget diskussion. Alt for ofte ser man dog kodere sende browseren på voldsomt overarbejde (med både lange CSS- og JS-koder) for at undgå en tabel.
I den slags scenarier er det lidt vanskeligt tage argumentet om, at tabeller er for resourcekrævende, alvorligt. Det virker mere ideoligisk end gennemtænkt at undgå tabellen i en sådan situation  =)
Avatar billede madssch Nybegynder
06. november 2006 - 14:12 #14
olebole > Jeg forstår præcist hvad du mener!

Sidder p.t. med en udfordring, hvor jeg har to sidestillede layers som udgør 2 spalter. Det gør jeg ved at sætte float: left på den venstre. Da jeg ikke ønsker, at højre kolonnes indhold skal "flyde" omkring den venstre, sætter jeg højden på den venstre layer til 100%.

Det virker alt sammen meget godt i IE og FF, men ikke Opera. Så har jeg i stedet prøvet at sætte noget margin-left på min højre kolonne, til at skubbe den "forbi" den venstre. Så eksploderer siden i IE og FF, men ikke Opera!  :D

Det problem har jeg ALDRIG haft med tabeller!

...Men findes der en løsning..?  :(
Avatar billede madssch Nybegynder
07. november 2006 - 21:35 #15
olebole > Du virker som en mand med fuldstændig styr på dette område. Derfor spørger jeg dig til råds:

Jeg skal til at opbygge en stor portal. Portalen skal som tidligere nævnt skulle ses på mange forskellige medier. Jeg er p.t. kun i besiddelse af min mobiltelefon. Henter jeg portalen frem på den, spunker alle CSS-elementerne, men de få ting som er opbygget i tables står perfekt. Er det "ulovligt" at opbygge templaten i tables og så måske angive bredder m.v. i css?

Og hvad mener du dette vil betyde for XHTML2-standarden? Jeg mener, de afskaffer vel næppe tabellerne, eller..? Kunden er vel næppe interesseret i at betale for en portal som er outdated om 1 år...
Avatar billede madssch Nybegynder
07. november 2006 - 21:39 #16
Jeg ved, at du nærmest har kommenteret det tidligere i tråden, men hvad indflydelse vil du spå det har nogle år frem i tiden at opbygge med tables?
Avatar billede jowii Nybegynder
11. november 2006 - 12:56 #17
Okay.
Avatar billede olebole Juniormester
13. november 2006 - 09:57 #18
Tabeller er uundværlige elementer og de udgår ingenlunde i XHTML 2.0  :)

Tabeller er ikke egnet som deciderede layout-elementer, hvor de nestes for at holde styr på resten af elementerne. En enkelt tabel til opdele siden i søjler er dog hovesagelig kun i stand til at fornærme de mest 'hysterisk rettroende' (og det er i øvrigt forbløffende mange) ... der er til dato ikke lavet en browser, der har problemer med det  =)
Avatar billede madssch Nybegynder
13. november 2006 - 10:04 #19
Jeg tænker bare: skal man ikke længere have lov at præsentere data i et skema, som nu tables oprindeligt er beregnet til? Hvad er alternativet?

Og en fremtidig browser kan vel næppe gennemskue hvilke tabeller der bruges til sideopbygning og hvilke der bruges til data præsentation..?
Avatar billede roenving Novice
16. november 2006 - 03:00 #20
Fordi tabeller nu er bygget fra Tim Berners-Lees grundlæggende opbygning af html, hvor de var nødvendige for at give en rimelig repræsentation af videnskabelige data i tabelform, er der jo ingen der siger, at de ikke kan udvikle sig, fordi de har nogle fornuftige evner ...

-- det ville jo også være forfærdeligt, hvis man havde haft den samme tilgang til hjul, og derfor fortsat kun havde tilladt brugen af sådanne til vandingssystemer (som de oprindeligt fandt deres brug i !-)
Avatar billede madssch Nybegynder
16. november 2006 - 09:07 #21
Lad os håbe du har ret!  :)

Én ting er selve sideopbygningen - en anden er det at skulle lave noget i skema-form. Her er tabeller nu det foretrukne..!
Avatar billede 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.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

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