tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
1
ZUGRIFFE
302
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 28.02.11 12:28 #1
    Rayam Rayam ist offline Grünschnabel
    Registriert seit
    May 2007
    Beiträge
    2
    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:
    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109

    <!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&uuml;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">&nbsp;</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">&copy; 2011 Marius M&uuml;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
    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188

    @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 }
 
}
     
    Zitieren Zitieren
  2. 28.02.11 15:18 #2
    Rayam Rayam ist offline Grünschnabel
    Registriert seit
    May 2007
    Beiträge
    2
    hmm, habs irgendwie doch hinbekommen...
     
    Zitieren Zitieren
« div-Layout - gleicher Hintergrund? | CSS - Dreieck umfließen »

Ähnliche Themen

  1. link wird nicht nach rechts ausgerichtet (jsp/jsf)
    Von Praktikant132 im Forum Java
    Antworten: 2
    Letzter Beitrag: 26.07.07, 14:01
  2. Nur ein Bild wird angezeigt.
    Von Undertaker77 im Forum PHP
    Antworten: 1
    Letzter Beitrag: 14.07.05, 08:18
  3. PHP wird nicht angezeigt!
    Von Setherial im Forum PHP
    Antworten: 11
    Letzter Beitrag: 02.12.04, 23:35
  4. php wird nicht angezeigt
    Von Xeal87 im Forum PHP
    Antworten: 8
    Letzter Beitrag: 09.11.02, 17:14
  5. Der Rahmen um eine Tabelle soll links, rechts und unterhalb angezeigt werden. Wie ?
    Von x12x13 im Forum HTML & XHTML
    Antworten: 3
    Letzter Beitrag: 25.09.02, 20:36

Stichworte