Ergebnis 1 bis 3 von 3

Thema: Div wird rechts unterhalb angezeigt

  1. #1
    HTML Newbie
    Registriert seit
    28.02.2011
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Div wird rechts unterhalb angezeigt

    Hallo,
    zurzeit bin ich dabei ein neues Design meiner Seite umzusetzen. Ich möchte in meine Seite einen Blog integrieren. Das Layout ist auch schon entsprechend angepasst. Dabei befindet sich auf der linken Seite eine vertikale Navigationsleiste (Home) und rechts daneben der Inhalt.

    Zu finden unter: Link

    Leider wird die horizontale Navigationsleiste (rot gestrichelte Umrandung) rechts unterhalb meiner Home-Navileiste angezeigt. Eigentlich möchte ich, dass sie direkt unterhalb der Top-Navileiste (mit Login) angeordnet wird. Ich finde leider den Fehler nicht. Kann mir dabei jemand helfen?

    Code gekürzt:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>Marius M&uuml;ller Online</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!-- (en) Add your meta data here -->
    <!-- (de) Fuegen Sie hier ihre Meta-Daten ein -->
    <link href="http://www.marius-mueller-online.de/blog/wp-content/themes/yaml-basic/style.css" rel="stylesheet" type="text/css"/>
    <!--[if lte IE 7]>
    <link href="http://www.marius-mueller-online.de/blog/wp-content/themes/yaml-basic/css/patches/patch_2col_right_seo.css" rel="stylesheet" type="text/css" />
    <![endif]-->
    </head>
    <body>
    
    <div id="page_ray">
      <div id="page_ray2">
        <div id="header_ray">
        </div>
    
        <!-- begin: #menu_ray -->
        <div id="menu_ray">
          <ul style="list-style: none; padding: 0 0 0 0em; margin-top:10px; margin-left:-5px;">
            <li><a href="../index.php"><img src="../pics/buttons_03.gif" width="38" height="17" border="0" alt="Startseite" /></a></li>
            <li><a href="index.php"><img src="../pics/buttons_01.gif" width="46" height="16" border="0" alt="Blog" /></a></li>
            <li><img src="../pics/buttons_01.gif" width="46" height="16" border="0" alt="" /></li>
            <li><img src="../pics/buttons_01.gif" width="46" height="16" border="0" alt="" /></li>
          </ul>
        </div>
        <!-- end: #menu_ray -->
    
        <div id="page_margins">
          <div id="page">
            <div id="header">
              <div id="topnav">
    
                <!-- start: skip link navigation -->
                <a class="skip" href="#navigation" title="skip link">Skip to the navigation</a><span class="hideme">.</span>
                 <a class="skip" href="#content" title="skip link">Skip to the content</a><span class="hideme">.</span>
                 <!-- end: skip link navigation -->
    
                 <span><a href="#">Login</a> | <a href="#">Contact</a> | <a href="#">Imprint</a></span>
               </div>
              </div>
    
              <!-- begin: main navigation #nav -->
              <div id="nav">
                <!-- skiplink anchor: navigation -->
                <div id="nav_main">
                  <ul>
                    <li id="current"><a href="#">Button 1</a></li>
                    <li><a href="#">Button 2</a></li>
                    <li><a href="#">Button 3</a></li>
                    <li><a href="#">Button 4</a></li>
                    <li><a href="#">Button 5</a></li>
                  </ul>
                 </div>
                </div>
                <!-- end: main navigation -->
    
                <!-- begin: main content area #main -->
                <div id="main" style="float:left;">
                  <!-- begin: #col1 - first float column -->
                  <div id="col1">
                    <div id="col1_content" class="clearfix">
                      <h2>Column  #col1</h2>
                      <p>Lorem ipsum ... </p>
                      <h2>Column  #col1</h2>
                      <p>Lorem... </p>
                      <h2>Column  #col1</h2>
                      <p>Lorem ipsum...</p>
    
                     </div>
                   </div>
                   <!-- end: #col1 -->
    
                   <!-- begin: #col3 static column -->
                   <div id="col3">
                     <div id="col3_content" class="clearfix"> <a id="content" name="content"></a>
                        <!-- skiplink anchor: Content -->
                        <h2>Column  #col3</h2>
                        <p> Lorem...</p>
                        <p>Pellentesque ...</p>
                        <p>Pellentesque... </p>
                      </div>
                      <div id="ie_clearing">&nbsp;</div>
                      <!-- End: IE Column Clearing -->
                      </div>
                      <!-- end: #col3 -->
                    </div>
                    <!-- end: #main -->
    
                    <!-- begin: #footer -->
                    <div id="footer">Footer with copyright notice and status information<br />
    Layout based on <a href="http://www.yaml.de/">YAML</a> | Theme YAML basic by <a href="http://dynamicinternet.eu/">dynamicinternet</a></div>
                    <!-- end: #footer -->
                    </div>
                  </div>
    
                  <!-- begin: #footer_ray -->
                  <p id="footer_ray">&copy; 2011 Marius M&uuml;ller
                  <a href="../impressum_ray.php"><img src="../pics/buttons_13.gif" style="position:relative; top:5px; left:50px;" width="63" height="17" border="0" alt="Impressum" /></a></p>
                  <!-- end: #footer_ray -->
    
                </div>
             </div>
    
    </body>
    </html>
    CSS-Code
    Code:
    @charset "UTF-8";
    /**
     * "Yet Another Multicolumn Layout" - (X)HTML/CSS Framework
     *
     * (en) Screen layout for YAML examples
     * (de) Bildschirmlayout für YAML-Beispiele
     *
     * @copyright       Copyright 2005-2007, Dirk Jesse
     * @license         CC-A 2.0 (http://creativecommons.org/licenses/by/2.0/),
     *                  YAML-C (http://www.yaml.de/en/license/license-conditions.html)
     * @link            http://www.yaml.de
     * @package         yaml
     * @version         3.0.3
     * @revision        $Revision: 118 $
     * @lastmodified    $Date: 2007-08-18 16:03:42 +0200 (Sa, 18 Aug 2007) $
     */
    
    @media all
    {
      /*------------------------------------------------------------------------------------------------------*/
    
      /**
       * (en) Formatting YAML's  basic layout elements
       * (de) Gestaltung des YAML Basis-Layouts
       */
    
      /* (en) Marginal areas & page background */
      /* (de) Randbereiche & Seitenhintergrund */
      body { background: #ffffff; padding: 10px 0; }
    
      #page_ray {
        text-align: left;    /* Seiteninhalt wieder links ausrichten */
        margin: 0 auto;      /* standardkonforme horizontale Zentrierung */
        margin-top: 0.5em;
        width: 1000px;
        padding: 0.0em;
        border: 0px ridge #000;
        background: #ffffff url(../../../../../../pics/upperleft.jpg) no-repeat 100%;
        background-position:left top;
      }
    
      #page_ray2 {
        text-align: left;    /* Seiteninhalt wieder links ausrichten */
        margin: 0 auto;      /* standardkonforme horizontale Zentrierung */
        margin-top: 0.5em;
        width: 1000px;
        padding: 0.0em;
        border: 0px ridge silver;
        background: url(../../../../../../pics/lowerright.jpg) no-repeat 100%;
        background-position:right bottom;
      }
    
      #header_ray {
        text-align: left;    /* Seiteninhalt wieder links ausrichten */
        margin: 0 auto;      /* standardkonforme horizontale Zentrierung */
        margin-top: 0.0em;
        width: 1000px;
        height: 40px;
        padding: 0.0em;
        border: 0px ridge red;
      }
    
      #menu_ray {
        font-size: 0.91em;
        float: left; width: 80px;
        margin: 0; padding: 0;
        margin-left: 60px;
        margin-top: 10px;
        min-height:200px;
        border: 1px dashed silver;
        padding: 0 0 0;
      }
    
      #main_ray {
        margin-left: 150px;
        margin-right: 70px;
        margin-top: 10px;
        padding: 0 1em;
        border: 0px dashed silver;
        min-width: 16em; /* Mindestbreite (der Ueberschrift) verhindert Anzeigefehler in modernen Browsern */
        min-height: 40em;
      }
    
      p#footer_ray {
        height: 50px;
        font-size: 0.8em;
        margin: 0; padding: 0.1em;
        margin-left: 3em;
        border: 0px solid silver;
      }
    
      .right {
        float: right;
        margin-right: 15%;
        margin-top: 6em;
      }
    
      /* (en) Layout: width, background, borders */
      /* (de) Layout: Breite, Hintergrund, Rahmen */
      #page_margins { min-width: 740px; margin: 0 auto; border: 5px #889 dashed; margin-left: 150px;  margin-right: 70px;  margin-top: 10px; }
      #page{ background: #fff; border: 3px dashed yellow;}
    
      /* (en) Centering layout in old IE-versions */
      /* (de) Zentrierung des Layouts in alten IE-versionen */
      body { text-align: center }
      #page_margins { text-align:left }
    
      /* (en) Designing main layout elements */
      /* (de) Gestaltung der Hauptelemente des Layouts */
      #header {
        color: #000;
        background: transparent;
        padding: 28px 2em 1em 20px;
        border: 1px #000 solid;
                                   /*  margin-left:600px;*/
                                   /*  margin-top:0px;*/
      }
    
      #topnav { color: #aaa; background: transparent;}
    
      /* (en) adjustment of main navigation */
      /* (de) Anpassung der Hauptnavigation */
      #nav ul { margin-left: 20px;}
      #nav_main {background-color: #336;}
    
      #main { background: #fff; padding:10px 0; border: 3px green dashed;}     /*  margin-top:-65px;*/
    
      #footer {
        color:#666;
        background: #f9f9f9;
        padding: 15px;
        border-top: 4px #efefef solid;
      }
    
      /*------------------------------------------------------------------------------------------------------*/
    
      /**
       * (en) Formatting content container
       * (de) Formatierung der Inhalts-Container
       *
       * |-------------------------------|
       * | #header                       |
       * |-------------------------------|
       * | #col1   | #col3     | #col2   |
       * | 25%     | flexible  | 25%     |
       * |-------------------------------|
       * | #footer                       |
       * |-------------------------------|
       */
    
    
      #col1 { width: 25% }
      #col1_content { padding: 10px 10px 10px 20px; }
    
      #col2 { width: 25% }
      #col2_content { padding: 10px 20px 10px 10px; }
    
      #col3 { margin: 0 25%; border: 0px #000 solid; }
      #col3_content { padding: 10px }
    
      /*------------------------------------------------------------------------------------------------------*/
    
      /**
       * (en) Modifying "shiny buttons" navigation
       * (en) Anpassung der "Shiny Buttons" Navigation
       */
    
      #nav * { border: 2px blue dashed; }  /*  border: 0px none !important; */
      #nav_main { background: #efefef; border: 2px red dashed; }
      #nav_main ul { margin-left: 10px }
      #nav_main ul li { line-height: 1.2em }
    
      #nav_main ul li a,
      #nav_main ul li strong { color: #666; font-weight: normal; padding: 0.5em 0.8em 0.5em 0.8em;}
    
      #nav_main ul li a:focus,
      #nav_main ul li a:hover,
      #nav_main ul li a:active  { background: #182E7A; color: #fff }
    
      #nav_main ul li#current { background: transparent }
    
      #nav_main ul li#current strong,
      #nav_main ul li#current a,
      #nav_main ul li#current a:focus,
      #nav_main ul li#current a:hover,
      #nav_main ul li#current a:active { color: #4D87C7; font-weight: bold }
    
    }
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Pion
    Gast

    Standard AW: Div wird rechts unterhalb angezeigt

    main_ray ein Float geben, dann den Content zb Positionieren oder mit minus top werten hochziehen

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    28.02.2011
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Div wird rechts unterhalb angezeigt

    Ok, vielen Dank!
    Keine Ahnung, ob es so gemeint war, aber ich hab es mit dem Tipp irgendwie hinbekommen!

Ähnliche Themen

  1. Antworten: 4
    Letzter Beitrag: 08.12.2009, 14:17
  2. HP wird im IE falsch angezeigt!
    Von Dominikgt im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 09.01.2009, 14:02
  3. Wird im FF anders angezeigt, als im IE....
    Von Dominique im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 02.11.2007, 22:08
  4. HTML-Seite links wähle, rechts wird sie angezeigt, geht das
    Von ulrichl im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 10.02.2006, 20:17
  5. uhr wird nicht angezeigt
    Von phore im Forum Computer - Internet Forum
    Antworten: 3
    Letzter Beitrag: 04.08.2005, 11:53

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •