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:
HTML
<!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ü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"> </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">© 2011 Marius Mü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
CSS
@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 }
}