• Das kreative Thema des Monats Oktober wird vor allem diejenigen unter Euch besonders ansprechen, denen Do-it-yourself quasi im Blut liegt. Zeigt uns Eure Improvisationskünste oder fotografiert, was andere Leute sich so im Alltag zusammengestrickt haben. --> Zum Mitmachen bitte hier klicken

Problem mit CSS Formatierung

wapplegraph

wapplegraph

Normande
Registriert
12.04.06
Beiträge
571
Hallo

Habe ein Problem bei der Formatierung der divs.

Das Unschoene sollte auf einen Blick zusehen sein:
Hier online

Das ganze seht ihr hier:
das fette klappt nicht!

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Documento sin t&iacute;tulo</title>

<style type="text/css">

a:link { color:#FFFFCC; }
	a:visited { color:#FFFFCC; }
	a:active { color:#FFFFFF; }

div#name {

text-align:center;
color:#FFFFCC;
font-family:American Typewriter;
width:150px;
height:110px;
float:left;
margin-top:10px
}

div#bild	{
margin-left:40px;
margin-top:150px
}


</style>
</head>

<body style="background-color:#000000">

<table align="center" width="520px" style="font-family:American Typewriter;font-size:12pt;color:#FFFFCC;margin-top:30px">


		<tr align="center" valign="middle" style="height:30px;font-weight:bold">
			<td width="80" style="background-color:#CC534B"><a href="../../index.html">Inicio</a></td>
			<td width="70" style="background-color:#256CA2">Fotos</td>
			<td width="120" style="background-color:#2E1FBF"><a href="cirriculum.html">Curriculum</a></td>
			<td width="100" style="background-color:#844E73"><a href="contacto.htm">Contacto</a></td>
			<td width="70" style="background-color:#7B0006">Precios</td>
			<td width="80" style="background-color:#E6A802">Enlaces</td>
		</tr>
		
</table>
		
<div style="margin-top:150px;margin-left:250px;float:left">
<a href="botellas/daten.htm"><img src="../../fotos%20pg.%20web/botellas/botellasSonnestube192g.jpg" height="110px" width="150px"></a>
</div>

<div id="bild" style="float:left">
<a href="cortezas/daten.htm"><img src="../../fotos pg. web/cortezas/corteza117.jpg" height="110px" width="150px"></a>
</div>

[B]<div style="margin-left:40px;margin-top:150px">
<a href="onirico/daten.htm"><img src="../../fotos pg. web/onírico/Arboles2.jpg" height="110px" width="150px"></a>
</div>[/B]


<div  id="name" style="margin-left:250px ">
Botellas</div>

<div  id="name" style="margin-left:40px ">
Cortezas</div>

[B][COLOR="Red"]<div id="name" style="float:none ">
Onírico</div>
[/COLOR][/B]

<div style="margin-left:250px;margin-top:50px;float:left">
<a href="paletas/daten.htm"><img src="../../fotos pg. web/paletas/paletaVIII_06_47.jpg" height="110px" width="150px"></a>
</div>
		
<div style="margin-left:40px;margin-top:50px;float:left">
<a href="plantas/daten.htm"><img src="../../fotos pg. web/plantas/adornosatardecer94g.jpg" height="110px" width="150px"> </a>
</div>

[B]<div style="margin-top:50px;margin-left:40px">
<a href="reflejos/daten.htm"><img src="../../fotos pg. web/reflejos/reflejo3.jpg" height="110px" width="150px"></a>
</div>
[/B]
<div id="name" style="margin-left:250px ">Paletas</div>

<div id="name" style="margin-left:40px ">Plantas</div>

<div id="name">Reflejos</div>

</body>
</html>

Seht ihr einen Fehler oder koennt ihr mir sonst irgendwie helfen? Sollte heute unbedingt in ordnung sein.

Noch etwas, im Firefox werden die Fotos gelb umrandet, wegen der Link definition, wie kein ich die ausnehmen aus der Definition?


Danke wapplegraph
 
Hallo,

kann Dir leider nur bei den nichtgewünschten Bildrahmen helfen...

Pack das hier in Deine CSS Datei oder wie hier in die CSS Definition:

img {
border:none;
}

Et voila, keine ungewollten Rahmen mehr :-)


Gruß

Klaus
 
ja, du muss z.b. die attribute/parameter mit einem ";" abschließen. du schreibst z.b. style="float:none " richtig muss es heißen style="float:none;"
 
Beim Rahmen Danke!

Doch das andere bringt irgendwie gar nichts!

Bitte immer noch um Hilfe wapplegraph
 
HerrUbermann schrieb:
ja, du muss z.b. die attribute/parameter mit einem ";" abschließen. du schreibst z.b. style="float:none " richtig muss es heißen style="float:none;"
Zum Vergrößern anklicken....

... nicht, wenn es die jeweils letzte Angabe ist; dann braucht kein abschließendes Semikolon verwendet zu werden. Somit ist style="property: value;" identisch mit style="property: value".
 
Du kannst dem dritten Bild (Arboles2) ebenfalls die Eigenschaft "float: left" zuweisen, dann würde der Aufbau funktionieren. Übrigens kannst Du solche Eigenschaften ebenso den Bildern direkt zuweisen, die DIVs wären dann unnötig.
 
Funktioniert leider nicht.
Jetzt ist nur das 6. Bild hochgerutscht!

Vielleicht braucht es noch irgend eine Kleinigkeit.
 
Hilarious schrieb:
... nicht, wenn es die jeweils letzte Angabe ist; dann braucht kein abschließendes Semikolon verwendet zu werden. Somit ist style="property: value;" identisch mit style="property: value".
Zum Vergrößern anklicken....

Es ist korrekt, daß man beim letzten Attribut nicht zwingend einen Strichpunkt setzen muß, es ist jedoch auch guter Stil und sinnvoll es trotzdem zu tun. Dann kann man nämlich nicht darauf vergessen ihn zu ergänzen wenn man unten noch weitere Properties dazuschreibt.


American Typewriter mußt Du unter Anführungszeichen setzten, da dieser Font ein Leerzeichen im Namen enthält. Du solltest auch alternative Zeichensätze als Fallback, sowie generische Font Families angeben für Systeme auf denen "American Typewriter" nicht installiert ist. (zB: Courier, "Courier New", Typewriter, Monospaced)

Style unbedingt in eine eigene Datei verfrachten, sonst verlierst Du sehr schnell alle Vorteile von CSS. Ganz besonders wenn Du mal was ändern möchtest.
Gruß Pepi
 
Danke

Das ist gut und recht. Habe auch dann. wenn ich mit PHP beginne,vor alles in einzelne Sites zu unterteilen, damit ich fuer alles nur eine aenderung brauche.

Doch das Problem mit der Aufteilung, besteht noch!

wapplegraph
 
wapplegraph schrieb:
Danke

Das ist gut und recht. Habe auch dann. wenn ich mit PHP beginne,vor alles in einzelne Sites zu unterteilen, damit ich fuer alles nur eine aenderung brauche.

Doch das Problem mit der Aufteilung, besteht noch!

wapplegraph
Zum Vergrößern anklicken....

Du musst zunächst verstehen, was "float" bedeutet und warum man soetwas einsetzt, sofern Du die WebSite wirklich selbst machen möchtest ;) Ich scheue mich hier, mir fertigen Lösungen den Code aufzuräumen, der vieles enthält, was aktuelle oder spätere Fehlerquellen sind. Reduziere doch einmal alles bis auf die Bilder. Anschliessend kannst Du Dir bei anderen Lösungen etwas abschauen und verstehst auch schneller, warum es so aussieht, wie es aussieht, und warum »alles fliesst«, und wie man den Fluss verändert. Wenn Du damit nicht schnell genug klar kommst, musst Du nach anderen Lösungen suchen, wenn bei Dir die Uhr tickt. Sorry ;)
 
