zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden div soll Platz nach Rechts ausfüllen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 07.11.2014, 20:35
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.11.2014
Beiträge: 1
basstscho befindet sich auf einem aufstrebenden Ast
Standard 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;
	
}
Vielen Dank für eure Hilfe,
Johannes
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 08.11.2014, 05:51
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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>
CSS dazu:

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;
      }
In der Praxis würde das z. B. so aussehen:

HTML5: Basstscho - Layout

Gruss

MrMurphy

Geändert von MrMurphy (08.11.2014 um 07:35 Uhr)
Mit Zitat antworten
Sponsored Links
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
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


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:56 Uhr.