✔ CSS Layout erstellung

Status
Nicht offen für weitere Antworten.
A

alex130

Erfahrenes Mitglied
Hi
Könnte mir bitte jemand helfen, so ein CSS Layout zu erstllen, wie ich es auf dem Bild habe?
Ich schaff das nie, so wie ich es will.
Hier das Bild: KLICK
THX
 
Ich helfe gerne weiter, wenn es bei der Erstellung eines CSS-Layouts Probleme gibt, aber so von "null-auf-hundert" läuft nicht, und ist auch nicht der Sinn dieses Forums.

Bis dahin solltest Du Dich mal in die Thematik einlesen, dann versuchen, das erwünschte Layout auf die Beine zu stellen, und wenn es dann irgendwo hängt, kannst Du Dich hier mit Deinem Quellcode wieder melden.

Zum Schluß noch ein paar interessante Links zum Thema "CSS-Layout" mit Anleitungen und Beispielen:

  1. andreas kalt.de: Ein CSS-Layout erstellen
  2. barrierefrei.e-workers.de: Workshop - temp
  3. CSS 4 You - The Finest in Stylesheets: Workshop: Layouten ohne Tabellen
  4. css.maxdesign.com.au - CSS resources and tutorials for web designers and web developers
  5. intensivstation :: CSS Templates :: Templates
  6. selfHTML: CSS-basierte Layouts
  7. Stichpunkt CSS: Layout ohne Tabellen
  8. stu nicholls | CSS PLaY | CSS layouts
 
Hi
Ich hab jetzt hier mal den Quellcode, ich habe es jetzt hinbekommen, aber nun will ich das Layout in die mitte bringen, kannst du mir bitte dabei helfen?
Thx und hier der Code:

Code: 
<!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>Unbenanntes Dokument</title>
<style type="text/css">
body {
background-color: #00CCFF;
padding: 0px;
margin: 0px;
}

#container {
background-color: #00CCFF;
width: 800px;
}

#header {
background-color: #0066FF;
background-image: url(http://board.pcmasters.at/rama3.jpg);
width: 800px;
height: 150px;
border: 1px solid black;
margin-bottom: 5px;
}

#content {
	background-color: #0066FF;
	width: 640px;
	border: 1px solid black;
	margin-bottom: 5px;
	margin-left: 5px;
	position: absolute;
	left: 153px;
	top: 157px;
}

#box {
background-color: #0066FF;
width: 150px;
border: 1px solid black;
margin-bottom: 5px;
margin-right: 5px;
}

</style>
</head>
<body>
<div id="container">

<div id="header"></div>

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

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

<div id="content">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>

</div>

</body>
</html>
 
Klar, kein Problem ;)

Erweiter mal den Selektor #container mit den folgenden Angaben:

Code: 
#container {
background-color: #00CCFF;
width: 800px;
margin: 0 auto;
position: relative;
}
 
Thx es funktioniert.
Kannst du mir bitte noch helfen, falls ich noch fragen hab?
Thx

Edit: Ich hab schon wieder eine Frage, ich hab einen Footer gemacht (Code hab ich angehängt) und will dass der so breit wie der Content Bereich ist und genau unter dem Content Bereich ist.
Code: 
#footer {
background-color: 0066FF;
width: 640px;
margin-top: 5px;
}
 
Zuletzt bearbeitet:
Selbstverständlich kannst Du Dich mit offenen Fragen an das Forum wenden, denn dafür sind wir hier schliesslich da. ;)
 
alex130 hat gesagt.:
[...]

Edit: Ich hab schon wieder eine Frage, ich hab einen Footer gemacht (Code hab ich angehängt) und will dass der so breit wie der Content Bereich ist und genau unter dem Content Bereich ist.
Zum Vergrößern anklicken....
Okay, hab das Modell mal etwas überarbeitet ;)

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>Unbenanntes Dokument</title>
<style type="text/css">
body {
background-color: #00CCFF;
padding: 0px;
margin: 0px;
}

#container {
background-color: #00CCFF;
width: 800px;
margin: 0 auto;
}

#header {
background-color: #0066FF;
background-image: url(http://board.pcmasters.at/rama3.jpg);
width: 800px;
height: 150px;
border: 1px solid black;
margin-bottom: 5px;
}

.leftCol { /* linke Spalte */
width: 150px;
float: left;
}

.rightCol { /* rechte Spalte */
width: 640px;
float: right;
}

#content {
background-color: #0066FF;
width: 640px;
border: 1px solid black;
margin-bottom: 5px;
}

.box {
background-color: #0066FF;
width: 150px;
border: 1px solid black;
margin-bottom: 5px;
}

#footer {
background-color: #0066FF;
width: 640px;
margin-top: 5px;
border: 1px solid black;
}
</style>

</head>
<body>

<div id="container">
     <div id="header"></div>

     <div class="leftCol">
          <div class="box">
               <p>&nbsp;</p>
               <p>&nbsp;</p>
               <p>&nbsp;</p>
               <p>&nbsp;</p>
          </div>
          <div class="box">
               <p>&nbsp;</p>
               <p>&nbsp;</p>
               <p>&nbsp;</p>
               <p>&nbsp;</p>
          </div>
     </div>

     <div class="rightCol">
          <div id="content">
               <p>&nbsp;</p>
               <p>&nbsp;</p>
               <p>&nbsp;</p>
               <p>&nbsp;</p>
               <p>&nbsp;</p>
               <p>&nbsp;</p>
               <p>&nbsp;</p>
               <p>&nbsp;</p>
               <p>&nbsp;</p>
          </div>
          <div id="footer">footer</div>
     </div>
</div>

</body>
</html>
Anmerkung: eine ID darf in einem Dokument nur einmal vergeben werden. Deshalb habe ich die ID #box in die Klasse .box umgewandelt, da diese unbegrenzt verwendet werden darf. Der Aufruf erfolgt dann mit dem class-Attribut:

HTML: 
<div class="box">...</box>
 
Hi
Thx, aber jetzt habe ich noch eine Frage, es gehört zwar eigentlich ins Javascript Forum, aber ich will nicht nen extra Thread aufmachen, falls dau mir nicht helfen kannst, mach ich es halt.
Also meine Frage, wie lautet der Code damit sich ein Button beim draufklicken ändert? Also ich hab z.B. einen "Home" Button und wenn man ihn anklcikt, sieht er anderst aus.
Thx
 
Hi
Thx, jetzt hab ich schon wieder eine Frage, wenn ich normale Links mach mit
Code: 
<a href="#"><img src="button.jpg" /></a>
Dann werden die Rot umrandet, wie bekomm ich das weg?
Thx und sry dass ich so nerv.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück