zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS: Grafiken per CSS einbinden und deren Ausrichtung

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 19.08.2005, 12:51
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.06.2004
Beiträge: 27
sancho befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 19.08.2005, 12:54
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 23.03.2005
Beiträge: 1.032
Swoop befindet sich auf einem aufstrebenden Ast
Standard

kannst du mal deinen code dazu zeigen?

das ist freilich möglich..
__________________
Shibby.....

Mein Blog
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 19.08.2005, 13:45
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.06.2004
Beiträge: 27
sancho befindet sich auf einem aufstrebenden Ast
Standard

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>
Und das der CSS-Datei
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 }
Is noch nicht viel... aber vll sind ja jetzt schon Verbesserungen zu machen! Bin für jeden Hinweis dankbar

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
Mit Zitat antworten
  #4 (permalink)  
Alt 23.08.2005, 22:25
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.06.2004
Beiträge: 27
sancho befindet sich auf einem aufstrebenden Ast
Standard

*vorsichtignachobenschieb*
Mit Zitat antworten
  #5 (permalink)  
Alt 23.08.2005, 22:42
Philippp
Gast
 
Beiträge: n/a
Standard

Du kannst das getrennt machen:
Code:
background-image:url(bild.jpg); 
background-repeat:no-repeat; 
background-position:90% 50%;
background-attachment:fixed;
Oder als Kurzform für Background:
Code:
background:#fff url(bild.jpg) fixed no-repeat 90% 50%;
Zum Nachlesen: http://www.css4you.de/background.html ... ist wohl ausbaufähig
Gruß, Philippp
Mit Zitat antworten
  #6 (permalink)  
Alt 23.08.2005, 22:44
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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
Mit Zitat antworten
  #7 (permalink)  
Alt 24.08.2005, 00:07
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.06.2004
Beiträge: 27
sancho befindet sich auf einem aufstrebenden Ast
Standard

Also erstmal danke an alle:

Ich habe mal die Dinge von fricca aufgenommen und einige Dinge verändert:

Zitat:
- eine id #body ist Unsinn - du kannst body über den Type-Selector ansprechen.
ERLDIGT

Zitat:
- absolute Positionierung brauchst du hier nicht - beschäftige dich mit der float-Eigenschaft, wenn du Elemente nebeneinander bringen willst
ERLEDIGT

Zitat:
- ein Bild braucht kein div außenrum
Okay... aber wie soll ich es dann positionieren etc.????

Zitat:
- 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
Werd ich mich mal mit auseinandersetzten und ggf. Änderungen vornehmen!

Zitat:
- z-index wirkt sich nur auf positionierte Elemente aus (wozu hast du überhaupt z-index-Werte angegeben?)
ERLEDIGT

Zitat:
- verzichte auf veraltete HTML-Attribute (align) - dafür gibt's CSS
Wird überarbeitet

Zitat:
- verwende einen Doctype, der die Browser nicht in den Quirks-Mode setzt
Doctype-Switch
Nutze ich den vollständigen doctype, kommt es zu Darstellungsproblemen im IE

Zitat:
- das leere style-Element im head kannst du rausnehmen
ERLEDIGT[/quote]
Mit Zitat antworten
  #8 (permalink)  
Alt 24.08.2005, 00:18
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von sancho
Zitat:
- ein Bild braucht kein div außenrum
Okay... aber wie soll ich es dann positionieren etc.????
Warum willst es positionieren?
Außerdem: ein img-Element ist ein Element wie alle anderen auch - d.h. CSS-Eigenschaften lassen sich anwenden...

Zitat:
Zitat von sancho
Nutze ich den vollständigen doctype, kommt es zu Darstellungsproblemen im IE
Das halte ich für einen Irrtum.
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
Mit Zitat antworten
  #9 (permalink)  
Alt 24.08.2005, 07:15
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.06.2004
Beiträge: 27
sancho befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Außerdem: ein img-Element ist ein Element wie alle anderen auch - d.h. CSS-Eigenschaften lassen sich anwenden...
Also das ganze über "style=...." machen?

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
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 24.08.2005, 11:08
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von sancho
Also das ganze über "style=...." machen?
Nein, nicht über inline-Styles sondern über einen geeigneten Selektor. Wenn keine andere Möglichkeit besteht, kannst du auch einem img-Element eine ID oder eine Klasse geben.

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?
Wo ist die aktuelle Version denn zu sehen?
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
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:21 Uhr.