zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Ein Logo über 2 Divs

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 13.03.2006, 21:56
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.09.2005
Beiträge: 38
bueno befindet sich auf einem aufstrebenden Ast
Standard Ein Logo über 2 Divs

Hallo!
Also ich habe folgendes design bis jetzt:


Ich möchte nun das Logo wie in dem Bild eingezeichnet einfügen. Also so links über dem oberen menü und dem linken....gibt es eine möglichkeit das Bild irgendwie "drüberzulegen"?

Die Menüs sind divs
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 13.03.2006, 22:26
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.858
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Hier liegt wahrscheinlich die Holzhammer-Methode nahe: das Bild als img id="logo" definieren (es für alle Fälle auch als display: block; darstellen, mache ich immer bei Logos), ihm position: absolute; zuweisen und dann top und left wie gewünscht angeben

Falls es sich in einem Container befindet, der horizontal zentriert ist, muß dieser noch position: relative; bekommen, damit sich das Bild an ihm ausrichtet und nicht am Body.

Schöne Grüße,
Heiko
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 13.03.2006, 22:38
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.09.2005
Beiträge: 38
bueno befindet sich auf einem aufstrebenden Ast
Standard

wie kann ich es top & left ausrichten?
left hab ich geschaft mit float:left;
und wie mach ich es zusätzlich noch top?
Mit Zitat antworten
  #4 (permalink)  
Alt 13.03.2006, 22:43
Benutzerbild von Lloyd Larkin
Don Quijote
XHTMLforum-Mitglied
 
Registriert seit: 19.11.2005
Ort: Wien
Beiträge: 733
Lloyd Larkin befindet sich auf einem aufstrebenden Ast
Standard

Mit
Code:
#logo { 
   position: absolute;
   left: 5px;
   top: 5px;
   display: block;
}
wäre es 5px links oben von der Ecke entfernt.
Mit Zitat antworten
  #5 (permalink)  
Alt 13.03.2006, 22:57
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.858
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von Lloyd Larkin
Mit
Code:
#logo { 
   position: absolute;
   left: 5px;
   top: 5px;
   display: block;
}
wäre es 5px links oben von der Ecke entfernt.
Genau so, diese 4 Angaben reichen (d.h. float ist nicht nötig). Grundsätzlich sollte man übrigens position: absolute; tunlichst vermeiden (und z.B. float bevorzugen), aber in diesem Falle ist es schon legitim.

Schöne Grüße,
Heiko
Mit Zitat antworten
  #6 (permalink)  
Alt 13.03.2006, 23:55
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.09.2005
Beiträge: 38
bueno befindet sich auf einem aufstrebenden Ast
Standard

So, hab das jetzt geschafft. Jedoch wird es nur im Firefox so angezeigt, wie ich es haben will.

Im IE schaut es so aus:


Und bei Opera sieht es so aus:


Ich wäre euch sehr dankbar wenn ihr mir dabei noch helfen könntet.

Achja und hier noch mein Code falls nötig:
Code:
<html>
<head>
<style type="text/css"><!--
#leftM {
width:132px;
height:495px;
float:left;
background-image:url(menue_links.jpg);
}

#obenM {
width:800px;
height:68px;
float:center;
background-image:url(menue_oben.jpg);
}

#partner{
width:148px;
height:385px;
float:right;
margin:20;
background-image:url(partner.jpg);
}

#logo{
top:20px;
left:232px;
display:block;
position: absolute;
}
//--></style>
	<title>www.voi.at - Österreichischer Verband der Ingenieure</title>
</head>

<body style="text-align:center;">

<div style="width:800px; height:600px;margin:0px auto;text-align:left;background-image:url(background.jpg);">


	<div id="obenM" style="clear:right;">
		<p style="margin:20px 0px;text-align:center">Menü</p>
	</div>
	

	<div id="leftM" style="clear:right;">
		<p style="margin:50px 0px;">Menü</p>
	</div>
	

	<div id="partner" style="clear:right;">
		<p style="margin:20px 0px;">Partner</p>
	</div>


 <div id="content">
 <p style="margin:50px 0px;">Inhalt</p>
 </div>
 
 
 [img]logo.jpg[/img]

<div>
	
</body>
</html>
Mit Zitat antworten
  #7 (permalink)  
Alt 14.03.2006, 00:12
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.858
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von bueno
Code:
#logo{
top:20px;
left:232px;
display:block;
position: absolute; }
Du richtest das Bild am Body aus, das kann nicht funktionieren, da der Container für den gesamten Inhalt horiziontal zentriert ist. Diesen Fall hatte ich ja vorhin bereits angesprochen, Du mußt dem Container ein position: relative; zuweisen (damit das Bild an ihm ausgerichtet wird) und dann die top- und left-Werte für das Bild entsprechend neu angeben.

Schöne Grüße,
Heiko
Mit Zitat antworten
  #8 (permalink)  
Alt 14.03.2006, 00:21
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.09.2005
Beiträge: 38
bueno befindet sich auf einem aufstrebenden Ast
Standard

aaaah, danke so langsam check ich das ganze mit relativer und absoluter positionierung...
Mit Zitat antworten
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
Fullscreen Container mit internen divs purewhite (X)HTML 1 02.11.2009 15:24
n Div's in eine Zeile Mustangore CSS 9 20.08.2009 15:19
[print.css] Logo drucken auch bei deaktivierten Hintergrundbildern? Rayne CSS 5 01.11.2008 16:03
Divs nebeneinander, aber mittig RomanM CSS 2 24.10.2007 06:32
Browser-Problem bei Positionierung von DIVs mickropixel CSS 3 20.09.2004 16:25


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