✔ Menü wird unter dem Div angezeigt

alex130 · 2. August 2007

Hi
Ich hab wiedermal ein Problem und zwar wird mein Menü unter meinem Div "Box" angezeigt.
Ich hab mir den Code schon angeschaut doch ich finde den Fehler nicht.
Hier ist der Code:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript"src="includes/tree.js"></script>
</head>
<body>

<div id="container">
     <div id="header"></div>
     <div id="divNeu_1"></div>

     <div class="leftCol">
          <div class="box">
<base target="myframe">
<div id="menu">
   <ul>   
   <li><a href="index.php">Home</a></li> 
    
     </li>    
        <li><a href="#" target="_self"> speichermedien</a>    
            <ul>     
                    <li><a href="index.php?site=show_products&catid=12">usb-sticks</a></li>   
            </ul>    
        </li>       
    
     </li>    
        <li><a href="#" target="_self"> prozessoren</a>    
            <ul>     
                    <li><a href="index.php?site=show_products&catid=14">intel</a></li><li><a href="index.php?site=show_products&catid=15">amd</a></li>   
            </ul>    
        </li>       
    
     </li>    
        <li><a href="#" target="_self"> monitore</a>    
            <ul>     
                    <li><a href="index.php?site=show_products&catid=17">lcd</a></li>   
            </ul>    
        </li>       
    </ul> 

</div>
<script type="text/javascript"src="includes/tree.js"></script>
</div>
     </div>
     <div class="rightCol">
          <div class="box2"><a href="#">Test</a><br />
<a href="#">Test</a><br />
<a href="#">Test</a><br />
<a href="#">Test</a><br />

<a href="#">Test</a><br />
<a href="#">Test</a><br />
<a href="#">Test</a><br /></div>
     </div>
     <div class="centerCol">
          <div id="content">
          <br />
<b>Warning</b>:  main(default.php): failed to open stream: No such file or directory in <b>/var/www/web14/html/onlineshop/templates/content.php</b> on line <b>7</b><br />

<br />
<b>Warning</b>:  main(): Failed opening 'default.php' for inclusion (include_path='.') in <b>/var/www/web14/html/onlineshop/templates/content.php</b> on line <b>7</b><br />

          <br /></div>
     </div>
     <div id="divNeu_2">Footer</div>
</div>

</body>
</html>

Ich hoffe ihr könnt mir helfen.
Danke

Maik · 2. August 2007

Hi,

alex130 hat gesagt.:
Ich hoffe ihr könnt mir helfen.

wenn du den CSS-Code zeigst, kann man sicherlich mehr dazu sagen.

alex130 · 2. August 2007

Hi
Es tut mir leid, das hab ich total vergessen, hab den Code noch gekürzt, nun ist nur das wichtigste dabei:

HTML:

body {
padding: 0px;
margin: 0px;
background-image: url(images/bgs.jpg);
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}

#container {
width: 800px;
margin: 0 auto;
background-image: url(images/bgs.jpg);
}

#header {
background-color: #4978dc;
background-image: url(images/logo.jpg);
width: 798px;
height: 130px;
border: 1px solid black;
margin-bottom: 8px;
}

.leftCol { /* linke Spalte */
width: 150px;
float: left;
}

.centerCol {
margin: 0 150px;
}

.rightCol { /* rechte Spalte */
width: 150px;
float: right;
}

#content {
background-color: #efefef;
min-height: 450px;
height: auto !important;
height: 450px;
border: 1px solid black;
padding: 20px;
margin: 0 10px 5px 10px;
}

.box {
background-color: #efefef;
border: 1px solid black;
margin-bottom: 8px;
background-image: url(images/box-bg.gif);
padding-top: 5px;
padding-bottom: 5px;
}

.box2 {
background-color: #efefef;
border: 1px solid black;
margin-bottom: 8px;
background-image: url(images/box-bg.gif);
padding-top: 5px;
padding-bottom: 5px;
}

#divNeu_2 {
background-color: #efefef;
border: 1px solid black;
clear: both;
width: 471px;
margin: 0 auto;
padding: 3px;
height: 15px;
}

#divNeu_1 {
background-color: #efefef;
border: 1px solid black;
clear: both;
width: 790px;
margin: 0 auto;
margin-bottom: 10px;
padding: 3px;
height: 15px;
}


#footer {
background-color: #efefef;
height: 20px;
border: 1px solid black;
margin: 10 10px 5px 10px;
padding: 3px;
}

.center {
margin: 0 auto;
}

und hier noch der Link, damit du es dir ansehen kannst:
http://onlineshop.pcmasters.at

lg

Maik · 2. August 2007

Nimm mal die float:left-Deklaration aus dem Selektor #menu heraus.

alex130 · 2. August 2007

Hi
danke nun funktoniert es.
Aber jetzt hab ich noch eine Frage, gehört zwar eigtl. nicht in diesen Thread, aber ich hoffe du hilfst mir trotzdem und zwar sollte ich dieses Layout ändern, denn die Navigationen links und rechts und der Content Bereich sind sehr klein, doch ich finde mit zwei Navigationen sieht es besser aus. Hast du eine Idee für ein besseres Layout?
Danke

Maik · 2. August 2007

Viele Möglichkeiten gibt es da ja nicht, um mehr Platz für den Inhalt im DIV #content zu gewinnen.

So könntest du die linke und rechte Navigation in einer Spalte unterbringen, das Layout also zu einem Zweispalter umändern, oder halt die Gesamtbreite des Layouts erhöhen, z.B. auf eine 100%-Breite, die sich also auf die gesamte Fensterbreite erstreckt.

alex130 · 2. August 2007

Hi
Danke für deine Vorschläge, das mit dem 2 Spalten Layout habe ich auch schon gemacht, so sieht im moment der Administrator Bereich aus.
Ich habe mir auch noch überlegt das Layout anstatt mit Pixel Angaben einfach mit prozent Angaben zu machen, doch das ist wahrscheinlich sehr schwer, oder? Also dass sich das Layout der Auflösung anpasst...
lg

Maik · 2. August 2007

Taste it

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<title>tutorials.de | demo_alex130</title>

<style type="text/css">
<!--
#wrapper {
width: 90%;
margin: 0 auto;
}

#leftCol {
width: 15%;
float: left;
background: yellow;
}

#rightCol {
width: 15%;
float: right;
background: yellow;
}

#centerCol {
margin: 0 15%;
background: red;
}
-->
</style>

</head>
<body>

<div id="wrapper">
     <div id="leftCol">leftCol</div>
     <div id="rightCol">rightCol</div>
     <div id="centerCol">centerCol</div>
</div>

</body>
</html>

alex130 · 2. August 2007

Wow danke funktoniert wirklich super :T
Aber bei meinem Layout, also mit den boxen und den Abständen ist das ganze sicher schwieriger (für mich ^^, denn ich weiß dass sowas für dich kein Problem ist

)
Ich werde das mal veruschen bei meienm Layout zu machen, kannst du mir dann wenn es nicht funktoniert, helfen?
Danke

//edit:
So ich habs jetzt versucht und wie schon erwartet funktoniert es nicht richtig.
Es fängt schon mal an, dass beim #container oben und unten der margin Wert nicht beachtet wird, dann ist die TopNavi ##divNeu_1 zu klein, eben so #divNeu_2 (footer).
Woran liegt das?
Hier ist noch meine style.css

HTML:

body {
padding: 0px;
margin: 0px;
background-image: url(images/bgs.jpg);
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}

#container {
width: 75%;
margin-bottom: 5%;
margin-top: 5%;
margin: 0 auto;
background-image: url(images/bgs.jpg);
}

#header {
background-color: #4978dc;
background-image: url(images/logo.jpg);
width: 100%;
height: 130px;
border: 1px solid black;
margin-bottom: 8px;
}

.leftCol { /* linke Spalte */
width: 20%;
float: left;
}

.centerCol {
margin: 0 20%;
}

.rightCol { /* rechte Spalte */
width: 20%;
float: right;
}

#content {
background-color: #efefef;
min-height: 450px;
height: auto !important;
height: 450px;
border: 1px solid black;
padding: 20px;
margin: 0 5% 5% 5%;
}

.box {
background-color: #efefef;
border: 1px solid black;
margin-bottom: 8px;
background-image: url(images/box-bg.gif);
padding-top: 5px;
padding-bottom: 5px;
}

.box2 {
background-color: #efefef;
border: 1px solid black;
margin-bottom: 8px;
background-image: url(images/box-bg.gif);
padding-top: 5px;
padding-bottom: 5px;
}

#divNeu_2 {
background-color: #efefef;
border: 1px solid black;
clear: both;
width: 50%px;
margin: 0 auto;
padding: 3px;
height: 15px;
}

#divNeu_1 {
background-color: #efefef;
border: 1px solid black;
clear: both;
width: 80%;
margin: 0 auto;
margin-bottom: 10px;
padding: 3px;
height: 15px;
}

.center {
margin: 0 auto;
}

.headline {
font-weight: bold;
color: #000000;
font-size: 11px;
}

.highlight {
font-weight: bold;
color: #990000;
}

.header01 {
background-color: #e6e9f7;
border: 1px solid #FFFFFF;
}

 /* A LINKS */

a:link {
font-size: 12px;
 color : #367cce;
font-weight : bold;
text-decoration: none;
}

a:active {
font-size: 12px;
 color : #367cce;
  font-weight : bold;
  text-decoration: none;
}

a:visited {
font-size: 12px;
 color : #367cce;
  font-weight : bold;
  text-decoration: none;
}

a:hover {
font-size: 12px;
 color: #FF6600;
 font-weight : bold;
 text-decoration: none;
}

.error
{
	color : #993333;
	font-weight : bold;
} 


/* KONTAKT */
fieldset
{
width:150px;
border: 1px solid #800000;
padding: 5px;
}
.Stil4 {font-size: x-small}
/* ENDE */

a img 
{
border: 0px;
}

/* TREE MENU */
#menu {white-space:nowrap;padding:4px;padding-bottom:40px;}
#menu,#menu *{font:10px Verdana;color:#000000;}
/* ENDE */

danke

/edit2: So TopNavi funktoniert nun, aber der Footer geht immer noch nicht richtig.
lg

Maik · 2. August 2007

Dann schau mal, wie du die Breite für das DIV #divNeu_2 definiert hast:

Code:

width:50%px;

✔ Menü wird unter dem Div angezeigt

alex130

Erfahrenes Mitglied

Maik

alex130

Erfahrenes Mitglied

Maik

alex130

Erfahrenes Mitglied

Maik

alex130

Erfahrenes Mitglied

Maik

alex130

Erfahrenes Mitglied

Maik

Neue Beiträge