4 svar · 421 visningar · startad av egxezex
Tänkte lite med ideen att starta en hemsida.. Och insåg genast att mina kunskaper om html suger :)..
Så nu undrar jag om jag kan få lite tips hur man skapar en sida likt detta:
http://81.170.237.101/hitbar/Skiss3.jpg
Ska man använda tabellstruktur, eller vad är era bästa tips?
Jag skulle nog använda (x)html/css.
Tex såhär:
Men du får runda hörnen själv, det finns lite olika sätt att göra det på :)
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="css/master.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="top">
Hitbar!
<div id="navcontainer">
<ul id="navlist">
<li><a href="#">Start</a></li>
<li><a href="#">Music!</a></li>
<li><a href="#">LogIn</a></li>
<li><a href="#">Register</a></li>
</ul>
<div class="clear"></div>
</div>
<div id="online">Users<br />
online:</div>
</div>
<div id="content_left">
Yada yada!
</div>
<div id="content_right">
<div id="toprated">
<table>
<tr><th colspan="2">toprated</th></tr>
<tr><td>Böbö</td><td>9.5</td></tr>
<tr><td>Mjau</td><td>9.4</td></tr>
<tr><td>fören</td><td>9.3</td></tr>
</table>
</div><div id="mostplayed">
<table>
<tr>
<th colspan="2">most played </th>
</tr>
<tr><td>das A</td><td>555</td></tr>
<tr><td>Toaligan</td><td>134</td></tr>
</table>
</div>
</div>
</body>
</html>
och css/master.css
/* CSS Document */
body {
margin: 0;
padding: 0;
background-color: #339a99;
}
.clear {
clear: both;
}
#top {
background-color: #fe9900;
height: 75px;
}
#online {
position: absolute;
top: 10px;
color: #339a99;
left: 834px;
font-family: "Courier New", Courier, monospace;
font-size: 24px;
font-weight: bold;
}
#navcontainer {
position: absolute;
background-color: #339a99;
float: left;
margin-left: 317px;
margin-top: 45px;
padding: 5px;
border: 3px solid #fe9900;
}
#navlist {
margin: 0;
padding: 0 0 5px 10px;
font-size: 14px;
z-index: 1;
}
#navlist ul, #navlist li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
#navlist a:link, #navlist a:visited {
color: #fe9900;
text-decoration: none;
line-height: 14px;
font-weight: bold;
margin: 0 10px 4px 10px;
font-family: "Courier New", Courier, monospace;
font-size: 24px;
}
#content_left {
background-color: #337d98;
width: 600px;
height: 600px;
z-index: 2;
float: left;
}
#content_right {
float: left;
width: 150px;
}
#toprated {
background-color: #337d98;
margin: 40px 20px;
border: 3px solid #fe9900;
color: #fe9900;
height: 200px;
}
#toprated th {
border-bottom: 3px solid #fe9900;
text-align: center;
width: 140px;
}
#mostplayed {
background-color: #337d98;
margin: 40px 20px;
border: 3px solid #fe9900;
color: #fe9900;
height: 200px;
}
#mostplayed th {
border-bottom: 3px solid #fe9900;
text-align: center;
width: 140px;
}
De flesta kommentarer du troligen kommer att få här är att du INTE ska använda tabellstruktur för ditt hemsidebygge!
Försök att lära dig bygga med css t.ex. div istället, där css bestämmer hur allt ska se ut (formateringen av innehållet), och div innehåller all information som du vill att dina besökare ska hitta.
Precis som headbug har gett dig ett exempel på!
Tabeller är lämpade att använda när det är just en tabell du vill publicera, inte en hemsida.
Skulle vilja tacka headbug grymt mycket för koden du skrev ihop!!
Andra tips som kan vara bra på vägen är alltid välkommna.
Mitt tips är att leka med koden jag totade ihop och se till att du hajjar alla steg :) Kör så det ryker!