Layout-Problem

chrisT2k · 06.11.2009

Hallo,
verzweifel gerade ein wenig an meiner Seite. Setze mich ein wenig mit CSS auseinander und versuche gerade die Seite meiner Hobbymannschaft an CSS anzupassen.

Bis jetzt habe ich den Header, Content und Footer ganz gut hinbekommen. Jedoch weiß ich nicht, wie ich im Content die Boxen mittels CSS hinbekomme.. Könnte mir jemand helfen bzw. einen denkanstoß geben?

Hier ein kurzer Preview..

Würde mich über Hilfe freuen ..

Gruß,
Chris

Doitsu · 06.11.2009

AW: Layout-Problem

Also ich weiss nun nicht, was genau du willst?

willst du, das es so aussieht wie auf dem Screen, oder sieht es so aus? Wenn es so ausschaut, was willst du daran aendern?

CrazyLopp · 06.11.2009

AW: Layout-Problem

Ich glaube eher er will das es so aussieht...

Mfg
Crazylopp

chrisT2k · 06.11.2009

AW: Layout-Problem

hab mal meine "Fortschritte" (bin noch gaaaaanz am Anfang) hochgeladen.. auf kann man diese einsehen.. aber wieso sieht es im FF bzw IE anders aus, als in meinem Editor? (da war alles so, wie es sein sollte ..

)

Weswegen ich eigentlich gefragt habe .. ich weiß nicht, mit welchen Befehlen ich am besten den Content-Bereich mit HTML/CSS darstelle (so wie er da aussieht - nicht Inhaltlich)..

GoMeZ · 06.11.2009

AW: Layout-Problem

Ojeh,

ich denke, Du solltest Dich erst einmal mit den Grundlagen von HTML/CSS beschäftigen, bevor Du uns hier zu jedem Fitzelchen Löcher in den Bauch fragst ...
Meine ehrliche Meinung, denn ohne Grundlagen wird dat nix, das sach ich Dir gleich.

Gruß, der GoMeZ

Doitsu · 06.11.2009

AW: Layout-Problem

Hm, habe das jetzt mal so gemacht - schau dir den Quelltext in ruhe an, pass ihn an & wenn du dann noch was siehst, schau auf CSS 4 You - The Finest in Stylesheets ob du da was findest - wenn nicht, frag ..

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

 <title>..</title>
<style type="text/css">
<!--
#content {
  float:left;
  width:85%;
}
#header {
  height:60px;
  background:#999;
  border:#000 solid 1px;
}
#news {
  float:left;
  width:60%;
  background:#DDD;
  border:#000 solid 1px;
}
#match {
  height:140px;
  border:#000 solid 1px;
}

#right-box {
  float:right;
  width:38%;
  border:1px solid #000;
}
#match-list {
  margin:10px 0px;
  height:150px;
  border:#000 solid 1px;
}
#scorer-list {
  margin:10px 0px;
  height:150px;
  border:#000 solid 1px;
}
#poll {
  margin:10px 0px;
  height:150px;
  border:#000 solid 1px;
}
#footer {
  height:50px;
  background:#999;
  border:#000 solid 1px;
}
#adv {
  width:14%;
  background:#999;
  border:#000 solid 1px;
  float:right;
}
.box {
  margin:10px 0px;
}
.box img {
  width:150px;
  height:100px;
  float:left;
}
.desc {
  float: right;
  overflow:auto;
  width:70%;
  height:100px;
  border:1px solid #000;
}
#match-list ul {
  padding-left:16px;
  border:1px solid #F00;
}
#match-list li {
  border-bottom:1px dotted #00F;

}
#scorer-list ul {
  padding-left:16px;
}
#scorer-list li {
  border-bottom:1px dotted #00F;
}
.clear {
  clear:both;
  line-height:1px;
  font-size:1px;
}
-->
</style>
</head>
<body>
<div id="content">
  <div id="header">header</div>
  <div id="news">
    <div id="match">
      Spiele
    </div> <!-- end #match -->
    <div class="box">
      <img src="http://s7.directupload.net/images/091106/xh3wjm6r.jpg" />
      <div class="desc"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.   

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,
      </div> <!-- end .desc -->
    <br class="clear" />
    </div> <!-- end .box -->

    <div class="box">
      <img src="http://s7.directupload.net/images/091106/xh3wjm6r.jpg" />
      <div class="desc"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.   

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,
      </div> <!-- end .desc -->
    <br class="clear" />
    </div> <!-- end .box -->
    <div class="box">
      <img src="http://s7.directupload.net/images/091106/xh3wjm6r.jpg" />
      <div class="desc"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.   

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,
      </div> <!-- end .desc -->
    <br class="clear" />
    </div> <!-- end .box -->
  </div><!-- end .news -->
  <div id="right-box">
    <div id="match-list">
      <ul>
        <li> Spiel 1</li>
        <li> Spiel 2</li>
        <li> Spiel 3</li>
        <li> Spiel 4</li>
      </ul>
    </div> <!-- end #match-list -->
    <div id="scorer-list">
      <ul>
        <li> Spieler 1</li>
        <li> Spieler 2</li>
        <li> Spieler 3</li>
        <li> Spieler 4</li>
      </ul>
    </div> <!-- end #scorer-list -->
    <div id="poll">
      Umfrage
    </div> <!-- end #poll -->
  </div> <!-- end #right-box -->

  <br class="clear" />
  <div id="footer">footer</div>
</div> <!-- end #content -->
<div id="adv">Werbung</div>
</body></html>

chrisT2k · 06.11.2009

AW: Layout-Problem

vielen Dank für die Hilfe. Hab mich aber nochmal dran gesetzt und es nun ganz anders angefangen.
Hab jetzt die einzelnen Elemente mit position zugewiesen..
Jetzt habe ich aber das Problem (habe meine Box eingefügt), dass der Content nicht mitzieht (nur wenn ich Zeilenumsprünge einfüge oder so) .. ist das normal?

Diakon · 06.11.2009

AW: Layout-Problem

Probier mal vor dem Ende des content - divs das hier:

<div id="box" ></div>

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

</div>

natürlich auch als klasse oder id machen nur hier damit du es siehst direkt eingefügt. Der Content div, darf dann auch keine feste höhe haben.

chrisT2k · 06.11.2009

AW: Layout-Problem

danke .. aber hat nicht geholfen .. hab jetzt vorerst mal paar Zeilenumsprünge eingefügt .. aber das kann's ja auch nicht auf dauer sein... sonst noch eine Idee? :S

Doitsu · 06.11.2009

AW: Layout-Problem

Mit margin verschieben ..
(wobei ich es nicht mit position machen wuerde)

Hab gerade mal in deinen Quelltext geschaut, halte dich an deinen Doctype - du benutzt eher XHTML, nicht HTML.

http://validator.w3.org/check?uri=h...(detect+automatically)&doctype=Inline&group=0

chrisT2k · 06.11.2009

AW: Layout-Problem

oh danke

hab mir das Gerüst vom Editor erstellen lassen, deswegen der falsche doctyp, aber den kann ich ja flott ändern..

wieso nicht mit position? könnte das Probleme geben? :X
mit margin bringt mir ja nicht mehr viel, der Content-Background ist ja da, wo er sein soll, nur verschiebt er sich nicht, wenn ich die Boxen mit nem neuen <div> einfüge .. :S

Doitsu · 06.11.2009

AW: Layout-Problem

Absolute Position raus genommen, mir Margin verschoben ..

Code:

#ls-box {
  background: url(../images/ls-box.png) no-repeat;
  margin: 3px;
  width: 548px;
  height: 159px;
}
#bgh {
  background: url(../images/bgh.png) no-repeat;
  margin: 5px 0px 0px -3px;
  width: 554px;
  height: 39px;
}

/Edit:
Weil es mit Position staendig Schwierigkeiten gibt, jedenfalls bei mir. ^-^'

Ausserdem muss man alles genau anpassen (wegen anderen Bildschirmaufloesungen etc.. wird das ziemlich schwer)

/Edit 2:
& noch was: du hast massig ueberfluessige div-Tags drin, du machst immer 2 divs gleichzeitig auf, das solltest du auch in einem zusammenfassen koennen ..