Fragen zur ersten Homepage

Chickita · 01.01.2009

Bin jetzt dabei mir eine eigene Website zu basteln.
Da es meine erste ist, hab ich ehrlich gesagt keine große Ahnung von HTML, CSS, Flash ..... usw usw .

Hab mich ein wenig in die Materie eingelesen (selfhtml, homepage-baukasten, videobrain .... )

Naja, ist halt doch ganz schön schwierig für den Anfang.

Soweit hab ichs bisher geschafft.

Und da beginnt auch schon mein erstes Problem.
Wie bekomm ich die leere Stelle zwischen dem Banner und der linken Seite am besten weg?
Habs schon mit "hochschieben" der Div's versucht, ist aber doch nicht ganz so einfach :rolleyes:

Die sind auch alle nahtlos aneinander gefügt.

Habe das mit Div's gemacht. (insgesamt 5)
Das sind die vorhandenen. (jedes rote Kästchen ist ein Div)

Weiß nicht, ob das die beste Lösung ist. Wie macht ihr sowas?

Nun mein nächstes Problem. Bei meiner Navigation links hab ich ja schon 6 Buttons mit ins Bild integriert.
Geht das, das ich die auch "benutzen" kann? Also das ich da auf jeden einzelnen einen Link lege, um dann auf eine andere Seite meine Site zu kommen?

Das sollte dann natürlich nur in dem großen Bereich angezeigt werden ,damit es nicht immer alles wieder mit laden muss.

Wie gesagt, sind alles nur Div's. Keine Frames, Tabellen oder sonst was.

Ach ja, benutze Dreamweaver CS3 und Adobe Photoshop CS3

Und wäre für hilfreiche Tips wie ich die Site besser machen kann natürlich seeehr dankbar :uhm:

leohh · 01.01.2009

AW: Fragen zur ersten Homepage

Ein generelles reset hast du drin?

Code:

* {margin:0; padding:0;}

Damit entledigst du dich der browserseitigen Voreinstellungen, vieler HTML Elemente.
Ist aber mit Vorsicht zu geniessen, da du u.U. vieles wieder neu aufbauen muesstest.

Du kannst dir deine Links gleich vom DW erstellen lassen.
Ist irgendwo im Menue zu finden obowhl es der DW relativ haesslich macht.

Wie man es sonst noch so machen koennte:

cebito · 01.01.2009

AW: Fragen zur ersten Homepage

Code oder ein Link wäre hilfreicher als die Bilder.

Chickita · 01.01.2009

AW: Fragen zur ersten Homepage

OK hier mal der Code. Weil die Site noch nich hochgeladen ist.
Hab alles in der Enwurfsansicht erstellt.

<!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=utf-8" />
<title>Sugar Glider</title>
<style type="text/css">

</style>

</head>

<body>
<div id="navigation"><img src="Bilder/platzhalter1.jpg" alt="platzhalter" width="250" height="69" /><br />
<img src="Bilder/menue.jpg" alt="menue" width="250" height="621" /><br />
<br />
</div>
<div id="menue"></div>
<div id="inhalt">Herzlich Willkommen auf www.sugar-glider.de.tl</div>
<div id="banner"><img src="Bilder/banner.jpg" width="1250" height="175" alt="banner" /></div>
</body>
</html>

Also hab ich das generelles reset nich drin.
Les mich ma durch den Myspace - Thread. Vielleicht finde ich ja das was brauchbares

cebito · 01.01.2009

AW: Fragen zur ersten Homepage

Mal abgesehen von dem doch recht grauseligen code ist dein Banner 175px hoch und die navi die ja direkt anschließen soll hast du mit top 191px positioniert. Da muß ja 'ne Lücke sein.

Chickita · 01.01.2009

AW: Fragen zur ersten Homepage

Den grausiligen Code hab ich einzig und allein Dreamweaver zu verdanken

Hab jetzt versucht den top - Bereich zu verkleinern, aber so das die Lücke drin verschwindet bekomm ichs nich hin.
Habs nur auf eine minimalelücke reduzieren können oder das es schon wieder über das Banner guckt.

gitbs da irgendwie nen "Auto-Wert" der das ganz genau anpasst???

leohh · 01.01.2009

AW: Fragen zur ersten Homepage

gitbs da irgendwie nen "Auto-Wert" der das ganz genau anpasst???

Nein, dafuer gibt es in dem Sinne keinen auto-Wert.
Du kannst aber dein Markup suber fegen, indem du alle Schmuckbilder ins Stylesheet verbannst.
Absolute Positionierung rauswirfst und gaenzlich auf DW verzichtest ( Okay, Okay darfst auch weiterhin damit coden

)

