nicht angemeldet
Homepage nach "oben" schieben
0 0 0 0 0 0 0 0
Homepage nach "oben" schieben
Hallo allerseits!
Wieder mal habe ich ein neues Problem:
Ich habe ein Logo und ein Hintergrundbild und beides möchte ich etwas nach oben schieben. Ich weiß aber nicht, wie ????
<html><head><title>background-position</title>
<style type="text/css">
#Emma{
background-image:url(EmmaStyle/2.Background.jpg); background-repeat:repeat-y; margin:150px; font-size:150%;
background-position:px px;
}
</style>
</head>
<body>
<div id="Emma">
<div align="center"><img src="EmmaStyle/2.Logo.jpg" width="700" height="255" border="0" alt=""></div>
herzlich willkommen!
</div>
</body></html>
Also das ist der Befehl für bestimmte Stellungen meines Logos und meines Hintergrundblides. Sie stehen zwar zentriert, aber in der Mitte vom Bildschirm! Ich würde also Logo+Hintergrundbild nach OBEN gerne haben :8
Ist das machbar???
Danke im Vorraus für eure Hilfe!
-
Moin Natalie,
Ich habe ein Logo und ein Hintergrundbild und beides möchte ich etwas nach oben schieben. Ich weiß aber nicht, wie ????
<html><head><title>background-position</title>
<style type="text/css">
#Emma{background-image:url(EmmaStyle/2.Background.jpg); background-repeat:repeat-y; margin:150px; font-size:150%;
background-position:px px;
}
</style>
</head><body>
<div id="Emma">
<div align="center"><img src="EmmaStyle/2.Logo.jpg" width="700" height="255" border="0" alt=""></div>
herzlich willkommen!</div>
hast Du mal ein Link zu der Page? Deine Frage passt nicht ganz zum Quelltext, denn ein Hintergrundbild würde in den BODY TAG gehören.
regds
Mike©--
Freunde kommen und gehen. Feinde sammeln sich an.-
Hi Mike :D
Also ich habe mal schnell meine Seite hochgeladen:
http://people.freenet.de/hp-forum/IndexHermine.html
-
Moin Natalie,
http://people.freenet.de/hp-forum/IndexHermine.html
das ist aber ein sehr abenteuerliches Konstrukt!
Bitte gehe zunächst mal hier hin und versuche das Grundgerüst "sauber" zu erstellen.
http://validator.de.selfhtml.org/
regds
Mike©--
Freunde kommen und gehen. Feinde sammeln sich an.-
Hallo Natalie,
http://people.freenet.de/hp-forum/IndexHermine.html
das ist aber ein sehr abenteuerliches Konstrukt!
Bitte gehe zunächst mal hier hin und versuche das Grundgerüst "sauber" zu erstellen.
Nunja da hat Mike zwar recht, aber helfen wird dir das wohl nicht so toll.
Ich habe ein Logo und ein Hintergrundbild und beides möchte ich etwas nach oben schieben. Ich weiß aber nicht, wie ????
Öhöm, was ist denn nun was?
2.Background.jpg ist ja wohl das Bild von Emma, nur wo ist das Logo?
Die Angaben in #Emma für den Background sind auch etwas durcheinander
schau doch mal < http://de.selfhtml.org/css/eigenschaften/hintergrund.htm> durch. Dort steht auch wie man ein Hitergrundbild richtig positioniert.Und sowohl margin:150px; als auch font-size:150%; haben in den Angaben für den Hintergrund nix zu suchen. Definiere am besten für den Schriftzug eine eigene ID. Das margin:150px; ist übrigens die Hauptursache, dass das Bild vertikal dort ist wo es ist :o))
Schöne Grüße,
TeraVolt-
Moin TeraVolt,
Nunja da hat Mike zwar recht, aber helfen wird dir das wohl nicht so toll.
Indeed. Allerdings zielte ich in etwa hier hin: Ich hole mir keine Einrichtungstips für eine Wohnung in einem baufälligen Haus ;-)
regds
Mike©--
Freunde kommen und gehen. Feinde sammeln sich an.-
Moin nochmal,
Indeed. Allerdings zielte ich in etwa hier hin: Ich hole mir keine Einrichtungstips für eine Wohnung in einem baufälligen Haus ;-)
mit dem "Konstrukt" und dem "baufälligen Haus" meinte ich natürlich die Page:
<html>
<head>
<title>Emma Watson</title>
<meta name="description" content="Harry Potter">
..........
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000"><html><head><title>background-position</title>
<style type="text/css">
#Emma{background-image:url(EmmaStyle/2.Background.jpg); background-repeat:repeat-y; margin:150px; font-size:150%;
background-position:px px;
}
</style>
</head><body>
<div id="Emma">
<div align="center"><img src="EmmaStyle/2.Logo.jpg" width="700" height="255" border="0" alt=""></div>
herzlich willkommen!
</div></body></html>
</body>
</html>regds
Mike©--
Freunde kommen und gehen. Feinde sammeln sich an.-
Vielen Dank für eure Hilfe! :-D
Ich bin nämlich noch kein "Profi" insachen HTML aber das müsste ich hinkriegen!
Also nochmal Danke! :-D :-D
Gruß, Natalie
-
So, hab mal nochmal es versucht zu machen, aber das mit dem zentrieren klappt nicht....ich glaub, ich lass es :-(
Aber nun bin wieder auf etwas gestoßen:Der Link zu der Seite:
http://people.freenet.de/hp-forum/IndexHermine2.htmlWir kann ich es machen, dass diese Lücke zwischem dem Logo (EmmaWatson) und meinem Hintergrundbild verschwindet, das heißt, dass der Hintergrund gleich unter dem Logo anfängt???
Hier ist meine HTML-Struktur:
<html>
<head>
<title>Emma Watson</title>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000"><img src="EmmaStyle/2.Logo.jpg" width="700" height="255" border="0" alt="">
<html><head><title>background-image</title>
</head><body style="background-color:#A9CAE6">
</body></html><html><head><title>background-repeat</title>
</head><body bgcolor="#FFFFFF" text="#000000"><div style="background-image:url(EmmaStyle/2.Background.jpg); background-repeat:repeat-y;
margin:0pt; font-size:150%">
<p>TEST<br>TESTTESTTESTETSTS<br>TESTETSTETSTETSTS<br>TESTETETSTETE</p>
</div>
</body></html></body>
</html>Ich hoffe, das die Struktur einigermaßen akzetabel ist :-/
-
Hallo Natalie
Ich hoffe, das die Struktur einigermaßen akzetabel ist :-/
Nein!
Natalie, es bring nichts an irgendwelchen Darstellungsfehlern oder
Designwünschen herumzudoktern, wenn die Struktur der HTML-Seite allen Regeln
widerspricht.
Verwunderlich ist lediglich, dass die Browser dabei überhaupt etwas anzeigen.Bitte beschäftige dich mit dem Grundgerüst einer HTML-Datei.
<html>, <head>, <title> haben im <body> nichts verloren!
Wenn du die Grundstruktur verstanden hast, dann mache weiter.
Und lasse, dann das, was du geschrieben hast, vom W3C-Validator (englisch)
oder vom SelfHTML-Validator (deutsch) prüfen.Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Oh, hab vergessen sie alle wegzumachen. Ich habe nämlich immer die bestimmten HTML-Befehle von dieser Seite in meine Seite rüberkopiert.
Die Grundlagen sind mir schon klar.Aber wie bekomme ich diesen Abstand zwischen dem Logo und dem Hintergrund weg?
-
Moin Natalie,
Die Grundlagen sind mir schon klar.
Nein, das sind sie leider nicht!
Um nur einige Beispiele zu nennen:
- Zwei BODY TAGS ( Es gibt nur ein BODY TAG )
- STYLE Definitionen im BODY. Die gehören in den HEAD
- usw....
Du hast alles kunterbunt durch gemischt.
Der Quelltext:
<html>
<head>
<title>Emma Watson</title>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000"><img src="EmmaStyle/2.Logo.jpg" width="700" height="255" border="0" alt="">
<body style="background-color:#A9CAE6"></body>
<div style="background-image:url(EmmaStyle/2.Background.jpg); background-repeat:repeat-y;
margin:0pt; font-size:150%"><style type="text/css">
body { margin-left:150px; }
p,div,table,ul,ol { margin-left:180px; }
</style><p>hallo</p>
<h1>Eine Überschrift erster Ordnung</h1>
<p>Ein Textabsatz, nochmals weiter eingezogen.</p>
<p>Noch einer davon.</p>
<h2>Eine Überschrift zweiter Ordnung</h2>
<ul>
<li>Ein Listenpunkt</li>
<li>Noch ein Listenpunkt</li>
</ul>
<p>TEST<br>TESTTESTTESTETSTS<br>TESTETSTETSTETSTS<br>TESTETETSTETE</p>
</body>
</html>regds
Mike©--
Freunde kommen und gehen. Feinde sammeln sich an. -
Oh, hab vergessen sie alle wegzumachen. Ich habe nämlich immer die bestimmten HTML-Befehle von dieser Seite in meine Seite rüberkopiert.
Die Grundlagen sind mir schon klar.Aber wie bekomme ich diesen Abstand zwischen dem Logo und dem Hintergrund weg?
Hallo Natalie,
sorry klingt vielleicht hart aber Du hast eben _keine_ Grundstruktur in deinem code. Du versuchst zu rennen, bevor du laufen kannst.
Also bitte mal [Link: http://de.selfhtml.org/html/allgemein/grundgeruest.htm] reinziehen. Gaaaaaaaaaaaaanz wichtig auch die Angabe des DOCTYPE [Link: http://de.selfhtml.org/html/allgemein/grundgeruest.htm#dokumenttyp] denn ohne diesen ist ein validieren nicht möglich, auch wenn der restliche Code völlig korrekt sein sollte.
Entgegen der SELFHTML Grundsätze hab ich deinen code jetzt mal ein wenig verbessert und hab meine schlauen :o) Kommentare direkt reingeschrieben:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Emma Watson</title><!-- Die Angabe der "character sets" ist ebenfalls wichtig, sowohl für die korrekte Anzeige als auch für die Validierung -->
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"><!-- Hier im head gehöhrt die style definition hin -->
<style type="text/css">
body {margin-left:150px;}
p,div,table,ul,ol { margin-left:180px; }
</style></head>
<body style="background-color:#A9CAE6" text="#ffffff" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<!-- Die Angabe der text und linkfarbe ist so zwar nicht falsch, aber nicht optimal. Verwende auch hier CSS --><!-- Gaaaaaaaaaanz kniffelig. zwischen dem Bild <img src.....> und dem <div style="EmmaStyle/backg.....> darf im Quelltext NICHTS sein. Kein Leerzeichen, kein Zeilenvorschub ABSOLUT NICHTS sonst gibt es wieder einen kleinen Abstand. AUSPROBIEREN! -->
<img src="EmmaStyle/2.Logo.jpg" width="700" height="255" border="0" alt=""><div style="EmmaStyle/background-image:url(2.Background.jpg); background-repeat:repeat-y; margin:0px; font-size:150%;"><p style="margin-top:0px;padding-top:10px">hallo</p>
<!-- Noch was kniffeliges der Absatz <p> erzeugt einen Absatz... äääh logisch oder? Daher kommt dann allerdings die große Lücke zwischen Bild und Hintergrund. Desshalb wird der obere Abstand hier mit margin-top:0px auf null gesetzt. Willst du nicht, daß der Text ganz oben klebt, kannst du ihn mit padding-top:10px wieder runterschieben. AUSPROBIEREN!-->
<h1>Eine Überschrift erster Ordnung</h1>
<p>Ein Textabsatz, nochmals weiter eingezogen.</p>
<p>Noch einer davon.</p>
<h2>Eine Überschrift zweiter Ordnung</h2>
<ul>
<li>Ein Listenpunkt</li>
<li>Noch ein Listenpunkt</li>
</ul>
<p>TEST<br>TESTTESTTESTETSTS<br>TESTETSTETSTETSTS<br>TESTETETSTETE</p>
</div> <!-- Das div wieder schließen nicht vergessen! --></body>
</html>Also jetzt sollte es einigermaßen so wie gewünscht angezeigt werden.
Allerdings würde ich nicht einfach dem body ein margin-left geben, sondern die Grafik und das div einfach horizontal zentrieren, dann sieht es auch bei verschieden großen Fenstergrößen gut aus.Schöne Grüße,
TeraVolt-
Hallo Natalie,
sorry klingt vielleicht hart aber Du hast eben _keine_ Grundstruktur in deinem code. Du versuchst zu rennen, bevor du laufen kannst.
Also bitte mal [Link: http://de.selfhtml.org/html/allgemein/grundgeruest.htm] reinziehen. Gaaaaaaaaaaaaanz wichtig auch die Angabe des DOCTYPE [Link: http://de.selfhtml.org/html/allgemein/grundgeruest.htm#dokumenttyp] denn ohne diesen ist ein validieren nicht möglich, auch wenn der restliche Code völlig korrekt sein sollte.
Entgegen der SELFHTML Grundsätze hab ich deinen code jetzt mal ein wenig verbessert und hab meine schlauen :o) Kommentare direkt reingeschrieben:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Emma Watson</title><!-- Die Angabe der "character sets" ist ebenfalls wichtig, sowohl für die korrekte Anzeige als auch für die Validierung -->
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"><!-- Hier im head gehöhrt die style definition hin -->
<style type="text/css">
body {margin-left:150px;}
p,div,table,ul,ol { margin-left:180px; }
</style></head>
<body style="background-color:#A9CAE6" text="#ffffff" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<!-- Die Angabe der text und linkfarbe ist so zwar nicht falsch, aber nicht optimal. Verwende auch hier CSS --><!-- Gaaaaaaaaaanz kniffelig. zwischen dem Bild <img src.....> und dem <div style="EmmaStyle/backg.....> darf im Quelltext NICHTS sein. Kein Leerzeichen, kein Zeilenvorschub ABSOLUT NICHTS sonst gibt es wieder einen kleinen Abstand. AUSPROBIEREN! -->
<img src="EmmaStyle/2.Logo.jpg" width="700" height="255" border="0" alt=""><div style="EmmaStyle/background-image:url(2.Background.jpg); background-repeat:repeat-y; margin:0px; font-size:150%;"><p style="margin-top:0px;padding-top:10px">hallo</p>
<!-- Noch was kniffeliges der Absatz <p> erzeugt einen Absatz... äääh logisch oder? Daher kommt dann allerdings die große Lücke zwischen Bild und Hintergrund. Desshalb wird der obere Abstand hier mit margin-top:0px auf null gesetzt. Willst du nicht, daß der Text ganz oben klebt, kannst du ihn mit padding-top:10px wieder runterschieben. AUSPROBIEREN!-->
<h1>Eine Überschrift erster Ordnung</h1>
<p>Ein Textabsatz, nochmals weiter eingezogen.</p>
<p>Noch einer davon.</p>
<h2>Eine Überschrift zweiter Ordnung</h2>
<ul>
<li>Ein Listenpunkt</li>
<li>Noch ein Listenpunkt</li>
</ul>
<p>TEST<br>TESTTESTTESTETSTS<br>TESTETSTETSTETSTS<br>TESTETETSTETE</p>
</div> <!-- Das div wieder schließen nicht vergessen! --></body>
</html>Also jetzt sollte es einigermaßen so wie gewünscht angezeigt werden.
Allerdings würde ich nicht einfach dem body ein margin-left geben, sondern die Grafik und das div einfach horizontal zentrieren, dann sieht es auch bei verschieden großen Fenstergrößen gut aus.Schöne Grüße,
TeraVoltVielen vielen lieben Dank, TeraVolt!!! Hab es jetzt endlich begriffen! :-D :-D :-D :-D
-
-
-
-
-
-
-
-
-
-
-