html Anfänger braucht Hilfe beim Aufbau einer responsiven Website

[-dAtA-TRoN-]

vielen lieben dank für deine schnellen antworten! -habe ich die "div's" richtig angelegt? -habe es so verstanden dass sie um die einzelnen buttons müssen.

    <div id="button_left">
        <img src="img/buttons/button_left_01.png" width="424" height="124" alt=""/>
    </div>
    <div id="dwld_button">
           <img src="img/buttons/dwld_button_01.png" width="572" height="124" alt=""/>
      </div>
    <div id="button_right">
        <img src="img/buttons/button_right_01.png" width="424" height="124" alt=""/>
    </div>
    <div style="clear:both;"></div>

 

[Tronjer]

Jo, so könnte man es machen. Aber du benötigst innerhalb #button_right noch einen clear unter dem image.

 

[-dAtA-TRoN-]

Jo, so könnte man es machen. Aber du benötigst innerhalb #button_right noch einen clear unter dem image.

also noch so ein "<divstyle="clear:both;"></div>"??? (oder wie hat das "clear" auszusehen?)

noch habe ich das clear nicht eingefügt. schaut jetzt erstmal so aus:

 

[Tronjer]

So, wie ich beschrieben habe:
https://jsfiddle.net/8n8sm9Lt

Wobei dieser Ansatz natürlich ghetto ist. In der Praxis würde ich das so nicht umsetzen.

 

[-dAtA-TRoN-]

Wobei dieser Ansatz natürlich ghetto ist.

sorry, ich kann's leider nicht besser...

 

[-dAtA-TRoN-]

so, mein code schaut nun so aus:

    <div id="button_left">
        <img src="img/buttons/button_left_01.png" width="424" height="124" alt=""/>
    </div>
   
    <div id="dwld_button">
           <img src="img/buttons/dwld_button_01.png" width="572" height="124" alt=""/>
      </div>
   
    <div id="button_right">
        <img src="img/buttons/button_right_01.png" width="424" height="124" alt=""/>
        <div style="clear:both;"></div>
    </div>
   
    <div style="clear:both;"></div>

css:

#button_left {
    float: left;
    width: 33%;
    display: block;   
    }

#dwld_button {
    float: left;
    width: 33%;
    margin: auto;
    display: block;
    }

#button_right {
    float: right;
    width: 33%;
    display: block;
    }

ergebniss:


was habe ich falsch gemacht?

 

[Tronjer]

was habe ich falsch gemacht?

Dir mein fiddle nicht richtig angeschaut. Ersetze mal die <span> durch images.

Sofern die drei Divs dann nicht in einem Elternelement liegen, dessen width kleines als der Viewport des Browsers und der Viewport mindestens so breit wie die drei images ist, sollte es funktionieren.

 

[-dAtA-TRoN-]

okay, habe ich das nicht in meinem html code gemacht? -klar, scheinbar nicht sonst hättest du mich nicht darauf hingewiesen. aber irgendwie weiß ich nicht genau was du meinst, sorry...

    <div id="button_left">
        <img src="img/buttons/button_left_01.png" width="424" height="124" alt=""/>
    </div>
  
    <div id="dwld_button">
           <img src="img/buttons/dwld_button_01.png" width="572" height="124" alt=""/>
      </div>
  
    <div id="button_right">
        <img src="img/buttons/button_right_01.png" width="424" height="124" alt=""/>
        <div style="clear:both;"></div>
    </div>
  
    <div style="clear:both;"></div>

zum thema viewport:
wie kann ich den einstellen? ich möchte ja die gesammte breite eines monitors ausnutzen. man sieht es ja an meinen buttons. ich kann die garnicht ganz an den rand verschieben. ein paar pixel vor dem rand springt der rechte button dann unter die anderen. hatte mir schon gedacht dass man das vielleicht irgendwo einstellen muss.

 

[Tronjer]

Funktioniert doch.
https://jsfiddle.net/8n8sm9Lt/2

 

[-dAtA-TRoN-]

.foo {
  float: left;
  width: 33%;
}

.foo img {
  display: block;
}

.middle {
  margin: auto;
}

.right {
  float: right;
}

Danke dass du mir das nochmal so genau erklärt hast :)!!! - mein problem ist dass du in deinem code vier dinge ansprichst und nicht drei. "middle" und "right" verstehe ich aber welches ist das linke bild (ja, ich weiß -blöde frage sicher )? kann es sein das die irgendwie mit einem der beiden verbleibenen codes die klasse "img" an sich ansprichst?

also die beiden hier kann ich nicht richtig einordnen:

[HTML].foo {
  float: left;
  width: 33%;
}

.foo img {
  display: block;

aber nochmals danke für deine hilfe! ;)

 

[Tronjer]

.foo betrifft alle Elemente mit dieser CSS-Klasse
.foo img betrifft alle images innerhalb .foo
Das linke Bild stehtt sowieso links im Container, da muss nichts geändert werden

 

[-dAtA-TRoN-]

wenn du dir oben meinen code nochmal anschaust kannst du sehen dass ich keine klassen sondern ID's benutzt habe. dann kann ich das garnicht so machen wie du mir das gezeigt hast, oder kann ich das trozdem irgendwie auf meinen code ummünzen?

 

[-dAtA-TRoN-]

ach, dann baue ich das jetzt um! :)

 

[-dAtA-TRoN-]

.button_left {
    float: left;
    width: 33%;
    display: block;   
    }

.dwld_button {
    margin: auto;
    }

.button_right {
    float: right;

ich habe jetzt aus jedem button eine einzelne klasse gemacht. aber ich habe auch nur diese drei klassen. ich weiß einfach nicht wie ich deinen code richtig übertrage.

habe mein projekt jetzt mal auf google drive hochgeladen. wenn du so nett bist kannst du ja gerne mal drüber schauen (ich hoffe du bekommst keinen ausraster wenn du meine "nicht vorhandene code-struktur siehst )

download:
https://drive.google.com/folderview?id=0B9aqKbonFBvFeUtEOC1sZ0ZPMEk&usp=sharing

 

[Tronjer]

Ich habe eine gemeinsame Klasse für gemeinsame Eigenschaften verwendet. Schau dir an, wie .foo mit den HTML-Tags korrespondiert.

Aber ich kann dir die CSS Grundlagen nicht in Forenbeiträgen vermitteln. So etwas eignet man sich im Selbststudium über einen längeren Zeitraum an.

 

[-dAtA-TRoN-]

ja klar, das verstehe ich. ich glaube jetzt aber auch deinen code verstanden zu haben. du hast eine "oberklasse" um die einzelnen bilder erstellt welche selber nocheinmal in individuelle klassen gepackt sind, richtig?

 

[Tronjer]

jup.

 

[-dAtA-TRoN-]

sooo, habe es jetzt exakt so umsetzen können wie du's mir nahegelegt hast. und: es sieht auch schonmal ganz ordentlich aus (DANKE). Aber: wie bekomme ich denn nun den mittleren button un die mitte der website und den rechten button ganz nach rechts?



html:

<div class="navigation">
        <img class="button_left" src="img/buttons/button_left_01.png" width="424" height="124" alt=""/>
    </div>

    <div class="navigation">
           <img class="dwld_button" src="img/buttons/dwld_button_01.png" width="572" height="124" alt=""/>
      </div>

    <div class="navigation">
        <img class="button_right" src="img/buttons/button_right_01.png" width="424" height="124" alt=""/>
        <div style="clear:both;"></div>
    </div>

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

css:

.navigation {
    float: left;
    widht: 33%;
    }

.navigation img {
    display: block;
    }

.dwld_button {
    margin: auto;
    }

.button_right {
    float: right;
    }

so schaut es jetzt aus:


so soll es aussehen:

 

[B3nnoX]

.navigation {
 float: left;
 widht: 33%;
 }

da ist nen schreibfehler drin, es heißt width und nicht widht

 

[-dAtA-TRoN-]

da ist nen schreibfehler drin, es heißt width und nicht widht

okay das war's, danke dir (wie peinlich).

jetzt sieht es so aus:


wie bekomme ich denn jetzt die äußeren buttons ganz an den rand?