1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen
  2. Unsere jährliche Weihnachts-Banner-Aktion hat begonnen! Wir freuen uns auf viele, viele kreative Vorschläge.
    Mehr dazu könnt Ihr hier nachlesen: Weihnachtsbanner 2016

    Information ausblenden

CSS-Anfänger braucht Hilfe bei Layout

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von Mauki, 18.08.08.

  1. Mauki

    Mauki Finkenwerder Herbstprinz

    Dabei seit:
    19.12.05
    Beiträge:
    470
    Unsere Aktuelle Seite habe ich mit Rapidweaver erstellt. Nun wollen wir auf Wordpress umsteigen. Ich habe genau das gleiche CSS fürs WP Template benutzt allerdings sind einige Ansichten nicht korrekt.

    So ist in allen Browsern auf der rechten Seite ein Strich zu sehen und im IE über der Navigation einen weißen Strich. Ich habe schon rumprobiert, kann den Fehler aber nicht beheben :(

    Neue Seite

    Code:
    /*
    Theme Name: VCP Denkendorf
    Theme URI: http://www.vcp-denkendorf.de
    Description: Custom Theme für den VCP Denkendorf
    Version: 1.0
    Author: Markus "Mauki" Burkhardt
    */
    
    /*  Allgemeine Einstellungen */
        
    body {
        font-size: 11px;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        color:  #000000;
        margin: 10px;
        padding: 0px;
        background-color: #CCCCCC;
        }
       
    .container {
        width: 970px;
        text-align: left;
        margin: 0 auto 0 auto;
        border: 3px solid #FFFFFF;
           background: url("images/faux_columns.jpg") repeat-y;
           }
        
    .header {
        padding: 0px;
        margin: 0px;
        }
        
    
    /* Stylesheets fuer Navigation oben */
    
    .navi_oben {
        padding:2px;
        background-color: #5B91AD;
        text-align: right;
        color:#FFFFFF;
        }
    
    .navi_oben ul {
        list-style: none;
        margin: 2px;
        }
    
    .navi_oben li {
        display: inline;
        }
    
    .navi_oben a {
        text-decoration: none;
        height: 1px;
        padding: 5px 6px 4px 6px;
        }
    
    .navi_oben a:visited {
        text-decoration: none;
        color:#FFFFFF;
        }
    
    .navi_oben a:link  { 
          color:#FFFFFF; 
          text-decoration:none;
        }
                
    .navi_oben a:hover {
        color: #00387D;
        }
    
    .navi_oben a:active {
        color: #00387D;
        }   
         
    /* Stylesheet für Sidebar */
    
    .sidebar {
        width: 165px;
        min-height: 450px;
        margin-bottom: 0px;
        float: left;
        background-color: #5B91AD;
        }
    
     
    /* Main Navigation */
    
    .navcontainer {
        line-height: 2.0em;
        border-top: 1px solid #FFFFFF;
        margin-bottom: 0px;
        position: relative;
    }
    
    .navcontainer #current {
        color: #FFFFFF;
    }
    
    .navcontainer .currentAncestor {
        color: #FFFFFF;
    }
    
    /* Parent - Level 0 */
    
    .navcontainer ul {
        list-style: none;
        margin: 0px;
        padding: 0px;
    }
    
    .navcontainer li {
    }
    
    .navcontainer a {
        display: block;
        text-decoration: none;
        padding-left: 10px;
        border-bottom: 1px solid #FFFFFF;
        height: 23px;
    }
    
    .navcontainer a:visited {
        text-decoration: none;
        color:#FFFFFF;
                    }
    
    .navcontainer a:link  { 
      color:#FFFFFF; 
      text-decoration:none;
                }
                
    .navcontainer a:hover {
        background-color: #00387D;
        color: #FFFFFF;
    }
    
    .navcontainer a:active {
        background: #FFFFFF;
          background-color: #00387D;
    }
    
    /* Child - Level 1 */
    
    .navcontainer ul ul {
        text-indent: 20px;
           background-color: #83B9CD;
           color: #FFFFFF;
        }
    
    .navcontainer ul ul li {
    }
    
    .navcontainer ul ul a {
    }
    
    .navcontainer ul ul a:hover {
    }
    
    .navcontainer ul ul .currentAncestor {
        color: #ffffff;
    }
    
    /* Stylesheets fuer Content */
        
    .content {
        min-height: 450px;
        margin: 10px 20px 20px 190px;
        background-color: #FFFFFF;
        }
    
    /* Stylesheet Breadcrumb */
    
    
    .breadcrumb {
        font-size: 10px;
        color: #666666;
        margin: 0px;
        padding: 10px 0px 20px 0px
        }    
    
    
                 
    /* Stylesheet Footer */
    
    .footer {
        border-top:1px solid #5B91AD;
        font-size: 10px;
        color: #666666;
        text-align: center;
        }
         
    
    
     
  2. TaTonka

    TaTonka Neuer Berner Rosenapfel

    Dabei seit:
    19.03.06
    Beiträge:
    1.961
    Code:
    .container {
        width: 970px;
        text-align: left;
        margin: 0 auto 0 auto;
        border: 3px solid #FFFFFF;
           background: url("images/faux_columns.jpg") repeat-y;
       }
    
    check mal den befehl "border: 3px solid #FFFFFF;". Der legt um .container eine 3 pixel breite weiße linie.
     
  3. Zeisel

    Zeisel Spätblühender Taffetapfe

    Dabei seit:
    07.08.07
    Beiträge:
    2.810
    Und ich kann den Fehler nicht sehen - in Safari, Firefox und Internet Explorer werden die Seiten bei mir absolut gleich und ohne weißen Strich angezeigt.
     
  4. Mauki

    Mauki Finkenwerder Herbstprinz

    Dabei seit:
    19.12.05
    Beiträge:
    470
    Ne der Rahmen hat damit nichts zu tun. Hab ich schon gecheckt. Der Strich ist ja an anderer Stelle ;)

    Welche URL hast du aufgerufen, ich hoffe doch http://wordpress.vcp-denkendorf.de !
     
  5. Mauki

    Mauki Finkenwerder Herbstprinz

    Dabei seit:
    19.12.05
    Beiträge:
    470
    So sieht es im IE unter Windows aus
     

    Anhänge:

  6. Zeisel

    Zeisel Spätblühender Taffetapfe

    Dabei seit:
    07.08.07
    Beiträge:
    2.810
    Ups - ich hatte Eure "alte" Seite aufgerufen, das "Neue Seite" hatte ich übersehen. Jetzt sehe ich die Striche auch.

    Hast Du das Template einfach von RapidWiever übernehmen können? Ich habe mir auch (heute Morgen!) WordPress auf meinen Server geladen und bin am probieren. Bislang habe ich den Eindruck, dass es hauptsächlich für Blogger gemacht ist, aber Deine Seite überzeugt mich ja schon mal ganz gut :)
     
  7. Mauki

    Mauki Finkenwerder Herbstprinz

    Dabei seit:
    19.12.05
    Beiträge:
    470
    Ne das Template kann man nicht übernehmen, aber das Stylesheet weitestgehend. Das braucht dann nur ein paar Anpassungen.

    Ja eigentlich ist WP was zum bloggen, man kann es aber auch als CMS verwenden mit statischen Seiten. Man braucht halt ein paar Plugins die das Leben leichte rmachen, wie z.b pageMash oder Page Link Manager
     
  8. Sigur

    Sigur Adams Parmäne

    Dabei seit:
    10.07.06
    Beiträge:
    1.301
  9. Mauki

    Mauki Finkenwerder Herbstprinz

    Dabei seit:
    19.12.05
    Beiträge:
    470
    @Sigur
    Welcher Browser/Plattform ist das?

    Der weiße Strich oben ist bei dir nicht da, aber der graue Strich rechts ist leider auch sichtbar :(
     
  10. Zeisel

    Zeisel Spätblühender Taffetapfe

    Dabei seit:
    07.08.07
    Beiträge:
    2.810
    @Sigur: genauso sieht es bei mir auch aus - mit Safari, Firefox und Internet Explorer.

    @Mauki: Lokal gespeichert sieht es bei mir noch schlimmer aus. Wahrscheinlich lässt es sich nur auf dem Server vernünftig editieren. Der graue Strich ist jedenfalls die Hintergrundfarbe. Der feine weiße Rahmen ist ja gewünscht, nehme ich an?
     
  11. Mauki

    Mauki Finkenwerder Herbstprinz

    Dabei seit:
    19.12.05
    Beiträge:
    470
    Ja der weiße Rahmen um den Container ist gewünscht. Allerdings wundert es mich das bei euch im IE kein weißter Strich wie bei mir zu sehen ist. Welche Version vom IE habt ihr denn?

    Das der graue Strich die Hintergrundfarbe ist, weiß ich, allerdings nicht wie ich das eliminieren kann?
     
  12. Zeisel

    Zeisel Spätblühender Taffetapfe

    Dabei seit:
    07.08.07
    Beiträge:
    2.810
    Ich habe mal mit der CSS der lokal gespeicherten Webseite herumprobiert; die Webseite wird lokal (unter Windows wie unter OS X) allerdings fehlerhaft angezeigt, ich weiß nicht, warum.

    Internet Explorer 7.0.5730.13
     
  13. Sigur

    Sigur Adams Parmäne

    Dabei seit:
    10.07.06
    Beiträge:
    1.301
    Firefox 3.0.1 Mac OS X 10.4.11.
     
  14. Mauki

    Mauki Finkenwerder Herbstprinz

    Dabei seit:
    19.12.05
    Beiträge:
    470
    @Sigur
    die Fehler treten im FF nmur bedingt auf, z.b der weiße Strich nur im IE!
     
  15. Mauki

    Mauki Finkenwerder Herbstprinz

    Dabei seit:
    19.12.05
    Beiträge:
    470
    So ich hab die Lösung gefunden. Mein faux_columns war um 2 px zu schmal :) Jetzt sieht es ok aus, hab auch gleich noch den Footer anders formatiert!
     
  16. Zeisel

    Zeisel Spätblühender Taffetapfe

    Dabei seit:
    07.08.07
    Beiträge:
    2.810
    Ja, sieht gut aus - nur im Internet Explorer ist noch die weiße Linie, wobei die nicht stört und durchaus als beabsichtigt durchgehen kann. Da der Internet Explorer sich eh an keine Srandards hält, kann der Fehler auch bei ihm liegen.
     

    Anhänge:

  17. Mauki

    Mauki Finkenwerder Herbstprinz

    Dabei seit:
    19.12.05
    Beiträge:
    470
    Ne sieht eben nicht gut aus :(

    So jetzt hab ich das Layout geändert und im Safari auf dem Mac sah es gut aus. Hier im Safari Windows erhalte ich jetzt unten einen grauen Strich. Im FF passt es und im IE sieht es schon wieder scheisse aus.

    Mann da hat man doch echt keine Lust mehr.

    Jetzt brauch ich erst mal ne Lösung wie ich meinen Fusszeile ohne faux_columns so formatieren kann das er die Navigation verlängert? Ich denke dann sind alle Probleme gelöst?
     
  18. Zeisel

    Zeisel Spätblühender Taffetapfe

    Dabei seit:
    07.08.07
    Beiträge:
    2.810
    Vielleicht solltest Du Dich gar nicht zu sehr an das alte Design hängen und Dich ein wenig an den WordPress-Gegebenheiten orientieren? Ich meine damit kein völlig neues Design, der Wiedererkennungswert soll ja sicher nicht verloren gehen.

    Ich denke mal, dass Du zu WordPress wechseln willst um Aufgaben zu delegieren, damit mehrere Leute dezentral von ihrem Rechner Inhalte bereitstellen oder bearbeiten können? Oder welchen Vorteil versprichst Du Dir von WordPress?
     
  19. Mauki

    Mauki Finkenwerder Herbstprinz

    Dabei seit:
    19.12.05
    Beiträge:
    470
    Naja ehrlich gesagt wieß ich nicht welche Gegebenheiten WP so hat :)

    Mein Ziel ist es einfach die Seite auch unterwegs mal kurz bearbeiten zu können ohne eigenen Rechner. Außerdem kann es auch mal sein das die Seite in 1- 2 Jahren von jemanden anderes gemacht wird und da muß ich dann ja eh umbauen.
     
  20. Zeisel

    Zeisel Spätblühender Taffetapfe

    Dabei seit:
    07.08.07
    Beiträge:
    2.810
    Beides eindeutig gute Argumente :)
     

Diese Seite empfehlen