Anzeige

Navi spinnt

Navi spinnt | PSD-Tutorials.de

Erstellt von mastergeiger, 23.12.2010.

  1. mastergeiger

    mastergeiger Noch nicht viel geschrieben

    Dabei seit:
    20.09.2010
    Beiträge:
    22
    Geschlecht:
    männlich
    Ort:
    Freiberg a/N
    Software:
    Photoshop CS5 + Dreamweaver CS5
    Navi spinnt
    Hallo,
    ich habe ein kleines backend gescriptet mit einem Dropdown menü. Allerdings ist die seitenbox neben dem navi und nicht unter dem navi. Wenn ich statt einer Liste einfach <a>test test bla</a> reinschreibe stimmt alles. da ich das meisten STRG + C gemacht habe und mich nicht wirklich in der CSS Materie auskenne brauche ich eure hilfe!
    Die index.php sieht folgendermaßen aus:
    PHP:
    1.  
    2. <!-- Stylesheets -->
    3. <link type="text/css" rel="stylesheet" href="style/style.css" />
    4. <link type="text/css" rel="stylesheet" href="style/dropdown.css" />
    5. <!-- jQuery -->
    6. <script src="includes/js/jquery.js" type="text/javascript"></script>
    7. <script src="includes/js/jquery.validate.js" type="text/javascript"></script>
    8. </head>
    9. <body>
    10. <div id="wrapper">
    11. <div id="header">
    12. <h1>Admin <strong>Backend</strong></h1>
    13. </div>
    14. <div id="nav">
    15. <ul id="navi">
    16. <li><a href="#">Home</a></li>
    17. <li><a href="#">Page 1</a>
    18.     <ul>
    19.         <li><a href="#">Page 1.1</a></li>
    20.         <li><a href="#">Page 1.2</a></li>
    21.         <li><a href="#">Page 1.3</a></li>
    22.     </ul>
    23. </li>
    24.  
    25. <li><a href="#">Page 2</a>
    26.     <ul>
    27.         <li><a href="#">Page 2.1</a></li>
    28.         <li><a href="#">Page 2.2</a></li>
    29.         <li><a href="#">Page 2.3</a></li>
    30.     </ul>
    31. </li>
    32. </ul>
    33. </div>
    34. <div id="seitenbox_links">
    35. <a>dsf</a>
    36. </div>
    37. <div id="seitenbox_rechts">
    38. <a>dsf</a>
    39. </div>
    40. <div id="content" class="mit_seitenbox">
    41. <a>ahsdahsdhasdhj</a>
    42. <?php
    43. #$site=(addslashes($_GET['action']));
    44. #$result = mysql_query("SELECT * FROM hp WHERE site='".$site."'") or die(mysql_error());
    45. #$row = mysql_fetch_array( $result );
    46. #echo $row['content'];
    47. ?>
    48. </div>
    49. <div id="footer">
    50. <h2>Code by<strong> Patrick Geiger</strong></h2>
    51. </div>
    52. </div>
    53. </body>
    54. </html>
    55.  
    Die style.css sieht so aus:
    Code (Text):
    1.  
    2. @charset "utf-8";
    3. /* CSS Document */
    4.  
    5. /* Jeder Selektor wird hiermit auf 0 gesetzt */
    6. * {
    7.  
    8. margin:0;
    9.  
    10. padding:0;
    11.  
    12. }
    13.  
    14. body {
    15.             font:10px verdana;
    16.             color:#555;
    17.             margin:20px;
    18.             background:url(../images/body.png) top repeat-x #333;
    19. }
    20. #wrapper {
    21.            
    22.            
    23.             width:760px;
    24. }
    25.  
    26. #header {
    27.             height:250px;
    28.             background:url(../images/header.gif)
    29. }
    30.  
    31.  
    32.  
    33. /* Das ist die Formatierung für eine Überschrift im Header */
    34.  
    35. #header h1 {
    36.  
    37. height:45px;
    38.  
    39. font:250% Trebuchet MS;
    40.  
    41. padding:30px 20px 10px 20px;
    42.  
    43. color:#fff;
    44.  
    45. }
    46.  
    47.  
    48. /* Hier beginnt die Formatierung für das Navigationsmenü */
    49.  
    50. #nav {
    51.  
    52. margin:0 0 0 0;
    53.  
    54. }
    55.  
    56. #content {
    57.             float:inherit; 
    58.             padding:1 15px;
    59.             font-size:120%;
    60. }
    61.  
    62. /* Überschriften im Content stylen */
    63.  
    64. #content h2 {
    65.  
    66. font:150% Trebuchet MS;
    67.  
    68. color:#222;
    69.  
    70. border-bottom:1px solid #eee;
    71.  
    72. }
    73.  
    74.  
    75. #content h3 {
    76.  
    77. font:140% Arial;
    78.  
    79. color:#222;
    80.  
    81. border-top:1px solid #f6f6f6;
    82.  
    83. border-bottom:1px solid #f6f6f6;
    84.  
    85. padding:5px;
    86.  
    87. }
    88.  
    89.  
    90. .mit_seitenbox {
    91.             margin:0 0 0 200px;
    92. }
    93.  
    94.  
    95. /* Ein paar Selektoren des Contents gesammelt und formatiert */
    96.  
    97. /* ACHTUNG: Line-Height ändern auch hier den Zeilenabstand im gesamten Text!! */
    98.  
    99. #content h1,h2,h3,h4,p,ul,ol {
    100.  
    101. margin:15px 0;
    102.  
    103. line-height:20px;
    104.  
    105. }
    106.  
    107.  
    108. #seitenbox_links {
    109.             float:left;
    110.             width:180px;
    111.             padding:0 10px;
    112.             background:#EBEAEA;
    113.             font:100% Verdana;
    114.             border-right:1px solid #CCC;
    115.             margin:0 15px 0 0;
    116. }
    117.  
    118.  
    119. /* Überschriftformatierung für Seitenbox */
    120.  
    121. #seitenbox_links h2 {
    122.  
    123. font:140% Arial;
    124.  
    125. color:#222;
    126.  
    127. border-top:1px solid #f6f6f6;
    128.  
    129. border-bottom:1px solid #f6f6f6;
    130.  
    131. padding:5px;
    132.  
    133. }
    134.  
    135. /* Absatzformatierung. ACHTUNG: Line-Height ändert Zeilenabstand der Seitenbox!! */
    136.  
    137. #seitenbox_links p {
    138.  
    139. line-height:20px;
    140.  
    141. }
    142. #seitenbox_rechts {
    143.             float:right;
    144.             width:180px;
    145.             padding:0 10px;
    146.             background:#EBEAEA;
    147.             font:100% Verdana;
    148.             border-right:1px solid #CCC;
    149.             margin:0 15px 0 0;
    150. }
    151.  
    152.  
    153. /* Überschriftformatierung für Seitenbox */
    154.  
    155. #seitenbox_rechts h2 {
    156.  
    157. font:140% Arial;
    158.  
    159. color:#222;
    160.  
    161. border-top:1px solid #f6f6f6;
    162.  
    163. border-bottom:1px solid #f6f6f6;
    164.  
    165. padding:5px;
    166.  
    167. }
    168.  
    169. /* Absatzformatierung. ACHTUNG: Line-Height ändert Zeilenabstand der Seitenbox!! */
    170.  
    171. #seitenbox_rechts p {
    172.  
    173. line-height:20px;
    174.  
    175. }
    176.  
    177.  
    178.  
    179.  
    180.  
    181.  
    182. #footer {
    183.             margin:30px -5px -5px -5px;
    184.             padding:15px;
    185.             background:#f6f6f6;
    186.             border-top:2px solid #eee;
    187.             clear:left;
    188. }
    189.  
    190. /* AB HIER: FORMATIERUNGEN, DIE HTML-TAGS ÜBERSCHREIBEN FÜR TEXT IM CONTENT */
    191.  
    192.  
    193. /* Zum Zitieren bzw. hier nur für HTML Code verwendet */
    194.  
    195. code {
    196.  
    197. background:#f6f6f6;
    198.  
    199. }
    200. /*Tool Tipps*/
    201. .tip { border-bottom:1px dotted #000000; cursor:help; }
    202. a.tip,
    203. a.tip:link,
    204. a.tip:visited,
    205. a.tip:active { color: #616161; text-decoration: none; position: relative; }
    206. a.tip:hover { background: transparent; z-index: 100; }
    207. a.tip span { display: none; text-decoration: none; }
    208. a.tip:hover span {
    209. display: block;
    210. position: absolute;
    211. top: 40px;
    212. left: 0;
    213. width: 400px;
    214. z-index: 100;
    215. color: #2f2f2f;
    216. font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
    217. padding: 2px 10px;
    218. background-color: #ebebeb;
    219. text-align: left;
    220. border-color: #00F;
    221. border-style: solid;
    222. border-width: 1px 4px; }
    223.  
    Die dropdown.css sieht so aus:
    Code (Text):
    1.  
    2. @charset "utf-8";
    3. /* CSS Document */
    4.  
    5. #navi, #navi ul {
    6.     padding: 0;
    7.     margin: 0;
    8. }
    9. #navi li {
    10.     float: left;
    11.     width: 9em;
    12.     position: relative;
    13.     list-style-type: none;
    14. }
    15. #navi li ul a {
    16.     margin-left: 1em;
    17. }
    18. #navi li ul {
    19.     left: -9999px;
    20.     position: absolute;
    21. }
    22. #navi li:hover ul {
    23.     left: auto;
    24. }
    25. <!-- Popup & Whitespace Bugfix für IE7 -->
    26. <!--[if lte IE 7]><style type="text/css">
    27. #navi a {
    28.     min-height: 0;
    29. }
    30. * html #navi a {
    31.     height: 1px;
    32. }
    33. #navi li:hover {
    34.     text-indent: 0;
    35. }
    36. </style><![endif]-->
    37.  
    38. /* Optionale Formatierung */
    39. #navi {
    40.     font-family: Verdana;
    41. }
    42. /* Hauptmenüpunkte formatieren */
    43. #navi li a,
    44. #navi li a:link,
    45. #navi li a:active,
    46. #navi li a:visited {
    47.     display: block;
    48.     padding: 5px 10px;
    49.     color: #000;
    50.     background-color: #ccc;
    51.     text-decoration: none;
    52. }
    53. #navi li a:hover {
    54.     color: #fff;
    55.     background-color: #999;        
    56. }
    57. /* untergeordnete Menüpunkte formatieren */
    58. #navi li ul a,
    59. #navi li ul a:link,
    60. #navi li ul a:active,
    61. #navi li ul a:visited {
    62.     display: block;
    63.     margin-left: 1em;
    64.     padding: 5px 10px;
    65.     color: #000;
    66.     background-color: #ddd;
    67.     text-decoration: none;
    68. }
    69. #navi li ul a:hover {
    70.     color: #fff;
    71.     background-color: #000;            
    72. }
    73.  
    So sieht es im moment aus:
    [​IMG]
    Wenn ich die liste(navi) raus mache und irgendein text reinschreib sieht es so aus:
    [​IMG]

    Ich hoffe ihr könnt mir weiterhelfen
     
    #1      
  2. krid2873

    krid2873 Noch nicht viel geschrieben

    Dabei seit:
    14.05.2010
    Beiträge:
    34
    Geschlecht:
    männlich
    Navi spinnt
    AW: Navi spinnt

    Moin,

    Dann entferne hier die Angabe float
    Code (Text):
    1. #seitenbox_links {
    2.             [COLOR=Red]float:left;[/COLOR]
    3.             width:180px;
    4.             padding:0 10px;
    5.             background:#EBEAEA;
    6.             font:100% Verdana;
    7.             border-right:1px solid #CCC;
    8.             margin:0 15px 0 0;
    9. }
    10.  
    und die Seitenbox sollte dann unter der Navi angezeigt werden.


    Lesetipp zum Thema float:
    SELFHTML: Stylesheets / CSS-Eigenschaften / Positionierung und Anzeige von Elementen
     
    #2      
  3. desdemona

    desdemona Noch nicht viel geschrieben

    Dabei seit:
    22.12.2008
    Beiträge:
    5
    Geschlecht:
    weiblich
    Ort:
    Südtirol
    Software:
    Photoshop
    Kameratyp:
    Nikon D60
    Navi spinnt
    AW: Navi spinnt

    #header {
    height:250px;
    background:url(../images/header.gif);
    }

    da fehlt ein Strichpunkt
    LG
     
    #3      
x
×
×