mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 10:08 Benutzername: Passwort: Auto-Login

Thema: Vertikale DIV Problematik vom 09.10.2007


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Vertikale DIV Problematik
Seite: 1, 2  Weiter
Autor Nachricht
Kazanian
Threadersteller

Dabei seit: 09.10.2007
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 09.10.2007 13:30
Titel

Vertikale DIV Problematik

Antworten mit Zitat Zum Seitenanfang

Hallo, nachdem ich jetzt schon rumprobiert und im Netz recherchiert habe kann ich nicht mehr anders und muss nach Rat fragen. * Keine Ahnung... *

Es handelt sich um folgende Seite:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title</title>
<style type="text/css">
<!--
html {
   height:100%;
}
body {
   background: url(gfx/body-bg.jpg);
   background-position: top;
   background-repeat: repeat-x;
   background-color:#B0D5FF;
    height:100%;
    margin:0%;
    padding:0%;
   color: #000000;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 12px;
}

a:link, a:visited {  color: #1F55BF; text-decoration: none;}
a:hover, a:active {  color: #000000; text-decoration: underline;}
img { border:0;}

#topleft {
   width: 50px;
   height: 100%;
   background:url(gfx/topleft.jpg);
   background-position: top;
   background-repeat: no-repeat;
   float:left;
}

#topright {
   width: 50px;
   height: 100%;
   background:url(gfx/topright.jpg);
   background-position: top;
   background-repeat: no-repeat;
   float:right;
}

#left {
   width: 50px;
   height: 100%;
   background:url(gfx/left.jpg);
   background-position: top;
   background-repeat: repeat-y;
   background-color:#9DADBF;
   float:left;
}

#right {
   width: 50px;
   height: 100%;
   background:url(gfx/right.jpg);
   background-position: top;
   background-repeat: repeat-y;
   background-color:#9DADBF;
   float:right;
}

#root {
   width: 720px;
    border: 0px;
    padding: 0 px;
   margin:0px auto;
    height:100%;
   background-color:#8AB3E3;
}

#main {
   width: 620px;
   height: 100%;
   padding: 0px;
   margin: 0px;
   text-align: left;
   float: left;
}

#head {
   margin:0;
   padding:10px;
   padding-bottom:15px;
   padding-top: 0px;
   height:114px;
   background:url(gfx/logo.jpg);
   background-position: top right;
   background-repeat: no-repeat;
   background-color:#E1E7EE;
}

#head h1{
   font-size:28px;
   padding:0px;
   margin:0px;
}

#search {
   float:left;
   position: absolute;
    top: 90px;
   padding:0px;
   margin:0px;
   font-size:10px;
}

input, select, textarea {
   margin-top:4px;
   font-size:10px;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-weight:none;
   color:#000000;
   background-color:#F6F6FF;
   border:1px solid #FFFFFF;
   width:126px;
}

#nav {
   height:45px;
   margin:0;
   padding:0px;
   background: url(gfx/nav-normal.jpg);
   background-color: #FFFFFF;
}

ul#nav_buttons {
    margin: 0; padding: 0;
    text-align: left;
}
 
ul#nav_buttons li {
    list-style: none;
   float:left;
   height:45px;
   background: url(gfx/nav-space.jpg);
   background-color: #ababab;
}

ul#nav_buttons a, ul#nav_buttons span {
   margin-right:1px;
     height:30px;
   padding-top:15px;
   padding-left: 10px;
   padding-right: 10px;
     display:block;
    text-decoration: none; font-weight: bold;
   font-size: 12px;
    color: #000000;
   background: url(gfx/nav-normal.jpg);
   background-color: #FFFFFF;
}

ul#nav_buttons a:hover, ul#nav_buttons span {
   background: url(gfx/nav-hover.jpg);
   background-color: #FEC541;
}

#content {
   height:*;
   margin:0;
   padding:10px;
   background:url(gfx/_content-bg.jpg);
   background-position: top;
   background-repeat: repeat-x;
   background-color:#8AB3E3;
}

#content h1{
   font-size:18px;
   padding:0px;
   margin:0px;
   border-bottom: 2px solid #FFFFFF;
}

#content a:link, #content a:visited {  color: #1F55BF; text-decoration: none;}
#content a:hover, #content a:active {  color: #000000; text-decoration: underline;}
#content img { border:0;}

#content .addbox {
    background-image: url(gfx/box-top.jpg);
    background-position: top;
    background-repeat: repeat-x;
    background-color: #F1F4F8;
   text-decoration: none;
   padding: 5px;
   border-width: 3px;
   border-style: solid;
   border-color: #ffffff;
    margin-top: 0px;
    margin-bottom: 15px;
}

