zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Einfaches Grundgerüst Navi verschiebt Content

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 08.03.2015, 09:51
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.04.2012
Beiträge: 16
StandBy1 befindet sich auf einem aufstrebenden Ast
Standard Einfaches Grundgerüst Navi verschiebt Content

Hallo Leute,

ich komme mal wieder mit einem Problem.

Ich habe mir mal ein einfaches HTML/CSS Grundgerüst gebaut aber die Navi verschiebt mir immer die anderen bereiche.

Ich habe nun schon versucht das mit Z-Index zu verhindern aber es will nicht so recht gehen.

HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Einfaches Grundgerüst</title>
 
<style type="text/css">
* {
  margin:0;
  padding:0;
  list-style:none;
  border:none;
}

#wrapper {
  background:#eee;
  width:960px;
  margin:0 auto;
  position:relative;
}

#wrapper:before {
  content:"";
  position:absolute;
  left:0px;
  top:0;
  bottom:0;
  width:200px;
  background:#aaa;
}

#wrapper:after {
  content:"";
  position:absolute;
  right:0px;
  top:0;
  bottom:0;
  width:200px;
  background:#dad;
}

#header , #footer  {
  position:relative;
  z-index:10;
}

#header {
  padding:20px;
  background:#cdc; 
  text-align:center;
}

#navigation { 
  padding:20px;
  background:#FF0000; 
  text-align:center;
  position:relative;
  z-index:10;
}

#left {
  position:relative;
  z-index:1;
  width:200px;
  float:left;
}

#right {
  position:relative;
  z-index:1;
  width:200px;
  float:left;
}

#content {
  width:559px;
  float:left;
}

 
#footer {
  padding:20px;
  clear:both;
  background:#cdc;
}

h4 , p , pre, ul{
  padding:10px;
}

/* Beginn Navigation */

#navi li { 
  width:128px; 
  float:left; 
}
		
#navi li ul { 
display:none; 
}

#navi li:hover ul, #navi li:hover ul li { 
display:block; 
z-index: 99;
}
    
</style>  

</head>

<body>

<div id="wrapper">

  <div id="header">Header</div>
    
  <div id="navigation">
      
    <div id="navcontainer">
      
      <ul id="navi">
      
        <li><a href="#">Test1</a></li>
        
        <li><a href="#">Test2</a>
          <ul>
            <li><a href="#">Test 2.1</a></li>
            <li><a href="#">Test 2.2</a></li>
            <li><a href="#">Test 2.3</a></li>
          </ul>
        </li>
        
        <li><a href="#">Test3</a>
          <ul>
            <li><a href="#">Test3.1</a></li>
            <li><a href="#">Test3.2</a></li>
            <li><a href="#">Test3.3</a></li>
          </ul>
        </li>
        
        <li><a href="#">Test4</a></li>
  
      </ul>
      
    </div>
    
  </div>
  
  <div id="left">Links</div>
  
  <div id="content">Content</div>
  
  <div id="right">Rechts</div>
  
  <div id="footer">Footer</div>
  
</div>

</body>

</html>
hat wer eine Idee wie ich das umschreiben muss damit es geht?

Gruß
StandBy1
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 08.03.2015, 17:06
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

Zitat:
Zitat von StandBy1 Beitrag anzeigen
.. aber die Navi verschiebt mir immer die anderen bereiche.
Richtig klären! Und was soll das Ganze mit z-index?

Beispiel: Edit fiddle - JSFiddle

Code:
<!DOCTYPE html>
<html lang="de">
<head>
	<meta charset="UTF-8">
	<title>Test</title>

<style type="text/css">
* { margin: 0; padding: 0; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
  display: block;
}
p { padding: 1em; }

html {
   background-color:#fff;
   font-family: Verdana, sans-serif;
   font-size: 120%;
}
body {
  background-color: #cdc;
  max-width: 960px;
  margin: 0 auto; 
}
header { 
  text-align: center;
}
nav { 
  padding: 20px;
  background-color: #f00;  
}
nav ul:after { 
   display: block;
   content: "";
   clear: both;
}
nav ul {  
   border: 1px dotted #000;
   list-style-type: none;
}
nav ul li { 
  width: 128px;
  float: left; 
} 
nav ul li a { 
  background-color: white;
  color: black;
  display: block; 
}  
main {
  background-color: #fff;
  position: relative;
  overflow: hidden;
}
main:before {
  background-color: #aaa;
  content:"";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 200px;
}
main:after {
  background-color: #dad;
  content:"";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 200px;
}
#left {
  position: relative;
  z-index: 1;
  width: 200px;
  float: left;
}
#content {
  margin: 0 200px;
}
#right {
  position: relative;
  z-index: 1; 
  float: right;
  width: 200px;
}
footer {
  font-weight: bold;
}
@media screen and (max-width: 800px) {
main:after,
main:before {
  content: normal;
  position: static; 
}
#content { margin: 0; }
#right,
#left {
  position: static; 
  float: none;
  width: 100%;
}
#right {
  background: #dad;
}
#left { background: #aaa;
}
}
</style>  