Eigentlich brauchst du hierfuer nur 3 Kontainer.
Eines fuer deinen Header, einen fuer deinen Main-Content und einen fuer deine Sidebar.

Der header, kommt ganz normal als H1 daher, weil hier zumindest noch nicht viel von zusaetzlichen Inhalten zu sehen ist.
Deiner Sidebar, gibst du ein float:left mit und graebst dein Menue da rein.
Und deine Contentarea kommt sowieso ohne Bild aus, da es eine solide Farbe ist (background: #'yellowish')
Durch einen evtl. footer noch das float clearen und schon waere die Katze im Sack.

Chickita · 01.01.2009

AW: Fragen zur ersten Homepage

Ok OK

Das wird schwieriger als erwartet.
hab den ganzen Müll rausgeworfen und neu angefangen.
Versuchs jetzt mal mit einer HTML + einer CSS - Datei.

Hab jetzt die Container header, main, sidebar und footer

Der Code sieht so aus:

<!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=utf-8" />
<title>Sugar Glider</title>
<link rel="stylesheet" type="text/css" media="screen, projection" href="style.css">
<style type="text/css">

</style></head>

<body>
<div id="header"><h1></h1></div>
<div id="main"><h2> Herzlich willkommen auf www.sugar-glider.de.tl</h2></div>
<div id="sidebar">Raum für den Inhalt von id "sidebar"</div>
<div id="footer">Raum für den Inhalt von id "footer"</div>
<p> </p>
</body>
</html>

Was allerdings float clearen ist weiß ich nich .... :hmpf:
Aber bekomm ich shcon noch raus.

Den Rest könnte ich jetzt in der .css festlegen und einstellen?

leohh · 01.01.2009

AW: Fragen zur ersten Homepage

HTML:

<!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="de" >
   <head>
      <meta http-equiv="content-type" content="text/html; UTF-8" />
      <title>Seitentitel</title>
      [Restlicher 'Meta-Muell']
      <link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen, projection" />
      [Restliche Angaben wie Icon, Javascript und CC]
   </head>
   <body>
      <h1 id="header"><span></span>Sugar Glider</h1>
      <ul id="sidebar">
         <li><a href=""><span></span>Links</a></li>
         <li><a href=""><span></span>Links</a></li>
         <li><a href=""><span></span>Links</a></li>
         [weitere links]
      </ul>
      <div id="content">
         [Gesammter Content]
      </div>
      <p id="footer">[Footer]</p>
   </body>
</html>

Fuer den Rest, waere jetzt ausschliesslich dein Stylesheet verantwortlich.

Was allerdings float clearen ist weiß ich nich .... :hmpf:
Aber bekomm ich shcon noch raus.

Lektuere gefaellig?!

Den Rest könnte ich jetzt in der .css festlegen und einstellen?

Wenn wir ehrlich sind, koenntest du nicht nur - du muesstest sogar.

Chickita · 02.01.2009

AW: Fragen zur ersten Homepage

Sooo, im Moment siehts so aus
Musste mich durch das ganze erst ma nen weng durchlesen.

ist nich viel, aber immer hin ein kleiner Erfolg - denke ich :rolleyes:

HTML ...

<!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="de" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sugar Glider</title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen, projection" />
</head>
<body>
<h1 id="header"><span></span></h1>
<ul id="menue">
<li><a href="kontakt.htm"><span></span>Kontakt</a></li>
<li><a href="impressum.htm"><span></span>Impressum</a></li>
<li><a href="forum.htm"><span></span>Forum</a></li>
</ul>
<h2 id="leer"><span></span></h2>
<ul id="sidebar">
<li><a href="home.htm"><span></span>Home</a></li>
<li><a href="info.htm"><span></span>Wissenswertes</a></li>
<li><a href="voliere.htm"><span></span>Volierenbau</a></li>
<li><a href="tiere.htm"><span></span>Abgabetiere</a></li>
<li><a href="shop.htm"><span></span>Online-Shop</a></li>
</ul>
<div id="content">
Herzlich willkommen auf
Bitte kostenlos registrieren, damit du die Links siehst.

</div>
<p id="footer">[Footer]</p>
<p> </p>
<p> </p>
</body>
</html>

CSS ....

@charset "utf-8";
/* CSS Document */

body {
background-color: #FAF5B7;
}

#header {
background-image: url(bilder/banner.jpg);
background-repeat:no-repeat;
}

#leer {
background-image: url(bilder/platzhalter1.jpg);
background-repeat:no-repeat;
}

#menue li {
float:right;
margin-left:20px;
width:90px;
}

#sidebar {
background-image: url(bilder/menue.jpg);
background-repeat:no-repeat;
}

#footer {

}

Und das Ganze sieht so aus:

Muss ich ma noch sehen, wie ich die Bilder genau in der richtigen Größe anzeigen lassen kann, weil ich ja jetzt nur die Auschnitte hab.

Kann mir jemand mal das erklären?
#menue li {
float:right;
margin-left:20px;
width:90px;
}

Hab das nur von einer Seite kopiert, weil ichs absolut nich hinbekommen hab, wie man die links nebeneinander und rechts angezeigt bekommt.
Was bedeutet der Code?

montessori · 02.01.2009

AW: Fragen zur ersten Homepage

Wenn ich das alles lese, werde ich ein wenig nervös und erinnere mich an meine ersten Homepageversuche vor vielen jahren mit Frontpage. Aus heutiger Sicht: Schrecklich, Katastrophe ....
Natürlich kannst du jetzt bei jedem Fehler hier im Forum nachfragen. Aber siehe bitte, dass dein Code etwas verworren ist und man nur schwer nachvollziehen kann, was du genau willst! Diu solltest von der Idee Abschied nehmen, beim ersten Mal sofort DIE geniale Homepage hinzubekommen.
Mein Rat: kaufe dir ein Buch mit den entsprechenden HTML und CSS Grundlagen und gehe Schritt für Schritt vor. Code von anderen Seiten zu kopieren bringt nur in den seltensten Fällen etwas.
Mein Literaturtipp:
Little Boxes - Webseiten gestalten mit Css - Grundlagen - ISBN 978-3-8272-4224-2 Preis 19,95€
Inverstition lohnt sich!!! Und da lernt man wirklich etwas und kann dann nach und nach vieles verstehen, was einem jetzt vielleicht noch völlig fremd erscheint!

Ultraflip · 02.01.2009

AW: Fragen zur ersten Homepage

Chickita schrieb:
Kann mir jemand mal das erklären?
#menue li {
float:right;
margin-left:20px;
width:90px;
}

Hab das nur von einer Seite kopiert, weil ichs absolut nich hinbekommen hab, wie man die links nebeneinander und rechts angezeigt bekommt.
Was bedeutet der Code?

Der Container beschreibt alle <li> Befehle mit dem Klassenattribut menue (also <li class="menue">) ...
float = das Float Attribut läßt ein Objekt mit Text "umfließen" ... in diesem Fall wird es rechts von den Elementen plaziert, die es umfließen.
margin-left = Außenabstand links ... hier 20 Pixel
width = breite des Elements ... hier 90 Pixel

Den letzten Satz versteh ich nicht ganz ... "wie man die links nebeneinander und rechts angezeigt bekommt"? Nochmal bitte

LG
Tobi

Chickita · 02.01.2009

AW: Fragen zur ersten Homepage

@
Das die Website nicht perfekt wird ist mir schon klar .... muss sie ja auch nicht. hab ja auch Zeit um das Ganze immer mal ein bisschen "besser" zu machen.
Werd mal versuchen, dass Buch ranzubekommen. Ist vielleicht übersichtlicher und einfacher als die ganzen Internetseiten über HTML und CSS.

@ Danke danke, das bringt mich schon mal ein Stück weiter

Also, die 3 Links in meinem Fall, sollten nicht untereinander sondern hochizontal angezeigt werden und das ganze noch rechtsbündig, nicht links wie's normal ist .... Besser?

sokie · 02.01.2009

AW: Fragen zur ersten Homepage

Ultraflip schrieb:
Der Container beschreibt alle <li> Befehle mit dem Klassenattribut menue (also <li class="menue">) ...

sorry, aber das ist sachlich falsch.

#menue li - selektiert alle li elemente die kindelemente vom container mit der id="menue" sind.
zB:

Code:

<ul id="menue">
   <li><a href="eineSeite.php">linktext</a></li>
   <li><a href="eineZweiteSeite.php">linktext</a></li>
 </ul>

oder auch:

Code:

<div id="menue">
  <ul>
    <li><a href="eineSeite.php">linktext</a></li>
    <li><a href="eineZweiteSeite.php">linktext</a></li>
  </ul>
</div>

leohh · 02.01.2009

AW: Fragen zur ersten Homepage

Chickita schrieb:
Also, die 3 Links in meinem Fall, sollten nicht untereinander sondern hochizontal angezeigt werden und das ganze noch rechtsbündig, nicht links wie's normal ist .... Besser?

Dazu brauchst du ein float:left fuer deine Menuepunkte bzw. ein display:inline und ein text-align:right. Natuerlich bringt dir das nichts, wenn du keine Breitenangaben fuer die dazugehoerigen 'Kontainer' hast.

Ultraflip · 02.01.2009

AW: Fragen zur ersten Homepage

sokie schrieb:
sorry, aber das ist sachlich falsch.

#menue li - selektiert alle li elemente die kindelemente vom container mit der id="menue" sind.

böser Schnitzer ... ist natürlich vollkommen richtig! Es ist keine Klasse sondern eine ID!

montessori · 02.01.2009

AW: Fragen zur ersten Homepage

Habe gerade in der neuen c`t noch einen Hinweis gefunden, der dir über das von mir bereits empfolene Buch hinaus vielleicht auch weiterhelfen kann:

Bitte kostenlos registrieren, damit du die Links siehst.

Da kannst du online vieles ausprobieren und sofort sehen, was sich als Resultat ergibt.

Chickita · 02.01.2009

AW: Fragen zur ersten Homepage

Ja, das mit den ganzen Breiten und Höhenangaben muss ich noch machen.
Aber dazu gibts ja sooo viel zu lesen. Das dauert bestimmt noch ne halbe ewigkeit bis ich das einigermaßen rein hab.

Den Playground hab ich mir gleich mal gebookmarked

Is ja nen schönes Lern-Spielzeug.

tomz4874 · 03.01.2009

AW: Fragen zur ersten Homepage

Erst einmal ein großes Hallo an alle!

Ich hab mich mal ein wenig mit der Seite von *Chickita* beschäftigt, nachdem sie so gut war und mir die einzelnen Bilder zugesandt hat.

Ich bin zu folgendem Ergebnis gekommen!

1. Diese Lücke entstand durch den eingefügten "Platzhalter". Meines Wissens nach kann ich kein weiteres DIV unter dem Platzhalter einfügen was gleichzeitig vom Inhalts-DIV umflossen wird.
Meine Lösung:
Da in meinen Augen der Platzhalter überflüssig ist, habe ich einfach Platzhalter und Menü zusammengefasst zu einem DIV. Höhe bleibt ja im Gesamten die selbe!

und schon funktioniert das Ganze und es erscheint keine Lücke mehr!

2. ich habe aber noch ein weiteres Problem festgestellt. der DIV vom Inhalt ist immer so groß wie der Inhalt selber ist! Das heißt, wenn der Inhalt zum Beispiel von der Höhe größer wäre wie 678px, würde er über das Menü hinaus gehen und es entsteht unter dem Menü eine weiße Fläche.

(leider ein wenig schlecht zu erkennen auf dem Bild)

Meine Lösung:
Ich erstelle einfach noch einen DIV (z.B. "container"), lege in der CSS die gewünschte Hintergrundfarbe fest, und setze in diesen Container die anderen beiden DIV's von Menü und Inhalt. Der "container" liegt jetzt unter Menü und Inhalt, und füllt somit die weißen Flächen mit der gewünschten Farbe aus.

(erkennt man leider nur schlecht :-()

Hier Quelltext von der index.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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="header"></div>
<div id="container">
<div id="navigation">&nbsp;</div>
<div id="content"><p align="justify">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  <p align="justify">&nbsp;</p>
  <p align="justify">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros 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.</p>
<p>&nbsp;</p>
<p align="justify">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 eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>&nbsp;</p>
<p align="justify">Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. 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.</p>
<p>&nbsp;</p>
<p align="justify">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</p>
<p>&nbsp;</p>
<p align="justify">At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
</div>
</div>
</body>
</html>

Sieht jetzt ein wenig ungeordnet aus aber egal!

und hier der Quelltext der style.css

HTML:

/* CSS Document */

#header {
	width:1250px;
	height:175px;
	background-image:url(banner.jpg);
	background-repeat:no-repeat;
	}

#container {
	width:1250px;
	background-color:#FAf5B7;
	min-height:678px;
	}

#content {
	width:980px;
	float:left;
	padding:10px;
	background-color:#FAF5B7;
	}

#navigation {
	width:250px;
	height:678px;
	float:left;
	background-image:url(neu2.jpg);
	background-repeat:no-repeat;
	}

p {
	margin-bottom:0px;
	margin-top:0px;
	}

Ich hoffe es ist ein wenig verständlich herüber gekommen!
Für Tipps, Fragen und Kritik stehe ich natürlich jederzeit gern zur Verfügung!

Chickita · 03.01.2009

AW: Fragen zur ersten Homepage

Ausprobiert und funktioniert.
Schatten wird noch angepasst, dann sieht das alles auch chic aus.

Hier noch mal ein grooooßes Danke an dich. Hast mir sehr geholfen ud für mich ist es auch einigermaßen nachzuvollziehen.

So in den nächsten Tagen geht die arbeit natürlich weiter.

Mir fehlt ja noch ein Menue und wie ich die folgenden Seiten richtig anzeigen kann. also an der richtigen Stelle.

Aber ich denke das wird irgendwie. :rolleyes:

Hab ja jetzt nen "Lehrer"