Zum Inhalt springen
View in the app

A better way to browse. Learn more.
Fachinformatiker.de

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Elemente ausrichten mit CSS...

Gast Just2blue4U
Gast Just2blue4U
in Webdesign

Empfohlene Antworten

Veröffentlicht

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

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.

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

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.

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?!?!

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)

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

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 }

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

siehe Link von dersheriff:

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

OK, dann geht es nicht.

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;

}

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

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?

Archiv

Dieses Thema wurde archiviert und kann nicht mehr beantwortet werden.

Zur Themenliste gehen

Configure browser push notifications
Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.