• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Schrift soll sich bei Homepage nicht verschieben

S

Susanne

Neues Mitglied
Hallo ich habe ein kleines Problem und zwar habe ich bei einer Seite in meiner Homepage den Hintergrund mit einem Bild hinterlegt. Damit man den Text auf dieser Seite besser lesen kann habe ich das Bild geändert und im in die Mitte eine Weiße Fläche hinzugefügt, wo nun der Text stehen soll.
Wie soll ich denn jetzt den Text da eingeben? Die weiße Fläche ist auch nicht ganz genau in der Mitte des Bildes. Ich habe bisher den Text immer Zeile für Zeile geschrieben doch das ist dann ja nicht immer im Blocksatz so wie ich es gerne hätte. Und ist ziemlich mühsam. Hätte vielleicht jemand dafür schon mal eine Idee?
Und dann fände ich es noch toll wenn sich die Schrift nicht je nach dem an welchem Bildschrim man die Homepage öffnet verschiebt. Also manchmal geht dann die Schrift zum Beispiel über die weiße Fläche hinaus.
Ich würde mich sehr freuen wenn mir jemand helfen könnte.
Schon mal vielen Dank! :D
 
Werbung:
Benutz einen Html Editor^^ Google einfach mal Nach NVU, der is ziemlich einfach zu bedienen^^ du kannst dafür aber auch Word benutzen^^ einfach deine Html oder Htm mit Word öffnen^^ da kannst das Layout nen bisschen besser machen^^ wenn du openoffice hast müsste das auch mit dem Openoffice writer gehen^^
 
Hallo,

ein Gesamthintergrundbild im body-Element ist häufig problematisch, da es sich nur schlecht an den Viewport (= Browserfenster des Besuchers) anpassen lässt.

Ich würde empfehlen wieder den alten Hintergrund (ohne den hellen Bereich) einzubinden. Dann lässt sich ein Container mittig darüber legen, welcher wiederum das hellere Bild enthält.
Beispiel:
HTML: 
<!doctype html>
<html>
	<head>
		<title>Seitentitel</title>
		<style type="text/css">
			body{
				background: url(body-hintergrund.png);
			}
			#gesamt{
				background: url(heller-inhalt.png);
				/* oder background: white; */
			}
		</style>
	</head>
	<body>
		<div id="gesamt">
			<h1>Hier beginnt der Inhalt</h1>
			<p>Lorem Ipsum ... Bla Bla</p>
		</div>
	</body>
</html>

Weitere Möglichkeiten zur Positionierung und zur Definition von Längen und Breiten, sowie Textverhalten, mit CSS findest du unter css4you.de:
Positionieren: Übersicht: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets
Texteigenschaften: Übersicht: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets
Eine allgemeine Einführung in das Layouten mit CSS findest du unter SelfHTML:
SELFHTML: Stylesheets / CSS-basierte Layouts / Einfhrung

Einen WYSIWYG-Editor wie NVU oder Word würde ich nicht benutzen, da er ohne genügend Hintergrundwissen dazu verleitet, die Semantik des HTML-Codes zu vernachlässigen.

Gruß
 
Werbung:
okay danke schonmal für die Formel! Ist das denn jetzt eine ganz neue Formel? Also soll ich die gegen meine alte ersetzten? und wo soll ich meine sachen einfügen? also ich nimm dann als hintergrundbild ohne weiße fläche aber wo muss ich das in der Formel einfügen? und wie krieg ich das hin das der Text sich nicht verschiebt und ich nicht immer nach einer zeile abschätzen muss und dann eine neue machen muss damit das so ca. aussieht wie im Blocksatz?
 
Hallo.

In HTML und CSS gibt es keine Formeln.

HTML ist eine Auszeichnungssprache, CSS ist eine Gestaltungssprache. Also keine Formeln.

Vitus37 hat dir ja ein Beispiel und drei Links gepostet, ich glaube aber das es dir an Grundwissen fehlt um das Beispiel überhaupt zu verstehen.

Hier ist ein gutes HTML und CSS Tutorial für Anfänger: HTML + CSS lernen.

Gruss
Elroy
 
Hey,
Wieso benutzt du keinen Rahmen? ;)

HTML: 
#name {
        width: 60%;
        background-color: white;
        border-color: white;
        border-width: 1px;
        border-style: solid;
}
Oder habe ich mal wieder etwas falsch verstanden? :-|
 
Werbung:
Ja ich fange auch grade erst an mit HTML aber kann mir das nicht hier jemand erklären und mir einen "Code" für mein Problem geben bitte???
 
Hä? es tut mir echt leid wenn ich euch nerve aber was is denn jetzt thread???
Also soll ich vielleicht nochmal ganz genau mein problem schildern?
 
Werbung:
Hallo,

ein Thread ist... Thread (Internet)

Dir scheinen noch einige Grundlagen zu fehlen. Arbeite dich am besten in ein Tutorial für HTML und CSS, wie das von Elroy vorgstellte, ein, dann wirst du mit meinen obigen Beispiel-Codes auch mehr anfangen können.

Eine fertige Lösung für dein Problem gibt es nicht, jede Website ist anders.

Gruß
 
So bedankt man sich hier also... Naja...



EDIT:
Also nochmal... Gib dem Inhalt deiner Website einen Namen:

HTML: 
<html>
<head>
...
</head>

<body>
<div id="name">
Inhalt
</div>
</body>
</html>
Und dann machst du mit CSS weiter und gibst dem Inhalt einen Rahmen mit weißem Hintergrund:

HTML: 
#name {
        background-color: white ;
        width: 60%;
        border-color: white;
        border-width: 1px;
        border-style: solid;
}
Ich weiss zwar nicht, ob sich die Schrift in Rahmen bei kleineren Bildschirmen verschiebt, sollte aber nicht vorkommen.
Wo liegt das Problem?
 
Zuletzt bearbeitet von einem Moderator:
Ok also ich schildere mein Problem nochmal genau. Also zuersdt einmal habe ich folgenden Code:
<html>
<head>
<title>Schule</title>
<meta name="author" content="Susanne">
<title>www.tutorials.de</title>
<style type="text/css">
<!--
* { margin: 0;
padding: 0;}
/* Höhen- und Breitenanpassung zu 100%; Scrollbar ausblenden */
body, html{ width: 100%;
height: 100%;
overflow: hidden;}
/* BG-Image auf unterste Ebene anordnen */
#bgImg{ position: absolute;
top: 0;
left: 0;
border: 0;
z-index: 1;}
/* Body-Dummy absolut über BG-Image legen; Scrollbar bei Bedarf einblenden */
#bodyDiv{ position: absolute;
top: 0;
left: 0;
z-index: 2;
overflow: auto;
width: 100%;
height: 100%;
text-align: center;}
/* Layoutelemente */
#mainDiv{ width: 600px;
height: 100px;
text-align: left;
margin: 18px auto;}
#headDiv{ border: 1px solid #000;
background: #efefef;}
#contentDiv{ border: 1px solid #000;
background: #f0fff0;
margin-top: 6px;
height: 1000px;}
#footerDiv{ border: 1px solid #000;
background: #fffff0;
margin-top: 6px;}
//-->
</style>
</head>
<body>
<img id="bgImg" src="Hintergrund.jpg" width="100%" height="100%">
<div id="bodyDiv">
<div style="height:20px;"></div>
<center><h3><b> Überschrift</b></h3></center>

<center> hier steht Text
<p>und hier auch</p>
<p>und hier auch </p>
</center>



<center> </center>


<div id="mainDiv">
</div>
</div>
</body>
</html>


Also und da habe ich halt ein Hintergrundbild das aus einem Foto besteht und dann habe ich das Foto bearbeitet und
so ca. in die Mitte des Fotos eine Weiße Fläche eingefügt, damit man die Schrift halt besser erkennen kann und dann habe ich
dieses Foto als Hintergrund gesetzt. So nur wie kann ich jetzt zum Beispiel einen Text den ich auf Word geschrieben habe in den
Code einkopieren so dass der halt nur in diesem weißten Feld bleibt. Mit nur "center" ist das zwar in der Mitte geht aber natürlich
je nachdem wie lang der Text ist auch immer über das weiße Kästchen hinau. Deswegen habe ich es bisher immer so gemacht
das ich immer gleich lange Zeilen abgeschätze habe und dann immer darunter mit <p> und so eine neure Zeile
mit genaus so vielen Buchstaben ca. gemacht aber das is natürlich auf Dauer etwas zu müheselig.
Und ok ich habe das jetzt bei einer Seite so gemacht mit immer diesen <p> aber das ist natürlich dann auch
nciht ganz genau aber wenn ich dann jetzt zum beispiel an einen anderen Pc gehe der zum Beispiel einen kleineren Bildschirm hat geht der ganze Text
auch immer über das weiße Feld. Kann mir bitte jemand helfen? Vielleichtt habe ich manches auch nicht ganz verständlich geschrieben dann bitte nachfragen.
Danke schonmal :)
 
Werbung:
Susanne schrieb:
Okay danke schonmal für die Antwort ich fang auch schon an mich durch die Grundlagen zu erarbeiten aber bin im Moment echt in _Zeitnot.
Zum Vergrößern anklicken....

Die Zeit musst du dir eben nehmen, oder dir jemanden suchen der das für dich macht.

Ohne die nötigen Grundlagen bist du nicht in der Lage die hilfen zu verstehen die wir dir geben.

Gruss
Elroy
 
Zuletzt bearbeitet:
Werbung:
Vitus?
Kennst du dich da nicht auch aus und kannst mir da helfen. Ich schaff das zeitlich echt nicht mehr da ich auch noch andere Sachen bei meiner Homepage verbessern muss. Kannst du mir nicht einen Code dafür sagen ?
Bitte?
 
Ok wenn grad keiner einen Code hat kann mir dann jemand sagen wo ich nachgucken soll?
Weil das is echt total doof mit meiner Schrift!
 
Werbung:
Ich habe mich grade mal bei der Seite
margin-left: Außenabstand links: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets
durchgelesen.
Ich glaube da ist auch was für mein Problem dabei.
Ich habe das mit dem Außenabstand links mal ausprobiert und habe gehofft das egal wie viele ich dann schreiben es nicht nach ,links an den Rand rutscht sondern immer diesen Abstand nach links behalten würde doch das war leider nicht der Fall.
Ich weiß jetzt leider nicht was ich noch ausprobieren kann?
Wäre das vielleicht eine Möglichkeit den ganzen Text in einen Rahmen zu setzten und kann man dann vielleicht diesen Rahmen vormartieren?
Würde mich echt um Hilfe freuen 1
 
Hallo, wieder ich.

  1. Ich habe selbst leider auch andere Dinge zu tun. Wenn du selbst keine Zeit hast dich mit dem Thema zu beschäftigen, dann poste dein Anliegen im Unterforum „Jobbörse“.
  2. Ich weiß nicht, wie viele Links in diesem Thema jetzt schon gepostet wurden, aber es sind reichlich und sie würden dir helfen, dein Problem zu lösen, wenn du sie dir ansiehst.
  3. Eine allgemeingültige Lösung gibt es hier nicht. Ein CSS-Stylesheet ist stets am zugehörigen HTML-Dokument orientiert. Es wurden Beispiele und Verweise zu Referenzen gepostet, doch leider können auch wir auch nur dann helfen, wenn eine gewisse Grundwissensbasis beim Fragenden besteht.
  4. Hättest du dich vor acht Tagen, als du dieses Thema eröffnet hast und erste Antworten eingingen, mit z.B. der Einführung in HTML&CSS, die Elroy als Link gepostet hat, beschäftigt, wärst du vielleicht jetzt schon fertig und womöglich wäre die Webseite noch um einiges besser geworden.

Ich hoffe, du verstehst nun was ich/wir meine/n.

Gruß
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben