Seitenaufteilung / Positionierung

z1000

im "alten" Thread habe ich schon beschlossen die Seite von Grund auf neu aufzubauen. Durch Hilfe / Tipps habe ich nun die Seite mit den bereitgestellten "Containern" : Header; Nav; Main; und Footer das Grundgerüst mir zusammengestellt.

Hier mal der zwischenstand :

In der Mitte befinden sich zwei "Main" Container welche auf einer Ebene nebeneinander sind. Diese sollen sich auch je nach inhalt in der Höhe anpassen. Allerdings sollte es auch eine Mindesthöhe geben, undzwar mindestens bis zum Footer. ("left" und "right")

ich habe es durch die angabe von height:100%; versucht, allerdings änderte sich da garnichts. wenn ich aber statt % px eingesetzt habe, hat es geklappt.

Aber da ich ja möglichst mit wenig pixel arbeiten möchte, da es ja auf möglichst vielen verschiedenen auflösungen gut dargestellt werden soll, suche ich nach einer passenden lösung.

Aktueller Quellcode :

HTML

<body>
<div class="gridContainer clearfix">
  <div id="div1" class="fluid">
    <header class="fluid header"><img src="Bilder/header.jpg" alt="" width="100%"/></header>
  </div>
  <p>
    <nav class="fluid nav">Neuigkeiten - Bio/Geschichte - Leistungen - 3M DI-NOC - Galerie - Referenzen - Kontakt - Links</nav>
    <nav class="fluid unternav"><img src="Bilder/unternav.png"  alt="" width="100%"/></nav>
  </p>
  <main class="fluid left">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>Text</p>
    <p>&nbsp;</p>
    <p>Text Text</p>
  </main>
  <main class="fluid right">
    <p>Text</p>
    <p>&nbsp;</p>
    <p>Text</p>
    <p>&nbsp;</p>
    <p>Text</p>
    <p>&nbsp;</p>
  </main>
  <footer class="fluid footer">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
  </footer>
</div>
</body>

Alles anzeigen

und das die CSS :

Code

@charset "utf-8";


img, object, embed, video {
    max-width: 100%;
}


.fluid {
    width: 100%;
    float: left;
    display: block;
}


.gridContainer {
    margin-left: auto;
    margin-right: auto;
    width: 86.45%;
    background-color:#000;
}
.nav {
    background-color:#000;
}
.footer {
    background:url(../Bilder/footer.png);
    background-repeat:no-repeat;
    position:fixed;
    bottom:0px;
}
.left {
background:url(../Bilder/mainleft.png);
background-repeat:no-repeat;
width: 20%;
}
.right {
    background: url(../Bilder/maintext.png);
    background-repeat: repeat-y;
    background-size: 100%;
    width: 80%;
    clear: none;
}
.unternav {
    width:100%;
}

Alles anzeigen

Gruß z1000

MrMurphy

Hallo,

bevor du weiter unnütz rumdoktorst solltest du vielleicht doch erst mal die Grundlagen von HTML5 / CSS3 lernen.

So darf das main-Element nur einmal auf jeder Seite vorkommen.

Da die Semantik bei HTML5 eine große Rolle spielt läßt sich eine Seite ohne konkreten Inhalt auch kaum beurteilen. Deine Quellcodeschnipsel helfen da nicht viel weiter.

Gruss

MrMurphy

z1000

Habe nochmals von Grundauf alles neu "geschrieben".

HTML

<!DOCTYPE html>
<html lang="de">
<head>
<style type="text/css">
<!--
body {
  font: 100.01% Verdana, Arial, Helvetica, sans-serif;
    background-color:#000;
    color:#FFF;
}


* {
  margin:0;
  padding:0;
}


#seite {
  width:100%;
  margin: 0 auto;
}


#header {
}


#nav {
    clear: both;
    text-align: center;
}
#unternav {
    background:url(Bilder/unternav.png);
    background-size:100% 2.7%;
    size:100% 2.7%;
}


#main {
    background: url(Bilder/maintext.png);
    background-size:100% 100%;
    background-repeat:repeat;
    margin-left: 25%;
    height:450px;
}


#left {
  float: left;
  width:25%;
  background:url(Bilder/mainleft.png);
  background-repeat:no-repeat;
  height:450px;
}


