Hallo zusammen,
ich bin gerade dabei eine Homepage zu gestalten. Hierbei möchte ich einen Streifen vom linken zum rechten Rand ziehen. Dieser Streifen wird von einem teilweise transparenten Logo unterbrochen. Der Streifen und das Logo skalieren mit der zur Verfügung stehenden Bildschirmgröße (in Prozent):
<< Streifen (10%)>> - << Logo >> - << Streifen (bis an den rechten Rand) >>
Den linken Streifen und das Logo habe ich problemlos hinbekommen. Ich weiß nur nicht wie ich das rechte div dazu bewegen kann bis ganz an den äußeren Rand zu gehen. Die Breite des Logo-Divs skaliert mit der Höhe des Logos. Somit kann ich die Breite des Streifens nicht angeben. Den Streifen in einem Frame hinter dem Logo kann ich leider auch nicht durchziehen (wegen Transparenz im Logo). Könnt ihr mir einen Tipp geben?
HTML-Code:
<div class="left"></div>
<div class="logo"><img src="logo.png" alt="" height="100%"></div>
<div class="right"></div>
HTML-Code:
.left {
width: 10%;
height: 8%;
top: 120px;
left: 0px;
position: absolute;
background-image: url("streifen.png");
background-size: 100% 100%;
}
.logo {
width: auto;
height: 8%;
top: 0px;
left: 10%;
top: 120px;
position: absolute;
}
.right {
width: auto;
height: 8%;
top: 120px;
background-image: url("streifen.png");
background-size: 100% 100%;
float: left;
}
Vielen Dank für eure Hilfe,
Johannes