Gå til innhold

Hjelp med på rett vei med bokser

dagasc

Av dagasc
i Programmering og webutvikling

Anbefalte innlegg

dagasc

dagasc

Skrevet
Skrevet

Jeg skal lage en hjemmeside som har bokser noe a là www.mirc.org f. eks.

 

Jeg trenger en dytt i rikitg retning, hvordan lage dette på en bra måte? Og enkelt, jeg trenger å lære dette. Da jeg er gasnke fersk på web design og slik.

 

Laget en veldig dårlig skisse i paint, slik at det er lett å forstå.

 

layout.GIF

 

Takker på forhånd.

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
zyx

zyx

Skrevet
Skrevet

Jeg foreslår egentlig at du begynner å lese litt rundt omkring. Det er sikkert noen her som kan hjelpe deg i gang med PHP og scripting hvis de gidder. Jeg har ikke så mye tid til å hjelpe deg nå da jeg sitter på jobb og har mye annet jeg må gjøre. Men jeg laget en kjapp mal, er mye som kan gjøres bedre og enklere med den, men du skjønner nok prinsippet. Du kan ta koden nedenfor og lime den inn på denne side: http://www.draac.com/htmltester.html og se hvordan det ser ut. Ser ikke så fint ut med alle fargene, det er kun brukt for at du skal skjønne logikken bak dette...

 

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
margin:0;
padding:0;
}

#wrapper {
width:800px;
margin:0;
padding:0;
height: 600px;
}

#logo {
background-color:#3300CC;
padding:10, 10, 10, 10;
float:left;
width: 800px;
}

#left {
background-color:#3300FF;
width:200px;
float:left;
height:inherit;
}

#menu {
background-color:#00CC99;
height:50%;
width:inherit;
}

#stats {
background-color:#FF0033;
height:50%;
width:inherit;
}

#index {
width:600px;
background-color:#FF9966;
float:right;
vertical-align: top;
height: inherit;
}
</style>
</head>

<body>
<div id="logo">her er logo</div>
<div id="wrapper">
<div id ="left">
   	<div id="menu">
   	  <p>her er menyen</p>
   	  <p>punkter</p>
   	  <p>punkter</p>
   	  <p>punkter</p>
   	  <p>punkter</p>
   	  <p> </p>
   	</div>
       <div id="stats">
         <p>her er stats</p>
         <p>punkter</p>
         <p>punkter</p>
         <p>punkter</p>
         <p>punkter</p>
       </div>
   </div>
<div id="index">
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin dictum  venenatis metus. Phasellus molestie. Ut at lorem. Donec nibh. Nunc sit  amet augue. In a massa. Quisque sit amet ligula non lectus mattis  mattis. Praesent non metus a dui euismod semper. Donec quam. Mauris  bibendum egestas nunc. Integer mauris odio, vehicula sed, posuere id,  porttitor in, felis. Aliquam pretium. Morbi semper, dui eu convallis  iaculis, eros quam euismod justo, ac posuere nisl mi sit amet nisi.
    Sed porta eros a turpis. Vivamus sollicitudin. Sed erat ante,  blandit nec, hendrerit at, aliquet mollis, felis. Donec id justo. Duis  nibh ante, gravida eget, tincidunt et, ultrices a, quam. Morbi nonummy  dui vitae ante. Fusce non lectus quis ligula condimentum posuere. Fusce  eget risus. Duis in risus. Ut a tellus. Vestibulum consequat suscipit  diam. Fusce luctus ultricies lacus. Aenean elementum tempus est. Donec  imperdiet. Aenean elementum sodales arcu. Donec sem mi, mollis nec,  ullamcorper sed, faucibus ac, justo.
    Nulla feugiat tincidunt nisl. Praesent scelerisque, justo sed semper  malesuada, tellus sem tincidunt risus, vel viverra nibh nulla eget  tortor. Fusce elit. Vivamus viverra. Etiam venenatis tellus accumsan  sem. Suspendisse commodo tempor nulla. In hac habitasse platea  dictumst. Vestibulum a urna. Quisque eget nisi. Nam consequat.  Phasellus nisl elit, adipiscing vel, pulvinar eu, porta at, odio. Donec  non magna at neque cursus ultricies. Etiam fermentum, leo at suscipit  rhoncus, ante nulla vulputate est, ac congue nulla sem et dolor. Sed  porta, enim nec tempus egestas, turpis dui iaculis pede, nec euismod  mauris nibh at odio. Aliquam tempus leo id elit. Pellentesque mollis  libero vel nibh. Etiam porttitor. Integer non lectus. Pellentesque  scelerisque, justo ut adipiscing ultrices, est diam aliquam lorem, a  cursus erat enim id leo. Aenean lacinia congue ante.
   </div>
</div>
</body>
</html>

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste

  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...