Hjelp til CSS-Layout

FuLu · 12. oktober 2004

@PoleCat: når du bruker float på et element, så "kollapser" den helt, dvs bredden blir ikke 100%, bredden på #menu blir avhengig av elementenes bredde som er inni #menu.

@Radar911: Selectors i CSS som bestemmer hva som er klasse og id og hvilken type element disse skal gjelde. F.eks er div#content bestemt at det er bare et element av typen div som skal kunne bruke id'en content, f.eks: <div id="content"></div>. Hvis du bruker content id'en på et annet element, f.eks span, så vil denne ikke fungere siden den er begrenset til div i CSS'en. Id'er skal bare brukes på et element. Id'en er unik og skal bare oppstå en gang i dokumentet.

div.klasse er da begrenset til div elementet som en klasse. Klasser kan brukes flere ganger gjennom dokumentet på flere div elementer f.eks.

Hvis du vil la være å begrense en klasse eller id til et element, så dropper du bare å skrive element typen først, slik f.eks: #content for id eller .content for klasse. Da kan du bruke <span id="content"></span> eller <h2 class="content"></h2>

Radar911 · 12. oktober 2004

Funker delvis nå. Det vil si, "content" har ikke word-wrap (linja bare fortsetter å utvide horizontal scrollbar) og den er egentlig ikke til høyre for menyen. Den er enten over eller under den.

Endret 12. oktober 2004 av Radar911

FuLu · 12. oktober 2004

Det kan hende hmm at bredden på meny (eventuelt elementene inni) og bredden på content blir for bred for skjermen. Og da kan det hende at de wrapper. At f.eks content vil skli under meny.

Jeg for min del foretrekker å ha fast bredde på en "container" som meny og content er inni. F.eks er container 760px bred, meny er 160px bred og content er 600px bred. Så selv om du resizer vinduet, så vil ikke content eller meny gå under hverandre.

PoleCat · 12. oktober 2004

@PoleCat: når du bruker float på et element, så "kollapser" den helt, dvs bredden blir ikke 100%, bredden på #menu blir avhengig av elementenes bredde som er inni #menu.

Uff, selvfølgelig. My bad. :blush:

Radar911 · 12. oktober 2004

Vil det å ha en "container" fikse det andre problemet også? Det vil si det faktum at "content" enten stiller seg over eller under menyen (avhengig av hvor jeg putter div-tag'en), men ikke til høyre for menyen.

Endret 12. oktober 2004 av Radar911

FuLu · 12. oktober 2004

Tok å snekkra sammen et eksempel for deg om du vil myse litt LINK

Radar911 · 13. oktober 2004

Nå har jeg i mitt overraskende (*host, hark* ) kombinert noe av ditt og PoleCat's oppsett, men content kommer under menyen.

<BODY>
<DIV id=container>

<DIV class=boks>

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

<p>Teksten her</p>

<div class="bottom"></div>

</div>

<br>

<div class="boks">

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

<p>Teksten her</p>

<div class="bottom"></div>

</div>

<DIV id=content>

<P>Lorem ipsum, etc... </P></DIV>

<DIV class=dummy> </DIV></DIV></BODY></HTML>

Endret 13. oktober 2004 av Radar911

FuLu · 13. oktober 2004

Tja, eneste som er feil i html-koden er at du ikke har brukt quote rundt teksten på noen av id/klassene du setter på noen av elementene. alt må være <div id="idnavnet" eller <div class="klassenavnet".. men garantert ikke så farlig i dette tilfellet.

Vanskelig å se noe annet feil i html'en, kanskje poste CSS'en?

Radar911 · 13. oktober 2004

{
TEXT-ALIGN: center;

}

#container {

MARGIN: 0px auto;

WIDTH: 800px;

BACKGROUND-COLOR: #efe9ed;

TEXT-ALIGN: left;

}

.boks {

background: url("middle.jpg") repeat-y;

width: 250px;

text-align: center;

}

.bottom {

height: 10px;

overflow: hidden;

background: url("bottom.jpg");

}

#content {

PADDING-RIGHT: 0px;

PADDING-LEFT: 0px;

FLOAT: left;

PADDING-BOTTOM: 10px;

WIDTH: 550px;

PADDING-TOP: 10px;

BACKGROUND-COLOR: #fcfbe4;

}

#content P {

PADDING-RIGHT: 10px;

PADDING-LEFT: 10px;

PADDING-BOTTOM: 2em;

MARGIN: 0px;

PADDING-TOP: 0px;

TEXT-ALIGN: justify;

}

DIV.dummy {

CLEAR: both;

}

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");

}

Endret 13. oktober 2004 av Radar911

FuLu · 13. oktober 2004

Har kanskje ikke noe å si på siste linja i hver av definisjonene, men du bør helst passe på å avslutte alle linjer med ;

.boks klassen floates ikke, prøv å putte float: left; i .boks

Radar911 · 13. oktober 2004

Når jeg puttet float: left; i boks, så endte meny nummer to til venstre og litt nedenfor meny nummer en, og content er fremdeles under begge. Har fikset alle små syntaks-feil i koden nå (manglende semi-kolon, o.l.).

Endret 13. oktober 2004 av Radar911

FuLu · 13. oktober 2004

Uff Hva med å putte .boks div'ene inni enda en div med id'en #meny, fjerner float fra .boks og putter float i #meny

<div id="meny">
<div class="boks">
...
</div>
</div>

og i CSS'en:

#meny { float: left; }

Radar911 · 13. oktober 2004

Fikk samme feilen, hmm (meny to til venstre for meny en, og content under menyene).

Endret 13. oktober 2004 av Radar911

Radar911 · 13. oktober 2004

Etter litt om og men har jeg endelig fått fikset det. Her er løsningen:

<DIV id="container">

<DIV id="content">

<P>Lorem ipsum, etc.... </P></DIV>

<DIV class="menu">

<DIV class="boks">

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

<p>Teksten her</p>

<div class="bottom"></div>

</div></div>

<br>

<br>

<div class="menu">

<div class="boks">

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

<p>Teksten her</p>

<div class="bottom"></div>

</div></div>

<DIV class=dummy> </DIV></DIV>

{

text-align: center;

}

#container {

margin: 0px auto;

width: 800px;

background-color: #efe9ed;

text-align: left;

}

.boks {

background: url("middle.jpg") repeat-y;

width: 250px;

text-align: center;

}

.bottom {

height: 10px;

overflow: hidden;

background: url("bottom.jpg");

}

.menu {

float: left;

}

#content {

padding-right: 0px;

padding-left: 0px;

float: right;

padding-bottom: 10px;

width: 550px;

padding-top: 10px;

background-color: #fcfbe4;

}

#content P {

padding-right: 10px;

padding-left: 10px;

padding-bottom: 2em;

margin: 0px;

padding-top: 0px;

text-align: justify;

}

DIV.dummy {

clear: both;

}

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");

}

Endret 13. oktober 2004 av Radar911

Logg inn

Hjelp til CSS-Layout

Anbefalte innlegg

FuLu

Videoannonse

Radar911

FuLu

PoleCat

Radar911

FuLu

Radar911

FuLu

Radar911

FuLu

Radar911

FuLu

Radar911

Radar911

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Populær nå

Norway Cup, barn og vold 1 2 3 4

Hvem er aktive 0 medlemmer