Hjelp med koden (XHTML)

[Keito]

Tidligere i dag fant jeg ut at jeg skulle lage et nytt design til min personlige hjemmeside. Jeg lagde et utkast med Photoshop.

 

http://xbox.legazy.com/images/knk.jpg

 

Når jeg skulle begynne å skrive koden merket jeg at jeg har glemt det meste av XHTML og CSS, det er altfor lenge siden jeg brukte språkene sist. Jeg hadde en idè til hvordan det kunne gjøres med tables, men jeg klarer rett og slett ikke å få det til.

Det ville være til stor hjelp om noen kunne få satt meg i gang.

[PoleCat]

Fast eller relativ bredde?

[Keito]

Jeg tenkte å ha fast bredde.

[Marvil]

Bruk DIVs istedet for Tabeller.. I CSS-egenskapene til DIVen setter du bredden på DIVen.

[Keito]

Jeg har ikke brukt DIVs før, men ser at det er fler og fler som har sluttet å bruke tables etter Seybold '03. Skal prøve å skrive siden nå.

[PoleCat]

Her.

 

CSS:

* {
 margin: 0;
 padding: 0;
}

body {
 background: #000;
 color: #fff;
}

h1 {
 display: block;
 overflow: hidden;
 padding: 89px 0 0 0;
 height: 0 !important;
 height /**/: 89px;
 width: 381px;
 background: url("logo.gif") no-repeat;
 margin: 0 0 0 157px;
}

p {
 font-size: .7em;
 text-align: justify;
}

div#wrap {
 width: 942px;
 margin: 30px 10px 30px 25px;
}

div#menu {
 width: 156px;
 float: left;
}

div#menu ul {
 list-style: none;
}

div#menu ul li {
 display: inline;
}

div#menu ul li a {
 display: block;
 overflow: hidden;
 padding: 27px 0 0 0;
 height: 0!important;
 height /**/: 27px;
 background: #f0f0f0;
 width: 70px;
 margin: 0 0 3px 0;
}

div#menu ul li a:hover {
 background: #aaa;
}

div#content {
 width: 410px;
 float: left;
}

div#image {
 width: 331px;
 height: 398px;
 float: left;
 background-color: #fff;
 background-position: center center;
 background-repeat: no-repeat;
 border: 1px solid #cbcbcb;
 display: inline;
 margin: 0 0 0 42px;
}

.anime01 { background-image: url("anime01.gif"); }

 

HTML:

<div id="wrap">

 <h1>Keito no Kekyo</h1>
 
 <div id="menu">
 
   <ul>
  <li><a href="#">Link001</a></li>
  <li><a href="#">Link002</a></li>
  <li><a href="#">Link003</a></li>
  <li><a href="#">Link004</a></li>
  <li><a href="#">Link005</a></li>
  <li><a href="#">Link006</a></li>
  <li><a href="#">Link007</a></li>
  <li><a href="#">Link008</a></li>
  <li><a href="#">Link009</a></li>
  <li><a href="#">Link010</a></li>
  <li><a href="#">Link011</a></li>
  <li><a href="#">Link012</a></li>
  <li><a href="#">Link013</a></li>
</ul>
 
 </div>
 
 <div id="content">
  
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec tempor, velit sit amet mattis dictum, wisi magna venenatis sem,
in ultricies felis dui scelerisque orci. Nunc ipsum. Integer libero elit, dapibus id, eleifend sit amet, molestie sed, risus.
Proin quis massa. Vivamus vitae enim ut libero placerat hendrerit. Fusce sed augue vitae tortor pharetra sollicitudin. Praesent
risus eros, convallis et, mattis ut, volutpat quis, dui. Suspendisse a lectus ut lacus congue pulvinar. Mauris ornare ornare mi.
Morbi condimentum ultrices metus. Vestibulum rhoncus. Curabitur convallis porta enim. Praesent non nibh. Ut scelerisque tristique wisi.
In hac habitasse platea dictumst. Quisque eget diam. Sed ultricies laoreet libero. Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Duis in elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec tempor, velit sit amet mattis dictum, wisi magna venenatis sem,
in ultricies felis dui scelerisque orci. Nunc ipsum. Integer libero elit, dapibus id, eleifend sit amet, molestie sed, risus.
Proin quis massa. Vivamus vitae enim ut libero placerat hendrerit. Fusce sed augue vitae tortor pharetra sollicitudin. Praesent
risus eros, convallis et, mattis ut, volutpat quis, dui. Suspendisse a lectus ut lacus congue pulvinar. Mauris ornare ornare mi.
Morbi condimentum ultrices metus. Vestibulum rhoncus. Curabitur convallis porta enim. Praesent non nibh. Ut scelerisque tristique wisi.
In hac habitasse platea dictumst. Quisque eget diam. Sed ultricies laoreet libero. Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Duis in elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec tempor, velit sit amet mattis dictum, wisi magna venenatis sem,
in ultricies felis dui scelerisque orci. Nunc ipsum. Integer libero elit, dapibus id, eleifend sit amet, molestie sed, risus.
Proin quis massa. Vivamus vitae enim ut libero placerat hendrerit. Fusce sed augue vitae tortor pharetra sollicitudin. Praesent
risus eros, convallis et, mattis ut, volutpat quis, dui. Suspendisse a lectus ut lacus congue pulvinar. Mauris ornare ornare mi.
Morbi condimentum ultrices metus. Vestibulum rhoncus. Curabitur convallis porta enim. Praesent non nibh. Ut scelerisque tristique wisi.
In hac habitasse platea dictumst. Quisque eget diam. Sed ultricies laoreet libero. Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Duis in elit.</p>
  
 </div>
 
 <div id="image" class="anime01"></div>

</div>

Endret 22. august 2004 av PoleCat

[Keito]

Mange, mange tusen takk for at du tok deg tid til å skrive kode for siden, PoleCat. Det ble akkurat som jeg ville ha det. =D

[PoleCat]

Goodie.

 

Kanskje ikke så lærerikt at andre gjør arbeidet, men du kan jo lese litt på koden.