nicht angemeldet
Blattformatierung
0 0
Blattformatierung
Guten Morgen.
Ich wünsche erst mal allen ein frohes neues Jahr.
Mein Problem:
Ich habe unter folgender URL mal eine Mini-Seite hochgeladen:
www.teletipi.de/test/test.htm
Was ich nun wissen müsste ist, wie man die Mittlere Zeile (linker, main und rechter span) in der Höhe am jeweils höchsten Element anpasse.
Das heißt, wenn der mittlere Teil der höchste ist, sollen auch der linke und rechte eben diese Höhe haben.
Allerdings möchte ich keine Tabellen verwenden.
Wäre für jede Hilfe dankbar.
mfg
-
Hallo,
es wird hier gern gesehen, wenn man sich im Vorfeld die Forum-FAQ unter http://forum.de.selfhtml.org/faq/ anschaut. Dort findet man u.a. auch FAQ 19 (http://forum.de.selfhtml.org/faq/#Q-19)
MfG
André
--
ss:{ zu:) ls:& fo:) de:] va:) ch:{ sh:) n4:# rl:° br:& js:| ie:% fl:| mo:}
http://forum.de.selfhtml.org/archiv/2003/10/60651/#m341175-
Danke für den Hinweis. Bin selten hier. Beim nächsten Mal mach ichs besser :-)
Kann mir jetzt jemand helfen?-
Hallo,
Danke für den Hinweis. Bin selten hier. Beim nächsten Mal mach ichs besser :-)
Kann mir jetzt jemand helfen?Ruhig Blut wird schon. Das ist gar keine so einfache Sache.
Ich habe vor ein paar Tagen genau das gleiche Problem lösen müssen http://jeenaparadies.de/test/gea/ vieleicht hilft es dir wenn du dir mal meinen Quellcode anguckst. Wenn du dennoch Fragen hast dann Frag einfach noch mal nach.
Grüße
Jeena Paradies-
Hi,
Ich habe vor ein paar Tagen genau das gleiche Problem lösen müssen http://jeenaparadies.de/test/gea/
nett gemacht.
Allerdings auch nur ein Trick mit dem Haken, daß der Inhaltsbereich mindestens so hoch wie das Menü sein muß, denn hier wird ja nur ein optischer Effekt simuliert, den CSS 2 nicht bietet.
Übrigens, zwar unwesentlich, da es kaum einer einstellen wird: Sieh' Dir die Seite mal mit 50% Schriftgröße an..freundliche Grüße
Ingo-
Hallo,
nett gemacht.
Danke, aber guck dir das nicht im IE 4 an ;-) Ich hoffe halt einfach dass der für den ich diese Testseite gemacht habe keinen IE 4 benutzt um sie anzugucken. Ich mein funktionieren tut sie ja schon sieht halt dann ein wenig blöde aus.
Allerdings auch nur ein Trick mit dem Haken, daß der Inhaltsbereich mindestens so hoch wie das Menü sein muß, denn hier wird ja nur ein optischer Effekt simuliert, den CSS 2 nicht bietet.
Ja stimmt, und bis ich geblickt habe wie ich das alles verschachteln muss hat es auch einige Zeit gedauert und dann ist da noch das unnütze div welches den linken weißen Rand macht, aber sonst keine Verwendung hat.
Übrigens, zwar unwesentlich, da es kaum einer einstellen wird: Sieh' Dir die Seite mal mit 50% Schriftgröße an..
Ja stimmt auf 50% bin ich damals nicht runtergegangen. Die Srift ist aber dann so klein, dass ich sie nicht mehr entziffern kann. Vieleicht lässt sich das aber irgendwie mit einem clear lösen? Ich muss mal gucken, wenn nicht dann ist das auch nicht sooo schlimm :-)
Grüße
Jeena Paradies-
Hi,
Ja stimmt auf 50% bin ich damals nicht runtergegangen. Die Srift ist aber dann so klein, dass ich sie nicht mehr entziffern kann. Vieleicht lässt sich das aber irgendwie mit einem clear lösen? Ich muss mal gucken, wenn nicht dann ist das auch nicht sooo schlimm :-)
nöö, ist es nicht. Ich war auch nur deshalb auf 50% gegangen um zu sehen, was passiert, wenn der Inhaltsbereich kleiner wird. Und mit clear sollte das tatsächlich lösbar sein.
freundliche Grüße
Ingo
-
-
-
Ich muss dich nochmal stören
Also ich hab folgenden Quelltext gefunden, mit dem ich nichts anfangen kann. Ich nehme an, dass es was mit meinem Problem zu tun hat. Kannst du mir das mal erklären?
Code (aus "screen.css"):
#men1 {
BACKGROUND: url(../img/combo01.gif) no-repeat 100% 50%
}Was ich nicht verstehe sind die Prozentangaben. Was sagen die aus?
-
Hallo,
#men1 {
background: url(../img/combo01.gif) no-repeat 100% 50%;
}
Was ich nicht verstehe sind die Prozentangaben. Was sagen die aus?Das hat mit deinem Problem nichts zu tun. Das sind die Farbigen Punkte neben dem ersten Menüpunkt. Sie sollen ganz rechts(100%) und genau in der mitte(50%) von der Höhe sein.
Wie ich mir das vorgestellt habe findest du hier:
http://forum.de.selfhtml.org/archiv/2003/12/67773/#m388145Verstehst du wie der optische Trick funktioniert?
Grüße
Jeena Paradies-
OK. Was ich zu aller erst nicht verstehen ist, wozu die einzelnen Tags gehören.
Wenn da jetzt steht:
border-left: 10px white solid;
woher weiß ich dann, wozu 10px white und solid gehören?
(Muss ja mal ganz dumm fragen)-
Hallo,
border-left: 10px white solid;
woher weiß ich dann, wozu 10px white und solid gehören?
(Muss ja mal ganz dumm fragen)Klar ;-)
Du meinst:
-----------------------------
#mainout {
border-left: 10px solid white;
[...]
-----------------------------
Das #mainout ist das div mit der id="mainout" (Frag mich nicht warum ich das so genannt habe) also: <div id="mainout">Um es noch mal verständlicher zu machen hier die semantische Darstellung
-+***********+------------------------------------------ weis
- orange
* gelb
Und das Alles ohne Hintergrundgrafiken. Und das habe ich mir semantisch so vorgestellt:
+--------------------------------------------------------+
| +--------------------------------------------------+ |
| | 2 +---+ +------------------------------------+ | |
| 1 | | 3 | | 4 | | |
| | +---+ | | | |
| | +------------------------------------+ | |
| +--------------------------------------------------+ |
+--------------------------------------------------------+Der erste Weiße Rand wird bei (1 #mainout) mit border-left: 10px white solid; gemacht ansonsten hat (1) nichts mehr zu tun.
Der orangene Rand wird dann bei (2 #main) mit border-left: 2px orange solid; gemacht Der Hintergrund ist gelb damit das Menü(3 #menue)immer optisch so lang ist wie der Inhalt(4).
Der zweite orangene Rand wird mittels border-left: 2px orange solid; bei (4 #context) gemacht. Dieser Hintergrund ist weiß, somit entsteht normalerweise ja diese Farbkombination:
-+***********+-----------------------------------------
Grüße
Jeena Paradies-
Ich danke dir vielmals.
Ich hab rausgefunden, dass ich ja nur um meine mittlere Zeile ein seperates Div setzen muss. Das ist die ganze Hexerei. (um das mal farbig darzustellen hab ich das mal verändert: http://www.teletipi.de/test/test.htm
Funktioniert auch ganz toll.
Was ist jetzt aber, wenn die mittlere Spalte die niedrigste ist (Ingo Turski hatte es schon geschrieben). Dann sieht das ziemlich seltsam aus.
(ist dann auch meine letzte Frage :-)-
Hallo,
Ich hab rausgefunden, dass ich ja nur um meine mittlere Zeile ein seperates Div setzen muss. Das ist die ganze Hexerei. (um das mal farbig darzustellen hab ich das mal verändert: http://www.teletipi.de/test/test.htm
Wolltest du das wirklich so haben?
<img src="http://jeenaparadies.servebeer.com/open/selfbilder/teletipi.png" border="0" alt="">Funktioniert auch ganz toll.
Wenn du meinst :-/ was du natürlich auch machen könntes wäre mit ganz Dicken Border des Mittleren divs zu abreiten und das rechte und linke Menü mittels negativen margin Werten da positionieren wo du es willst. Ich glaube dass das bei deiner Aufgabestellung auch das einfachste wäre.
Was ist jetzt aber, wenn die mittlere Spalte die niedrigste ist (Ingo Turski hatte es schon geschrieben). Dann sieht das ziemlich seltsam aus.
Wenn ich das so theoretisch durchdenke dann glaube ich dass wenn du mit den dicken Bordern und ngeativen Margins arbeitest dieses Problem verschwinden könnte. Vieleicht habe ich aber auch noch nicht ganz zu ende gedacht.
(ist dann auch meine letzte Frage :-)
Nein nein, deswegen sind wir doch alle hier. :-)
Grüße
Jeena Paradies-
Also bei mir sah das nicht so vergriesknaddelt aus (IE 6)
Aber egal. Also das mit den Rahmen hab ich gemacht. Allerdings weiß ich nicht, was du mit den Margins meinst (Margins wovon usw)-
Hallo,
Also bei mir sah das nicht so vergriesknaddelt aus (IE 6)
Aber egal. Also das mit den Rahmen hab ich gemacht. Allerdings weiß ich nicht, was du mit den Margins meinst (Margins wovon usw)+-------------------------------------------------+
| topnavi |
+-------------------------------------------------+
*****************************************************
*| | | |*
*| menu | | menu |*
*| links | content | rechts |*
*| | | |*
*| | | |*
*| | | |*
*| | | |*
*****************************************************
+-------------------------------------------------+
| bottombnavi |
+-------------------------------------------------+Alles was innerhalb der Sterne ist ist ein div welches:
border-left: 100px red solid; UND brder-right: 100px blue solid;
hat. Oben und unden sind es normale divs, oder auch was anderes, das muss nicht in einem div drin sein.
menu links ist ein div(oder liste oder was weiß ich) welches innerhalb von content ist, und über dem Inhalt plaziert ist.
menu rechts ist ein div(oder liste oder was weiß ich) welches innerhalb von content ist, und unter dem Inhalt plazert ist.Mittels der Eigenschaften float und margin kannst du die beiden Menüs dann da hin plazieren wohin du sie haben willst.
Grüße
Jeena Paradies-
Bitte nicht verzweifeln mit mir. (schlechter Tag heute)
Ich hab also jetzt alles in ein div gepackt mit den genannten Eigenschaften.
Allerdings bekomme ich die linke bwz. rechte Spalte nicht dahin, wo ich sie haben will.
http://www.teletipi.de/test/test.htm
Ändere ich nämlich jetzt die Eigenschaft "margin-left" in den Minusbereich, schneidet er mir (was ja eigentlich auch logisch ist) den Text ab.Was meinst du damit:
"über dem Inhalt plaziert ist"
"über dem Inhalt plaziert ist"
?
Meinst du z-index?-
Also ich geh jetzt heim. Keinen Bock mehr. Ich nehm jetzt ne Tabelle und damit hats sich.
Was ich aber noch unbedingt loswerden will ist, dass ich euch allen ganz herzlich danke. Es ist gut zu wissen, dass es so viele Kompetente und vor allem hilfsbereite Menschen gibt, die einem helfen.
Danke an alle
-
Hallo,
Also ich geh jetzt heim. Keinen Bock mehr. Ich nehm jetzt ne Tabelle und damit hats sich.
Mensch und das jetzt wo es spannend wurde, schade aber dann habe ich auch keine Lust mehr daran zu arbeiten. Im Anhang habe ich das gepostet was ich probiert habe. Leider wird die Borderfarbe noch nicht angezeigt, aber vieleicht hilft der Ansatz ja jemandem im Archiv.
Was ich aber noch unbedingt loswerden will ist, dass ich euch allen ganz herzlich danke. Es ist gut zu wissen, dass es so viele Kompetente und vor allem hilfsbereite Menschen gibt, die einem helfen.
Uns wurde hier auch so geholfen und du wirst auch irgendwann hier sein und helfen - hoffentlich ;-)
<html>
<head>
<title>Test</title>
<style>
#top, #bottom {
text-align:center;
background-color:#000000;
color:#FFFFFF;
padding:5px;
clear: both;
}
#content {
border-left: 100px red solid;
border-right:100px blue solid;
}
#left {
float:left;
margin-left: -100px;
width: 100px;
}
#middle {
float: left;
}
#right {
float:right;
margin-right: -100px;
width: 100px;
}
</style>
</head>
<body>
<div id="top">
Top-Navigation
</div><div id="content">
<div id="left">
Left
</div>
<div id="middle">
MainContent
<br>
<br>
<br>
<br>
hallo
</div>
<div id="right">
Right
<br>
Navigation
<br>
Right
</div>
</div><div id="bottom">
Bottom-Navigation
</div>
</body>
</html>Grüße
Jeena Paradies
-
-
-
-
Hi,
Allerdings weiß ich nicht, was du mit den Margins meinst (Margins wovon usw)
damit versucht man, CSS zu "vergewaltigen" und es bereitet soweit ich weiß in einigen (älteren) Browsern auch Probleme.
Es ist in CSS 2.0 einfach nicht vorgesehen, daß nebeneinanderstehende Blocklevel-Elemente sich gegenseitig in ihrer Höhe beeinflussen. Wenn Du unbedingt so einen Effekt haben willst, würde ich Dir ausnahmsweise zu einer einfachen Layout-Tabelle raten. So etwas in CSS nachzubilden, ist nie 100%ig.
Der Trick mit den negativen margins verwendet für den mittleren Bereich farbige border links und rechts in der gewünschten spaltenbreite. um in diesen bordern dann weitere elemente platzieren zu können, braucht man margins mit entsprechend negativen Werten.freundliche Grüße
Ingo-
Hallo,
damit versucht man, CSS zu "vergewaltigen" und es bereitet soweit ich weiß in einigen (älteren) Browsern auch Probleme.
Da stimme ich dir zu, siehe meine testseit im IE 4 Da ist das Menü nämlich auch so was von Breit, dass es nichts neben sich lässt, und alles geht weiter nach unten, obwohl ich ganz anders gelöst habe.
Grüße
Jeena Paradies -
Hallo Ingo,
Der Trick mit den negativen margins verwendet für den mittleren Bereich farbige border links und rechts in der gewünschten spaltenbreite. um in diesen bordern dann weitere elemente platzieren zu können, braucht man margins mit entsprechend negativen Werten.
Gibt es irgendwo im Web ein Demonstrationsbeispiel für diesen Trick?
Nicht dass ich diesen Trick so gut finde - aber ich möchte doch gern mal ein funktionierendes Beispiel sehen.Ansonsten: Mehrspaltige Layouts werden in CSS 2 unvollständig unterstützt. Ein mehrspaltiges CSS-Layout mit echten konsistenten Spaltenlängen zu erzeugen gelingt wohl nur mit einem Javascript.
Grüsse aus Neubrandenburg
erika--
Hauptsache dem Hund geht's gut
-
-
-
-
-
-
-
-
-
-
-
Guten Morgen.
Ich wünsche erst mal allen ein frohes neues Jahr.
Danke!
Warum keine Tabellen? Wäre doch die einfachste Lösung, oder?
Greets Tom1tk
-
Hy
Warum keine Tabellen? Wäre doch die einfachste Lösung, oder?
Weil man Tabellen nicht für Layout Zwecke missbrauchen sollte...
Tabellen sind für eine tabellarische Darstellung gedacht. Und sonst für nichts!Gruss
David-
Erst mal das.
Und dann habe ich gehört, dass "Blinden-Programme" (keine Ahnung, ob die einen speziellen Namen haben) mit Tabellen Probleme haben. Die Seite muss aber für ein breites Publikum sein.-
Hallo.
Und dann habe ich gehört, dass "Blinden-Programme" (keine Ahnung, ob die einen speziellen Namen haben) mit Tabellen Probleme haben. Die Seite muss aber für ein breites Publikum sein.
"Screen Reader" heißen die, und sie haben in der Tat Probleme mit nicht linearisierbaren Tabellen, also mit solchen, deren Inhalte nach dem Entfernen aller Tabellen-Tags nicht in der richtigen Reihenfolge stehen.
Gegen die Verwendung von Tabellen zu Layout-Zwecken sprechen also tatsächlich einzig die Semantik und die den Tabllen fehlende Möglichkeit, Inhalte bei Platzmangel untereinander zu schieben. Ich halte diese Punkte jedoch für so wichtig, dass ich von Layout-Tabellen generell abrate.
MfG, at
-
-
-