Text mit maring

[Pixelräuber]

Hi!

ich habe folgendes Problem:

Ich habe den Hintergrund mit maring in die gewünschte position gebracht. Nun geht der text aber über teile des hintergrundes, wo er nicht drüber gehen soll. Ich brauche an der rechten Seite ca 2 Pixel abstand. Weiß jemand wie das geht bei Text?

Mit freundlichen Grüßen

Pixelräuber

[Gunnar Bittersmann]

@@Pixelräuber:

nuqneH

Weiß jemand wie das geht bei Text?

Ohne vernünftige Problembeschreibung nein.

Qapla'

[Pixelräuber]

@@Pixelräuber:

nuqneH

Weiß jemand wie das geht bei Text?

Ohne vernünftige Problembeschreibung nein.

Qapla'

Was ist daran nicht zu verstehen, das mein Text in einem div element ist und dieses div element hat einen Hintergrund. Der Text im div element soll nicht über den ganzen Hintergrund gehen. Da ich das Div element schon mit margin-left und margin-top an die richtige position gebracht habe, weiß ich nicht mehr weiter wie ich es hinbekomme das der text 2 Pixel abstand vom Rand des div elements hat.

[ChrisB]

Hi,

bitte zitiere vernünftig, nicht einfach alles.

Was ist daran nicht zu verstehen, das mein Text in einem div element ist und dieses div element hat einen Hintergrund.

Was soll denn davon erratbar sein, wenn du nicht mal ein DIV-Element erwänhst?
(Erratbar ist jetzt höchstens, dass es vermutlich ein P statt einem DIV sein möchte.)

Der Text im div element soll nicht über den ganzen Hintergrund gehen. Da ich das Div element schon mit margin-left und margin-top an die richtige position gebracht habe,

Ach, sieh an, margin hast du also benutzt - hast das ungültige maring inzwischen also doch entsorgt?

weiß ich nicht mehr weiter wie ich es hinbekomme das der text 2 Pixel abstand vom Rand des div elements hat.

padding.

MfG ChrisB

[Pixelräuber]

»» »» weiß ich nicht mehr weiter wie ich es hinbekomme das der text 2 Pixel abstand vom Rand des div elements hat.

padding.

MfG ChrisB

Das Problem ist, das nur padding-left:

geht. Wenn ich aber paddig-right:
eingebe, dann passiert nichts.
Nach links geht es aber so weit der Bildschirm reicht.

[ChrisB]

Hi,

was an dem Hinweis, dass du bitte *sinnvoll* zitieren möchtest, ist noch erklärungsbedürftig?
Grußformeln gehören nicht zu dem, was zitierwürdig ist.

Das Problem ist, das nur padding-left:

geht. Wenn ich aber paddig-right:
eingebe, dann passiert nichts.
Nach links geht es aber so weit der Bildschirm reicht.

Damit wären wir wieder hier.

MfG ChrisB

[molily]

was an dem Hinweis, dass du bitte *sinnvoll* zitieren möchtest, ist noch erklärungsbedürftig?

Zum Beispiel »Was bedeutet sinnvoll zitieren?«.

Mathias

[Pixelräuber]

Damit wären wir wieder hier.

Wie deutlich soll ich es den schreiben? Der Text mit will Hilfe von padding-right kein mm platz machen. Auch wenn ich z.b. 500px eintrage.

[ChrisB]

Hi,

Damit wären wir wieder hier.

Wie deutlich soll ich es den schreiben?

Was begreifst du denn bspw. an

"Zeige den problematischen Quellcode! Entweder im Posting selbst oder mittels Link auf die betreffende Seite. Funktionierende Glaskugeln sind eine Rarität und bloßes Rätselraten erschwert eine schnelle und gute Hilfe."

bitte nicht?

MfG ChrisB

[Pixelräuber]

ich kannte den kürzel net xD

<!-- Anfang von #textfeld -->  
<div id="textfeld">  
<p>Fülltext</p>  
</div>  
<!-- Ende von #textfeld -->  

.div #textfeld {  
	margin-left: 270px;  
	margin-top: -16px;  
	padding-right: 5px;  
	padding-left: 5px;  
	background-image: url(../images/images_14.png);  
	min-height: 354px;  
	height: auto;  
	width: 508px;  
}

[Detlef G.]

Hallo Pixelräuber

<!-- Anfang von #textfeld -->

<div id="textfeld">
<p>Fülltext</p>
</div>
<!-- Ende von #textfeld -->

  
Das bewusste Div hat also die Id „textfeld”.  
  

>   
> `.div #textfeld {`{:.language-css}  
  
Hiermit sprichst du ein Element mit der Id „textfeld” an, das sich in einem Element mit der Klasse „div” befindet.  
So ein Element sehe ich in deinem HTML-Schnipsel nicht.  
  
  
Auf Wiederlesen  
Detlef  

-- 
- Wissen ist gut  
- Können ist besser  
  
- aber das Beste und Interessanteste ist der Weg dahin!

[Pixelräuber]

.div #textfeld {

Hiermit sprichst du ein Element mit der Id „textfeld” an, das sich in einem Element mit der Klasse „div” befindet.
So ein Element sehe ich in deinem HTML-Schnipsel nicht.

Auf Wiederlesen
Detlef

»»

Hallo Detlef!

Das ist schon richtig, ich habe nicht den ganzen code kopiert. Für dich mache ich das aber gerne.

<!-- Anfang von #textfeld -->  
<div id="textfeld">  
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. <br>  
<br>  
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <br>  
<br>  
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p>  
</div>  
<!-- Ende von #textfeld -->  
[/code
  
  
  
[code lang=css]@charset "utf-8";  
body {  
  font: 100% Verdana, Arial, Helvetica, sans-serif;  
  background: #fff;  
  margin: 0;  
  padding: 0;  
  text-align: center;  
  color: 000;  
}  
  
.div #container {  
  width: 778px;  
  height: auto;  
  min-height: 780px;  
  background: #000;  
  margin: auto;  
  border: 0;  
  text-align: left;  
}  
  
.div #kopfbereich {  
}  
  
.div #navigation {  
	float:left;  
	margin-top: -150px;  
	margin-left: -3px;  
}  
  
.div #navi16 {  
	float:left;  
	margin-left: 3px;  
}  
  
.div #kleinebox {  
	margin-left: -3px;  
	margin-top: -497px;  
}  
  
.div #fuellbox {  
	background-image: url(../images/images_19.png);  
	margin-left: -3px;  
	height: auto;  
	min-height: 109px;  
	width: 273px;  
}  
  
.div #textfeld {  
	margin-left: 270px;  
	margin-top: -16px;  
	padding-right: 5px;  
	padding-left: 5px;  
	background-image: url(../images/images_14.png);  
	min-height: 354px;  
	height: auto;  
	width: 508px;  
}

[Gunnar Bittersmann]

@@Pixelräuber:

nuqneH

Das ist schon richtig, ich habe nicht den ganzen code kopiert. Für dich mache ich das aber gerne.

<!-- Anfang von #textfeld -->
<div id="textfeld">
<p>Lorem ipsum dolor sit amet […]

Das kann unmöglich der gesamte HTML-Code sein.

[…] no sea takimata sanctus est Lorem ipsum dolor sit amet. <br>
<br>
Duis autem vel eum iriure […]

Und sinnvoll ist er auch nicht. Es sind mehrere Textabsätze, also mehrere 'p'-Elemente, nicht eins mit mehreren Zeilenumbrüchen hintereinander.

Die Passage sollte so aussehen:

[…] ~~~html no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Duis autem vel eum iriure

  
Und dann lies dir bitte [Detlefs Antwort](https://forum.selfhtml.org/?t=189027&m=1259204) nochmal GENAU durch.  
  
Qapla'

-- 
Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)

[Pixelräuber]

ok dann poste ich den ganzen code. Geht das überhaupt? Man hat doch sonst im Forum immer eine Zeilen sperre.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
<title>Unbenanntes Dokument</title>  
<link href="styles/style.css" rel="stylesheet" type="text/css" media="screen">  
</head>  
  
<body class="div">  
<!-- Anfang von #container -->  
<div id="container">  
  
<!-- Anfang von #kopfzeile -->  
<div id="kopfzeile"><img src="images/images_01.png">  
</div>  
<!-- Ende von #kopfzeile -->  
  
<!-- Anfang von #navigation -->  
<div id="navigation"><img src="images/images_04.png"><br>  
<img src="images/images_05.png"><br>  
<img src="images/images_06.png"><br>  
<img src="images/images_07.png"><br>  
<img src="images/images_08.png"><br>  
<img src="images/images_09.png"><br>  
<img src="images/images_11.png"><br>  
<img src="images/images_13.png"><br>  
<img id="navi16" src="images/images_16.png"><br>  
<img src="images/images_17.png"><br>  
<img src="images/images_18.png">  
</div>  
<!-- Ende von #navigation -->  
  
<!-- Anfang von #textoben -->  
<div id="textoben">  
<img src="images/images_10.png">  
<img src="images/images_12.png">  
</div>  
<!-- Ende von #textoben -->  
  
<!-- Anfang von #textfeld -->  
<div id="textfeld">  
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. <br>  
<br>  
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <br>  
<br>  
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p>  
</div>  
<!-- Ende von #textfeld -->  
  
<!-- Anfang von #kleinebox -->  
<div id="kleinebox">  
<img src="images/images_20.png">  
</div>  
<!-- Ende von #kleinebox -->  
  
<!-- Anfang von #floatbox -->  
<div id="fuellbox">  
</div>  
<!-- Ende von #floatbox -->  
  
</div>  
<!-- Ende von #container -->  
</body>  
</html>  

@charset "utf-8";  
body {  
  font: 100% Verdana, Arial, Helvetica, sans-serif;  
  background: #fff;  
  margin: 0;  
  padding: 0;  
  text-align: center;  
  color: 000;  
}  
  
.div #container {  
  width: 778px;  
  height: auto;  
  min-height: 780px;  
  background: #000;  
  margin: auto;  
  border: 0;  
  text-align: left;  
}  
  