#footer {
  background:url(Bilder/footer.png);
  background-repeat:no-repeat;
  background-size:100% 100%;
  position:fixed;
  bottom:0px;
  width:100%;
  height:10%;
}
-->
</style>


</head>
<body>
<div id="seite">
  <header id="header"><img src="Bilder/header.jpg" width="100%" height="17.5%"  alt=""/></header>
  <nav id="nav"><span class="fluid nav" style="font-size: 150%">Neuigkeiten - Bio/Geschichte - Leistungen - 3M DI-NOC - Galerie - Referenzen - Kontakt - Links</span></nav>
  <nav id="unternav">
    <p>&nbsp;</p>
  </nav>
  <div id="left">
    TEXT TEXT TEXT !!!
  </div>
  <main id="main">
     TEXT TEXT TEXT !!!
  </main>
  <footer id="footer">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
  </footer>
</div>
</body>
</html>

Alles anzeigen

#

Wenn ich fertig werden sollte würde ich dann die CSS als extra file machen. vorerst habe ich mal alles in der .html.

die Höhenangaben von "left" und "main" habe ich mal mit der angabe von "450px" gesetzt. Allerdings hätte ich dies gerne prozentuell bzw. bis hin zum Footer. Ob nun genügend inhalt da ist oder nicht sollte keine Rolle spielen.

Hier mal ein Screen in FireFox, wo mir bisher ganz gut gefällt

Was haltest du / ihr nun vom Code. Sauberer ? Übersichtlicher ?

Gruß

z1000

explanator

Sieht doch schon ganz gut aus.
Die Höhenangaben von #left und main würde ich auf min-height: 450px setzen, dann hast du die MIndesthöhe bist aber nach unten falls es mehr Inhalt wird flexibel.

Code

#header {
}

kannst du auch

Code

header {
}

schreiben. Ersteres spricht die ID an, letzteres das Element.

Dir fehlt das Meta-Element Charset für den Zeichensatz im head und auch das title-Tag ist zwingend notwendig für den Seitentitel.

In HTMl5 kannst du
<style type="text/css">
abkürzen zu <style>

font: 100.01% ist aus uralten Zeiten und sieht man noch viel. Ein font: 100% ist ausreichend oder gleichbedeutend zu 1em.

Die Schrift im Header ist keine Schrift sonder Bildbestandteil. Das sollte besser Schrift sein und das Bild ein Hintergrundbild. Auch würde ich mir das Auto freigestellt vom Grafiker geben lassen und dann über den Hintergrund packen. Im Moment verzerrt dein Bild wenn die Proportionen des Viewport nicht stimmen. MAch dazu mal dein Fenster kleiner von rechts nach links, dann siehst du es, was ich meine.

Ansonsten -> weiter so.

z1000

HTML

<!DOCTYPE html>
<html lang="de">
<meta charset="utf-8">
<title>Titeltext :-)</title>
<head>
<style>
<!--
body {
  font: 100% Verdana, Arial, Helvetica, sans-serif;
    background-color:#000;
    color:#FFF;
}


#logo {
    position: absolute;
    left: 60%;
    top: 4.5%;
    width:33%;
    height:8.65%;
}


#auto {
    width:25%;
    height:22.5%;
    padding-left:1%;
    padding-top:4%;
}


#seite {
  width:100%;
  margin: 0 auto;
}


#header {
    background:url(Bilder/header.png);
    background-repeat:no-repeat;
    background-size:100% 100%;
    width:100%;
}


#nav {
    clear: both;
    text-align: center;
}
#unternav {
    background:url(Bilder/unternav.png);
    background-size:100% 2.7%;
    size:100% 2.7%;
}


#main {
    background: url(Bilder/maintext.png);
    background-size:100% 100%;
    background-repeat:repeat;
    margin-left: 25%;
    height:450px;
}


#left {
  float: left;
  width:25%;
  background:url(Bilder/mainleft.png);
  background-repeat:no-repeat;
  height:450px;
}


#footer {
  background:url(Bilder/footer.png);
  background-repeat:no-repeat;
  background-size:100% 100%;
  position:fixed;
  bottom:0px;
  width:100%;
  height:10%;
}
-->
</style>
</head>
<body>
<div id="seite">
  <header id="header">
    <p><img src="Bilder/mercedes.png" alt="" id="auto"/><img src="Bilder/logo.png" alt="" id="logo"/></p>
  </header>
  <nav id="nav"><span class="fluid nav" style="font-size: 150%">Neuigkeiten - Bio/Geschichte - Leistungen - 3M DI-NOC - Galerie - Referenzen - Kontakt - Links</span></nav>
  <nav id="unternav">
    <p>&nbsp;</p>
  </nav>
  <div id="left">
    TEXT TEXT TEXT !!!
  </div>
  <main id="main">
     TEXT TEXT TEXT !!!
  </main>
  <footer id="footer">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
  </footer>
</div>
</body>
</html>

Alles anzeigen

habe es nun mal bearbeitet...

habe nun das auto und das logo als einzelne grafiken. ebenfalls habe ich die anderen änderungen soweit mit angepasst. charset utf-8 i.o. ?

mein größtes problem ist immernoch, dass z.B. Main eine höhe bis hin zum footer haben sollte. dies möglichst "prozentuell" bzw. automatisch bis zum footer. wie bekomme ich das gelöst ?

explanator

Nimm mal den http://csslayoutgenerator.com/ und schau dir den Quelltext an.

z1000

super, werde mich nachher mal damit beschäftigen wusste garnicht das es solche "tools" gibt danke im vorraus

z1000

Habe mal ein wenig weiter gemacht, kleinigkeiten verändert. Ein paar sachen hinzugefügt etc.

Nun habe ich noch ein kleines problem. Ich denke nachdem dass gelöst ist, sollte das Grundgerüst stehen

In FireFox und Google Chrome sieht die Seite ganz gut aus... siehe hier :

Im Internet Explorer (11) "verrutscht" dieser weise Balken (ein eingefügtes Bild) unter der Navigation weit nach unten weg. Siehe hier :

Hier nochmals die Quellcodes, habe nun auch die CSS ausgelagert.

HTML

<!DOCTYPE html>
<html lang="de">
<meta charset="utf-8">
<title>Titeltext :-)</title>
<style type="text/css">
a:link {
    color: #FFF;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #FFF;
}
a:hover {
    text-decoration: none;
    color: #FFF;
}
a:active {
    text-decoration: none;
    color: #FFF;
}
</style>
<head>
<link rel="stylesheet" type="text/css" href="CSS/design.css".css" />
</head>
<body>
<div id="seite">
  <header id="header">
    <p><img src="Bilder/mercedes.png" alt="" id="auto"/><a href="index.html"><img src="Bilder/logo.png" alt="" id="logo"/></a><img src="Bilder/head_text2.png"  alt="" width="300" height="17" id="head_text2"/><img src="Bilder/head_text1.png"  alt="" width="325" height="20" id="head_text1"/><a href="index.html"><img src="Bilder/domain.png"  alt="" width="209" height="12" id="domain"/></a></p>
  </header>
  <nav id="nav"><span class="fluid nav" style="font-size: 150%"><a href="neuigkeiten.html">Neuigkeiten</a> - <a href="bio.html">Bio/Geschichte</a> - <a href="leistungen.html">Leistungen</a> - <a href="dinoc.html">3M DI-NOC</a> - <a href="galerie.html">Galerie</a> - <a href="referenzen.html">Referenzen</a> - <a href="kontakt.html">Kontakt</a> - <a href="links.html">Links</a></span></nav>
  <div id="left">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>TEXT !!!</p>
  </div>
  <main id="main">
     <p><img src="Bilder/unternav.png"  alt="" width="100%" height="2.7%" id="wb"/></p>
     <p>TEXT TEXT TEXT !!! </p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>TEXT TEXT TEXT !!! </p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>TEXT TEXT TEXT !!! </p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>TEXT TEXT TEXT !!! </p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>TEXT TEXT TEXT !!! </p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>TEXT TEXT TEXT !!! </p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>TEXT TEXT TEXT !!! </p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
  </main>
  <footer id="footer">
    <p style="text-align: center"><a href="http://homepagevomdesigner.de/" target="new"><img src="Bilder/designey_by.png" width="216" height="13" id="designedby"/></a></p>
    <p style="text-align: center">&nbsp;</p>
    <p style="text-align: center; font-style: normal;"><span style="text-align: center; font-weight: bold;"><a href="impressum.html">Impressum</a></span><a href="https://www.facebook.com/pages/xyz" target="new"><img src="Bilder/fb.png" width="100%" height="40%" id="fb"/></a></p>
  </footer>
</div>
</body>
</html>

Alles anzeigen

HTML

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


body {
  font: 100% Verdana, Arial, Helvetica, sans-serif;
    background-color:#000;
    color:#FFF;
}
#intro {
}
#logo {
    position: absolute;
    left: 70%;
    top: 4.5%;
    /* width:20%;
    height:8.65%; */
    size:auto;
}
#auto {
    width:25%;
    height:22.5%;
    padding-left:1%;
    padding-top:4%;
}
#seite {
  width:100%;
  margin: 0 auto;
}
#header {
    background:url(../Bilder/header.png);
    background-repeat:no-repeat;
    background-size:100% 100%;
    width:100%;
}
#head_text1 {
    position: absolute;
    left: 20%;
    padding-top: 4%;
}
#head_text2 {
    position: absolute;
    left: 30%;
    padding-top: 8%;
}
#domain {
    position: absolute;
    left: 77%;
    padding-top: 10%;
}
#nav {
    clear: both;
    text-align: center;
    font-size:14px;
}
#wb {
    width:100%;
}
#main {
    background: url(../Bilder/maintext.png);
    background-size:100% auto;
    background-repeat:repeat;
    margin-left: 25%;
    min-height:450px;
}


#left {
  float: left;
  width:25%;
  background:url(../Bilder/mainleft.png);
  background-repeat:no-repeat;
  background-size:100% auto;
  min-height:450px;
  background-position:left 1em;
}


#footer {
    background: url(../Bilder/footer.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: fixed;
    bottom: 0px;
    width: 100%;
    height: 10%;
}
#fb {
    position: absolute;
    left: 3%;
    bottom:30%;
    width:auto;
    height:auto;
}
#designedby {
    position: absolute;
    right: 5%;
    bottom:20%;
    width:auto;
    height:auto;
}

Alles anzeigen

DerUser

Zitat von z1000

Habe mal ein wenig weiter gemacht, kleinigkeiten verändert. Ein paar sachen hinzugefügt etc.

Nun habe ich noch ein kleines problem. Ich denke nachdem dass gelöst ist, sollte das Grundgerüst stehen

In FireFox und Google Chrome sieht die Seite ganz gut aus... siehe hier :

Im Internet Explorer (11) "verrutscht" dieser weise Balken (ein eingefügtes Bild) unter der Navigation weit nach unten weg. Siehe hier :

Hier nochmals die Quellcodes, habe nun auch die CSS ausgelagert.

HTML

<!DOCTYPE html>
<html lang="de">
<meta charset="utf-8">
<title>Titeltext :-)</title>
<style type="text/css">
a:link {
    color: #FFF;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #FFF;
}
a:hover {
    text-decoration: none;
    color: #FFF;
}
a:active {
    text-decoration: none;
    color: #FFF;
}
</style>
<head>
<link rel="stylesheet" type="text/css" href="CSS/design.css".css" />
</head>
<body>
<div id="seite">
  <header id="header">
    <p><img src="Bilder/mercedes.png" alt="" id="auto"/><a href="index.html"><img src="Bilder/logo.png" alt="" id="logo"/></a><img src="Bilder/head_text2.png"  alt="" width="300" height="17" id="head_text2"/><img src="Bilder/head_text1.png"  alt="" width="325" height="20" id="head_text1"/><a href="index.html"><img src="Bilder/domain.png"  alt="" width="209" height="12" id="domain"/></a></p>
  </header>
  <nav id="nav"><span class="fluid nav" style="font-size: 150%"><a href="neuigkeiten.html">Neuigkeiten</a> - <a href="bio.html">Bio/Geschichte</a> - <a href="leistungen.html">Leistungen</a> - <a href="dinoc.html">3M DI-NOC</a> - <a href="galerie.html">Galerie</a> - <a href="referenzen.html">Referenzen</a> - <a href="kontakt.html">Kontakt</a> - <a href="links.html">Links</a></span></nav>
  <div id="left">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>TEXT !!!</p>
  </div>
  <main id="main">
     <p><img src="Bilder/unternav.png"  alt="" width="100%" height="2.7%" id="wb"/></p>
     <p>TEXT TEXT TEXT !!! </p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>TEXT TEXT TEXT !!! </p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>TEXT TEXT TEXT !!! </p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>TEXT TEXT TEXT !!! </p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>TEXT TEXT TEXT !!! </p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>TEXT TEXT TEXT !!! </p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>TEXT TEXT TEXT !!! </p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
  </main>
  <footer id="footer">
    <p style="text-align: center"><a href="http://homepagevomdesigner.de/" target="new"><img src="Bilder/designey_by.png" width="216" height="13" id="designedby"/></a></p>
    <p style="text-align: center">&nbsp;</p>
    <p style="text-align: center; font-style: normal;"><span style="text-align: center; font-weight: bold;"><a href="impressum.html">Impressum</a></span><a href="https://www.facebook.com/pages/xyz" target="new"><img src="Bilder/fb.png" width="100%" height="40%" id="fb"/></a></p>
  </footer>
</div>
</body>
</html>

Alles anzeigen

HTML

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


body {
  font: 100% Verdana, Arial, Helvetica, sans-serif;
    background-color:#000;
    color:#FFF;
}
#intro {
}
#logo {
    position: absolute;
    left: 70%;
    top: 4.5%;
    /* width:20%;
    height:8.65%; */
    size:auto;
}
#auto {
    width:25%;
    height:22.5%;
    padding-left:1%;
    padding-top:4%;
}
#seite {
  width:100%;
  margin: 0 auto;
}
#header {
    background:url(../Bilder/header.png);
    background-repeat:no-repeat;
    background-size:100% 100%;
    width:100%;
}
#head_text1 {
    position: absolute;
    left: 20%;
    padding-top: 4%;
}
#head_text2 {
    position: absolute;
    left: 30%;
    padding-top: 8%;
}
#domain {
    position: absolute;
    left: 77%;
    padding-top: 10%;
}
#nav {
    clear: both;
    text-align: center;
    font-size:14px;
}
#wb {
    width:100%;
}
#main {
    background: url(../Bilder/maintext.png);
    background-size:100% auto;
    background-repeat:repeat;
    margin-left: 25%;
    min-height:450px;
}


#left {
  float: left;
  width:25%;
  background:url(../Bilder/mainleft.png);
  background-repeat:no-repeat;
  background-size:100% auto;
  min-height:450px;
  background-position:left 1em;
}


#footer {
    background: url(../Bilder/footer.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: fixed;
    bottom: 0px;
    width: 100%;
    height: 10%;
}
#fb {
    position: absolute;
    left: 3%;
    bottom:30%;
    width:auto;
    height:auto;
}
#designedby {
    position: absolute;
    right: 5%;
    bottom:20%;
    width:auto;
    height:auto;
}

Alles anzeigen

Hallo, kannst du das mal als Testcase(zb. square7.ch) hochladen, ich habe deinen Code jetzt local übernommen aber da mir die Grafiken nicht zur Verfügung stehen kann ich dir nicht wirklich helfen...

Zur info noch: size: auto; gibt es nicht

explanator

DerUser Mal so als Tipp: Es ist nicht notwendig den ganzen Beitrag samt Code zu zitieren, wenn du allgemein antwortest. Wenn du dich auf eine bestimmte Stelle des Beitrages beziehst reicht es auch aus nur auszugsweise zu zitieren.

Danke.

DerUser

Zitat von explanator

DerUser Mal so als Tipp: Es ist nicht notwendig den ganzen Beitrag samt Code zu zitieren, wenn du allgemein antwortest. Wenn du dich auf eine bestimmte Stelle des Beitrages beziehst reicht es auch aus nur auszugsweise zu zitieren.

Danke.

Tschuldige kommt nicht wieder vor

@z1000 melde dich wenn du das hochgeladen hast;-)

z1000

Habe es mal hochgeladen...

http://z1000.bplaced.net/

Tags