Avatar billede aske2 Nybegynder
12. marts 2010 - 11:42 Der er 29 kommentarer og
2 løsninger

Begynderhjælp til positionering

Hej eksperter

Jeg har tidligere benyttet tables til at styre indholdet på mine websider, men nu vil jeg gerne bruge positionering i stedet. Jeg har selvfølgelig læst diverse tutorials om positionering, men... Jeg kan simpelthen ikke få hul på det, så jeg håber, I kan hjælpe mig i gang.

I kan se et jpg billede med skitse af, hvordan designet gerne skal ende med at se ud her: http://aske2webdesign.dk/skitse.jpg. Planen er, at alt indhold skal centreres - altså så det flugter med den grønne boks i toppen.

Jeg vil naturligvis gerne tage højde for forskellige skærmopløsninger, og jeg vil derfor gerne have indholdet centreret på siden, men... Det der specielt volder mig problemer er topbjælken, hvor der jo skal være en blå boks i hver side.

Jeg håber, I har lyst til at hjælpe mig, og håber jeg har gjort mig nogenlunde forståelig og ellers så spørg endelig ind... På forhånd tak for hjælpen :-)
Avatar billede stinejh1980 Nybegynder
12. marts 2010 - 11:52 #1
Kan ikke se din side
Avatar billede aske2 Nybegynder
12. marts 2010 - 12:04 #2
Det er virkelig mærkeligt :-( Det er tilsyneladende linket, der er noget galt med, for hvis man kopierer URL og indsætter i browser, så virker det fint
Avatar billede aske2 Nybegynder
12. marts 2010 - 12:17 #3
Den har taget punktummet med som en del af linket :-( Så man kan benytte linket, men så bare slette punktummet, så virker det
Avatar billede stinejh1980 Nybegynder
12. marts 2010 - 12:19 #4
Jeg har selv gjort følgende:
HTML:
<div align="center">
<div id="MainDesign">
<Mit logo>   
<Min røde menu />
<mine flag />
<min Grå menu />
<div id="Content">
<Mit indhold>
</div>
<div id="BottomText"><min fokus kasser></div>
</div>
</div>

CSS:
#MainDesign
{
    padding: 0px;
    margin: 0px;
    /*background-image: url(  'gfx/BGStrip.gif' );
    background-repeat: repeat;
    background-attachment: fixed;
    background-position: left bottom;*/
    width: 960px;
    z-index: 0;
    /*min-height: 600px;*/
    height: 1280px;
    text-align: left;
    background-color: #DDDFD9;
}

#Content
{
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 0;
    width: 874px;
    position: absolute;
    top: 130px;
    bottom: 20px;
    padding-top: 5px;
    padding-left: 86px;
}

#BottomText
{
    padding: 5px 0px 0px 0px;
    margin: 0px;
    width: 960px; /*border: thin solid #00FF00;*/
    position: absolute;
    bottom: 0px;
    text-align: center;
    height: 15px;
    background-color: #FFFFFF;
    vertical-align: middle;
}

Resultatet kan ses her:
www.elvstromsails.com
Avatar billede keysersoze Guru
12. marts 2010 - 12:20 #5
læg den blå del af toppen som baggrund på fx dit body-tag og sæt resten ind sådan;

<div style="width: 500px; margin: auto;">
  indhold.
</div>
Avatar billede keysersoze Guru
12. marts 2010 - 12:21 #6
align="center" var noget man brugte for 10 år siden - det er bestemt ikke god kodestil at gøre det længere.
Avatar billede stinejh1980 Nybegynder
12. marts 2010 - 12:27 #7
Det kan godt være det ikke er god kodestil, men det virker :-)
Avatar billede aske2 Nybegynder
12. marts 2010 - 12:27 #8
elvstine>

Super flot side :-) men... Du har jo det hele centreret, og jeg skal jo også have de 2 blå 'bokse' med, og det er dem, der volder mig problemer :-( Men thanks anyway :-)
Avatar billede aske2 Nybegynder
12. marts 2010 - 12:28 #9
keysersoze>

Tak og det det vil jeg da forsøge :-) Vender tilbage - sikkert med flere 'dumme' spørgsmål ;-)
Avatar billede janus_007 Nybegynder
12. marts 2010 - 12:34 #10
Jeg vil absolut mene det er uskik at bruge layers til weblayout. Det er 100 gange nemmere at styre i tables.

Hvorfor vil du dog gøre sådan?
Avatar billede keysersoze Guru
12. marts 2010 - 12:38 #11
hvis det som programmør kun gælder om at levere "noget som virker" ville verden være meget lettere - går man op i det man laver er standarder, optimering, fremtidssikring osv også noget man gør noget ud af.
Avatar billede keysersoze Guru
12. marts 2010 - 12:39 #12
janus_007 >> det var forhåbentlig en rigtig dårlig joke, right?
Avatar billede aske2 Nybegynder
12. marts 2010 - 12:46 #13
janus_007>

Nu har jeg læst SÅ MANGE STEDER, at man skal benytte positionering og IKKE tables, så derfor... Sikker på keysersoze kan give dig alle de gode grunde til det ;-)
Avatar billede madand Nybegynder
12. marts 2010 - 13:14 #14
janus_007, det håber jeg også var en joke..

Som udgangspunkt, så cut dit design ud i mindre bidder.
Start med at float'e alt left.

Lig dine design elementer som en background der repeater x eller y.

Så kan du altid til sidst rette til så den står i midten.
Avatar billede janus_007 Nybegynder
12. marts 2010 - 13:34 #15
hehe.. så kunne jeg sku få jer op af stolen her på en fredag *LOL*

Nope.. det er og bliver noget hø at lave et weblayout udelukkende i div'er. Tables er supernemme at arbejde med, at man så i sine TD'er bruger div's er en anden snak. Jeg ved godt man lærer noget andet i skolen, men det er noget teoretisk vrøvl der desværre ikke holder stik i den virkelige verden. Det handler om optimering og crossbrowser funktionalitet i erhvervslivet og her er tables nu nemme at bruge.

keysersoze -> Ja netop... det er også derfor du ikke bare kan sige det ene eller andet er fremtiden. Tables er ikke old-school og er ikke ved at blive udfaset til layers, de skal derimod bruges i harmoni med hinanden :)
Avatar billede michael_stim Ekspert
12. marts 2010 - 13:42 #16
Glad for at jeg ikke arbejder sammen med dig, janus_007. Tables bliver ALDRIG udfaset, men til design har de aldrig været "indfaset". Det er bare fordi de designere der bruger tabeller til placering, ikke ved bedre. Tabeller er til at liste DATA, så det bliver enkelt, pænt og lige.
Avatar billede michael_stim Ekspert
12. marts 2010 - 13:46 #17
Men når jeg kigger på din hjemmeside, kan jeg da se at du pænt og nydeligt benytter dig af div'er.
Avatar billede keysersoze Guru
12. marts 2010 - 13:46 #18
jeg har ikke sagt at tables er old-school eller er ved at blive udfaset - men tables skal bare kun bruges til det de er beregnet til, nemlig til visning af tabullerede data. layers er beregnet til opsætning af design og bør derfor anvendes dertil (er du i tvivl om hvad de forskellige elementer bør bruges til bør du læse en ekstra gang på W3) - har man problemer med crowssbrowser, opsætning af design eller optimering når man benytter layers i stedet for tables er det udelukkende et spørgsmål om manglende evner inden for HTML/CSS hos udvikleren.

så nej - det handler ikke om harmoni, det handler om at bruge elementerne til det de er beregnet til.
Avatar billede janus_007 Nybegynder
12. marts 2010 - 14:14 #19
michael-> tal pænt, det her er at diskussionsfora, at du er uenig med mig bør ikke blive til en personlig hån. Ved at tale sammen bliver man forhåbentligt kun klogere(ellers er man i det forkerte selskab)
NB: Det er autogenereret blogengine/ cms, deraf div :)

keysersoze-> Min holdning til tabels og div'er er baseret på både personlig erfaring og kollegial erfaring, jeg har mange eksempler på at det er spildtid at arbejde med div'er til layouts. Jeg har nu også set det omvendte, men at sige div'er er det eneste rigtige til positionering vil jeg nu stadig forholde mig kritisk til.

