http://www.standortfoerderung-weilheim.de/newsletter…
das ist mein Problemkind. Wie bekomme ich über CSS den Abstand zwischen der Header-Grafik und dem content sowie dann zur Footergrafik raus?
Hat jemand eine Idee - 1000 Dank für Eure Hilfe. Nicole
ersetzte alle mit und mit
ergänze bitte im Stylesheet die Definition:
basefont, p, tr, td {…}
um die Einträge
margin-top: 0px;
margin-bottom: 0px;
dann sollte es klappen.
LG, Matthias
jeweils:
margin:0px;
padding:0px;
in die beiden Klassen „.head“ und „.content“ einfügen sollte funktionieren.
Probiere bitte mal style=„display: block;“ im Tag, aller drei Grafiken =)
Probiere bitte mal style=„display: block;“ im Tag, aller drei Grafiken =)
Deine CSS Datei müsste dann so aussehen:
@charset „utf-8“;
/* Juli 2010 mundini webdesign (www.mundini.de) Nicole Mundigl Autor und Copyright */
.head {
background-image: url(http://www.standortfoerderung-weilheim.de/newsletter…);
width: 650px;
height: 93px;
display: block;
}
.content {background-image:url(http://www.standortfoerderung-weilheim.de/newsletter…);
background-repeat:repeat-y;
width: 650px;
color:#9A0205;
display: block;
}
.footer {
background-image:url(http://www.standortfoerderung-weilheim.de/newsletter…);
height:140px;
background-repeat:no-repeat;
width: 650px;
display: block;
}
h1 {
color: white;
font-family:„Trebuchet MS“, Arial, Helvetica, sans-serif;
padding-left: 15px;
padding-top: 10px;
font-size:15px;
text-align:left;
}
basefont, p, tr, td {
font-family:„Trebuchet MS“, Arial, Helvetica, sans-serif;
font-size:12px;
color:white;
padding-left: 15px;
padding-right: 50px;
text-align:justify;
}
.footer a {
color: #FFF;
text-decoration: none;
}
Probiere bitte mal style=„display: block;“ im Tag, aller drei Grafiken =)
Deine CSS Datei müsste dann so aussehen:
@charset „utf-8“;
/* Juli 2010 mundini webdesign (www.mundini.de) Nicole Mundigl Autor und Copyright */
.head {
background-image: url(http://www.standortfoerderung-weilheim.de/newsletter…);
width: 650px;
height: 93px;
display: block;
}
.content {background-image:url(http://www.standortfoerderung-weilheim.de/newsletter…);
background-repeat:repeat-y;
width: 650px;
color:#9A0205;
display: block;
}
.footer {
background-image:url(http://www.standortfoerderung-weilheim.de/newsletter…);
height:140px;
background-repeat:no-repeat;
width: 650px;
display: block;
}
h1 {
color: white;
font-family:„Trebuchet MS“, Arial, Helvetica, sans-serif;
padding-left: 15px;
padding-top: 10px;
font-size:15px;
text-align:left;
}
basefont, p, tr, td {
font-family:„Trebuchet MS“, Arial, Helvetica, sans-serif;
font-size:12px;
color:white;
padding-left: 15px;
padding-right: 50px;
text-align:justify;
}
.footer a {
color: #FFF;
text-decoration: none;
}
Kommando zurück =)
Dein CSS Code muss so aussehen:
@charset „utf-8“;
/* Juli 2010 mundini webdesign (www.mundini.de) Nicole Mundigl Autor und Copyright */
.head {
background-image:url(http://www.standortfoerderung-weilheim.de/newsletter…);
background-repeat:no-repeat;
width: 650px;
height: 93px;
margin: 0px 0px;
}
.content {background-image:url(http://www.standortfoerderung-weilheim.de/newsletter…);
background-repeat:repeat-y;
width: 650px;
color:#9A0205;
margin: 0px 0px;
}
.footer {
background-image:url(http://www.standortfoerderung-weilheim.de/newsletter…);
height:140px;
background-repeat:no-repeat;
width: 650px;
margin: 0px 0px;
}
p{
margin: 0px 0px;
}
h1 {
color: white;
font-family:„Trebuchet MS“, Arial, Helvetica, sans-serif;
padding-left: 15px;
padding-top: 10px;
font-size:15px;
text-align:left;
margin: 0px 0px;
}
basefont, p, tr, td {
font-family:„Trebuchet MS“, Arial, Helvetica, sans-serif;
font-size:12px;
color:white;
padding-left: 15px;
padding-right: 50px;
text-align:justify;
}
.footer a {
color: #FFF;
text-decoration: none;
}
Meine lieben Freunde!
Bin ich im Schlaraffenland? Ich bin total überwältigt von Euren Hilfestellungen!!! Millionen Dank auch.
Mit margin: 0px 0px;
im tag und Footer, .header, .content, und h1
hat’s funktioniert! Ich versteht nur nicht, warum braucht denn der das? Könnte ich code sparen?
P.s. Nachdem ich früher mit Fusion11 meine Werke gemacht habe, bin ich jetzt stolze Besitzerin von DW CS5 und codiere meinen Kram lieber frisch und frei komplett von Hand *stolz* und *freu*.
„Deine lieben Freunde“ war nur einer, unzwar ich =)
Wenn Du margin: 0px 0px; sparen willst, hast Du wieder die Abstände 
Sorry, konnte die anderen Antworten nicht sehen, irgendwie. Naja, dafür war meine ja trotzdem richtig =)
Hallo Nicole,
ich habe deine Grafiken passend (an den Seiten) zugeschnitten, so dass kein weißer Rand mehr zu sehen ist. In der Breite sind es bei der Footer-Grafik dann 602px. Dann habe ich auch bei dem header den Rand abgeschnitten und auf 602px in der Breite skaliert. Für den Content benötigst du dann auch kein Hintergrundbild mehr, sondern kannst im background:#9a0406; zuweisen.
Dann habe ich noch folgendes an deinem verändert:
Damit nun der weiße Raum unten verschwindet gibts du dem conten unten noch ein kleines padding von 10px
padding-bottom:10px;
Bei mir passt es jetzt und sieht korrekt aus (FF3)
Grüße
Sebast1an
Ich denke, es liegt an der Hintergrund Grafik, die hat oben den Abstand, check das mal, würde ich beschneiden.
Hi Nicole,
mit CSS würde ich das gar nicht machen, da E-Mail-Reader - gerade ältere - damit schlecht oder gar nicht zurechtkommen. Auch, wenn es Dir old-fashioned vorkommen mag: Tabellen sind hier das Mittel der Wahl.
Viele Grüße
Michael Milsch
Also meine lieben Leute, vielen Millionen-Dank für Eure Mühe.
Ich würde sagen: „Case closed“
Danke und schönen Tag noch. Eure Nicole
Hallo Nicole,
wie ich sehe, arbeitest du nur mit Klassen im CSS. warum benutzt du nicht das DIV-Blockelement? Du kannst in einem Blockelement mehrere Blöcke unterbringen, mußt dir im Klaren sein, wie die Seite aussehen soll):
Du richtest dir einen Rahmen (frame) ein, wo Du alles hineinpackst. 1. den Kopfbereich, 2. den Navigationsbereich, 3. den Textbereich und 4. den Fussbereich.
Im CSS sieht das so aus:
( die Bezeichnungen nach dem # kannst du selber wählen, mußt sie aber in HTML dann auch so benutzen)
(die in Klammern geschrieben Texte sind nur Erläuterungen zur Zeile!)
#frame {
width:1000px; (Breite)
margin-left:auto;
margin-right:auto; (bringt die Seite in die Mitte des Bildschirms)
margin-top: 15px; (läßt die Seite 15px vom oberen Rand rutschen)
}
#kopfbereich {
width: 1000px; (Breite der Seite)
margin-top:0; (die Seite beginnt bei 0 px)
margin-bottom:0; (mit margin-top bzw. margin-bottom kannst du die oberen bzw. unteren äußeren Abstände der Box beeinflussen)
}
#textbereich {
width:1000px;
margin-top:20px; (wenn du z.B. einen Abstand möchtest)
margin-bottom: 15px; (wenn ein Abstand gewünscht wird)
text-align: left;
usw.
}
#fussbereich {
…
(wie die anderen auch…)
}
In HTML musst du dich auf diese Divs/Blockelemente beziehen, jeder DIV darf nur 1 Mal vorkommen!:
.
.
.
//beginn Rahmen
…
…
…
//ende frame-div
Könntest du mir den Link nochmals zukommen lassen?
Dieser funktioniert nichtmehr!
Danke
Könntest du mir den Link nochmals zukommen lassen?
Dieser funktioniert nichtmehr!
Danke
Der Link hat sich mittlerweile erledigt. Ich habe es als Vorlage gespeichert. Danke für Eure Hilfe.
also bei ner weissen Seite kann man nicht sehr viel helfen…