.div #kopfbereich {  
}  
  
.div #navigation {  
	float:left;  
	margin-top: -150px;  
	margin-left: -3px;  
}  
  
.div #navi16 {  
	float:left;  
	margin-left: 3px;  
}  
  
.div #kleinebox {  
	margin-left: -3px;  
	margin-top: -497px;  
}  
  
.div #fuellbox {  
	background-image: url(../images/images_19.png);  
	margin-left: -3px;  
	height: auto;  
	min-height: 109px;  
	width: 273px;  
}  
  
.div #textfeld {  
	margin-left: 270px;  
	margin-top: -16px;  
	padding-right: 5px;  
	padding-left: 5px;  
	background-image: url(../images/images_14.png);  
	min-height: 354px;  
	height: auto;  
	width: 508px;  
}

so das ist jetzt mein ganzer code.

[Gunnar Bittersmann]

@@Pixelräuber:

nuqneH

ok dann poste ich den ganzen code.

Erwartest du, dass jemand damit dein Problem mühsam nachbaut? Verlinke deine Seite!

<body class="div">

Welchen Grund gibt es, dem 'body' eine Klasse zu geben? Was soll "div" aussagen?

Es ist du^W unklug, als Klassenbezeichner Elementbezeichner zu verwenden. Könnte zu Verwechslungen führen.

Qapla'

[Pixelräuber]

http://maxi-stieg.de/test/

Da bitte schön.

Bin halt neu hier...

Gruß

Pixelräuber

[Detlef G.]

Hallo Pixelräuber

ok dann poste ich den ganzen code.

Warum tust du das?
Es hätte greicht, wenn du uns verraten hättest, dass du body die Klasse „div” gegeben hast.
(Klassen, die Elementnamen entsprechen halte ich für sehr irreführend.)

.div #container {

width: 778px;

  
OK, 778px Breite.  
  

> ~~~css

.div #textfeld {  

> 	margin-left: 270px;  
> 	padding-right: 5px;  
> 	padding-left: 5px;  
> 	width: 508px;  
> }

Rechne mal margin, padding, und width zusammen! Fällt dir da etwas auf?

Überlege dir auch, ob die Breitenangebe wirklich nötig ist. Meist sind diese unnötig und sorgen nur dafür, dass solche Fehler passieren.

Auf Wiederlesen
Detlef

[Pixelräuber]

Es hätte greicht, wenn du uns verraten hättest, dass du body die Klasse „div” gegeben hast.
(Klassen, die Elementnamen entsprechen halte ich für sehr irreführend.)

Habe das jetzt geändert

.div #container {

width: 778px;

>   
> OK, 778px Breite.  
>   
> > ~~~css

.div #textfeld {  

> > 	margin-left: 270px;  
> > 	padding-right: 5px;  
> > 	padding-left: 5px;  
> > 	width: 508px;  
> > }

Rechne mal margin, padding, und width zusammen! Fällt dir da etwas auf?

Die Breite ist 6 Pixel zu klein vom ganzen.

Überlege dir auch, ob die Breitenangebe wirklich nötig ist. Meist sind diese unnötig und sorgen nur dafür, dass solche Fehler passieren.

Wenn ich die wight angaben weg mache, sieht das sehr komisch aus^^ Das Textfeld macht sich dann selber auf den weg.

Gruß

Pixelräuber

[Detlef G.]

Hallo Pixelräuber

OK, 778px Breite.

.div #textfeld {

margin-left: 270px;  
padding-right: 5px;  
padding-left: 5px;  
width: 508px;  

}

> >   
> > Rechne mal margin, padding, und width zusammen! Fällt dir da etwas auf?  
>   
> Die Breite ist 6 Pixel zu klein vom ganzen.  
  
? Kann ich etwa nicht mehr rechnen?  
  
  margin-left    270px  
+ padding-left     5px  
+ width          508px  
+ padding-right    5px  
+ margin-right     0px  
= Gesamtbreite   788px  
  
Wie kann das 6 Pixel zu klein sein?  
  

> Wenn ich die wight angaben weg mache, sieht das sehr komisch aus^^ Das Textfeld macht sich dann selber auf den weg.  
  
Nicht unbedingt alle width-Angaben weglassen, sondern nur die unnötigen.  
Wenn du ein Element hast, das abzüglich seiner Abstände (margin, padding) das Elternelement ausfüllen soll, dann sind Breitenangaben in der Regel überflüssig bzw. stellen nur eine zusätzliche Fehlerquelle dar.  
Lass doch einfach mal die width für #textfeld weg.  
  
  
  
Auf Wiederlesen  
Detlef  

-- 
- Wissen ist gut  
- Können ist besser  
  
- aber das Beste und Interessanteste ist der Weg dahin!

[Gunther]

Hi!

Weiß jemand wie das geht bei Text?

Ich empfehle:
<http://de.selfhtml.org/css/eigenschaften/randabstand.htm@title=Außenrand und Abstand>
http://de.selfhtml.org/css/eigenschaften/innenabstand.htm@title=Innenabstand

Gruß Gunther