Hjelp til å slice meny og plassere divs

[Kenny Bones]

Hei! Jeg har en meny her som er litt problematisk. Jeg har et ferdig design der jeg har en venstre meny.

Denne skal inneholde en tre-meny med pluss og minus-tegn for å ekspandere menyen når man klikker på.

Svært likt som i Windows utforskeren. Det er jo i seg selv greit om jeg bruker f. eks dhtml.

 

Menyen består jo av en boks som aller helst også skal bli større dersom innholdet i tre-menyen blir større. Altså må det være en slags dynamikk her som gjør dette mulig. Derfor må jeg sikkert slice designet på en smart måte. Og om jeg skal bruke css eller tables er også usikkert.

Legger ved et bilde av menyen som den ser ut nå i selve designet.

 

Problemet er egentlig, hvordan er det best å slice i Photoshop for å få best resultat med tanke på å lage divs med disse i i etterkant? Nå har jeg faktisk fått til å slice menyen i Photoshop på en rimelig grei måte, men om dere ser vedlegg 3 så ser dere problemet jeg får når jeg bare prøver å gjøre menyen større ved å legge til innhold rett etter å ha eksportert slicene rett frem i Photoshop og åpnet rett i Dreamweaver for redigering.

 

Edit: La til enda et vedlegg her så dere ser det forferdelige resultatet her..

Endret 24. oktober 2007 av Kenny Bones

[Stian Jacobsen]

Har aldri vært noe glad i slize.. mye bedre å gjøre det for hånd..

Lag et bilde på 1px i høyde og bredden på boksen din, så repeterer du bare det nedover..

Når det gjelder menypunktene, bruk det vertikale linjen som bakgrunn på UL, så bruker du de horisontale som bakgrunn på LI.

[Kenny Bones]

Hmm, skjønner ikke helt hva du mener her. Du har vel ikke fått til å tegne streker på det første bilde for å vise litt visuelt?

 

Edit: Eller kan jeg kanskje bruke iframes? Sånn i midten lissom? Men da vil jeg jo få scrolling, noe jeg ikke egentlig ønsker..

Endret 25. oktober 2007 av Kenny Bones

[Stian Jacobsen]

Hmm, skjønner ikke helt hva du mener her. Du har vel ikke fått til å tegne streker på det første bilde for å vise litt visuelt?

 

Edit: Eller kan jeg kanskje bruke iframes? Sånn i midten lissom? Men da vil jeg jo få scrolling, noe jeg ikke egentlig ønsker..

Har ikke tid til å lære deg opp hvordan du repeterer bilder.. og ikke tenk på frames en gang.. bruk heller overflow: auto; om du absolutt må ha scrolling

[Kenny Bones]

Må absolutt ikke ha scrolling. Men jeg fikk det omsider til. En ganske så genialt løsning om jeg må si det selv.

 

Jeg lagde bare én div som wrapper alt. Så inndelte jeg bildene i tabeller, to for hver container. Så er det jo sånn at dersom tabellen blir større, altså mer innhold i den så strekker den seg og de andre bildene får mellomrom mellom seg og man ser vanligvis et hvitt felt fordi det er bakgrunnen. Så jeg tok bare et 1 pixels bilde og la som bakgrunn og tilet dette. Funker veldig bra med tanke på at jeg fant det ut selv!

[Arve Systad]

Men kvifor brukar du tabellar til det? Spesielt med tanke på at ca samme koden med DIVs vil gi identisk resultat..

[Kenny Bones]

Fordi jeg vet ikke hvordan jeg gjør det.. Jeg prøvde meg bare fram med forskjellige ting og fant ut at dette gjør susen! Er det noen grunn til at jeg ikke bør bruke tabeller her? Jeg ønsker selvfølgelig at alt skal bli så stabilt som mulig!

 

Skal jeg poste koden?

Endret 29. oktober 2007 av Kenny Bones

[Stian Jacobsen]

Fordi jeg vet ikke hvordan jeg gjør det.. Jeg prøvde meg bare fram med forskjellige ting og fant ut at dette gjør susen! Er det noen grunn til at jeg ikke bør bruke tabeller her? Jeg ønsker selvfølgelig at alt skal bli så stabilt som mulig!

 

Skal jeg poste koden?

 

La meg si det slik..

Bruker du excel når du skriver brev?

[Kenny Bones]

Nei, men dersom jeg ikke hadde hatt peiling på Word så hadde jeg mest sansynligvis skrevet brev i Excel, ja!

 

Edit: Men altså, hva er egentlig problemet med tabeller her da? Det får jobben gjort nei? Blir siden treigere, mindre stabil eller får konflikter med nettlesere?

Endret 29. oktober 2007 av Kenny Bones

[Stian Jacobsen]

Nei, men dersom jeg ikke hadde hatt peiling på Word så hadde jeg mest sansynligvis skrevet brev i Excel, ja!

Nei.. det hadde du ikke!

Men altså, hva er egentlig problemet med tabeller her da? Det får jobben gjort nei? Blir siden treigere, mindre stabil eller får konflikter med nettlesere?

