Einzelnen Beitrag anzeigen
  #6 (permalink)  
Alt 14.06.2010, 09:19
Huchinotte Huchinotte ist offline
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.02.2010
Beiträge: 38
Huchinotte befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von hubspe Beitrag anzeigen
schau mal hier, dort wird dir auf unterhaltsame Weise modernes Webdesign nahegebracht.
Hi ...........

erst einmal vielen Dank für den Tipp. Hab mir Teil 1 zugelegt und auch schon durchgelesen. Sehr unterhaltsam muss ich sagen.
Hab auch angefangen die Webseite nun rein auf CSS aufzubauen ohne Tabellen. Soweit hat das auch im Grunde schon geklappt. Hier mal der erste Entwurf rein auf CSS Container aufgebaut:


Uploaded with ImageShack.us

Nur ein Problem habe ich noch. In meinem Layout mit Tabellen habe ich rechts und links jeweils eine kleine Grafik die ich als Rand benutze (siehe Pfiff "Gasthaus zum Wahnsinn"). Die Grafik ist 12px bzw. 11px breit und ich wiederhole diese mit repeat y.
Beim Umbau auf css ohne Tabellen bekomme ich das aber irgendwie nicht hin. Kann mir einer einen Tipp geben wie ich rechts und links die Grafik integrieren kann?
Hier mal meine css
Code:
/*  ===============================================
Stylesheet für die Übungsseiten aus  "Little Boxes, Teil 1"
Stand:  3-spaltiges Layout mit float und margin (fertig)
Datei:  bildschirm.css
Datum:  2009-04-17
Autor:  Peter Müller
Aufbau: 1. Kalibrierung und Restauration
        2. Allgemeine Styles
        3. Styles für Layoutbereiche
        4. Sonstige Styles
================================================ */

/* ======================================
  1. Kalibrierung und Restauration
  ====================================== */
/* Reset - alle Abstände auf NULL */
*  { padding: 0; margin: 0; }
/* optional: erzwingt Scrollbar im Firefox */
html { height: 100%; margin-bottom: 1px; }
h2, h3, p, ul, ol { margin-bottom: 1em; }
ul ul { margin-bottom: 0; }
li { margin-left: 1em ; }
/* hier ggfs. Abstände für weitere Elemente restaurieren */


/* ======================================
  2. Allgemeine Styles
  ====================================== */
body {
  background-color: #8c8c8c;
  background-image:url(images/bg.jpg); 
}
h1 { font-size: 150%; }
h2 { font-size: 130%; }
h3 { font-size: 110%; } 
 
img#logo {
  background-color: white;
  color: black;
}
/* Skiplink ausblenden */
.skiplink {
  position: absolute;
  top: -9999px;
  left: -9999px;
  width: 0;
  height: 0;
  font-size: 0;
  line-height: 0;
}

/* ======================================
  3.  Styles für die Layoutbereiche
  ====================================== */
#wrapper {
  /* Hintergrundgrafik für drei Spalten */
  background-color:#151515;
  width: 820px;
  margin: 0px auto;
}

#kopfbereich {
  height:180px;
  position: relative;
  color: black;
  padding: 0px 0px 0px 0px;

}

#top {
position: relative;
background-color:#000;
height:30px;
width: 820px;
border-bottom:solid 1px #535353;
border-top:solid 1px #535353;
}

  #top p {
  font-size: 18px;
  font-variant:small-caps;
  color:#56686D;
  letter-spacing:10px;
  padding-left:10px;
  padding-top:5px;
  font-family: georgia,arial, helvetica, tahoma ,verdana,  sans-serif;
  }
  
#navibereich {
  /*background-color: pink; */ /* zum Testen Kommentar entfernen */
  background-color:#151515;
  float: left;
  width: 160px;
  padding-left: 20px;
  padding-top: 20px;
  margin-top: 0px;
}
  #navibereich ul {
    width: 6em;
  }
  #navibereich li {
    list-style-type: none;
    margin: 0;
  }
  #navibereich a {
	display:block;
	color:#93A5A9;
	font: normal 16px verdana, sans-serif;
	text-decoration:none ;
	text-align:left;
	width:160px;
	border-bottom:solid 1px #313131;
	font-size: 13px;line-height: 180%;
	font-family: "Trebuchet MS",arial, helvetica, verdana, tahoma, sans-serif;
  }

  #navibereich a:hover,
  #navibereich a:focus {
	background-color:#262626;
	color:#fff;
	text-decoration:none ;
  }
  #navibereich a:active {
    color: black;
    background-color: #d9d9d9;
  }
  
/* Style für #sidebar */
#sidebar {
  color:#93A5A9;
  background-color:#151515;
  float: right;
  width: 110px;
  padding: 10px;
  padding-top: 20px;
  margin-top: 0px;
}
#textbereich {
  color:#93A5A9;
  padding: 20px 10px 20px 20px;
  margin-left: 180px; /* Platz für #navibereich */
  margin-right: 140px; /* Platz für #sidebar */
  background-color:#202020;
  margin-top: 0px;
}
  #textbereich a {
  border-bottom: 1px dotted #cc0000;
}
  #textbereich a:hover,
  #textbereich a:focus {
    border-bottom: 1px solid #d90000;
  }

#fussbereich {
  clear:both;
  font: normal 11px verdana, sans-serif; 
  color: #fff; 
  padding:0px;
  height:24px;
  text-align:center;
  background-color:#222222;
  width:100%;
  border-top:solid 1px #343434;
}



/* Kontakt */

#kontaktform { clear: left; float: left; line-height: normal; width: 500px; margin: 0px 0px 10px 0px; padding: 0px 10px 10px 10px; }

#kontaktform label { clear: left; float: left; width: 100px; margin: 5px 4px 0px 0px; text-align: left; }

#kontaktform label.plabel { color: #C0C0C0; font-weight: bold; }

#kontaktform input, #kontaktform select, #kontaktform textarea { float: left; width: 250px; margin: 5px 0px 5px 0px; border: 1px solid #dedede; }

#kontaktform select{ width: 260px; color: #333; }

#kontaktform input{ padding: 2px 4px 2px 4px; color: #333; }

#kontaktform textarea{ padding: 2px 4px 2px 4px; height: 100px; color: #333; }

#kontaktform input.submit { width: auto; float: left; margin: 10px 5px 0px 105px; padding: 2px 10px 2px 10px; background-color: #ccc; color: #333; }

#kontaktform input.reset { width: auto; float: left; margin: 10px 10px 0px 0px; padding: 2px 10px 2px 10px; border: 1px solid #2F3842; background-color: #666; color: #ccc; }
und die index.html
Code:
<body>
<body id="startseite">
<div id="wrapper">
<div id="kopfbereich">
<div class="skiplink"><a href="#textbereich"></a></div>
<img src="http://xhtmlforum.de/images/back.JPG" id="logo" alt="Pfiff die Kleingaststätte" width="820" />
</div> <!-- Ende kopfbereich -->
<div id="top"><p>"Pfiff" - Die Kleingaststätte</p></div>
<div id="navibereich">
<ul>
  <li id="navi01"><a href="index.html">Startseite</a></li>
  <li id="navi02"><a href="galerie.html">Galerie</a></li>
  <li id="navi03"><a href="kontakt.html">Kontakt</a></li>
</ul>
</div> <!-- Ende navibereich -->

<div id="sidebar">
<h2>Werbung</h2>
<p>Hier könnte Ihre Werbung stehen</p>
<p>Werben Sie auf Pfiff.de</p>
</div> <!-- Ende sidebar -->

<div id="textbereich">
<h2>Startseite</h2>

<p><img src="ballon.jpg" alt="Roter Luftballon" width="78" height="100" class="bildrechts" />Dies ist ein Test Text <strong>auf Pfiff.de</strong>, dieser Text dient rein zu Testzwecken damit das Layout Grundgerippe angepasst werden kann.</p>

<p>Auf dieser Seite steht keine informativer Text und somit ist das auch nichts was sich sehen lassen kann<em>solange</em> bis das Grundlayout steht das für diese <em>Webseite</em> verwendet wird</p>

<ul>
  <li>Test 1</li>
  <li>Test 2
  <ul>
    <li>Untertest 1</li>
    <li>Untertest 2</li>
    <li>Untertest 3</li>
  </ul>
  </li>
  <li>Test 3</li>
</ul>

<p>Besuchen Sie <a href="http://www.google.de" title="google.de - die Suchmaschine">die Suchmaschine im Web</a> für weitere Informationen.</p>

</div> <!-- Ende textbereich -->

<div id="fussbereich">
<address>
<a href="<?php echo $root_dir; ?>www.gaststaette-pfiff.de">www.gaststaette-pfiff.de</a>&nbsp;|&nbsp;<a href="<?php echo $root_dir; ?>impressum.php">Impressum</a>&nbsp;|&nbsp;<a href="mailto:mirco.lang@freenet.de">Design by Mirco Lang</a>&nbsp;|&nbsp;<a href="<?php print $node_url?>#top">Seitenanfang</a>
</address>
</div> <!-- Ende fussbereich -->
</div> <!-- Ende wrapper -->
</body>
</html>

<!-- ende footer -->
Edit: Hab mal ein Layout hochgeladen damit ihr seht was ich meine
Angehängte Grafiken
Dateityp: jpg layout.JPG (17,1 KB, 6x aufgerufen)

Geändert von Huchinotte (14.06.2010 um 10:42 Uhr)
Mit Zitat antworten