Div lässt sich nicht richtig platzieren

kappilino

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

HTML

<!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>

Alles anzeigen

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;
}

Alles anzeigen

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;
    }
}

Alles anzeigen

Bitte um eure Hilfe. Habe schon rumprobiert wie ein wahnsinniger aber nichts funktioniert richtig.

Vielen Dank
kappilino

sejuma

Zitat

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:

Zitat

#suche
{
width: 239px;
height: 37px;
float: right;
}

Und vor MenueBar dann clearen mit

Zitat

<div style="clear: both;"></div>

wernerdeluxe

@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

kappilino

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.

Tags