Hallo,
ich bekomme es einfach nicht hin, links oder rechts vom Container eine Div zu positionieren, die bei jeder Bildschirmgröße proportional bleibt.
Bei mir sieht alles okay aus. Bei anderen Größen verschiebt sich der Div, sodass es dann auf der rechten gar nicht mehr zu sehen ist, weil man scrollen müsste.
Als Notlösung habe ich die Div von links aus positioniert. Wenn ich es auf die linke Seite positinioniere, verdeckt der Div den Container, worin Navi bzw. Content drin sind.
Hier die CSS:
Release soll rechts oder links vom Container (Container oder Main?!) erscheinen.
Zurzeit wie gesagt:
position:absolute;
left: 1380px;
Ich habe es mit float versucht.
Main und Container float:left
Release: float: right;
Dann verschiebt sich der Inhalt nach unten.
Hier die HTML Notlösung im Footer:
Weiß jemand Rat?
ich bekomme es einfach nicht hin, links oder rechts vom Container eine Div zu positionieren, die bei jeder Bildschirmgröße proportional bleibt.
Bei mir sieht alles okay aus. Bei anderen Größen verschiebt sich der Div, sodass es dann auf der rechten gar nicht mehr zu sehen ist, weil man scrollen müsste.
Als Notlösung habe ich die Div von links aus positioniert. Wenn ich es auf die linke Seite positinioniere, verdeckt der Div den Container, worin Navi bzw. Content drin sind.
Hier die CSS:
PHP:
body {
padding:0;
margin:0;
color:#000000;
font-family: verdana, tahoma, sans-serif;
font-size: 13px;
background-color: #6DBFFB;
background-image: none;
background-repeat: no-repeat;
}
a {
text-decoration:none;
background-color:inherit;
font-weight:bold;
color:#286ea0;
}
a:hover {
background-color:inherit;
text-decoration:underline;
color:#303030;
}
h1 {
margin:0;
font-size:16px;
letter-spacing:-3px;
text-align:right;
background-color:inherit;
color:#ffffff;
}
h2 {
margin:5px 0 6px 0;
font-size:18px;
letter-spacing:1px;
font-weight:bold;
text-align:center;
}
h3 {
font-size:15px;
font-weight:bold;
text-align:center;
}
p {
line-height:18px;
}
p2 {
line-height:16px;
}
right {
text-align:right;
}
#title {
width:1050px;
height:140px;
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
border:3px solid #000000;
}
#container {
margin:10px auto 10px auto;
width:1050px;
padding:5px;
background:#ffffff url(/img/unten-rechts.jpg) bottom left no-repeat;
color:#000000;
border:10px solid #000000;
}
#werbung {
color:000000;
width:120px;
border:0px #000000 solid;
height:600px;
margin-top:5px;
text-align:center;
float:right;
}
#release {
background:#ffffff;
color:000000;
border: 0px;
position:absolute;
left: 1380px;
top:185px;
float:right;
width:auto;
text-align:center;
border:4px #000000 solid;
hight:auto;
}
#sidebar {
float:left;
width:100px;
text-align:center;
margin-top:5px;
}
#sidebar3 {
float:left;
width:120px;
text-align:center;
margin-top:5px;
}
#sidebar2 {
float:right;
width:100px;
text-align:center;
margin-top:5px;
}
#main {
width:805px;
float:right;
margin-right:10px;
font-size:13px;
min-height:700px;
}
#main2 {
width:780px;
float:right;
margin-right:10px;
font-size:13px;
min-height:700px;
}
#footer {
clear:both;
font-size:12px;
text-align:center;
}
#menu {
width: 100%;
background: #ffffff;
font-family: Verdana;
font-size: 12px;
line-height: 22px;
float: left;
}
/*--Setzt alle Abstände auf "Null"--*/
* {
margin: 0;
padding: 0;
}
/*--formatiert die Themenblöcke--*/
#menu ul {
float: left;
width: 130px;
list-style-type: none;
}
/*--definiert die Blocküberschriften--*/
#menu h3 {
font-size: 12px;
text-align: center;
color: #ffffff;
border: 1px solid #ffffff;
background: #000000;
}
/*--definiert die "Drop-Down-Links" im Normalzustand--*/
#menu a {
text-decoration: none;
display: block;
text-align: center;
background: #000000;
border: 1px solid #ffffff;
color: #ffffff;
}
#menu a:hover {
background-color:#6DBFFB;
color:#000000;
border:1px solid #000000;
}
/*
*verhindert im Zusammenhang mit position absolute bei ul ul
*eine Höhenvergrößerung von #menu beim Hovern--
*/
#menu li {
position: relative;
}
/*--versteckt die "Drop-Down-Links", solange nicht gehovert wird--*/
#menu ul ul {
position: absolute;
z-index: 2;
display: none;
}
/*--lässt die Dropdown-Links beim Hovern erscheinen--*/
#menu ul li:hover ul {
display: block;
}
/*--nur für IE-Versionen kleiner gleich 6 erkennbar--*/
* html #menu ul li {
float: left;
width: 100%;
}
/*--nur für IE 7 erkennbar--*/
*+ html #menu ul li {
float: left;
width: 100%;
}
/*--bewirkt Hover-Effekt für IE kleiner 7 auch für ul- und li-Elemente--*/
*html body {
behavior: url(csshover3-source.htc);
font-size: 100%;
}
*html #menu ul li a {
height: 10%;
}
/*--definiert einen Einzellink im Normalzustand, wenn kein Drop-Down erforderlich--*/
#menu a.direkt:link {
font-size: 13px;
font-weight: bold;
text-align: center;
color: #ffffff;
border: 1px solid #ffffff;
background: #000000;
}
/*--definiert einen Einzellink im Hoverzustand, wenn kein Drop-Down erforderlich--*/
#menu a.direkt:hover {
color: #000000;
background: #6DBFFB;
border: 1px solid #000000;
}
/*-- Menü 2 --*/
.menu2 {
display:block;
text-align:center;
width:100px;
height:38px;
line-height:38px;
font-size:14px;
font-weight:bold;
background:#ffffff url(/img/button.jpg) no-repeat;
color:#6DBFFB;
}
.menu2:hover {
background-color:#ffffff;
color:#ffffff;
text-decoration:none;
}
/*-- Menü 3 --*/
.menu3 {
display:block;
text-align:center;
width:100px;
height:38px;
line-height:38px;
font-size:14px;
font-weight:bold;
background:#ffffff url(/img/button1.jpg) no-repeat;
color:#F9C5DB;
}
.menu3:hover {
background-color:#ffffff;
color:#ffffff;
text-decoration:none;
}
.credits {
margin-bottom:0;
font-size:11px;
background-color:inherit;
color:#aaaaaa;
text-align:center;
}
.credits a {
background-color:inherit;
color:#aaaaaa;
}
.small {
font-size:10px;
}
.center {
text-align:center;
}
Zurzeit wie gesagt:
position:absolute;
left: 1380px;
Ich habe es mit float versucht.
Main und Container float:left
Release: float: right;
Dann verschiebt sich der Inhalt nach unten.
Hier die HTML Notlösung im Footer:
PHP:
<div id="release">
<h2>Releases</h2>
<p><a href="/"><img src="/img2/" alt="" width="200" height="400" border="0" /></a></p>
<br />
<p><a href="/"><img src="/img2/.gif" alt=" - Meine " width="111" height="303" border="0" /></a></p>
<br />
<p><a href="/"><img src="/img2/.gif" alt="feat." width="175" height="425" border="0" /></a></p>
</div>
</div> (schließt den Containter)
Zuletzt bearbeitet: