Seitenlayout bringt mich zum Wahnsinn

Nuthria · 9. Mai 2016

Hallo Ihr,
ich bin muss ich vorweg sagen, weder sicher in HTML, noch in PHP oder CSS.
Ich bringe mir alles per trial and error bei...

Folgendes: Ich möchte ein Grundgerüst für eine recht einfache Website entwickeln.
Ich stelle mir z.B. eine horizontzale Einteilung von 10% Seitenrand (ohne Funktion), 10%Navigationsbar, 60% Inhalt, 10% interne Werbefläche und 10% Seitenrand vor.
Den Rand links und rechts habe ich irgendwie hinbekommen.

Mit den restlichen 80% habe ich jedoch meine Probleme, wie man im Bild sehen kann.
Sobald ich die Größe mit Strg+Mausrad verändere, verschiebt sich alles.
Da wo "test" steht, ist ein Div-Container, denn ich möchte, dass die 60% Inhalt eine andere Farbe bekommen; über den Body habe ich das nicht geschafft, ohne dass der Rand ebenfalls diese Farbe annimmt... Die gelbe Hinterlegung war eine andere Idee, die vielleicht ebenfalls praktikabel wäre....

Problem 1: Die Buttons und das Logo sollen sich nciht vergrößern oder verkleinern lassen, damit diese nicht aus ihrem Rahmen springen.
Problem 2: Ich verstehe schlichtweg nicht, wieso der Hintergrund der Navigationsbar schön brav statisch an seinem Platz bleibt; alle anderen Rahmen jedoch nicht......

CSS

head { 
   link rel="icon" href="img/favicon.png" type="image/png";
}




body { 
/*	background-image: url("img/bg_weiss.gif");*/
  background-color:#e4d9c0;
  color: black;
}




html, body { 
	top:0; left:0; right:0;
	min-height:100%;
	margin:0;
	padding:10px;
	width:80%;
}




p {
  font-size: 16px;
}







/*
img {
  width: 60%;
}
*/




.title {
  font-size: 65px;
}







a {
  text-decoration: none;
}













#footer {
	clear:left;
	background:#CDC6AD ;
	text-align:center;
}




header {
  background-color: #CDC6AD;
  position: fixed;
  top: 0;
  left: 5%; 
  width: 15%;
  float:left;
  /*padding:10px;*/
  height: 100%;
  font-weight: bold;
  list-style-type: none;
}




#menu {

}




#menu li{
  background-color: rgba(193, 163, 115, 0.71);
  border: solid 0px #000000;
  width: 7em;
  margin: 5px;
  display: inline-block;}




#menu li a {color: maroon;
        	text-decoration: none;
        	}




#menu li:hover {background-color: #837c6b;}




#menu li a:hover {color: #FFFFFF;}




#content
{
margin-top: 5%;
margin-left: 23.5%;
margin-right: 10%;
padding: 5px 5px 25px 5px;
} 




#impressum2
{
  text-align: left;
}




#impressum2 li
{
  list-style-type: none;
  border: solid 0px #000000;
  width: 7em;
  padding: 2px;
  margin: 5px;
  font-weight: normal;   
}




#wrapper
{
  margin: 0 auto;
border: none;
background: #FEFCE9;
}

Alles anzeigen

MrMurphy · 9. Mai 2016

Hallo

Ohne den HTML-Quelltext können wir dir nicht konkret helfen.

Zitat

Ich bringe mir alles per trial and error bei...

Das ist grundsätzlich schlecht. Das aktuelle HTML und CSS sind sehr komplex geworden und erfordern ein gewissen Grundwissen.

Grade auch wenn es um unterschiedliche Fenstergrößen und Responsive Design geht.

Zitat

Problem 1: Die Buttons und das Logo sollen sich nciht vergrößern oder verkleinern lassen, damit diese nicht aus ihrem Rahmen springen.

Das ist aber das ganz normale Verhalten und daran solltest du nichts ändern. Es ist besser in solchen Fällen die Anordnung der Elemente zu ändern.

Zitat

Problem 2: Ich verstehe schlichtweg nicht, wieso der Hintergrund der Navigationsbar schön brav statisch an seinem Platz bleibt; alle anderen Rahmen jedoch nicht......

Das liegt an dem Zusammenspiel von HTML und CSS. Aber ohne das HTML - siehe weiter vorne im Text.

Gruss

MrMurphy

Nuthria · 9. Mai 2016

index.php

HTML

<body id="content"> 	<!-- Inhalt --> 
	<div id="wrapper">test</div>

	<?php include ("header.php"); ?>
 
	<h1 class="title">dfsfsdf</h1>

	<p style="background-color:yellow"> Diese Website ist noch im Aufbau. Jegliche Bilder und Hintergründe sind Platzhalter und dienen nicht der kommerziellen Nutzung. Derzeit arbeiten wir noch am Grundgerüst der Homepage. Wenn du zufällig hierhergefunden hast, dann vergiss den Link einfach.</p>

header.php

HTML

<header>	<!-- Navigation -->
	<img src="logo.png" width="200px">
	<ul id="menu">
  	<li><....></li>
	</ul>

	<ul id="impressum2">
	<li>Name</li>
	<li>Name</li>
	<li>Name</li>
	</ul>
  </header>

Alles anzeigen

Das dürfte der entscheidende Text sein.

edit: ich hätte es lieber so wie bspw. auf dieser seite (wenn ich das jetzt mal so verlinken darf)
http://www.ostland.de/wohnen-leben/immobiliensuche/

da bleiben die verschiedenen elemente im verhältnis zueinander immer gleich und die verschiebung passiert beim reinzoomen nach außen hin. was machen die anders?

MrMurphy · 9. Mai 2016

Hallo

Der Quelltext passt aber nicht zum Bild.

Der header soll also 10% Breite haben und links stehen. Ich finde aber weder einen div-Container für den Inhalt noch einen dritten Container für die Werbefläche.

Zitat

wenn ich das jetzt mal so verlinken darf

Ja, Webseiten dürfen grundsätzlich verlinkt werden.

Allerdings hat die verlinkte Webseite mit aktuellem HTML / CSS wenig zu tun. Sie ist zentriert und starr. Außerdem enthält sie keine nebeneinander liegenden Container und passt damit auch nicht zu deiner Seite.

Zitat

die verschiebung passiert beim reinzoomen nach außen hin

Das ist schlechter Stil und sollte vermieden werden, da die Besucher beim Hineinzoomen oder schmaleren Fenstern seitlich scrollen müssen. Webseiten sollten aber so erstellt werden, dass die Besucher nur hoch- und runter scrollen müssen.

Gruss

MrMurphy

Nuthria · 9. Mai 2016

Der Quelltext passt sehr wohl zum Bild....?
Der div-container enthält lediglich das Wort test. Stimmt, die Werbefläche habe ich noch nicht. Wieso sollte ich auch, wenn nichtmal navbar<<>>inhalt richtig zueinander passen.

Okay, die aktuelle Webseite hat mit HTML und CSS nichts zu tun. womit dann? Der Mittelteil bei der Immobiliensuche gefällt mir nämlich sehr gut.
Dann bringe ich eben ein anderes beispiel
http://www.ssfbonn.de/sportabzeichen.html

auch da kann man schön reinscrollen. wie erreiche ich das?

Basi · 9. Mai 2016

Mit Viewport und Media Queries.

MrMurphy · 9. Mai 2016

Hallo

Zitat

wie erreiche ich das?

Der HTML-Quelltext für das Grundlayout entspricht

Code

<body>
   <header>
      <h2>header</h2>
   </header>
   <div>
      <main>
         <h2>main</h2>
      </main>
      <aside>
         <h2>aside</h2>
      </aside>
   </div>
   <footer>
      <h2>footer</h2>
   </footer>
</body>

Alles anzeigen

Das dazu passende CSS kann so aussehen:

Code

@media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      body>header,
      body>footer,
      body>div>main,
      body>div>nav,
      body>div>aside {
         padding: 0.3rem 0.5rem;
         border: 3px solid gray;
      }
      h1 {
         font-size: 1.2rem;
         margin: 0.5rem 0;
      }
      h2 {
         font-size: 1rem;
         margin: 0.5rem 0;
      }
      p {
         font-size: 1rem;
         margin: 0.5rem 0;
      }
      body {
         max-width: 980px;
         padding: 0.5rem;
         margin: 0 auto;
      }
      body>header {
         margin-bottom: 0.5rem;
      }
      body>div {
         margin: 0;
      }
      body>div>main,
      body>div>aside {
         margin-bottom: 0.5rem;
      }
   }
   @media only screen and (min-width: 980px) {
      body>div {
         overflow: hidden;
      }
      body>div>aside {
         float: left;
         width: 250px;
      }
      body>div>main {
         float: right;
         width: calc(100% - 250px - 0.5rem);
         margin-left: 0.5rem;
      }
   }

Alles anzeigen

Gruss

MrMurphy

Nuthria · 30. Mai 2016

Ich danke vielmals!!!

Seitenlayout bringt mich zum Wahnsinn

Jetzt mitmachen!

Teilen