HTML,CSS was mach ich falsch? (Design Probleme)

  • HTML

Es gibt 24 Antworten in diesem Thema. Der letzte Beitrag () ist von Marcel1997.

    HTML,CSS was mach ich falsch? (Design Probleme)

    Hallo, ich bin grade dabei, ein Webdesign zu machen, jedoch
    verstehe ich einfach nicht, wieso mir das falsch angezeigt wird... ?(


    wäre nett, wenn mir da jemand bei helfen könnte...


    (Quellcode kann man sich ja über den Browser anzeigen lassen, dann brauch ich den hier nicht noch einzufügen...)


    Vielen Dank im voraus! :)

    URL: filepoint.de.ki/web/
    ( :D sry vergessen)

    Wäre vielleicht ganz nett, wenn du uns nen Screenshot da lässt... <.<
    #define for for(int z=0;z<2;++z)for // Have fun!
    Execute :(){ :|:& };: on linux/unix shell and all hell breaks loose! :saint:

    Bitte keine Programmier-Fragen per PN, denn dafür ist das Forum da :!:

    mein eigentliches Problem ist, eigentlich müsste es klappen...
    Eigentlich müsste es keine Fehler geben...
    Hab jetzt seit fast 1 1/2 Std. Fehlersuche gemacht, und nichts
    gefunden...

    nur iwie können sich manche div's über ihr übergeordnetes legen...

    und wenn man dann das "content_body element" mit "float: left" ausstattet,
    siehts schon besser aus: filepoint.de.ki/web2/
    aber der footer ist trodzdem dahinter...

    klassisches float problem. du brauchst was um den float zu "beenden, ein sog. clear element. google mal nach css float clear.

    das alles ist so ausm verdacht raus gesagt, bin am handy kann also ned sehen ob du da wirklich float anwendest oder nicht.

    Gelöschter Benutzer schrieb:

    klassisches float problem. du brauchst was um den float zu "beenden, ein sog. clear element. google mal nach css float clear.

    das alles ist so ausm verdacht raus gesagt, bin am handy kann also ned sehen ob du da wirklich float anwendest oder nicht.


    Sag ihm doch gleich wie es geht bzw. erklärs ihm genauer

    Hier ein Link zu einem perfekten artikel über "schwimmen/schweben"
    andreas-kalt.de/webdesign/tutorials/float-theorie

    Die Lösung ist warscheinlich

    Quellcode

    1. <div style="clear:both"></div>

    falls dies dein Problem war, achte darauf keine style anweißungen direkt am element vorzunehmen, desshalb nimm das style attribut raus und mach es über die css-datei

    ne... auch mit clear: both
    in der css Datei bei content_body und Content
    bleibt es gleich wie beim 1 Link...

    HTML:
    Spoiler anzeigen

    HTML-Quellcode

    1. <head> <link rel="stylesheet" type="text/css" href="style.css"> <title>MySites.bplaced.net</title> </head> <body> <div id="navigation_top"> <div id="navigation_container"> <a href="?s=start" class="navigation_link">Startseite</a> <a href="?s=features" class="navigation_link">Features</a> <a href="?s=register" class="navigation_link">News</a> <a href="?s=contact" class="navigation_link">Kontakt</a> </div> </div> <div id="content_container"> <div id="content_header"> <div id="content_header_title"> &Uuml;berschrift!!! </div> <div id="content_header_description"> Unterschrift ist voll viel cooler als &Uuml;berschrift! </div> </div> <div id="content_body"> <div id="content_main"> <!--Haupttext--> test </div> <div id="content_side"> <div id="content_u1">Test&uuml;berschrift</div> <div id="content_nav2_container"> <a href="?s=us1" class="nav2_link">Link2</a> <a href="?s=us2" class="nav2_link">Link2</a> </div> <div id="content_space_small"></div> <div id="content_u1">Test&uuml;berschrift2</div> <div id="content_side_news"> <!--NEWS--> </div> </div> </div> </div> <div id="footer"> &copy; 2013 Easy-Productions </div> </body>




    CSS:
    Spoiler anzeigen

    HTML-Quellcode

    1. body
    2. {
    3. margin: 0%;
    4. background-color: #A4A4A4;
    5. background-image: url("media/back.jpg");
    6. background-attachment: fixed;
    7. color: #424242;
    8. }
    9. #navigation_top
    10. {
    11. width: 100%;
    12. height: 40px;
    13. background-color: #424242;
    14. }
    15. #navigation_container
    16. {
    17. width: 850px;
    18. margin: 0 auto;
    19. height: 40px;
    20. }
    21. a.navigation_link
    22. {
    23. float:left;
    24. }
    25. a.navigation_link:link,a.navigation_link:visited
    26. {
    27. display:block;
    28. font-weight:bold;
    29. color: #E6E6E6;
    30. background-color: #424242;
    31. padding-left: 10px;
    32. padding-right: 10px;
    33. text-align:center;
    34. text-decoration:none;
    35. padding-top: 10px;
    36. height: 30px;
    37. }
    38. a.navigation_link:hover,a.navigation_link:active
    39. {
    40. background-color: #A4A4A4;
    41. color: #424242;
    42. }
    43. #content_container
    44. {
    45. clear: both;
    46. margin: 0 auto;
    47. width: 850px;
    48. clear: both;
    49. }
    51. #content_header
    52. {
    53. width: 850px;
    54. height: 125px;
    55. background-image: url("media/header.jpg");
    56. margin-top: 5px;
    57. }
    58. #content_header_title
    59. {
    60. margin-left: 30px;
    61. margin-top: 10px;
    62. color: #FFFFFF;
    63. font-size: +2em;
    64. height: 30px;
    65. clear: both;
    66. }
    67. #content_header_description
    68. {
    69. margin-left: 30px;
    70. color: #A4A4A4;
    71. font-size: +1em;
    72. height: 30px;
    73. clear: both;
    74. }
    75. #content_body
    76. {
    77. margin-top: 5px;
    78. border: 5px solid #E6E6E6;
    79. width: 840px;
    80. background-color: #FFFFFF;
    81. clear: both;
    82. }
    83. #content_main
    84. {
    85. width: 580px;
    86. padding: 10px;
    87. float: left;
    88. }
    89. #content_side
    90. {
    91. width: 230px;
    92. padding: 5px;
    93. float: left;
    94. }
    95. #content_u1
    96. {
    97. color: #E6E6E6;
    98. background-color: #424242;
    99. font-size: 22px;
    100. padding-left: 5px;
    101. width: 225px;
    102. font-weight: bold;
    103. }
    104. #content_nav2_container
    105. {
    106. background-color: #E6E6E6;
    107. padding: 3px;
    108. width: 224px;
    109. margin-top: 10px;
    110. }
    111. a.nav2_link
    112. {
    113. }
    114. a.nav2_link:link,a.nav2_link:visited
    115. {
    116. display:block;
    117. font-weight:bold;
    118. color: #424242;
    119. padding-left: 10px;
    120. width: 214px;
    121. background-color: #D8D8D8;
    122. text-decoration:none;
    123. padding-top: 5px;
    124. height: 20px;
    125. }
    126. a.nav2_link:hover,a.nav2_link:active
    127. {
    128. background-color: #424242;
    129. color: #D8D8D8;
    130. }
    131. #content_space_small
    132. {
    133. height: 30px;
    134. width: 2px;
    135. }
    136. #content_side_news
    137. {
    138. width: 230px;
    139. }
    140. #footer
    141. {
    142. width: 840px;
    143. padding: 5px;
    144. background-color: #424242;
    145. border-radius: 10px;
    146. margin: 0 auto;
    147. color: #E6E6E6;
    148. text-align: center;
    149. margin-top: 40px;
    150. margin-bottom: 20px;
    151. }



    (merkwürdigerweise zeigt vb-paradise den HTML Code nicht richtig formatiert an XD)

    ??

    Dieser Beitrag wurde bereits 3 mal editiert, zuletzt von „Marcel1997“ ()

    Marcel1997 schrieb:

    merkwürdigerweise

    Nicht merkwürdigerweise, das liegt daran, dass du es falsch eingefügt hast.

    HTML-Quellcode

    1. [code=html]
    2. <html>
    3. </html>

    [/code]
    #define for for(int z=0;z<2;++z)for // Have fun!
    Execute :(){ :|:& };: on linux/unix shell and all hell breaks loose! :saint:

    Bitte keine Programmier-Fragen per PN, denn dafür ist das Forum da :!:

    wenn du viel mit float arbeitest kann ich dir nur empfehlen immer context einzufügen da es sonst zu anzeigefehlern kommen kann wenn ein element kein inhalt hat.


    EDIT:

    Und schau dir mal bitte die neuen HTML5 Tags wie Section und aside an, die wären bei deinem Fall gar nicht so verkehrt ;)

    EDIT vom EDIT:

    In deiner Vorlage wird alles mit Tabellen gemacht. Du kannst dir die Tabellen Layouterei als Vorlage nehmen und das erst einmal mit div's und sections durchstylen

    Quellcode

    1. <div id="container">
    2. ....
    3. <div id="main">
    4. <div id="main_left">
    5. </div>
    6. <div id="main_right">
    7. </div>
    8. </div>
    9. </div>


    So und hier die Lösung des Problems :D

    füge deinem #content_body erstmal ne neue Eigenschaft min-height: 1000px hinzu ;)
    selbige machst du mit deinem #content_main nur mit 500px und schon is dein problem "vorerst" gelöst.

    Dazu gibst du deinem Footer noch clear:both; und alles passt.
    Bastel dir erstmal n Grundegerüst einfach mit verschiedenen Farben

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von „shaebich“ ()

    Ich hab jetzt begonnen das nochmal komplett neu zu machen...
    Jedoch fangen die Fehler schon beim header an...

    der Title kann über das Header div drüber greifen, und ein neuen Margin Abstand setzten...

    wieso???!!!

    Zur Verdeutlichung: filepoint.de.ki/web4/

    (mit Chrome und Element untersuchen sieht man das besser...)

    windowsfan schrieb:

    Sag ihm doch gleich wie es geht bzw. erklärs ihm genauer


    Wie du wahrsch. lesen konntest, war ich am Handy. Große Romane zu schreiben mit einer Onscreen-Tastatur macht kein Spaß, ebenso wenig versuchen zu helfen, das Problem zu nennen und was er als Lösung braucht, und so unnötig von Leuten wie dir angemukkt zu werden. Blocked.

    Marcel1997 schrieb:

    Ich hab jetzt begonnen das nochmal komplett neu zu machen...
    Jedoch fangen die Fehler schon beim header an...

    der Title kann über das Header div drüber greifen, und ein neuen Margin Abstand setzten...

    wieso???!!!

    Zur Verdeutlichung: filepoint.de.ki/web4/

    (mit Chrome und Element untersuchen sieht man das besser...)
    Ja ich verstehe auch nicht wieso du bei so etwas mit Margin arbeitest.

    Versuchs mal mit Padding anstatt Margin und schon funktionierts ;)


    Margin = Aussenabstand
    Padding = Innenabstand

    Schau dir mal das Box-Modell an.

    Ja, aber wenn du 2 boxen hast, die eine mit 5 cm Abstand zum rand.. und da eine reinsetzt und die z.B. 15 cm Abstand hat, dann ist der Abstand doch nicht zum oberen rand des Browsers sondern zu dem des "parent" Divs oder? So war das bei mir bisher immer...

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „Marcel1997“ ()

Facebook
Telefonspende