mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 22:04 Benutzername: Passwort: Auto-Login

Thema: CSS- Problem mit dynamischer vertikalen ausrichtung vom 26.10.2007


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> CSS- Problem mit dynamischer vertikalen ausrichtung
Autor Nachricht
escaPe
Threadersteller

Dabei seit: 10.09.2007
Ort: <? include("home.htm") ?>
Alter: 112
Geschlecht: Männlich
Verfasst Fr 26.10.2007 12:58
Titel

CSS- Problem mit dynamischer vertikalen ausrichtung

Antworten mit Zitat Zum Seitenanfang

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 13:03, insgesamt 4-mal bearbeitet
  View user's profile Private Nachricht senden
jLn

Dabei seit: 30.06.2005
Ort: westwood
Alter: 41
Geschlecht: Männlich
Verfasst Fr 26.10.2007 13:29
Titel

Antworten mit Zitat Zum Seitenanfang

also ich verstehs noch nicht ganz.
hätte gern mal den code,
aber hast dus schon mit float und overflow versucht?
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
SURE612

Dabei seit: 02.12.2005
Ort: Bärlin / CB
Alter: -
Geschlecht: Männlich
Verfasst Fr 26.10.2007 13:53
Titel

Antworten mit Zitat Zum Seitenanfang

vertical-align ist nur für tabellenfelder oder so inputs neben text
aber nicht um die inhalte im div zu positionieren
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
escaPe
Threadersteller

Dabei seit: 10.09.2007
Ort: <? include("home.htm") ?>
Alter: 112
Geschlecht: Männlich
Verfasst Fr 26.10.2007 13:59
Titel

Antworten mit Zitat Zum Seitenanfang

wie sonst?? wie kann ich den div dazu zwingen seinen inhalt immer ganz unten zu positionieren?
  View user's profile Private Nachricht senden
jLn

Dabei seit: 30.06.2005
Ort: westwood
Alter: 41
Geschlecht: Männlich
Verfasst Fr 26.10.2007 14:08
Titel

Antworten mit Zitat Zum Seitenanfang

stell den code rein und ich sags dir!
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
escaPe
Threadersteller

Dabei seit: 10.09.2007
Ort: <? include("home.htm") ?>
Alter: 112
Geschlecht: Männlich
Verfasst Fr 26.10.2007 14:36
Titel

Antworten mit Zitat Zum Seitenanfang

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>&nbsp;&nbsp;l&nbsp;
         <a href="diploma02.html">02</a>&nbsp;&nbsp;l&nbsp;
         <a href="diploma03.html">03</a>&nbsp;&nbsp;l&nbsp;
         </br>
         <a href="diploma04.html">04</a>&nbsp;&nbsp;l&nbsp;
         <a href="diploma05.html">05</a>&nbsp;&nbsp;l&nbsp;
         <a href="diploma06.html">06</a>&nbsp;&nbsp;l&nbsp;
         <a href="diploma07.html">07</a>&nbsp;&nbsp;l&nbsp;
         <a href="diploma08.html">08</a>&nbsp;&nbsp;l&nbsp;
         <a href="diploma09.html">09</a>&nbsp;&nbsp;l&nbsp;
         <a href="diploma10.html">10</a>&nbsp;&nbsp;l&nbsp;
         <a href="diploma11.html">11</a>&nbsp;&nbsp;l&nbsp;
         <a href="diploma12.html">12</a>&nbsp;&nbsp;l&nbsp;
         <a href="diploma13.html">13</a>&nbsp;&nbsp;l&nbsp;
         <a href="diploma14.html">14</a>&nbsp;&nbsp;l&nbsp;
      </h2>
   </div>

   <div id="subnavi">
      <h2>
         <a href="print.html">PRINT</a>&nbsp;&nbsp;l&nbsp;
         <a href="logotype.html">LOGOTYPE</a>&nbsp;&nbsp;l&nbsp;
         <a href="web.html">WEB</a>&nbsp;&nbsp;l&nbsp;
         <a href="diploma.html">DIPLOMA</a>
      </h2>
   </div>

   <div id="mainnavi">
      <h1>
         <a href="vita.html">VITA</a>&nbsp;&nbsp;l&nbsp;
         <a href="skills.html">SKILLS</a>&nbsp;&nbsp;l&nbsp;
         <a href="portfolio.html">PORTFOLIO</a>&nbsp;&nbsp;l&nbsp;
         <a href="kontakt.html">KONTAKT</a>
      </h1>
   </div>

   <div id="logo">
      <img src="bilder/logo.png" alt="logo">
   </div>

</div>

    </body>
</html>
  View user's profile Private Nachricht senden
Vampiresa

Dabei seit: 22.05.2007
Ort: Hohenhameln
Alter: 38
Geschlecht: Weiblich
Verfasst Mo 28.01.2008 15:37
Titel

Antworten mit Zitat Zum Seitenanfang

ist vielleicht schon zu spät aber probiers mal mit position:absolute; im container.
  View user's profile Private Nachricht senden
 
Ä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] ausrichtung eines divs
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.