Zum Inhalt springen

Elemente ausrichten mit CSS...

Just2blue4U

Von Just2blue4U
in Webdesign

 Teilen

Empfohlene Beiträge

Just2blue4U

Just2blue4U

Geschrieben
Geschrieben

... 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:

Link zu diesem Kommentar
Auf anderen Seiten teilen
FinalFantasy

FinalFantasy

Geschrieben
Geschrieben

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)

Link zu diesem Kommentar
Auf anderen Seiten teilen
kills

kills

Geschrieben
Geschrieben
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).

Link zu diesem Kommentar
Auf anderen Seiten teilen
Just2blue4U

Just2blue4U

Geschrieben
  • Autor
Geschrieben

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;

}

Link zu diesem Kommentar
Auf anderen Seiten teilen
FMG

FMG

Geschrieben
Geschrieben

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).

Link zu diesem Kommentar
Auf anderen Seiten teilen

Dein Kommentar

Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.

Gast
Auf dieses Thema antworten...

×   Du hast formatierten Text eingefügt.   Formatierung wiederherstellen

  Nur 75 Emojis sind erlaubt.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Dein vorheriger Inhalt wurde wiederhergestellt.   Editor leeren

×   Du kannst Bilder nicht direkt einfügen. Lade Bilder hoch oder lade sie von einer URL.

×
 Teilen
Zur Themenübersicht

Fachinformatiker.de, 2024 by SE Internet Services

fidelogo_small.png

Schicke uns eine Nachricht!

Fachinformatiker.de ist die größte IT-Community
rund um Ausbildung, Job, Weiterbildung für IT-Fachkräfte.

Links

Fachinformatiker.de App

Download on the App Store
Get it on Google Play

Kontakt

Hier werben?
Oder sende eine E-Mail an

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

×
×
  • Neu erstellen...