• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Logo & Navigation zentrieren

C

cpt_coding

New member
Hallo,
ich bin im Begriff eine Website zu erstellen. Das funktioniert auch grob ganz gut - nun habe ich allerdings ein Problem.

Ich Logo und darunter soll ein Akkordeon Menü erscheinen. Beide soll horizontal zentriert sein (möglichst auch bei verschiedenen Auflösungen) - vertikal soll es immer oben sein.

Das Logo habe ich zentriert bekommen - die Navigation leider nicht. Wenn ich die Auflösung ändere, verrutscht sie in das Logo. :rolleyes:

Kann mir vielleicht jemand sagen, wo der Fehler liegt? Ich verzweifel schon langsam! :confused:

<style type="text/css">
* {
margin:0;
padding:0;
list-style:none;
}
body {
font-family: Tahoma;
font-size: 11px;
margin:10px;
}

#basic-accordian{
border:2px solid #EEE;
padding:5px;
width:800px;
position:absolute;
left:65%;
top:22%;
margin-left:-650px;
z-index:2;
margin-bottom:-20px;
}

.accordion_headings{
padding:5px;
background:#cc0033;
color:#FFFFFF;
border:1px solid #FFF;
cursor:pointer;
font-weight:bold;
}

.accordion_headings:hover{
background:#6666cc;
}

.accordion_child{
padding:1px;
background:#EEE;
}

.header_highlight{
background:#6666cc;
}

.tab_container *{
float:left;
width:102px;
}

IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto;
}

</style>
<script type="text/javascript" src="accordian.pack.js"></script>
</head>
<body onload="new Accordian('basic-accordian',5,'header_highlight');">

<IMG class="displayed" src="../gfx/logo.png" width="400" height="173" border="0">

<div id="basic-accordian" ><!--Parent of the Accordion-->


<div class="tab_container">
<div id="test1-header" class="accordion_headings header_highlight" >News</div>
<div id="test2-header" class="accordion_headings" >Test 2</div>
<div id="test3-header" class="accordion_headings" >Test 3</div>
<div id="test4-header" class="accordion_headings" >Test 4</div>
<div id="test5-header" class="accordion_headings" >Test 5</div>
<div id="test6-header" class="accordion_headings" >Test 6</div>
<div id="test7-header" class="accordion_headings" >Test 7</div>
</div>

<div style="float:left;">
<div id="test1-content">
<div class="accordion_child">
<b>Lorem ipsum dolor sit amet, consectetuer</b><br /><br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc sapien nibh, ultrices vitae, convallis eu, semper ut, leo. Cras nec pede.
</div>
</div>

<div id="test2-content">
<div class="accordion_child">
Lorem ipsum dolor sit amet, consectetuer<br /><br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc sapien nibh, ultrices vitae, convallis eu, semper ut, leo. Cras nec pede.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc sapien nibh, ultrices vitae, convallis eu, semper ut, leo. Cras nec pede.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc sapien nibh, ultrices vitae, convallis eu, semper ut, leo. Cras nec pede.
</div>
</div>

<div id="test3-content">
<div class="accordion_child">
Lorem ipsum dolor sit amet, consectetuer<br /><br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc sapien nibh, ultrices vitae, convallis eu, semper ut, leo. Cras nec pede.
</div>
</div>
</div>



</div>
Zum Vergrößern anklicken....
 
Wenn du auf .tab_container entwerder text-align: center; oder margin:0 auto; setzt, könnte das schon dein Problem lösen. Ich habe es allerdings nicht getestet und deinen Code auch nur überflogen, könnte also sein das ich was übersehen habe.

position:absolute; sollte man nur im Notfall verwenden, denn es macht meistens alles kaputt, grade der IE mag das gar nicht.
 
position:absolute; sollte auch unbedingt richtig und bedacht eingesetzt werden. Ich hatte bis jetzt auf jeden Fall keine Probleme damit.
 
Jo. Ich hatte bisher auch noch keine Probleme damit, allerdings habe ich das so mal irgendwo gelesen.
 
cpt_coding schrieb:
Kann mir vielleicht jemand sagen, wo der Fehler liegt? Ich verzweifel schon langsam! :confused:
Zum Vergrößern anklicken....

Bitte benutze CODE tags für deine Listings. #basic-accordian würde ich so umsetzen:
Code: 
#basic-accordian{
border:2px solid #EEE;
padding:5px;
width:800px;
z-index:2;
margin: 0 auto;
}

und bei .accordion_headings wolltest du wohl den cursor setzen:
Code: 
.accordion_headings{
padding:5px;
background:#cc0033;
color:#FFFFFF;
border:1px solid #FFF;
[COLOR="Red"]cursor:pointer;[/COLOR]
font-weight:bold;
}
 
Bääääm - wie geil ihr seid!!! Vielen Dank!

Aber eine Frage habe ich noch: wo ist der Fehler, wenn der Punkt 1 der Navi nicht automatisch öffnet, wenn man die Seite aufruft?

Ich stelle es mir so vor: man geht auf die Seite und sieht sofort Punkt 1 im Menü, was später die News werden!

- - - Edit - - -

Funktioniert jetzt Famos! Vielen Dank noch einmal!
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben