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
<!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ädie-Technik</a></li>
<li><a href="#">Homecare</a></li>
<li><a href="#">Sanitä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
@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
@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
