Hjelp til CSS [LØST]

ZeRKoX · 6. august 2007

Hallo.

Jeg driver og lærer litt CSS, og jeg trenger hjelp.

Viss jeg skal lage en side der det er en header som er 800*80.

Det er en meny som er lodrett, til venstre, som er 100 brei, og til høgre for den er innholdsvinduet, som er 600 bredt, så kommer et lite infovindu som er 100 bredt til høgre for den. Disse tre skal være så lange som det er nødvendig (de skal være like lange)

Under hele sulamitten skal det være en footer.

Hvordan skal CSS filen se ut viss html filen ser slik ut:

<html>
<head>
<title>En Side</title>
<link href="default.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header">
 <img src="images/header">
</div>
<div id="meny">
 <ul>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
  <li><a href="#">Link 5</a></li>
  <li><a href="#">Link 6</a></li>
  <li><a href="#">Link 7</a></li>
 </ul>
</div>
<div id="innhold">
 <h1>En overskrift</h1>
 <p>Masse Innhold. Masse Innhold. Masse Innhold. Masse Innhold. 
 Masse Innhold. Masse Innhold. Masse Innhold. Masse Innhold. Masse Innhold. 
 Masse Innhold. Masse Innhold. Masse Innhold. Masse Innhold. Masse Innhold. </p>
 <h1>Enda en overskrift</h1>
 <p>Masse Innhold. Masse Innhold. Masse Innhold. Masse Innhold. 
 Masse Innhold. Masse Innhold. Masse Innhold. Masse Innhold. Masse Innhold. 
 Masse Innhold. Masse Innhold. Masse Innhold. Masse Innhold. Masse Innhold. </p>
 <h1>Enda en overskrift</h1>
 <p>Masse Innhold. Masse Innhold. Masse Innhold. Masse Innhold. 
 Masse Innhold. Masse Innhold. Masse Innhold. Masse Innhold. Masse Innhold. 
 Masse Innhold. Masse Innhold. Masse Innhold. Masse Innhold. Masse Innhold. </p>
 <h1>Enda en overskrift</h1>
 <p>Masse Innhold. Masse Innhold. Masse Innhold. Masse Innhold. 
 Masse Innhold. Masse Innhold. Masse Innhold. Masse Innhold. Masse Innhold. 
 Masse Innhold. Masse Innhold. Masse Innhold. Masse Innhold. Masse Innhold. </p>
</div>
<div id="info">
 <p>Litt info om diverse ting</p>
 <p>Enda mer info skal her...</p>
</div>
<div id="footer">
 <p><a href="mailto:[email protected]">Mail til webmaster</a>
</div>
</body>
</html>

Er det noen greie sjeler her som har lyst å sette opp en CSS, som plasserer de forsjellige divene rett? Jeg skal legge inn fonter, fontstørrelse osv etterpå, så dere skal ikke tenke på det, det er bare plassering av div-ene som jeg ikke får til, men viss dere hjelper meg, så kan jeg se "hvordan det skal gjøres".

Endret 15. august 2007 av obrestad

Stian Jacobsen · 7. august 2007

Jeg er en grei sjel.. men du kommer ikke til å lære noe om jeg skriver hele css-skjemaet ditt..

Google > css+beginner+guide

ZeRKoX · 7. august 2007

Jeg kan CSS, sånn ca, men jeg får ikke ting til å stemme. Jeg tror jeg prøver, så legger jeg det ut her, så kan dere se hva jeg gjør feil....

mikk- · 7. august 2007

For å få dem til å være like lange må du bruke "fauxcolumns", som bare gir en _illusjon_ av at de er like lange. Kjapt fortalt har du et bakgrunnsbilde i BODY eller en wrap-div som tilsvarer hvordan de tre kolonnene ser ut.

Lag et rom som alle spaltene har plass i, i bredden, og sett alle til float:left.

Stian Jacobsen · 8. august 2007

For å få dem til å være like lange må du bruke "fauxcolumns", som bare gir en _illusjon_ av at de er like lange. Kjapt fortalt har du et bakgrunnsbilde i BODY eller en wrap-div som tilsvarer hvordan de tre kolonnene ser ut.

Lag et rom som alle spaltene har plass i, i bredden, og sett alle til float:left.

9228440[/snapback]

Om jeg ikke er helt på villspor, så går det vell å bruke javascript til dette også.. men da kan brukere som har slått av js få en helt annen opplevelse av nettsiden :/

Peter · 8. august 2007

Færre enn 0.5% av mannen i gaten har avskrudd javascript, så hovedargumentet mitt for å skru sammen sider som også funker uten javascript er for søkemotorenes del.

ZeRKoX · 9. august 2007

Jeg har dette i html-fila:

<html>
<head>
<title>En Side</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="side">
 <div id="topp">
  <img src="images/header.jpg" width="800" height="80">
 </div>
 <div id="meny">
  <ul>
   <li><a href="#">Link 1</a></li>
   <li><a href="#">Link 2</a></li>
   <li><a href="#">Link 3</a></li>
   <li><a href="#">Link 4</a></li>
   <li><a href="#">Link 5</a></li>
   <li><a href="#">Link 6</a></li>
   <li><a href="#">Link 7</a></li>
  </ul>
 </div>
 <div id="innhold">
  <h1>En overskrift</h1>
  <p>Masse Innhold. Masse Innhold. Masse Innhold. Masse Innhold. 
  Masse Innhold. Masse Innhold. Masse Innhold. Masse Innhold. Masse Innhold. 
  Masse Innhold. Masse Innhold. Masse Innhold. Masse Innhold. Masse Innhold. </p>
  <h1>Enda en overskrift</h1>
  <p>Masse Innhold. Masse Innhold. Masse Innhold. Masse Innhold. 
  Masse Innhold. Masse Innhold. Masse Innhold. Masse Innhold. Masse Innhold. 
  Masse Innhold. Masse Innhold. Masse Innhold. Masse Innhold. Masse Innhold. </p>
  <h1>Enda en overskrift</h1>
  <p>Masse Innhold. Masse Innhold. Masse Innhold. Masse Innhold. 
  Masse Innhold. Masse Innhold. Masse Innhold. Masse Innhold. Masse Innhold. 
  Masse Innhold. Masse Innhold. Masse Innhold. Masse Innhold. Masse Innhold. </p>
  <h1>Enda en overskrift</h1>
  <p>Masse Innhold. Masse Innhold. Masse Innhold. Masse Innhold. 
  Masse Innhold. Masse Innhold. Masse Innhold. Masse Innhold. Masse Innhold. 
  Masse Innhold. Masse Innhold. Masse Innhold. Masse Innhold. Masse Innhold. </p>
 </div>
 <div id="info">
  <p>Litt info om diverse ting</p>
  <p>Enda mer info skal her...</p>
 </div>
 <div id="footer">
  <p><a href="mailto:[email protected]">Mail til webmaster</a>
 </div>
</div>
</body>
</html>

Og dette i CSS-Fila:

#side {  width: 810px;
 margin: 0px auto;}

#topp {  width: 800px;
 height: 80px;
 margin: 0px auto;}

#menu {  width: 100px;
 float: left;
 margin: 0px auto;}

#innhold {	width: 600px;
 float: left;
 margin: 0px auto;}

#info {  width: 100px;
 float: left;
 margin: 0px auto;}

#footer {	width: 800px;
 height: 20px;
 float: left;}

Og siden ser SLIKut...

Hva er det jeg ikke har fått rett?

Bozzeye · 10. august 2007

#side {  width: 810px;
margin: 0px auto;}

#topp {  width: 800px;
height: 80px;
margin: 0px auto;}

#menu {  width: 100px;
float: left;
margin: 0px auto;}

#innhold { width: 600px;
float: left;
margin: 0px auto;}

#info {  width: 100px;
float: left;
margin: 0px auto;}

#footer { width: 800px;
height: 20px;
float: left;}

Du har skrevet float: left; på innhold, den skal vere float: right; om eg ikkje tar feil.

Kim T · 13. august 2007

Siden du skriver følgende css på alt!: margin: 0px auto; Så regner jeg med du ønsker at siden din skal midtstilles i nettleseren? I såfall kan dette gjøres med følgende CSS:

body {
width: 1000px; <--- Bredden på siden din
margin: auto;
}

Dermed trenger du ikke å skrive det på alt det andre du putter inn i siden din. Når det gjelder problemet ditt så ville jeg ha gjort følgende.

* {    /* større sjangse for at alt ser likt ut i alle nettlesere ;-)
margin: 0;
padding: 0;
}

body {  /* Det er bare id, klasser som skal ha enten # eller . fremfor taggen 
*/
width: 810px;
margin: 0 auto;
}

