|
|||
div soll Platz nach Rechts ausfüllen
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; } Johannes |
Sponsored Links |
|
|||
Hallo,
deine Vorstellungen scheinen leider recht veraltet zu sein. Um dir helfen zu können solltest du mal die ganze Seite beschreiben. Oder besser noch, deine bisherigen Bemühungen bei einem Freeewareprovider wie bplaced.net online bereit stellen. Mit deinen Quellcodeschnipseln können wir nur raten aber keine seriösen Antworten geben. Zur Zeit würde ich mit deinen Angaben in HTML5 nur eine Box (header?) mit einem Logo darin erstellen, das 10% Abstand zum linken Fensterrand hat. Alles andere ist dann etwas CSS, über das sich mangels Angaben von dir nichts konkretes sagen läßt, da wir z. B. deine Hintergrundgrafik nicht kennen. Wenn es sich dabei um einen Farbverlauf handeln sollte wird der heutzutage auch komplett mit CSS erstellt. HTML: HTML-Code:
<header> <img src="logo.jpg" alt="Logo" /> </header> Code:
header { background-image: url(http://placehold.it/200x150/ffffff/ffffff&text=Logo); background-repeat: repeat-y; background-size: 10% 100%; background-color: yellow; border: 1px solid gray; } header img { margin-left: 10%; display: block; } HTML5: Basstscho - Layout Gruss MrMurphy Geändert von MrMurphy (08.11.2014 um 07:35 Uhr) |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Wenn Platz zu klein: div hinter anderes div schieben | outlaw | CSS | 1 | 14.06.2012 10:29 |
DIV Layout mit CSS: Zentrieren eines Divs und links und rechts auffüllen. | darkwave | CSS | 5 | 07.04.2011 14:11 |
CSS und DIV - Text hat rechts kein padding | wernersbacher | CSS | 2 | 03.05.2010 18:41 |
Div Wight Auto???? | temp11 | CSS | 8 | 30.06.2009 13:34 |
Div bei content insert nach rechts expandieren | solars | CSS | 11 | 08.03.2007 12:43 |