</head>
<body>

<header>
   <h1>Lorem ipsum.</h1>   
<nav>      
  <ul>   
     <li><a href="#">Test1</a></li>
     <li><a href="#">Test2</a></li> 
   </ul>  
 </nav>
</header>

<main>  
<div id="left">
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
   
<div id="right">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, odit, voluptates quaerat nostrum cupiditate neque tempore repudiandae.</p>
</div>

<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, odit, voluptates quaerat nostrum cupiditate neque tempore repudiandae Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, odit, voluptates quaerat nostrum cupiditate neque tempore repudiandae.</p>
</div>
</main> 

<footer>
<p>Lorem ipsum.</p>
</footer>

</body>
</html>
______________
MfG Roland

__________________________________________________ __

Du möchtest gleich hohe Spalten die kann auch mit Flexbox umsetzen.

Falls du dich neu umorientieren möchtest. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Geändert von K.Roland (08.03.2015 um 17:35 Uhr) Grund: Nachtrag
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 08.03.2015, 19:54
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.04.2012
Beiträge: 16
StandBy1 befindet sich auf einem aufstrebenden Ast
Standard

Hallo Roland,

ich verstehe gerade nicht was du mit "Richtig klären!" meinst.

Aber ich werde mir Morgen deinen ansatz mal anschauen.

Die Z-Index sind dafür da das keine Box die andere überlagert.
Der Witz an Vorlage ist ja das egal welche der 3 Boxen länger wird ( Links, Content, Rechts ) immer die 2 beiden anderen mit größer werden.


Gruß
StandBy1
Mit Zitat antworten
  #4 (permalink)  
Alt 08.03.2015, 20:41
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

Zitat:
Zitat von StandBy1 Beitrag anzeigen
ich verstehe gerade nicht was du mit "Richtig klären!" meinst.
An einer richtigen Stelle muss Float gecleart werden.

Finde es selbst heraus.

Zitat:
Zitat von StandBy1 Beitrag anzeigen
Die Z-Index sind dafür da das keine Box die andere überlagert.
Der Witz an Vorlage ist ja das egal welche der 3 Boxen länger wird ( Links, Content, Rechts ) immer die 2 beiden anderen mit größer werden.
Ja das ist mir bekannt aber dein #header, #navigation, #navi li:hover, und auch #footer braucht kein z-index - oder ?

http://jsfiddle.net/jsbmnmu4/
Bei deinem Beispiel ja z-index auch für ...
_____________
MfG Roland

Geändert von K.Roland (08.03.2015 um 22:07 Uhr) Grund: Nachtrag
Mit Zitat antworten
  #5 (permalink)  
Alt 09.03.2015, 06:03
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.04.2012
Beiträge: 16
StandBy1 befindet sich auf einem aufstrebenden Ast
Standard

Halo Roland,

danke für das abnehmen der Tomaten vor meinen Augen.

Das mit dem Float hätte ich eigentlich selbst sehen müssen.
Und mit den Z-Indexen hast du sicher recht muss ich noch mal schauen weil ich da einige zum Testen eingebaut hatte.

Danke und Gruß
StandBy1
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Validator verbietet Attribut bei Link - Hilfe! ;) bastkrug (X)HTML 7 20.02.2014 13:28
FAQ -- Häufig gestellte Fragen und häufig gegebene Antworten mazzo CSS 10 05.04.2012 18:32
Tabellen als Div Container SpecialFighter (X)HTML 7 12.10.2010 18:40
Ungewöhnlicher abstand beim clearen von floats adrianno CSS 14 16.09.2009 15:20
Seitenaufbau mit DIVs und 100% Höhe vespasquire CSS 6 12.09.2004 16:21


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:29 Uhr.