• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Umsetzung eines Layouts

H

hell84

Neues Mitglied
Hallo liebe Community,

hab seit langem mal wieder die Ehre und darf für einen Kumpel eine Seite erstellen. In der Regel beschäftige ich mehr mit Printsachen
und ab und zu falls es nicht zu sehr ins Programmiertechnische geht auch ab und an mal eine Webseite.
Und diese setze ich normal auch mit Flash um. Da er aber eine reine HTML / CSS Seite wünscht habe ich ihm gesagt ich werde es versuchen umzusetzen wird halt nur ein wenig dauern.

Wollte die Seite so einfach wie möglich halten damit diese auch umsetzbar ist! Habe auch das komplette Layout mal hochgeladen und bräuchte ein paar Tipps in welche Richtung ich gehen muss damit man es umsetzen kann.
Die letzte reine HTML Seite die ich umgesetzt habe ist leider schon Jahre her und da habe ich immer mit Tabellen gearbeitet.

Bei dieser wollte ich mit Containern arbeiten. Und zwar so sollte die Seite immer gleich bleiben nur beim Klicken eines Links (Home-Über Feist-Referenzen-Impressum) sollte sich der Content verändern. Der Inhalt im Home Kästchen....
Ist dies so umsetzbar oder hättet ihr einen besseren Tipp dies anzugehen?



layout.jpg
 
Das ist so gut umsetzbar, denke ich. Hier mal ein kleiner Denkanstoß:
HTML: 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Unbenanntes Dokument</title>
<style type="text/css">
body{
    width:960px;
    margin:0 auto;
}
li{
    list-style-type:none;
}
h1{
    color:#fff;
    border-bottom:1px solid;
}
#logo{
    float:left;
}
.nav li{
    display:block;
    float:left;
    padding:5px 10px;
}
.nav li a{
    color:#666;
    text-decoration:none;
}
.nav li.active a, .nav li a:hover{
    color:#fff;
}
.sidebar{
    float:left;
    clear:left;
    width:240px;
    padding:200px 30px 0px 30px;
    background:#888;
}
.content{
    float:right;
    width:560px;
    padding:20px 30px;
    background:rgba(0,102,204,.8);
}
.footer{
    width:960px;
    clear:both;
    border-top:5px solid #06C;
    background:#333;
    color:#888;
}
.footer a{
    color:#888;
    text-decoration:none;
}
.footer p{
    text-align:center;
    padding:10px 0px;
}
</style>
</head>

<body>
<div class="header"><a href="#"><img src="" alt="Hier Logo einfügen" name="Insert_logo" width="" height="" id="logo" /></a>
    <ul class="nav">
        <li><a href="#" class="active">Home</a></li>
        <li><a href="#">Über Feist</a></li>
        <li><a href="#">Referenzen</a></li>
        <li><a href="#">Impressum</a></li>
    </ul> 
</div>
<div class="sidebar">
    <ul>
        <li><strong>Max Mustermann</strong></li>
        <li>Musterstr. 3a</li>
        <li>9999 Musterdorf</li>
    </ul>
</div>
<div class="content">
    <h1>Home</h1>
    <p>Beachten Sie, dass der CSS-Code für diese Layouts mit vielen Kommentaren versehen ist. Wenn Sie vor allem in der Entwurfsansicht arbeiten, werfen Sie einen Blick auf den Code, um Tipps zum Verwenden von CSS für die festen Layouts zu erhalten. Sie können diese Kommentare vor dem Veröffentlichen Ihrer Site löschen. Weitere Informationen zu den in diesen CSS-Layouts verwendeten Methoden finden Sie in diesem Artikel im Adobe Developer Center - <a href="http://www.adobe.com/go/adc_css_layouts">http://www.adobe.com/go/adc_css_layouts</a>.</p>
</div>
<div class="footer">
    <p>Copyright (c) 2013 | All Rights Reserved | Designed by</p>
