Hi Leutz,
kann mir einer sagen wie ich in <Div> Vertical ausrichten kann??? Mit
<Div style="vertical-align:center;"> hab ich das schon probiert kann mir da einer helfen???
Divs vertical ausrichrichten
-
janSchumacher -
18. Mai 2006 um 10:51
-
-
-
passiert nichts
-
du willst aber schon den in halt des divs ausrichten,
und nicht das div selber, oder ? -
ja genau den Inhalt. Ich schreibe gerade eine Navigations leiste wo oben halt Strings stehen. wenn man da mit der Maus raufgeht dann soll ein Dropdown Menü geöffnet werden. Die Worte wo man rauf geht sind ganz oben am Rand der Seite und ich will sie Centriert in dem Div haben. Das Div und die Navi stehen aber in einer Tabelle liegt es daran???? Soll ich dir mal den Quelltext schicken????
-
kannst mal hier reinposten...
-
<style type="text/css">
body{
font-family: Verdana;
font-size:12px;
background-color:#00214a;
}
.link{
color:#ABD5FF;
text-decoration: None;
}
a.link:hover{
color: #ffffff;
text-decoration: None;
}
.headerborderbottom{
font-family: Verdana;
font-size:11px;
color: #ABD5FF;
text-align: center;
border-bottom: solid 1px #FFFFFF;
width:166px;
height:24px;
z-index:0;
}
.headerborderbottommenue5{
font-family: Verdana;
font-size:11px;
color: #ABD5FF;
text-align: center;
border-bottom: solid 1px #FFFFFF;
width:164px;
height:24px;
z-index:0;
}
.menueitem{
font-family: Verdana;
font-size:11px;
color: #ABD5FF;
border-bottom: solid 1px #748ca5;
border-left: solid 1px #FFFFFF;
border-right: solid 1px #FFFFFF;
background-color: #315273;
}
.bottommenueitem{
font-family: Verdana;
font-size:11px;
color: #ABD5FF;
border-bottom: solid 1px #FFFFFF;
border-left: solid 1px #FFFFFF;
border-right: solid 1px #FFFFFF;
background-color: #315273;
}
</style>
<script type='text/javascript'>
function anzeigen(das){
if(document.getElementById(das).style.display=='none')
document.getElementById(das).style.display='block';
else document.getElementById(das).style.display='none';}
</script>
<table cellpadding=0 cellspacing=0 width="828" style="position: absolute; top: 10px; left: 0px; ">
<tr>
<td valign=top>
<div onMouseover="anzeigen('menue#1')" onMouseout="anzeigen('menue#1')">
<div style="vertical-align:middle;" class="headerborderbottom">HOME</div>
<div id="menue#1" style="display: none;width:166px;z-index:10; margin-top:-1px;">
</div>
</div>
</td>
<td valign=top>
<div onMouseover="anzeigen('menue#2')" onMouseout="anzeigen('menue#2')">
<div class="headerborderbottom">
COMPANY
</div>
<div id="menue#2" style="display: none;width:166px;z-index:10; margin-top:-1px;">
<div class="menueitem">[url='']Contact/Departments:[/url]</div>
<div class="menueitem">[url='']·Management[/url]</div>
<div class="menueitem">[url='']·Chartering[/url]</div>
<div class="menueitem">[url='']·Operating[/url]</div>
<div class="menueitem">[url='']·S & P[/url]</div>
<div class="menueitem">[url='']·Administration&  Crewing[/url]</div>
<div class="menueitem">[url='']·Insurance[/url]</div>
<div class="menueitem">[url='']·Technical & Nautical Department[/url]</div>
<div class="menueitem">[url='']·Safety Management[/url]</div>
<div class="menueitem">[url='']·Procurement[/url]</div>
<div class="menueitem">[url='']·Accounting & Controlling[/url]</div>
<div class="menueitem">[url='']Profile[/url]</div>
<div class="menueitem">[url='']Vacancies:[/url]</div>
<div class="menueitem">[url='']·Shore Staff[/url]</div>
<div class="menueitem">[url='']·Seagoing Staff[/url]</div>
<div class="menueitem">[url='']Gallery:[/url]</div>
<div class="menueitem">[url='']·Ships[/url]</div>
<div class="menueitem">[url='']·Launching Ceremonies[/url]</div>
<div class="bottommenueitem">[url='']·Headquarter[/url]</div>
</div>
</div>
</td>
<td valign=top>
<div class="bereich" onMouseover="anzeigen('menue#3')" onMouseout="anzeigen('menue#3')">
<div class="headerborderbottom">
FLEET
</div>
<div id="menue#3" style="display: none;width:166px;z-index:10; margin-top:-1px;">
<div class="menueitem">[url='']Panamaxes:[/url]</div>
<div class="menueitem">[url='']·Clara[/url]</div>
<div class="menueitem">[url='']·Christina[/url]</div>
<div class="menueitem">[url='']·Carola[/url]</div>
<div class="menueitem">[url='']Superhandymaxes:[/url]</div>
<div class="menueitem">[url='']·Kawasakis[/url]</div>
<div class="menueitem">[url='']·Tess 58[/url]</div>
<div class="menueitem">[url='']Large Handysizes:[/url]</div>
<div class="menueitem">[url='']·Patriot[/url]</div>
<div class="menueitem">[url='']·Palau[/url]</div>
<div class="menueitem">[url='']·Papua[/url]</div>
<div class="menueitem">[url='']Small Handysizes:[/url]</div>
<div class="menueitem">[url='']·Ida[/url]</div>
<div class="menueitem">[url='']·Lita[/url]</div>
<div class="menueitem">[url='']·Bellatrix ID[/url]</div>
<div class="menueitem">[url='']·Olga[/url]</div>
<div class="menueitem">[url='']·Comet[/url]</div>
<div class="menueitem">[url='']Container Vessels:[/url]</div>
<div class="bottommenueitem">[url='']·Maersk Naha[/url]</div>
</div>
</div>
</td>
<td valign=top>
<div class="bereich" onMouseover="anzeigen('menue#4')" onMouseout="anzeigen('menue#4')">
<div class="headerborderbottom">
POSITIONS
</div>
<div id="menue#4" style="display: none;width:166px;z-index:10; margin-top:-1px;">
</div>
</div>
</td>
<td valign=top>
<div class="bereich" onMouseover="anzeigen('menue#5')" onMouseout="anzeigen('menue#5')">
<div class="headerborderbottommenue5">
SERVICES
</div>
<div id="menue#5" style="display: none;width:164px;z-index:10; margin-top:-1px;">
<div class="menueitem">[url='']Chartering[/url]</div>
<div class="menueitem">[url='']S&P[/url]</div>
<div class="menueitem">[url='']Ship Management[/url]</div>
<div class="bottommenueitem">[url='']Crewing[/url]</div>
</div>
</div>
</td>
</tr>
</table> -
die fehlenden <html>, <head> und <body> - tags stehen aber bei dir schon drin ?
-
ja in einer anderen Seite ich mache das später über openCMS
-
die überschrift bzw menüleiste brauchst doch eigentlich garnicht in div machen, oder ?
du hast ja schon des tabellenfeld.... -
über das div wird aber der onmouse effekt ausgelöst oder geht das auch anders???
-
mal das rausgemacht: <td valign=top>
-
jab es ändert sich aber nichts an der ausrichtung des textes wie gesagt es funktionier alles nur der text lässt sich nicht verschieben
-
*grübel*
also wenn man die zeilenhöhe erhöht, dann is der div
(bei align=middle) in der zelle richtig ausgerichet,
bloß des in dem div nicht.... vielleicht wenn man vom div die höhe anpasst... -
So siehts immoment aus
-
und wie mache ich das??
-
also du könntest des "headerborderbottom" oben im css der td zuweisen
und dann unten die divs vor home, company.. wegmachen...dann werden se richtig ausgerichtet...
-
css:
Code
Alles anzeigentd{ vertical-align:middle; font-family: Verdana; font-size:11px; color: #ABD5FF; text-align: center; border-bottom: solid 1px #FFFFFF; width:166px; height:30px; z-index:0; }table:
Code<td> <div onMouseover="anzeigen('menue#1')" onMouseout="anzeigen('menue#1')"> HOME <div id="menue#1" style="display: none;width:166px;z-index:10; margin-top:-1px;"> </div> </div> </td>edit: mist, mir is aufgefallen das des dann beim dropdown ja logischerweise
auch den rahmen nach unten verschiebt.... -
ok, glaub hab die lösung...
du kannst unter der menüzeile noch eine machen mit den drop downs.
ich versuch des gleichmal und schreib den code dann rein... -
ich habs raus!!!
Es lag an der height in dem css!!!
Code
Alles anzeigen.headerborderbottom{ vertical-align:center; font-family: Verdana; font-size:11px; color: #ABD5FF; text-align: center; border-bottom: solid 1px #FFFFFF; padding-top:5px; padding-bottom:5px; width:166px; z-index:0; }DANKE FÜR DEINE HILFE!!!
Viel Spass noch ihr seit SUPER!!
DANKE GRUß
Jan
-