Ich brauche eure Hilfe bei einem Projekt

leonwltr · 27. April 2018

Hallo Community, als Projekt sollen wir einen Pizza Bestell Shop machen, ich habe mich dazu entschieden, die Pizzen in Boxen zu packen und die dann auf der Seite aufzureihen. Dies hat soweit geklappt, die Boxen sind durch den em Befehl untereinander und überlappen sich nicht, leider ist der text in den boxen (wie unten zu sehen) leider nicht in den Boxen (außer bei der ersten Box). Ich werde euch die CSS-Datei und das zugehörige HTML-Datei hinzufügen. Ich hoffe ihr könnt mir helfen, damit ich mich schnell um weitere Dinge bei unserem Projekt kümmern kann. Danke im Vorraus

Viele Grüsse Leon

1) HTML Skript:

<!DOCTYPE html>

<html>

<head>

<title>Pizza Palace</title>

</head>

<body>

<li><a href="Startseite.html">Startseite</a></li>

<li><a href="Pizza.html">Pizza</a></li>

<li><a href="Pasta.html">Pasta</a></li>

<li><a href="Salate.html">Salate</a></li>

<li><a href="Getraenke.html">Getränke</a></li>

<li><a href="Warenkorb.html">Warenkorb</a></li>

</ul>

</div>

<table>

<tr>

<h2> Pizza Margarita </h2>

<h4> <li><a href="Warenkorb.html">Zum Warenkorb</a></li> </h4>

</tr>

<br>

<tr>

In den Warenkorb

</td>

</div>

<table>

<tr>

<h2> Pizza Salami </h2>

</tr>

<br>

<tr>

In den Warenkorb

</td>

</div>

<table>

<tr>

<h2> Pizza Salami </h2>

</tr>

<br>

<tr>

In den Warenkorb

</td>

</div>

<table>

<tr>

<h2> Pizza Salami </h2>

</tr>

<br>

<tr>

In den Warenkorb

</td>

</div>

<table>

<tr>

<h2> Pizza Salami </h2>

</tr>

<br>

<tr>

In den Warenkorb

</td>

</div>

<table>

<tr>

<h2> Pizza Salami </h2>

</tr>

<br>

<tr>

In den Warenkorb

</td>

</div>

<table>

<tr>

<h2> Pizza Salami </h2>

</tr>

<br>

<tr>

In den Warenkorb

</td>

</div>

<table>

<tr>

<h2> Pizza Salami </h2>

</tr>

<br>

<tr>

In den Warenkorb

</td>

</div>

2)CSS Skript

nav {

width:500px;

font-family:calibri;

}

ul {

list-style-type: none;

padding: 15px;

}

li {

display:inline;

padding: 10px;

margin-right: 10px;

border-right:2px solid #d3d3d3;

}

a {

color:black;

text-decoration:none;

}

li:hover {

background-color:#d3d3d3;

}

body {

background-color:#645855

}

#header {

background-color: #FFFFFF ;

color: #333;

float: center;

width: 80%;

height: 200px;

}

#logo {

background: url('Pizza.jpg') no-repeat;

float: left;

width: 200px;

height: 200px;

}

#bereich {

background-color: grey;

width: 400px;

height: 200px;

padding: 10px;

margin: 15px;

border: 2px solid;

border-radius: 8px;

}

#Bild {

float: left;

}

#bereich2 {

background-color: grey;

width: 400px;

height: 200px;

padding: 10px;

margin: 15px;

border: 2px solid;

border-radius: 8px;

margin-top: 10em

}

#Bild {

float: left;

}

#bereich3 {

background-color: grey;

width: 400px;

height: 200px;

padding: 10px;

margin: 15px;

border: 2px solid;

border-radius: 8px;

margin-top: 10em

}

#Bild {

float: left;

}

#bereich4 {

background-color: grey;

width: 400px;

height: 200px;

padding: 10px;

margin: 15px;

border: 2px solid;

border-radius: 8px;

margin-top: 10em

}

#Bild {

float: left;

}

#bereich5 {

background-color: grey;

width: 400px;

height: 200px;

padding: 10px;

margin: 15px;

border: 2px solid;

border-radius: 8px;

margin-top: 10em

}

#Bild {

float: left;

}

#bereich6 {

background-color: grey;

width: 400px;

height: 200px;

padding: 10px;

margin: 15px;

border: 2px solid;

border-radius: 8px;

margin-top: 10em

}

#Bild {

float: left;

}

#bereich7 {

background-color: grey;

width: 400px;

height: 200px;

padding: 10px;

margin: 15px;

border: 2px solid;

border-radius: 8px;

margin-top: 10em

}

#Bild {

float: left;

}

#bereich8 {

background-color: grey;

width: 400px;

height: 200px;

padding: 10px;

margin: 15px;

border: 2px solid;

border-radius: 8px;

margin-top: 10em

}

#Bild {

float: left;

}

Sailor · 27. April 2018

Sorry... aber das ist so falsch und fehlerhaft, wie es nur sein kann! Ein Wunder, dass der Browser überhaupt was anzeigt!

Mehrfach vergebene ID's... identische Formate für unnötige Elemente... ein wildes Durcheinander von Table , td, ul, li... neeee....

Versuche es mal so....

HTML

