Neues Design oder so @ tutorials.de: Tutorials, Forum & Hilfe

crashx · 12.04.07 21:34

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.

HTML-Code:

<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>

Und noch die dazugehörige CSS:

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.

**Jan-Frederik Stieler** · 12.04.07 21:42

Hi,
ist die Seite auch irgendwo online? Hab jetzt keine Lust mir das Offline anzusehen.

Viele Grüße

crashx · 12.04.07 21:43

//Edit:

ist nun Online

http://web40.rh-server.ch/

**Jan-Frederik Stieler** · 12.04.07 21:46

Ist es ein Problem das mal schnell aufn Server zu laden?

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

neues logo design

neues Design für WBB

E-Mail:

Abonnieren Abbestellen