Så snart sitet er autogenereret eks.vis igennem CMS, så jo.. så giver det meste sig selv. Men når man ikke har et CMS ved hånden så bør man lige overveje ROI mht. til at tvinge sig selv til at bruge div's istedet for tables.
Avatar billede michael_stim Ekspert
12. marts 2010 - 14:22 #20
#19
Jeg taler skam pænt. Det er ikke et personligt hån, at sige at man er glad for at man ikke arbejder sammen med dig. Jeg taler af erfaring, da jeg ofte har fået leveret et design opbygget med tabeller. Skal man så, som udvikler, begynde at scripte i det, med sin teksteditor, er det rimeligt umuligt at finde hoved og hale på det.

Men er da ked af at du tog det som hån.
Avatar billede janus_007 Nybegynder
12. marts 2010 - 14:26 #21
Så skulle du netop ønske at arbejde sammen med mig jo.. sådan at du kan få udbredt dine synspunkter ;-)
Samarbejde og kommunikation højner altid niveauet ik sandt :)
Avatar billede keysersoze Guru
12. marts 2010 - 14:30 #22
igen - jeg har ikke sagt at layers er det eneste rigtige, jeg forholder mig til hvad standarderne siger.

Hvis du/i har de bedste erfaringer med tables har i enten et noget anderledes syn på programmering eller også stiller jeres kunder ikke særlig mange krav - design med layers fylder mindre kodemæssigt (har engang skåret et tabel-design ned til 1/3 udelukkende ved at gå over til layers), du mister styring med i hvilken rækkefølge sidens indhold skal sætte op i koden (det er ofte en god ting at have indhold nederst på en side men øverst i koden) og så tvivler jeg også uendeligt meget på at en table-programmør per definition er hurtigere end en layer-programmør (men al begyndelse er svær, så har man ikke sat design op i layers før tager det selvfølgelig tid ligesom det samme er tilfældes med tables).

Selvfølgelig er det ikke forbudt at benytte tables til design, det er bare, jf standarderne, ikke hensigten med dem - og i det tilfælde som spørgsmålet går på skal der benyttes mere kode (= spild) for at løse udfordringen hvis der benyttes tables. Endnu værre er det så hvis man blander præsentationsattributter (som fx align) ind i markup kode når sådan noget bør ligge i en præsentationsfil (altså css).
Avatar billede janus_007 Nybegynder
12. marts 2010 - 18:57 #23
Mine holdninger udtrykt her på Eksperten er kun mine egne personlige holdninger, mine holdninger her har intet med hvad en kunde eller designer laver. Jeg arbejder nu heller ikke som html-snedker eller lignende til dagligt, så bland ikke mine synspunkter her sammen med noget professionelt. Mine kompetencer ligger helt andre steder :)

Der er lang vej fra at diskutere synspunkter her og så blæse kundens krav en hatfuld, ik sandt :)

Det sjove er dog at jeg stadig ikke har hørt ET ENESTE VALIDT argument fra nogen af jer omkring hvorfor man skulle vælge layers fremfor tables, udover "standarden". Men standarden forklarer jo intet om hvorfor.

Jeg er til dels enig i at størrelsen på en webside kan ændre sig, men igen... vi har snart så meget båndbredde at sådan noget statisk html ikke betyder det store.

"Endnu værre er det så hvis man blander præsentationsattributter (som fx align) ind i markup kode når sådan noget bør ligge i en præsentationsfil (altså css)."
- Enig :)
Avatar billede keysersoze Guru
12. marts 2010 - 19:21 #24
så du kører med glæde også 200km/t på motorvejen fordi du ikke kan se et validt argument i kun at køre 110/130 som standarden (= loven) siger? Den eneste forskel mellem at bryde reglerne på motorvejen og i HTML-standarderne er, at på vejen kan du blive straffet mens du når det kommer til HTML lader er det være op til browserne at håndtere dine regelbrud - omend et regelbrud inden for HTML selvfølgelig er af en noget anden karakter, specielt omkring et så ofte misforstået element som table.

Det er fint at du går på tværs af standarderne så længe elementet opfylder dit behov - men at sige sådan noget sludder som du bla  gør i #10 og forsøger at lære nye udviklere unoder hører ikke til.

