mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Sa 20.04.2024 14:21 Benutzername: Passwort: Auto-Login

Thema: [Frage] - CSS - DIVs nach unten "aufspannen" vom 29.11.2004


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> [Frage] - CSS - DIVs nach unten "aufspannen"
Seite: 1, 2  Weiter
Autor Nachricht
sahnemuh
Threadersteller

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht: Männlich
Verfasst Mo 29.11.2004 18:49
Titel

[Frage] - CSS - DIVs nach unten "aufspannen"

Antworten mit Zitat Zum Seitenanfang

Folgendes Problem habe ich grade:



DIV 1 (mehrere vom selben typ - rote rechtecke im bild) haben keine fixe grösse, (werden mit inhalt - sprich text - gefüllt ) und müssen rechts neben dem DIV 2 (grün) auf voller breite floaten. Allerdings darf das element, welches quasi als letztes neben DIV 2 steht nicht umbrechen, sondern mit der breite, wie das vorige weiterlaufen. erst danach soll die gesammte breite des beeinhaltenden divs ausgefüllt werden.

jemand ne idee?
bin grade etwas mit meinem latein am ende (es für einzelne browser mit attributen wie min- und max- width oder aufspannenden bildern mit 100% "hinzudengeln" funktioniert zwar - aber bei jedem "herumpfuschen" gehts wieder in einem anderen browser nicht).



EDIT: code dazu (mal eben von cms tags etc. bereinigt.. ist aber quasi die "arbeitsversion".. wie gesagt bin ich mit meinem latein am ende und probiere nurnoch rum Lächel

Code:
<STYLE TYPE="text/css">

.icon-list {
   border: 1px solid #000;
   width: 200px;
   float: left;
   }
.icon-list-spacer {
   border: 1px solid #000;
   width: 190px;
   margin-left: 10px;
   margin-top: 10px;
   }
.container {
   border: 1px solid #000;
   width: 590px;
   margin-left: 15px;
   margin-right: 10px;
   }
.content {
   margin-left: 10px;
   padding: 0;
   float: left;
   clear: both;
   width: 100%;
   position: relative;
   left: 0;
   top: 0;
   line-height: 15px;
   margin-right: 15px;
   border: 1px solid #000;
   }
.content h3 {
   line-height: 18px;
   font-size: 11px;
   margin-bottom: 7px;
   padding: 0;
   }
.totop {
   display: block;
   height: 11px;
   float: right;
   line-height: 11px;
   /* border: 1px solid #000; */
   text-align: right bottom;
   margin-top: 14px;
   margin-right: 10px;
   margin-bottom: 12px;
   }
.clearer {
   clear: both;
   display: block;
   height: 1px;
   line-height: 1px;
   font-size: 1px;
   }
</STYLE>
      
   <DIV CLASS="container">      
      <DIV CLASS="icon-list">
         <DIV CLASS="icon-list-spacer">
               <IMG SRC="bild.gif" width="150" height="30" border="0" ALT="bild"><BR>
               <IMG SRC="bild.gif" width="150" height="30" border="0" ALT="bild"><BR>
               <IMG SRC="bild.gif" width="150" height="30" border="0" ALT="bild"><BR>
               <IMG SRC="bild.gif" width="150" height="30" border="0" ALT="bild"><BR>
               <IMG SRC="bild.gif" width="150" height="30" border="0" ALT="bild"><BR>      
         </DIV>
      </DIV>
      
      
      <DIV CLASS="content">
         <h3>Überschrift</h3>
         <STRONG>Preis:&nbsp;</STRONG>
      <P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tatio</P>
      </DIV>         
         <DIV CLASS="totop"><A HREF="#oben"><IMG WIDTH="13" HEIGHT="9" BORDER="0" ALT=" " SRC="./application/resources/images/site/icons/linkarrows/link_arrow_top_border_9px.gif">Themen&uuml;bersicht</A></DIV>   
      <DIV CLASS="content">
         <h3>Überschrift</h3>
         <STRONG>Preis:&nbsp;</STRONG>
      <P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tatio Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla faci</P>
      </DIV>
         <DIV CLASS="totop"><A HREF="#oben"><IMG WIDTH="13" HEIGHT="9" BORDER="0" ALT=" " SRC="./application/resources/images/site/icons/linkarrows/link_arrow_top_border_9px.gif">Themen&uuml;bersicht</A></DIV>   
      

      <SPAN CLASS="clearer" STYLE="width: 590px;">&nbsp;</SPAN>
   </DIV>


Zuletzt bearbeitet von sahnemuh am Mo 29.11.2004 19:06, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
sahnemuh
Threadersteller

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht: Männlich
Verfasst Di 30.11.2004 11:50
Titel

Antworten mit Zitat Zum Seitenanfang

keiner? * *hu hu huu*
  View user's profile Private Nachricht senden
Anzeige
Anzeige
graphicsandunity

Dabei seit: 22.11.2004
Ort: Berlin
Alter: 40
Geschlecht: Männlich
Verfasst Di 30.11.2004 12:59
Titel

Antworten mit Zitat Zum Seitenanfang

Ich möchte dir gerne helfen. Aber ich verstehe dein Problem noch nicht ganz.
Die Infos sind ein wenig zu kompakt, für mich.
Aus dem Bild würde ich schließen, dass du möchtest, dass der grüne div an den roten unten drunter anschlägt.
Richtig verstanden???


Aber eines zum Code kann ich dir schon sagen:

Du solltest die Stylesheets in eine externe css-Datei legen. So können bei Bedarf auch andere Dateien auf die Styles zugreifen und der Quellcode verringert sich. Und das SEO ist damit auch besser.

Grüßle
GaU
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
sahnemuh
Threadersteller

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht: Männlich
Verfasst Di 30.11.2004 13:25
Titel

Antworten mit Zitat Zum Seitenanfang

ich habe das problem doch klar und deutlich geschildert Hä?
Zitat:
DIV 1 (mehrere vom selben typ - rote rechtecke im bild) haben keine fixe grösse, (werden mit inhalt - sprich text - gefüllt ) und müssen rechts neben dem DIV 2 (grün) auf voller breite floaten. Allerdings darf das element, welches quasi als letztes neben DIV 2 steht nicht umbrechen, sondern mit der breite, wie das vorige weiterlaufen. erst danach soll die gesammte breite des beeinhaltenden divs ausgefüllt werden.




die stylesheets liegen natürlich in einer externen datei. wie oben angeführt, habe ich den code von cms spezifischen tags gereinigt und so aufbereitet, dass er möglichst einfach per copy and paste nachvollziehbar ist.


Zuletzt bearbeitet von sahnemuh am Di 30.11.2004 13:27, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Kleopatra

Dabei seit: 21.01.2003
Ort: Konstanz
Alter: 42
Geschlecht: Weiblich
Verfasst Di 30.11.2004 14:04
Titel

Antworten mit Zitat Zum Seitenanfang

würde den roten DIVs nicht ein float:left und clear:both sondern nur ein margin-left:250px oder so mitgeben ...
  View user's profile Private Nachricht senden
sahnemuh
Threadersteller

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht: Männlich
Verfasst Di 30.11.2004 15:49
Titel

Antworten mit Zitat Zum Seitenanfang

das geht nicht, weil sie im unteren bereich ja am linken rand anliegen sollen.
  View user's profile Private Nachricht senden
beeviZ

Dabei seit: 30.09.2002
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Di 30.11.2004 15:53
Titel

Antworten mit Zitat Zum Seitenanfang

ich hab gerade wenig zeit irgendwie groß drüber nachzudenken, aber kannste nich dem grünen einfach n float: left und ne feste breite geben, und den vor den roten positionieren im code?
  View user's profile Private Nachricht senden
sahnemuh
Threadersteller

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht: Männlich
Verfasst Di 30.11.2004 16:18
Titel

Antworten mit Zitat Zum Seitenanfang

ist doch schon so Lächel
  View user's profile Private Nachricht senden
 
Ähnliche Themen Frage zu: Textverknüpfung bei DIVS (wie bei Indesign)
[css] Frage zu dynamischen Höhen von DIVs
divs positionieren
CSS Problem mit Divs
3 divs nebeneinander
Tabellenaufbau mit divs
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.