Zur Navigation

Viele Fragen bzgl. css bzw. Layout

1 fligor

Hallo Zusammen,
Hallo Jörg,

auf der Seite: Kuerbisfeld.de geht es momentan drunter und drüber! Nix klappt so wie es soll :/

Problem 1:
Die Tabelle wird nicht zentriert. Und ich habe keine Ahnung wie ich das valide in xhtml 1.0 strict machen soll.

Problem 2:
Das Hintergrundbild für die Tabelle ist ja durchsichtig. Das ist gut, nur leider "wächst" das Element nicht nach Unten mit, wenn mehr Inhalt, als nur Hallo draufsteht.

??? Muss ich an den Rändern einen Schnitt machen und quasi ein graues Kästchen mit repeat mitlaufen lassen? Und die Ränder dann ebenfalls??? <-- Blamabel erklärt, aber bin grad sauer.

Problem 3:
Ich möchte, dass sich der Hintergrund skaliert. Er hat momentan eine fixe Größe auf 1024*768 und ich will aber, sobald es über diese Auflösung geht dass er die komplette Höhe des Browsers einnimmt. Ist ja im Moment nur maximal 1280 Pixel. Der Hintergrund soll fixed sein und nur die dann fertige Textbox soll mitscrollen.

Alternative:
--> Falls das nicht geht, wie kann ich es einrichten, dass der Hintergrund ein "virtuelles Fenster" ist und..... kurz gesagt es sich verhält wie ein iFrame. Wenn mehr Inhalt als das Fenster da ist man es ab Ende des Hintergrunds scrollen muss... Das hattest du mal auf einer deiner Seiten Jörg. Wollte das alles mit css machen.

Problem 4:
den linken Text bekomme ich nicht weiß. Auch nicht mit <span class"weiss"> und in der css span.weiss {font-color:#ffffff} :/

Dachte ich könnte das alles noch von früherr, aber anscheinend Pustekuchen....

hier noch mein ganzer Quelltext:
html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Halloween auf Kuerbisfeld.de</title>
<link rel="stylesheet" type="text/css" href="formate.css" />
</head>

<body>
<div class="tabellemittig">
<table border="0" class="hauptinhalt">
  <tr>
    <td class="menu">Hallo diese Tabelle hat leider keine Lust sich zu zentrieren</td>
    <td class="inhalt">Hier entsteht der Inhalt zu der tollsten deutschen Halloweenseite im Netz. Hier könnt ihr schonmal auf das <a href="/blog/">Halloween-Blog</a> zugreifen.</td>
  </tr>
</table>
</div>
</body>
</html>

css:

body {background-color:#000000; background-image:url(background.png); background-repeat:no-repeat; background-attachment:fixed;background-position:center top;}

table.hauptinhalt {border-style:none; background-image:url(bgtabelle.png); background-repeat:no-repeat;}

td.menu {width:186px; height:1000px;}

td.inhalt {width:582px; height:1000px;}

div.tabellemittig {text-align:center;}

PS: ich seh grad in der Vorschau, dass du das mit den Scrollen bei deinen Code Quotes realisiert hast. Stell dir nun vor der Kasten wäre 1024*768 und Inhalt füllt sich hinein. Mit funtionierendem sich skalierendem Text-Table und ich bin glücklich ^^ Besser wäre Problemlösung anstelle der Alternative, aber egal.

MFG FLo

16.11.2008 18:48

2 Jörg Kruse

Hallo FLo,

ich habe grad nur Zeit für die erste Frage:

Zentrieren kannst du ein Blockelement mit einer festen Breitenangabe und margin:auto;

table.hauptinhalt {border-style:none; background-image:url(bgtabelle.png); background-repeat:no-repeat;width:768px;margin:auto;}

Das andere schau ich mir später an (falls bis dahin niemand anders die Probleme gelöst hat)

16.11.2008 19:51

3 fligor

super! soweit hat es das erste problem gelöst.

MFG FLo

16.11.2008 20:43

4 timur (Gast)

habe exakt das gleiche problem wie FLo. Wie geht man an Problem 2 und 3 heran?

17.11.2008 19:06

5 Jörg Kruse

Zu Problem 2:

Da kannst du das Hintergrundbild dreiteilen: den Rand oben und unten mit den runden Ecken und einen Mittelteil, der skaliert werden kann.

Zu Problem 3:

Mit CSS wüsste ich keinen Weg, ein Hintergrjndbild zu skalieren. Hier hatten wir das Problem auch schon mal:

https://joergs-forum.de/grafiken-an-aufloesung-anpassen-t-437-1

Zu Problem 4:

td.menu {width:186px; height:1000px; color:white;}

PS: ich seh grad in der Vorschau, dass du das mit den Scrollen bei deinen Code Quotes realisiert hast. Stell dir nun vor der Kasten wäre 1024*768 und Inhalt füllt sich hinein. Mit funtionierendem sich skalierendem Text-Table und ich bin glücklich ^^ Besser wäre Problemlösung anstelle der Alternative, aber egal.

Die Scrollbars sind abhängig von einer bestimmten Höhe / Breite oder in diesem Fall einer bestimmten maximalem Höhe / Breite sowie der Eigenschaft overflow:auto;

17.11.2008 22:20

6 fligor

Hallo Jörg,

danke für deine Hilfe. Der alte Link zum Thema hats gebracht. Peinlich das Thema habe ich ja damals auch noch gestartet... hatte allerdings nicht mitbekommen, dass es jemand ganz simpel gelöst hat. Habe es gleichfalls getan.

Musste das Bild vierteilen. Oben & Unten über die gesamte Breite und die Mitte an der <td>-Grenze. Das ganze dann noch in der Mitte über background-repeat:repeat-y; und es war fertig.

Könnte man das mit dem Hintergrund denn über Javascript lösen? Sprich erst das Script erkennen lassen, ob es überhaupt funktioniert, wenn nicht dann meine jetzige Lösung laufen lassen. Es ist ja immer noch ein Problem, wenn man das Browserfenster auf ein Breitbildformat zieht.

So geruhsamen Schlaf -.-*zzz*

MFG FLo

18.11.2008 01:50

8 fligor

Hi Jörg,
habe das Problem auf http://blog.kuerbisfeld.de/ gelöst. Was hältst du von dieser Lösung? ist noch nicht strict, aber fehlt ja nur n div tag. wenn dich der link stört, dann kannst den ja weg machen. sollte keine werbung sein.

MFG FLo

27.11.2008 19:10

9 Jörg Kruse

Ich würde die Transparenz des Hintergrundes im Contentbereich noch etwas herabsetzen - so dass das Bild beim Lesen nicht so stört.

27.11.2008 19:39

10 fligor

Des kompletten Tabellenhintergrundes oder nur vom Inhalt weiß und Sidebar nicht?

Sorry habe content überlesen. OK. Mache ich mal. Dauert aber wegen der anderen Farbe noch ein bissl. Der Linke Rand ist nämlich auch im selben png.

Sag mal könnte ich die Transparenz auch mit css lösen?

MFG FLo

27.11.2008 19:53 | geändert: 27.11.2008 20:22