ilch Forum » Allgemein » HTML, PHP, SQL,... » CSS-Frage

Geschlossen
  1. #1
    User Pic
    ZSKing Mitglied
    Registriert seit
    05.05.2007
    Beiträge
    1.026
    Beitragswertungen
    0 Beitragspunkte
    Hey!
    Ich habe mal eine Frage an Leute die
    sich ein wenig mit CSS auskennen:

    Warum verschiebt es sich bei folgendem
    Code:

    #hmenu{
    background-image:url(/beta/hmenu.jpg);
    border: 0px;
    /* oben, rechts, unten, links */
    margin: 0px 0px 40px 149px;
    padding: 55px 0px 0px 180px;
    width: 494px;
    height: 69px;
    repeat: no-repeat;
    }
    #contentob{
    background-image:url(/beta/content_oben.jpg);
    border: 0px;
    /* oben, rechts, unten, links */
    margin: -95px 0px 0px 0px;
    width: 940px;
    height: 98px;
    repeat: no-repeat;
    }
    #contentmit{
    background-image:url(/beta/content_mitte.jpg);
    repeat: repeat-y;
    border: 0px;
    /* oben, rechts, unten, links */
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 170px;
    width: 940px;
    height: 25px;
    }
    #contentun{
    background-image:url(/beta/content_unten.jpg);
    border: 0px;
    /* oben, rechts, unten, links */
    margin: 0px 0px 0px 0px;
    width: 940px;
    height: 150px;
    repeat: no-repeat;
    }
    a.hem{
    color: grey;
    font-size: 9px;
    }



    Wie auf diesem Bild:

    Link


    Ich wäre euch sehr verbunden, wenn
    ihr mit weiterhelft! zwinker

    MfG
    ZSKing
    »inaktiv
    _________________________________
    0 Mitglieder finden den Beitrag gut.
  2. #2
    User Pic
    assault Hall Of Fame
    Registriert seit
    03.11.2006
    Beiträge
    2.925
    Beitragswertungen
    1 Beitragspunkte
    in #hmenu
    repeat: no-repeat;
    zu
    background-repeat: no-repeat;
    machen
    0 Mitglieder finden den Beitrag gut.
  3. #3
    User Pic
    ZSKing Mitglied
    Registriert seit
    05.05.2007
    Beiträge
    1.026
    Beitragswertungen
    0 Beitragspunkte
    Super Assault!
    Manchmal sieht man den Wald vor lauter Bäumen nicht. lächeln
    »inaktiv
    _________________________________
    0 Mitglieder finden den Beitrag gut.
  4. #4
    User Pic
    ZSKing Mitglied
    Registriert seit
    05.05.2007
    Beiträge
    1.026
    Beitragswertungen
    0 Beitragspunkte
    Okay beim Anpassen meines Designs ist nochmal ein Problem mit der CSS-Datei aufgetreten. -> Warum funktioniert padding für rechts hier nicht?

    #contentmit{
    background-image:url(/beta/content_mitte.jpg);
    border: 0px;
    /* oben, rechts, unten, links */
    margin: 0px 0px 0px 0px;
    padding-left: 160px;
    padding-right: 170px;
    width: 940px;
    height: 25px;
    background-repeat: repeat-y;
    }



    Bild des Problems:
    Link


    Also eigentlich sollte sich die Box ja nach unten erweitern und das mit dem Padding ändert sich nicht, egal welchen Wert ich eingebe. Auf der anderern Seite funktioniert es aber wieder.
    *confused*


    Liebe Grüße
    ZSKing


    PS:
    Jaja CSS ist nicht so mein Gebiet. zunge
    »inaktiv
    _________________________________
    0 Mitglieder finden den Beitrag gut.
  5. #5
    User Pic
    ZSKing Mitglied
    Registriert seit
    05.05.2007
    Beiträge
    1.026
    Beitragswertungen
    0 Beitragspunkte
    Kann mir niemand helfen?!
    »inaktiv
    _________________________________
    0 Mitglieder finden den Beitrag gut.
  6. #6
    User Pic
    assault Hall Of Fame
    Registriert seit
    03.11.2006
    Beiträge
    2.925
    Beitragswertungen
    1 Beitragspunkte
    versuchs mal mit padding: 0px 170px 0px 160px; anstatt dem anderen

    wüsst auch nicht, was da dran nu falsch ist, und ich bin in diesem teil von css eigentlich recht gut bewandert
    0 Mitglieder finden den Beitrag gut.
  7. #7
    User Pic
    ZSKing Mitglied
    Registriert seit
    05.05.2007
    Beiträge
    1.026
    Beitragswertungen
    0 Beitragspunkte
    Ich habe es auch so:

    /* oben, rechts, unten, links */ 
    padding: 0px 170px 0px 160px;


    Ich poste morgen nochmal die gesamten Code, überspiele die komplett auf den FTP-Server und schicke dir den Link.


    MfG
    ZSKing
    »inaktiv
    _________________________________
    0 Mitglieder finden den Beitrag gut.
  8. #8
    User Pic
    ZSKing Mitglied
    Registriert seit
    05.05.2007
    Beiträge
    1.026
    Beitragswertungen
    0 Beitragspunkte
    Okay also hier nochmal komplett alle Codes:


    Test.htm
    <html>
    <head>
    <title>Design Beta Test</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
    <table border="0">
    <tr><td><div id="hmenu"><a class="hem">{HMENU}</a></div>
    <div id="contentob"></div><div id="contentmit"><span style="color:grey;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.   
    
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,</span></div>
    <div id="contentun"></div></td></tr>
    </table>
    </body>
    </html>



    style.css
    body{
    background-color: #333333;
    width: 940px;
    height: 425px;
    }
    #header{
    background-image:url(/beta/header.jpg);
    /* oben, rechts, unten, links */
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    background-repeat: no-repeat;
    }
    #hmenu{
    background-image:url(/beta/hmenu.jpg);
    border: 0px;
    /* oben, rechts, unten, links */
    margin: 0px 0px 40px 149px;
    padding: 55px 0px 0px 180px;
    width: 494px;
    height: 69px;
    background-repeat: no-repeat;
    }
    #contentob{
    background-image:url(/beta/content_oben.jpg);
    border: 0px;
    /* oben, rechts, unten, links */
    margin: -95px 0px 0px 0px;
    width: 940px;
    height: 98px;
    background-repeat: no-repeat;
    }
    #contentmit{
    background-image:url(/beta/content_mitte.jpg);
    border: 0px;
    /* oben, rechts, unten, links */
    margin: 0px 0px 0px 0px;
    padding: 0px 170px 0px 160px;
    width: 940px;
    height: 25px;
    background-repeat: repeat-y;
    }
    #contentun{
    background-image:url(/beta/content_unten.jpg);
    border: 0px;
    /* oben, rechts, unten, links */
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    width: 940px;
    height: 150px;
    background-repeat: no-repeat;
    }
    a.hem{
    color: grey;
    font-size: 9px;
    }
    
    
    /*Credits: Dynamic Drive CSS Library */
    /*URL: http://www.dynamicdrive.com/style/ */
    
    a.boldbuttons{
    background: transparent url('media/roundedge-gray-left.gif') no-repeat top left;
    display: block;
    float: left;
    font: bold 13px Arial; /* Change 13px as desired */
    line-height: 22px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 30px) */
    height: 30px; /* Height of button background height */
    padding-left: 8px; /* Width of left menu image */
    text-decoration: none;
    
    }
    
    a:link.boldbuttons, a:visited.boldbuttons, a:hover.boldbuttons, a:active.boldbuttons{
    color: white; /*button text color*/
    }
    
    a.boldbuttons span{
    background: transparent url('media/roundedge-gray-right.gif') no-repeat top right;
    display: block;
    padding: 4px 10px 4px 2px; /*Set 10px to be equal or greater than'padding-left' value above*/
    }
    
    a:hover.boldbuttons{ /* Hover state CSS */
    text-decoration: underline;
    }
    
    
    .buttonwrapper{ /* Container you can use to surround a CSS button to clear float */
    overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */
    width: 100%;
    }



    Und hier liegt alles:
    externer Link

    Ich hoffe mir kann jemand helfen!


    Liebe Grüße
    ZSKing
    »inaktiv
    _________________________________
    0 Mitglieder finden den Beitrag gut.
  9. #9
    User Pic
    .Daniel Mitglied
    Registriert seit
    22.01.2006
    Beiträge
    163
    Beitragswertungen
    0 Beitragspunkte
    Fehler 1. Etwas vergessen (Hier geändert)
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    <title>Design Beta Test</title>
    </head>


    Fehler 2. Keine Höhenangabe bei Teilen die sich in der Länge ändern sollen. (Hier mal mein Code)
    #contentmit {
    background: url(/beta/content_mitte.jpg) repeat-y;
    padding: 0px 170px 0px 160px;
    width: 940px;
    }


    Fehler 3. Warum Maße für Body? (Hier meine Version)
    body {
    font-family: verdana;
    font-size: 10px;
    color: grey;
    text-align: center;
    margin: 0;
    padding: 0;
    background: #333333;
    }


    Edit: Rauß mit <table> <td> <tr> die brauchste nicht

    ....;)


    Zuletzt modifiziert von .Daniel am 28.12.2007 - 16:51:52
    0 Mitglieder finden den Beitrag gut.
  10. #10
    User Pic
    ZSKing Mitglied
    Registriert seit
    05.05.2007
    Beiträge
    1.026
    Beitragswertungen
    0 Beitragspunkte
    Danke für deine schnelle und präzise Antowrt, aber das sieht jetzt leider ganz anders aus:

    Link


    MfG
    ZSKing

    PS:
    Quellcode kannst du ja einsehen! lächeln
    »inaktiv
    _________________________________
    0 Mitglieder finden den Beitrag gut.
  11. #11
    User Pic
    .Daniel Mitglied
    Registriert seit
    22.01.2006
    Beiträge
    163
    Beitragswertungen
    0 Beitragspunkte
    Mach mal bitte einen zusätzlichen Eintrag.

    css
    #inhalt {
    width: 600px;
    margin-left: 20px;
    }


    html
    <div id="contentob"></div>
    <div id="contentmit">
    <div id="inhalt">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.   
    <br />
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet
    </div>
    </div>
    <div id="contentun"></div>
    </body>
    </html>
    0 Mitglieder finden den Beitrag gut.
  12. #12
    User Pic
    ZSKing Mitglied
    Registriert seit
    05.05.2007
    Beiträge
    1.026
    Beitragswertungen
    0 Beitragspunkte
    LOL da hätte ich auch selbst drauf kommen können alles nochmal mit nem Div-Container einzugrenzen! lachen

    Naja vielen Dank! lächeln
    »inaktiv
    _________________________________
    0 Mitglieder finden den Beitrag gut.
  13. #13
    User Pic
    .Daniel Mitglied
    Registriert seit
    22.01.2006
    Beiträge
    163
    Beitragswertungen
    0 Beitragspunkte
    Richtig. Einfach den Text eingrenzen und die einen oder anderen Abstände anpassen! Fertig:)


    Zuletzt modifiziert von .Daniel am 28.12.2007 - 17:26:54
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu HTML, PHP, SQL,...

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten