[CSS] News-Template für CSS (img rechts)

MarcDK · 12. Juli 2004

Hi Leute!

Ich breche mir hier gerade einen ab. Ich bin ja jetzt doch auf den Geschmack von CSS und XHTML gekommen und möchte auch so viel wie möglich damit machen.

Nur versuche ich die Darstellung von News so zu gestalten wie in meinem Anhang aber bekomme das irgendwie nicht hin.

Wenn ich das Bild ( wie auf CB ) auf "float" und "right" setze, klebt es immer recht sunten in der Ecke obwohl es von eim DIV-Tag umschlossen ist.

Was mache ich falsch?

hat mal gerade jmd. ein simples Beispiel dafür wie man das OHNE TABLE-TAG nur mit CSS hinbekommt.

EDIT:

Also es geht mir darum, dass der text dynamisch das Bild umfließt. Sonst würde ich ja einfach zwei DIV-tags machen und die nebeneinander legen aber das ist ja nicht sinn der Sache.

Stewi · 12. Juli 2004

Ich wiederhole mich nur ungern, aber hier solltest du auf jeden Fall etwas finden.

http://css.fractatulum.net/index.htm
http://www.css-technik.de/
http://einfachfueralle.de/links/tutorials/css/
http://www.wiedow.de/Index.aspx

Edit

Hab gerade nochmal etwas genauer geschaut, hier wird es genauer beschrieben:
http://css.fractatulum.net/sample/layout1format.htm

Die Gesamtbreite, wenn denn vorher angegeben, darf natürlich nicht die Breite deines definierten <div> überschreiten, dann kann er das ja nicht nebeneinander schreiben.

MarcDK · 12. Juli 2004

Cool, danke =)

denis_2kx · 12. Juli 2004

Dankeeee sowas hab ich auch schon lange gesucht

Man lernt also echt nie aus!

MarcDK · 12. Juli 2004

Ok, aber auf CB sieht das ja so aus:

PHP:

 <div class="content_item_index">
	<span class="s">04.07. | </span><a href="/artikel/hardware/prozessoren/athlon_64_coolnquiet/">HEADLINE</a><br>
	<a href="/artikel/hardware/prozessoren/athlon_64_coolnquiet/"><img src="https://pics.computerbase.de/1/3/6/0/6/4-1080.3105192035.png" width="116" height="87" alt="Athlon 64 mit Cool'n'Quiet" class="picture_right"></a>
	<div class="sb">HEADLINE</div>
TEXT
</div>

Da wurde das ganze ja mit einer Klasse für <img> gemacht und zwar "picture_right".

Hast Du mal gerade dafür ein Beispiel? Ich checke das irgendwie nicht und die Seite zeigt ja im Prinzip nur, dass sich div-Boxen auch überlappen können.

Wäre echt nett.

Stewi · 12. Juli 2004

Mal auf die Schnelle zusammengeschuster, sollte aber klappen.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>Testseite</title>
  <style type="text/css">
<!--
#box  {
	height: auto;
	background: #000063;
	color: #333333;
	border: solid #000000;
	font-weight: 500;
	padding: 20px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
-->
</style>

  </head>

  <body>

<div id="box">
  <div><span style="float:right;"><img src="images/testgif.gif" width="250" height="93" align="top"/></span> </div>
  <div><span style="color: #FFFFFF;">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro 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. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro 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.</span></div>
  </div>
  </body>
</html>

MarcDK · 12. Juli 2004

<meta name="generator" content="PSPad editor, www.pspad.com">

Cool, benutze ich auch. =)

Ja, cool! Dankeschön!

Mensch, heute sind alle im Forum so hilfbereit und nett. In meinem beiden Threads zum Thema php und css wurd emir heute echt super geholfen und habe sogar was gelernt. =)

Danke nochmal

ne0 · 12. Juli 2004

hier noch mal mit etwas weniger Elementen

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html {
  margin: 0;
  padding: 0;
}
body {
  margin: 0;
  padding: 0;
}
.box {
	height: auto;
	width: 400px;
	border: 1px solid #000;
	margin-top: 50px;
	margin-left: 50px;
	background-color: #CCDCCC;
}
.box img {
	float: right;
}
.box span {
	font-size: 20px;
}
</style>
</head>

<body>
<div class="box">
<img src="bildchen.jpg" alt="bilchen" />
  <span>
   	Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro 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. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro 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.
	</span>
</div>
</body>
</html>

Suche

[CSS] News-Template für CSS (img rechts)

MarcDK

Banned

Anhänge

Stewi

Space Cowboy

MarcDK

Banned

denis_2kx

Banned

MarcDK

Banned

Stewi

Space Cowboy

MarcDK

Banned

ne0

Cadet 2nd Year

Ähnliche Themen