#side {  

}

#topp { 
background-image: url(images/header.jpg);
height: 80px;
width: 800px;
}
#meny {   /* Er en fordel å skrive det samme i CSS som i tagen (menu, meny) ;-) */
width: 100px;
float: left;
}

#innhold { 
float: left;
margin-left: 120 px;
}

#info {  width: 100px;
float: left; /* Denne skjønner jeg ikke? Man trenger ikke floate hvis man kun har en div på en linje. Automatisk lesing er fra venstre mot høyre. */
}

#footer {
height: 20px;
}

<html>
<head>
<title>En Side</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>

<!-- Å legge bilde i div tag er kun når man legger inn en nyhet osv... Design skal normalt legges som bakgrundsbilder i css stilen. Dermed kan man la tag'en stå "tom" -->

<div id="topp"></div>


<div id="side">
<!-- Mange div'er seg ihjel her kan du legge en id på menyen og unngå en "div" tag -->

 <ul id="meny">
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
  <li><a href="#">Link 5</a></li>
  <li><a href="#">Link 6</a></li>
  <li><a href="#">Link 7</a></li>
 </ul>

<div id="innhold">
    <h1>Lorem Lipsum er en fin side (http://www.lipsum.com)... t</h1>
           <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec est ante, luctus in, varius id, congue volutpat, libero. Morbi dolor lorem, mollis ut, tempor in, ornare id, velit. Quisque vitae orci nec nibh varius rhoncus. Morbi tellus purus, rhoncus ac, pretium a, venenatis vel, libero. Phasellus euismod. Sed placerat molestie enim. Aenean a elit nec magna venenatis tempus. Fusce a augue at nulla laoreet ultrices. Curabitur sapien mauris, rhoncus nec, condimentum ac, auctor in, lacus. Nunc vitae tellus non magna consequat porta. Suspendisse potenti. Ut sapien nibh, consequat et, tempus eu, venenatis vitae, dolor. Maecenas lobortis volutpat pede. </p>

 <h1>Enda en overskrift</h1>
 <p>Masse Innhold. Masse Innhold. Masse Innhold. Masse Innhold. 
 Masse Innhold. Masse Innhold. Masse Innhold. Masse Innhold. Masse Innhold. 
 Masse Innhold. Masse Innhold. Masse Innhold. Masse Innhold. Masse Innhold. </p>
 <h1>Enda en overskrift</h1>
 <p>Masse Innhold. Masse Innhold. Masse Innhold. Masse Innhold. 
 Masse Innhold. Masse Innhold. Masse Innhold. Masse Innhold. Masse Innhold. 
 Masse Innhold. Masse Innhold. Masse Innhold. Masse Innhold. Masse Innhold. </p>
 <h1>Enda en overskrift</h1>
 <p>Masse Innhold. Masse Innhold. Masse Innhold. Masse Innhold. 
 Masse Innhold. Masse Innhold. Masse Innhold. Masse Innhold. Masse Innhold. 
 Masse Innhold. Masse Innhold. Masse Innhold. Masse Innhold. Masse Innhold. </p>
</div>
<div id="info">
 <p>Litt info om diverse ting</p>
 <p>Enda mer info skal her...</p>
</div>
<div id="footer">
 <p><a href="mailto:[email protected]">Mail til webmaster</a>
</div>
</div>
</body>
</html>

Mulig feil i dette... må se igjennom etterpå sitter på jobben.... :blush:

Kim...

Endret 13. august 2007 av kimthoma

ZeRKoX · 15. august 2007

Jeg har fått dette til, bare steng tråden.

Endret 15. august 2007 av obrestad

Logg inn

Hjelp til CSS [LØST]

Anbefalte innlegg

ZeRKoX

Lenke til kommentar

Videoannonse

Stian Jacobsen

Lenke til kommentar

ZeRKoX

Lenke til kommentar

mikk-

Lenke til kommentar

Stian Jacobsen

Lenke til kommentar

Peter

Lenke til kommentar

ZeRKoX

Lenke til kommentar

Bozzeye

Lenke til kommentar

Kim T

Lenke til kommentar

ZeRKoX

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Populær nå

Gode investeringer på 800k

Trump 2025 1 2 3 4 152

Tinder er skadelig for menn. 1 2 3 4 271

Elbil-tråden 1 2 3 4 1157

Hvem er aktive 0 medlemmer