AGB  ·  Datenschutz  ·  Impressum  







Anmelden
Nützliche Links
Registrieren
Zurück Delphi-PRAXiS Programmierung allgemein Programmieren allgemein [HTML/CSS] "Normalen Textfluss" erzwingen
Thema durchsuchen
Ansicht
Themen-Optionen

[HTML/CSS] "Normalen Textfluss" erzwingen

Offene Frage von "alcaeus"
Ein Thema von alcaeus · begonnen am 1. Jun 2006 · letzter Beitrag vom 1. Jun 2006
Antwort Antwort
Benutzerbild von alcaeus
alcaeus

Registriert seit: 11. Aug 2003
Ort: München
6.537 Beiträge
 
#1

[HTML/CSS] "Normalen Textfluss" erzwingen

  Alt 1. Jun 2006, 15:10
Hallo,

nehmen wir an, ich haette folgenden HTML-Code:
Code:
<div id="content">
  <div id="navigation">foobar</div>
  <div id="text">Hier steht viel Text[...]</div>
</div>

<div id="footer">Hier steht noch was...blablabla</div>
mit folgendem CSS:
Code:
#navigation {
  position:absolute;
  left:2em;
  width:20em;
}
#text {
  position:absolute;
  left:23em;
  right:2em;
  padding:1em;
}

#footer {
  padding:1em;
  font-size:0.7em;
}
Das content-div wird ja aus dem normalen Textfluss rausgenommen, da es absolut positioniert ist. Das hat zur Folge, dass das footer-div hinter dem Content landet, anstatt darunter. Kann ich das footer-div dazu zwingen, unter #content zu erscheinen, wenn ich die Hoehe des content-divs nicht kenne (Hoehe ist variabel), und ohne auf JavaScript zurueckzugreifen?

Der Grund warum ich es so mache ist, weil bei Floating divs (normalerweise koennte ich ja #navigation links floaten lassen) manchmal #text umgebrochen wird, wenn z.B. ueberbreiter Content enthalten ist. Dass das suboptimal ist koennt ihr euch ja vorstellen *g*

Hat jemand einen Tipp?

Greetz
alcaeus
Andreas B.
Die Mutter der Dummen ist immer schwanger.
Ein Portal für Informatik-Studenten: www.infler.de
  Mit Zitat antworten Zitat
Benutzerbild von S2B
S2B

Registriert seit: 1. Feb 2004
Ort: Aachen
1.268 Beiträge
 
#2

Re: [HTML/CSS] "Normalen Textfluss" erzwingen

  Alt 1. Jun 2006, 15:24
Zitat von alcaeus:
Der Grund warum ich es so mache ist, weil bei Floating divs (normalerweise koennte ich ja #navigation links floaten lassen) manchmal #text umgebrochen wird, wenn z.B. ueberbreiter Content enthalten ist. Dass das suboptimal ist koennt ihr euch ja vorstellen *g*

Kommt darauf an, wie du es machst... So dürfte es eigentlich nicht passieren:
Code:
<div>
  <div style="float: left; width: 20em">Text</div>
  <div style="margin-left: 20em">Text</div>
</div>
Da sich der IE6 mal wieder nicht ganz an die Standards hält, müsstest du bei der linken Box overflow: hidden oder overflow: scroll einsetzen.

Auf jeden Fall denke ich nicht, dass du eine relative Ausrichtung ohne JS automatisch unter eine absolute bringen kannst.
Simon Praetorius
Gruß
S2B
  Mit Zitat antworten Zitat
Benutzerbild von alcaeus
alcaeus

Registriert seit: 11. Aug 2003
Ort: München
6.537 Beiträge
 
#3

Re: [HTML/CSS] "Normalen Textfluss" erzwingen

  Alt 1. Jun 2006, 15:30
Zitat von S2B:
So dürfte es eigentlich nicht passieren:
[...]
Da sich der IE6 mal wieder nicht ganz an die Standards hält, müsstest du bei der linken Box overflow: hidden oder overflow: scroll einsetzen.
Naja, beide Browser halten sich an den Standard, welcher sagt, dass die Box umgebrochen wird wenn sie zu breit ist. Das Problem ist aber, dass sowohl Firefox als auch IE7 Probleme bei der Berechnung der effektiven Breite hatten, da margin und padding eingeflossen sind. Die Seite konnte keiner der beiden korrekt darstellen, obwohl CSS und HTML perfekt der Spezifikation (XHTML 1.1) entsprachen.

Wie gesagt - der Standard sagt Umbrechen, ich sag aber nein. Per CSS das Umbrechen verhindern (white-space:none ging auch nicht.
Anscheinend hatten beide Browser ein Problem beim Berechnen der Breite unter Beruecksichtigung vom Padding der Content-Box, margin von #text, margin und width von #navigation, und padding von #text. Irgendwo hats da gekracht.

Greetz
alcaeus
Andreas B.
Die Mutter der Dummen ist immer schwanger.
Ein Portal für Informatik-Studenten: www.infler.de
  Mit Zitat antworten Zitat
Benutzerbild von Luckie
Luckie

Registriert seit: 29. Mai 2002
37.621 Beiträge
 
Delphi 2006 Professional
 
#4

Re: [HTML/CSS] "Normalen Textfluss" erzwingen

  Alt 1. Jun 2006, 15:56
Warum benutzt du id-Tags? Sollte man da nicht lieber mit class arbeiten?
Michael
Ein Teil meines Codes würde euch verunsichern.
  Mit Zitat antworten Zitat
Benutzerbild von alcaeus
alcaeus

Registriert seit: 11. Aug 2003
Ort: München
6.537 Beiträge
 
#5

Re: [HTML/CSS] "Normalen Textfluss" erzwingen

  Alt 1. Jun 2006, 15:59
Zitat von Luckie:
Warum benutzt du id-Tags? Sollte man da nicht lieber mit class arbeiten?
Nein - weil nur diese Boxen den Style haben sollen. Ob ich id="foo" und #foo oder class="foo" und .foo verwende laeuft auf dasselbe hinaus, #foo hat allerdings eine staerkere Bindung auf genau ein Element. An der Darstellungsweise der Browser aendert es gar nichts.

Greetz
alcaeus
Andreas B.
Die Mutter der Dummen ist immer schwanger.
Ein Portal für Informatik-Studenten: www.infler.de
  Mit Zitat antworten Zitat
Benutzerbild von S2B
S2B

Registriert seit: 1. Feb 2004
Ort: Aachen
1.268 Beiträge
 
#6

Re: [HTML/CSS] "Normalen Textfluss" erzwingen

  Alt 1. Jun 2006, 16:10
Zitat von alcaeus:
Naja, beide Browser halten sich an den Standard, welcher sagt, dass die Box umgebrochen wird wenn sie zu breit ist.
o.O
Das wäre mir neu. Soweit ich das in Erinnerung habe, sagt der Standard, dass eine div-Box ihre angegebene Größe beibehält, egal ob der Inhalt größer ist oder nicht (solange die Eigenschaft nicht mit overflow verändert wird). Denn solange nur der Inhalt aus der Box herausragt, die Box sich aber nicht verändert, wird die rechte Box auch nicht nach unten umgebrochen (siehe Firefox).

Zitat von alcaeus:
Das Problem ist aber, dass sowohl Firefox als auch IE7 Probleme bei der Berechnung der effektiven Breite hatten, da margin und padding eingeflossen sind. Die Seite konnte keiner der beiden korrekt darstellen, obwohl CSS und HTML perfekt der Spezifikation (XHTML 1.1) entsprachen.
So soll es ja auch sein, padding und margin werden zur Größe der Boxen hinzugefügt.
Simon Praetorius
Gruß
S2B
  Mit Zitat antworten Zitat
Benutzerbild von alcaeus
alcaeus

Registriert seit: 11. Aug 2003
Ort: München
6.537 Beiträge
 
#7

Re: [HTML/CSS] "Normalen Textfluss" erzwingen

  Alt 1. Jun 2006, 16:14
Zitat von S2B:
Das wäre mir neu. Soweit ich das in Erinnerung habe, sagt der Standard, dass eine div-Box ihre angegebene Größe beibehält, egal ob der Inhalt größer ist oder nicht
Die Box hat aber keine angegebene Groesse. Ein width:100%; hat die Box naemlich im IE und im Firefox weit ueber den Rand rausgehen lassen, eben weil die margins dazugezaehlt werden. Also muesste ich von 100% die 23em links und 2em rechts abziehen, und der einzige Weg das zu realisieren, ist mit position:absolute zu arbeiten, und left und right zu setzen. Das schluckt der IE6 zwar nicht, was momentan aber kein Problem darstellt.
Allerdings kommt es dann zum oben beschriebenen Problem...ach, hab ich erwaehnt dass ich Webdesign hasse?

Greetz
alcaeus
Andreas B.
Die Mutter der Dummen ist immer schwanger.
Ein Portal für Informatik-Studenten: www.infler.de
  Mit Zitat antworten Zitat
Benutzerbild von S2B
S2B

Registriert seit: 1. Feb 2004
Ort: Aachen
1.268 Beiträge
 
#8

Re: [HTML/CSS] "Normalen Textfluss" erzwingen

  Alt 1. Jun 2006, 16:32


Also auf meiner Testseite wird alles korrekt angezeigt, zumindest im Firefox (im IE6 gibt es trotz CSS-Hack noch einen kleinen Fehler, der sollte sich aber beheben lassen):
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" xml:lang="de" lang="de">
<head>
   <title>Test</title>
   <style type="text/css">
   <!--
      #content {
         border: 1px #000 solid
      }
      #navigation {
         float: left;
         margin-left: 2em;
         width:20em;
         border: 1px #000 solid;
      }
      * html #navigation {
         overflow: hidden
      }
      #text {
         margin-left: 23em;
         margin-right: 2em;
         padding:1em;
         border: 1px #000 solid
      }
      
      #footer {
         padding:1em;
         font-size:0.7em;
         border: 1px #000 solid
      }
   -->
   </style>
