(HTML und CSS) Wie Umsetzen

Cool Master · 16. Juni 2011

Moin also ich soll eine Webseite umsetzen an sich kein problem. Allerdings will die Site nicht so wie ich will

Also im Anhang seht ihr wie es aussehen soll und wie es aussieht. Ich steh gerade echt auf dem Schlauch wie ich das am besten umsetze evtl. habt ihr da eine bessere Idee als ich.

Hier mal noch der HTML und CSS Code:

Code:

  <div id="News">{% placeholder "News" %}
  <div id="News_bg">WAS HAT SICH GETAN?</div>
  </div>
  <div id="Messe">{% placeholder "Messe" %} 
  <div id="Messe_bg">WANN IST WAS LOS?
  </div>
  </div>
  <div id="Jobs">{% placeholder "Jobs" %}
  <div id="Jobs_bg">WO KANN ICH ARBEITEN?
  </div>
  </div>
  <div id="Weiterbildung">{% placeholder "Weiterbildung" %}
  <div id="Weiterbildung_bg">WIE BILDE ICH MICH WEITER?</div>

Code:

#News{ /* 1. Container Rechts oben */
    float: right;
    width: 300px;
    height: 165px;
    background: #white    ;
    margin-top: -325px;
    margin-right: 45px;
    position:absolute;
    left: 920px;
    }

#News_bg{ /* 1. Rechts Hintergrund */
    float: right;
    background: #8b8c8e;
    width: 280px;
    height: 24px;
    color:#FFFFFF;
    position:absolute;
    line-height: 25px;
    font-size:14px;
    text-align: left;
    text-indent: 15px;
    top: 0px;
    margin-left: 12px;
    }

#Messe{  
    float: right;
    width: 300px;
    height: 240px;
    background: #000000;
    margin-top: -140px;
    margin-right: 45px;
    border: 2px solid lightgray;
    position:absolute;
    left: 920px;    
    }
    
#Messe_bg{
    float: right;
    background: #8b8c8e;
    width: 280px;
    height: 24px;
    margin-right:10px;
    margin-top: 6px;
    color:#FFFFFF;
    line-height: 25px;
    font-size:14px;
    text-align: left;
    text-indent: 15px;
    }

#Jobs{
    float: right;
    width: 300px;
    height: 80px;
    background: white;
    margin-top: 125px;
    margin-right: -300px;
    border: 2px solid lightgray;
    position:absolute;
    left: 920px;
    }
    
#Jobs_bg{
    float: right;
    background: #8b8c8e;
    width: 280px;
    height: 24px;
    margin-right:10px;
    margin-top: -120px;
    color:#FFFFFF;
    line-height: 25px;
    font-size:14px;
    text-align: left;
    text-indent: 15px;
    }

#Weiterbildung{
    float: right;
    width: 300px;
    height: 100px;
    background: white;
    margin-top: 230px;
    margin-right: -300px;
    border: 2px solid lightgray;
    position:absolute;
    left: 920px;    
    }
    
#Weiterbildung_bg{
    float: right;
    background: #8b8c8e;
    width: 280px;
    height: 24px;
    margin-right:10px;
    margin-top: 6px;
    color:#FFFFFF;
    line-height: 25px;
    font-size:14px;
    text-align: left;
    text-indent: 15px;
    }

Die "Placeholder" Tags sind für django-cms womit das ganze mit Inhalt befüllt wird. WIe kann ich das am besten umsetzen bzw. wie macht ihr sowas? Wäre auch nicht abgeneigt wenn ihr mit ein wenig code um euch werft

CSS3 ist auch erlaubt sollte es dadurch leichter gehen.

Grüße

Xetoxyc · 16. Juni 2011

so wie ich das seh is das
du musst den text jeweil unterhalb der überschrift wieder in nen container packen und den darunter hängen dann sollte es funktionieren

mustermen · 16. Juni 2011

Moin ich würde mit ul arbeiten, weil du so dir die DIV Suppe sparst und es übersichtlicher wird!

HTML:

 <div id="News">
 <h2>Was hat sich getan</h2>
  <ul>
   <li>Zum blbalbnasndjasldjasjdasdsja >>Mehr>> </li>
   <li>Zum 22323asdasdsadasdsad>>Mehr>> </li>
  </ul>
 </div>

Cool Master · 17. Juni 2011

Joar schon mal danke für eure tips bin noch für alles andere offen^^

sverebom · 17. Juni 2011

Warum muss das alles floaten?
So wie ich das sehe reicht eine normale Liste aus. Die "mehr"-links müssen natürlich nach rechts floaten, genau wie die Bilder. Aber damit die nachfolgenden Zeilen normal dargestellt werden, sollte ein

li { clear: both }

ausreichen, damit die floats da bleiben, wo sie hin gehören. So wie ich das sehe, komme sich nämlich einfach nur die floats in die quere (fiese Sache, sie immer gleich so böse und auch erfahrene Designer schnallen nicht immer sofort, was da eigentlich passiert). Alternativ könntest du den Elementen auch feste Größen geben. Dann haben sie einfach keinen Platz, um ineinander zu floaten. Das bietet sich aber hier wahrscheinlich nicht an, da die die Inhalte ja dynamisch erzeugt werden und die Inhalte zudem auch sehr unterschiedlich sind.

Abgesehen davon scheinst du auch viel zu viel Code für diese eigentlich einfache Angelegenheit zu benötigen.

Suche

(HTML und CSS) Wie Umsetzen

Cool Master

Fleet Admiral

Xetoxyc

Lieutenant

mustermen

Gast

Cool Master

Fleet Admiral

sverebom

Vice Admiral

Ähnliche Themen