zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden IE7 fixing - expandable menu

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 05.04.2008, 09:59
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.04.2008
Beiträge: 4
matsie befindet sich auf einem aufstrebenden Ast
Standard IE7 fixing - expandable menu

Hallo,
Ziel ist es, eine CSS-Menüstruktur kompatibel für den Internet Explorer 7 zu gestalten. Das Menü funktioniert für Firefox, Safari, etc. Für IE5 bis IE6 habe ich die hacks gefunden, damit das Menu entsprechend funktioniert. Jedoch beim IE7 verzerrt es sich.

Hier der relevante CSS Code für die Navigation:

Code:
/* BEG MENU IE7 */
#navcontainer { 
	margin: 50px -90px 0 auto; /* Menu box position w/ border line */
	border-left-width: 1px;
	border-left-style: solid;
	position: relative;
	left: auto;
	float: right;
	right: 0;
	top: 0;
	padding-bottom: 60px;
	padding-top: 20px;
}

#navcontainer #current {
	font-weight: bold;
}

#navcontainer ul ul #current {
	font-weight: bold;
}

#navcontainer ul ul ul #current {
}

/* Parent - Level 0 */

#navcontainer ul { /* main level position */
	margin-right: auto;
	margin-left: auto;
	text-align: right;
	width: 152px;
	position: relative;
	right: 137px; /* Menu box position w/o border line */ 
	list-style-type: none; /* ie7 fix */

}

#navcontainer ul li {
	margin: 6px 0;
	padding: 0;
	padding-right: 10px;
	padding-left: auto;
	text-decoration: none;
}

#navcontainer ul li a:link, #navcontainer ul li a:visited {
	text-decoration: none;
	padding-right: 20px;
}


#navcontainer ul a {
	display: block;
	text-decoration: none;
	font-size: 11px;
	font-weight: normal;
	padding: 0;
	position: relative;
	line-height: 2em;
}

#navcontainer a:hover {
}

/* Child - Level 1 */
#navcontainer ul ul {
	text-align: left;
	right: -120px; /* child level 1 horizontal position */
	left: 120px;
	display: none; /* impact on border line middle */
}

#navcontainer li ul.see {
	display: block;
	}


#navcontainer ul li li {
	margin: 6px 0;
	display: block;
	font-size: 12px;
}

#navcontainer ul li li a {
	padding-left: 20px;
}


#navcontainer ul ul li { 
}

#navcontainer ul ul li {
	margin-left: 12px;
}

#navcontainer ul ul ul li {
	margin-left: 9px;
}

#sidebar #navcontainer ul ul a {
	text-decoration: none;
	font-size: 10px;
}

#navcontainer ul ul ul{
	left: auto;
	right: 0;
	text-align: left;
}

#sidebar #navcontainer ul ul ul a {
	text-decoration: none;
	padding-top: 0;
	font-size: 9px;
}

#navcontainer ul ul ul ul li {
	margin-left: 6px;
}

#navcontainer ul ul ul ul a {
}

#navcontainer ul ul a:hover {
}

#navcontainer li:hover ul, #navcontainer li a:hover ul { /* child level 1 */
	display:block; 
	}

ul {
	font-size: 0.9em;
	margin: 0;
	padding: 0;
}

ul li {
	margin-bottom: 0.7em;
	line-height: 1.2em;
}


/* BULLETS */
#navcontainer ul li a.currentAncestor, #navcontainer ul li a.current {
	background-image: url(../img/bullets/bullet_grey_dark_12x12.png);
	background-position: right center;
	background-repeat: no-repeat;
}

#navcontainer ul li li a.current, #navcontainer ul li li a.currentAncestor {
	background-image: url(../img/bullets/bullet_grey_dark_9x9.png);
	background-position: left center;

}
/* END MENU IE7 */
Und hier der Code der ganzen Webseite:

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>Untitled Document</title>

<style type="text/css">
/* BEG MENU IE7 */
#navcontainer { 
	margin: 50px -90px 0 auto; /* Menu box position w/ border line */
	border-left-width: 1px;
	border-left-style: solid;
	position: relative;
	left: auto;
	float: right;
	right: 0;
	top: 0;
	padding-bottom: 60px;
	padding-top: 20px;
}

#navcontainer #current {
	font-weight: bold;
}

#navcontainer ul ul #current {
	font-weight: bold;
}

#navcontainer ul ul ul #current {
}

/* Parent - Level 0 */

#navcontainer ul { /* main level position */
	margin-right: auto;
	margin-left: auto;
	text-align: right;
	width: 152px;
	position: relative;
	right: 137px; /* Menu box position w/o border line */ 
	list-style-type: none; /* ie7 fix */

}

#navcontainer ul li {
	margin: 6px 0;
	padding: 0;
	padding-right: 10px;
	padding-left: auto;
	text-decoration: none;
}

#navcontainer ul li a:link, #navcontainer ul li a:visited {
	text-decoration: none;
	padding-right: 20px;
}


#navcontainer ul a {
	display: block;
	text-decoration: none;
	font-size: 11px;
	font-weight: normal;
	padding: 0;
	position: relative;
	line-height: 2em;
}

#navcontainer a:hover {
}

/* Child - Level 1 */
#navcontainer ul ul {
	text-align: left;
	right: -120px; /* child level 1 horizontal position */
	left: 120px;
	display: none; /* impact on border line middle */
}

#navcontainer li ul.see {
	display: block;
	}


#navcontainer ul li li {
	margin: 6px 0;
	display: block;
	font-size: 12px;
}

#navcontainer ul li li a {
	padding-left: 20px;
}


#navcontainer ul ul li { 
}

#navcontainer ul ul li {
	margin-left: 12px;
}

#navcontainer ul ul ul li {
	margin-left: 9px;
}

#sidebar #navcontainer ul ul a {
	text-decoration: none;
	font-size: 10px;
}

#navcontainer ul ul ul{
	left: auto;
	right: 0;
	text-align: left;
}

#sidebar #navcontainer ul ul ul a {
	text-decoration: none;
	padding-top: 0;
	font-size: 9px;
}

#navcontainer ul ul ul ul li {
	margin-left: 6px;
}

#navcontainer ul ul ul ul a {
}

#navcontainer ul ul a:hover {
}

#navcontainer li:hover ul, #navcontainer li a:hover ul { /* child level 1 */
	display:block; 
	}

ul {
	font-size: 0.9em;
	margin: 0;
	padding: 0;
}

ul li {
	margin-bottom: 0.7em;
	line-height: 1.2em;
}


/* BULLETS */
#navcontainer ul li a.currentAncestor, #navcontainer ul li a.current {
	background-image: url(../img/bullets/bullet_grey_dark_12x12.png);
	background-position: right center;
	background-repeat: no-repeat;
}

#navcontainer ul li li a.current, #navcontainer ul li li a.currentAncestor {
	background-image: url(../img/bullets/bullet_grey_dark_9x9.png);
	background-position: left center;

}
/* END MENU IE7 */

/* @group General Styles */

body, html {
	font-family: Verdana, "Bitstream Vera Sans", "Vera Sans", Tahoma, Geneva, sans-serif;
	text-align: center;
	font-family: Verdana, "Bitstream Vera Sans", "Vera Sans", Tahoma, Geneva, sans-serif;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
}
body { /* IE 5.5, 6, 7 scrollbar colors */
	scrollbar-base-color: #000000;
	scrollbar-face-color: #222222;
	scrollbar-track-color: #111111;
	scrollbar-arrow-color: #666666;
	scrollbar-highlight-color: #333333;
	scrollbar-3dlight-color: #CCCCCC;
	scrollbar-shadow-color: #333333;
	scrollbar-darkshadow-color: #999999;
}

p {
	font-size: 1em;
	line-height: 1.4em;
	text-align:justify;
}

p #firm a {
	font-weight: bold;
	text-decoration: none;
}

#bullet li {
	margin-left: 50px;
	text-align: justify;
}
	
p .footer2 {
	text-align: center;
	color:#00FF99;
	}

h1 {
	font-size: 1.3em;
	margin: 0;
	padding: 0;
}

h2 {
	font-weight: bold;
	font-style: normal;
	margin-bottom: 0.5em;
	margin-top: 1em;
	font-size: 1.2em;
}

h3 {
	margin-bottom: 0.5em;
	font-size: 1.1em;
	margin-top: 2em;
}

h4 {
	margin-top: 1em;
	margin-bottom: 0.1em;
	font-size: 1em;
}

h5 {
	margin-top: 1em;
	margin-bottom: 0.1em;
	font-size: 0.9em;
}

#mainContent #content #content_text p.description {
	font-size: 1em;
	line-height: 1.3em;
}

#mainContent #content #content_text p.title {
}

img {
	border-style: none;
}

#pageHeader #logo {
	position: absolute;
	width: 100%;
	top: auto;
	bottom: 0;
	left: 0;
	
}

#pageHeader #logo img {
}

.image-left {
	margin: 3px;
	padding: 3px;
	float: left;
}

.image-right {
	margin: 3px;
	padding: 3px;
	float: right;
}

a img {
	border: none;
}
	
/* @end */

/* @group Layout */

#container { 
	/*position: absolute;
	top: 4%;
	left: 4%;
	right: 4%;
	bottom: 4%;*/
	margin: auto; /* Right And Left Margin Widths To Auto */
	text-align: center; /* Hack To Keep IE5 Windows Happy */
	/*height: 92%;
	width: 92%;*/
	border: none;
	position: absolute;
	top: 50%;
	margin-top: -320px;
	height: 640px;
	margin-left: -480px;
	left: 50%;
	width: 960px;
}

#pageHeader {
	height: 100%;
	position: absolute;
	margin: 0;
	padding: 0;
	top: 0;
	bottom: 0;
	left: 0;
	width: 12%;
}

#pageHeader h1 { 
	padding: 0;
	font-size: 1em;
	font-style: normal;
	position: relative;
	font-weight: bold;
	margin: 0;
	margin-top: 10%;
	top: 0;
	display: none;
}

#pageHeader h2 { 
	margin: 0px;
	padding: 0px;
	font-weight: normal;
	font-size: 0.9em;
	font-style: normal;
	display: none;
}

#pageHeader_top {
	display: none;
}

#mainContent {
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 12%;
	background: transparent;
	margin: 0;
	padding: 0;
	width: 88%;
}

#mainContent #sidebar {
	position: absolute;
	padding: 0px;
	text-align: left;
	left: 0;
	font-size: 0.6em;
	top: 0;
	bottom: 0;
	margin: 0;
	overflow: hidden;
	height: 100%;
	width: 58mm;
}

#sidebar .sideHeader {
	font-weight: normal;
	font-size: 1.2em;
	margin-bottom: 3px;
	width: 80%;
}

#mainContent #sidebar p {
}

#mainContent #content {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	height: 100%;
	width: 75%;
	text-align: left;
	font-size: 0.7em;
	overflow: auto;
}

#mainContent #content #content_text {
	position: relative;
	margin-top: 4%;
	margin-bottom: auto;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 15px;
	padding-right: 8%;
	padding-left: 8%;
}

#mainContent #content #content_text img.whole {
	width: 100%;
}

#mainContent #content #content_text img.half {
	width: 45%;
}

#footer { /* This Is The BG Color Of The Main Div */
	text-align: center;
	font-size: 11px;
	position: absolute;
	margin: auto;
	width: 60%;
	bottom: -12px;
	left: 39%;
	right: auto;
	padding: 8px 0px 0px 0px;
	height: 20px;
	line-height: 1.8em;

}

#footer a {
	text-decoration: none;
}

#footer a:hover {
	text-decoration: underline;
}

#sidecontainer {
	padding: 0;
}

#side_plus {
	/*margin: 10px;
	border: 1px solid #b1b1b1;*/
	padding: 0;
	width: 86%;
	margin: 2em 7%;
}

#side_plus a {
	font-weight: normal;
}

#sidecontainer #side_plus p {
}


	
/* @end */

/* @group Bread-crumb */

#breadcrumbcontainer {
	position: relative;
	margin-bottom: auto;
	margin-left: auto;
	margin-right: auto;
	padding-right: 8%;
	padding-left: 8%;
	text-align: right;
	width: auto;
	font-size: 11px;
	line-height: 14px;
	height: 25px;
	/*border-bottom: 1px solid #ccc;*/

}

#breadcrumbcontainer ul {
	padding: 0;
	list-style-type: none;
	padding-top: 5px;
	margin: 0;
}

#breadcrumbcontainer li {
	margin: 0;
	display: inline;
}


#breadcrumbcontainer a {
	text-decoration: none;
}

#breadcrumbcontainer a:hover {
	font-weight: bold;
}

#breadcrumbcontainer ul li #selected {
	font-weight: bold;
}
	
/* @end */


/* @group Global Classes */



.imageStyle {
	padding: 0;
	margin: 0;
}

p.description {
	margin-top: 0;
	font-style: italic;
}
	
/* @end */

/* @group Contact Form */
.message-text { } 

.required-text {
} 

.form-input-field {
	border-width: 1px;
	border-style:solid;
	width: 100%;
}

textarea.form-input-field {
} 

.form-input-button { 
} 

/* @end */

/* NO RESIZE */
.image-left {
}

.image-right {
}

.imageStyle {
}
/* END NO RESIZE */


#imagecontainer {
	height: 201px;
	width: auto;
}


#teampic {
	float: right;
	width: 80px;
	padding-left: 10px;
}

#mapframe {
	float: right;
	padding-left: 10px;
}
</style>


</head>

<body>
  <div id="container">
    <div id="pageHeader_top">
      <h1></h1>
      <h2></h2>
    </div>

    <div id="pageHeader">
      <h1></h1>
      <h2></h2>
      <div id="logo"><img src=# width="113" alt="site logo" /></div>
    </div>

    <div id="mainContent">
      <div id="sidebar" style="background-color: #CC9900">
        <div id="sidecontainer">
          <div id="navcontainer">
            <ul>
              <li><a href="../index.html" rel="self">home</a></li>
              <li><a href="firm.html" rel="self">testmenu 1</a>
                <ul>
                  <li><a href=# rel="self">testsubmenu 2</a></li>
                  <li><a href=# rel="self">testsubmenu 3</a></li>
                  <li><a href=# rel="self">testtesttest submenu 1</a></li>
                </ul>
              </li>
              <li><a href="firm.html" rel="self">testmenu 1</a>
                <ul>
                  <li><a href=# rel="self">testsubmenu 2</a></li>
                  <li><a href=# rel="self">testsubmenu 3</a></li>
                  <li><a href=# rel="self">testtesttest submenu 1</a></li>
                  <li><a href=# rel="self">testtesttest submenu 3</a></li>
                </ul>
              </li>
              <li><a href="trans.html" rel="self">testtestmenu 3</a></li>
              <li><a href="press.html" rel="self">testmenu 4</a></li>
              <li><a href="contact.html" rel="self" id="current" class="current" name="current">testmenu 5</a></li>
            </ul>
          </div>
          <div id="side_plus">
            <div class="sideHeader"></div>
          </div>
        </div>
      </div>

      <div id="sidebar2">
        <div class="sideHeader"></div>
      </div>

      <div id="content">
        <div id="breadcrumbcontainer">
          <ul>
            <li><a href="../de/firm.html">de</a>&nbsp;&nbsp;&middot;&nbsp;&nbsp;</li>
			<li><a href="../ca/firm.html">ca</a>&nbsp;&nbsp;&middot;&nbsp;&nbsp;</li>
			<li><a href="../fr/firm.html">fr</a>&nbsp;&nbsp;&middot;&nbsp;&nbsp;</li>
            <li><a href="../en/firm.html" id="selected">en</a>&nbsp;&nbsp;&middot;&nbsp;&nbsp;</li>
            <li><a href="../es/firm.html">es</a></li>
          </ul>
        </div>

        <div id="content_text">
        	<div id="imagecontainer"> </div>    
          <br/>
          <br/>
          <br/>
<!--   TEXT CONTENT INPUT -->
          <p><span id="firm">XXX</span></p>
          <p>XXX</p>
<!--   END TEXT CONTENT INPUT -->
        </div>
      </div>
      <br style="clear: both;" />
    </div>

    <div id="footer">
      <p>xxx</p>
    </div>
</div>
</body>
</html>
Fragestellung: Welches sind die CSS-Anpassungen, die vorgenommen werden müssen, damit die Darstellung des Menüs im IE7 funktionert?

Danke
mat
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 10.04.2008, 07:49
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.04.2008
Beiträge: 4
matsie befindet sich auf einem aufstrebenden Ast
Standard

Hat jemand eine Idee?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 10.04.2008, 11:59
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 09.07.2004
Beiträge: 1.103
cgdesign befindet sich auf einem aufstrebenden Ast
Standard

Der CSS-Code ist ziemlich undurchsichtig. Nimm doch irgendein vorgefertigtes Menü: Stu Nicholls | CSSplay | A CSS flyout menu that works in IE
Mit Zitat antworten
  #4 (permalink)  
Alt 10.04.2008, 12:25
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.04.2008
Beiträge: 4
matsie befindet sich auf einem aufstrebenden Ast
Standard

Leider gibt es in dem zietierten Forum kein vorgefertigtes Menü mit derselben oder ähnlicher Menüstrukur. Damit ist mir leider nicht geholfen.
Mit Zitat antworten
  #5 (permalink)  
Alt 10.04.2008, 12:28
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 09.07.2004
Beiträge: 1.103
cgdesign befindet sich auf einem aufstrebenden Ast
Standard

Kannst du dein Menü mal vollständig online stellen? Sodass man mal sieht, wie es richtig aussehen soll? Ich meine, selbst im FF sieht es ziemlich eigenartig aus...
Mit Zitat antworten
  #6 (permalink)  
Alt 10.04.2008, 13:27
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.04.2008
Beiträge: 4
matsie befindet sich auf einem aufstrebenden Ast
Standard

Beispiel
Es geht nur um die Menüstruktur. Daher habe ich unnötigen Balast weggelassen. Testmenü A und B enthalten Untermenüs.

Geändert von matsie (10.04.2008 um 13:41 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 10.04.2008, 16:55
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 09.07.2004
Beiträge: 1.103
cgdesign befindet sich auf einem aufstrebenden Ast
Standard

Keine Ahnung, das Menü ist ziemlich verwirrend. Ich habe jetzt nur mal ein paar Sachen schnell geändert und es sieht zumindest im IE7 und FF gleich aus, auch wenn es zugleich eine absolute Katastrophe ist und bei längeren Texten auch nicht so funktionieren wird.

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>Untitled Document</title>

<style type="text/css">
/* BEG MENU IE7 */
#navcontainer {
margin: 50px -150px 0 auto; /* Menu box position w/ border line */
position: relative;
left: auto;
right: 0;
top: 0;
padding-bottom: 60px;
padding-top: 20px;

}

#navcontainer #current {
font-weight: bold;
}

#navcontainer ul ul #current {
font-weight: bold;
}

#navcontainer ul ul ul #current {
}

/* Parent - Level 0 */

#navcontainer ul { /* main level position */
margin-right: auto;
margin-left: auto;
text-align: right;
width: 152px;
position: relative;
right: 137px; /* Menu box position w/o border line */
list-style-type: none; /* ie7 fix */
border-right-width: 1px;
border-right-style: solid;

}