<!DOCTYPE html>
<html lang="de">
<head>
  <title>Pizza Palace</title>
  <meta charset="utf-8">
  <meta name=viewport content="width=device-width, initial-scale=1">
  <!-- <link rel="stylesheet" href="Pizza.css"> -->
  <style>
   body {
     background-color:#645855
   }

   #header {
     background-color: #FFFFFF ;
     color: #333;
     /*float: center;*/
     text-align: center;
     margin: 0px auto;
     width: 80%;
     height: 200px;
   }

   #logo {
     /*background: url('Pizza.jpg') no-repeat;*/
     float: left;
     width: 200px;
     height: 200px;
   }

   nav {
     width:500px;
     font-family:calibri;
  }

   ul {
     list-style: none;
     padding: 15px;
   }

   li {
     display: inline-block;
     padding: 10px;
     margin-right: 10px;
     border-right:2px solid #d3d3d3;
    }

   li:hover {
     background-color:#d3d3d3;
   }

   a {
     color:black;
     text-decoration:none;
   }

   .bereich {
     background-color: grey;
     width: 400px;
     height: 200px;
     padding: 10px;
     margin: 15px;
     border: 2px solid;
     border-radius: 8px;
   }

   .Bild {
     float: left;
   }
  </style>

</head>

<body>

   <div id="header">
      <a href="Pizza.html"><img src="Pizza.jpg" id="logo" alt="Pizza"></a>
      <ul class="navigation">
         <li><a href="Startseite.html">Startseite</a></li>
         <li><a href="Pizza.html">Pizza</a></li>
         <li><a href="Pasta.html">Pasta</a></li>
         <li><a href="Salate.html">Salate</a></li>
         <li><a href="Getraenke.html">Getränke</a></li>
         <li><a href="Warenkorb.html">Warenkorb</a></li>
      </ul>
   </div>
   <form action="#" method="get">

<!--1.Pizza-->

   <div class="bereich">
      <img class="Bild" src="PizzaSALAMI.jpg" alt=" Bild Pizza Salami">
      <h2> Pizza Margarita </h2>
      <h3> 7€ </h3>
      <h4><a href="Warenkorb.html">Zum Warenkorb</a></h4>
      <button name="bestellung" type="submit" class="Bestellknopf" value="Margarita">In den Warenkorb</button>
   </div>

<!--2.Pizza-->

   <div class="bereich">
      <img class="Bild" src="PizzaSALAMI.jpg" alt=" Bild Pizza Salami">
      <h2> Pizza Salami </h2>
      <h3> 7€ </h3>
      <h4><a href="Warenkorb.html">Zum Warenkorb</a></h4>
      <button name="bestellung" type="submit" class="Bestellknopf" value="Salami">In den Warenkorb</button>
   </div>

<!--3.Pizza-->

   <div class="bereich">
      <img class="Bild" src="PizzaSALAMI.jpg" alt=" Bild Pizza Salami">
      <h2> Pizza Quatro Stagioni </h2>
      <h3> 7€ </h3>
      <h4><a href="Warenkorb.html">Zum Warenkorb</a></h4>
      <button name="bestellung" type="submit" class="Bestellknopf" value="Stagioni">In den Warenkorb</button>
   </div>

<!--4.Pizza-->

   <div class="bereich">
      <img class="Bild" src="PizzaSALAMI.jpg" alt=" Bild Pizza Salami">
      <h2> Pizza Roma </h2>
      <h3> 7€ </h3>
      <h4><a href="Warenkorb.html">Zum Warenkorb</a></h4>
      <button name="bestellung" type="submit" class="Bestellknopf" value="Roma">In den Warenkorb</button>
   </div>

<!--5.Pizza-->

   <div class="bereich">
      <img class="Bild" src="PizzaSALAMI.jpg" alt=" Bild Pizza Salami">
      <h2> Pizza Dolce Vita </h2>
      <h3> 7€ </h3>
      <h4><a href="Warenkorb.html">Zum Warenkorb</a></h4>
      <button name="bestellung" type="submit" class="Bestellknopf" value="Dolce">In den Warenkorb</button>
   </div>

<!--6.Pizza-->

   <div class="bereich">
      <img class="Bild" src="PizzaSALAMI.jpg" alt=" Bild Pizza Salami">
      <h2> Pizza Tonno </h2>
      <h3> 7€ </h3>
      <h4><a href="Warenkorb.html">Zum Warenkorb</a></h4>
      <button name="bestellung" type="submit" class="Bestellknopf" value="Tonno">In den Warenkorb</button>
   </div>

<!--7.Pizza-->

   <div class="bereich">
      <img class="Bild" src="PizzaSALAMI.jpg" alt=" Bild Pizza Salami">
      <h2> Pizza 4 Formagio </h2>
      <h3> 7€ </h3>
      <h4><a href="Warenkorb.html">Zum Warenkorb</a></h4>
      <button name="bestellung" type="submit" class="Bestellknopf" value="Formagio">In den Warenkorb</button>
   </div>

<!--8.Pizza-->

   <div class="bereich">
      <img class="Bild" src="PizzaSALAMI.jpg" alt=" Bild Pizza Salami">
      <h2> Pizza Sole mio </h2>
      <h3> 7€ </h3>
      <h4><a href="Warenkorb.html">Zum Warenkorb</a></h4>
      <button name="bestellung" type="submit" class="Bestellknopf" value="Sole">In den Warenkorb</button>
   </div>

   </form>
</body>
</html>

Alles anzeigen

basti1012 · 27. April 2018

Ach schon fertig..Dann brauche ich ja meine Variante nicht mehr posten.

Aber leonwltr kuck dir das mal genau an wie Sailor das gemacht hat . Vorallem mit den klassen

Code

.bereich {
     background-color: grey;
     width: 400px;
     height: 200px;
     padding: 10px;
     margin: 15px;
     border: 2px solid;
     border-radius: 8px;
   }

Jetzt wurde deine ids #Bereich1-8, zu einer Klasse Gemacht .

Damit sparst du eine Menge Text.

Deine <br> Benutzt man eigentlich nicht mehr.Auch das hat Sailor ganz einfach mit margin und padding ersetzt

Ich brauche eure Hilfe bei einem Projekt

Jetzt mitmachen!

Teilen