CSS-Anfänger braucht Hilfe bei Layout

[Mauki]

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

/*
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;
    }

 

[TaTonka]

.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.

 

[Zeisel]

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

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.

 

[Mauki]

check mal den befehl "border: 3px solid #FFFFFF;". Der legt um .container eine 3 pixel breite weiße linie.

Ne der Rahmen hat damit nichts zu tun. Hab ich schon gecheckt. Der Strich ist ja an anderer Stelle

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.

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

 

[Mauki]

So sieht es im IE unter Windows aus

 

[Zeisel]

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

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

 

[Mauki]

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

 

[Sigur]

Bei mir schauts so aus:

http://mt11.quickshareit.com/share/bild1bad01.jpg

 

[Mauki]

@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

 

[Zeisel]

@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?

 

[Mauki]

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?

 

[Zeisel]

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

 

[Sigur]

@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

Firefox 3.0.1 Mac OS X 10.4.11.

 

[Mauki]

@Sigur
die Fehler treten im FF nmur bedingt auf, z.b der weiße Strich nur im IE!

 

[Mauki]

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!

 

[Zeisel]

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.

 

[Mauki]

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?

 

[Zeisel]

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?

 

[Mauki]

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.

 

[Zeisel]

Beides eindeutig gute Argumente