Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „CSS Box will nicht klappen?“

lala0808

Nicht mehr ganz neu hier

Hallo,

ich habe aktuell ein CSS Problem bei dem ich alleine auch nach vielen Anläufen einfach nicht weiterkomme.

Ich will auf meiner Webseite zwei Boxen nebeneinander platzieren. Das klappt einwandfrei. Nun gibt es rechts und links eine Box. In beide Boxen packe ich einen längeren Text (Artikelbeschreibung). Nun kommt das Problem.

Über beide Boxen will ich jeweils noch eine Box machen, wo der Titel der Artikelbeschreibung hineinkommen soll.

Das ist mein CSS Code:

Code:
#Powder {
     
        width: 310px;
        height: 50px;
    background-color: #c1a55e;
        border: 2px solid #000000;
        
        

}


#Andere {
     
        width: 310px;
        height: 50px;
    background-color: #ffffff;
        border: 2px solid #000000;
        
       float: right;

}



#Verkauf {
      float: left;
        width: 310px;
    background-color: #ffffff;
        border: 2px solid #000000;
        margin-bottom: 18px;
        





  padding-top:3px;
  padding-left:3px;
  padding-right:3px;
  padding-bottom:3px



}



#Verkauf2 {
      float: right;
        width: 310px;
    background-color: #ffffff;
        border: 2px solid #000000;
        margin-bottom: 18px;
            


  padding-top:3px;
  padding-left:3px;
  padding-right:3px;
  padding-bottom:3px



}

Das hier ist der HTML Code:

Code:
<div id="Powder">

Titel 1
</div>








<div id="Verkauf">

Artikelbeschreibung 1

</div>

<div id="Andere">

Titel 2

</div>

<div id="Verkauf2">

Artikelbeschreibung 2
</div>

Leider verschiebt sich alles komisch seit ich die zwei Titel Boxen hinzugefügt habe.

Sieht vielleicht jemand das Problem? Vielen Dank!

Beste Grüße!
 

Myhar

Hat es drauf

AW: CSS Box will nicht klappen?

Wieso verwendest du lauter divs mit unterschiedlichen IDs für dein Markup? Hier wären doch Überschriften + Paragraphen (oder eventuell Listen, je nachdem, was in deiner Produktbeschreibung steht) sinnvoll. Damit du zwei Produkte nebeneinander bekommst kannst du mit einem div arbeiten.
HTML:
<div class="leftProduct">
<h3>Produktname</h3>
<p>Das ist das allerbeste Produkt wo nur gibt</p>
</div>

<div class="rightProduct">
<h3>Alternatives Produkt</h3>
<p>Leider ist das Produkt nicht so super wie das andere aber kaufen Sie es trotzdem!</p>
</div>

und das CSS dafür:
HTML:
.leftProduct{float:left;width:40%}
.rightProduct{float:right;width:40%}

Das ganze ist nicht getestet, aber so in etwa sollte es klappen. Clearen bei einem eventuell nachfolgendem Element nicht vergessen ;-)

L. G.
 

lala0808

Nicht mehr ganz neu hier

Vielen Dank, für deine Antwort. Leider ist das aber was ganz anderes. Ich habe mal einen Screenshot gemacht:

http://www.abload.de/img/boxen4chr.jpg

So will ich das. Bei meinem Code war das ja auch schon genau das was ich wollte, nur das es eben aus einem mir unerklärlichen Grund zu Verschiebungen kommt?

Beste Grüße!

Ich habe es nun irgendwo hin bekommen... Nach paar Stunden :D
 
Zuletzt bearbeitet von einem Moderator:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.158
Beiträge
2.581.880
Mitglieder
67.226
Neuestes Mitglied
Alec168
Oben