Hvordan lages slike firkanter med informasjon (text) inni?

[Anterialis]

Mener da typisk slike firkanter som så mange sider har, som man putter tekst inni. Velger man en border som man setter width og height på, og bruker position absolute? Alt dette inni en div feks? Se på bildet under, den firkanten (forøvrig teksten til venstre også..) til høyre, hvordan lager man slike på best/penest (kodemessig) måte?

 

Mulig litt reklame, men men...

 

Jeg kan litt html og css, da jeg kodet smått før, men det har blitt noen år siden. Men jeg innbiller meg at det er på denne måten man vanligvis lager sider nå til dags? Med en sentrert firkant (med border rundt + avrundede kanter) med flere "firkanter" inni seg hvor man har meny ol. Tar jeg helt feil?

 

Med firkanter mener jeg det du ser til høyre på det bildet over Tenker da på html og css så klart...

 

Rett gjerne på termonologien min. Vil vite dette.

 

På forhånd takk =)

[Haraldson]

Måten jeg har kodet opp den på, er å ha tre omsluttende div-elementer rundt selve menyen. Mens den ytterste diven har et repeterende bakgrunnsbilde (i y-retning) har den neste toppavrundingsgrafikken, mens den innerste har bunnavrundingsgrafikken samt paddinger etc. De to siste bakgrunnsbildene er bare hjørnene og det som er i mellom, og plasseres med bakckground-position. Siden disse to elementene er dypest ned i strukturen, vil deres bakgrunnsbilder vises over den ytterste divens bakgrunnsbilde.

 

Hvis du gjør det slik, vil du oppdage at innholdet i den innerste diven ikke bare vil påvirke høyden på den innerste, men alle divene, noe som gjør løsningen skalérbar.

 

Var dette noenlunde forståelig?

[Anterialis]

Forstod mesteparten ja =) Så du bygger i "layers" liksom (fra ps). bruker du z-index da for å sette dybden/rekkefølgen? Kan du gi meg ett superenkelt eksempel med coding? Eller bruker du absolute position for å sette posisjonen? Føler det kan bli tullete om browseren leser posisjonen forskjellig fra andre browsere...

[Haraldson]

Jeg bruker som regel kolonnelayouts, hvor jeg floater kolonnene dit jeg vil. Jeg definerer ikke z-index eksplisitt, da jeg heller benytter den naturlige z-indexen som bestemmes ut fra rekkefølgen i HTML-en. Dette er mer patent i eldre nettlesere med dårlig CSS-støtte.

 

Anbefaler deg å installere Firebug til Firefox, så kan du inspisere den aktuelle koden på keyteq.no selv, og se om du får noe mer forståelse - koden er jo der allerede.

Endret 26. mai 2008 av Haraldson

[Anterialis]

Da kan jeg prøve det, takk skal du ha. Står sikkert noe om dette på w3schools også regner jeg med, så får ta en kikk der også, men nå har jeg et bedre utganspunkt til å forstå i alle fall =)

[Gjest Slettet+9018234]

Dette burde hjelpe: http://www.thenoodleincident.com/tutorials...sson/boxes.html