Ergebnis 1 bis 4 von 4

Thema: Div lässt sich nicht richtig platzieren

  1. #1
    Azubi(ne)
    Registriert seit
    29.01.2007
    Beiträge
    83
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Div lässt sich nicht richtig platzieren

    Hi,

    Ich bin es mal wieder und ich habe ein dickes Problem.

    Ich habe eine div in der sich genau drei Elemente befinden. Einmal das Menü in einer Liste welches unten stehen soll. Oben rechts soll sich das Logo in einem Div befinden ,oben links ein Feld indem sich ein Formular befindet und eine Textbox sowie ein Button für die Suche.

    Genau dieses Div bereitet mir Probleme. Es plaziert sich so ungefähr überall wo es will nur nich da wo ich es haben möchten.

    Hier die Quelltexte:

    Html Code
    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>Unbenanntes Dokument</title>
    <link href="../Style/navigation.css" rel="stylesheet" type="text/css" />
    <script src="../Script/SpryMenuBar.js" type="text/javascript"></script>
    <link href="../Style/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <link href="../Style/allgemein.css" rel="stylesheet" type="text/css" />
    <link href="../Style/Navigation.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    
        <div id="nav_content">
            
            <!--Logo-->
            
            <div class="logo"></div>
            
            <!--Suche-->
            
            <form id="suche">
                <input class="input_suche" type="text" name="input_search" />
                <input class="input_button" type="button" name="button_suche" />
            </form>
            
            
            <!--Menuebar mit Dropdown-->
            
            <ul id="MenuBar1" class="MenuBarHorizontal">
                  <li style="margin-right: 108px"><a class="MenuBarItemSubmenu" href="#">Home</a></li>
                  <li style="margin-right: 108px"><a class="MenuBarItemSubmenu" href="#">Unternehmen</a>
                      <ul>
                        <li><a href="#">Management</a></li>
                        <li><a href="#">Team</a> </li>
                        <li><a href="#">Chronik</a></li>
                        <li><a href="#">Jobs</a></li>
                        <li><a href="#">Partner</a></li>
                    </ul>
                  </li>
                  <li style="margin-right: 107px"><a href="#" class="MenuBarItemSubmenu">Leistungen</a>
                      <ul>
                        <li><a href="#">Reha-Technik</a></li>
                        <li><a href="#">Orthop&auml;die-Technik</a></li>
                        <li><a href="#">Homecare</a></li>
                        <li><a href="#">Sanit&auml;tshaus</a></li>
                    </ul>
                  </li>
                  <li style="margin-right: 106px"><a href="#">Kontakt</a></li>
                  <li><a href="#" class="MenuBarItemSubmenu">Impressum</a> </li>
            </ul>
            
            <script type="text/javascript">
            <!--
            var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:        "SpryAssets/SpryMenuBarRightHover.gif"});
            //-->
            </script>
        
        </div>
    
    </body>
    
    </html>
    CSS Code für die Site
    Code:
    @charset "UTF-8";
    /* CSS Document */
    
    #nav_content 
    {
        height: 89px;
        width: 770px; 
    }
    
    /*Logo*/
    
    .logo
    {
        width: 253px;
        height: 41px;
        background-image: url(../Bilder/logo.jpg);
        margin: 0px 6px 32px 512px;
        float: right;
    }
    
    /*Suche*/
    
    #suche
    {
        width: 239px;
        height: 37px;
        float:    inherit;
    }
    
    .input_suche
    {
        width: 218px;
        border-left: 1px solid #a2c6df;
        border-bottom: 1px solid #a2c6df;
        border-top: 1px solid #a2c6df;
        border-right: none;
    }
    Und hier die CSS Datei speziell für das Menue
    Code:
    @charset "UTF-8";
    
    /* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
    
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    
    /*******************************************************************************
    
     LAYOUT INFORMATION: describes box model, positioning, z-order
    
     *******************************************************************************/
    
    /* The outermost container of the Menu Bar, an auto width box with no margin or padding */
    ul.MenuBarHorizontal
    {
        margin-left: 5px;
        padding: 0;
        list-style-type: none;
        font-size: 14px;
        font-family: Arial;
        color: #006bb6;
        font-weight: bold;
        cursor: default;
        width: auto;
    }
    /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
    ul.MenuBarActive
    {
        z-index: 1000;
    }
    /* Menu item containers, position children relative to this container and are a fixed width */
    ul.MenuBarHorizontal li
    {
        margin: 0;
        padding: 0;
        list-style-type: none;
        position: relative;
        text-align: left;
        cursor: pointer;
        width: auto;
        float: left;
    }
    /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
    ul.MenuBarHorizontal ul
    {
        margin: 0;
        padding: 0;
        list-style-type: none;
        z-index: 1020;
        cursor: default;
        width: 150px;
        position: absolute;
        left: -1000em;
        background-color: #FFFFFF;
    }
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    {
        left: auto;
    }
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
    {
        width: 150px;
    }
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
    {
        left: auto;
        top: 0;
    }
    
    /*******************************************************************************
    
     DESIGN INFORMATION: describes color scheme, borders, fonts
    
     *******************************************************************************/
    
    /* Submenu containers have borders on all sides */
    ul.MenuBarHorizontal ul
    {
        margin-top: 7px;
        border: 1px solid #a2c6df;
        font-size: 12px;
        font-weight: normal;
    }
    
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
    {
        display: block;
        cursor: pointer;
        color: #006bb6;
        text-decoration: none;
    }
    
    ul.MenuBarHorizontal ul a
    {
        padding-top: 4px;
        padding-bottom: 4px;
        padding-left: 8px;
    }
    
    ul.MenuBarHorizontal ul a:hover 
    {
        background-color: #006bb6;
        color: #FFFFFF;
    }
    /*******************************************************************************
    
     BROWSER HACKS: the hacks below should not be changed unless you are an expert
    
     *******************************************************************************/
    
    /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
    ul.MenuBarHorizontal iframe
    {
        position: absolute;
        z-index: 1010;
    }
    /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
    @media screen, projection
    {
        ul.MenuBarHorizontal li.MenuBarItemIE
        {
            display: inline;
            f\loat: left;
            background: #FFF;
        }
    }
    Bitte um eure Hilfe. Habe schon rumprobiert wie ein wahnsinniger aber nichts funktioniert richtig.

    Vielen Dank
    kappilino
    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 !!!!!
    Gebt uns ein paar verrückte Menchen, denn seht wohin uns die normalen gebracht haben.

  2. #2
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Es plaziert sich so ungefähr überall wo es will nur nich da wo ich es haben möchten.
    Und wo möchtest du es haben?

    Falls es oben rechts hin soll, dann versuch's mal so:

    #suche
    {
    width: 239px;
    height: 37px;
    float: right;
    }
    Und vor MenueBar dann clearen mit
    <div style="clear: both;"></div>
    <!--Menuebar mit Dropdown-->

  3. #3
    Kaiser(in)
    Registriert seit
    26.07.2004
    Ort
    Server 2 von 3
    Alter
    27
    Beiträge
    2.512
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    @kappilino
    Wäre super, wenn du das ganze mal online stellen würdest. Kann dir vll. helfen, hab allerdings keine lust jetzt noch selbst htm und css dateien anzulegen, um es zu testen.

    gruß
    Lukas
    Maybe this world is another planet's hell

  4. #4
    Azubi(ne)
    Themenstarter

    Registriert seit
    29.01.2007
    Beiträge
    83
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Leider kann ich es nicht online stellen. Ist erst mal, bis zur fertig Stellung vertraulich.

    Naja, habe es aber inzwischen auch schon selbst heraus gefunden.
    Ich musste einfach den html code beim div mit dem logo unter den mit der suche setzen. Dann das logo left floaten und das suchfeld mit einigen margins eben so formatieren wie ich es haben wollte. Das menue clearen und dann ebenfalls platzieren. Fertig.
    Gebt uns ein paar verrückte Menchen, denn seht wohin uns die normalen gebracht haben.

Ähnliche Themen

  1. BAnner lässt sich nicht öffnen?
    Von thebosstomas im Forum Off Topic und Quasselbox
    Antworten: 0
    Letzter Beitrag: 18.05.2008, 20:46
  2. AVM Treiber lässt sich nicht löschen
    Von Anne333 im Forum Computer - Internet Forum
    Antworten: 0
    Letzter Beitrag: 14.08.2007, 13:59
  3. MSN Problem - Ordner lässt sich nicht löschen
    Von davidos_no.1 im Forum Computer - Internet Forum
    Antworten: 4
    Letzter Beitrag: 31.01.2007, 22:25
  4. linux lässt sich nicht installieren!!
    Von cookie im Forum Computer - Internet Forum
    Antworten: 21
    Letzter Beitrag: 25.11.2005, 16:07
  5. Quelltext lässt sich nicht anzeigen
    Von Jessy im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 16.07.2005, 19:49

Stichworte

Berechtigungen

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