Die erste Website

strohhalm6 · 26. November 2012

Hallihallo,

ich möchte mich kurz vorstellen, ich heiße martin, bin 22 jahre jung und prbiere mich gerade an meiner erste website.

Dies ist, wie bereits erwartet, garnicht so einfach und ließ schon des öfteren meinen kopf rauchen.
Der code basiert mehr oder weniger auf div-containern, da mir von tabellen abgeraten wurde.
Das klappt auch soweit, allerdings wird meine seite auf computern mit anderen auflösungen sowie im ie nicht korrekt angezeigt.
Bevor ich die seite jetzt eifrig mit content fülle, möchte ich diese beschriebenen fehler erstmal ausmerzen.
Der validator gibt mir grünes licht vondaher bin ich ein wenig überfragt.
So sieht es bei mir im firefox aus:

Damit ihr euch selber ein bild davon machen könnt, hier der link:

http://strohhalm6.bplaced.net/

Ich bin für jede hilfestellung äußerst dankbar.

Tumbleweed · 26. November 2012

Da liegt einiges im Argen.

lass die <center> tags weg, die sind obsolet. Zentriert wird mit CSS.
benutze keine absolute Positionierung (z.B. dein Text in der Mitte), ist ja klar dass 334px vom linken Rand entfernt je nach Bildschirmauflösung woanders ist
suche am besten direkt nach CSS-Beispiellayouts und schau dir da was ab
mach dich vertraut mit F12 (in den meisten Browsern enthalten, im FF lädst du dir am besten Firebug, ich rate aber zu Chrome)
verschachtele deine divs (semantisch) sinnvoll, nicht so willkürlich um Abstände zu erzeugen

Im Chrome bei Full HD sieht es übrigens recht kaputt aus. Der IE ist dieses Mal also nicht zwangsweise der Schuldige.

Kausalat · 27. November 2012

Auch im Firefox 17 wird deine Seite wegen der absoluten Positionierung falsch angezeigt. Beachte, dass nicht jeder Besucher dieselbe Bildschirmauflösung bzw. Browserbreite hat wie du. Genau aus diesem Grund sollte möglichst auf absolute Positionierungen verzichtet werden, sofern kein besonderer Zweck erfüllt werden soll (mitscrollende Inhalte etc.).

strohhalm6 · 27. November 2012

Vielen dank für die antworten.

Wenn ich die absolute positionierung entferne liegen meine grafiken nicht mehr übereinander, gibt es denn eine alternativmöglichkeit?

Kausalat · 27. November 2012

Ganz einfach: die relative Positionierung.

Die Hintergrundgrafik kannst du dir sparen, indem du deine gesamte Seite in einen Container packst, dem du per CSS die Hintergrundfarbe Schwarz verpasst. Gleichzeitig könntest du diesen Container mit margin: 0 auto; zentrieren, womit du die obsoleten <center>-Tags einsparen kannst. Gleichzeitig würdest du erreichen, dass deine Seite nicht nur bei exakt einer einzigen Bildschirmauflösung (nämlich deiner) zentriert wird.

strohhalm6 · 27. November 2012

Das ist doch mal eine antwort.

Sobald ich zeit finde werde ich das ganze nochmal umschreiben.
Ich melde mich sicherlich wieder...

Ergänzung (27. November 2012)

Das hat soweit super geklappt, ich steh allerdings wieder vor einem problem.
Ich hab den gesamten content jetzt in ein div gepackt, diesen kann ich aber nicht via css bearbeiten.
Ich kann farbe usw nur direkt im body bestimmen, was der validator allerdings nicht toll findet.
Wo liegt da der fehler?

Das ganze sieht folgendermaßen aus:

<head>

#content {........}

</head>

<body>

<div id="content">

<div id="a2">
<img src="header.jpg" alt="header">
</div>
</div>

ich erkenn den fehler einfach nicht....

Yuuri · 27. November 2012

Code:

<style type="text/css">
/* ... */
</style>

Seh ich nirgendwo um #content.

Lager das Stylesheet aber mit

Code:

<link rel="stylesheet" type="text/css" href="./pfad/zur/datei.css">

