Probleme mit CSS

Mauki

Erstelle gerade ein neues Theme und hab da einige Probleme mit dem CSS:

1. Der Container hat einen Rahmen von 3px. Im Safari erscheint dieser, im Firefox nicht?
2. Mein Header wird nicht angezeigt, was muß den hier als Pfad angegeben werden?
3. Ich möchte das der Footer immer unten an der Seite ist, allerdings mit nem Abstand zum Content? Zur Zeit wird der Footer im Content Bereich ausgegeben. Hab schon probiert außerhalb des Contentbereiches ihn anzuordnen aber dann passt es nicht mit der Verlängerung der Sidebar nach unten?
4. Wo kommt der graue Strich rechts am Rand her?

header.php

PHP

<!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 profile="http://gmpg.org/xfn/11">
<title><?php bloginfo('name'); ?><?php if ( is_single() ) { ?> &raquo; <?php } ?><?php wp_title(); ?></title>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta name="description" content="<?php bloginfo('description'); ?>" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />


<meta http-equiv="Content-Type" content="" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="content-language" content="de" />
<meta http-equiv="pragma" content="no-cache" />
<meta name="robots" content="index,follow" />
<meta name="description" content="" />
<link rel="stylesheet" href="" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="" />
<link rel="alternate" type="text/xml" title="RSS .92" href="" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="" />
<link rel="pingback" href="" />
<link href="http://wordpress.markusburkhardt.de/favicon.ico" rel="shortcut icon"></link>
</style>
</head>
<body>
<div class="container">


<div class="header">    
<img src="/images/banner.jpg" width="969" height="126" alt="Banner VCP Denkendorf">
</div>


<div class="navi_oben">
        <ul class="navi_oben">
        <li class="active">
        <li><a href="http://www.vcp-denkendorf.de/index.html">Startseite</a></li>|
        <li><a href="http://www.vcp-denkendorf.de/kontakt.html">Kontakt</a></li>|
        <li><a href="http://www.vcp-denkendorf.de/sitemap.html">Sitemap</a></li>|
        <li><a href="http://www.vcp-denkendorf.de/impressum.html">Impressum</a></li>|
        <li><a href="http://www.vcp-denkendorf.de/intern/index.html">Intern</a></li>
        </ul>
</div>

Alles anzeigen

index.php

PHP

<?php get_header(); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>


<div class="sidebar">
<?php get_sidebar(); ?>
</div>


<div class="content">
<div class="breadcrumb">Sie befinden sich hier: VCP Denkendorf /  Stamm /  die Anfänge / </div>
<?php the_content(); ?>
<?php get_footer(); ?>
</div>


<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>

Alles anzeigen

footer.php

Code

<div class="footer">
<br>
2000 - 2008 VCP Denkendorf / Markus Burkhardt<br>
letzte Aktualisierung 15.08.08 18:23
</div>


</div>
</body>
</html>

sidebar.php

PHP

<div class="navcontainer">
<ul>
<?php wp_list_pages('title_li=' ); ?>
</ul>
</div>

style.css

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 #white;
   	background: url("http://forum.wordpress-deutschland.org/images/faux_columns.jpg") repeat-y;
	}
	
.header {
	padding: 0px;
	margin: 0px;
    }
    
a:link {
	color: #5B91AD;
	text-decoration: none;
	}


a:visited {
	color: #5B91AD;
	text-decoration: none;
	}


a:hover {
    color: #00387D;
    text-decoration: underline;
	}    


a:active {
    color: #00387D;
    text-decoration: none;
	}


/* Stylesheets fuer Navigation oben */


.navi_oben {
	padding:5px 5px 5px 5px;
	background-color: #5B91AD;
	text-align: right;
	color:#FFFFFF;
	}


.navi_oben ul {
	list-style: none;
	margin: 2px;
	display: inline;
    }


.navi_oben li {
    display: inline;
    }


.navi_oben a {
	text-decoration: none;
	height: 20px;
    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 0px 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;
	}
		 	
/*  Bilder Anordnen */	
.right {
    float:right;
	margin-left:15px; 
	}

Alles anzeigen

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

woof

Moin,

Eine Farbe heißt nicht "#white", entweder "white" oder "#FFFFFF".
Das ist aber keine CSS-Frage ;-) Bei der SRC "/images/banner.jpg" wird die Grafik unter "http://wordpress.vcp-denkendorf.de/images/banner.jpg" gesucht, das ist ein 404. Die Grafik liegt im Template-Verzeichnis? Dann musst Du genau dieses noch davor einfügen, z.B. über
PHP
```
<img src="<?php bloginfo('template_directory'); ?>/images/wordpress.gif" alt="Wordpress" border="0" height="15" width="80" />
```
Abstand zum Content wäre ja einfach, einfach ein "margin-bottom" für ".footer" entsprechend definieren. Irgendwie habe ich aber das Gefühl, Du wünscht Dir was anderes, was Du nur nicht so richtig erklärt kriegst...
Welcher graue Strich?

Du solltest zum Test auch mal den IE einbeziehen, da scheint noch einiges im Argen.

Und aufräumen könnte nicht schaden, wofür ist sowas hier z.B.:

PHP

<meta http-equiv="Content-Type" content="" />
<meta http-equiv="Content-Style-Type" content="text/css" />
...
<meta name="description" content="" />
<link rel="stylesheet" href="" type="text/css" media="screen" />

Grüße,
Thorsten

Mauki

1. ist gefixt, jetzt ist der Rahmen auch im FF sichtbar!
2. auch gefixt
3. Ja das mit dem Footer ist schwer zu erklären. Ich habe den jetzt mal aus dem Content rausgenommen und dafür drunter gesetzt. Vielleicht wird es dann klarer. Das Problem ist das jetzt die Sidebar Teile des Footers verdeckt und er sollte mittig unter dem Content sitzen!
4. Bei mir ist recht am Rand ein kleiner dünner grauer Strich sichtbar! Wenn ich den Container um 2 px schmäler mache, verschwindet er???
5. Die Metas sind aus einem Tutorial, ich bin mir nicht sicher welche ich alle brauche?
6. Ja IE bin ich auch gerade am suchen wo es den im Argen liegt?

Eigentlich ist das schon komisch mit CSS. Ich habe die aktuelle Seite mit Rapidweaver erstellt und die läuft schon seit 2 Jahren mit dem gleichen Stylesheet. Nur bei dem WP Entwurf hab ich einige kleine Änderungen drin. Das es dann nicht mehr passt ist echt komisch?

woof

Moin,

ohne konkretes Probieren könnte ich da auch wenig rausfinden, darum solltest du einfach etwas weiter basteln ;-) Grade das Box-Modell (padding, border, margin) macht Browser-übergreifend (d.h. eigentlich nur im IE) nicht wirklich Spass.

Zitat

5. Die Metas sind aus einem Tutorial, ich bin mir nicht sicher welche ich alle brauche?

Schau in den Quelltext und eliminiere alles, was doppelt ist. Und lösche dabei die Variante, die keine aktiven PHP-Inhalte hat, mit denen WordPress den passenden Inhalt einfügt. Wenn ein HREF-Attribut leer ist, dann kannst Du Dir sicher sein, dass das Unfug ist. Wenn ein META-Element mit Name "description" leeren "Content" hat (und sowieso ein paar Zeilen drüber schon mal steht), dann ist es Unfug.

Du hast da offenbar Inhalte aus zwei Quellen kombiniert, und die zweite Quelle (die ohne PHP) ist wahrscheinlich unnötig. Und sich mal angucken, was wofür gut ist, das kann selbstverständlich nicht schaden.

Grüße,
Thorsten

Mauki

Hab nochmals rumprobiert und die Ansicht ist im IE ein klein wenig besser geworden. Jetzt hab ich aber über der Navi einen weißen Strich und der graue Strich ist auch noch da?

Es kann doch aber auch nicht sein, das meine aktuelle Seite die ich mit Rapidweaver erstellt habe und die genau das gleiche Stylesheet nutzt im IE perfekt angezeigt wird. Liegt das etwa an Wordpress?

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!

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Probleme mit CSS

Jetzt mitmachen!