bestimmten Bereich farbig hinterlegen
Hallo, ich bin hier zum ersten Mal und hoffe, ihr könnt mir helfen.....wäre super:-)
Kurz vorweg, ich muss in der Schule eine Webseite programmieren und komme da nicht so richtig weiter. Ich bin jetzt in der 11. Klasse und hab zum ersten Mal Informatik. Unsere Lehrerin scheint das aber nicht wirklich zu wissen, denn sie hat uns den Auftrag gegeben, unsere Schulwebseite zu erweitern, da sie teilweise nicht mehr so aktuell ist und manche Themen einfach fehlen. Um es kurz zu machen, sie möchte, dass wir eine Webseite programmieren, die vom Design etwa genau so aussieht, aber ohne den Besitz von jeglichen Vorkenntnissen. Sie hat uns zwar auf die Seite Selfhtml verwiesen, aber wirklich helfen tut das uns auch nicht.
(unsere Schulwebseitenadresse lautet: http://www.plg-berlin.de, bei dem Quellcode wird mir ja schon schwindelig.....)
Mein Problem liegt darin, dass ich einen Text geschrieben habe und der weiß hinterlegt werden soll. Allerdings nicht ganz bis zum Rand, sondern nur in einem gewissen Abstand zum Text. Sonst hätte man ja den Hintergrund einfach weiß machen können.
Da die Webseite nicht hochgeladen ist, füge ich einfach mal den Quellcode ein (im Anhang).
Ich hoffe, ihr versteht mein Problem oder besser gesagt ich hoffe das ihr mir bei meiner Unwissenheit helfen könnt.:-D besten Dank schon mal im Voraus!
LG Moritz
Der hier verwendete Code
<html>
<html lang="de">
<head>
<title>Schulseite</title>
<style>
*{
margin:0;
padding:0;
}
body {
background:#123456;
overflow-X:hidden;
display:flex;
border:70px solid #ffffff;
padding:20px;
flex-direction:column;
}
li{
list-style:none;
}
h1,p{
text-align:center;
color:white;
}
main{
color:#000000;
text-align:center;
height:auto;
padding-left:19px;
padding-right:19px;
}
img{
height:293px;
width:195px;
margin-left:25px;
float: left;
}
.lauftext{
height:20px;
width:200vw;
animation:lauf linear 15s infinite;
}
.lauftext:before{
margin-left:-0px;
content:'';
position:absolute;
left:0;
height:30px;
width:70px;
background:white;
}
.lauftext:after{
content:'';
position:absolute;
right:0;
height:30px;
width:70px;
background:white;
}
footer{
text-align:center;
padding:7px 0 5px 0;
}
@keyframes lauf{
0%{
margin-left:-100vw;
}100%{
margin-left:100vw;
}
}
</style>
</head>
<body>
<header>
<h1> T-shirts und Hoodies mit Primo Logo</h1>
</header>
<h4 class='lauftext'>
Primo-Mode Vorbestellung per Link unte
</h4>
<main>
<p>
Alles fing ganz einfach an. Wir sahen einen Haufen rosafarbener Shirts im Schülerklub liegen und uns war klar,
dass es sich dabei nicht um das Wahre handeln konnte, dass wir diejenigen sein würden,
die etwas daran änderten. Überzeugt davon, unsere schuleigene Bekleidung benötige schnellstmöglich eine Auffrischung,
packten wir das Problem an. Zumindest versuchten wir es… Rückblickend stellte sich das jedoch als deutlich komplizierter
als zu Beginn erwartet heraus. Zuerst mussten wir uns Gedanken darüber machen, welche Motive und auch wie viele denn
überhaupt erhältlich sein sollten. Zahlreiche Wochen intensiven Ideenaustauschs und kreativer Arbeit später,
wir schreiben mittlerweile Dezember 2015, waren die neuen Aushängeschilder textiler Kunst schließlich entworfen.
Voller Tatendrang begaben wir uns auf die Suche nach einer Produktionsmöglichkeit und wurden bei einem Siebdrucker
namens Frank fündig. Seine freundliche Art und ein unschlagbares Angebot konnten wir kaum ablehnen.</p>
<p>
Nun konnte uns eigentlich nichts mehr im Wege stehen. Prinzipiell wollten wir die Bestellungen bezüglich Motiv,
Motiv- und Textilfarbe so individuell wie möglich gestalten, um eine erneute Ansammlung ungewünschter Shirts zu
vermeiden. Allerdings standen wir schnell vor neuen Schwierigkeiten: Allein um den Bestellzettel verständlich zu
gestalten, bedurfte es mehrerer anstrengender Nachtschichten. Nach dessen Veröffentlichung gelangte das Dokument
dann erfolgreich in viele Hände – über Mails, das „Primos Infos“-Brett, als ausliegender Zettel in den Aulen.
Immer mehr Schüler fanden ihren Weg in den Schülerklub; der Stapel der Bestellzettel wurde größer und größer.
Am Ende waren nicht weniger als 400 neue Primo-Textilien bestellt worden. Einige weitere Tage intensiver Arbeit
waren ins Land gegangen, um die Bestellungen mit dem tatsächlichen Zahlungseingang auf dem Konto des Fördervereins
abzugleichen. Dann konnte es endlich losgehen! An mehreren verregneten Märztagen in Franks Druckstübchen produzierten
wir die Shirts, Hoodies und Sweater in Handarbeit, die folgenden Tage verbrachten wir mit Sortieren und Zuordnen.</p>
<p>
Ferien kann man eben auch so verbringen. Gelohnt hat es sich auf jeden Fall. Denn wir haben gelernt,
dass hinter den meisten Dingen ein ungeheurer Organisationsaufwand steckt, den man nicht unterschätzen sollte.
Und wir haben endlich 'was Vernünftiges zum Anziehen.</p>
<p>Bent, Janek, Gustav und Thess</p>
<div>
<img class="img150" src="/image/1.png">
<img class="img150" src="/image/1.png">
<img class="img150" src="/image/1.png">
<a href="http://www.plg-berlin.de/index.php/91-aktuelles/299-etwas-vernuenftiges-zum-anziehen">Mode vorbestellung </a>
<ul>
<li>
<a href="#">Linnk1</a></li>
<li> <a href="#">Linnk2</a></li>
<li> <a href="#">Linnk3</a></li>
<li> <a href="#">usw...</a></li></ul>
</div>
</main>
<footer>
Copyright und fußnoten und anderer Kram</footer>
</body>
</html>