• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Clear: both | Riesen Abstand darunter

A

aJunkie

Mitglied
Hallo,

die Profile der Künstler auf meiner Seite scheinen okay zu sein, zumindest im Firefox und IE (verwunderlich), aber Google Chrome zieht den Text, der unter dem Profilbild und dem MySpace Player eigentlich ist, in diese beiden Elemente rein.
Bitte selbst sehen via Google Chrome.

Da das Profilbild links und der MySpace Player rechts geflotet sind, müsste man natürlich hier clearen. Dieses funktioniert, aber clear:both verursacht darunter dann einen leeren Abstand von ca. 200px.


PHP: 
clearboth {
clear: both;
}
Ich hatte dem CSS schon line-height, etc. hinzugefügt, aber ohne Wirkung.

Kein Unterschied zwischen br class oder div class.
 
Zuletzt bearbeitet:
Was passiert wenn du die Standart Browserformatierungen zurücksestztst?

Code: 
* { 
  margin:0; 
  padding:0; 
 }

Ansonsten bräuchten wir den vollständigen Code.
 
CSS:
PHP: 
body {
    padding:0;
    margin:0 auto;
    color:#000000;
    font-family: verdana, tahoma, sans-serif;
    font-size: 12px;
    background-color: #6DBFFB;
    background-image: url(/img/hintergrundicon.jpg);
    background-repeat: repeat;
}
a {
    text-decoration:none;
    background-color:inherit;
    font-weight:bold;
    color:#286ea0;
}
a:hover {
    background-color:inherit;
    text-decoration:underline;
    color:#303030;
}
a img {
    border:0;
}
right {
    text-align:right;
}
h1 {
    margin:5px 0 6px 0;
    font-size:18px;
    letter-spacing:1px;
    font-weight:bold;
    line-height:40px;
    text-align:center;
    background:#ffffff url(/img/h1.png) repeat-x;
    color:#000000;
}
h2 {
    margin:4px 0 3px 0;
    font-size:17px;
    letter-spacing:0;
    font-weight:bold;
    background:#ffffff url(/img/h2.png) repeat-x;
    line-height:28px;
    text-align:center;
}
h3 {
    font-size:15px;
    font-weight:bold;
    text-align:center;
}
hr {
    border:0;
    border-top:solid 2px #6DBFFB;
}
p {
    line-height:18px;
}
p2 {
    line-height:16px;
}
right {
    text-align:right;
}
table td {
    padding:1px 0 1px 0;
}
#title {
    width:945px;
    height:126px;
    margin-top:8px;
    margin-right:auto;
    margin-left:auto;
    margin-bottom:4px;
    border:4px solid #ffffff;
}
#container {
    margin:0 auto;
    width:930px;
    padding:3px;
    position:relative;
    background:#ffffff url(/img/unten-rechts.jpg) bottom left no-repeat;
    color:#000000;
    border:10px solid #000000;
}
#container2 {
    margin:0 auto;
    width:1150px;
    padding:3px;
    position:relative;
    background:#ffffff;
    color:#000000;
    border:10px solid #000000;
}
#werbung {
    color:#000000;
    background-color:#ffffff;
    width:120px;
    border:0px #000000 solid;
    height:600px;
    text-align:center;
}
#werbung2 {
    background-color:#FFF;
    color:#000000;
    width:120px;
    border:4px #000000 solid;
    height:auto;
    min-height:605px;
    position:absolute;
    right:948px;
    top:-4px;
    text-align:center;
}
#release {
    background:#ffffff;
    color:#000000;
    position:absolute;
    left:947px;
    top:-4px;
    padding:1px;
    width:auto;
    text-align:center;
    border:4px #000000 solid;
    height:auto;
    clear: both;
    display: block;
}
#release img {
    margin-top:5px;
    margin-bottom:5px;
    border:0;
}
#sidebar {
    float:left;
    width:95px;
    margin:0 auto;
}
#sidebar2 {
    float:right;
    width:95px;
    margin:0 auto;
}
#main {
    width:730px;
    margin:0 auto;
    font-size:12px;
    min-height:700px;
    height:auto !important;
    height:700px;
}
#myspace {
    width:425px;
    height:350px;
    float:right;
    border:0;
    margin:0 0 10px 0;
}
#pic {
    width:auto;
    height:auto;
    float:left;
    border:0;
    margin:0 0 10px 0;
}
#menu {
    width: 100%;
    background: #ffffff;
    color: #ffffff;
    font-family: Verdana;
    font-size: 12px;
    line-height: 24px;
    float:left;
    margin:0 auto;
}
* {
    margin: 0;
    padding: 0;
}
#menu ul {
    float: left;
    width: 130px;
    list-style-type: none;
}
#menu h3 {
    font-size: 12px;
    text-align: center;
    color: #ffffff;
    border: 2px solid #ffffff;
    background: #000000;
}
#menu a {
    text-decoration: none;
    display: block;
    text-align: center;
    background: #000000;
    border: 2px solid #ffffff;
    color: #ffffff;
}
#menu a:hover {
    background-color:#6DBFFB;
    color:#000000;
    border:2px solid #000000;
}
#menu li {
    position: relative;
}
#menu ul ul {
    position: absolute;
    z-index: 2;
    display: none;
}
#menu ul li:hover ul {
    display: block;
}
* html #menu ul li {
    float: left;
    width: 100%;
}
*+ html #menu ul li {
    float: left;
    width: 100%;
}
* html body {
    behavior: url(/csshover3-source.htc);
    font-size: 100%;
}
* html #menu ul li a {
    height: 10%;
}
#menu a.direkt:link {
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    color: #ffffff;
    border: 2px solid #ffffff;
    background: #000000;
}
#menu a.direkt:hover {
    color: #000000;
    background: #6DBFFB;
    border: 2px solid #000000;
}
.menu2 {
    display:block;
    text-align:center;
    float:none;
    margin:0 auto;
    width:95px;
    height:34px;
    line-height:34px;
    font-size:12px;
    font-weight:bold;
    background:#ffffff url(/img/button.jpg) no-repeat;
    color:#6DBFFB;
}
.menu2:hover {
    color:#ffffff;
    background-color:#ffffff;
    text-decoration:none;
}
.menu3 {
    display:block;
    text-align:center;
    width:95px;
    float:none;
    margin:0 auto;
    line-height:34px;
    height:34px;
    font-size:12px;
    font-weight:bold;
    background:#ffffff url(/img/button1.jpg) no-repeat;
    color:#F9C5DB;
}
.menu3:hover {
    color:#ffffff;
    background-color:#ffffff;
    text-decoration:none;
}
.menu4 {
    display:block;
    text-align:center;
    float:none;
    margin:0 auto;
    width:95px;
    height:34px;
    line-height:34px;
    font-size:12px;
    font-weight:bold;
    background:#ffffff url(/img/button.jpg) no-repeat;
    color:#ffffff;
}
.menu4:hover {
    color:#6DBFFB;
    background-color:#ffffff;
    text-decoration:none;
}
#shout {
    float: left;
    width: 330px;
    border:0;
    height: auto;
    margin: 10px 0 10px 0;
}
#video {
    float: right;
    width: 330px;
    height: 275px;
    border:0;
    margin: 10px 0 10px 0;
}
.credits {
    margin-bottom:0;
    margin-left:0;
    margin-right:0;
    font-size:11px;
    background-color:inherit;
    color:#aaaaaa;
    text-align:center;
}
.credits a {
    background-color:inherit;
    color:#aaaaaa;
}
small {
    font-size:11px;
}
.center {
    text-align:center;
}
#unavi {
    clear:both;
    font-size:11px;
    color:#808080;
    text-align:center;
}
#unavi a {
    color:#696969;
}
#footer {
    clear:both;
    font-size:12px;
    text-align:center;
}
.clearboth {
    clear: both;
}
.artist {
    float:left;
    width:33%;
    padding-bottom:10px;
    margin:0 auto;
    text-align:center;
    display:block;
}
.artist img{
    border:#000000 1px solid;
}
.youtube {
    width:50%;
    float:left;
    border:0;
    margin:0 auto;
    padding-bottom:5px;
    padding-top:5px;
    text-align:center;
    display:block;
}
Es geht um 'pic' und 'myspace', die gefloatet sind.
Darunter kommt eine Tabelle.

Edit:
PHP: 
    <div id="pic"> <img src="--.JPG" alt="--" width="259" height="350" /></div>
    <div id="myspace">
      --
    </div>
    <table width="100%" border="0">
      <tr>
        <td width="30%" valign="top"><p><strong>Name:</strong></p>
          <p><strong>Geburtsdatum:</strong></p>
          <p><strong>Wohnort:</strong></p>
          <p><strong>meladie's Liebhaber seit:</strong></p>
          <p>&nbsp;</p>
          <p><a href="http://www.myspace.com/--" target="_blank">MySpace</a></p>
          <p>&nbsp;</p></td>
        <td width="70%" valign="top"><p>--</p>
          <p>Datum</p>
          <p>..</p>
          <p>25.11.2009</p></td>
      </tr>
      
    </table>
 
Zuletzt bearbeitet:
Ich sehe dass du der Tabelle gar keine Klasse zugewiesen hast für clear both. Das ist ja das Problem, dass der Inhalt der Tabelle nach oben gezogen wird.

Mach mal anstatt:
PHP: 
<table width="100%" border="0">

Das hier:
PHP: 
<table width="100%" border="0" class="clearboth">

Edit: also auch wenn du den Abstand von 200px hast, das Clear Both muss sein. Danach schauen wir weiter. Hast du tatsächlich den Abstand?
 
Zuletzt bearbeitet von einem Moderator:
Okey, jetzt folgendes:

Probier mal den myspace ID auch left zu floaten. Den abstand nach rechts lachst du dann mit margin-left:---px;

Wenn der untere Abstand noch vorhanden ist liegt das Problem irgendwo in den anderen CSS tags
 
Mir ist irgend wie ein Rätsel wieso du nur eine Table Row brauchst :D
Eigentlich sollte ds doch eher so sein oder?
HTML: 
    <table>
      <tr>
        <td>Geburtsdatum:</td>
        <td>10.04.1989</td>
      </tr>
      <tr>
        <td>Wohnort:</td>
        <td>Göttingen</td>
      </tr>
      usw
    </table>

Zu deinem eigentlich Problem habe ich leider auch keine Lösung gefunden. Echt merkwürdig
 
Zuletzt bearbeitet:
Das erste <br /> in #main rutscht unter das gefloatete #menu.
Durch das clear verhinderst du das und der Umbruch wird sichtbar.

Edit:
Ich hatte einen anderen Abstand im Auge.
Du kannst in deinem jetzigen Aufbau kein clear innerhalb von #main benutzen. Das clear wirkt sich auch auf sidebar und sidebar2 aus (suche: globales clear).

Wenn die Reihenfolge im html so bleiben muß solltest du innerhalb von #main einen weiteren Container schreiben der float und width bekommt.
(suche: Block Formatting Context).

Du könntest auch die Spalten von links nach rechts ins html schreiben und alle Spalten floaten.
Das wäre auch eine gute Gelegenheit um das html aufzuräumen.
 
Zuletzt bearbeitet:
Die Sidebars sind doch außerhalb vom #main.

Ich verstehe auch nicht, woran das liegt.
Am Margin vom myspace und pic liegt es auch nicht.
 
Sansire hat eine Lösung für dich. Es funktioniert:

Ohne DIV

HTML: 
  <img alt=2Mirror 
src="meladie_de%20%20German%20RnB,%20Rap,%20HipHop,%20Pop%20&amp;%20Soul%20-%20Freedownloads-Dateien/2Mirror.jpg" 
width=259 height=350>
  <EMBED 
src=http://musicservices.myspace.com/Modules/MusicServices/Services/Embed.ashx/ptype=4,ap=0,plid=39072,artid=2044485,skinid=16,profid=183617273 width=425 height=350 class="myspace_right" type=application/x-shockwave-flash></EMBED>

So. Wie du siehst habe ich an EMBED noch eine Klasse hinzugefügt class="myspace_right"

Code: 
.myspace_right { margin-left:40px;
  }

Aus diesem Grund Margin left 40px, damit er nach rechts geht. Bei einem Float left oder right passiert halt das alt bekannte Problem.

Die CSS Regeln #pic und #myspace kannst du LÖSCHEN.

Edit: Es braucht gar kein DIV !! Text leicht korrigiert.
 
Zuletzt bearbeitet von einem Moderator:
Sansire,
irgendwann wird immer ein clear in einem Bereich mit komplexem Inhalt gebraucht.
Um das Verständnis von float und clear kommst du nicht herrum wenn du Webdesign anbieten willst.

@aJunkie,
Wenn es dir nur um das Funktionieren dieser Webseite geht, du nichts am html ändern möchtest und dich auch sonst nicht mit css beschäftigen möchtest, füge für #main overflow: hidden; zu.
Für den IE6 noch zoom: 1;
Diese Lösung schränkt dich aber in der Gestaltung ein und kann in älteren Browser zu Problemen führen.
 
Zuletzt bearbeitet:
Ich weiss dass meine Lösung nich sehr Webfreundlich ist. Bei meinem Beispiel wird es bei Chrome auch so angezeigt wie bei Firefox und IE. Er entscheidet was er schlussendlich uploadet.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben