Hjelp til CSS-Layout

[Radar911]

Hei,

 

Lurer på om følgende oppsett er mulig med CSS, og eventuelt hvordan det kan gjøres?

 

Det er en meny, så de statiske bildene må passe sammen med de varierende linjene med tekst. Dette er jo enkelt å sette opp ved hjelp av vanlige tables, men kan det gjøres ved hjelp av CSS?

Endret 12. oktober 2004 av Radar911

[PoleCat]

Det er helt sikkert mulig, og jeg kan sikkert hjelpe deg med det, men må innrømme at jeg ikke skjønte bæret av hva du ville frem til.

 

Har du et eksempel på noe lignende?

[Radar911]

http://home.no.net/vidvik/

 

En slik layout.

Endret 11. oktober 2004 av Radar911

[PoleCat]

Veldig enkelt.

 

* {
 margin: 0;
 padding: 0;
}

/* ^^ setter padding og margin til 0 på alle elementer */

div.boks {
 background: url("http://home.no.net/vidvik/middle.jpg") repeat-y; /*bakgrunnsbildet repeteres nedover i boksen*/
 width: 250px; /*bredden på boksen*/
 text-align: center; /*tekst inne i boksen midtstilles*/
}

h2 {
 padding: 45px 0 0 0;
 height: 0 !important;
 height /**/ : 45px;
 overflow: hidden;
 margin-bottom: 20px;
}
 
.o1 {
background: url("http://home.no.net/vidvik/top1.jpg");
}

.o2 {
background: url("http://home.no.net/vidvik/top2.jpg");
}

 

<div class="boks">
 <h2 class="o1">Overskrift01</h2>
 <p>Teksten her</p>
</div>

<div class="boks">
 <h2 class="o2">Overskrift02</h2>
 <p>Teksten her</p>
</div>

 

For å forstå hva jeg gjør med h2-elementet, kan du lese min artikkel om bilde-erstatning.

 

EDIT: Dette kan løses uten bruk av div's, men jeg tror vi tar det litt rolig i starten om du ikke kan så mye om dette fra før.

Endret 11. oktober 2004 av PoleCat

[Radar911]

Sinnsyk rask oppfølging der.

Skal teste oppsettet i morgen.

[Radar911]

Testet oppsettet nå, men det er noe som ikke stemmer helt. For det første, de to overskriftene i menyen må være bilder, ikke tekst. For det andre, så skal "bunnen" (området under "teksten her") av hver meny være et bilde. Men skrift-delene av menyen funker supert (den med de varierende linjene).

Endret 12. oktober 2004 av Radar911

[jorgis]

De to overskriftene er bilder og tekst. Hvis noen skrur av visning av bilder eller surfer via mobil vil teksten vises. På en vanlig nettleser vil bildene http://home.no.net/vidvik/top1.jpg og http://home.no.net/vidvik/top2.jpg vises istedenfor <h2>-teksten.

[PoleCat]

Overskriftene _er_ bilder.

[Radar911]

Ooops, bare jeg som glemte å sjekke siden i browseren først. Hva med en layer under hver menu som inneholder sluttbildet til menyen?

Endret 12. oktober 2004 av Radar911

[PoleCat]

Tja, f.eks:

 

div.end {
 height: 10px; /* høyden på bildet i bunn */
 overflow: hidden;
 background: url("bildetibunn.gif");
}

<div class="boks">
<h2 class="o2">Overskrift02</h2>
<p>Teksten her</p>
<div class="end"></div>
</div>

[Radar911]

Merkelig nok beholder den "middle.jpg" mellom den øverste og den nederste menyen, enda den første menyen er avsluttet med </div>.

[PoleCat]

Det må jeg nesten få se, ellers er det ikke lett å feilsøke.

[Radar911]

* {

margin: 0;

padding: 0;

}

 

/* ^^ setter padding og margin til 0 på alle elementer */

 

div.boks {

background: url("middle.jpg") repeat-y; /*bakgrunnsbildet repeteres nedover i boksen*/

width: 250px; /*bredden på boksen*/

text-align: center; /*tekst inne i boksen midtstilles*/

}

 

div.end {

height: 10px; /*høyden på bildet i bunn */

overflow: hidden;

background: url("bottom.jpg");

}

 

h2 {

padding: 45px 0 0 0;

height: 0 !important;

height /**/ : 45px;

overflow: hidden;

margin-bottom: 20px;

}

 

.o1 {

background: url("articles.jpg");

}

 

.o2 {

background: url("reviews.jpg");

}

 

<div class="boks">

<h2 class="o1">Overskrift01</h2>

<p>Teksten her</p>

<div class="end">

</div>

<br>

<div class="boks">

<h2 class="o2">Overskrift02</h2>

<p>Teksten her</p>

<div class="end">

</div>

[PoleCat]

Du har ikke avsluttet "end" som jeg viste deg:

<div class="boks">
<h2 class="o2">Overskrift02</h2>
<p>Teksten her</p>
<div class="end"></div>
</div>

[Radar911]

Jess, det funker supert nå! Hvordan legger man til en hovedlayer, ala "content"?

Endret 12. oktober 2004 av Radar911

[FuLu]

Hvis du tenkte på om innhold layer skulle være til høyre for menyen?

 

<div id="menu">
<!-- meny html koden din her -->
</div>
<div id="content">
<!-- innhold html her -->
</div>

 

CSS kunne vært:

#menu {
float: left;
}
#content {
width: 500px;
float: left; /* eller right */
}

[PoleCat]

FuLu: Koden din vil vel føre til at menyen fyller 100%, da det ikke er definert noe bredde på den, dermed vil #content legge seg under. Om det ikke var det som er meningen da.

[Radar911]

Nah, heller noe slikt som 90% av området som gjenstår (dvs. alt til høyre for menyen).

Endret 12. oktober 2004 av Radar911

[PoleCat]

div#meny {
 width: 250px;
 float: left;
}

div#innhold {
 margin-left: 250px;
 float: right;
}

 

<div id="meny">
<!-- menyen din her -->
</div>

<div id="innhold">
<!-- innholdet -->
</div>

[Radar911]

Hmm, må ha gjort noe galt siden enten menyen er malplassert eller content ikke vises eller er malplasser. Hva er forskjellen mellom div# og div., og div id og div class?

Endret 12. oktober 2004 av Radar911