CSS CSS Text neben Bild reicht nicht bis zum rechten Rand

UltraFancy · 20. März 2016

Hallo, ich habe folgendes Problem, ich möchte neben einem Bild einen Text schreiben und das Ganze in einer Box.
Soweit zu gut, aber der Text geht nicht ganz bis zum rechten Rand. Links soll er das ja nicht, wegen dem Bild, aber rechts kann er ruhig bis auf ein paar Pixel an den Rand.
Ich weiß nicht wie ich das hin bekomme..

HTML:

<html>
	<head>
			<title>Mein Dokoment</title>
			<link rel="stylesheet" type="text/css" href="style.css"/>
	</head>
	<body>
			<h1>Mein erstes Stylesheet</h1>
			<div class="test"; style="width: 1020px; padding: 20px; border: class="test";">
					<img class="links" src="images/holzpilz.jpg" alt="Holzpilz" width="200" high="100" />
					<h3 style="margin: 0 210px 0;">Pilze (Art.-Nr. 101)</h3>
					<br style="margin: 0 210px 0;">Preis: ab 6.00 &euro;</br>
					<br style="margin: 0 210px 0;">Material: Holz</br>
					<br style="margin: 0 210px 0;">Gr&ouml;&szlig;e: H&ouml;he ab 13 cm - 25 cm</br>
					<p></p>
					<p style="margin: 0 210px 0;">Die Pilze werden mit der Kettens&auml;ge aus versch. Baumst&auml;mmen in 2 Teilen angefertigt. Die Oberfl&auml;che des Pilzes ist s&auml;gerau und hat daher einen rustikalen Charme.</p>
					<p></p>
					<p style="margin: 0 210px 0;">Gr&ouml;&szlig;en</p>
					<ul style="margin: 0 210px 0;">
						<li>ca. 13-15 cm &Oslash;:&nbsp; 6,00 &euro; (Art.-Nr. 1011)</li>
						<li>ca. 16-20 cm &Oslash;:&nbsp; 8,00 &euro; (Art.-Nr. 1012)</li>
						<li>ca. 21-25 cm &Oslash;: 10,00 &euro; (Art.-Nr. 1013)</li>
					</ul>
					<p></p>
					<p style="margin: 0 210px 0;">Weitere Gr&ouml;&szlig;en auf Anfrage m&ouml;glich.</p>
			</div>
	</body>
</html>

CSS:

Code:

body {
	background-color: white;
}
h3 {
	font-size: 20px;
}	
.links {
	float: left;
	margin-right: 10px;
}
.test{
	border-width: 3px;
	border-style: groove;
	border-color: #8B8B8B;
	background: #F0F0F0;
}

Kann mir da einer von euch weiterhelfen?

Lawnmower · 20. März 2016

Testseite machen, hochladen und Link posten - so kann man nicht helfen.
Aber sicher mal ein Anhaltspunkt wären die ganzen Inline Styles mit margin-right von 210px.
Wiso machst Du eigentlich ein CSS wenn Du danach die ganzen Styles trotzdem Inline schreibst (z.B. div mit Klasse "test")?

kachiri · 20. März 2016

Das Problem ist das:

Code:

<br style="margin: 0 210px 0;">

Du fügst damit ein Margin sowohl Rechts, als auch Links ein. Daher der Abstand zum rechten Rand.

Kurzschreibweise
Bei der Kurzschreibweise reicht margin, und der oder die Wert(e).

Ein Wert
Abstand oben, unten, links und rechts
Zwei Werte
Der erste Wert für den Abstand oben und unten, der Zweite Wert für links und rechts
Drei Werte
Der erste Wert für den Abstand oben, der Zweite links und rechts und der Dritte unten
Vier Werte
Der erste Wert für den Abstand oben, der Zweite rechts, der Dritte unten und der Vierte links

Ich würde den Code einfach so aufbauen - und vor allem die Styles auch alle in der CSS festlegen:

Code:

<div id="container">
<img>
<div class="desc">
<h>Überschrift</h>
<p>Bla Bla Bla<br />Blabla<br /> la Blaaaaa</p>
<ul>
<li>Buh Bah Buh</li>
<li>Buu Buu Buu</li>
</ul>
<p>More Bla Bla Bla</p>
</div>
<br style="clear:both;" />
</div>

Das IMG halt via CSS nach Links "floaten".

UltraFancy · 20. März 2016

Lawnmower schrieb:
Testseite machen, hochladen und Link posten - so kann man nicht helfen.
Aber sicher mal ein Anhaltspunkt wären die ganzen Inline Styles mit margin-right von 210px.
Wiso machst Du eigentlich ein CSS wenn Du danach die ganzen Styles trotzdem Inline schreibst (z.B. div mit Klasse "test")?

Weil ich gerade erst mit dem lernen Anfange und noch nicht verstehe wo genau was hin darf und kann.. :S

kachiri schrieb:
Das Problem ist das:

Code:

<br style="margin: 0 210px 0;">

Du fügst damit ein Margin sowohl Rechts, als auch Links ein. Daher der Abstand zum rechten Rand.

Ich würde den Code einfach so aufbauen - und vor allem die Styles auch alle in der CSS festlegen:

Code:

<div id="container"> <img> <div class="desc"> <h>Überschrift</h> <p>Bla Bla Bla<br />Blabla<br /> la Blaaaaa</p> <ul> <li>Buh Bah Buh</li> <li>Buu Buu Buu</li> </ul> <p>More Bla Bla Bla</p> </div> <br style="clear:both;" /> </div>

Das IMG halt via CSS nach Links "floaten".

Danke, die Erklärung hat mir gefehlt

Jetzt klappts. (y)

Aber ich weiß nicht genau wie du das meinst mit dem id="container" und den anderen CSS Dateien, das verrutscht bei mir dann alles, wenn ich das versuche nach meinem Wissenstands einzutragen...

sverebom · 21. März 2016

Die Id solltest du nicht als als CSS-Selektor verwenden. Bringt auch keinen Performancegewinn und macht es nur schwerer mit CSS zu arbeiten, u.A. weil Ids nur einmal pro Dokument vergeben werden können. Klassen sind genauso schnell und universeller.

Außerdem solltest du HTML-Elemente nicht über die Tags referenzieren, sondern immer eine Klasse verwenden. Dafür gibt es zwei wesentliche Gründe:

1 - Browser lesen die Selektoren von Rechts nach links. Wenn du also bspw. einen Link als ".klasse a" selektierst, dann sucht der Browser zuerst alle Links (a-Tags) im Dokument und sortiert dann die aus, die deiner ".klasse" untergeordnet sind. Das ist langsam und ineffiezient. Bei einer kleinen Webseite macht das nicht viel aus, aber bei komplexeren Webseiten - etwa einem Forum oder ein Shop - kann sich das aufsummieren (vor allem wenn der Code an anderen Stellen ebenso ineffizient ist). Sei konsequent, schreibe immer effizienten CSS-Code.

2 - Vielleicht veränderst du deinen HTML-Code und verwendest für bestimmte untergordnete Überschriften den h4- statt des h3-Tags. Wenn du die zugehörigen CSS-Definition über den HTML-Tag selektierst, musst du auch den CSS-Selektor anpassen. Eine Klasse kümmert es nicht, mit welchem HTML-Tag sie verknüpft ist. Saubere Trennung von Design und Inhalt. Auch dies ist bei einem kleinen Dokument noch kein großes Problem, aber sobald du mit tausende Zeilen CSS-Code um dich wirfst, wirst du freiwillig auf eine klare und universelle Struktur mit Klassen für alle Elemente umsteigen.

Deine Selektoren sollten auch nicht zu spezifisch sein. Wenn du etwa ein HTML-Element sauber und sicher über ".parent .child" oder nur den Klassennamen selektieren kannst, dann belass es dabei und füge nicht noch weitere parent-Selektoren hinzu, denn dann muss der Browser noch eine Runde drehen um zu überprüfen, ob das selektiert Element ein child des zusätzlich angegeben Elements ist. #

Ich orientiere mich an der "BEM Naming Convention", lasse aber meist die Unterscheidung zwischen Block-Elementen und Modifiers außen vor. Wenn ich bspw. eine Navigation anlege, dann sieht das in der Regel wie folgt aus:

HTML:

<nav class="nav">
    <ul class="nav-list">
        <li class="nav-item"><a href="#" class="nav-link">Text</a></li>
        .... ....
    </ul>
</nav>

Das ist sehr vereinfacht. Die wesentlichen Vorteile erkennst du wahrscheinlich sofort. Alle Elemente sind logisch benannt, ich kann die HTML-Tags anpassen, ohne befürchten zu müssen, dass es mir den CSS-Code zerreißt, und der Browser muss für jedes Element nur einen Selektor finden und überprüfen (anstatt sich u.U. vom 'a' zum 'li' zum 'ul' bis zum übergeordneten Container durchwühlen zu müssen, eher sich sicher sein kann, das richtige Element gefunden zu haben).

Suche

CSS CSS Text neben Bild reicht nicht bis zum rechten Rand

UltraFancy

Cadet 4th Year

Lawnmower

Maître de cuisine

kachiri

Fleet Admiral

UltraFancy

Cadet 4th Year

sverebom

Vice Admiral

Ähnliche Themen