Elemente ausrichten mit CSS...

Just2blue4U · 21. Dezember 2004

... ist eigentlich voll simpel. Ausserdem gibt's für die ganz dummen im Internet 1.000 Beispiele, Tutorials, etc. TROTZDEM KRIEG ICH'S NICHT HIN... :eek:

meine html-datei:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">


<html>

<head>

	<title>Titel</title>

	<meta http-equiv="cache-control" content="no-cache">

	<link rel="stylesheet" type="text/css" href="style.css">

</head>


<body> 

<table class="bla">

<tr><td> </td></tr>

</table>



</body>

</html>

... also eine ganz popelige tabelle. meine CSS:


body

{

  background-color: #F08C8C;

  background-image: url(./gfx/bg.jpg);

  background-repeat: no-repeat;

  background-position: center;

  margin: 0;

  text-align: center;

  vertical-align: middle;

}


.bla

{

  border-width: 1px;

  border-color: #000000;

  border-style: solid;

  text-align: center;

  vertical-align: middle;

}

auch nix besonderes. die align-einstellungen sind doppelt, die müssten soweit ich weis eigentlich nur in den body rein, aber ich hab schon so viel hin und her probiert, warum also nicht mal in body UND bla versuchen?

Mein Problem:

Der IE (6) zeigt mir diesen kleinen schwarzen kasten oben mittig an,

Mozilla hat ihn oben links in die ecke verfrachtet.

Wie kann das sein? was mach ich falsch?!?!?!?! :confused:

DerFreddy · 21. Dezember 2004

Füg mal

margin:0px auto;

in body und bla ein.

Dann sollte es funktionieren.

text-align:center; in bla wird dir wenig bringen da die Tabelle

momentan ja nur die Breite deines Textes hat.

kills · 22. Dezember 2004

auch bleibt die Frage, welcher der beiden effekte willst du überhaupt erzielen?

Just2blue4U · 22. Dezember 2004

ups! sorry. klar. man sollte natürlich auch erwähnen was man eigentlich will...

Also ich möchte die Tabelle gerne mittig aufm bildschirm haben. sowohl vertikal als auch horizontal.

Just2blue4U · 22. Dezember 2004

nach

margin: 0px auto

:

IE und Mozilla zeigen die tab BEIDE oben in der mitte an....

Das kann doch nicht so schwer sein, eine tabelle genau mittig in das Fenster zu bekommen?!?!

FinalFantasy · 22. Dezember 2004

Meiner Erfahrung nach ist vertikale Ausrichtung immernoch ein Problem.

Vertikal zentriert habe ich bis jetzt nur im IE zustande gebracht, in Opera, Firefox, Mozilla klebt das Element jedoch doch wieder am oberen Rand.

Eine Ausrichtung am unteren Browserrand habe ich noch gar nicht hingebracht.

Würde mich auch interessieren, falls da jemand Abhilfe weiß.

(Durch Hilfe von Tabellen mal ausgeschlossen)

tobias-digital · 22. Dezember 2004

margin: 0px auto;

zentriert ein Element lediglich horizontal. Hier ist die Geschichte des Zentrierens ganz gut erklärt: http://www.quirksmode.org/css/centering.html

Gruß, Tobias

DerFreddy · 22. Dezember 2004

nach
margin: 0px auto
: Das kann doch nicht so schwer sein, eine tabelle genau mittig in das Fenster zu bekommen?!?!

Aso an vertikal zentriert hab ich jetzt irgendwie nicht gedacht. Wie das nur mit CSS gehn könnte weiß ich auch so spontan nicht. @FinalFantasy

.bottom { position:absolute; bottom:0px }

kills · 22. Dezember 2004

Aso an vertikal zentriert hab ich jetzt irgendwie nicht gedacht.
Wie das nur mit CSS gehn könnte weiß ich auch so spontan nicht.

siehe Link von dersheriff:

Vertical centering

Unfortunately, vertical centering is a notorious weak spot of CSS. Vertical centering is only possible for content of TD's. Don't ask me why, I disagree strongly, but the problem is there and should be solved.

So we hand the vertical centering problem to a table. Add table:

<table border=0>
<tr>
<td>
<div class="container">
<div class="left">
Top content
</div>
etc.
</div>
</td>
</tr>
</table>

Give the table a 100% width and height. Then add vertical-align: middle to the td. This is the only way of centering content vertically in CSS.

table {
width: 100%;
height: 100%;
}

td {
vertical-align: middle;
}

See Example 3 (popup).

DerFreddy · 22. Dezember 2004

siehe Link von dersheriff:

Ja das das mit einer Tabelle einfach geht war mir klar, aber genau die sollte ja vermieden werden.

tobias-digital · 22. Dezember 2004

OK, dann geht es nicht.

Just2blue4U · 22. Dezember 2004

hab das problem jetzt mit tabellen umgangen. Aber nun stehe ich schon wieder vorm nächsten Problem:

Ich habe die hintergrundfarbe der nav-leiste halbtransparent gemacht. nun möchte ich aber verhindern, dass die schrift der nav auch transparent wird.

das funzt aber nicht... was mach ich falsch?


.nav td

{

  height: 30;

  border-width: 0px;

  opacity: .3;

  filter: alpha(opacity=30);

  -moz-opacity: .3;

}


font

{

  opacity: 1.0;

  filter: alpha(opacity=100);

  -moz-opacity: 1.0;

  font-family: comic sans ms;

  text-decoration: none;

  color: #FFFFFF;

}

FMG · 22. Dezember 2004

Klar geht auch vertikale Zentrierung - indem man margin-bottom bzw. margin-top in Verbindung mit Prozentwerten benutzt, ist allerdings mit ausprobieren verbunden...daher nur für statische Seiten empfehlenswert (also Seiten, die fest vorgegeben sind, z. B. Platzhalterseiten, wenn der eigentliche Inhalt noch in Vorbereitung ist).

Just2blue4U · 23. Dezember 2004

habe bei www.webmasterworks.com erfahren, dass man eine vererbte tranzparenz nicht aufheben kann. stimmt das?

falls ja: ****! dann eben nicht.

falls nicht: wie kann man sie aufheben? Kann man ggf. das vererben unterdrücken?

Anmelden

Elemente ausrichten mit CSS...

Empfohlene Beiträge

Just2blue4U

DerFreddy

kills

Just2blue4U

Just2blue4U

FinalFantasy

tobias-digital

DerFreddy

kills

DerFreddy

tobias-digital

Just2blue4U

FMG

Just2blue4U

Erstelle ein Benutzerkonto oder melde Dich an, um zu kommentieren

Benutzerkonto erstellen

Anmelden

Fachinformatiker Jobs

Fachinformatiker.de, 2024 by SE Internet Services

Links

Fachinformatiker.de App

Kontakt

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

Umsehen

Aktivitäten

Stellenanzeigen

Blog

Über Fachinformatiker.de