Problem!

Sebi17

Ich will 3 divs neben einander haben mit ner hauptüberschrift und das sind dann so aus.

Code

<h2 style="text-decoration: underline">Dragonball</h2>


<div style="float:left; margin-right:20px;">
<span style="display:block;" style="font-size: 1.8em">Die Legende
von Shenlong</span>
[img]images/Cover/Movies/DB/B0001GGXT0.03.LZZZZZZZ.jpg[/img]
</div>   


<div style="float:left; margin-right:20px;">
<span style="display:block;" style="font-size: 1.8em">Das Schloss
der Dämonen</span>
[img]images/Cover/Movies/DB/B0002H3UNK.03.LZZZZZZZ.jpg[/img]
</div>   


<div style="float:left; margin-right:20px;">
<span style="display:block;" style="font-size: 1.8em">Son-Gokus
erstes Tunier</span>
[img]images/Cover/Movies/DB/B0002Y2YLM.03.LZZZZZZZ.jpg[/img]
</div>


<span style="clear:both;"></span>


<h2 style="text-decoration: underline">Dragonball Z</h2>


<div style="float:left; margin-right:20px;">
<span style="display:block;" style="font-size: 1.8em">Die Legende
von Shenlong</span>
[img]images/Cover/Movies/DB/B0001GGXT0.03.LZZZZZZZ.jpg[/img]
</div>   


<div style="float:left; margin-right:20px;">
<span style="display:block;" style="font-size: 1.8em">Das Schloss
der Dämonen</span>
[img]images/Cover/Movies/DB/B0002H3UNK.03.LZZZZZZZ.jpg[/img]
</div>   


<div style="float:left; margin-right:20px;">
<span style="display:block;" style="font-size: 1.8em">Son-Gokus
erstes Tunier</span>
[img]images/Cover/Movies/DB/B0002Y2YLM.03.LZZZZZZZ.jpg[/img]
</div>

Alles anzeigen

wie kann ich das ändern das es so aussieht wie ich es haben will?
Hier noch ein Bild dazu.

sejuma

Cleare mal mit div statt mit span:

Code

<div style="clear: both;"></div>

Sebi17

Jetzt siehts so aus siehe bild: wie bekomm ich noch hin dasse alle Perfect auf eine höhe sind?

synaptic

das hatte ich dir doch bereits via icq erklärt...
zur not packste um all deine divs noch nen wrapper der alles zusammenhält.
wenn das clearing mit div und span nicht klappt nimm mal ein

Code

<br style="clear:both;" />

bei der beispieldatei hatten wir ja schon überschrift, dann 3 bilder und um des im gleichen style fort zu führen musste halt den code auf die gleiche art und weise wiederholen

Sebi17

wie meinste das mit dem wrapper bitte ein beispiel code versteh das nämlich nicht

synaptic

ich bin zwar nicht begeistert davon dir den code vorzukauen, weil ich dir des ja wie bereits erwähnt schon mehrfach zu erklären versucht hab, aber nun gut...
ich hab für die bilder mal den absoluten pfad gewählt.. damit das mal angezeigt werden kann...

HTML

<!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="en" lang="en">
<head>
	<title>dragondings</title>

<style type="text/css">
<!--
  body{
  background:#000000;
  color:#B4B4B4;
  }  

  .wrapper{
  width:600px;
  padding:10px;
  margin: 10px 10px 0 10px;
  } 
 
  h2{
  text-decoration: underline;
  margin-top:20px;
  }

  .teaser{
  float:left; 
  margin-right:20px;
  width:180px;
  }

  .teaser span{
  display:block;
  font-size: 1.8em
  }

  .teaser img{
  width:130px; 
  height:190px;

  }


-->
</style>
</head>


<body>


<div class="wrapper">
<h2>Dragonball</h2>


<div class="teaser">
<span>Die Legende
von Shenlong</span>
[img]http://dragonball17.dr.funpic.de/images/Cover/Movies/DB/B0001GGXT0.03.LZZZZZZZ.jpg[/img]
</div>   


