[Rainer_H]

Hallo, meine Homepage besteht in der jetzigen Form ja schon eine Weile da dachte ich mir: es wird Zeit ein wenig Hand anzulegen... also sollten mal die Menülesiten geändert werde...

na ja das linke Menü hab ich ich ja mal hinbekommen- ABER schon bei der oberen Menüleiste bin ich am straucheln - ok sie ist optisch genau wie die Linke, auch die Funktionen sind da aber ich bekomme sie einfach nicht zentriert

hier mal der Link zur TEST-Seite wo man die geplanten Änderungen sehen kann:
Calibra

die css dazu wie folgt:

PHP-Code:

body
{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: rgb(5, 34, 58);
font-family: Verdana, Arial, sans-serif;
}

html
{
height: 100%;
}

#aussenwrapper
{
height: 98%;
position: relative;
width: 100%;
margin: 0 auto;
background: rgb(5, 34, 58);
}

#innenwrapper
{
height:100%;
overflow: auto;
background: rgb(5, 34, 58);
}

#header
{
position: absolute;
top: 0;
left:0;
width: 100%;
height:116px;
background: rgb(5, 34, 58);
text-align: center;
color: #fff;
background-image: url(../pics/logoklein.jpg);
background-repeat: no-repeat;
}

.ulmenue li {
float: left;
}
#leftbox
{
position: fixed;
float: left;
width: 180px;
margin-top:115px;
left:0;
background: rgb(5, 34, 58);
padding: 5px 5px 25px 5px;
color: #fff;
}


#rightbox {
float: right;
width: 10px;
margin-top:115px;
background: rgb(5, 34, 58);
padding: 5px 5px 25px 10px;
color: #fff;
}

#topbox
{
position: absolute;
float: left;
left:190px;
width: 84%;
height:19px;
margin-top:50px;
background: white;
padding: 5px 5px 25px 5px;
}


#content
{overflow:auto;
position:absolute;
z-index:3;
top:100px;
bottom:50px;
left:190px;
right:0;
background:#C0C0C0;}

* html #content
{top:0;
left:0;
right:0;
bottom:0;
height:100%;
max-height:100%;
width:100%;
overflow:auto;
position:absolute;
z-index:3;
border-top:100px solid #fff; border-bottom:50px solid #fff;
border-left:190px solid #fff;
}

#footer
{
position: absolute;
bottom: 0;
left:0;
width: 100%;
background:rgb(5, 34, 58);
height:37px;
padding: 3px 0;
text-align: center;
color: #fff;
}
h1
{font-size: 0.9em; text-align: center; margin: 0;}
h3
{font-size: 1em; margin: 0;}

a {font-size: 15px; text-align: center; text-decoration: none; font-weight : bold;}
a:link {color:#EB2D2D}
a:visited {color:#FFFFFF}
a:active {color:#DEC3A9}
a:hover{color: #FF0000}

.searchword {
color: #222;
background-color: #ff6;
border: 1px dotted #ff6;
}
.searchword0 {
color: #222;
background-color: #ff6;
border: 1px dotted #ff6;
}
.searchword1 {
color: #222;
background-color: #a0ffff;
border: 1px dotted #0affff;
}
.searchword2 {
color: #222;
background-color: #9f9;
border: 1px dotted #9f9;
}
.searchword3 {
color: #222;
background-color: #f99;
border: 1px dotted #f99;
}
.searchword4 {
color: #222;
background-color: #f6f;
border: 1px dotted #f6f;
}
.searchword5 {
color: #fff;
background-color: #800;
border: 1px dotted #800;
}
.searchword6 {
color: #fff;
background-color: #0a0;
border: 1px dotted #0a0;
}
.searchword7 {
color: #fff;
background-color: #886800;
border: 1px dotted #886800;
}
.searchword8 {
color: #fff;
background-color: #004699;
border: 1px dotted #004699;
}
.searchword9 {
color: #fff;
background-color: #909;
border: 1px dotted #909;
}

.ulmenue {
  list-style-type: none;
  margin-left: 20px;
  padding-left: 0px;
  width: 98%;
  background-color: silver;
}
.ulmenue li a {
  text-align: center;
  color: black;
  width: 7em;
  padding: 2px;
  padding-left: 5px;
  background-color: silver;
  border-bottom: 2px solid white;
  border-left: 2px solid white;
  border-right: 2px solid white;
  border-top: 2px solid white;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;  
  display: block; 
  text-align: center;
}
.ulmenue li a:hover {
  color: white;
  background-color: gray;
}
.ulmenue li {
  float: left;
}


.menue_o {
  list-style-type: none;
  margin:0 auto;
  padding-left: 0px;
  width: 98%;
  background-color: silver;
}
.menue_o li a {
  color: black;
  width: 7em;
  padding: 2px;
  padding-left: 5px;
  background-color: silver;
  border-bottom: 2px solid white;
  border-left: 2px solid white;
  border-right: 2px solid white;
  border-top: 2px solid white;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;  
  display: block; 
  text-align: center;
}
.menue_o li a:hover {
  color: white;
  background-color: gray;
}
.menue_o li {
  float: left;
} 


es wäre toll wenn mir jemand sagen könnte WO der Fehler liegt... DANKE!!!

[pmmueller]

Du machst dir sehr viel Arbeit mit deinen Seiten (und deinem Hobby), aber dein Problem ist auch nicht so - schnipps - mit einer Änderung gelöst, die man hier mal eben postet. Du solltest mit den Grundlagen CSS beginnen, besonders mit der Positionierung. Auf einem sicheren Fundament baut es sich besser

Zu deinem Problem:

Die Navigation in der ul-Liste geht über die gesamte Breite und von daher kannst du sie nicht zentrieren. text-align:center gilt nur für Text und Inline-Elemente, nicht für Block-Elemente. Bei dem Absatz darüber scheint das zu klappen, weil im p-Element nur Text ist, bei der Liste klappt das nicht.

Block-Elemente zentriert man mit "margin: auto", aber die optische Auswirkung ist gleich null, wenn die Liste (die rote Fläche) die gesamte Breite des umgebenden Elementes ausfüllt.

Außerdem solltest du die gesamte absolute Positionierung erst einmal entfernen (z. B. von div#header, div#content etc.) und diese erst einsetzen, wenn du den normalen Fluss der Elemente ("document flow") und Positionierung per "float" und "position" wirklich verstanden hast.

[Rainer_H]

Hallo pmmueller,

danke für deine Antwort. nun habe ich wohl 3Möglichkeiten:

* ich fang noch mal komplett von vorne an
* ich lass mein Page so wie ist
* es findet sich jemand der mir das Grundgerüst baut

für ein richtiges Einarbeiten in die Thematik fehlt mir einfach die Zeit, und mit einem Übernehmen eines bestehenden Layouts (von irgendwo aus dem www) ist es ja doch nicht getan, wenn man dort etwas verändert kommt doch viel mehr durcheinander als man gedacht hatte... das habe ich mal wieder gesehen
also bleibt die Page so wie ist

[pmmueller]

Zitat von Rainer_H

.. für ein richtiges Einarbeiten in die Thematik fehlt mir einfach die Zeit ..

Ich sag immer, dass das Gemeinste am Webpublishing ist, dass es einerseits Spaß macht und andererseits unheimlich viel Zeit kostet...

Zwei Vorschläge:

1. Zum selber lernen:
"Little Boxes Teil 1" durcharbeiten. Das kostet dich mit deinen Vorkenntnissen ein bis zwei Wochenenden und danach weißt du was du tust, denn viele Detailwissenfetzen werden an ihre Plätze fallen.

2. CMS-Baukasten benutzen
Beim Schreiben von "Teil 0" habe ich diverse Baukastensysteme gecheckt und bin vom Stuhl gefallen, wie leistungsfähig die in den letzten 10 Jahren geworden sind.

Der Vorteil ist, dass du nicht nur ein Design bekommst, sondern auch noch deine Inhalte viiel leichter verwalten kannst. Meine Favoriten sind

- Jimdo (aus Hamburg)
- Webnode (aus Tschechien)

Bei Jimdo kann man sogar ein komplett eigenes Design hinterlegen. Die "Branchenhomepage" von 1 und 1 beruht übrigens auf demselben System.

Und ansonsten: Die Besucher deiner Seiten werden sich viel mehr für den Inhalt interessieren als für das Aussehen

[EvT]

Zitat von Rainer_H

nun habe ich wohl 3Möglichkeiten:

* ich fang noch mal komplett von vorne an
* ich lass mein Page so wie ist
* es findet sich jemand der mir das Grundgerüst baut

Rainer, als vierte Möglichkeit bietet sich ein Blick in unsere FAQ an. Unter Punkt 14 setzt sich Heiko mit der Zentrierung von Floats auseinander und beschreibt in diesem Artikel ausführlich, wie es funktionieren kann.

[Rainer_H]

Mahlzeit,

schön das ihr mich NICHT im Regen stehen lasst! und mir weitere Tipps und Lösungswege aufzeigt... (also bin ich im richtigen Forum gelandet)
das erste kleine Ergebnis sieht nun so aus
Calibra
damit komme ich ja schon mal in die Richtung wohin ich will...

na der Herbst mit seinen langen Abenden und Nächten kommt ja auch bald wo... schöner aussehen tuts ja, auch wenn der Inhalt natürlich wichtiger ist