Css - Seiten überdecken inhalt

Nyrados · #1 (**permalink**) 25.01.2016, 20:54

Hallo,
Um meine Seite etwas besser aufzuteilen habe ich die Seite in vier Teile unterteilt: Oben für ein Menü, links und rechts, und in der Mitte für den Content.
Klappt soweit, aber wenn die Seite kleiner Skaliert wird oder bei der Mobilen Version wird der Content von den Seiten verdeckt. Wäre es möglich das beim Verkleinern der Seite die Seiten kleiner werden?

HTML-Code:

<html>
<head>
<style>
.wrap{
	width:100%;height:100%;position:relative
	}
.head{
	overflow:hidden;
	height:100px;
	position:fixed;
	top:0;left:0;
	width:100%;
	background-color:#ff0000;
	}
.bodywrap{
	margin-top:100px;
	margin-left:-8px;
	height:100%;
	}
.left{
	height:100%;
	width:200px;
	float:left;
	position:fixed;
	left:0;
	background-color:#00ff00;
	}
.center{
	height:100%;
	margin-left:200px;
	background-color:#ffff00;
	}
.right{
	height:100%;
	width:200px;
	position:fixed;
	right:0;
	background-color:#0000ff;
	}
</style>
</head>
<body>
<div class='wrap'>
<div class='head'>Head</div>
    <div class='bodywrap'>
        <div class='left'>left</div>
        <div class='right'>right</div>
        <div class='center'>center</div>
    </div>
 </div>
   </body>
</html>

Ich hoffe ihr könnt mir helfen.
Lg. Nyrados

MrMurphy · #2 (**permalink**) 25.01.2016, 22:17

Hallo

Zitat:

Ich hoffe ihr könnt mir helfen.

Schwierig. Du kennst dich offensichtlich weder mit HTML noch mit CSS aus und hast keine Vorstellung wie sich responsive Webseiten verhalten.

Zudem sind Seiten ohne Inhalt kaum geeignet Lösungen zu finden oder Probleme zu erläutern.

Deshalb wäre es sinnvoller wenn du zunächst eine Seite mit sinnvollem HTML-Inhalt (im body-Bereich) und den notwendigen und vorgeschriebenen Angaben im head-Bereich erstellen würdest.

Zunächst kannst du für den Inhalt auch sogenannte Blindtexte verwenden. Oder dir sinnfreien Inhalt ausdenken. Entscheidend ist dass er von der Größe her dem späteren Inhalt gleicht.

Wenn das steht kann das Aussehen / Layout und das Verhalten über CSS hinzugefügt werden.

Code:

<html>

Der Doctype fehlt. Ohne Doctype wissen die Browser nicht in welcher HTML-Version der Quelltext angezeigt werden soll.

Zudem fehlt das title-Element und Angaben zum Zeichensatz.

HTML-Code:

<div class='wrap'>
...
 </div>

Ein umschließendes div ist überflüssig - weglassen.

HTML-Code:

<div class='head'>Head</div>

Webseiten sollten aktuell mit HTML5 erstellt werden. Dazu gehört auch semantisch sinnvolle Elemente zu verwenden, wenn es möglich ist. In diesem Fall das header-Element.

HTML-Code:

    <div class='bodywrap'>
        ...
    </div>

Das Element ist in diesem Fall überflüssig. Für bestimmte CSS-Anweisungen kann es sinnvoll sein.

HTML-Code:

        <div class='left'>left</div>
        <div class='right'>right</div>

left und right sind als Klassennamen nicht sinnvoll. Im responsive Design oder bei Änderungen am Quelltext kann sich die Position komplett ändern. Besser ist es als Klassennamen den Inhalt oder die Funktion zu verwenden.

Wenn einer der Container die Navigation enthält wäre statt div das nav sinnvoller. Und für das andere div entsprechend aside.

Das ist so ein Beispiel, dass sich ohne Inhalt keine Lösungen finden lassen. Hier können wir als Helfende nur raten. Damit können wir auch daneben liegen.

HTML-Code:

        <div class='center'>center</div>

Hier wäre wahrscheinlich das main-Element passender.

Insgesamt sollte Text auch nur in den dafür vorgesehenen Containern stehen, also zum Beispiel p, h1 bis h6, li, dt, dd und so weiter.

Außerdem sollten die Container in der Reihenfolge im Quelltext stehen, in der sie von links oben nach rechts unten auf großen Bildschirmen angezeigt werden.

Ansonsten gibt es auch die Vorgehensweise im Quelltext die wichtigen Informationen (main / .center) oben anzuordnen und nach unten hin die weniger wichtigen Informationen.

Die wichtigen Informationen unten anzuordnen wie in deinem Beispiel ist in keinem Fall sinnvoll.

Insgesamt würde ich deshalb folgendes HTML vorschlagen:

HTML-Code:

   <header>
      <h2>header</h2>
   </header>
   <nav>
      <h2>nav</h2>
   </nav>
   <main>
      <h2>main</h2>
   </main>
   <aside>
      <h2>aside</h2>
   </aside>

Wenn du dich damit anfreunden kannst und etwas Inhalt hinzufügst kann mit dem CSS für das Layout und Aussehen begonnen werden.

Gruss

MrMurphy

MrMurphy · #3 (**permalink**) 25.01.2016, 23:43

Hallo

Zu deinem bisherigen CSS.

Grundsätzlich sollten nur Eigenschaften bestimmt werden, die nicht in allen Browsern bereits vorgegeben sind.

Die Höhe von Containern wie div richtet sich nach deren Inhalt. Entsprechend sind height-Angaben überflüssig und erschweren im Endeffekt erfahrungsgemäß das Layouten.

Code:

   .wrap {
      width: 100%;
      height: 100%;
      position: relative;
      }

Das gesamte div.wrap ist überflüssig. Entsprechend auch alle CSS-Angaben dafür.

Code:

   .head {
      overflow: hidden;
      height: 100px;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background-color: #ff0000;
      }

overflow:hidden - Was soll das bewirken? Weglassen

height - überflüssig, weglassen

position: fixed - Was soll das? Weißt du überhaupt was du damit anrichtest? Stichwort: Elementenfluß. Weglassen, wenn du nicht weißt was das soll.

top - Überflüssig, weglassen

left - Überflüssig, weglassen

width - Überflüssig, weglassen

Code:

   .bodywrap{
      margin-top: 100px;
      margin-left: -8px;
      height: 100%;
      }

Wahrscheinlich überflüssig. Das hängt im Endeffekt von deinen Layout-Wünschen ab. Also insgesamt erst mal weglassen.

Wobei alle CSS-Angaben unsinnig wären.

margin-top - Der Container soll sich dem darüber befindlichen orientieren - unsinnig

marigin-left - negative Abstände sind zu 99,9999999% unsinnig

height - siehe oben

Code:

   .left{
      height: 100%;
      width: 200px;
      float: left;
      position: fixed;
      left: 0;
      background-color: #00ff00;
      }

height - Überflüssig, weglassen.

width - wird überflüssig werden, später entfernen

float - Im Zusammenhang mit position:fixed überflüssig, weglassen

position:fixed - Siehe unter .head, weglassen

left - Unsinnig, weglassen

Code:

   .center{
      height: 100%;
      margin-left: 200px;
      background-color: #ffff00;
      }

height - Unsinnig, weglassen

margin-left - Überflüssig, der Container soll sich an dem links befindlichen orientieren, weglassen

Nebenbei: Warum kein margin-right? Hättest du den Container mit (Blind-)Text gefüllt wäre dir aufgefallen, dass der unter dem rechten Container verschwindet. Im Endeffekt bleibt margin-right aber überflüssig. Der rechte Container soll sich schließlich am .center orientieren.

Code:

   .right{
      height: 100%;
      width: 200px;
      position: fixed;
      right: 0;
      background-color: #0000ff;
      }

Hier gilt das gleiche wie unter .left.

Und schon ist das restliche CSS bedeutend kleiner und übersichtlicher.

Der Rest wird dann mittels ein paar Flexbox-Angaben erledigt. Dazu sollte aber das in meinem vorigen Beitrag vorgeschlage Grundgerüst verwendet werden.

Gruss

MrMurphy

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Redesign für Steiner Cycling Team	pkipper	Site- und Layoutcheck	11	09.02.2011 12:25
CSS - Inhalt läuft über Rand! (Mit Link)	mcavus	CSS	8	29.07.2009 08:24
sidebar fixieren?	florianhwm	CSS	1	29.05.2009 17:23
ps design (slices), php (dynamischer inhalt), css gestaltung	schleepy	CSS	19	02.06.2006 22:46
height: 100% beim IE	[M.o.C]Co	CSS	3	12.05.2005 12:58