Problem bei Codierung

taschi · 31.03.2009

Hallo,
ich wollte meine Homepage umgestalten doch dass Lay wie ich es mir vorstelle bekomme ich einfach nicht hin. Ich hab es schon so lang jetzt versucht..

Ich muss zugeben ích bin noch kein Profi auf dem Gebiet aber immer noch fleißig am lernen! Nur das ist immer noch eine Hürde die ich überwunden muss...

Hier hab eich uach mal etwas mit Paint schnell hingekritzelt wie ich es ungefähr haben will:

Das Layout also das Grafische mache ich selbst, dass ist kein Problem aber da liegt halt noch das vor...
Ich will es so in eine Tabelle haben dass auch wirklich die Navigationskästchen oben mit hintergrund als Kästchen angezeigt werden und nebeneinander, sowie halt auf dem Bild.
Das Header das ist kein Problem das Mache ich. Aber das BIld im Header soll halt vielleicht uach in einer Tabelle sein, damit ich dieses auch immer wieder ändern Kann usw eventuell auch ein Wechselbild einfügen kann.
unten in das Kästchen halt auch ne Tabelle und um den Inhalt und das is dann meine sache aber man sollte die breite ändern können mit width und higth halt..
Hoffe man kann mir helfen auch wenn das ein ziemlich erbärmlicher weg ist meiner meinung nach..

martial · 31.03.2009

AW: Problem bei Codierung

Darf man fragen mit welchem Programm du das machst?
Hast du dir schon mal Tutorials dazu angeschaut?

taschi · 31.03.2009

AW: Problem bei Codierung

mit adope dreamwaever (verzeihung falls das jetz falschgeschrieben ist)
ja ich hab welche gesucht aber nichts richtiges gefunden dass es so zeigt wie ich es haben will..

martial · 31.03.2009

AW: Problem bei Codierung

Ich verstehe nicht so ganz, was du mit Tabellen meinst. Also redest du von richtigen Tabellen?
Das mit dem Bild ist ja relativ einfach gelöst oder? Du kannst bei Einfügen -> Bild ein Bild einfügen und dieses über den Link unten immer wieder ersetzen. Nur halt darauf achten, dass die Größe überein stimmt.

"dass auch wirklich die Navigationskästchen oben mit hintergrund als Kästchen angezeigt werden"

mit diesem Satz hab ich ehrlich gesagt auch so meine Schwierigkeiten ^^

pinkflo · 31.03.2009

AW: Problem bei Codierung

Schon mal nach frei verfügbaren templates gesucht. Hier eine ganz gute Seite, mit vielen hilfreichen links rund um das Thema Webdesign.

Allgemeiner Kram:
For Web Designers - Website Design Resources
Templatesseite:
Templates for Web Designers - Website Design Resources

taschi · 31.03.2009

AW: Problem bei Codierung

naja man brauch ode rkann doch mit tabellen arbeiten. und ich will diese halt so haben dass es am ende so aussieht wie auf meinem bild.
<table>
<td>
<tr>
</tr>
</td>
</table>
das mein ich.

und mit den kästchen meine ich dass wie auf dem bild die kästchen mit der navigation hervorgehoben sind.
danke an pinkflo da muss ich jetz ma gucken wie ich mich da zurechtfinden kann.

taschi · 27.04.2009

AW: Problem bei Codierung

leider bin ch immer noch nicht weiter mit meinem problem.. vielleicht kann mir doch noch jemand helfen...

cvdR · 27.04.2009

AW: Problem bei Codierung

du solltest es in/mit css layouten -> o-rfz. css4you.de

Doitsu · 27.04.2009

AW: Problem bei Codierung

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body {
  margin:0px;
}
div#main {
  text-align:center
}

div#header1 {
  margin:80px 0px 0px 200px;
  width:300px; 
  height:60px;
  border:1px solid #000;
}
div#header2 {
  position:absolute;
  left:604px; /* left bezieht sich so: margin-left vom header1 + width header 1 + width vom kasten + alle border groessen, wenn angegeben*/
  top:80px;
  border:1px solid #000;
  width:400px;
  height:60px;
}
div#kasten {
  position:absolute;
  top:40px;
  left:502px; /* left: margin-left header + width header + border */
  width:100px;
  height:100px;
  border:1px solid #000;
}
div#spruch {
  position:absolute;
  top:60px;
  left:800px;
}
div#zusatz {
  position:absolute;
  left:502px;
  top:145px; /* top: top vom kasten + height vom kasten + 5px abstand vom kasten (meine angabe) */
  height:30px;
  width:100px;
  border:1px solid #000;
}
div#navi1 {
  position:absolute;
  left:614px; /* left: wie bei header2 + abstand (bei mir 10px) */
  top:150px; /* top: top header2 + height header2 + 10px abstand*/
  width:80px;
  height:100px;
  border:1px solid #000;
}
div#navi2 {
  position:absolute;
  left:704px; /* left: left navi1 + width navi1 + abstand 10px */
  top:150px; /*top: wie navi1 */
  width:80px;
  height:100px;
  border:1px solid #000;
}
div#navi3 {
  position:absolute;
  left:794px; /* left: left navi2 + width navi2 + abstand 10px */
  top:150px; /*  top: wie navi1 */
  width:80px;
  height:100px;
  border:1px solid #000;
}
div ul { padding-left:16px; } /* abstand von links vom ul verringern (standard ca 30px) */
div#content {
  margin:120px auto 0px auto; /* marign-top: top navi + height navi - margin-top header1 - height header1 + 10px abstand; left, rigth: auto - damit es zentriert ist */
  width:500px;
  height:500px;
  border:1px solid #000;
}
-->
</style>
</head>
<body>
<div id="header1">header1</div>
<div id="header2">header2</div>
<div id="kasten">Kasten beim Header</div>
<div id="spruch">Spruch</div>
<div id="zusatz">Zusatz</div>
<div id="navi1"><h5>Ueberschrift1<h5>
  <ul>
   <li>Seite</li>
   <li>Seite2</li>
   <li>Seite3</li>
  </ul>
</div>
<div id="navi2"><h5>Ueberschrift2<h5>
  <ul>
   <li>Seite</li>
   <li>Seite2</li>
   <li>Seite3</li>
  </ul>
</div>
<div id="navi3"><h5>Ueberschrift3<h5>
  <ul>
   <li>Seite</li>
   <li>Seite2</li>
   <li>Seite3</li>
  </ul>
</div>
<div id="content">content</div>
</body>
</html>

Hoffe das geht so .. Genaueres musst du halt machen, border ist nur drin, damit du siehst, wann was anfaengt & aufhoert.

MfG..

Edit: http://seybold.jan-andresen.de/ - tu mir den gefallen, dafuer dass ich dir den code geschrieben habe, und lies das durch :>

taschi · 27.04.2009

AW: Problem bei Codierung

danke das ist echt nett=)=)