CSS Table (Box) Design - Hilfe, Tutorials, Programme?

webix · 20. November 2006

Hallo,

im Internet habe ich einige Quellen zu dem Thema gefunden, leider jedoch ohne weiteren Erfolg. Wer kennt gute Tutorials zu dem Thema, eventuell gibt es Programme, die einem das Designen abnehmen.

Maik · 20. November 2006

Sprichst du jetzt von den sog. CSS-Layouts?

Wenn ja, dann hätte ich da ein paar interessante Seiten im Angebot:

Wenn nein, dann solltest du dein Vorhaben etwas genauer beschreiben und auch mitteilen, was daran bislang nicht wie gewünscht funktioniert hat.

webix · 20. November 2006

Hallo,

vielen Dank für die Links, sie helfen mir weiter.

Was sagt Ihr zu meinen Anfängen, sind die Grundzüge korrekt, weitere Optimierungen möglich:

style.css

Code:

html,
body {
  padding: 0px;
  margin: 0px;
  color: #1A1A1A;
  background-color: #ffffff;
}

#logo {
  height: 101px;
  margin: 0px;
  background-image:url("Bilder/hintergrund.gif");
  background-repeat: repeat;
}

#box {
  position: absolute;
  padding:0px;
  left:12%;
  width:600px;
  top:104px;
  float:left;
  background-color: #ffffff;
}

#kantinchen_logo {
  position: absolute;
  top: 0px;
  width:260px;
  left:11%;
}

#kantinchen_apfel {
  position: absolute;
  top: 0px;
  width:129px;
  left:75%;
}

#infolog {
  position: absolute;
  padding:0px;
  width:166px;
  top:104px;
  left:72%;
}

#info {
  position: absolute;
  font:bold 11pt Verdana, Arial, Helvetica, sans-serif;
  color:#1A5A7F;
  top:156px;
  left:73%;
}

#login{
  position: absolute;
  font:11pt Verdana, Arial, Helvetica, sans-serif;
  color:#1A5A7F;
  padding:0px;
  width:167px;
  top:210px;
  left:72%;
  border-width:thin;
  border-color:#C7C7C7;
  border-style:solid;

}

input {
	margin:0 0 10px 0;
	padding:1px;
	background:#EDF7FC;
	border:1px solid #AEDBF0;
	font:bold 13px Verdana, Arial, Helvetica, sans-serif;
	color:#267DAC;
	}

html:

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" xml:lang="de" lang="de">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>titel</title>

    <link rel="stylesheet" href="style.css" type="text/css" />

  </head>

  <body>

<div id="logo"></div>

<div id="box">&nbsp;</div>

<div id="menu">&nbsp;</div>

<div id="kantinchen_logo"><img src="Bilder/kantinchen_logo.gif" width="260" height="101" alt="Kantinchen Logo"></div>

<div id="kantinchen_apfel"><img src="Bilder/kantinchen_apfel.gif" width="129" height="101" alt="Kantinchen Apfel"></div>

<div id="infolog"><img src="Bilder/infolog.gif" width="166" height="94" alt="Info Bildschirm"></div>

<div id="info">Gast</div>
<form method="post" action="">
<div id="login"><strong>Benutzername:</strong><br>
<input type="text" name="login"><br>
<strong>Passwort:</strong><br>
<input type="password" name="passwort"><br>
<input type="submit" name="login" value="login">
</div>
</form>

  </body>
  </html>

CSS Table (Box) Design - Hilfe, Tutorials, Programme?

webix

Mitglied

Maik

webix

Mitglied

Neue Beiträge