✔ positionierung einer grafik

Status
Nicht offen für weitere Antworten.
B

buddha

Erfahrenes Mitglied
Hi,
Ich möchte das Foto so positionieren das es bündig mit der Border ist. Habe schon ein paar Sachen probiert aber :confused:
Danke

Code: 
/* CSS Document */

#container { 
	width: 65%; height:5%;
	margin: 20px auto;
	background-color:#FFFFFF; border: #c19c5e ridge 1px;
}
#content { 
	padding-left:0px; background-image: url(../bilder/logo1.jpg); background-color: transparent; background-repeat:no-repeat; position: relative; 
	background-position:center;	
}
p {  font-family:Verdana, Arial, Helvetica, sans-serif; font-size:14px; padding-left:150px; padding-right:150px; color:#412d1f;}
.ptop { margin-top:60px;}
.pbottom { padding-bottom:50px;}
h3,h1 {color:#412d1f; font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:500;}
HTML: 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>TEST Startseite</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<link href="css/navigation.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="bilder/favicon.ico" type="image/x-icon" />
<style type="text/css">
<!--
body {
	background-color: #f0eee8; 
}
.Stil1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	position: relative;
	top: 0px;
}
.Stil3 {
	font-size: 24px;
	font-weight: bold;
	color: #000033;
}
#butterfly { position:relative; float:left; }
-->
</style>
</head>
<body>
<div id="butterfly"><img src="bilder/butterfly.gif" alt="butterfly" /></div>
<div id="container">
  <div align="center">
    <div id="content"><img src="bilder/logo1.jpg" alt="logo"/></div>
    <br />
    <br />
    <div id="header">
     </div>Hier kommen noch Links
  </div>
  <!--rggrgr -->
  <p class="ptop"><br />
    <br />
  </p>
  <h3 align="center" class="Stil1">Hallo <br />
    <br />
  </h3>
  <p>TEXT</p>
  <p class="pbottom"></p>
</div>
</body>
</html>
 

Anhänge

  • gehtnet.jpg
    gehtnet.jpg
    6,1 KB · Aufrufe: 15
Zuletzt bearbeitet:
Hi,

hierfür müssen sich die beiden Elemente in einem übergeordneten div-Element befinden, das im Viewport horizontal zentriert ist.
 
Hi,

Im FF schaut es gut aus, im IE ist die Grafik ca.1cm nach links versetzt. Aber eine Sache passt nicht , wenn die Auflösung geändert wird bleibt der Schmetterling auf seiner Position. Da dieser weder im Container oder Content liegt gibt es trotzdem eine Möglichkeit das der Schmetterling auf der Border "kleben " bleibt egal welche Auflösung/Browser?
Gruß
 
Hi,
Um allen aus dem Weg zu gehen habe ich dem Body ein margin/padding 0 verpasst, aber das war auch nicht der bringer

Code: 
#container { 
	width: 65%; height:5%;
	margin: 20px auto;
	background-color:#FFFFFF; border: #c19c5e ridge 1px;
}
#content { 
	padding-left:0px; background-image: url(../bilder/logo1.jpg); background-color: transparent; background-repeat:no-repeat; position: relative; 
	background-position:center;	
}
p {  font-family:Verdana, Arial, Helvetica, sans-serif; font-size:14px; padding-left:150px; padding-right:150px; color:#412d1f;}
.ptop { margin-top:60px;}
.pbottom { padding-bottom:50px;}
h3,h1 {color:#412d1f; font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:500;}


HTML: 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>TEST Startseite</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<link href="css/navigation.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="bilder/favicon.ico" type="image/x-icon" />
<style type="text/css">
<!--
body {
	background-color: #f0eee8; margin: 0px; padding: 0px;
}
.Stil1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	position: relative;
	top: 0px;
}
.Stil3 {
	font-size: 24px;
	font-weight: bold;
	color: #000033;
}
#butterfly { position: relative; float:left; top: 350px; left:192px; margin-right:0px; }
-->
</style>
</head>
<body>
<div>
  <div id="butterfly"><img  src="bilder/butterfly.gif" alt="butterfly" /></div>
  <div id="container" >
    <div align="center">
      <div id="content"><img src="bilder/logo1.jpg" alt="logo"/></div>
      <br />
      <br />
      <div id="header">
        <ul>
          Hier Links
        </ul>
      </div>
    </div>
    <p class="ptop"><br />
      <br />
    </p>
    <h3 align="center" class="Stil1">Hallo <br />
      <br />
    </h3>
    <p>TEXT</p>
    <p class="pbottom"></p>
  </div>
</div>
</body>
</html>
 
Ich hatte dir doch empfohlen, die Elemente in einem übergeordnten Element einzubinden (vorzugsweise das DIV container), das im Fenster horizontal zentriert ist.

Mit der derzeitigen Positionierung des DIVs butterfly zum linken Elementrand (=Fensterand) wirst du nie zu einem befriedigenden Ergebnis kommen, da ja sein umfliessendes Element DIV container im Browserfenster horizontal zentriert ist, und somit beim Skalieren der Fensterbreite seine Position zum linken Fensterrand verändert.

Ein bischen mehr Mitdenken darfst du ruhig auch mal.
 
Hi,
Hat geklappt, brauchte kein neues div. Der Fehler lag an der Positionierung des div=butterfly.
Gruß
 
Schön. Kannst du auch bitte deine Lösung zeigen, denn die würde mich (und zukünftige Hilfesuchende sicherlich auch) interessieren.

In meiner Signatur findest du noch eine zweite Bitte. Vielen Dank ;)
 
Also bei mir klappts bei jeder Auflösung, als Browser FF & IE7. Hier der Code.
PS: welche Signatur?

HTML: 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>TEST</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<link href="css/navigation.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="bilder/favicon.ico" type="image/x-icon" />
</head>
<body>
<div id="container" >
  <div >
    <div id="butterfly"><img  src="bilder/butterfly.gif" alt="butterfly" /></div>
    <div  align="center" id="content"><img src="bilder/logo1.jpg" alt="logo" /></div>
    <br />
    <br />
    <div id="header">
      <ul>
        <li><a href="#">Test</a></li>
        </ul>
    </div>
  </div>
  <h3 class="h3top" >Hallo und Willkommen</h3>
  <p class="ptop">Hier Text-bei einem Absatz wird pbottom separat ausgeführt</p>
  <p class="pbottom"></p>
</div>
</body>
</html>
Code: 
/* CSS Document */

#container { 
	width: 65%; height:5%; 
	border:#776655 ridge 1px;
	margin: 40px auto auto auto;
	background-color:#FFFFFF;}
#content {
	background-repeat:no-repeat;
	background-position:center;
	position: relative;
	left: -55px;
	top: 10px;}
p{ 
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px; 
	color: #2d3930; 
	padding:0 150px 0 150px;
	text-align:left;}
.h3top { 
	margin-top:50px;}
.ptop {
	margin-top:25px;}	
.pbottom { 
	padding-bottom:30px;}
h3,h1 { 
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:16px; 
	color: #2d3930; 
	letter-spacing: 1px; 
	padding-top:45px; 
	padding-left:150px; 
	font-weight: bolder;
	text-align:left;}
body { 
	background-color: #f0eee8;}
.Stil1 { 
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size: 16px; position: 
	relative; top: 0px; }
#butterfly {
	float:left;
	position: relative;
	left: -100px;
	top: 234px;
}
.Stil8 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: large;}
 
Zuletzt bearbeitet:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück