Hilfe beim erstellen des Styles. 2 DIVs in einer übergeordneten @ tutorials.de: Tutorials, Forum & Hilfe

Voltex · 03.07.09 12:38

Hallo,
ich habe vor einigen Tagen mein neues Design für mein Projekt bekommen. Das hab ich nun Tagelang versucht so zu positionieren dass es passt. Leider klappt das überhaupt nicht so wie ich es mir vorgestellt hab. Daher suche ich hier um Rat.

Es geht darum, eine DIV zu erstellen, welche 2 weitere DIVs beinhaltet (Links das Menü, rechts den Content). Die übergeordnete DIV soll, je nach Länge des Contents sich automatisch vergrößern. Das klappt, wie gesagt, überhaupt nicht. Mal überschreitet die innere, rechte DIV die übergeordnete, sprich die übergeordnete vergrößert sich nicht.

Eine Skizze wie das Ganze funktionieren soll findet ihr hier: http://img528.imageshack.us/img528/5431/skizzemycom.png

vielen Dank schonmal für Eure Hilfe

so far,
Christian

Maik · 03.07.09 12:40

Hi,

hab hier erst gestern ein ähnliches Modell entwickelt

http://www.tutorials.de/forum/css/34...ml#post1775710

mfg Maik

Voltex · 03.07.09 12:47

Vielen Dank, werds gleich mal ausprobieren

Maik · 03.07.09 12:50

Ganz wichtig: Wenn bei dir der Footerbereich #footer nicht zum Einsatz kommt, der mit clear:left formatiert ist, um das Floaten der beiden Spaltenblöcke (#sidebar, #content) zu beenden, lies dir meinen Webmaster-FAQ-Artikel [CSS] Warum passt sich die Boxenhöhe nicht dem Inhalt an? durch.

mfg Maik

Voltex · 03.07.09 12:59

Das scheint bei mir wohl nicht ganz so gut zu funktionieren weil ich da auch sehr viel mit Grafiken etc. arbeite. Wenn du Zeit und Lust dazu hättest würd ich dir den Code, die Grafiken usw. mal schicken dann könntest du dir das mal ansehen. Vielleicht wirds dann etwas verständlicher...

so far,
Christian

Maik · 03.07.09 13:05

Pack mal alles in ein ZIP-Archiv, und lad es hier hoch, damit ich es mir erstmal in Ruhe anschauen kann.

mfg Maik

Voltex · 03.07.09 13:12

Hab die Datei angehangen. Das Passwort schick ich dir per PM zu

Maik · 03.07.09 13:20

Zitat von index.php / index_test.php

Warning: mysql_connect() [function.mysql-connect]: Access denied for user 'root'@'localhost' (using password: NO) in D:\xampp\htdocs\test\mycom\system\configuration.php on line 8
Keine Verbindung zu der Datenbank möglich.

Besser, du schickst mir mal die HTML-Ausgabe des Browsers (Ansicht -> Seitenquelltext anzeigen).

mfg Maik

Voltex · 03.07.09 13:26

Das wäre dann diese hier

HTML-Code:

<?xml version="1.0" encoding=""?><!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" xml:lang="de" lang="de">  
  <head>       
    <title>MyCOM | Startseite     
    </title>       
    <meta http-equiv="content-style-type" content="text/css" />       
    <meta http-equiv="content-script-type" content="text/javascript" />       
    <meta http-equiv="content-language" content="de" />       
    <meta http-equiv="expires" content="0" />	        
    <meta name="page-topic" content="MyCOM | www.ion-light.de" />       
    <meta name="description" content="MyCOM | www.ion-light.de" />       
    <meta name="keywords" content="MyCOM | www.ion-light.de" />       
    <meta name="generator" content="MyCOM | http://www.mycom.ion-light.de (c) 2009 - all rights reserved" />       
    <meta name="author" content="MyCOM | http://www.mycom.ion-light.de (c) 2009 - all rights reserved" />       
    <meta name="robots" content="index, follow" />	        
    <link rel="stylesheet" type="text/css" href="template/default.css" />     
  </head>  
  <body>    
    <div id="header">    
    </div>    
    <div id="topnavileftcorner">    
    </div>    
    <div id="topnavileftborder">    
    </div>    
    <div id="topnavitoolbar"><h2>        
        <a href="index.php" class="a1">Startseite</a> |         
        <a href="index.php?news=1" class="a1">News</a> |         
        <a href="index.php?impres=1" class="a1">Impressum</a> |         
        <a href="index.php?agb=1" class="a1">AGBs</a> |         
        <a href="index.php?version=1" class="a1">Versionshinweise</a> |         
        <a href="http://www.ion-light.de" class="a1">Bugtracker</a></h2>    
    </div>    
    <div id="topnavirightborder">    
    </div>    
    <div id="topnavirightcorner">    
    </div>    
    <div id="advert-lefttop">    
    </div>    
    <div id="advert-leftbottom">    
    </div>    
    <div id="advert-righttop">    
    </div>    
    <div id="advert">
<a href="http://my.opera.com/community/download.pl?ref=Angel-of-Retribution&p=opera_desktop"><img src="http://promote.opera.com/opera9/468x60opera9.gif" alt="Opera, the fastest and most beautiful browser on the planet. download now"></a>    
    </div>    
    <div id="advert-rightbottom">    
    </div>    
    <div id="advert-right">    
    </div>    
    <div id="border-left">    
    </div>    
    <div id="content-leftarea">      
      <div id="loginarea">        
        <form action="index.php?page=login" method="post">          
          <div id="loginbar">            
          </div>	           
          <div id="boxcontent">   	   	
 	  	             
            <!-- default start -->   	  	             
            <div>  	  	                 
              <div id="loginuser">                
                <table border="0">                  
                  <td valign="middle">                    
                    <input class="login" type="text" name="username" value="" class="login" /></td>                
                </table>              
              </div>	    	               
              <div id="loginpass">                
                <table border="0">                  
                  <td valign="middle">                    
                    <input class="login" type="password" name="password" value="" /></td>                
                </table>              
              </div>	    	               
              <input class="loginbt" type="submit" name="sender" value="" />	 	  	             
            </div>	  	             
            <a href="register.php">
              <img class="registerbt"></a>	  	             
            <!-- default end -->  	  	
   	           
          </div>  	       
      </div>
	   	     
    </div>  	     
    <div id="content-rightarea">      
      <div id="contentarea">              
        <div id="content-topbar">               
          <div id="ctopbarl">          
          </div>               
          <div id="ctopbarc"><h2>Content</h2>          
          </div>               
          <div id="ctopbarr">          
          </div>           
        </div>  
             
        <div id="frame-topbar">               
          <div id="ftopbarl">          
          </div>               
          <div id="ftopbarc"><h2>
</h2>          
          </div>               
          <div id="ftopbarr">          
          </div>           
        </div>             
        <div id="boxcontentbig">        
           
        </div>           
        <div id="footerl">        
        </div>           
        <div id="footerc"><h2>All rights reserved by MyCOM © 2009 | MyCOM is a division of Ion-Light</h2>        
        </div>      
      </div>    
    </div>    
    <div id="border-right">    
    </div>    
    </form>  
  </body>
</html>

Stimmt. Ich hatte vergessen die PHP Bereiche auszukommentieren.

hoffe es klappt jetzt

so far,
Christian

Maik · 03.07.09 13:32

Zitat von Voltex

hoffe es klappt jetzt

Hab die Seite vor meinen Augen.

Und wo gibt's jetzt bei der Umsetzung Probleme mit den verwendeten Grafiken?

mfg Maik

Voltex · 03.07.09 13:35

sobald in der "boxcontentbig" ein längerer Text steht, überlappt diese unten den eigentlichen Seitenbereich. Ich hätte es gerne so, dass der Bereich sich dementsprechend vergrößert, dass die Überlappung ausgeschlossen ist. Mit der

overflow: auto;

Eigenschaft finde ich sieht das nciht so ganz so dolle aus.

Maik · 03.07.09 13:56

So wie ich das beim ersten Überflug einschätze, sollten die beiden "Rahmen"-Grafiken in einem Bild vereint, und als Hintergrundbild in einem Elternelement genutzt werden. Diese beiden seperaten DIV-Blöcke wachsen nämlich in ihrer Höhe nicht automatisch mit, wenn der Inhalt in #boxcontentbig zunimmt.

mfg Maik

Voltex · 03.07.09 14:01

gab es da nicht mal die möglichkeit eine große DIV zu machen und dann den Rahmen Hintergrundbilder zuzuweisen. ungefähr in dem Stil:

border-background-image-left: url (PFAD);

damit wäre mein Problem denke ich größtenteils gelöst bzw. ich könnte es bequemer lösen...

Maik · 03.07.09 14:10

border-image ist Bestandteil der CSS3-Spezifikation.

Ich hab für dich zum Studium zwei passwortfreie Zip-Archive

Aus meinen CSS-Tutorials:

mfg Maik

Voltex · 03.07.09 14:16

Alles klar... ich werd mich mal daran versuchen... falls es Probleme gibt, meld ich mich einfach wieder hier

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Hilfe beim erstellen einer Konstanten Config Datei

Hilfe beim Erstellen eines datums in einer textdatei

Hilfe beim erstellen einer Poison-Bottle !

[PHP | MySQL] Hilfe beim Erstellen einer Umfrage

tips beim erstellen von styles wie...

E-Mail:

Abonnieren Abbestellen