| Autor |
Nachricht |
Sphynx
Threadersteller
Dabei seit: 30.08.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 07.07.2008 08:56
Titel Variable und feste Breite in einer Box |
  |
|
Hallo zusammen,
ich brauch dringend Hilfe Ich würde gerne einen Seitenkopf / Banner so aufbauen:
ich würde das ganze gerne in eine [div]-Box verpacken - also etwa so:
| Code: | <div id=banner>
<div id=linksfix> </div>
<div id=mittevariab> </div>
<div id=rechtsfix> </div>
</div> |
Danach folgt dann ein div id=conent...
Alles was ich bisher gesehen hab bezog sich auf das gesamt layout mit bodytags.
Hoffe ihr könnt mir weiterhelfen.
Danke schonmal!
Zuletzt bearbeitet von Sphynx am Mo 07.07.2008 08:56, insgesamt 1-mal bearbeitet
|
|
| |
  |
 |
foorious
Dabei seit: 15.10.2007
Ort: Frankfurt
Alter: -
Geschlecht: 
|
Verfasst Mo 07.07.2008 09:46
Titel
|
|
|
Weis jetzt nicht genau was du meinst.
Aber kannst doch den beiden äußeren ne feste Breite geben und dem mittleren irgendeine %-Zahl.
Dann passt sich das doch dem Inhalt an.
zB: | 50px | 50% | 50px |
Die Dinger dann halt noch auf float:left; setzen.
Im content div dann ein clear:both.
Zuletzt bearbeitet von foorious am Mo 07.07.2008 09:47, insgesamt 1-mal bearbeitet
|
|
| |
 |
|
|
Anzeige
|
|
|
Sphynx
Threadersteller
Dabei seit: 30.08.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 07.07.2008 10:58
Titel
|
|
|
Äh nein, das geht nicht.
Die Box rechts hängt rechts an einer fest definierten Position
Die Box in der Mitte soll nun immer genau bis zur Box rechts gehen.
Also:
| Code: | #banner { width:100%; height:140px;}
#linksfix { position:absolute; left:10px; top:9px; width:81px; height:131px; }
#rechtsfix { position:absolute; right:10px; top:9px; width:5px; height:131px; } |
Wie krieg ich es nun hin, dass die Mitte den Rest der Breite auffüllt? (Die Unterscheidet sich ja je nach Größe der Seite)
Zuletzt bearbeitet von Sphynx am Mo 07.07.2008 10:58, insgesamt 1-mal bearbeitet
|
|
| |
|
|
foorious
Dabei seit: 15.10.2007
Ort: Frankfurt
Alter: -
Geschlecht:
|
Verfasst Mo 07.07.2008 11:40
Titel
|
|
|
Ich hätte mir das jetzt so gedacht:
| Code: |
<html>
<head>
<style type="text/css">
body { color: #fff; }
#banner { width: auto; margin: 10px 0 0 0; height: 131px; background: #000;}
#linksfix { float: left; margin: 0; width:81px; height:131px; background: red; }
#mittevariab { float: left;; margin: 0; width: 80%; background: #123456; height: 131px; }
#rechtsfix { float: left; margin: 0; width:5px; height:131px; background: yellow; }
</style>
</head>
<body>
<div id="banner">
<div id="linksfix"></div>
<div id="mittevariab"></div>
<div id="rechtsfix"></div>
</div>
</body>
</html>
|
Wenn man die Hintergrundfarbe vom banner wegnimmt fällts nicht auf.^^
Wie willst du denn die Seite in verschiedenen Größen richtig darstellen, wenn der Rechte an einer fest Position sitzt?
Oder soll die Seite insgesamt rechtsbündig sein?
|
|
| |
|
|
Impigra
Dabei seit: 17.05.2006
Ort: Egenhofen
Alter: 45
Geschlecht:
|
Verfasst Mo 07.07.2008 11:48
Titel
|
|
|
das linke Div mit float:left...
das rechte div mit float:right...
und dazwischen ein Div mit kompletter Breite... und der Breite der anderen als Margins...
|
|
| |
|
|
Sphynx
Threadersteller
Dabei seit: 30.08.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 07.07.2008 21:14
Titel
|
|
|
Nur nochmal um deutlich zu machen wie die Seite aussehen soll:
mit width:auto; geht bei mir gar nichts, da das banner-div noch in einem Content-div steht
|
|
| |
|
|
Sphynx
Threadersteller
Dabei seit: 30.08.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 07.07.2008 21:34
Titel
|
|
|
| Impigra hat geschrieben: | das linke Div mit float:left...
das rechte div mit float:right...
und dazwischen ein Div mit kompletter Breite... und der Breite der anderen als Margins... |
nope - wie gesagt, dass ganze ist position:absolute; left:10px,, wenn ich auf width:100% gehe, dann läuft mir das aus dem Content raus 
Zuletzt bearbeitet von Sphynx am Mo 07.07.2008 21:34, insgesamt 1-mal bearbeitet
|
|
| |
|
|
foorious
Dabei seit: 15.10.2007
Ort: Frankfurt
Alter: -
Geschlecht:
|
Verfasst Di 08.07.2008 09:11
Titel
|
|
|
Also hier nochmal ohne die position:absolute.
Wenn du eh nur eine Hintergrundgrafik machen willst, die sich wiederholt, kannst du die auch einfach als background für den Banner nehmen. Siehen Beispiel unten.
Mit den %-Angaben kannst auch noch die Breite verändern. Außerdem ist beides (Content und Banner) jetzt abhängig voneinander variabel.
| Code: | <html>
<head>
<style type="text/css">
body { color: #fff; }
#bannervariabel { width: 75%; margin: 10px 0 0 0; height: 131px; background: #000;}
#linksfix { float: left; margin: 0; width:81px; height:131px; background: red; }
#rechtsfix { float: right; margin: 0; width:5px; height:131px; background: yellow; }
#content { clear: both; background: #ccc; width: 75%; height: 600px; }
</style>
</head>
<body>
<div id="bannervariabel">
<div id="linksfix"></div>
<div id="rechtsfix"></div>
</div>
<div id="content"></div>
</body>
</html>
|
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
[CSS] Feste und variable Breite.
Tabellen Problem: Feste Breite/100%
Responsive Design oder feste Breite
ie6 Div ändert feste Breite wg. Child Element
[CSS] dreispaltig, feste Breite, Header, Footer - Problem
[SQL] Variable durch Variable aus anderer Tabelle ersetzen
|
|
Willkommen auf dem Portal für Mediengestalter