#navcontainer ul li {
margin: 6px 0;
padding: 0;
padding-right: 0;
padding-left: auto;
text-decoration: none;
}

#navcontainer ul li a:link, #navcontainer ul li a:visited {
text-decoration: none;
padding-right: 20px;
}


#navcontainer ul a {
display: block;
text-decoration: none;
font-size: 11px;
font-weight: normal;
padding: 0;
position: relative;
line-height: 2em;
}

#navcontainer a:hover {
}

/* Child - Level 1 */
#navcontainer ul ul {
text-align: left;
right: -120px; /* child level 1 horizontal position */
left: 130px;
display: none; /* impact on border line middle */
}

#navcontainer li ul.see {
display: block;
}


#navcontainer ul li li {
margin: 6px 0;
display: block;
font-size: 12px;
}

#navcontainer ul li li a {
padding-left: 20px;
}


#navcontainer ul ul li {
}

#navcontainer ul ul li {
margin-left: 12px;
}

#navcontainer ul ul ul li {
margin-left: 9px;
}

#sidebar #navcontainer ul ul a {
text-decoration: none;
font-size: 10px;
}

#navcontainer ul ul ul{
left: auto;
right: 0;
text-align: left;
}

#sidebar #navcontainer ul ul ul a {
text-decoration: none;
padding-top: 0;
font-size: 9px;
}

#navcontainer ul ul ul ul li {
margin-left: 6px;
}

#navcontainer ul ul ul ul a {
}

#navcontainer ul ul a:hover {
}

#navcontainer li:hover ul, #navcontainer li a:hover ul { /* child level 1 */
display:block;
}

ul {
font-size: 0.9em;
margin: 0;
padding: 0;
}

ul li {
margin-bottom: 0.7em;
line-height: 1.2em;
}


/* BULLETS */
#navcontainer ul li a.currentAncestor, #navcontainer ul li a.current {
background-image: url(../img/bullets/bullet_grey_dark_12x12.png);
background-position: right center;
background-repeat: no-repeat;
}

#navcontainer ul li li a.current, #navcontainer ul li li a.currentAncestor {
background-image: url(../img/bullets/bullet_grey_dark_9x9.png);
background-position: left center;

}
/* END MENU IE7 */

/* @group General Styles */

body, html {
font-family: Verdana, "Bitstream Vera Sans", "Vera Sans", Tahoma, Geneva, sans-serif;
text-align: center;
font-family: Verdana, "Bitstream Vera Sans", "Vera Sans", Tahoma, Geneva, sans-serif;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: auto;
}
body { /* IE 5.5, 6, 7 scrollbar colors */
scrollbar-base-color: #000000;
scrollbar-face-color: #222222;
scrollbar-track-color: #111111;
scrollbar-arrow-color: #666666;
scrollbar-highlight-color: #333333;
scrollbar-3dlight-color: #CCCCCC;
scrollbar-shadow-color: #333333;
scrollbar-darkshadow-color: #999999;
}

p {
font-size: 1em;
line-height: 1.4em;
text-align:justify;
}

p #firm a {
font-weight: bold;
text-decoration: none;
}

#bullet li {
margin-left: 50px;
text-align: justify;
}

p .footer2 {
text-align: center;
color:#00FF99;
}

h1 {
font-size: 1.3em;
margin: 0;
padding: 0;
}

h2 {
font-weight: bold;
font-style: normal;
margin-bottom: 0.5em;
margin-top: 1em;
font-size: 1.2em;
}

h3 {
margin-bottom: 0.5em;
font-size: 1.1em;
margin-top: 2em;
}

h4 {
margin-top: 1em;
margin-bottom: 0.1em;
font-size: 1em;
}

h5 {
margin-top: 1em;
margin-bottom: 0.1em;
font-size: 0.9em;
}

#mainContent #content #content_text p.description {
font-size: 1em;
line-height: 1.3em;
}

#mainContent #content #content_text p.title {
}

img {
border-style: none;
}

#pageHeader #logo {
position: absolute;
width: 100%;
top: auto;
bottom: 0;
left: 0;

}

#pageHeader #logo img {
}

.image-left {
margin: 3px;
padding: 3px;
float: left;
}

.image-right {
margin: 3px;
padding: 3px;
float: right;
}

a img {
border: none;
}

/* @end */

/* @group Layout */

#container {
/*position: absolute;
top: 4%;
left: 4%;
right: 4%;
bottom: 4%;*/
margin: auto; /* Right And Left Margin Widths To Auto */
text-align: center; /* Hack To Keep IE5 Windows Happy */
/*height: 92%;
width: 92%;*/
border: none;
position: absolute;
top: 50%;
margin-top: -320px;
height: 640px;
margin-left: -480px;
left: 50%;
width: 960px;
}

#pageHeader {
height: 100%;
position: absolute;
margin: 0;
padding: 0;
top: 0;
bottom: 0;
left: 0;
width: 12%;
}

#pageHeader h1 {
padding: 0;
font-size: 1em;
font-style: normal;
position: relative;
font-weight: bold;
margin: 0;
margin-top: 10%;
top: 0;
display: none;
}

#pageHeader h2 {
margin: 0px;
padding: 0px;
font-weight: normal;
font-size: 0.9em;
font-style: normal;
display: none;
}

#pageHeader_top {
display: none;
}

#mainContent {
height: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 12%;
background: transparent;
margin: 0;
padding: 0;
width: 88%;
}

#mainContent #sidebar {
position: absolute;
padding: 0px;
text-align: left;
left: 0;
font-size: 0.6em;
top: 0;
bottom: 0;
margin: 0;
overflow: hidden;
height: 100%;
width: 58mm;
}

#sidebar .sideHeader {
font-weight: normal;
font-size: 1.2em;
margin-bottom: 3px;
width: 80%;
}

#mainContent #sidebar p {
}

#mainContent #content {
position: absolute;
right: 0;
top: 0;
bottom: 0;
height: 100%;
width: 75%;
text-align: left;
font-size: 0.7em;
overflow: auto;
}

#mainContent #content #content_text {
position: relative;
margin-top: 4%;
margin-bottom: auto;
margin-left: auto;
margin-right: auto;
padding-bottom: 15px;
padding-right: 8%;
padding-left: 8%;
}

#mainContent #content #content_text img.whole {
width: 100%;
}

#mainContent #content #content_text img.half {
width: 45%;
}

#footer { /* This Is The BG Color Of The Main Div */
text-align: center;
font-size: 11px;
position: absolute;
margin: auto;
width: 60%;
bottom: -12px;
left: 39%;
right: auto;
padding: 8px 0px 0px 0px;
height: 20px;
line-height: 1.8em;

}

#footer a {
text-decoration: none;
}

#footer a:hover {
text-decoration: underline;
}

#sidecontainer {
padding: 0;
}

#side_plus {
/*margin: 10px;
border: 1px solid #b1b1b1;*/
padding: 0;
width: 86%;
margin: 2em 7%;
}

#side_plus a {
font-weight: normal;
}

#sidecontainer #side_plus p {
}



/* @end */

/* @group Bread-crumb */

#breadcrumbcontainer {
position: relative;
margin-bottom: auto;
margin-left: auto;
margin-right: auto;
padding-right: 8%;
padding-left: 8%;
text-align: right;
width: auto;
font-size: 11px;
line-height: 14px;
height: 25px;
/*border-bottom: 1px solid #ccc;*/

}

#breadcrumbcontainer ul {
padding: 0;
list-style-type: none;
padding-top: 5px;
margin: 0;
}

#breadcrumbcontainer li {
margin: 0;
display: inline;
}


#breadcrumbcontainer a {
text-decoration: none;
}

#breadcrumbcontainer a:hover {
font-weight: bold;
}

#breadcrumbcontainer ul li #selected {
font-weight: bold;
}

