z-index eller annat?

[Ridkonst]

Det var alldeles för länge jag satt med hemsidor nu och av en vän har jag fått en design (bara en bild) som jag vill göra om den nuvarande hemsidan till, men jag får inte till det.

Efter att ha svurit ramsor i två dagar ger jag upp och ber om hjälp.

 

Jag gjorde en snabb bild av hur det ska se ut med de olika delarna:

 

http://www.ridkonst.com/design.jpg

 

Flera av fälten överlappar varandra och även "loggan" (det som är gjort som en bild) ligger lite lustigt placerad, den ser ut som att den står på fältet som är under.

Det är en riktigt snygg design jag fått så jag vill gärna behålla den, men blir galen på att få det placerat rätt.

 

Är det någon som kan ge mig en snabb kodning bara för fälten och dess placering? Arbetar normalt bara med html och css så är det annat som ska till behöver jag nog noggranna direktioner.

 

[inlägget ändrat 2008-08-28 08:38:25 av Ridkonst]

[Signe_1]

Har du början till kod?

 

Vet inte alls hur du jobbar men som det är på bilden lägger jag upp divar. Du måste först ha en "container" som håller ihop alla lager så de inte flyter ut över skärmen, det är jätteviktigt att denna inte är för liten för då åker lagerna ner under varandra.

 

Lite kod du inte får rätt på och en beskrivning på vad de olika delarna är tänkt att vara.

 

[Diver Girl]

Bygg upp med hjälpa av divar.

En "wrapper" som innehåller alla dina överlappande divar. Denna huvudwrapper kan du ha med positionering relative med fast bredd och höjd, på så sätt kan du alltid centrera siten oavsett vilken upplösning användaren har.

 

Divarna inuti wrapper väljer du att positionera absolut. Då får de en fast position fast inuti wrappern. Överlappningarna löser du precis som du säger med z-index.

 

/DiverGirl

 

 

 

[Ridkonst]

Tack för svaren. jag har uttryckt mig lite för kort inser jag.

 

Om jag snabbt bara skriver så hade det sett ut något sånt här:

 

<div id="content"> (bruna rutan underst)

<div id="logga"> (rosa rutan)</div>

<div id="text"> (den gröna rutan) </div>

<div id="menu"> (gula rutan) </div>

<div id="secmenu"> (den blå rutan) </div>

<div id="aktuellt"> (den svarta rutan)</div>

 

Sen vet jag inte riktigt hur jag hade kodat för bilden.

 

Jag har lekt lite i css med position: relative/absolute samt z-index, men jag får inte till det. Allt hoppar runt, landar fel över/under varandra eller flyttar tillsammans istället för att vara oberoende av varandra.

 

Jag kanske lägger det fel, eller skriver in relative/absolute samt z-index på fel grejer?

Nu är det så snurrigt det jag kodat redan att det inte ens är lönt att försöka bena ut. Lättare att kasta och börja om.

 

Glömde svara på vad varje del ska vara, men vad jag döpt dom till svarar bra på det av sig själva? Annars får ni säga till.

 

 

[inlägget ändrat 2008-08-28 18:28:27 av Ridkonst]

[Ridkonst]

Får jag lov att länka till själva bilden av designen eller räknas det som reklam eftersom det står med namn på företaget?

 

[Diver Girl]

Ok, för att utgå ifrån dina id.

 

content är den jag menar med wrapper. Den håller hela innehållet och har en fast bredd och höjd.

De övrigar divarna lägger du inom content.

 

<div id="content">

<div id="logga"></div>

<div id="text"></div>

<div id="menu"></div>

<div id="secmenu"></div>

<div id="aktuellt"></div>

</div>

 

Content ger du relativ positionering.

De övriga absolut positionering.

 

För att placera dem rätt anger du i css-koden t ex:

margin-left:30px;

margin-top:10px;

z-index:1;

(Eftersom diven ligger inuti content så innebär det att den beräknar margin från toppen och vänster på content)

 

Det innebär att

"text" => z-index 1

"logga" => z-index 2

"secmenu" => z-index 3

"menu" => z-index 2

"actuellt" => z-index 2

 

Bilden får du eventuellt också lägga i en egen div och ge z-index 4. Men förmodligen går det att positionera bilden direkt, du får testa.

 

Det här bör funka!

 

Hoppas det blev klarare så här!

 

/DiverGirl

 

 

 

[Ridkonst]

Det blev absolut klarare! Jag ska sätta mig och pilla med det direkt...trots att jag borde flyttpacka. *harkel*

 

Nu förstår jag det med z-index också. Har aldrig använt det innan så jag försökte ge "text" z-index: -1 eftersom det ju skulle ligga under alla andra. Tänkte ju inte så långt att "content" är inblandad också.

 

[Diver Girl]

Bra - lycka till!

Hör gärna av dig hur det går!