Det giver absolut ingen mening at fortsætte en diskution når du åbenlyst melder ud at dine kompetencer ligger et andet sted - det er jo som at diskutere tredjegrads-ligninger med en der endnu ikke har lært at gå.
Avatar billede janus_007 Nybegynder
13. marts 2010 - 15:40 #25
Det var en dårlig afslutning på en ellers interessant diskussion som desværre ingen kunne argumentere for, udover vage begrundelser såsom "jeg har hørt...", "standarden siger" (hvilket standarden stadig ikke gør)
Avatar billede keysersoze Guru
13. marts 2010 - 16:15 #26
det er udelukkende dig der finder på ting ud fra egne meninger og ikke vil godtage standarderne - men nu hvor du øjensynligt ikke aner hvad der står i standarderne kan jeg da give nogle eksempler;

"Tables should not be used purely as a means to layout document content..."

"• Use tables for tabular data..."

Som bi-ting skal dog nævnes - og det ved jeg selvfølgelig godt du ikke er opmærksom på eftersom du ikke aner hvad der står i standarderne når nu de er dig ligegyldige - at der også står følgende;

"makes it practical to create the markup for HTML tables with everyday text editors and reduces the learning curve for getting started..."

ergo må det kunne læses mellem linjerne at tables er for begyndere. Men det har du selvfølgelig også i #23 skrevet at du er. Så forhold dig nu til standarderne - de er trods alt ikke så farlige når det kommer til stykket.
Avatar billede janus_007 Nybegynder
13. marts 2010 - 17:35 #27
Du.. tal dog ordentligt, det er da ikke til at holde din arrogante og hoverende tone ud.

"Tables should not be used purely as a means to layout document content..."
-> ja netop... ikke udelukkende, men altså heller ikke "aldrig"

"ergo må det kunne læses mellem linjerne at tables er for begyndere. Men det har du selvfølgelig også i #23 skrevet at du er. Så forhold dig nu til standarderne - de er trods alt ikke så farlige når det kommer til stykket."

-> igen... Ved nu snart ikke, jeg har da arbejdet 10-11år i branchen, så lidt html har jeg nu set igennem tiden :)

Jeg forstår godt du bliver lidt irriteret over du ikke kan argumentere bedre for din holdning, men prøv at forholde dig kritisk til hvad "man siger" og hvad "man gør", nogle gange sidder man undrende tilbage og forstår dårligt selv man har været sådan en hard-ass :)
Avatar billede keysersoze Guru
13. marts 2010 - 18:25 #28
Hvis du nu ellers læser hvad mine kommentarer rundt omkring har jeg aldrig sagt at det er forbudt at benytte tables til layout - kun at det ikke er hensigten med dem.

Og så behøver jeg ikke andre argumenter end standarderne...
Avatar billede NT-Jensen Nybegynder
16. marts 2010 - 21:30 #29
Kom nu folkens opfør jer ordenligt... Startede som en normal diskution, og vil prøve at stoppe den inden det bliver til en omgang mudderkast!

Table vs Div, Intel vs AMD, Linux vs Microsoft osv.

Det handler om religion!!!

Personligt er jeg til:
Div fordi JEG synes det giver en renere og pænere kode!
Intel fordi AMD har i MINE øjne varme problemer!
Microsoft fordi det er den eneste platform der kan det JEG skal bruge den til!

Ang: Standarderne...
Standarden siger også at det er IE folk bruger, men vi optimerer stadig vores designs til FF, Safari, Chrome osv. Personligt bygger jeg altid efter FF og optimerer derefter til ovenstående...

Personligt overholder jeg langt fra alle xHTML/CSS/XML standarder som w3 ANGIVER er standarden. Og jeg ser ingen grund til det, for ofte giver det en masse unødvendig kode som ingen forskel gør, fordi den valgte browser godt kan læse det uden.



For at afslutte: Hvis folk ikke mener at det handler om religion så har jeg da helt sikkert fundet mig det forkerte forum for hjælp til programmører/designerer osv. Eller skal vi til at tage fat i diskutionen, hvad er bedst PHP vs .NET LOOOL
Avatar billede keysersoze Guru
27. juni 2010 - 10:48 #30
Lukketid?
Avatar billede aske2 Nybegynder
11. januar 2015 - 21:48 #31
Hej med jer

Det er en pinlig affære det her, og det beklager jeg :( Jeg har ikke brugt eksperten i en mindre evighed, men nu er jeg tilbage på banen ;)

Så til min rædsel, at jeg havde åbne spørgsmål, og det er jo på ingen måde i orden. Jeg håber, det er ok, jeg deler pointene imellem jer, da jeg jo desværre ikke kan huske løsningen på problemet.


Venligst
Elisabeth
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

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