✔ Textausrichtung; Box überlager Subnavi; Dropdown im IE; Spalt zwischen Menü und Boxen

Status
Nicht offen für weitere Antworten.
Blackylein

Blackylein

Erfahrenes Mitglied
Hallo!

Ihr habt mir heute schon super bei meinem Suckerfish Menü geholfen, dass ihr bei meinen rechstlichen Problemen vielleicht auch noch helfen könnt.

Fangen wir mit dem allgemeinen Daten an
die HP ist unter: http://www.hak-baden.at.tf oder http://www.intranet.at.tf erreichbar
Link zur HTML-Seite: http://195.96.25.165/webupdate/HAK_Baden/index.html
Link zur CSS-Datei: http://195.96.25.165/webupdate/HAK_Baden/css/style.css

Problem 1: Textausrichtung
Der Text, der in der Mitte der Boxen stehen soll steht ganz links am Rand, sollte aber etwas weiter rechts beginnen. Habs schon mit passing-left versucht, da hat sich aber nur das background-image verschoben.

Problem 2: Dropdownmenü
Die Subnavis von meinem Dropdownmenü verschwinden hinter meiner Tabelle. Zumindest ist das in Firefox so. In Opera nicht.

Problem 3: Menü nicht in IE
Mein Menü funktioniert in IE nicht obwohl ich alles gemacht hab so wie es in dem Tutorial stand:
http://artikel.nashweb.de/index.php/tutorials/47

Problem 4: ungewollter Spalt
Zwischen dem Menü und der Tabelle ist ein Spalt, den ich nicht will und auch nicht wegbekomme.

Wie ihr seht stehe ich mit CSS noch am Anfang und mache viele Fehler. Leider finde ich sie nicht und lege daher meine HP in eure Hände.

Danke schon mal.
 
Re: Textausrichtung; Box überlager Subnavi; Dropdown im IE; Spalt zwischen Menü und B

Hi, was die Styles angeht das habe ich mir jetzt nicht angesehen, aber dass das Menü im MS IE nicht funktioniert wird wohl daran liegen dass das JavaScript fehlt.



Gruß
 
  • Bei deinen 12-fach verwendeten Textangaben bla, die zudem mittig und linksbündig ausgerichtet sind, weiss ich nicht, welchen Textabschnitt du meinst.

  • Lässt sich mit der Angabe einer Schichtposition z-index:10 für das umschliessende DIV .menue beheben.
Code: 
.menue {
width:              798px;
height:             30px;
padding:            0px;
position:           relative;
margin-left:        auto;
margin-right:       auto;
z-index: 10;
}
  • Das Javascript wird nicht in der CSS-Datei, sondern in dem HTML-Dokument notiert. Ausserdem fehlt dem Elternelement <ul> die ID nav.

  • Von welchem Spalt sprichst du?

HTML-Code
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Online-Version of the Intranet</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="author" content="carina skladal">
<meta name="keywords" content="carina, skladal, carina skladal, intranet, hak, baden, hak baden">
<meta name="description" content="onlineversion der intranet-site">
<link rel="stylesheet" type="text/css" href="css/style.css">

<script type="text/javascript">
<!--
startList = function() {
  if (document.all&&document.getElementById) {
  navRoot = document.getElementById("nav");
  for (j=0; j<navRoot.childNodes.length; j++) {
  node = navRoot.childNodes[j];
  if (node.nodeName=="LI") {
  node.onmouseover=function() {
  this.className+=" over";
    }
    node.onmouseout=function() {
    this.className=this.className.replace(" over", "");
     }
     }
    }
   }
  }
  window.onload=startList;
//-->
</script>

</head>
<body>

  <div class="logo"><img src="images/header.gif"></div>

    <div class="menue">
  <ul id="nav">
    <li class="menueitem1">.news
      <ul id="nav">
        <li class="submenue1"><a href="#">Button1a</a></li>
        <li class="submenue1"><a href="#">Button1b</a></li>
      </ul>
    </li>

    <li class="menueitem2">.pics
      <ul id="nav">
        <li class="submenue2"><a href="#">Button2a</a></li>
        <li class="submenue2"><a href="#">Button2b</a></li>
      </ul>
    </li>

    <li class="menueitem3">.downloads
      <ul id="nav">
        <li class="submenue3"><a href="#">Button3a</a></li>
        <li class="submenue3"><a href="#">Button3b</a></li>
      </ul>
    </li>

    <li class="menueitem4">.votings
      <ul id="nav">
        <li class="submenue4"><a href="#">Button4a</a></li>
        <li class="submenue4"><a href="#">Button4b</a></li>
      </ul>
    </li>

    <li class="menueitem5">.comunity
      <ul id="nav">
        <li class="submenue5"><a href="#">Button5a</a></li>
        <li class="submenue5"><a href="#">Button5b</a></li>
      </ul>
    </li>

    <li class="menueitem6">.dates
       <ul id="nav">
        <li class="submenue6"><a href="#">Button6a</a></li>
        <li class="submenue6"><a href="#">Button6b</a></li>
      </ul>
    </li>
  </ul>
  </div>
  <div class="space"></div>


  <table cellspacing="0" cellpadding="0" align="center" width="798px">
  <tr>
  <td class="box_oben" width="207px">bla1</td>
  <td class="box_big_oben" width="591px">bla2</td>
  </tr>
  <tr>
  <td class="box_main" width="207px">bla3</td>
  <td class="box_big_main" width="591px" rowspan="7">blablablablablablabla4</td>
  </tr>
  <tr>
  <td class="box_unten" width="207px">bla5</td>
  </tr>
  <tr>
  <td class="box_oben" width="207px">bla6</td>
  </tr>
  <tr>
  <td class="box_main" width="207px">bla7</td>
  </tr>
  <tr>
  <td class="box_unten" width="207px">bla8</td>
  </tr>
  <tr>
  <td class="box_oben" width="207px">bla9</td>
  </tr>
  <tr>
  <td class="box_main" width="207px">bla10</td>
  </tr>
  <tr>
  <td class="box_unten" width="207px">bla11</td>
  <td class="box_big_unten" width="591px">bla12</td>
  </tr>
  </table>
  <div class="copyright">(c)_HAK/HAS Baden___.impressum___.contact</div>
<?php

?>
</body>
</html>
CSS-Code für style.css (ohne Javascript!)
Code: 
body {
background-color:   #506173;
font-family:        Arial, sans-serif;
font-size:          10pt;
color:              #000000;
}

.logo {
width:              798px;
height:             120px;
padding:            0px;
position:           relative;
margin-left:        auto;
margin-right:       auto;
}

.menue {
width:              798px;
height:             30px;
padding:            0px;
position:           relative;
margin-left:        auto;
margin-right:       auto;
z-index: 10;
}

.menueitem1 {
width:              133px;
background-image:   url("../images/menueitem1.gif");
background-repeat:  no-repeat; 
float:              left;
text-align:         center;
position:           relative;
margin-left:        auto;
margin-right:       auto;
padding:            0px;
}

.menueitem2 {
width:              133px;
background-image:   url("../images/menueitem2.gif");
background-repeat:  no-repeat; 
float:              left;
text-align:         center;
position:           relative;
margin-left:        auto;
margin-right:       auto;
padding:            0px;
}

.menueitem3 {
width:              133px;
background-image:   url("../images/menueitem3.gif");
background-repeat:  no-repeat; 
float:              left;
text-align:         center;
position:           relative;
margin-left:        auto;
margin-right:       auto;
padding:            0px;
}

.menueitem4 {
width:              133px;
background-image:   url("../images/menueitem4.gif");
background-repeat:  no-repeat; 
float:              left;
text-align:         center;
position:           relative;
margin-left:        auto;
margin-right:       auto;
padding:            0px;
}

.menueitem5 {
width:              133px;
background-image:   url("../images/menueitem5.gif");
background-repeat:  no-repeat; 
float:              left;
text-align:         center;
position:           relative;
margin-left:        auto;
margin-right:       auto;
padding:            0px;
}

.menueitem6 {
width:              133px;
background-image:   url("../images/menueitem6.gif");
background-repeat:  no-repeat;
float:              left; 
text-align:         center;
position:           relative;
margin-left:        auto;
margin-right:       auto;
padding:            0px;
}

.submenue1 {
width:              133px;
background-image:   url("../images/menueitem1.gif");
background-repeat:  no-repeat;
text-align:         center;
}

.submenue2 {
width:              133px;
background-image:   url("../images/menueitem2.gif");
background-repeat:  no-repeat;
text-align:         center;
}

.submenue3 {
width:              133px;
background-image:   url("../images/menueitem3.gif");
background-repeat:  no-repeat;
text-align:         center;
}

.submenue4 {
width:              133px;
background-image:   url("../images/menueitem4.gif");
background-repeat:  no-repeat;
text-align:         center;
}

.submenue5 {
width:              133px;
background-image:   url("../images/menueitem5.gif");
background-repeat:  no-repeat;
text-align:         center;
}

.submenue6 {
width:              133px;
background-image:   url("../images/menueitem6.gif");
background-repeat:  no-repeat;
text-align:         center;
}

.space {
width:              798px;
height:             10px;
background-color:   #617381;
position:           relative;
margin-left:        auto;
margin-right:       auto;
padding:            0px;
}

.box_oben {
font-size:          10px;
font-weight:        bold;
text-align:         center;
width:              207px;
height:             15px;
padding:            0px;
background-image:   url("../images/box_oben.gif");
background-repeat:  no-repeat;

position:           relative;
margin-left:        auto;
margin-right:       auto;
}

.box_main {
font-size:          10px;
text-align:         left;
width:              207px;
min-height:         100px;
padding:            0px;
padding-left:       5px;
background-image:   url("../images/box_main.gif");
background-repeat:  repeat-y;

position:           relative;
margin-left:        auto;
margin-right:       auto;
}

.box_unten {
font-size:          10px;
text-align:         center;
padding:            0px;
width:              207px;
height:             15px;
background-image:   url("../images/box_unten.gif");
background-repeat:  no-repeat;

position:           relative;
margin-left:        auto;
margin-right:       auto;
}

.box_big_oben {
font-size:          10px;
font-weight:        bold;
text-align:         center;
padding:            0px;
width:              591px;
height:             15px;
background-image:   url("../images/box_big_above.gif");
background-repeat:  no-repeat;

position:           relative;
margin-left:        auto;
margin-right:       auto;
}

.box_big_main {
font-size:          10px;
text-align:         left;
width:              591px;
min-height:         300px;
padding:            0px;
padding-left:       50px;
background-image:   url("../images/box_big_main.gif");
background-repeat:  repeat-y;
background-position: left top;

position:           relative;
margin-left:        auto;
margin-right:       auto;
}

.box_big_unten {
font-size:          10px;
text-align:         center;
padding:            0px;
width:              591px;
height:             15px;
padding:            0px;
background-image:   url("../images/box_big_bottom.gif");
background-repeat:  no-repeat;

position:           relative;
margin-left:        auto;
margin-right:       auto;
}

.copyright {
width:              798px;
height:             15px
text-align:         center;
font-size:          10px;
color:              #506173;
background-color:   #617381;

position:           relative;
margin-left:        auto;
margin-right:       auto;
clear:              both;
}

body {
    background-color:       #506173;
    font-family:		        Arial, sans-serif;
    font-size:		          10pt;
    color:			            #000000;
    text-align:		          center;
    }

ul {
    padding:                0;
    margin:                 0;
    list-style:             none;
    }
    
li {
    float:                  left;
    position:               relative;
    width:                  133px;
    }
    
li ul {
    display:                none;
    position:               absolute;
    top:                    10px;
    left:                   0;
    }
   
li > ul {
    top:                    auto;
    left:                   auto;
    }
    
li:hover ul, li.over ul { display: block; }
 
Re: Textausrichtung; Box überlager Subnavi; Dropdown im IE; Spalt zwischen Menü und B

Danke, danke, danke. Du hast mir schon sehr geholfen.

1.

Ich habe 4 Boxen. 3 kleine und eine Mainbox.
die Boxen sind in 3 Teile aufgeteilt. In den Teil oben, den mittleren Teil und einen unteren Teil.
Im mittleren Teil steht Text und der befindet sich nicht in der Box sonder klebt außerhalb am linken Rand.

2.

Punkt 2 hat sich jetzt fast erledigt. In MS IE schneiden die unterpunkte das Mainmenü ab. Im Firefox ist das nicht.

3.

Ist ausgebessert und funktioniert perfekt.

4.

Die Tabelle schließt nicht genau an das Menü an. Da ist ein Streifen dazwischen der die selbe Farbe hat wie der Hintergrund [siehe Screenshot]
 

Anhänge

  • screen.gif
    screen.gif
    13,4 KB · Aufrufe: 174
Re: Textausrichtung; Box überlager Subnavi; Dropdown im IE; Spalt zwischen Menü und B

Zu Punkt 2: erweitere die CSS Datei mal hiermit:

Code: 
* html li ul {
   display:none;
   position:absolute;
         top:16px;
         left:0;
   }

So wird der Abstand für den IE korrigiert.


Gruß
 
Zuletzt bearbeitet:
Der Abstand zwischen dem Menü und der Tabelle liegt an der Menühöhe height: 30px.

Ich zähle 6 Boxen:
  1. .box_oben
  2. .box_big_oben
  3. .box_main
  4. .box_big_main
  5. .box_unten
  6. .box_big_unten
Also, welche Box meinst du?

Hier der (vorläufig) überarbeitete CSS-Code:

Code: 
body {
background-color:   #506173;
font-family:        Arial, sans-serif;
font-size:          10pt;
color:              #000000;
text-align: center;
}

.logo {
width:              798px;
height:             120px;
padding:            0px;
position:           relative;
margin-left:        auto;
margin-right:       auto;
}

.menue {
width:              798px;
/*height:           30px;*/ /* auskommentiert = deaktiviert */
padding:            0px;
position:           relative;
margin-left:        auto;
margin-right:       auto;
z-index: 10;
}

.menueitem1 {
width:              133px;
background-image:   url("../images/menueitem1.gif");
background-repeat:  no-repeat; 
float:              left;
text-align:         center;
position:           relative;
margin-left:        auto;
margin-right:       auto;
padding:            0px;
}

.menueitem2 {
width:              133px;
background-image:   url("../images/menueitem2.gif");
background-repeat:  no-repeat; 
float:              left;
text-align:         center;
position:           relative;
margin-left:        auto;
margin-right:       auto;
padding:            0px;
}

.menueitem3 {
width:              133px;
background-image:   url("../images/menueitem3.gif");
background-repeat:  no-repeat; 
float:              left;
text-align:         center;
position:           relative;
margin-left:        auto;
margin-right:       auto;
padding:            0px;
}

.menueitem4 {
width:              133px;
background-image:   url("../images/menueitem4.gif");
background-repeat:  no-repeat; 
float:              left;
text-align:         center;
position:           relative;
margin-left:        auto;
margin-right:       auto;
padding:            0px;
}

.menueitem5 {
width:              133px;
background-image:   url("../images/menueitem5.gif");
background-repeat:  no-repeat; 
float:              left;
text-align:         center;
position:           relative;
margin-left:        auto;
margin-right:       auto;
padding:            0px;
}

.menueitem6 {
width:              133px;
background-image:   url("../images/menueitem6.gif");
background-repeat:  no-repeat;
float:              left; 
text-align:         center;
position:           relative;
margin-left:        auto;
margin-right:       auto;
padding:            0px;
}

.submenue1 {
width:              133px;
background-image:   url("../images/menueitem1.gif");
background-repeat:  no-repeat;
text-align:         center;
}

.submenue2 {
width:              133px;
background-image:   url("../images/menueitem2.gif");
background-repeat:  no-repeat;
text-align:         center;
}

.submenue3 {
width:              133px;
background-image:   url("../images/menueitem3.gif");
background-repeat:  no-repeat;
text-align:         center;
}

.submenue4 {
width:              133px;
background-image:   url("../images/menueitem4.gif");
background-repeat:  no-repeat;
text-align:         center;
}

.submenue5 {
width:              133px;
background-image:   url("../images/menueitem5.gif");
background-repeat:  no-repeat;
text-align:         center;
}

.submenue6 {
width:              133px;
background-image:   url("../images/menueitem6.gif");
background-repeat:  no-repeat;
text-align:         center;
}

.space {
width:              798px;
height:             10px;
background-color:   #617381;
position:           relative;
margin-left:        auto;
margin-right:       auto;
padding:            0px;
}

.box_oben {
font-size:          10px;
font-weight:        bold;
text-align:         center;
width:              207px;
height:             15px;
padding:            0px;
background-image:   url("../images/box_oben.gif");
background-repeat:  no-repeat;
position:           relative;
margin-left:        auto;
margin-right:       auto;
}

.box_main {
font-size:          10px;
text-align:         left;
width:              207px;
min-height:         100px;
padding:            0px;
padding-left:       5px;
background-image:   url("../images/box_main.gif");
background-repeat:  repeat-y;
position:           relative;
margin-left:        auto;
margin-right:       auto;
}

.box_unten {
font-size:          10px;
text-align:         center;
padding:            0px;
width:              207px;
height:             15px;
background-image:   url("../images/box_unten.gif");
background-repeat:  no-repeat;
position:           relative;
margin-left:        auto;
margin-right:       auto;
}

.box_big_oben {
font-size:          10px;
font-weight:        bold;
text-align:         center;
padding:            0px;
width:              591px;
height:             15px;
background-image:   url("../images/box_big_above.gif");
background-repeat:  no-repeat;
position:           relative;
margin-left:        auto;
margin-right:       auto;
}

.box_big_main {
font-size:          10px;
text-align:         left;
width:              591px;
min-height:         300px;
padding:            0px;
padding-left:       50px;
background-image:   url("../images/box_big_main.gif");
background-repeat:  repeat-y;
background-position: left top;
position:           relative;
margin-left:        auto;
margin-right:       auto;
}

.box_big_unten {
font-size:          10px;
text-align:         center;
padding:            0px;
width:              591px;
height:             15px;
padding:            0px;
background-image:   url("../images/box_big_bottom.gif");
background-repeat:  no-repeat;
position:           relative;
margin-left:        auto;
margin-right:       auto;
}

.copyright {
width:              798px;
height:             15px
text-align:         center;
font-size:          10px;
color:              #506173;
background-color:   #617381;
position:           relative;
margin-left:        auto;
margin-right:       auto;
clear:              both;
}

ul {
    padding:                0;
    margin:                 0;
    list-style:             none;
    }
    
li {
    float:                  left;
    position:               relative;
    width:                  133px;
}
    
li ul {
    display:                none;
    position:               absolute;
    top:                    10px;
    left:                   0;
    }

* html li ul {
   display:none;
   position:absolute;
         top:16px;
         left:0;
}
   
li > ul {
    top:                    auto;
    left:                   auto;
    }
    
li:hover ul, li.over ul { display: block; }

[editpost 07:02]

Selektoren mit gleichen CSS-Eigenschaften lassen sich zusammenfassen. In deinem Fall sind das die CSS-Klassen für die Haupt- und Untermenüs:

Code: 
.menueitem1, .menueitem2, .menueitem3, .menueitem4, .menueitem5, .menueitem6
{
width:              133px;
background-repeat:  no-repeat; 
float:              left;
text-align:         center;
position:           relative;
margin-left:        auto;
margin-right:       auto;
padding:            0px;
}

.menueitem1 {
background-image:   url("../images/menueitem1.gif");
}

.menueitem2 {
background-image:   url("../images/menueitem2.gif");
}

.menueitem3 {
background-image:   url("../images/menueitem3.gif");
}

.menueitem4 {
background-image:   url("../images/menueitem4.gif");
}

.menueitem5 {
background-image:   url("../images/menueitem5.gif");
}

.menueitem6 {
background-image:   url("../images/menueitem6.gif");
}

.submenue1, .submenue2, .submenue3, .submenue4, .submenue5, .submenue6
{
width:              133px;
background-repeat:  no-repeat;
text-align:         center;
}

.submenue1 {
background-image:   url("../images/menueitem1.gif");
}

.submenue2 {
background-image:   url("../images/menueitem2.gif");
}

.submenue3 {
background-image:   url("../images/menueitem3.gif");
}

.submenue4 {
background-image:   url("../images/menueitem4.gif");
}

.submenue5 {
background-image:   url("../images/menueitem5.gif");
}

.submenue6 {
background-image:   url("../images/menueitem6.gif");
}

[editpost 07:16]

Okay, habe herausgefunden, welche Box du meinst -> .box_main

CSS-Lösung:
Code: 
.box_main p
{
padding-left: 15px; 
}

HTML: 
<td class="box_main" width="207px"><p>bla3</p></td>

<td class="box_main" width="207px"><p>bla7</p></td>

<td class="box_main" width="207px"><p>bla10</p></td>
Anmerkung: das Attribut width erhält keine Einheit (px). Zudem hast du die Weitenangabe schon in der CSS-Klasse notiert, womit das Attribut überflüssig ist.
 
Zuletzt bearbeitet von einem Moderator:
Re: Textausrichtung; Box überlager Subnavi; Dropdown im IE; Spalt zwischen Menü und B

Hi!

Problem 1 ist leider noch immer vorhanden. Zum besseren Verständnis hab ich mal die Textstellen markiert, die eingerückt werden sollen. [Siehe Screenshot]

Probleme 2-4 habt ihr wunderbar beseitigt. Menü funktioniert, kein Spalt.

Allerdings ist jetzt durch irgendwas die ganze Tabelle nach rechts gerutscht.

Ich danke euch für eure Geduld
 

Anhänge

  • screen4.gif
    screen4.gif
    14,1 KB · Aufrufe: 131
Habe dem Menü eine Höhe von 17px gegeben, damit sich die Tabelle im Firefox nicht nach rechts verschiebt.

Mein Lösungsvorschlag von heute Morgen für die Texteinrückungen funktioniert bei mir einwandfrei.

Hier nochmal der komplette Code:

Code: 
body {
background-color:   #506173;
font-family:        Arial, sans-serif;
font-size:          10pt;
color:              #000000;
text-align:		          center;
}

.logo {
width:              798px;
height:             120px;
padding:            0px;
position:           relative;
margin-left:        auto;
margin-right:       auto;
}

.menue {
width:              798px;
height:             17px;
padding:            0px;
position:           relative;
margin-left:        auto;
margin-right:       auto;
z-index: 10;
}

.menueitem1, .menueitem2, .menueitem3, .menueitem4, .menueitem5, .menueitem6
{
width:              133px;
background-repeat:  no-repeat; 
float:              left;
text-align:         center;
position:           relative;
margin-left:        auto;
margin-right:       auto;
padding:            0px;
}

.menueitem1 {
background-image:   url("../images/menueitem1.gif");
}

.menueitem2 {
background-image:   url("../images/menueitem2.gif");
}

.menueitem3 {
background-image:   url("../images/menueitem3.gif");
}

.menueitem4 {
background-image:   url("../images/menueitem4.gif");
}

.menueitem5 {
background-image:   url("../images/menueitem5.gif");
}

.menueitem6 {
background-image:   url("../images/menueitem6.gif");
}

.submenue1, .submenue2, .submenue3, .submenue4, .submenue5, .submenue6
{
width:              133px;
background-repeat:  no-repeat;
text-align:         center;
}

.submenue1 {
background-image:   url("../images/menueitem1.gif");
}

.submenue2 {
background-image:   url("../images/menueitem2.gif");
}

.submenue3 {
background-image:   url("../images/menueitem3.gif");
}

.submenue4 {
background-image:   url("../images/menueitem4.gif");
}

.submenue5 {
background-image:   url("../images/menueitem5.gif");
}

.submenue6 {
background-image:   url("../images/menueitem6.gif");
}

.space {
width:              798px;
height:             10px;
background-color:   #617381;
position:           relative;
margin-left:        auto;
margin-right:       auto;
padding:            0px;
}

.box_oben {
font-size:          10px;
font-weight:        bold;
text-align:         center;
width:              207px;
height:             15px;
padding:            0px;
background-image:   url("../images/box_oben.gif");
background-repeat:  no-repeat;
position:           relative;
margin-left:        auto;
margin-right:       auto;
}

.box_main {
font-size:          10px;
text-align:         left;
width:              207px;
min-height:         100px;
padding:            0px;
padding-left:       5px;
background-image:   url("../images/box_main.gif");
background-repeat:  repeat-y;
position:           relative;
margin-left:        auto;
margin-right:       auto;
}

.box_main p
{
padding-left: 15px;
}

.box_unten {
font-size:          10px;
text-align:         center;
padding:            0px;
width:              207px;
height:             15px;
background-image:   url("../images/box_unten.gif");
background-repeat:  no-repeat;
position:           relative;
margin-left:        auto;
margin-right:       auto;
}

.box_big_oben {
font-size:          10px;
font-weight:        bold;
text-align:         center;
padding:            0px;
width:              591px;
height:             15px;
background-image:   url("../images/box_big_above.gif");
background-repeat:  no-repeat;
position:           relative;
margin-left:        auto;
margin-right:       auto;
}

.box_big_main {
font-size:          10px;
text-align:         left;
width:              591px;
min-height:         300px;
padding:            0px;
padding-left:       50px;
background-image:   url("../images/box_big_main.gif");
background-repeat:  repeat-y;
background-position: left top;
position:           relative;
margin-left:        auto;
margin-right:       auto;
}

.box_big_main p
{
padding-left: 15px;
}

.box_big_unten {
font-size:          10px;
text-align:         center;
padding:            0px;
width:              591px;
height:             15px;
padding:            0px;
background-image:   url("../images/box_big_bottom.gif");
background-repeat:  no-repeat;
position:           relative;
margin-left:        auto;
margin-right:       auto;
}

.copyright {
width:              798px;
height:             15px
text-align:         center;
font-size:          10px;
color:              #506173;
background-color:   #617381;
position:           relative;
margin-left:        auto;
margin-right:       auto;
clear:              both;
}

ul {
    padding:                0;
    margin:                 0;
    list-style:             none;
    }
    
li {
    float:                  left;
    position:               relative;
    width:                  133px;
    }
    
li ul {
    display:                none;
    position:               absolute;
    top:                    10px;
    left:                   0;
    }

* html li ul {
   display:none;
   position:absolute;
         top:17px;
         left:0;
   }
   
li > ul {
    top:                    auto;
    left:                   auto;
    }
    
li:hover ul, li.over ul { display: block; }

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Online-Version of the Intranet</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="author" content="carina skladal">
<meta name="keywords" content="carina, skladal, carina skladal, intranet, hak, baden, hak baden">
<meta name="description" content="onlineversion der intranet-site">
<link rel="stylesheet" type="text/css" href="css/style.css">

<script type="text/javascript">
<!--
startList = function() {
  if (document.all&&document.getElementById) {
  navRoot = document.getElementById("nav");
  for (j=0; j<navRoot.childNodes.length; j++) {
  node = navRoot.childNodes[j];
  if (node.nodeName=="LI") {
  node.onmouseover=function() {
  this.className+=" over";
    }
    node.onmouseout=function() {
    this.className=this.className.replace(" over", "");
     }
     }
    }
   }
  }
  window.onload=startList;
//-->
</script>

</head>
<body>

  <div class="logo"><img src="images/header.gif"></div>

    <div class="menue">
  <ul id="nav">
    <li class="menueitem1">.news
      <ul id="nav">
        <li class="submenue1"><a href="#">Button1a</a></li>
        <li class="submenue1"><a href="#">Button1b</a></li>
      </ul>
    </li>

    <li class="menueitem2">.pics
      <ul id="nav">
        <li class="submenue2"><a href="#">Button2a</a></li>
        <li class="submenue2"><a href="#">Button2b</a></li>
      </ul>
    </li>

    <li class="menueitem3">.downloads
      <ul id="nav">
        <li class="submenue3"><a href="#">Button3a</a></li>
        <li class="submenue3"><a href="#">Button3b</a></li>
      </ul>
    </li>

    <li class="menueitem4">.votings
      <ul id="nav">
        <li class="submenue4"><a href="#">Button4a</a></li>
        <li class="submenue4"><a href="#">Button4b</a></li>
      </ul>
    </li>

    <li class="menueitem5">.comunity
      <ul id="nav">
        <li class="submenue5"><a href="#">Button5a</a></li>
        <li class="submenue5"><a href="#">Button5b</a></li>
      </ul>
    </li>

    <li class="menueitem6">.dates
       <ul id="nav">
        <li class="submenue6"><a href="#">Button6a</a></li>
        <li class="submenue6"><a href="#">Button6b</a></li>
      </ul>
    </li>
  </ul>
  </div>
  <div class="space"></div>


  <table cellspacing="0" cellpadding="0" align="center" width="798">
  <tr>
  <td class="box_oben">bla1</td>
  <td class="box_big_oben">bla2</td>
  </tr>
  <tr>
  <td class="box_main"><p>bla3</p></td>
  <td class="box_big_main" rowspan="7"><p>blablablablablablabla4</p></td>
  </tr>
  <tr>
  <td class="box_unten">bla5</td>
  </tr>
  <tr>
  <td class="box_oben">bla6</td>
  </tr>
  <tr>
  <td class="box_main"><p>bla7</p></td>
  </tr>
  <tr>
  <td class="box_unten">bla8</td>
  </tr>
  <tr>
  <td class="box_oben">bla9</td>
  </tr>
  <tr>
  <td class="box_main"><p>bla10</p></td>
  </tr>
  <tr>
  <td class="box_unten">bla11</td>
  <td class="box_big_unten">bla12</td>
  </tr>
  </table>

  <div class="copyright">(c)_HAK/HAS Baden___.impressum___.contact</div>

<?php

?>
</body>
</html>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück