Tweet
Original geschrieben von asp2php
eine gewagte Behauptung ... IMHO hält sich keiner von den Browser richtig dran
eine gewagte Behauptung ... IMHO hält sich keiner von den Browser richtig dran
-
du sagst es. aus dem grund kann ich die obige aussage auch nicht gelten lassen. der intertretationsgrad mit dem die css-angaben implementiert wurden ist hoch und genau deswegen tu ich mir auch so schwer. eine aussage wie: "DU hast die height-angabe nicht richtig verstanden und meinst [blabla]" ist schon aufgrund der fehlenden einigkeit völliger schwachsinn. fakt ist, dass sie firefox am ehesten an die standards hält. ich bin kein IE-freund, was mir oben versucht wurde zu unterstellen *grml* -
@ patrick:das prinzip ist mir schon klar (auch wenn einige da vielleicht anders denken) mir gehts einzig und allein um die umsetzung. da happerts und da hilft mir css4you leider auch nicht weiter. ich hab im vorfeld schon diverse google treffer abgeklappert, konnte aber kein wirklich gutes tutorial entdecken, das sich mit der positionierung von elementen im detail (nicht nur oberflächlich) beschäftigt. so wies ausschaut werd ich das ganze doch absolut positionieren und nicht relativ. die gewünschten abstände zwischen den boxen muss ich mir dann halt ausrechnen :-(ielleicht nicht genau so wie du es brauchst, aber das Prinziep wird erklärt.Kommentar
-
Du solltest einfach keine 100% höhenangaben benutzen. Und gib uns mal deinen Code, den du jetzt benutzt. Denn meiner klappt sowohl in IE als auch in Firefox.Kommentar
-
ich verwende deinen code von weiter oben und bei mir sieht das wie folgt aus:
darin verwendest du ebenfalls eine höhenangabe von 100%ich suche nach einer möglichkeit um sowas zu realisieren:.signature {
width: 100px;
height: 100%;
background-color:#CCCCCC;
float: left;
text-align:center;
}also im prinzip ein "rowspan" über zwei zeilen. die höhe von bereich 2 ist fix vorgegeben, die höhen der bereiche 1 und 3 sollen sich der länge des textes in bereich 3 anpassen.Code:+----------+------------------------------+ | | 2 | | +------------------------------+ | | | | | | | 1 | | | | 3 | | | | | | | | | | +----------+------------------------------+
das html grundgerüst sieht so aus:in den bereich 1 sollen folgende dinge rein:PHP-Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Testseite</title>
</head>
<body>
<div>
<p><a href="#">antworten</a></p>
<p><a href="#">editieren</a></p>
<p><strong>Nickname</strong></p>
<p><img name="" src="" width="80" height="80" alt="avatar" /></p>
<p>(Gast)</p>
<p><a href="#">E-Mail</a></p>
<p>01.01.2005 23:00</p>
<p>Re: Betreff</p>
<p>Hier steht der eigentliche Text.</p>
</div>
</body>
</html>
- nickname
- darum und uhrzeit
- avatar
- benutzertitel (gast)
- email-adresse
- betreff
- "editieren"
- "antworten"
und zwischen den "blöcken" soll jeweils eine kluft von 3 pixeln bleiben.Zuletzt geändert von php_rookie; 23.10.2004, 12:15.Kommentar
-
test
testKommentar
-
was willst du uns damit nun sagen?EDIT:
wie ich sehe, hast du dich nur im thread vertan? mal *ZUSAMMENFÜHR*INFO: Erst suchen, dann posten![color=red] | [/color]MANUAL(s): PHP | MySQL | HTML/JS/CSS[color=red] | [/color]NICE: GNOME Do | TESTS: Gästebuch[color=red] | [/color]IM: Jabber.org |
Kommentar
-
damit will ich sagen, dass mir geraten wurde keine höhenangabe von 100% zu verwenden, obwohl derjenige der mir den rat gegeben hat diese höhenangabe selbst verwendet hat. wie man sieht ist die darstellung im ie und im ff unterschiedlich.
und mir wurde geraten jeden block in ein eigenes div zu packen und ein paar beiträge drunter wird diese vorgehensweise belächelt. d.h. ich kann keine empfehlung entdecken, die mir in meinem problem wirklich weiterhilft.Kommentar
-
nein, ist sie ganz sicher nicht.Original geschrieben von php_rookie
eine aussage wie: "DU hast die height-angabe nicht richtig verstanden und meinst [blabla]" ist schon aufgrund der fehlenden einigkeit völliger schwachsinn.
wie es zu interpretieren ist, ist in den spezifikationen eindeutig festgelegt. das hat also erst mal null damit zu tun, wie viele browser es richtig und wie viele falsch interpretieren.I don't believe in rebirth. Actually, I never did in my whole lives.Kommentar
-
und wieviele browser kennst du, die sich exakt an die spezifikationen halten?
also, ich versuch nochmals auf das eigentliche thema zurückzukommen. ich hab versucht <p>-tags zu positionieren. das ist scheinbar nicht möglich in älteren browsern:quelle: http://de.selfhtml.org/css/eigenscha...g.htm#positionWeder Netscape noch der MS Internet Explorer interpretieren Angaben zur absoluten Positionierung in allen HTML-Elementen. Um eine maximale Abwärtskompatibilität zu erreichen, ist es am besten, Angaben zur Positionierung auf das div-Element zu beschränken. Schließen Sie andere Elemente, etwa Textabsätze, Grafiken, Tabellen, Formulare usw. einfach in entsprechende div-Elemente ein.
also hab ich die absätze in div-elemente verpackt. wenn ich jetzt position:relative einbaue, erfolgt eine art zeilenumbruch zwischen den einzelnen blöcken
in der form werden die left- und top-angaben ignoriert. wie stellt man das bitte richtig?PHP-Code:<html>
<head>
<title>Testseite</title>
<style type="text/css">
<!--
.posting_block {
width: 660px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #333333;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #333333;
}
.posting_signature {
left: 3px;
top: 3px;
background-color: #CCCCCC;
width: 100px;
text-align: center;
}
.posting_subject {
left: 106px;
width: 300px;
top: 3px;
background-color: #EEEEEE;
}
.posting_answer {
top: 3px;
left: 400px;
width: 100px;
text-align: center;
background-color: #CCCCCC;
}
.posting_edit {
top: 3px;
left: 255px;
width: 100px;
text-align: center;
background-color: #CCCCCC;
}
.posting_text {
left: 106px;
}
-->
</style>
</head>
<body>
<div class="posting_block">
<div class="posting_answer"><p><a href="#">antworten</a></p></div>
<div class="posting_edit"><p><a href="#">editieren</a></p></div>
<div class="posting_signature">
<p><strong>Nickname</strong></p>
<p><img name="" src="" width="80" height="80" alt="avatar" /></p>
<p>(Gast)</p>
<p><a href="#">E-Mail</a></p>
<p>01.01.2005 23:00</p>
</div>
<div class="posting_subject"><p>Re: Betreff</p></div>
<div class="posting_text"><p>Hier steht der eigentliche Text.</p></div>
</div>
</body>
</html>
Kommentar
-
willst du etwa noch auf den netscape 4 rücksicht nehmen?Original geschrieben von php_rookie
das ist scheinbar nicht möglich in älteren browsern
bei IE 5+ und aktuellen netscape/geckos sollte positionierung jedenfalls kaum probleme bereiten.
müssen sie ja auch, so lange die position static ist.in der form werden die left- und top-angaben ignoriert.
man gibt ihnen eine andere position als static.wie stellt man das bitte richtig?I don't believe in rebirth. Actually, I never did in my whole lives.Kommentar
-
wenn ich position: relative eintrage werden die blöcke ebenfalls untereinander, jedoch mit einem versatz nach links angezeigt. und absolut positionieren kann ich sie auch nicht. was also ist zu tun?
beispiel mit position: relativePHP-Code:<html>
<head>
<title>Testseite</title>
<style type="text/css">
<!--
.posting_block {
width: 660px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #333333;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #333333;
}
.posting_signature {
left: 3px;
top: 3px;
background-color: #CCCCCC;
width: 100px;
text-align: center;
}
.posting_subject {
left: 106px;
width: 300px;
top: 3px;
background-color: #EEEEEE;
}
.posting_answer {
position: relative;
top: 3px;
left: 557px;
width: 100px;
text-align: center;
background-color: #CCCCCC;
}
.posting_edit {
position: relative;
top: 3px;
left: 255px;
width: 100px;
text-align: center;
background-color: #CCCCCC;
}
.posting_text {
left: 106px;
}
-->
</style>
</head>
<body>
<div class="posting_block">
<div class="posting_answer"><p><a href="#">antworten</a></p></div>
<div class="posting_edit"><p><a href="#">editieren</a></p></div>
<div class="posting_signature">
<p><strong>Nickname</strong></p>
<p><img name="" src="" width="80" height="80" alt="avatar" /></p>
<p>(Gast)</p>
<p><a href="#">E-Mail</a></p>
<p>01.01.2005 23:00</p>
</div>
<div class="posting_subject"><p>Re: Betreff</p></div>
<div class="posting_text"><p>Hier steht der eigentliche Text.</p></div>
</div>
</body>
</html>
Kommentar
-
natürlich werden sie nach wie vor untereinander angezeigt - weil relative eben nur ein relativer versatz zur normalposition ist.Original geschrieben von php_rookie
wenn ich position: relative eintrage werden die blöcke ebenfalls untereinander, jedoch mit einem versatz nach links angezeigt.
sollst du ja auch nicht.und absolut positionieren kann ich sie auch nicht.
den hier bereits gegebenen hinweis auf float mal verfolgen.was also ist zu tun?
und erst mal im netz nach erklärungen und beispielen suchen, so dass du es verstehst - und nicht immer sofort fragen, danke.I don't believe in rebirth. Actually, I never did in my whole lives.Kommentar
-
weil relative sich auf den unmittelbaren vorgänger im quelltext bezieht, nicht?weil relative eben nur ein relativer versatz zur normalposition ist.wenn du mir sagen kannst, wie ich den äußerst linken block in das umgebende div-einbetten kann ohne height: 100% zu verwenden, dann wäre das eine lösung.den hier bereits gegebenen hinweis auf float mal verfolgen.Kommentar
-
rede ich chinesisch?Original geschrieben von php_rookie
weil relative sich auf den unmittelbaren vorgänger im quelltext bezieht, nicht?
relative bezieht sich auf die normale position des elementes im textfluss.
was bitte ist daran zweideutig/nicht zu verstehen?
dass zwei elemente ihre höhe gegenseitig beeinflussen, ist mit CSS nicht vorgesehen und auch kaum realisierbar.wenn du mir sagen kannst, wie ich den äußerst linken block in das umgebende div-einbetten kann ohne height: 100% zu verwenden, dann wäre das eine lösung.
eine mögliche lösung wäre z.b., den bereich mit kürzerem inhalt durch ein entsprechend breites hintergrundbild des containers so aussehen zu lassen, als ob er "bis unten" ginge.I don't believe in rebirth. Actually, I never did in my whole lives.Kommentar
-
das hast du SO oben nicht geschrieben. der relative versatz bezieht sich auf das unmittelbare vorgängerelement, also die reihenfolge im textfluss. deswegen auch mein einwand.relative bezieht sich auf die normale position des elementes im textfluss.
wie auch immer: ich werde bei meinem tabellenlayout bleiben. mit hintergrundbildern rumzupfuschen kanns ja wohl wirklich nicht sein...Kommentar
Kommentar