kostenloser Webspace werbefrei: lima-city


Mehr spaltiges Layout

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    pierre-verley

    pierre-verley hat kostenlosen Webspace.

    Hallo,

    Heute habe ich den CSS Code in eine separate CSS Datei ausgelagert, nun besteht immer noch das mit dem anpassen des Gelben Hintergrund mit dem Headerbild das funktioniert immer noch nicht so wie es soll.

    Ich habe dies bezüglich schon alles ausprobiert aber keine Anzeichen von anpassung ich verlier langsam die Nerven und des weiteren habe ich durch das trennen von HTML & CSS Code zwei unterschiedliche Ansichten offline sowie online

    Online sieht es aus wie unter folgenden Linkhttp://pierre-verley.lima-city.de/anders.html und offline da ist das ganze etwas nach unten gerutscht.

    Zwischen dem footer und dem Header kommt noch der Inhalt der auch noch Menüs enthält und dann direkt daneben der eigentliche Inhalt mit Überschrift und Text, hier meine Frage muss ich hier mit zwei DIV Container arbeiten oder genügt auch einer?. Siehe meine Skizze. die unter http://pierre-verley.lima-city.de/layout.htm zu finden ist.

    Würde mich über Antwort freuen.

    HTML Code

    <!DOCTYPE html>
    <html lang="de">
      <head>
        <meta charset="utf-8">
        <title>.:Pierre Verley | Meine persoenliche Homepage :.</title>
        <link rel="stylesheet" type="text/css" href="design.css" />
        </style>
      </head>
      <body>
        <header>
          <div class="top">
            <div class="sitetitle">
              <i>
                <h1>Pierre Verley</h1>
              </i>
              <p>Meine persoenliche Homepage</p>
            </div>
          </div>
          <img src="ilm.jpg" class="headerbild">
    	  <nav>
          <a href="pierre.htm">Pierre Verley</a>
          <a href="beruflich.html">Beruflich</a>
          <a href="fernsehen.htm">Fernsehen</a>
          <a href="sturm.html">Sturm der Liebe</a>
          <a href="kontakt.htm">Kontakt</a>
          <a href="impressum.html">Impressum</a>
        </nav>
        </header>
        
        <footer>
          <b>
            <p>Copyright &copy 2015 <a href="index.html">Pierre Verley</a> | Design by Pierre Verley<br></p>
            <p> Impressum  <a href="impressum.html">Impressum</a>
          </b>
        </footer>
        </div>
        </div>
        </div>
      </body>
    </html>


    CSS Code

    html, body {
        margin: 40;
        padding: 20;
        background: #FF9900;
        color: #0000CC;
        width: 100%;
    }
    header {
        margin-top: 19;
        border: 5px 45px;
        padding: 5px 32px;
        /*widthe: 1200px;*/
    	
        height: 290px;
        background-color: yellow;
    	position: relativ: 
    }
    nav a {
        float: left;
        width: 150px;
        height: 22px;
        background: orange;
        color: blue;
        margin: 2px;
        text-align: center;
    }
    header .sitetitle {
        float: left;
        text-align: left;
    }
    header .sitetitle h1 {
        font-weight: 700;
        font-size: 2.4em;
        color: blue;
        letter-spacing: -2px;
        line-height: 1.3em;
        margin: 0;
        padding: 15;
    }
    header .top {
        width: 95%;
        margin: 15px auto 15px auto;
    }
    header .sitetitle h1 a {
        font-weight: 700;
        letter-spacing: -1px;
        color: blue;
    }
    header .sitetitle h1 a:hover {
        color: blue;
    }
    header .sitetitle p {
        margin: 5px 0;
        padding: 0;
        letter-spacing: -0px;
        font-size: 1.3em;
        color: green;
    }
    footer {
        clear: left;
        margin-top: 1em;
        background: yellow;
        text-align: left;
        padding: 2px;
    }
    header .headerbild {
        width: 1200px;
    	height: 150px;
    	margin 20px;
    	padding: 2px;
    	position: relativ: 
    }


    Beitrag zuletzt geändert: 2.9.2015 10:10:09 von pierre-verley
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. Ich würde dir empfehlen, mehr divs zu benutzen. Zum einen ist deine Seite dann besser durchstrukturiert, was es allgemein Suchmaschinen erleichert und auch dir, wenn du das CSS dazu erstellst.
  4. Autor dieses Themas

    pierre-verley

    pierre-verley hat kostenlosen Webspace.

    an was liegt das sich der Hintergund sich dem Bild nicht anpassen will gestern hatte ich es auf einer Seite gehabt und heute sind alle beide Seiten wieder so was muss ich machen damit sich der Hintergrund (gelb) dem Bild anpasst

    Ich wollte mich auch mal für die bsherige Hilfe bedanken, ich bin echt erstaunt wie man in dieser Community anderen mit Rat und Tat zur Seite steht was man aus einem anderen Forum nicht behaupten kann.

    Beitrag zuletzt geändert: 4.9.2015 13:34:32 von pierre-verley
  5. Mehrspaltige Layouts auf SelfHTML: http://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/mehrspaltige_Layouts

    Ein Anfängertutorial zur Positionierung, vielleicht hilft dir das, vielleicht nicht, vielleicht habe ich etwas überlesen, vielleicht aber auch nicht :D

    Und zu guter Letzt: Navigationsleisten auf SelfHTML: http://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Men%C3%BCs
    Natürlich sind die Beispiele sehr einfach gehalten, jedoch mit ein bisschen Ausprobieren wird das schon (Eigene Erfahrung mit Navigationsleisten, hat ca. 24h gedauert :) )
  6. Autor dieses Themas

    pierre-verley

    pierre-verley hat kostenlosen Webspace.

    Guten Morgen liebe Community

    Wie man unter folgenden Link http://pierre-verley.lima-city.de/index.html sehen kann ist es mir gelungen die Seite aus dem Video nach zubauen.

    Nun komme ich aber nicht weiter was die Navigation, Menue und dem Headerbild betrifft.

    Bei der Betrachtung meiner Vorlage ist mir aufgefallen das der Außenabstand von links und rechts noch smaller werden könnte sowie auf meiner Skizze. Was muss ich dazu werden um zu diesem Ergebniss zu kommen?


    Beitrag zuletzt geändert: 8.9.2015 9:37:38 von pierre-verley
  7. Für deine Navileiste solltest du mal nach display:block Ausschau halten. Einen Beitrag über deinem sollte dies aber auch beschrieben sein.

    Abstände kannst du mit margin definieren. Als Anfänger nutzt du eventuell auch margin-left, margin-right. Bzw. Oben und unten margin-top und margin-bottom.

    Und noch etwas ist mir bei deinen Codes aufgefallen. Achte doch mal auf die richtige Schreibweise. widthe gibt es nicht und wird dann vom Browser ignoriert, heisst width


    Edit: Hier findest du das was du brauchst und ausführlich erklärt für deine Navigation http://www.html-seminar.de/3-spalten-layout-steuerung-buttons.htm

    Beitrag zuletzt geändert: 8.9.2015 19:24:12 von all-in1
  8. Autor dieses Themas

    pierre-verley

    pierre-verley hat kostenlosen Webspace.

    Vielen Dank für die weiteren Hilfreichen Tipps, ich konnte das Problem Frame/irframe klären nur verbleibt jetzt das Problem mit dem Navileiste wie unter folgenden Link http://pierre-verley.lima-city.de/home2.html wenn dies behoben ist dann bin ich glücklich

    Damit würde dann das CSS Layout stehen und ich kann mich dann weiter an die weiteren Seiten machen. Naja eines habe ich noch vergessen und zwar die Schrifft die ich aber dann noch später machen kann hauptsache das CSS Style steht.

    Würde mich auf eine Antwort freuen.

    Beitrag zuletzt geändert: 9.9.2015 10:29:11 von pierre-verley
  9. Und wo liegt da jetzt das Problem?
    Was ich sehe ist eventuell noch die Schriftfarbe.

  10. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!