</head>
<body>
   <div id="content">
      <div id="navigation">
         asdölakjsflöjkasölfköalskfölaksfölaköslfköalskfaksölfkaölsgöaskgölkaölfköasdöasd
      </div>
      <div id="text">
         asdölakjsflöjkasölfköalskfölaksfölaköslfköalskfaksölfkaölsgöaskgölkaölfköasdöasd
      </div>
   </div>
   
   <div id="footer">Hier steht noch was...blablabla</div>
</body>
</html>
Simon Praetorius
Gruß
S2B
  Mit Zitat antworten Zitat
Benutzerbild von Flocke
Flocke

Registriert seit: 9. Jun 2005
Ort: Unna
1.172 Beiträge
 
Delphi 10.2 Tokyo Professional
 
#9

Re: [HTML/CSS] "Normalen Textfluss" erzwingen

  Alt 1. Jun 2006, 21:58
Zitat von alcaeus:
Also muesste ich von 100% die 23em links und 2em rechts abziehen, und der einzige Weg das zu realisieren, ist mit position:absolute zu arbeiten, und left und right zu setzen.
Du könntest auch einfach zwei divs ineinander verschachteln - die äußere bekommt 100% Breite und die innere padding und margin.
Volker
Besucht meine Garage
Aktuell: RtfLabel 1.3d, PrintToFile 1.4
  Mit Zitat antworten Zitat
Antwort Antwort


Forumregeln

Es ist dir nicht erlaubt, neue Themen zu verfassen.
Es ist dir nicht erlaubt, auf Beiträge zu antworten.
Es ist dir nicht erlaubt, Anhänge hochzuladen.
Es ist dir nicht erlaubt, deine Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus

Gehe zu:

Impressum · AGB · Datenschutz · Nach oben
Alle Zeitangaben in WEZ +1. Es ist jetzt 01:18 Uhr.
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
LinkBacks Enabled by vBSEO © 2011, Crawlability, Inc.
Delphi-PRAXiS (c) 2002 - 2023 by Daniel R. Wolf, 2024 by Thomas Breitkreuz