in eine externe Datei aus, damit sie auch im Cache landen kann.

strohhalm6 · 27. November 2012

Das ist selbstverständlich vorhanden, aus dem grund kann ich mir das nicht erklären.

Yuuri · 27. November 2012

Dann poste mal bitte den gesamten Quellcode, aus dem Stück ist leider nicht viel ersichtlich.

Btw: Nutz bitte [code][/code] zum Einfügen von Quelltext.

strohhalm6 · 27. November 2012

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8">
      <!--[if gte IE 8]>
      <style type="text/css">
      body {
       color: #0000ff;
       background-color: #000000;
      }
      </style>
      <![endif]-->
      <!--[if lt IE 8]>
      <style type="text/css">
      body {
       color: #000000;
       background-color: #ffffff;
      }
      </style>
      <![endif]-->


<title>Corsafanatics</title>

<style type="text/css"><!--

body { text-align: center; background-color:#ffffff;}


div

#content { position:relative; background-color: #000000; width:900px; height:500px; margin:auto; }
#a1      { position:relative; top:0px; margin: 0 auto; z-index:1;}
#a2      { position:relative; top:-2000px; margin: 0 auto; z-index:2;}
#a3      { position:relative; top:-2360px; margin: 0 auto; margin-left: 0 auto; margin-right: 0 auto; z-index:5; }
#a4      { position:relative; top:-2008px;width:1000px; margin: 0 auto; margin-left: 0 auto; margin-right: 0 auto; z-index:3; }
#a5      { position:relative; top:0px; margin: 0 auto; margin-left: 0 auto; margin-right: 0 auto; z-index:4; }
#a6      { position:relative; top:0px; margin: 0 auto; margin-left: 0 auto; margin-right: 0 auto; z-index:6; }
#text    { position:relative; top:0px; margin: 0 auto; margin-left: 0 auto; margin-right: 0 auto; z-index:7; color: #ffffff; }


navi

#nav {
        position: relative;
        width: 1000px;
        float: left;
        margin: 0;
        padding: 0;
        list-style: none;
        }

#nav ul {
        list-style-type: none;
        margin: 0px;
        padding: 0px;
        }
#nav li.topmenu {
        float:left;
        }
.topmenu a {
  float:left;
  width:110px;
  text-align:center;
}
.topmenu ul{
  display:none;
}
.topmenu a, .submenu a{
  font-weight:bold;
  margin:0;
}
.submenu a{
  font-size:14px;
  width:110px;
  position:relative;
  clear:both; /* special IE6 */
}
.topmenu:hover ul {
  display:inline;
  z-index:500;
}

#nav li {
        float: none;
         list-style: none;
         }
#nav li a {
        display: inline;
        padding: 1px 5px;
        text-decoration: none;
        font-weight: bold;
        color: #ffffff;
        border-right: px solid #ccc;
        border-left: px solid #ccc;
        }
#nav li a:hover {
        color: #c00;
        background-color: #fff;
        }

// --></style>

</head>

<body>
<div id="content">
         <div id="a2">
         <img src="header.jpg" alt="header">
         </div>
         <div id="a4">
         <hr size="1" noshade>
         </div>
         <div id="a5">
         <hr size="1" noshade>
         </div>
         <div id="a6">
         <img src="bildhome.jpg" alt="bildhome">
         </div>

  <div id="a3">
    <ul id="nav">
      <li class="topmenu">
        <a href="index.htm">Home</a>
        <ul>
          <li class="submenu"><a href="uebermich.htm">&Uuml;ber mich</a></li>
        </ul>
      </li>
      <li class="topmenu">
        <a href="">Projekte</a>
        <ul>
          <li class="submenu"><a href="">Corsa A C14SE</a></li>
          <li class="submenu"><a href="">Corsa A C20NE</a></li>
        </ul>
      </li>
      <li class="topmenu">
        <a href="">Tipps&amp;Tricks</a>
        <ul>
          <li class="submenu"><a href="">Workshops</a></li>
          <li class="submenu"><a href="">Allgemein</a></li>
        </ul>
      </li>
        <li class="topmenu">
        <a href="">Gallerie</a>
        <ul>
          <li class="submenu"><a href="">#</a></li>
          <li class="submenu"><a href="">#</a>
        </ul>
      </li>
        <li class="topmenu">
        <a href="">G&auml;stebuch</a>
      </li>
        <li class="topmenu">
        <a href="">Links</a>
       </li>
        <li class="topmenu">
        <a href="">Impressum</a>
    </ul>
  </div>