1. Tabeller er laget for tabulær-data. Altså, timeplaner, regnskap, handlelist etc.. IKKE til layout.

2. En side som er laget med tabeller fremfor css, blir større, tyngre og vanskeligere å lese for f.eks søkemotorer.

Se:

http://www.hotdesign.com/seybold/

http://www.alistapart.com/stories/journey/

http://webdesign.about.com/od/layout/a/aa111102a.htm

http://www.workingwith.me.uk/table_free/se...o_go_table_free

 

Her er noen tips du IKKE skal følge

http://olav.dk/articles/tables.html

http://www.webaim.org/techniques/tables/

http://webstyleguide.com/page/tables.html

[Kenny Bones]

Hmm, får prøve å gjøre det samme i CSS da når jeg får tid. Det var ikke akkurat noe spesielt problem å få til dette med tabeller, så da burde det vel gå greit i css også? Noen spesielle ting jeg må se opp for når jeg lager det i CSS da? Kan jeg f. eks bruke samme fremgangsmåte, bare bytte ut tabellene med divs? Isåfall burde det være piece of cake å få til da. Hvis ikke må jeg bare knote meg fram til en løsning!

[Stian Jacobsen]

Hmm, får prøve å gjøre det samme i CSS da når jeg får tid. Det var ikke akkurat noe spesielt problem å få til dette med tabeller, så da burde det vel gå greit i css også? Noen spesielle ting jeg må se opp for når jeg lager det i CSS da? Kan jeg f. eks bruke samme fremgangsmåte, bare bytte ut tabellene med divs? Isåfall burde det være piece of cake å få til da. Hvis ikke må jeg bare knote meg fram til en løsning!

Høres ikke ut som at du kan så mye html/css.. men i alle fall, her har du et lite forslag

 

<div class="block">
 <h3>Hjelp & Støtte</h3>
 <ul>
<li><strong>Microsoft</strong>
<ul>
  <li><a href="#">Word</a></li>
  <li><a href="#">Word</a></li>
  <li><a href="#">Word</a></li>
  <li><a href="#">Word</a></li>
  <li><a href="#">Word</a></li>
</ul>
</li>
 </ul>
</div>
<div class="bunn"> </div>

div.block {
width: 150px;
background: url(img/block_bg.png) repeat-y top left;
}
div.block div.bunn {
 width: 100%;
 background: url(img/block_bunn.png) no-repeat bottom left;
 height: 8px;
}
div.block h3 {
width: 100%;
padding: XXpx 0 0 0; // Gjør toppen så stor at du får med deg ikonet
}
div.block ul {
list-style: none;
margin: 0;
padding: 0;
}
div.block ul li {
background: url(img/dotted.png) no-repeat center right;
margin: 0 0 0 15px;
padding: 0 0 0 32px;
}

[Kenny Bones]

Takk! Får prøve dette! En annen ting, bør man aldri bruke frames? Jeg så på siden din Stian at du/dere ikke brukes frames og at funksjonaliteten er der fortsatt. Samtidig som at siden lastes utrolig raskt! Jeg kan egentlig svært lite når det angår koding. Men design er jeg svært flink på, har alltid fokusert på design fordi andre har tatt seg av kodingen. Men denne gangen har jeg litt lyst til å mekke sammen det meste selv, bortsett fra det som har med java og dhtml å gjøre.

 

Høres ikke ut som at du kan så mye html/css.. men i alle fall, her har du et lite forslag

 

Såklart jeg ikke kan mye om det.. Har ikke opprettet en tråd om det dersom jeg har kunnet det..

Endret 1. november 2007 av Kenny Bones

[Stian Jacobsen]

Takk! Får prøve dette! En annen ting, bør man aldri bruke frames? Jeg så på siden din Stian at du/dere ikke brukes frames og at funksjonaliteten er der fortsatt. Samtidig som at siden lastes utrolig raskt! Jeg kan egentlig svært lite når det angår koding. Men design er jeg svært flink på, har alltid fokusert på design fordi andre har tatt seg av kodingen. Men denne gangen har jeg litt lyst til å mekke sammen det meste selv, bortsett fra det som har med java og dhtml å gjøre.

Hvilken side?

[Kenny Bones]

Hvilken side?

 

Breeze media. Står i signaturen din.

[Stian Jacobsen]

Hvilken side?

 

Breeze media. Står i signaturen din.

ehh.. da må du enten ha vært på feil side, eller så har det skjedd en glipp slik at siden vises.. Sist jeg sjekket så er siden lukket. Jeg holder på med en del oppdateringer av publiseringssystemet mitt, derfor vil siden være stengt fra til i midten av November.

[Kenny Bones]

Ah, var feil side ja. Var nok http://www.breezemedia.co.uk/ jeg gikk inn på!

[Kenny Bones]

Hehe, må nok bruke divs uansett ja. Prøvde validation i Dreamweaver og får masse feil.

F. eks "The tag: "table" doesn't have an attribute: "height" in currently active versions"

 

Sikkert en annen måte Dreamweaver forteller meg at "sånt er avleggs!"

Ok, da begynner jeg med det først tenker jeg. Prøver ut koden din også