nicht angemeldet
breite des textes, ...
Guten Tag,
ich würde gerne per CSS im gesamten body die breite aller Elemente beschränken auf z.B. 300px - den rest des fensters soll er einfach nicht für die elemente des body nutzen - also dort keine tabelle, kein bild etc. hinpositionieren.
Ist das realisierbar?
Grüße
phpfreak
-
Hallo phpfreak,
ich würde gerne per CSS im gesamten body die breite aller Elemente beschränken auf z.B. 300px - den rest des fensters soll er einfach nicht für die elemente des body nutzen - also dort keine tabelle, kein bild etc. hinpositionieren.
Ist das realisierbar?
max-width: 300px; oder width: 300px;
Ersteres ist Dein eigentlicher Wunsch, wird aber vom IE nicht unterstützt; letzteres wird vom IE unterstützt, hat aber zur Folge, dass die Breite *immer* 300px ist, auch nicht kleiner.
Eventuell musst Du das noch mit overflow: hidden; kombinieren, damit bei zu langem Inhalt nicht doch noch etwas hinausragt. (dafür wird dieser dann abgeschnitten)
Viele Grüße,
Christian-
Hallo Christian,
Eventuell musst Du das noch mit overflow: hidden; kombinieren, damit bei zu langem Inhalt nicht doch noch etwas hinausragt. (dafür wird dieser dann abgeschnitten)
Overflow:hidden; ist keine gute Idee, weil das dann auch für die Höhe gilt. So erreicht man längeren Inhalt im Body dann gar nicht mehr.
Das unten stehende Beispiel ist, meiner Meinung nach, die beste Möglichkeit für IE6.0 (IE5.5 zentriert natürlich nicht) und die Gecko-Browser (NN7.x, Opera7.x, Mozilla ...). Opera 6.x kann natürlich overflow:auto nicht, macht aber zumindest den Inhalt komplett sichtbar.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Body begrenzen</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
html {height:100%; margin:0; padding:0;}
body {width:300px; height:100%; margin:0 auto 0 auto; padding:0 20px 0 0; overflow:auto;}
-->
</style>
</head>
<body>
<h1>Das ist eine etwas längere Überschrift</h1>
<p>Fließtext in einem Absatz. Fließtext in einem Absatz. Fließtext in einem Absatz. Fließtext in einem Absatz. Fließtext in einem Absatz. Fließtext in einem Absatz. Fließtext in einem Absatz. Fließtext in einem Absatz. Fließtext in einem Absatz. Fließtext in einem Absatz. Fließtext in einem Absatz. Fließtext in einem Absatz.</p>
<table border="1" style="width:100%">
<caption>Eine Tabelle mit 100% Breite</caption>
<tr>
<td>Zelle</td>
<td>Zelle</td>
</tr>
<tr>
<td>Zelle</td>
<td>Zelle</td>
</tr>
</table>
<table border="1" style="width:500px">
<caption>Eine Tabelle mit Überbreite</caption>
<tr>
<td>Zelle</td>
<td>Zelle</td>
</tr>
<tr>
<td>Zelle</td>
<td>Zelle</td>
</tr>
</table>
<h2>Eine Überschrift</h2>
<p style="text-align:justify;">Fließtext in einem Absatz. Fließtext in einem Absatz. Fließtext in einem Absatz. Fließtext in einem Absatz. Fließtext in einem Absatz. Fließtext in einem Absatz. Fließtext in einem Absatz. <img src="css/home.gif" style="width:50px; height:50px; float:right;" alt="Bild"> Fließtext in einem Absatz. Fließtext in einem Absatz. Fließtext in einem Absatz. Fließtext in einem Absatz. Fließtext in einem Absatz. Fließtext in einem Absatz. Fließtext in einem Absatz. Fließtext in einem Absatz. Fließtext in einem Absatz. Fließtext in einem Absatz.</p>
<p style="clear:right;">Weiterer text ...</p>
</body>
</html>viele Grüße
Axel
-
DANKE an beide. --> Vielen Dank
-
-