crashx
Erfahrenes Mitglied
Ich habe mühe meine bestehende Seite zu überabeiten, dies ist aber nöttig um mein geplantes Projekt umzusetzen.
Ich hänge einfach am Design und komme ned wirklich weiter.
Ich habe grosse probleme grafisch etwas umzusetzen und habe mich deswegen auf:
Einfach und informativ gestüzt.
Anbei der Quelltext in einer design "studie"
heisst einfach mal geschrieben.
Und noch die dazugehörige CSS:
Bin gespannt auf eure meinung und oder verbesserungs vorschläge.
Ich hänge einfach am Design und komme ned wirklich weiter.
Ich habe grosse probleme grafisch etwas umzusetzen und habe mich deswegen auf:
Einfach und informativ gestüzt.
Anbei der Quelltext in einer design "studie"
heisst einfach mal geschrieben.
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/layout.css">
</head>
<body>
<div class="holder">
<div class="top">
<div class="top_topl"><h1>www.r5gtt.ch</h1></div>
<div class="top_topr">
<form action="search.php" method="post">
<a href="index.php" class="first">Startseite</a> ¦
<a href="index.php" class="first">Registrieren</a> ¦
<a href="index.php" class="first">Login</a> ¦
<a href="index.php" class="first" style="cursor: help;">Hilfe</a> ¦
<input type="text" name="search" class="input">
<input type="submit" name="send" value="Suchen" class="submit">
</form>
</div>
</div>
<div class="navigation">
<div class="top_nav">Navigation</div>
<div class="link"><a href="index.php" class="second">Projekte</a></div>
<div class="link"><a href="index.php" class="second">Galerie</a></div>
<div class="link"><a href="index.php" class="second">Renault R5</a></div>
<div class="link"><a href="index.php" class="second">Technik</a></div>
<div class="link"><a href="index.php" class="second">Tips und Tricks</a></div>
<div class="link"><a href="index.php" class="second">Fahrerdatenbank</a></div>
<div class="link"><a href="index.php" class="second">Renault Clubs</a></div>
<div class="link"><a href="index.php" class="second">Links</a></div>
</div>
<div class="content">
<div class="top_con">www.r5gtt.ch - Startseite</div>
<h2>Titel</h2>
<div class="text_con">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>
</div>
<div class="news">
<div class="top_new">News</div>
<h3>12. Dezember 2006</h3>
<div class="text_new">
Ich bin umgezogen, da mich die viele Werbung auf r5gtt.ws4free.eu genervt hat,
habe ich mich entschlossen mir eine TopLevel Domain zuzulegen
<b>www.r5gtt.ch</b>
</div>
</div>
<div class="bottom">
<form action="login.php" method="post">
<input type="text" name="user" class="input">
<input type="text" name="pwd" class="input">
<input type="submit" name="send" value="Login" class="submit">
</form>
Einloggen mit Benutzername und Passwort
</div>
</div>
</body>
</html>
Code:
html, body {
margin: 0 auto;
border: 0px;
padding: 0 0 0 0;
font-family: verdana;
font-size: 12px;
font-weight: normal;
text-align: center;
height: 101%;
}
.holder {
margin: 0 auto;
border: 0px;
padding: 0 0 0 0;
width: 970px;
}
.top {
margin: 0 auto;
border: 0px;
padding: 0 0 0 0;
width: 970px;
height: 70px;
float: left;
text-align: right;
}
.navigation {
margin: 0 auto;
border: 0px;
padding: 0 0 0 0;
width: 150px;
float: left;
text-align: left;
}
.content {
margin: 0 auto;
border: 0px;
padding: 0 0 0 0;
width: 640px;
float: left;
text-align: left;
}
.news {
margin: 0 auto;
border: 0px;
padding: 0 0 0 0;
width: 180px;
float: left;
text-align: left;
}
.bottom {
margin: 0 auto;
margin-top: 20px;
border-top: 1px solid #FF9900;
padding: 20px 0 0 0;
width: 970px;
height: 70px;
float: left;
text-align: right;
}
.first:link {color:#FF9900; text-decoration: none;}
.first:visited {color:#FF9900; text-decoration: none;}
.first:active {color:#FF9900; text-decoration: none;}
.first:hover {color:#000000; text-decoration: none;}
.second:link {color:#666666; text-decoration: none; padding-left:8px;}
.second:visited {color:#666666; text-decoration: none; padding-left:8px;}
.second:active {color:#666666; text-decoration: none; padding-left:8px;}
.second:hover {color:#FF9900; text-decoration: none; padding-left:8px;}
h1 {
margin: 0 auto;
font-size: 36px;
}
h2 {
margin: 0 0 6px 12px;
font-size: 18px;
}
h3 {
margin: 0 0 6px 4px;
font-size: 11px;
}
form {
margin: 0 auto;
}
.input {
margin: 0 auto;
border: 1px solid #FF9900;
width: 70px;
font-size: 11px;
}
.submit {
margin: 0 auto;
border: 1px solid #FF9900;
width: 60px;
font-size: 11px;
background-color: #FFFFFF;
}
.top_topl {
margin: 10px 0 0 0;
border: 0px;
padding: 0px;
width: 370px;
text-align: left;
float: left;
}
.top_topr {
margin: 20px 0 0 0;
border: 0px;
padding: 0px;
width: 600px;
float: left;
letter-spacing: 1px;
}
.top_nav {
margin: 0 0 16px 0;
border-bottom: 1px solid #FF9900;
padding: 2px 2px 2px 4px;
width: 126px !important;
width: 134px;
float: left;
font-size: 14px;
font-weight: bold;
}
.top_con {
margin: 0 0 16px 0;
border-bottom: 1px solid #FF9900;
padding: 2px 2px 2px 4px;
width: 616px !important;
width: 624px;
float: left;
font-size: 14px;
font-weight: bold;
}
.top_new {
margin: 0 0 16px 0;
border-bottom: 1px solid #FF9900;
padding: 2px 2px 2px 4px;
width: 172px !important;
width: 180px;
float: left;
font-size: 14px;
font-weight: bold;
}
.link {
margin: 0 0 2px 0;
border-bottom: 1px dashed #FF9900;
padding: 2px 2px 2px 4px;
width: 126px !important;
width: 134px;
float: left;
font-size: 12px;
font-weight: bold;
}
.text_con {
margin: 0 auto;
border: 0px;
padding: 0 0 0 20px;
float: left;
width: 600px !important;
width: 620px;
text-align: justify;
}
.text_new {
margin: 0 auto;
border: 0px;
padding: 0 0 0 12px;
float: left;
font-size: 10px;
}Bin gespannt auf eure meinung und oder verbesserungs vorschläge.
