Autor |
Nachricht |
escaPe
Threadersteller
Dabei seit: 10.09.2007
Ort: <? include("home.htm") ?>
Alter: 112
Geschlecht:
|
Verfasst Fr 26.10.2007 13:58
Titel CSS- Problem mit dynamischer vertikalen ausrichtung |
|
|
ich hab folgendes Problem...
Ich hab nun eine Seite
die ist folgender massen aufgebaut:
folgends ist die Seite aufgebaut
container: (hat keine feste größe)
höhe: auto
breite: 100%
margin-left:auto
margin-right:auto
content:
höhe: fest (pixel)
breite: auto
margin-left:auto
margin-right:auto
subcontent: (hat keine feste größe)
höhe: auto
breite: auto
margin-left:auto
margin-right:auto
head:
breite: fest
höhe: auto
margin-left:auto
margin-right:auto
galerie:
höhe:auto
breite:auto
Navi:
höhe: fest
breite: fest
margin-left:auto
margin-right:auto
mein Problem:
der subcontent soll sich unten im content befinden (kleben) und nicht oben
hab folgendes schon ausprobiert ohne erfolg:
vertical-align: bottom im content und subcontent
eine blind box über dem subcontent die sich eigentlich in der höher automatisch strecken
sollte, leider auch kein erfolg..
auch mit margin-top: auto kein erfolg...
wie löse ich das problem ?? hat jemand ein tipp?
falls ihr den code unbedingt benötigt setz ich ihn nachtragent ein.
mfg escaPe
edit:
Gallerie muss aufjedenfall eine dynamische breite und höhe haben damit sie sich den Bildern
die dort irgendwann mal landen, anpasst.
der content ist in der Höhe an die höchste head + galerie Pixelanzahl angepasst.
Was ich damit erreichen möchte ist:
Die Galerie soll immer unten am Menü sitzen und der Head soll immer genau
oberhalb der galerie liegen. Menü soll sich nicht bewegen und immer an der gleichen
Stelle stehen.
Zuletzt bearbeitet von escaPe am Fr 26.10.2007 14:03, insgesamt 4-mal bearbeitet
|
|
|
|
|
jLn
Dabei seit: 30.06.2005
Ort: westwood
Alter: 41
Geschlecht:
|
Verfasst Fr 26.10.2007 14:29
Titel
|
|
|
also ich verstehs noch nicht ganz.
hätte gern mal den code,
aber hast dus schon mit float und overflow versucht?
|
|
|
|
|
Anzeige
|
|
|
SURE612
Dabei seit: 02.12.2005
Ort: Bärlin / CB
Alter: -
Geschlecht:
|
Verfasst Fr 26.10.2007 14:53
Titel
|
|
|
vertical-align ist nur für tabellenfelder oder so inputs neben text
aber nicht um die inhalte im div zu positionieren
|
|
|
|
|
escaPe
Threadersteller
Dabei seit: 10.09.2007
Ort: <? include("home.htm") ?>
Alter: 112
Geschlecht:
|
Verfasst Fr 26.10.2007 14:59
Titel
|
|
|
wie sonst?? wie kann ich den div dazu zwingen seinen inhalt immer ganz unten zu positionieren?
|
|
|
|
|
jLn
Dabei seit: 30.06.2005
Ort: westwood
Alter: 41
Geschlecht:
|
Verfasst Fr 26.10.2007 15:08
Titel
|
|
|
stell den code rein und ich sags dir!
|
|
|
|
|
escaPe
Threadersteller
Dabei seit: 10.09.2007
Ort: <? include("home.htm") ?>
Alter: 112
Geschlecht:
|
Verfasst Fr 26.10.2007 15:36
Titel
|
|
|
css:
Code: | body { background-color: #ffffff; }
p { }
td { }
a { text-decoration: none; }
a:link { color: #f19fc1; }
a:visited { color: #f19fc1; }
a:hover { color: #e2007a; }
a:active { color: #e2007a; }
#container { width: 100%; height: 770px; margin-top: 30pt; margin-right: auto; margin-left: auto; }
#content { background-color: aqua; width: auto; height: 570px; margin-right: auto; margin-left: auto; padding-bottom: 15px; }
#blind { background-color: purple; width: 400px; height: auto; margin-right: auto; margin-left: auto; }
#subcontent { background-color: olive; text-align: center; width: auto; height: auto; margin-right: auto; margin-left: auto; }
#header { background-color: fuchsia; text-align: left; width: 295px; height: auto; margin-right: auto; margin-left: auto; padding-bottom: 10px; }
#galerie { background-color: red; width: auto; height: auto; }
#galerienavi { background-color: fuchsia; text-align: right; width: 295px; height: 32px; margin-right: auto; margin-left: auto; }
#subnavi { width: 295px; height: 17px; margin-right: auto; margin-left: auto; }
#mainnavi { width: 295px; height: 28px; margin-right: auto; margin-left: auto; border-top-width: 0; border-right-width: 0; border-bottom: 1px solid #f19fc1; border-left-width: 0; }
#logo { text-align: right; width: 295px; height: 35px; margin-right: auto; margin-left: auto; padding-top: 12px; }
h1 { color: #f19fc1; font-size: 10.5pt; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; font-weight: 700; margin: 0; }
h2 { color: #f19fc1; font-size: 8pt; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; font-weight: 700; margin: 0; padding: 0; }
h3 { color: #f19fc1; font-size: 8pt; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; font-weight: 700; margin: 0; }
h4 { color: #e2007a; font-size: 10.5pt; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; font-weight: 700; margin: 0; }
h5 { color: #e2007a; font-size: 8pt; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; font-weight: 700; margin: 0; } |
html:
Code: | <html>
<head>
<title>PORTFOLIO</title>
<link rel="stylesheet" href="design.css" type="text/css">
</head>
<body>
<div id="container">
<div id="content">
<div id="blind">
</div>
<div id="subcontent">
<div id="header">
<h4>
PLAKAT FÜR xxxxxxxxxxx
</h4>
<h5>
xxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxx</br>
xxxxxxxxxxxxxxxxxxxxxxxxxx</br>xxxxxxxxxxxxxxxxx
</h5>
</div>
<div id="galerie">
<img src="bilder/diploma02.jpg" alt="diploma02">
</div>
</div>
</div>
<div id="galerienavi">
<h2>
<a href="diploma01.html">01</a> l
<a href="diploma02.html">02</a> l
<a href="diploma03.html">03</a> l
</br>
<a href="diploma04.html">04</a> l
<a href="diploma05.html">05</a> l
<a href="diploma06.html">06</a> l
<a href="diploma07.html">07</a> l
<a href="diploma08.html">08</a> l
<a href="diploma09.html">09</a> l
<a href="diploma10.html">10</a> l
<a href="diploma11.html">11</a> l
<a href="diploma12.html">12</a> l
<a href="diploma13.html">13</a> l
<a href="diploma14.html">14</a> l
</h2>
</div>
<div id="subnavi">
<h2>
<a href="print.html">PRINT</a> l
<a href="logotype.html">LOGOTYPE</a> l
<a href="web.html">WEB</a> l
<a href="diploma.html">DIPLOMA</a>
</h2>
</div>
<div id="mainnavi">
<h1>
<a href="vita.html">VITA</a> l
<a href="skills.html">SKILLS</a> l
<a href="portfolio.html">PORTFOLIO</a> l
<a href="kontakt.html">KONTAKT</a>
</h1>
</div>
<div id="logo">
<img src="bilder/logo.png" alt="logo">
</div>
</div>
</body>
</html> |
|
|
|
|
|
Vampiresa
Dabei seit: 22.05.2007
Ort: Hohenhameln
Alter: 38
Geschlecht:
|
Verfasst Mo 28.01.2008 16:37
Titel
|
|
|
ist vielleicht schon zu spät aber probiers mal mit position:absolute; im container.
|
|
|
|
|
|
|
|
Ähnliche Themen |
Problem mit dynamischer Signatur [PHP+MYSQL]
Problem mit iframe und dynamischer Höhe
Problem mit CSS (Ausrichtung)
Problem bei der Ausrichtung von Text
Problem mit Layer-Ausrichtung
Problem in Dreamweaver CS6 mit Ausrichtung von Zelleninhalt
|
|