/* @end */


/* @group Global Classes */



.imageStyle {
padding: 0;
margin: 0;
}

p.description {
margin-top: 0;
font-style: italic;
}

/* @end */

/* @group Contact Form */
.message-text { }

.required-text {
}

.form-input-field {
border-width: 1px;
border-style:solid;
width: 100%;
}

textarea.form-input-field {
}

.form-input-button {
}

/* @end */

/* NO RESIZE */
.image-left {
}

.image-right {
}

.imageStyle {
}
/* END NO RESIZE */


#imagecontainer {
height: 201px;
width: auto;
}


#teampic {
float: right;
width: 80px;
padding-left: 10px;
}

#mapframe {
float: right;
padding-left: 10px;
}
</style>


</head>

<body>
  <div id="container">
    <div id="pageHeader_top">

      <h1></h1>
      <h2></h2>
    </div>

    <div id="pageHeader">
      <h1></h1>
      <h2></h2>
      <div id="logo"><img src=# width="113" alt="site logo" /></div>
    </div>

    <div id="mainContent">
      <div id="sidebar" style="background-color: #CC9900">
        <div id="sidecontainer">
          <div id="navcontainer">
            <ul>
              <li><a href=# rel="self">home</a></li>
              <li><a href=# rel="self">testmenu A</a>
                <ul>
                  <li><a href=# rel="self">testsubmenu 2</a></li>
                  <li><a href=# rel="self">testsubmenu 3</a></li>
                  <li><a href=# rel="self">testtesttest submenu 1</a></li>
                </ul>
              </li>
              <li><a href=# rel="self">testmenu B</a>
                <ul>
                  <li><a href=# rel="self">testsubmenu 2</a></li>
                  <li><a href=# rel="self">testsubmenu 3</a></li>
                  <li><a href=# rel="self">testtesttest submenu 1</a></li>
                  <li><a href=# rel="self">testtesttest submenu 3</a></li>
                </ul>
              </li>
              <li><a href=# rel="self">testtestmenu 3</a></li>
              <li><a href=# rel="self">testmenu 4</a></li>
              <li><a href=# rel="self" id="current" class="current" name="current">testmenu 5</a></li>
            </ul>
          </div>

          <div id="side_plus">
            <div class="sideHeader"></div>

          </div>
        </div>
      </div>

      <div id="sidebar2">
        <div class="sideHeader"></div>
      </div>

      <div id="content">
        <div id="breadcrumbcontainer">

          <ul>
            <li><a href="firm.html">de</a>&nbsp;&nbsp;&middot;&nbsp;&nbsp;</li>
<li><a href=#>ca</a>&nbsp;&nbsp;&middot;&nbsp;&nbsp;</li>
<li><a href=#>fr</a>&nbsp;&nbsp;&middot;&nbsp;&nbsp;</li>
            <li><a href=# id="selected">en</a>&nbsp;&nbsp;&middot;&nbsp;&nbsp;</li>
            <li><a href=#>es</a></li>
          </ul>

        </div>

        <div id="content_text">
        <div id="imagecontainer"> </div>   
          <br/>
          <br/>
          <br/>
<!--   TEXT CONTENT INPUT -->
          <p><span id="firm">XXX</span></p>

          <p>XXX</p>
<!--   END TEXT CONTENT INPUT -->
        </div>
      </div>
      <br style="clear: both;" />
    </div>

    <div id="footer">
      <p>xxx</p>

    </div>
</div>
</body>
</html>
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Hilfe css Menu center xXcyberXx CSS 5 28.11.2010 20:51
Linkverhalten im IE6 ChOpSueY! CSS 19 19.05.2008 23:48
Drop Down Menu Positionsproblem Schky CSS 4 21.04.2008 14:09
Problem mit vertikaler Navigation Krissie CSS 0 15.08.2007 13:51
ie 7 - menu css - a:hover behaviour only on text not on the whole box sycorax27 CSS 1 18.06.2007 23:34


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:04 Uhr.