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

Frage 2 Boxmodelle nebeneinander stellen (Schularbeit)

J

Jxn_134

Neues Mitglied
Hallo, ich bin noch ein Anfänger was HTML angeht und arbeiten grade in der Schule damit.
Aufgabe ist eine Hauptseite mit 5 Unterseiten zu entwerfen die mit einer Navbar verbunden sind.
Ich kümmere mich da es eine Gruppenarbeit ist um die Unterseiten.
Folgenes Problem:

Ich habe ein (meiner Meinung nach gutes) Design entworfen und es dem Lehrer präsentiert, der jedoch meinte, das bei dem Design zu viel freier Platz vorhanden wäre. Nun sitze ich hier zu Hause, änder das Design und bekomme seit 2 Stunden verdammte 2 Boxmodelle nicht nebeneinander gepackt!
Float und Position bringen nichts...

Ich bitte um Hilfe ... wenns geht schnell :p

EDIT: Es handelt sich um Box 2-1 und 2-2 aus dem unterem Teil


HTML:

<!DOCTYPE html>
<html lang="de">

<head>
<meta charset="utf-8" >
<title>Farbharmonie</title>

<link rel="stylesheet" href="css/style.css">

</head>


<body>

<body bgcolor=#F6D8CE>

<div id="box1"></div>

<h1 style="front-size:30px"> <strong> Farbharmonie</strong> </h1>

<div id="box2-1"><p style="font-size:30px;">Farbharmonie bedeutet, eine möglichst ausgewogene und angenehm empfundene Zusammenstelllung
von Farben (pro Person unterschiedlich) in einer Komposition zu erreichen. Sie ist anders gesagt die Zusammenwirkung
gleichzeitig wahrgenommener Farben. Mit den Jahren können Farbharmonien auch vergehen. Zum Beispiel wenn ein eine neue Art und Farben
in Mode kommt, Häuser einzurichten, kann man mit der alten Farbe schnell unzufrieden werden

</p> <a style="font-size:30px;">Mit Hilfe des Farbkreises kann
man schnell feststellen, welche Farben gut miteinander harmonieren : </a>

<img src="Farbharmonie3.jpg" height="625" width="600"

</div>

<div id="box2-2"></div

</body>


</html>




CSS:


#box1 {
width: 100%; /Breite/
height: 80px; /Höhe/
background-color: grey; /Farbe/

}

/****
  • *
  • Überschrift *
  • *
*/
h1 {
font-size: 40px;
text-align:center;
text-decoration:underline;
}

/****
  • *
  • Rest der Seite *
  • *
*/


#box2-1 {

width: 42%; /weite/
height: 1035px;
margin: 5px; /Abstand zum Rand/
border-top: 3px red solid; /Oberer Rand/
border-right: 3px red solid; /rechter Rand/
border-bottom: 3px red solid; /Unterer Rand/
border-left: 12px red double; /Linker Rand/
float:left;

}


#box2-2 {
width: 50%; /weite/
height:1000px;
margin:5px;
border-top: 3px orange solid; /Oberer Rand/
border-right: 3px orange solid; /rechter Rand/
border-bottom: 3px orange solid; /Unterer Rand/
border-left: 12px orange double; /Linker Rand/
float:right;
}

/****
  • *
  • Bilder *
  • *
*/
 
Schreib mal als erstes in dein CSS....
CSS: 
* {
    box-sizing: border-box;
}
Damit werden solche Dinge wie Padding und Border bei der Breitenberechnung der Elemente mit berücksichtigt - eine 50% breite Box ist dann auch wirklich 50% breit. Padding und Border sind da dann schon drin.
Lediglich ein Margin, das du ja drin hast, must du extra berücksichtigen.
Eine 50% breite Box muss, damit 2 davon nebeneinander passen, dann in der Breite 50% - margin-left - margin-right haben.
Schlauer wäre allerdings wäre es, wenn du statt dieses float: left und float: right , das Layout mit FlexBox erstellst.
 
Hausaufgabenhilfe kostet eine Kaffee und 'nen Keks... aber ich habe heute mal meinen schülerfreundlichen Tag.

Was du da an Code produziert hast, ist nicht gut... und wenn dein Lehrer dir/euch das so beigebracht hat, dann möge er sich bitte mal auf den neuesten Stand in Sachen HTML und CSS bringen. Vieles im Code ist Steinzeit und sollte in der jetzigen Zeit nicht mehr verwendet und schon gar nicht mehr gelehrt werden.

zB:
Diese Tag-Ergänzungen, die du im Body-Tag verwendest (bgcolor=#F6D8CE )... bäähhh - geht gar nicht!
Mach das in deinem Stylesheet (CSS) mit..
CSS: 
body {
    background-color: #F6D8CE;
}
Ebenso diese Ergänzung im Img-Tag (height="625" width="600" )... mehr als bäähhh. und sowieso, man sollte feste Größen angaben vermeiden. Die machen das Layout kaputt - wie soll das auf dem Handy oder Tablet aussehen?
Lösche mal dieses 'width und heigt' aus dem im-Tag .. ergänze dann auch gleich die fehlende schließende Klammer (>) und füge das Pflichtattribut 'alt="ein beschreibender Text" ' hinzu.
Und im CSS notierst du...
CSS: 
#box2-1 img {
   width: 100%;
   max-width: 600px;
   height: auto;
}
Und bei der Höhenangabe beim #box2-1 schreibst du bitte statt der festen Angabe 1035px; mal einfach auto; hin.

Und wenn das erledigt ist, spielst du mal mit der Breite des Browserfensters ... bis runter zur Handygröße!

Ach ja... hätte ich jetzt fast vergessen. Für die Breite der Boxen schreibst du ins CSS
CSS: 
width: calc(50% - 10px);
und zwar genau so.. die Leerzeichen müssen drin bleiben.
Und für padding und margin von htm und body setzt du 0px ein:
CSS: 
html,
body {
   padding: 0px;
   margin: 0px;
}
.. so.. ich habe fertig!
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben