nicht angemeldet
left align nach right align
hi
ich habe nach euerem vorschlag mit den css-layout gespielt und die tabellen soweit möglich ersetzt. funktioniert soweit gut. in einem punkt bin ich jedoch festgefahren. die erste zeile "h1" im "div#Content" sollte nach meinem Verständnis bis zum "div#Info" gehen. das anschliessende element <p> wird so korrekt umgebrochen. ich habe das problem rot markiert.
FF wie IE7 agieren unterschiedlich:
FF schiebt das "div#Info" über den übergeordneten "div#Content" hinaus
oder verteilt das Info auf die ganze breite und schreibt h1 darunter.
(2 ff auf unterschiedlichen masch. (xp/vista) v2.0.0.11 und v2.0.0.11)
IE7 legt die 2 elemente übereinander
FF zeigt keine fehler in der konsole.
das bild von IE7 kommt meiner sollvorstellung nahe.
ist im css-layout eine verschachtelung von #div zugelassen?
div#Content (float left)
div#Info width=25%, (float right)
text auffüllung im rest ~75%
div
gibt es ein problem in meinem css abschnitt?
braucht es einen hack?
have fun und danke
jürg
beispiel>>>
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style type="text/css">
body,h1,h2,h3,h4,p,ul,ol,li,div,td,th,address,blockquote,nobr,b,i {
font-family: "Trebuchet MS", Tahoma, Verdana, "Century Gotic", Arial, Helvetica, sans-serif;
font-size:100.01%;
}
h1 { margin:15px; padding:0.3em; font-size:150%; font-weight:bold; background-color:red; }
p { margin:15px; }
p img {
margin:10px; background-color:#f0f0f0;
border-width:2px; border-style:solid; border-color:silver white white silver;
}
caption {font-size:x-small; font-size:small; font-style:italic;}
table {
table-layout:auto; padding:1px; empty-cells:hide;
margin:15px; border-collapse:separate; background-color:#f0f0f0;
border-width:1px; border-style:solid; border-color:white silver silver white;
}
thead, th {
background-color:#f0f0f0; z-index:8; padding:2px; border-spacing:1px;
border-width:1px; border-style:solid; border-color:silver white white silver;
font-size:medium; line-height:150%; font-weight:bold;
}
tbody, td {
background-color:white; z-index:5; padding:2px; border-spacing:1px;
border-width:1px; border-style:solid; border-color:silver white white silver;
font-size:medium; line-height:120%;
}
table td.ColHead {
background-color:#f0f0f0; border-width:1px 1px; font-weight:bold;
text-align:center; z-index:9;}
tfoot {
font-size:small; line-height:100%; background-color:#f0f0f0; z-index:1;
font-style:italic;
}
table img { border:2px solid red; margin:0; padding:0; }
div#Content {
float:left;
min-width:400px; background-color:#f9f9f9;
padding:1px; margin:5px 15px 5px 5px;
border-width:1px; border-style:solid; border-color:silver white white silver;
}
div#Info {
float:right; width:25%;
padding:0px; margin:0px 0px 0px 0px;
border-width:1px; border-style:none; border-color:red;
}
</style>
</head>
<body bgcolor="#D2E2EC">
<div id="Content">
<div id="Info">
<table width="100%">
<tr><th>info</th><tr>
<tr><td>ksdf df ksd lk asdfk<br/><br/>
alkdj lksdj sldkfj asdflkj kdfj lkas dflkj södlkfj öaskdf
kjasdöflk ksjf sdf ,myxnc lkyxcl lykxjc lk xclkjy xc
lkjsdf lkjsa fk lksjf klkasdj ölksajdflk lsakdjflksjdf
lasjdfölk sdlfkj öasdkfjä lksjdf ölksdf
</td></tr>
</table>
</div>
<h1>Die Geschichte</h1>
<p>gugus ksadf k asldkfj lkjsf lkjs flkj<br/>
<img src="image/home_uhrx.jpg" align="left" width="150" height="200" alt="resized picture">
lsd lkjdsf lkjsdf lkjadf k sfkj lkjsdf ölksjf lkjsdf
kjaskfjklk aksjdf asdf akjf kajs dk asdkfj ökasjdf öskdjf lkasjdf aksdjf öaskjf
<table>
<tr><th>intern</th><tr>
<tr><td>ksdf df ksd lk asdfk<br/><br/>
alkdj lksdj sldkfj asdflkj kdfj lkas dflkj södlkfj öaskdf
kjasdöflk ksjf sdf
</td></tr>
</table>
</p>
<table>
<tr>
<td>eins</td>
<td>zwei</td>
</tr>
</table><br clear="both">
<p>ksjdf lkj sdfl skjlksdf k askdjflkl jsdkfjlk sdfk lksdjflk dfkjölkasdfk<br/>
ksdkf kjs dfkj öksd fk lksjdf kksadf lkjsdflkjö sd flkjsöd flkjs dflk
lkasjfö lkasjf ksjf öasdfkj dsfkj öaskdjf
lksjdf lkjs flölöasdfkj jsdlfkjlksjfl sdfkj sadöfkj sakldjf ksjdfielja
lsjf lksjfkj ierljkj sldkfj ierlkjdf ladf lkjiernr<br/>
</p>
<table>
<tr>
<td>zwei</td>
<td>drei</td>
</tr>
</table>
</div>
</body>
</html>
<<<<ende
-
Hallo,
die Bereiche die Du mit einer Tabelle gelöst hast, enthalten doch aber nicht nur tabellarische Daten oder? Zwischendurch benutzt Du doch schon <p> und <h1>.
Gruß, Ich
-
Hi juerg,
FF zeigt keine fehler in der konsole.
Was erwartest du denn vom FF? Fehler im HTML kann dir der Valligator anzeigen (was er im übrigen auch tut).
ist im css-layout eine verschachtelung von #div zugelassen?
Klar, warum nicht? Solange das ganze Sinnvoll von statten geht.
gibt es ein problem in meinem css abschnitt?
braucht es einen hack?Du willst auf CSS umstellen und vermischst jetzt CSS mit Tabellen Layout, statt dich auf eins festzulegen[1]
und wunderst dich über fehldarstellungen.Ansonsten erstmal die Fehler im HTML bereinigen bevor du dich auf Fehlersuche machst.
Grüße aus H im R,
Engin
[1] Optimaler Weise CSS-
hi engin
danke für die hints.
habe an meinem verständnis weitergewerkelt. danke für deinen input.
das neue TestCSS2 ist nun einfacher und validiert.zu den tabellen in der vorherigen version. es wird immer informationen geben, die tabellarisch sturkturiert besser verständlich sind.
alle meine problemstellungen zeigten auf ein und dasselbe verhalten - den hintergrund. der text des elements umfliesst das definierte element, der hintergrund nicht.
die erwartungen und die fragen sind in der seite integriert.
have fun
jürg-
Hi juerg,
die erwartungen und die fragen sind in der seite integriert.
Also, zerfleddern wir das ganze doch mal, um zu sehen, was _was_ macht.
h1 {TestCSS2.xhtml (line 15) margin:5px; padding:0.4em; } img.Right {TestCSS2.xhtml (line 22) border:1px solid red; float:right; margin:1em; }"The Title [only the background of h1 is set to yellow. why does yellow not stop at the image border?]"
Because you don´t say 'STOP' to the yellow. :)
der hintergrund befolgt den umbruch nicht. zu erkennen ist ein hintergrund der viel grösser ist, als das element h1 selbst.
Nein, das h1 ist im default und das ist width:100%;, da das Bild auf der rechten Seite gefloatet ist
kann es nicht als begrenzung für h1 genutzt werden. Im Klartext, du musst dem h1 mittels margin sagen,
bis wo er gehen darf.gibt es eine steuerung für den hintergrund, damit der hintergrund und text die selben grenzen (bild) akzeptieren?
Ja, die du im übrigen auf deinem bsp. auch schon im Einsatz hast.
div#Info {TestCSS2.xhtml (line 28) border:1px none green; margin-left:13.5em; }Die margin angaben kannst du auch auf h1 oder p Elemente anwenden.
Grüße aus H im R,
Engin
-
-