<div class="teaser">
<span>Das Schloss
der Dämonen</span>
[img]http://dragonball17.dr.funpic.de/images/Cover/Movies/DB/B0002H3UNK.03.LZZZZZZZ.jpg[/img]
</div>   


<div class="teaser">
<span>Son-Gokus
erstes Tunier</span>
[img]http://dragonball17.dr.funpic.de/images/Cover/Movies/DB/B0002Y2YLM.03.LZZZZZZZ.jpg[/img]
</div>


<br style="clear:both;">


<h2>Dragonball Z</h2>


<div class="teaser">
<span>Die Legende
von Shenlong</span>
[img]http://dragonball17.dr.funpic.de/images/Cover/Movies/DB/B0001GGXT0.03.LZZZZZZZ.jpg[/img]
</div>   


<div class="teaser">
<span>Das Schloss
der Dämonen</span>
[img]http://dragonball17.dr.funpic.de/images/Cover/Movies/DB/B0002H3UNK.03.LZZZZZZZ.jpg[/img]
</div>   


<div class="teaser">
<span>Son-Gokus
erstes Tunier</span>
[img]http://dragonball17.dr.funpic.de/images/Cover/Movies/DB/B0002Y2YLM.03.LZZZZZZZ.jpg[/img]
</div>


</div>




</body>
</html>

Alles anzeigen

wie du erkennen kannst hab ich mal den ganzen schmu von element-styles rausgenommen und des in ein internes stylesheet ausgelagert...
kannste alles rauskopieren und in dein css-stylesheet reinpacken!

und so siehts dann danach aus:
http://home.arcor.de/synaptic/hilfe/dragondings.html

sejuma

Momentaner Code lt. Sebi17:

Zitat

<div style="float:left; margin-right:20px;">
<span style="display:block;" style="font-size: 1.8em">Die Legende
von Shenlong</span>

</div>

Das Rote kann gelöscht werden. Denn die Float-Angabe bewirkt automatisch das Blockelement.

Dann muss das img mit einem Leerzeichen geschlossen werden, bei allen anderen ebenso):
Statt

Zitat

[/color] [/b]

so:

Zitat

[/color] [/b]

Auch das
ist lt. XHTML-Deklaration falsch.
Richtig:

Code

Wenn das allein nichts hilft, dann cleare nochmal mit dem Div.
Es ist offensichtlich nur ein Problem im FF. Der IE stellt es richtig dar.

Sebi17

bei mir siehts wieder ganz anders aus ka vllt liegt es auch am phpkit oder so kann ja sein. so schauts aus! http://dragonball17.dr.funpic.de/include.php?pa…hp&contentid=34
auch der IE zeigt es nicht richtig an

sejuma

Deine Seite hat äußerst gravierende Fehler im Aufbau:
Da kommt irgendwo im unteren Drittel ein Doctype, der in die allerserste Zeile gehört.
Head und Body kommen jeweils zweimal vor, obwohl nur einmal zulässig.
Style-Angaben kommen im zweiten Head ebenfalls unzulässigerweise vor.

Du musst erst deine Seite ordentlich aufbauen, sonst kann man die Fehler nicht eingrenzen.
Danach Validieren und Fehler bereinigen.
So wie es momentan aussieht, sind deine Bilder viel zu groß. Da können schon rein platzmäßig keine drei Bilder dieser Größe nebeneinander angeordnet werden.

Arbeite dich aber erst mal mit dem Grundsätzlichen durch. Hier wird gezeigt wie's geht:
http://www.friedels-home.de/index.html?/Ku…L/44doctype.htm
http://www.friedels-home.de/index.html?/Ku…/02struktur.htm

Sebi17

ich hasb keine ahnung davon weil es ein cms system ist das phpkit heißt

synaptic

das problem bei dieser Sache ist das PHPKit.. sobald man html-code einfügt wird bei jedem Zeilenumbruch ein
eingefügt...
was demzufolge dann auch eine verschiebung der DIVs bringt...
naja problem ist jetzt gefixed

Sebi17

danke dir synaptic für deine hilfe und euch allen anderen danke ich auch für eure mühe

Tags