<div id="text">
        <h4>Sei gegr&uuml;&szlig;t Freund/in der schmutzigen Finger,</h4>
        wie man unschwer erkennen kann, dreht sich hier alles um den Opel Corsa A.<br>
        Vorrangig geht es hier um Projekte meinerseits, welche ich detailgetreu pr&auml;sentiere.<br>
        Zum anderen gibt es eine gro&szlig;e Gallerie und allerhand "Know-how" aus einigen Jahren Erfahrung.
        <p>Ich w&uuml;nsche viel Spa&szlig; auf meiner Seite.:)</p>
</div>
</div>



</body>
</html>

Yuuri · 27. November 2012

1. Setz mal bitte das Encoding auf utf-8, dann hast du zukünftig keine Probleme mit Umlauten (und musst nicht ummeln) und Sonderzeichen.

Code:

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

Denk aber dran, die Datei selbst auch als utf-8 abzuspeichern.
2. Du hast vergessen zwei li-Tags zu schließen. Das Erste ist in #nav Gallierie, dort das zweite li (Zeile 149) und das Andere nach Impressum (Zeile 158).
3. In #text nutzt du ja schon einen Paragraphen. Wieso nicht für den gesamten Text?

4. Dein eigentliches Problem: Sieh mal in Zeile 32 und 43. Wenn das Kommentare sein sollen, gehören diese in /* und */ bzw. musst du wenn dann {} setzen, wobei navi kein valides Tag darstellt.

strohhalm6 · 27. November 2012

Jawolla...diese kommentare sollten der orientierung dienen.
Sie waren der ursprung allen übels, ich bedanke mich rehct herzlich für deine bemühungen.

Es ist mir schon irgendwie unangenehm aber eine frage hätte ich noch.
Der schwarz, zentrierte hintergrund ist nicht mehr als ein div container welchen ich sowohl horizontal als auch vertikal asurichten kann.
Gibt es eine möglichkeit diesen vertikal so zu automatisieren das dieser sich an den jeweiligen content anpasst(von der höhe)?

Yuuri · 27. November 2012

Benutz min-height anstatt einer fixen Höhe, dann wächst er dynamisch mit dem Content, aber mindestens immer x Pixel hoch.. Das funktioniert zwar nicht mit einem alten IE, aber darauf sollte man heute kaum noch achten (außer da, wo es muss).

PS: Muss dir nicht unangenehm sein.

strohhalm6 · 28. November 2012

Es hat alles wunderbar geklappt und ich hab jetzt die home seite soweit fertig.
Es wird in verschiedenen auflöungen alles korrekt dargestellt, allerdings wird mir im ie noch der text verschoben, alle absoluten positionierungen hab ich entfernt.
Woran kann das liegen?

Home/Über mich...

Test

Kausalat · 28. November 2012

Um welche IE-Version handelt es sich? Ältere Versionen sind nicht gerade für eine fehlerfreie Darstellung bekannt.

Kleine Verbesserungsvorschläge:
— Mit Galle hat eine Galerie nichts zu tun --> Galerie statt Gallerie
— Du solltest eine benutzerdefinierte Schriftart wählen. Times New Roman ist eher schwer lesbar und sieht dazu meines Erachtens altbacken aus (welcome to the 90s/welcome to Word-Standardformatierung bis Version 2003).

Yuuri · 28. November 2012

Anstatt Text und Bild zu trennen, nutz lieber pro Paragraph ein div. Die relative Positionierung sparst du dir am besten überall dort, wo es nicht nötig ist. Jeden Paragraph packst du in einen div, das Bild selbst kannst du dann relativ positionieren und nach links schieben. Eher würde ich aber ein div aus zwei Spalten machen bzw. noch schöner den Text einfach das Bild umfließen lassen.

Standar(D!) · 28. November 2012

strohhalm6 schrieb:
Woran kann das liegen?

Du verwendest Bilder als "Überschrift" für deine Absätze, die du an den Anfang der Webseite packst, anstatt sie dem entsprechenden Absatz zuzuordnen. Schau dir deine Seite mal ohne stylesheet an.
Probiere es doch mal so:
(Bei der Gelegenheit könntest Du auch die "<br><br>..." entsorgen und deine Absätze in ein <p>-Element einbetten.)

HTML:

<img src="uebermichtxt.jpg" alt="übermich">
<p>Ich heiße Martin, bin 22 Jahre jung und meine größte Leidenschaft ist... wohl das schräubeln am Auto.<br>
Dies bedeutet für mich Unabhängigkeit, Freiheit und vorallem  eine gewisse "Beurlaubung" vom Alltag.<br>
Sowohl Kreativität,  Interesse an Neuem, als auch mein Hang zur Verrücktheit lassen sich in diesem Hobby wunderbar ausleben.<br>
Da der Reichtum meiner Ideen meist dem meines Kontostands überwiegt, spielt das leidige Thema Geld auch hier eine große Rolle und zwingt des öfteren mich in Geduld zu üben.
</p>

Ich persönlich würde auf Bilder für Überschriften verzichten und stattdessen die dafür vorgesehen Elemente h1,h2,h3,usw. verwenden und diesen dann die gewünschte Schriftart zuweisen, z.B. von http://www.google.com/webfonts.

im Styleesheet würdest du die Schriftart dann wie folgt einbetten:

Code:

@import url(http://fonts.googleapis.com/css?family=Nothing+You+Could+Do);
h1,h2,h3 {font-family: 'Nothing You Could Do';}

Der Absatz in HTML sähe dann so aus:

HTML:

<h2>Über mich…</h2>
<p>...</p>

WebmasterHelp · 29. November 2012

Würde noch ein paar Meta tags reinpacken um das ganze Suchmaschinenfreundlicher zu machen.

strohhalm6 · 29. November 2012

Danke für den tip, doch darum wollte ich mich erst zum ende der fertigstellung hin kümmern.
Sozusagen das grundgerüst schaffen, inhalte einbringen und anschließend feintuning in form von suchmaschinenoptimierung, überprufung des textlichen inhalts usw betrieben.

Ich bin gerade dabei eine art sideshow und gästebuch einzubinden, ob ich das schaffe ist derzeit noch fraglich, dennoch gebe ich die hoffnung nicht auf und probiere weiter.
Sollte es an irgendetwas hapern melde ich mich wieder...

Lieben gruß

strohhalm6 · 1. Dezember 2012

Da bin ich wieder....mit weiteren problemen.

Ich komme eher schleppend voran, ich habe heute bei einem freund feststellen müssen das sich der textliche inhalt meiner seite selbst im firefox verschiebt.
Wie ich bereits erwähnt habe verschiebt sich dieser hier bei mir nur im ie(aktuellste version).
Ich habe jegliche texte in div container gepackt, welche inhaltlich so aufgebaut sind wie die für meine bilder(welche sich nicht verschieben).
Von daher ist das für mich schon wieder unerklärlich.

Der zweite punkt der mir kopfschmerzen bereitet ist das einbinden eines gästebuchs, hat da jemand vielleicht einen guten link der mir weiterhilft?

Ich wünsche ein erholsames wochenende....

edit: Der link zu meiner seite befindet sich im ersten Beitrag meinerseits.

Die erste Website

Cadet 1st Year

Captain

Kausalat

Gast

Cadet 1st Year

Kausalat

Gast

Cadet 1st Year

Fleet Admiral

Cadet 1st Year

Fleet Admiral

Cadet 1st Year

Fleet Admiral

Cadet 1st Year

Fleet Admiral

Cadet 1st Year

Kausalat

Gast

Fleet Admiral

Cadet 2nd Year

Cadet 1st Year

Cadet 1st Year

Cadet 1st Year

Ähnliche Themen