</div>
</body>
</html>
Du musst nun dem body noch das Hintergrundbild geben, sowie das Logo einbinden, was am besten nach oben soweit geht, das es an den Viewportrand reicht. Außerdem braucht die Navigation noch den Hintergrund.

Nicht getestet.
 
Zuletzt bearbeitet:
Danke schonmal für die schnelle Antwort! Hab mich nun ein bisschen eingearbeitet mit den DIV- Container und hatte beim erstellen des ersten Posts noch etwas vergessen die Seite soll zentriert ausgerichtet sein.

Werd das ganze erstmal grob mit Div-Container erstellen und sobald ich das habe oder wenn ich Hilfe benötige werde ich ein UP to Date Index.html hochladen bei dem man das ganze anschauen kann wo es scheitert...

Dein Versuch Trüffel kommt schon sehr nah ran!
 
Für das Zentrieren kannst du einem alles umschließenden Container die CSS-Eigenschaft
Code: 
margin: auto;
Zuweisen!
 
Hab das ganze nun gemacht allerdings zentriert er mir das nur horizontal aber nicht vertikal. Hab schon ziemlich viel rumprobiert aber irgendwie komme ich nicht drauf! Habe auch schon diverse Seiten durchstöbert aber nichts gefunden..

Hab diverse Sachen schon wieder verändert und baue jetzt erstmal das Gerüst weiter zusammen und wenns dann zum zentrieren geht brauch ich wahrscheinlich nochmal Hilfe.



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>    <title>Feist l Vertrieb &amp; Projektmanagement</title>    <link rel="stylesheet" type="text/css" href="style.css" /></head><body>
<div id="container">    <div id="layout">           <div id="header">        </div>        <div id="content">        </div>        <div id="footer_c">            <div id="footer_up">            </div>            <div id="footer_link">               Copyright © 2013 | All Rights Reserved | Designed by <a href="http://www.test.de" test.de>            </div>        </div>    </div></div>
</body></html>

und meine CSS Datei:
Code: 
/* CSS Document */body
{
    padding: 0;
    margin: 0;
    background-image:url(burberrybg.jpg);
    color: #FFF;
    font-family:Tahoma, Geneva, sans-serif;
    font-size: 12px;
    line-height: 150%;
}


#container {
    margin: ;
    width:910px;
    height:610px;
}


#layout {
    width: 900px;
    height: 600px;    
    border:solid;
    border-color:#727071;
    border-width:5px;
    background: #999;
}


#header {
    width:900px;
    height:150px;
    background:#999;
}


#content {
    width:900px;
    height:413px;
    background:#333;
}


#footer_c {
    width:900px;
    height:37px;
}


#footer_up {
    width:900px;
    height:6px;
    background:#4180b7;
}


#footer_link {
    width:900px;
    height:31px;
    background:#424242;
    text-align:center;
}
 
Zuletzt bearbeitet:
Hallo habe nun nochmal eine Frage und zwar wenn ich die Container so anlege wäre es richtig??
Habe ein grobes Rohlayout hochgeladen und würde es folgendermaßen machen

Ich lege einmal ein Container um das ganze Layout. In diesen packe ich wieder zwei Container einmal den oberen Part. Erster Container (Sidebar, Header, Navi,Content)
Zweiter Container (Footer)

Hoffe mal dass ich es nicht zu kompliziert umschrieben habe würde mal grob die html Datei auflisten....

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=UTF-8" /><title>Unbenanntes Dokument</title></head>
<body>        
<div id="grundlayout">
           <div id="obererteil">
              <div id="sidebar">    </div>
              <div id="header">    </div>
              <div id="navi">    </div>
              <div id="content">    </div>
            </div>
      <div id="footer">   </div> 
</div>
</body>
</html>

Im Container "Sidebar usw. " muss halt dann mit dem Befehl float die Bilder anordnen....


Layoutroh.jpg
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben