mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 18:27 Benutzername: Passwort: Auto-Login

Thema: Divs anordnen (nicht allgemein!) vom 12.11.2006


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Divs anordnen (nicht allgemein!)
Seite: 1, 2  Weiter
Autor Nachricht
EHST
Gesperrt
Threadersteller

Dabei seit: 08.08.2006
Ort: Orbg.-Sachsenhausen
Alter: -
Geschlecht: -
Verfasst So 12.11.2006 11:24
Titel

Divs anordnen (nicht allgemein!)

Antworten mit Zitat Zum Seitenanfang

Guten Tag,

habe da wohl ein dämliches, weil vermutlich einfaches, Problem mit dem Anordnen von Divs. Das klappt alles nicht so wie gewünscht.
Hier mal fix die Skizze:




Div1: CD-Cover (200x200 groß)
Div2: Liedtitel usw.
Div3: Info

Div 1 und 2 sollen natürlich auf einer Höhe liegen, klar.. schreibe ich nur so, dass alles komplett beschrieben ist, hehe.

Div 3 soll im gleichen Abstand immer unter Div 1 und 2 liegen. Ist ja an sich kein Problem. Zumindest nicht, wenn Div2 immer die gleiche höhe hat. hat es aber nicht. Mal ist es kleiner als Div1 und mal eben wesentlich höher als Div1.

Nun habe ich Div1 und 2 schon in ein Div gepackt und wollte Div3 daran ausrichten, aber das klappte auch nicht so unbedingt zufriedenstellend. Irgendwie musste ich immer einen negativen Rand definieren, das haut aber auch nicht immer hin. Zum Beispiel, wenn Div1 mal nicht 200px hoch ist. * Nee, nee, nee *

Hat jemand eine simple Lösung, wie ich das alles hinbekomme?

Die ganze Sache soll sich dann ja auch beliebig wiederholen. Kann da also nicht mit absoluten Werten arbeiten.

Im Moment sieht das ganze So aus: http://www.membaris.de/musicae/musicae.html (Das habe ich in aller Eile nur mal eben so zusammengezimmert - völlig irrelevant zur jetzigen Frage. Ich will das ja verbessern *zwinker* )

(Kleine Info am Rande, das scheint immer ein wenig nötig zu sein: Ich bekomme dafür weder Geld, noch ist das irgendwie beruflich!)
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Nimroy
Community Manager

Dabei seit: 26.05.2004
Ort: zwischen Köln und D'dorf
Alter: 45
Geschlecht: Männlich
Verfasst So 12.11.2006 12:26
Titel

Antworten mit Zitat Zum Seitenanfang

Müsste das nicht einfach funktionieren, in dem du für DIV3 einen Außenabstand nach oben definierst?
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
hyko

Dabei seit: 29.04.2002
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst So 12.11.2006 12:39
Titel

Antworten mit Zitat Zum Seitenanfang

wenn man mal n source sehen könnte...
vorab einen tipp noch, da sich ja deine div wiederholen in mit class arbeiten und nicht mit div id...

ansonsten - wie soll man deinen fehler finden ohne quelltext?
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
EHST
Gesperrt
Threadersteller

Dabei seit: 08.08.2006
Ort: Orbg.-Sachsenhausen
Alter: -
Geschlecht: -
Verfasst So 12.11.2006 12:48
Titel

Antworten mit Zitat Zum Seitenanfang

Entschuldigt. Habe jetzt doch nochmal versucht Div1 und 2 in ein extra div zu packen "album". Hier der aktuelle Code. CSS:

Code:

#album{
 position:relative;
 width:480px;
 margin-top:20px;
 margin-bottom:20px;
 height:100%
 }

#cover{
 position:relative;
 width:200px;
 height:200px;
 top:0px;
 left:0px;
 margin-right:10px;
}

#lieder{
 position:absolute;
 height:100%;
 left:220px;
 top:0px;
}

#info{
 position:static;
 margin-bottom:auto;
 border-width:1px;
 border-style:solid;
 padding:5px;
 border-color:#051B1B;
 background-color:#1f1f1f;


In der Datei:

Code:

<div id="album">
 <div id="cover">
  <img src="when_darkness_reigns/cover.jpg" width="200" height="200" border="0" alt="">
 </div>

<div id="lieder">
<!-- Titel Anfang -->
<p><strong>When darkness reigns... (Demo 2002)</strong></p>


01. <a href="mp3s/Membaris_When_Darkness_Reigns(Demo 2002)-Track 1_Forever_Burning_Flame.MP3" target="_blank">Forever Burning Flame</a><br>
02. <a href="mp3s/Membaris_When_Darkness_Reigns(Demo 2002)-Track 2_Fate I.MP3" target="_blank">Fate</a><br>
03. <a href="mp3s/Membaris_When_Darkness_Reigns(Demo 2002)-Track 3_Fate II.MP3" target="_blank">Fate II</a><br>
04. As A Union We Stand<br>
05. Crushing The Sceptre<br>
06. When Darkness Reigns<br>
<p>Total playing time: 28:12 min.</p>
</div>
</div>

<div id="info">
<strong>Info:</strong> Forever Burning Flame was recorded for the second DarkBound-Sampler and represents the bands first recording session in a studio. The other songs were recorded on an old four-track maschine. These pieces of brutal and uncompromising Black Metal were mostly written by Obscurus and Kraal at the beginning of Membaris in 1999.<br>
<a href="when_darkness_reigns/reviews.html">Reviews</a><br>
</div>



Div3 Info hängt jetzt 200px unter dem Ende von Div1. *Schnief*

Wenn ich Div 3 einen rand nach oben gebe, dann orientiert sich Div3 nur an Div1, und das soll nicht sein.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht: Männlich
Verfasst So 12.11.2006 13:11
Titel

Antworten mit Zitat Zum Seitenanfang

ich hab mal kurz in deiner divsuppe aufgeräumt Lächel


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>
   <title>blubb</title>
      
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   
   <style type="text/css">
   * {
      margin: 0;
      padding: 0;
      font-family: arial, verdana, helvetica, sans-serif;
   }
   img.cover{
    width:200px;
    height:200px;
    float:left;
    margin-right:10px;
   }
   h2 {
      display: block;
      float: left;
      width: 230px;
       }
   ul {
       list-style-type: none;
       width: 440px;
       }
    ul li {
    padding-bottom: 40px;
    }   
   ol {
      display: block;
      width: 230px;
      float: left;
      }
   ol li {
   padding: 0 !important;
   }
   p.info{
      clear: both;
      width: 440px;
      padding-top: 20px;
      }
   </style>
</head>
<body>
   <ul>
      <li>
         <img class="cover" src="when_darkness_reigns/cover.jpg" width="200" height="200" border="0" alt="" />
         <h2>When darkness reigns... (Demo 2002)</h2>
         <ol>
                     <li><a href="mp3s/Membaris_When_Darkness_Reigns(Demo 2002)-Track 1_Forever_Burning_Flame.MP3" target="_blank">Forever Burning Flame</a></li>
                     <li><a href="mp3s/Membaris_When_Darkness_Reigns(Demo 2002)-Track 1_Forever_Burning_Flame.MP3" target="_blank">Forever Burning Flame</a></li>
                     <li><a href="mp3s/Membaris_When_Darkness_Reigns(Demo 2002)-Track 1_Forever_Burning_Flame.MP3" target="_blank">Forever Burning Flame</a></li>
                     <li><a href="mp3s/Membaris_When_Darkness_Reigns(Demo 2002)-Track 1_Forever_Burning_Flame.MP3" target="_blank">Forever Burning Flame</a></li>
         </ol>
         <p class="info">
            <strong>Info:</strong> Forever Burning Flame was recorded for the second DarkBound-Sampler and represents the bands first recording session in a studio. The other songs were recorded on an old four-track maschine. These pieces of brutal and uncompromising Black Metal were mostly written by Obscurus and Kraal at the beginning of Membaris in 1999.<br />
            <a href="when_darkness_reigns/reviews.html">Reviews</a>
         </p>
      </li>
      <li>
         <img class="cover" src="when_darkness_reigns/cover.jpg" width="200" height="200" border="0" alt="" />
         <h2>When darkness reigns... (Demo 2002)</h2>
         <ol>
                     <li><a href="mp3s/Membaris_When_Darkness_Reigns(Demo 2002)-Track 1_Forever_Burning_Flame.MP3" target="_blank">Forever Burning Flame</a></li>
                     <li><a href="mp3s/Membaris_When_Darkness_Reigns(Demo 2002)-Track 1_Forever_Burning_Flame.MP3" target="_blank">Forever Burning Flame</a></li>
                     <li><a href="mp3s/Membaris_When_Darkness_Reigns(Demo 2002)-Track 1_Forever_Burning_Flame.MP3" target="_blank">Forever Burning Flame</a></li>
                     <li><a href="mp3s/Membaris_When_Darkness_Reigns(Demo 2002)-Track 1_Forever_Burning_Flame.MP3" target="_blank">Forever Burning Flame</a></li>
         </ol>
         <p class="info">
            <strong>Info:</strong> Forever Burning Flame was recorded for the second DarkBound-Sampler and represents the bands first recording session in a studio. The other songs were recorded on an old four-track maschine. These pieces of brutal and uncompromising Black Metal were mostly written by Obscurus and Kraal at the beginning of Membaris in 1999.<br />
            <a href="when_darkness_reigns/reviews.html">Reviews</a>
         </p>
      </li>      
   </ul>
</body>
</html>


Zuletzt bearbeitet von sahnemuh am So 12.11.2006 13:29, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden
hyko

Dabei seit: 29.04.2002
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst So 12.11.2006 13:12
Titel

Antworten mit Zitat Zum Seitenanfang

hab mal schnell rumgefummelt - im ff und ie passte es soweit... müsste also so passen
das css:
Code:
.album{
 width:480px;
 margin-top:20px;
 margin-bottom:20px;
 }

.cover{
 width:200px;
 height:200px;
 margin-right:10px;
 float:left;
}

.lieder{
 width:200px;
 float:left;
}

.info{
float:left;
 border-width:1px;
 border-style:solid;
 border-color:#051B1B;
 background-color:#1f1f1f;
 margin: 10px 0 0 0;
 }


html:
Code:

<div class="album">
 <div class="cover">
  <img src="when_darkness_reigns/cover.jpg" width="200" height="200" border="0" alt="">
 </div>

<div class="lieder">
<p><strong>When darkness reigns... (Demo 2002)</strong></p>
01. <a href="mp3s/Membaris_When_Darkness_Reigns(Demo 2002)-Track 1_Forever_Burning_Flame.MP3" target="_blank">Forever Burning Flame</a><br>
02. <a href="mp3s/Membaris_When_Darkness_Reigns(Demo 2002)-Track 2_Fate I.MP3" target="_blank">Fate</a><br>
03. <a href="mp3s/Membaris_When_Darkness_Reigns(Demo 2002)-Track 3_Fate II.MP3" target="_blank">Fate II</a><br>
04. As A Union We Stand<br>
05. Crushing The Sceptre<br>
06. When Darkness Reigns<br>
<p>Total playing time: 28:12 min.</p>
</div>
</div>
<div class="info">
<strong>Info:</strong> Forever Burning Flame was recorded for the second DarkBound-Sampler and represents the bands first recording session in a studio. The other songs were recorded on an old four-track maschine. These pieces of brutal and uncompromising Black Metal were mostly written by Obscurus and Kraal at the beginning of Membaris in 1999.<br>
<a href="when_darkness_reigns/reviews.html">Reviews</a><br>
</div>
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
EHST
Gesperrt
Threadersteller

Dabei seit: 08.08.2006
Ort: Orbg.-Sachsenhausen
Alter: -
Geschlecht: -
Verfasst So 12.11.2006 13:22
Titel

Antworten mit Zitat Zum Seitenanfang

Ah, perfekt! Vielen Dank, an beide. Jetzt muss ich mich nur noch für eine Variante entscheiden. * huduwudu! * Und erstmal studieren und so *zwinker*

Zuletzt bearbeitet von EHST am So 12.11.2006 13:23, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht: Männlich
Verfasst So 12.11.2006 13:26
Titel

Antworten mit Zitat Zum Seitenanfang

ohne fies sein zu wollen:
meine ist semantisch korrekt und benutzt keine unnötigen hilfscontainer - wäre also per se die "richtigere" entscheidung Lächel
  View user's profile Private Nachricht senden
 
Ähnliche Themen Css Float 3 Divs anordnen
DIVs dynamisch anordnen
Allgemein für css
Software Allgemein
CMS Allgemein und bezgl Sportverein
Animationen in ImageReady CS2, Banner allgemein
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.