#footer {
    background-image: url(gfx/box-top.jpg);
    background-position: top;
    background-repeat: repeat-x;
    clear:left;
    margin-top:1em;
    background-color:#F1F4F8;
    text-align:center;
    padding:10px;
   border-width: 2px;
   border-style: solid;
   border-color: #ffffff;
   font-weight: bold;
}

#advertiseleft {
    position:fixed;
    top:20px;
   right:50px;
    text-align:center;
}

#advertiseright {
    position:fixed;
    top:20px;
   left:50px;
    text-align:center;
}

-->
</style>
</head>


<body>



<div id="root">

<div id="left"><div id="topleft"></div></div>
<div id="right"><div id="topright"></div></div>

<div id="main">
   <div id="head">
   <h1>Lorem ipsum dolor sit amet</h1>
   consectetuer adipiscing elit
    <div id="search">Lorem ipsum<br/><input type="text" /></div>
   </div>
   
   <div id="nav">
   <ul id="nav_buttons">
      <li><a href="index.html" title="Home">Lorem</a></li>
     <li><a href="index.html" title="Home">ipsum</a></li>
     <li><a href="index.html" title="Home">dolor</a></li>
     <li><a href="index.html" title="Home">sit</a></li>     
     <li><a href="index.html" title="Home">amet</a></li>
    </ul>
   </div>

   <div id="content">
   
      <div class="addbox">
      <h1>Lorem ipsum dolor sit amet</h1>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum erat diam, ornare vitae, ullamcorper nec, mattis ut, ante. Nunc vulputate. Ut at lacus. Proin nibh mauris, molestie sed, faucibus vel, accumsan et, nunc. Morbi tortor ipsum, tincidunt nec, varius non, suscipit at, tortor. Maecenas ac libero eu turpis facilisis fermentum. Quisque nisi. Suspendisse ac nisl. Sed congue, turpis in congue dictum, turpis nulla cursus nunc, eget varius lectus quam quis ante. Praesent vitae velit. Integer porttitor, purus ac tincidunt imperdiet, tortor dui ullamcorper turpis, quis ornare velit lacus in nisi. Integer orci quam, feugiat quis, mollis quis, semper non, libero. Cras vulputate, urna quis ornare posuere, velit velit hendrerit magna, at adipiscing ante odio a eros. Nulla porttitor lacus facilisis nisi. Duis commodo vestibulum velit. Fusce sollicitudin ligula nec ligula. Vivamus auctor dictum diam. Suspendisse sodales eros dignissim mi. Nam facilisis dolor eu elit. Ut eget nisi.
<p/>
Sed ac sapien a risus gravida tincidunt. Vestibulum quis orci in ante vulputate aliquet. Donec sagittis posuere enim. Maecenas velit. Praesent vitae felis. Cras dolor mi, hendrerit condimentum, elementum sit amet, sollicitudin nec, risus. Sed ullamcorper aliquet dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis elit. Quisque mollis. Pellentesque urna mi, fringilla eleifend, tincidunt sed, vestibulum id, nunc. Aliquam nunc nibh, rutrum sed, tempor in, rhoncus non, metus. In eu ipsum non nisi tristique lobortis. Etiam condimentum. Nam mi neque, sagittis ut, faucibus et, aliquam lacinia, orci. Aliquam luctus lorem eget nulla. Etiam libero. Aliquam ut mi sit amet neque lacinia adipiscing.
      </div>     
       
              <div class="addbox">
      <h1>Lorem ipsum dolor sit amet</h1>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum erat diam, ornare vitae, ullamcorper nec, mattis ut, ante. Nunc vulputate. Ut at lacus. Proin nibh mauris, molestie sed, faucibus vel, accumsan et, nunc. Morbi tortor ipsum, tincidunt nec, varius non, suscipit at, tortor. Maecenas ac libero eu turpis facilisis fermentum. Quisque nisi. Suspendisse ac nisl. Sed congue, turpis in congue dictum, turpis nulla cursus nunc, eget varius lectus quam quis ante. Praesent vitae velit. Integer porttitor, purus ac tincidunt imperdiet, tortor dui ullamcorper turpis, quis ornare velit lacus in nisi. Integer orci quam, feugiat quis, mollis quis, semper non, libero. Cras vulputate, urna quis ornare posuere, velit velit hendrerit magna, at adipiscing ante odio a eros. Nulla porttitor lacus facilisis nisi. Duis commodo vestibulum velit. Fusce sollicitudin ligula nec ligula. Vivamus auctor dictum diam. Suspendisse sodales eros dignissim mi. Nam facilisis dolor eu elit. Ut eget nisi.
<p/>
Sed ac sapien a risus gravida tincidunt. Vestibulum quis orci in ante vulputate aliquet. Donec sagittis posuere enim. Maecenas velit. Praesent vitae felis. Cras dolor mi, hendrerit condimentum, elementum sit amet, sollicitudin nec, risus. Sed ullamcorper aliquet dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis elit. Quisque mollis. Pellentesque urna mi, fringilla eleifend, tincidunt sed, vestibulum id, nunc. Aliquam nunc nibh, rutrum sed, tempor in, rhoncus non, metus. In eu ipsum non nisi tristique lobortis. Etiam condimentum. Nam mi neque, sagittis ut, faucibus et, aliquam lacinia, orci. Aliquam luctus lorem eget nulla. Etiam libero. Aliquam ut mi sit amet neque lacinia adipiscing.
      </div>       
       
              <div class="addbox">
      <h1>Lorem ipsum dolor sit amet</h1>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum erat diam, ornare vitae, ullamcorper nec, mattis ut, ante. Nunc vulputate. Ut at lacus. Proin nibh mauris, molestie sed, faucibus vel, accumsan et, nunc. Morbi tortor ipsum, tincidunt nec, varius non, suscipit at, tortor. Maecenas ac libero eu turpis facilisis fermentum. Quisque nisi. Suspendisse ac nisl. Sed congue, turpis in congue dictum, turpis nulla cursus nunc, eget varius lectus quam quis ante. Praesent vitae velit. Integer porttitor, purus ac tincidunt imperdiet, tortor dui ullamcorper turpis, quis ornare velit lacus in nisi. Integer orci quam, feugiat quis, mollis quis, semper non, libero. Cras vulputate, urna quis ornare posuere, velit velit hendrerit magna, at adipiscing ante odio a eros. Nulla porttitor lacus facilisis nisi. Duis commodo vestibulum velit. Fusce sollicitudin ligula nec ligula. Vivamus auctor dictum diam. Suspendisse sodales eros dignissim mi. Nam facilisis dolor eu elit. Ut eget nisi.
<p/>
Sed ac sapien a risus gravida tincidunt. Vestibulum quis orci in ante vulputate aliquet. Donec sagittis posuere enim. Maecenas velit. Praesent vitae felis. Cras dolor mi, hendrerit condimentum, elementum sit amet, sollicitudin nec, risus. Sed ullamcorper aliquet dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis elit. Quisque mollis. Pellentesque urna mi, fringilla eleifend, tincidunt sed, vestibulum id, nunc. Aliquam nunc nibh, rutrum sed, tempor in, rhoncus non, metus. In eu ipsum non nisi tristique lobortis. Etiam condimentum. Nam mi neque, sagittis ut, faucibus et, aliquam lacinia, orci. Aliquam luctus lorem eget nulla. Etiam libero. Aliquam ut mi sit amet neque lacinia adipiscing.
      </div>
       
       
       
    <div id="footer">
   <a href="#">Impressum</a> / <a href="#">AGB</a>
   </div>
   </div>
</div>     
</div>

<!--
<div id="advertiseleft"><img height="350" width=120" src="gfx/logo.jpg" /></div> 
<div id="advertiseright"><img  height="350" width=120" src="gfx/logo.jpg" /></div>   
-->
 
</body>

</html>


Sie ist auch Valide und zeigt im Prinzip alles richtig an, da ist nur eine kleine Sache die ich nicht behoben bekomme. Links und rechts vom eigentlichen Inhalt sind 2 "Balken" die später einen Schatten darstellen sollen. Das sind die beiden floatenden DIVs left und right. Sie werden angezeigt, floaten wie sie sollen ABER sobald man irgendwie scrollt sind sie plötzlich abgeschnitten und haben immer genau die Höhe wie das Browserfenster. * Ööhm... ja? *
Ich hoffe man versteht was ich meine, wenn nicht am besten mal ausprobieren und das das Fenster skalieren und scrollen, dann sieht man es..

So, ich würde nun gerne wissen wie und ob man das beheben kann, Faux-Colums kommen dabei aber nicht in Frage da die Seite flexibel sein soll.

Vielen Dank für Aufmerksamkeit.
  View user's profile Private Nachricht senden
Raumwurm

Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Di 09.10.2007 15:10
Titel

Antworten mit Zitat Zum Seitenanfang

Am einfachsten wäre es den <div id="main">
breiter zu machen und diesem einen Schatten
als Backgroundimage mit repeat-y zu verpassen.
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Kazanian
Threadersteller

Dabei seit: 09.10.2007
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 09.10.2007 18:30
Titel

Antworten mit Zitat Zum Seitenanfang

Raumwurm hat geschrieben:
Am einfachsten wäre es den <div id="main">
breiter zu machen und diesem einen Schatten
als Backgroundimage mit repeat-y zu verpassen.

ja, aber ist aber nicht möglich wenn der Hintergrund z.b. ein Verlauf sein soll.. ein Png möchte ich als Schatten nicht verwenden da es teilweise ja immernoch Browser gibt es nicht so mit Transparenzen haben..

aber danke für den Vorschlag.
  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Di 09.10.2007 19:34
Titel

Re: Vertikale DIV Problematik

Antworten mit Zitat Zum Seitenanfang

Kazanian hat geschrieben:
So, ich würde nun gerne wissen wie und ob man das beheben kann, Faux-Colums kommen dabei aber nicht in Frage da die Seite flexibel sein soll.


Gar nicht. Ich verstehe auch nicht wo das Problem liegt weshalb hier Raumwurms
Vorschlag jetzt nicht eingesetzt werden sollte?

Die Elemente ohne Inhalt haben eben nur eine bestimmte Höhe und das ist in dem
Fall 100% = Höhe des Viewports. Javascript könnte hier eine Lösung sein wobei
ich mich wie gesagt frage wo das Problem liegt und was du als nicht flexibel genug
empfindest?


Zuletzt bearbeitet von m am Di 09.10.2007 19:35, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Kazanian
Threadersteller

Dabei seit: 09.10.2007
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 09.10.2007 20:05
Titel

Re: Vertikale DIV Problematik

Antworten mit Zitat Zum Seitenanfang

m hat geschrieben:
Kazanian hat geschrieben:
So, ich würde nun gerne wissen wie und ob man das beheben kann, Faux-Colums kommen dabei aber nicht in Frage da die Seite flexibel sein soll.


Gar nicht. Ich verstehe auch nicht wo das Problem liegt weshalb hier Raumwurms
Vorschlag jetzt nicht eingesetzt werden sollte?

Die Elemente ohne Inhalt haben eben nur eine bestimmte Höhe und das ist in dem
Fall 100% = Höhe des Viewports. Javascript könnte hier eine Lösung sein wobei
ich mich wie gesagt frage wo das Problem liegt und was du als nicht flexibel genug
empfindest?

Ich kann dir an folgendem Bild zeigen wie ich mir Layout per CSS vorgestellt habe.




#1 und #2 sind topleft und topright, die anderen roten Kästchen stellen die Grafiken left und right dar die als Background Grafik im Repeat dienen dar. Die blauen Rahmen sind die divs left und right mit denen ich das Problem hab.

Kann mir für diesen Fall keine Faux Colums vorstellen, aber bin dankbar wenn man mich eines besseren belehren kann.


Zuletzt bearbeitet von Kazanian am Di 09.10.2007 20:08, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Di 09.10.2007 20:10
Titel

Antworten mit Zitat Zum Seitenanfang

Ah ok jetzt wird das schon klarer. Wie du schon richtig sagst kannst du einem Element
ja auch nur eine Hintergrundgrafik zuordnen. Dann mußt du dir eben so helfen dass du
zwei Elemente dafür nutzt, nur als Beispiel:

Code:
html {
  background: url(verlauf.gif) ...;
}
body {
  background: url(schatten) ...;
}
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Kazanian
Threadersteller

Dabei seit: 09.10.2007
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 09.10.2007 20:17
Titel

Antworten mit Zitat Zum Seitenanfang

Ok das wär schonmal ein wirklich brauchbarer Ansatz, daran hab ich nun nicht gedacht. Aber es ist nicht das Optimum da nicht flexibel. *Schnief* (was ja bei Faux Colums eh ein Problem ist)
  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Di 09.10.2007 20:19
Titel

Antworten mit Zitat Zum Seitenanfang

Und jetzt kommt die Frage wieder auf, was verstehst du in dem Fall unter "nicht flexibel"?
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen javascript : Array sortieren Problematik
Erneute Problematik mit der On Release Funktion
[div-problematik] schon wieder - ich dreh noch durch...
vertikale Navigation zum aufklappen
vertikale Bewegung mit AS eingrenzen
Suche nette Vertikale Bildergalerie
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
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.