Shishinom
Threadersteller
Dabei seit: 07.11.2014
Ort: -
Alter: -
Geschlecht: 
|
Verfasst Fr 07.11.2014 21:25
Titel Border springt über's Ziel hinaus |
  |
|
Halli Hallo,
ich hab mich gerade schon tiefgründig mit der Suchfunktion beschäftigt aber keiner der Beiträge hat mir zu meinem Problem geholfen. Ich bin übrigens neu hier, man möge mir also verzeihen falls ich hier falsch bin...
Mein Problem ist wahrscheinlich leicht zu erkennen:
Die gestrichelte horizontale border-Linie schießt absolut übers Ziel hinaus und durchquert somit meine <nav> - genau das soll sie nicht tun sie soll mit der vertikalen border-Linie auf der rechten Seite der <nav> abschließen und ich habe einfach keine Ahnung was hier schief läuft und wo mein Fehler liegt und wäre für jede Hilfe dankbar 
Ich poste mal die komplette HTML + CSS falls der Fehler doch tiefgründiger sein sollte - im übrigen ist das eine Hausaufgabe meiner momentanen Ausbildung... sitze nun schon geschlagene 2h daran obwohl es nichts anspruchsvolles ist...
HTML:
| Code: | <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bionesse - Heide</title>
<link rel="stylesheet" type="text/css" href="normalize.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Bionesse</h1>
<nav>
<ul>
<li><span class="link">Home</span></li>
<li><span class="link">Kontakt</span></li>
</ul>
</nav>
<header>
<img id="imgemotion" src="images/emotion.jpg" width="640px" height="200px" alt="Kühe auf einer Weide">
</header>
<section id="willkommen">
<h2>Willkommen bei Bionesse</h2>
<p>
Die Idee einer gesunden Ernährungs-
und Lebensweise ist von Beginn an
fest verwurzelt in unserer Philosophie.
Ziel ist es, möglichst vielen Menschen
gesunde Lebensmittel zugänglich zu machen.
Daher bietet Bionesse für eine vollwertige
Ernährung der Kunden ein breites Sortiment
aus rund 550 vegetarischen Bio-Produkten im
Naturkost-Fachhandel an.
Neben unseren Klassikern Nussmuse, Trockenfrüchte
und Müsli zählen heute Erzeugnisse wie Pasta,
Speiseöle, Schokoladen und Kaffee zum Kernsortiment.
Die Hälfte dieser Produkte wird in Legau im Allgäu
hergestellt oder verarbeitet. Alle anderen Bionesse
Produkte werden nach eigenen Rezepturen und mit
Bionesse Rohstoffen von Lohnverarbeitern und
Lieferanten hergestellt.
</p>
</section>
<section id="bioprodukt"></section>
<section id="liste"></section>
</body>
</html> |
CSS
| Code: | @charset "UTF-8";
html {
background-color: #669999;
}
body {
width: 750px;
border: 20px solid #cecece;
margin: 0 auto;
background-color: white;
}
h1 { /* Headline "Bionesse" */
font: normal 24px Georgia, 'Times New Roman', Times, serif;
color: #999999;
margin: 5px;
border-bottom: 1px dashed #cccccc;
}
nav {
float: left;
border-right: 1px dashed #cccccc;
height: 750px;
}
ul {
width: 94px;
padding: 0;
list-style-type: none;
}
li {
margin: 20px 0 0 0;
font: normal 14px Georgia, 'Times New Roman', Times, serif;
color: white;
}
.link {
background-color: #0099cc;
padding: 2px 10px 2px 10px;
}
header {
border-bottom: 1px dashed #cccccc;
}
#imgemotion {
margin: 5px;
}
p {
font: 11px Arial, Helvetica, sans-serif;
color: #666666;
line-height: 14px;
margin: 0 0 0 20px;
}
h2 { /* Headlines Text */
font: normal 14px Georgia, 'Times New Roman', Times, serif;
color: #666666;
}
|
Ich bedanke mich schon mal im Voraus und hoffe auf schnelle Erste Hilfe 
|
|
Shishinom
Threadersteller
Dabei seit: 07.11.2014
Ort: -
Alter: -
Geschlecht:
|
Verfasst Sa 08.11.2014 19:07
Titel
|
|
|
| DEKONSTRUKTIV hat geschrieben: | | was an deinem code macht dich glauben, die border sollte irgendwo rechts vom linken rand aufhören? |
Naja ich bin davon ausgegangen, dass der Border mit der Breite des dazugehörigen <header> abschließen sollte tut es aber nicht. Ich bin auch einNeuling in Sachen HTML5 und habe vor meiner Ausbildung nie mit Float gearbeitet.
Oh mein Gott! Danke... ich scheiter immer an den simpelsten Fehlern... vielen vielen Dank... das hat mich gerettet und ich hab was gelernt   soll heißen: hat geholfen <3
Zuletzt bearbeitet von Shishinom am Sa 08.11.2014 19:08, insgesamt 1-mal bearbeitet
|
|
Willkommen auf dem Portal für Mediengestalter
