Sie sind nicht angemeldet.

    • [Hilfe: (x)HTML/CSS] sidebar verschiebt sich oO

    1

    Mittwoch, 21. Dezember 2011, 17:43

    sidebar verschiebt sich oO

    Ahoi ahoi und hallo erstmal... schönes plätzchen hier :D

    Also ich hab nen kleines Problem :P

    Hab mir grad nen Design gebastelt und im PS gesliced... alles toll und gut.
    Dass der Code den PS einem da ausspuckt alles andere als optimal ist wie ich das Gefühl habe ist denke ich jeden klar ;)

    Nun zu meinem Problem:
    Zu allererst sollte ich vielleicht erwähnen dass meine letzten Versuche in HTML und Co. schon ne Weile her und ein wenig eingerostet sind... Nun...
    Bei dem Design befindet sich direkt rechts neben dem Contentbereich eine Sidebar, also quasi ein weiterer Content-Bereich nur halt in schmal^^. Fülle ich den Content Bereich Wahllos mit Inhalt und vergrößere ihn nach unten verschiebt sich gleichzeitig der Inhalt der Sidebar mit nach unten. Meine Frage nun... Wie bekomme ich es hin dass Sidebar und Content sich unabhängig voneinander quasi in der Höhe verändern lasse?

    Ich hoffe ich habe mich irgendwie verständlich ausgedrückt und ihr könnt damit ein wenig was anfangen.

    Danke schonmal

    Frekoh

      Spoiler Spoiler

    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <body background="Bilder/hintergrund.png" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

    <center><table id="Tabelle_01" width="1101" height="2001" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td colspan="6" rowspan="2" background="Bilder/content_01.png" width="256" height="183" alt="">
    </td>
    <td colspan="11"background="Bilder/content_02.png" width="588" height="37" alt="">
    </td>
    <td colspan="5"background="Bilder/content_03.png" width="256" height="37" alt=""></td>
    <td background="Bilder/Abstandhalter.gif" width="1" height="37" alt="">
    </td>
    </tr>
    <tr>
    <td colspan="11"background="Bilder/content_04.png" width="588" height="146" alt="">
    </td>
    <td colspan="5"background="Bilder/content_05.png" width="256" height="146" alt="">
    </td>
    <td background="Bilder/Abstandhalter.gif" width="1" height="146" alt="">
    </td>
    </tr>
    <tr>
    <td w background="Bilder/content_06.png" width="100%" height="31" alt="">
    </td>
    <td colspan="5"background="Bilder/content_07.png" width="245" height="31" alt="">
    </td>
    <td colspan="11"background="Bilder/content_08.png" width="588" height="31" alt="">
    </td>
    <td colspan="4"background="Bilder/content_09.png" width="246" height="31" alt="">
    </td>
    <td background="Bilder/content_10.png" width="10" height="31" alt="">
    </td>
    <td background="Bilder/Abstandhalter.gif" width="1" height="31" alt="">
    </td>
    </tr>
    <tr>
    <td rowspan="3"background="Bilder/content_11.png" width="11" height="69" alt="">
    </td>
    <td colspan="5" rowspan="3"background="Bilder/content_12.png" width="245" height="69" alt="">
    </td>
    <td colspan="11"background="Bilder/content_13.png" width="588" height="27" alt="">
    </td>
    <td colspan="5" rowspan="3"background="Bilder/content_14.png" width="256" height="69" alt="">
    </td>
    <td background="Bilder/Abstandhalter.gif" width="1" height="27" alt="">
    </td>
    </tr>
    <tr>
    <td rowspan="2" background="Bilder/content_15.png" width="33" height="42" alt="">
    </td>
    <td background="Bilder/content_16.png" width="112" height="31" alt="">
    </td>
    <td background="Bilder/content_17.png" width="20" height="31" alt="">
    </td>
    <td background="Bilder/content_18.png" width="121" height="31" alt="">
    </td>
    <td background="Bilder/content_19.png" width="10" height="31" alt="">
    </td>
    <td background="Bilder/content_20.png" width="120" height="31" alt="">
    </td>
    <td background="Bilder/content_21.png" width="24" height="31" alt="">
    </td>
    <td colspan="2" background="Bilder/content_22.png" width="115" height="31" alt="">
    </td>
    <td colspan="2" background="Bilder/content_23.png" width="33" height="31" alt="">
    </td>
    <td background="Bilder/Abstandhalter.gif" width="1" height="31" alt="">
    </td>
    </tr>
    <tr>
    <td colspan="10" background="Bilder/content_24.png" width="555" height="11" alt="">
    </td>
    <td background="Bilder/Abstandhalter.gif" width="1" height="11" alt="">
    </td>
    </tr>
    <tr>
    <td rowspan="7" background="Bilder/content_25.png" width="11" height="238" alt="">
    </td>
    <td colspan="5" rowspan="2" background="Bilder/content_26.png" width="245" height="58" alt="">
    </td>
    <td colspan="11" rowspan="7" background="Bilder/content_27.png" width="588" height="238" alt="">

    </td>
    <td colspan="3" background="Bilder/content_28.png" width="192" height="13" alt="">
    </td>
    <td colspan="2" rowspan="7" background="Bilder/content_29.png" width="64" height="238" alt="">
    </td>
    <td background="Bilder/Abstandhalter.gif" width="1" height="13" alt="">
    </td>
    </tr>
    <tr>
    <td rowspan="6" background="Bilder/content_30.png" width="31" height="225" alt="">
    </td>
    <td colspan="2" rowspan="2" background="Bilder/content_31.png" width="161" height="67" alt="">
    </td>
    <td background="Bilder/Abstandhalter.gif" width="1" height="45" alt="">
    </td>
    </tr>
    <tr>
    <td rowspan="3" background="Bilder/content_32.png" width="24" height="143" alt="">
    </td>
    <td colspan="3" rowspan="3" background="Bilder/content_33.png" width="182" height="143" alt="">
    </td>
    <td rowspan="5" background="Bilder/content_34.png" width="39" height="180" alt="">
    </td>
    <td background="Bilder/Abstandhalter.gif" width="1" height="22" alt="">
    </td>
    </tr>
    <tr>
    <td colspan="2" background="Bilder/content_35.png" width="161" height="67" alt="">
    </td>
    <td background="Bilder/Abstandhalter.gif" width="1" height="67" alt="">
    </td>
    </tr>
    <tr>
    <td colspan="2" rowspan="2" background="Bilder/content_36.png" width="161" height="72" alt="">
    </td>
    <td background="Bilder/Abstandhalter.gif" width="1" height="54" alt="">
    </td>
    </tr>
    <tr>
    <td colspan="4" rowspan="2" background="Bilder/content_37.png" width="206" height="37" alt="">
    </td>
    <td background="Bilder/Abstandhalter.gif" width="1" height="18" alt="">
    </td>
    </tr>
    <tr>
    <td colspan="2" background="Bilder/content_38.png" width="161" height="19" alt="">
    </td>
    <td background="Bilder/Abstandhalter.gif" width="1" height="19" alt="">
    </td>
    </tr>
    <tr>
    <td rowspan="2" background="Bilder/content_39.png" width="11" height="598" alt="">
    </td>
    <td colspan="2" rowspan="2" background="Bilder/content_40.png" width="106" height="598" alt="">
    </td>
    <td rowspan="2" background="Bilder/content_41.png" width="34" height="598" alt="">
    </td>
    <td colspan="10" background="Bilder/content_42.png" width="622" height="22" alt="">
    </td>
    <td colspan="2" background="Bilder/content_43.png" width="52" height="22" alt="">
    </td>
    <td colspan="4" background="Bilder/content_44.png" width="211" height="22" alt="">
    </td>
    <td colspan="2" rowspan="2" background="Bilder/content_45.png" width="64" height="598" alt="">
    </td>
    <td background="Bilder/Abstandhalter.gif" width="1" height="22" alt="">
    </td>
    </tr>
    <tr>
    <td colspan="10" background="Bilder/content_46.png" width="622" height="576" alt=""></td>
    <td colspan="2" background="Bilder/content_47.png" width="52" height="576" alt="">
    </td>
    <td colspan="3" background="Bilder/content_48.png" width="150" height="576" alt="">
    </td>
    <td background="Bilder/content_49.png" width="61" height="576" alt="">
    </td>
    <td background="Bilder/Abstandhalter.gif" width="1" height="576" alt="">
    </td>
    </tr>
    <tr>
    <td colspan="22" background="Bilder/content_50.png" width="1100" height="99" alt="">
    </td>
    <td background="Bilder/Abstandhalter.gif" width="1" height="99" alt="">
    </td>
    </tr>
    <tr>
    <td colspan="22" background="Bilder/content_51.png" width="1100" height="782" alt="">
    </td>
    <td background="Bilder/Abstandhalter.gif" width="1" height="782" alt="">
    </td>
    </tr>
    <tr>
    <td background=>
    <img src="Bilder/Abstandhalter.gif" width="11" height="1" alt=""></td>
    <td background=>
    <img src="Bilder/Abstandhalter.gif" width="24" height="1" alt=""></td>
    <td background=>
    <img src="Bilder/Abstandhalter.gif" width="82" height="1" alt=""></td>
    <td background=>
    <img src="Bilder/Abstandhalter.gif" width="34" height="1" alt=""></td>
    <td background=>
    <img src="Bilder/Abstandhalter.gif" width="66" height="1" alt=""></td>
    <td background=>
    <img src="Bilder/Abstandhalter.gif" width="39" height="1" alt=""></td>
    <td background=>
    <img src="Bilder/Abstandhalter.gif" width="33" height="1" alt=""></td>
    <td background=>
    <img src="Bilder/Abstandhalter.gif" width="112" height="1" alt=""></td>
    <td background=>
    <img src="Bilder/Abstandhalter.gif" width="20" height="1" alt=""></td>
    <td background=>
    <img src="Bilder/Abstandhalter.gif" width="121" height="1" alt=""></td>
    <td background=>
    <img src="Bilder/Abstandhalter.gif" width="10" height="1" alt=""></td>
    <td background=>
    <img src="Bilder/Abstandhalter.gif" width="120" height="1" alt=""></td>
    <td background=>
    <img src="Bilder/Abstandhalter.gif" width="24" height="1" alt=""></td>
    <td background=>
    <img src="Bilder/Abstandhalter.gif" width="77" height="1" alt=""></td>
    <td background=>
    <img src="Bilder/Abstandhalter.gif" width="38" height="1" alt=""></td>
    <td background=>
    <img src="Bilder/Abstandhalter.gif" width="14" height="1" alt=""></td>
    <td background=>
    <img src="Bilder/Abstandhalter.gif" width="19" height="1" alt=""></td>
    <td background=>
    <img src="Bilder/Abstandhalter.gif" width="31" height="1" alt=""></td>
    <td background=>
    <img src="Bilder/Abstandhalter.gif" width="100" height="1" alt=""></td>
    <td background=>
    <img src="Bilder/Abstandhalter.gif" width="61" height="1" alt=""></td>
    <td background=>
    <img src="Bilder/Abstandhalter.gif" width="54" height="1" alt=""></td>
    <td background=>
    <img src="Bilder/Abstandhalter.gif" width="10" height="1" alt=""></td>
    <td></td>
    </tr>
    </table></center>
    </body></html>

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Frekoh« (21. Dezember 2011, 18:05)

    2

    Mittwoch, 21. Dezember 2011, 17:46

    Kapieren es die Leute denn nie? *Kopf gegen Wand* um helfen zu können, muss man das ganze Online, oder wenigstens den Code sehen! :cursing:
    finalarts.de: 100%

    Web- und Multimediadesign; Coding

    3

    Mittwoch, 21. Dezember 2011, 18:06

    so habs mal reineditiert ;)

    4

    Donnerstag, 22. Dezember 2011, 07:32

    wie wärs jetzt noch damit den Code zu zeigen.... :zahn_weg:
    finalarts.de: 100%

    Web- und Multimediadesign; Coding

    5

    Donnerstag, 22. Dezember 2011, 10:51

    es sind tabellen und es sieht nach photoshop-code aus. weiterhin ist der code schlecht verwertbar, da keine onlineversion dazu vorhanden ist. lade die gesamte version mit bildern und index.html auf einen webspace und schick den link dazu.

    6

    Donnerstag, 22. Dezember 2011, 14:48

    okay habs mal hochgeladen
    http://frekoh.de/index/content.html

    Ähnliche Themen

    • Grufix-Board.de - GFX Webdesign Foto & Coding Community

    Grafik-Tutorials | Coding-Tutorials | Ressourcen | SEO | Webdesign | HTML5
    W3C Validator

    Forensoftware: Burning Board® 3.1.6, entwickelt von WoltLab® GmbH