du solltest mit bildkomprimierung arbeiten; denn deine bilder dauern selbst bei dsl zu lange um geladen zu werden.

bei den verwendeten bildern reicht die qualität eines 50% jpegs noch vollkommen aus, das ist besser für den user und auch für deinen traffic ;-)
 
Hallo

Also vergesst alles das erste von meiner foto Site.
Habe da ein bisschen misst zusammen geschrieben. Habe das float total falsch verstanden. Habe ein Beispiel gesehen, und daraus, falsch intepretiert.

So nun habe ich aber eine Frage:

Zuerst mein Code:

Code: 
<body style="background-color:#000000">

<img src="../../fotos pg. web/botellas/botellasSonnestube299g.jpg" height="110px" width="150px " style="position:absolute;top:150px;left:40px;">



<img src="../../fotos pg. web/cortezas/corteza117.jpg" height="110px" width="150px" style="position:absolute;top:150px;left:230px;">


<img src="../../fotos pg. web/onirico/Arboles2.jpg" height="110px" width="150px" style="position:absolute;top:150px;left:420px;">


Habe jetzt alles mit position:absolute gemacht. Doch dies finde ich umständlich mit dem Abstand von links, denn ich habe jetzt immer ausgerechnet den genauen Abstand. Gibt es einen Trick, damit ich vom linken oder vom rechten Foto aus rechnen kann?


Edit: Kann ich, wenn ich z.B. 3 Fotos gemacht habe, positioniert, sie wie zu einem Objekt verschmelzen und dann dieses Objekt, wieder positionieren?


wapplegraph
 
Zuletzt bearbeitet:
Also zur 2. Frage.
Habe z.B. 3 img diese habe ich zueinander positioniert, und jetzt möchte ich alle diese drei einmitten. D.h. die Mitte vom mittleren img ist in der Mitte von der Site.

wapplegraph
 
wapplegraph schrieb:
Also zur 2. Frage.
Habe z.B. 3 img diese habe ich zueinander positioniert, und jetzt möchte ich alle diese drei einmitten. D.h. die Mitte vom mittleren img ist in der Mitte von der Site.

wapplegraph
Zum Vergrößern anklicken....

Ich würde es nicht unbedingt mit absoluter Positionierung machen, sondern weiterhin den Browser die Positionierung übernehmen lassen. Das ist nämlich immer dann der Fall, wenn man relative Angaben macht und dadurch den Browser arbeiten lässt, was meines Ansicht nach der einfachste und angenehmste Weg sein dürfte.

Ich habe Dir mal ein Beispiel gebaut, wie ich es angehen würde: Meinem Dokument (»body«) gebe ich die Anweisung, alle Objekte zentriert auszurichten. Dies ist vor allem für den MSIE in diesem Fall notwendig.

