|
|||
CSS: Grafiken per CSS einbinden und deren Ausrichtung
Moin,
Ich möchte gerne ein Bild positionieren. Allerdings richtet sich ja diese immer nach dem Elterelement aus (in meinem Fall dem <body>-Tag. Gibt es eine Möglichkeit diese Ausrichtung am Elternelement zu umgehen und das Bild frei auszurichten bzw. zu positionieren?! Gruß sancho |
Sponsored Links |
|
|||
Das is der Code der "Hauptdatei"
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <TITLE>Sylt besuchen, Sylt erleben, Sylt geniessen</TITLE> <link rel="stylesheet" type="text/css" href="css/home.css"> <style type="text/css"> </style> </head> <body id="body"> <div id="logo">[img]pictures/silouette3.gif[/img]</div> <div id="top"><p align="center">top</p></div> <div id="main"><p align="center">main</p></div> <div id="left"><p align="center">left</p></div> </body> </html> Code:
#body{ background-color:#ffffff; width:64%; height:100%; margin-top:10px; margin-left:auto; margin-right:auto; border:dashed 1px #000000; z-index:0; } #logo { position:absolute; margin-top:0px; margin-left:15px; z-index:4; width:50%; height:50%; } #top{ background-color:#ffffff; width:99,9%; height:15%; margin-top:0px; border:dashed 1px #000000; z-index:1; } #left{ position:absolute; background-color:#ffffff; width:15%; height:84%; margin-top:5px; border:dashed 1px #000000; z-index:2; } #main{ position:absolute; background-color:#ffffff; width:48.3%; margin-top:5px; margin-left:15.6%; height:84%; border:dashed 1px #000000; z-index:3; } a:link { color:#000000; text-decoration:none; } a:visited {color:#cccccc; text-decoration:none; } a:hover { color:#000000; text-decoration:none; } a:active { color:blue; } p { margin-top: 0 } Gruß sancho ---- Hab mir mal erlaubt die Meta Angaben zu löschen. Da die für das Aussehen der Seite nicht wichtig sind, sind sie quasi überflüssig. Beim nächsten mal bitte nicht angeben. Gruß, Philippp |
|
|||
Du kannst das getrennt machen:
Code:
background-image:url(bild.jpg); background-repeat:no-repeat; background-position:90% 50%; background-attachment:fixed; Code:
background:#fff url(bild.jpg) fixed no-repeat 90% 50%; Gruß, Philippp |
|
|||
Einige Hinweise, wie gewünscht:
- eine id #body ist Unsinn - du kannst body über den Type-Selector ansprechen. - absolute Positionierung brauchst du hier nicht - beschäftige dich mit der float-Eigenschaft, wenn du Elemente nebeneinander bringen willst - ein Bild braucht kein div außenrum - wenn du "Freiheit" beim Positionieren willst, dann lass den body wie er ist (ohne Breite usw.) und setz um alles ein div #wrap , dem du die gewünschten Eigenschaften gibst - z-index wirkt sich nur auf positionierte Elemente aus (wozu hast du überhaupt z-index-Werte angegeben?) - verzichte auf veraltete HTML-Attribute (align) - dafür gibt's CSS - verwende einen Doctype, der die Browser nicht in den Quirks-Mode setzt Doctype-Switch - das leere style-Element im head kannst du rausnehmen Grüße fricca |
|
||||||||
Also erstmal danke an alle:
Ich habe mal die Dinge von fricca aufgenommen und einige Dinge verändert: Zitat:
Zitat:
Zitat:
Zitat:
Zitat:
Zitat:
Zitat:
Zitat:
|
|
|||
Zitat:
Außerdem: ein img-Element ist ein Element wie alle anderen auch - d.h. CSS-Eigenschaften lassen sich anwenden... Zitat:
Welche Darstellungsprobleme meinst du konkret? [der IE5 ist sowieso immer im Quirks-Modus - der IE6 ist IMHO im Standards-Mode besser zu handeln, weil er weniger Fehler hat. Zudem gibt es auch noch CSS-Hacks und Conditional Comments...] Es ist nicht notwendig alle Browser in den Quirks-Modus zu schicken, wenn du nur den IE meinst. weiterer Lesestoff |
|
|||
Zitat:
btw. schau dir mal die Site im IE und im FF an! Da sind inzwischen schon extreme Darstellungsprobleme vorhanden! Frage ist nur, was mache ich falsch, dass es so anders dargestellt wird? Gruß sancho |
Sponsored Links |
|
|||
Zitat:
Zitat:
In welchem IE gibt's Darstellungsprobleme? BTW: wenn's im FF passt und im IE nicht, liegt das vermutlich nicht an deinen Fehlern sondern an denen des IE Box-Modell-Bug IE Bug-Sammlung |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Zentrieren von per CSS animierten Bilden | Kurtus | CSS | 7 | 02.07.2018 21:29 |
Komplexe Grafiken in CSS erstellen - Browsersupport? | RaBo | CSS | 3 | 22.10.2015 08:30 |
Problem mit Menü per CSS | jippel | CSS | 1 | 31.07.2008 21:53 |
CSS Grafiken dynamisch einbinden | Jacky | CSS | 6 | 17.08.2004 16:58 |
mouseover und grafiken mit css??? | galaxy | CSS | 7 | 21.03.2004 22:56 |