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

Frage Korrektur

rhea

Neues Mitglied
Huhu,

ich bin absolute Anfängerin, möchte aber eine Webseite für die Zucht meiner Bekannten erstellen (bzw. bin gerade dabei), jetzt haut aber etwas überhaupt nicht hin.

Würde mir das einer korrigieren?

HTML:
<html>
    <head>
        <title>Zuchtböckchen</title>
        <link rel="stylesheet" href="screen.css">
    </head>


    <body>
        <div align="center"><img src="logo.png" alt="Bild: Logo Day Dream" width="600" height="250"/></div>
        <div class="container3">
            <div class="saufoto">
                <img src="alice 1.jpg" heigth="200" width="300"/>
                </br>
                </br>
                <img src="alice 2.jpg" class="2" heigth="200" width="300"/>
            </div>
            <div class="all">
                <div class="boxsauname">
                    <span class="sauname">Zorro</span>
                    </br>
                    <span class="zuchtname"> aus Walding</span>
                </div>
                <div class="boxsautext">
                    </br>
                    <span>Sheltie, Creme-Weiß
                    </br>
                    * 05.10.2014</span>
                    </span>
                </div>
            </div>
        </div>
        <div class="container4">
            <div class="saufoto">
                <img src="alice 1.jpg" heigth="200" width="300"/>
                </br>
                </br>
                <img src="alice 2.jpg" class="2" heigth="200" width="300"/>
            </div>
            <div class="all">
                <div class="boxsauname">
                    <span class="sauname">Zorro</span>
                    </br>
                    <span class="zuchtname"> aus Walding</span>
                </div>
                <div class="boxsautext">
                    </br>
                    <span>Sheltie, Creme-Weiß
                    </br>
                    * 05.10.2014</span>
                    </span>
                </div>
            </div>
        </div>
        <div class="container3">
            <div class="saufoto">
                <img src="alice 1.jpg" heigth="200" width="300"/>
                </br>
                </br>
                <img src="alice 2.jpg" class="2" heigth="200" width="300"/>
            </div>
            <div class="all">
                <div class="boxsauname">
                    <span class="sauname">Zorro</span>
                    </br>
                    <span class="zuchtname"> aus Walding</span>
                </div>
                <div class="boxsautext">
                    </br>
                    <span>Sheltie, Creme-Weiß
                    </br>
                    * 05.10.2014</span>
                    </span>
                </div>
            </div>   
        </div>
        <div class="container4">
            <div class="saufoto">
                <img src="alice 1.jpg" heigth="200" width="300"/>
                </br>
                </br>
                <img src="alice 2.jpg" class="2" heigth="200" width="300"/>
            </div>
            <div class="all">
                <div class="boxsauname">
                    <span class="sauname">Zorro</span>
                    </br>
                    <span class="zuchtname"> aus Walding</span>
                </div>
                <div class="boxsautext">
                    </br>
                    <span>Sheltie, Creme-Weiß
                    </br>
                    * 05.10.2014</span>
                    </span>
                </div>
            </div>       
        </div>   
        <div class="container3">
            <div class="saufoto">
                <img src="alice 1.jpg" heigth="200" width="300"/>
                </br>
                </br>
                <img src="alice 2.jpg" class="2" heigth="200" width="300"/>
            </div>
            <div class="all">
                <div class="boxsauname">
                    <span class="sauname">Zorro</span>
                    </br>
                    <span class="zuchtname"> aus Walding</span>
                </div>
                <div class="boxsautext">
                    </br>
                    <span>Sheltie, Creme-Weiß
                    </br>
                    * 05.10.2014</span>
                    </span>
                </div>
            </div>       
        </div>   
    </body>
</html>
 
Werbung:
Das CSS dazu:

Code:
.box {
    display: inline-block;
}

.boxcontainer {
    float: left;
    width: 435px;
    text-align: center;
}


.container1 {
    margin-top: 100px;
}


.container2 {
    width: 1333px;
    margin-top: 200px;
}


.textbox {
    color: #ff3d83;
    font-size: 20px;
    margin-top: 20px;
}


.textsmall {
    color: black;
    font-size: 12px;
    margin-top: 35px;
}


.container3 {
    width: 1333px;
    background: #F6CEF5;
    height: 530px;
}

.container4 {
    background: white;
    width: 1333px
    height: 530px;
}

.saufoto {
    float: left;
    width: 435px;
    text-align: center;
    margin-top: 25px;
}


.boxsautext {

}

body {
    width: 1333px;
    margin-bottom: 300px;
}

.2 {
    margin-top: 20px;
}

.picture {
    margin-top:300px;
}


.textnews {
    font-size: 20px;
    margin-top: 50px;
    margin-left: 50px;
}

.lastbanner {
    margin-top: 100px;
}


h1 {
      border-width: medium;
      border-style: dotted;
      border-color: #ff3d83;
      width: 1333px;
      height: 200px;
      margin-top: 60px;
}
 
upload_2017-7-1_16-53-51.png

Sieht dann so aus.

ich wollte aber die verschiedenfarbigen Boxen, in denen jeweils zwei Boxen, einmal mit zwei Bildern und einmal mit dem Text, untereinander haben. Irgendwo ist ein Fehler drin. Wäre froh, wenn mich jemand aufklären könnte und mir auch noch meinen Fehler erklären könnte (will mich ja verbessern).

Viele liebe Grüße,
rhea :)


PS.: Fotos, Namen, Rasse werden dann ausgetauscht, wenn die grobe Formatierung stimmt. Also ist Absicht, dass immer das selbe Foto + Name ist
 
Werbung:
Hallo

Zunächst fehlt der Doctype.

Dann verwendest du float ohne zu clearen oder an den notwendigen Stellen ein clearfix zu verwenden.

Insgesamt ist float aber dafür gedacht Text andere Elementen umfließen zu lassen.

Deshalb empfehle ich dir ein Layout mit Flexbox.

Außerdem solltest du auf die vielen span- und br-Elemente verzichten. Benutze HTML5 und die für den Inhalt vorgesehenen Elemente.

Leider stehen uns die Bilder nicht zur Verfügung, sonst könnte ich mal ein Beispiellayout erstellen. Wie groß sollen die Bilder denn maximal sein?

Gruss

MrMurphy
 
Uff, du hast mich jetzt mich Fachsprache überschüttet, dass ich nur noch verwirrter bin.

Das mit dem flow... hab ich von einem Bekannten, der sowas kann. Da sich das Layout doch verändert hat, ist es jetzt wohl falsch, aber da ich mich mit dem flow null auskenne, hab ich keine Ahnung wie ich das machen muss.
Was ist eine Flexbox. Und HTML5 müsste ich quasi wieder neu lernen?

Die Bilder können so groß sein wie sie wollen. Es soll halt im Gesamtbild gut aussehen.
Ich hatte es sogar schonmal so wie ich es wollte, dann hab ich aber noch herumgeschrieben, weil ich den Namen und Text bei den Container3 links haben wollte und was weiß ich.
 

Anhänge

  • alice 1.jpg
    alice 1.jpg
    31,3 KB · Aufrufe: 3
  • alice 2.jpg
    alice 2.jpg
    30,5 KB · Aufrufe: 2
Hallo

Was ist eine Flexbox.

Hier im Forum können wir dir kaum die Grundlagen des aktuellen HTML und CSS beibringen. Das überfordert uns vom Aufwand und vom Zeitaufwand her.

Und HTML5 müsste ich quasi wieder neu lernen?

Darum wirst du kaum herumkommen, wenn du aktuelle Webseiten erstellen oder auch nur bearbeiten willst. Die Zeiten von "Learing bei Doing" sind bereits seit über 15 Jahren vorbei, auch wenn viele Neueinsteiger das nicht wahr haben wollen.

Responsive Webseiten, die auf den heute üblichen Bildschirmen vom Smartphone bis Desktop besucherfreundlich angezeigt werden sollen, lassen sich nun mal nicht mit veraltetem HTML/CSS erstellen.

Uff, du hast mich jetzt mich Fachsprache überschüttet

Die Suchmaschine deiner Wahl wartet auf deine Suchbegriffe.

Die Bilder können so groß sein wie sie wollen.

Nein, grade nicht. Bilder sollen nur so groß sein wie sie maximal dargestellt werden sollen, so dass ihnen keine Maximalgröße zugewiesen werden muss. Das erfordert weniger CSS-Angaben, erzeugt weniger Datenvolumen und die Seite lädt schneller. Deshalb gehören möglichst kleine Bilder zum guten Stil der Webseitenerstellung.

Ich habe mal eine Beispielseite nach meinen Vorstellungen mit aktuellem HTML/CSS erstellt. Du kannst ja mal schauen ob die überhaupt in der Nähe deiner Vorstellungen ist.

http://boratb.bplaced.net/index56.html

Gruss

MrMurphy
 
Werbung:
Zurück
Oben