Nun spanne ich eine Fläche auf, die meine Bühne ist (»div#buehnefrei«). Dies ist nicht unbedingt notwendig, aber vielleicht ganz praktisch für später. Dieser Fläche weise ich die ID mit dem Namen »buehnefrei« zu und gebe ihr zur Illustration eine Hintergrundfarbe (hellblau).

Innerhalb dieser Fläche würden die sechs Bilder bis jetzt noch soweit wie möglich nebeneinander angeordnet. Bleibt nach rechts kein Platz mehr, wird ein Umbruch erzwungen und eine neue Reihe mit Bilder wird begonnen. Das kann ich gut nutzen, wenn ich es steuern kann. Also spanne ich um die ersten drei Bilder und um die nächsten drei je eine Fläche (»div.reihe«). Da ein DIV-Tag ein Block-Tag ist, brauche ich für einen Zeilenumbruch nun nicht mehr zu sorgen, denn Block-Tags bilden immer einen eigenen »Absatz«.

Damit man die Reihen gut sieht, gebe ich den Reihen einen grünen Hintergrund und weise der Reihe eine feste Breite zu. Da ich diese Definitionen mit Hilfe einer Klasse vordefiniert habe, wird dies auf alle DIVs angewenden, denen diese Klasse zugewiesen wurde. Weiter oben habe ich das so ähnlich mit einer ID gemacht, aber der Sinn von IDs erlaubt nicht die mehrfache Verwendung, da es sich bei Objekt mit einer ID um ein originäres Objekt handeln sollte, damit ich es beispielsweise fehlerfrei über das DOM (Document Object Model) identifizieren und ggf. beeinflussen kann.

Meine beiden Reihen (es können auch viel mehr sein), sind nun also alle 300 Pixel breit, nun sollen die beiden Reihen auch in der Mitte der Seite stehen. Dies wird damit erreicht, indem ich für diese Reihen den rechten und linken Außenrand automatisch generieren lasse (»margin: 1em auto;«, entspricht: oben und unten 1em, rechts und links automatisch). Das führt praktischerweise zu einem gleichmäßigen Ergebnis, sprich, die Fläche der Reihe steht nun in der Mitte. Damit das auch mit dem MSIE funktioniert, benutze ich zusätzlich die Eingeschaft »text-align: center« bei dem nächst-äußeren Objekt oder bei »body«.

Innerhalb meiner Reihen stehen nun die Bilder zu dritt nebeneinander. Jetzt möchte ich nur noch, dass die Bilder ein wenig Abstand zueinander haben und eine weißen dünnen Rand bekommen. Das ist schnell formuliert und schon steht's.

Du kannst Du dazugehörigen Daten bei mir als Beispiel herunterladen. Ein Screenshot vom Ergebnis soll nicht fehlen. Jetzt hoffe ich nur noch, dass ich Dich richtig verstanden habe. Wenn nicht, war's hoffentlich interessant:

wapplegraph.screenshot.png


Download der Quellen, Beispielbilder.

Und noch schnell der Code zum Gucken:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
		<title>Wapplegraph</title>
		<style type="text/css" media="screen"><![CDATA[
body { color: black; background-color: white; text-align: center; margin: 0; }
div#buehnefrei { background-color: #cdebff; }
div.reihe { background-color: #bee969; text-align: center; width: 300px; margin: 1em auto; padding: 0; }
div.reihe img { background-color: #f0f; margin: 1em; border: solid 1px white  }
]]></style>
	</head>

	<body>
		<h1>Bilder positionieren</h1>
		<div id="buehnefrei">
			<div class="reihe">
				<img src="bild1.jpg" alt="" height="38" width="50" /><img src="bild2.jpg" alt="" height="38" width="50" /><img src="bild3.jpg" alt="" height="38" width="50" /></div>
			<div class="reihe">
				<img src="bild4.jpg" alt="" height="38" width="50" /><img src="bild5.jpg" alt="" height="38" width="50" /><img src="bild6.jpg" alt="" height="38" width="50" /></div>
		</div>
	</body>

</html>
 
Ja Danke

Das nenne ich mal eine Antwort.
Danke vielmals.

Vorhin habe ich die Seite auch gemacht und das aber nicht ganz so vorbildlich, doch es klappt.

Link


Doch ich kann dies gut gebrauchen Merci.

wapplegraph
 
wapplegraph schrieb:
Ja Danke

...
Vorhin habe ich die Seite auch gemacht und das aber nicht ganz so vorbildlich, doch es klappt.

Link

...

wapplegraph
Zum Vergrößern anklicken....

Darauf kommt es letztlich an. Später kannst Du ja mal Deinen Quelltext bei validome.org untersuchen lassen und Dich mit den dortigen Anforderungen beschäftigen, aber wenn Du damit erstmal zufrieden bist, ist das schon mal ein guter Anfang. :-D
 
So nun habe ich es trotzdem auf deine Art Hilarious gemacht, da ich gemerkt habe, dass es mir nicht schön eingemittet hat, und nicht beweglich war.

Die Website ist nun in einem guten Zustand, nur die grossen Fotos, noch nicht.


Danke für alles wapplegraph
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
2003-2026 Apfeltalk | Made on a Mac
Oben Unten