zurück zur Startseite
  

Registrieren Hilfe Benutzerliste Heutige Beiträge

Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Menü mittig?

Antwort
Seite 1 von 2 1 2
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 16.12.2008, 12:54
Benutzerbild von jenny79
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
  
Registriert seit: 14.06.2006
Beiträge: 137
jenny79 befindet sich auf einem aufstrebenden Ast
Standard Menü mittig?
Hallo Leute ich bekomme mein Menü einfach nicht mittig, kann mir jemand weiter helfen?
Habe folgenden code:
HTML-Code:
<!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" dir="ltr" lang="de-DE">

<head profile="http://gmpg.org/xfn/11">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

	<title>bla</title>

	<style type="text/css" media="screen">
		@import url( /wp-content/themes/DS/style.css );
		@import url( /wp-content/themes/DS/menu.css );
	</style>

	

<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://www.beraterzeitung.de/wp-includes/wlwmanifest.xml" /> 
<meta name="generator" content="WordPress 2.6.1" />

</head>

<body>
<div id="rap">
<h1 id="header">titel</h1>

<!-- START selbstgebautes Menue WORK IN PROGRESS  -->
<div id="outer">
    <div id="navcontainer">
         <ul>
			<li><a href="#" class="company">Company</a></li>
			<li><a href="#" class="zeitung">zeitung</a></li>		
			<li><a href="#" class="geheimtipps">Geheimtipps</a></li>

			<li><a href="#" class="toolbox">Toolbox</a></li>		
			<li><a href="#" class="fragen">Fragen & Hilfe</a></li>
        	<li><a href="#" class="kontakt">Kontakt</a></li>
		</ul>
    </div>  
</div>    
    </div>
und folgende css:
HTML-Code:
/* CSS Document */
*{
	margin:0;
	padding:0;
}

#navcontainer
{
    /*background-image:url('images/bgnavcontainer.jpg');float:left;*/
    background-repeat:repeat-x;
    background-color:#ffffff;
    color:#000000;
    position: absolute; top: 141px; right: 32px; left: 32px;
    height: 132px;
    border-top: 0px;
    border-right: 8px;
    border-bottom: 8px;
    border-left: 8px;
    border-color: #aaaaaa;
    border-style: solid;
   /* border: 1px solid #aaaaaa;
    border: 0px 11px 1px 1px solid #aaaaaa;*/
    text-align:center;
    vertical-align:top;	
	margin: 0 auto;
}

#outer{
	text-align:center;
}
	
#navcontainer ul{
	list-style:none;
	text-align:center;
	float:none;
}
#navcontainer li{
	display:block;
	float:left;
}
#navcontainer li a.company{
	background:#fff url(images/company.gif) repeat-x;
	border:0px solid #80a225;
	margin:0 1px;
	padding:15px 0px 15px 0px;
	display:block;
	float:left;
	color:#000;
	text-transform:uppercase;
	text-decoration:none;
	text-align:center;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-size:13px;
	font-weight:bold;
	width:140px;
	height: 100px;
}
#navcontainer li a.beraterzeitung{
	background:#fff url(images/beraterzeitung.gif) repeat-x;
	border:0px solid #80a225;
	margin:0 1px;
	padding:15px 0px 15px 0px;
	display:block;
	float:left;
	color:#000;
	text-transform:uppercase;
	text-decoration:none;
	text-align:center;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-size:13px;
	font-weight:bold;
	width:140px;
	height: 100px;
}
#navcontainer li a.geheimtipps{
	background:#fff url(images/geheimtipps.gif) repeat-x;
	border:0px solid #80a225;
	margin:0 1px;
	padding:15px 0px 15px 0px;
	display:block;
	float:left;
	color:#000;
	text-transform:uppercase;
	text-decoration:none;
	text-align:center;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-size:13px;
	font-weight:bold;
	width:140px;
	height: 100px;
}
#navcontainer li a.beratertoolbox{
	background:#fff url(images/company.gif) repeat-x;
	border:0px solid #80a225;
	margin:0 1px;
	padding:15px 0px 15px 0px;
	display:block;
	float:left;
	color:#000;
	text-transform:uppercase;
	text-decoration:none;
	text-align:center;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-size:13px;
	font-weight:bold;
	width:140px;
	height: 100px;
}
#navcontainer li a.fragen{
	background:#fff url(images/fragen.gif) repeat-x;
	border:0px solid #80a225;
	margin:0 1px;
	padding:15px 0px 15px 0px;
	display:block;
	float:left;
	color:#000;
	text-transform:uppercase;
	text-decoration:none;
	text-align:center;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-size:13px;
	font-weight:bold;
	width:140px;
	height: 100px;
}
#navcontainer li a.kontakt{
	background:#fff url(images/kontakt.gif) repeat-x;
	border:0px solid #80a225;
	margin:0 1px;
	padding:15px 0px 15px 0px;
	display:block;
	float:left;
	color:#000;
	text-transform:uppercase;
	text-decoration:none;
	text-align:center;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-size:13px;
	font-weight:bold;
	width:140px;
	height: 100px;
}
#navcontainer li a{
	background:#fff url(images/navcontainer_bg.gif) repeat-x;
	border:2px solid #80a225;
	margin:0 1px;
	padding:15px 15px 15px 15px;
	display:block;
	float:left;
	color:#fff;
	text-transform:uppercase;
	text-decoration:none;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-size:13px;
	font-weight:bold;
	width:140px;
	height: 100px;
}
#navcontainer li a span{
	color:#52651f;
	font-size:10px;
	text-transform:lowercase;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-weight:normal;
}

a {
	color: #675;
	height:120px;
	width:100px;
}

a img {
	border: none;
}

a:visited {
	color: #342;
}

a:hover {
	color: #9a8;
}

acronym, abbr {
	border-bottom: 1px dashed #333;
}

acronym, abbr, span.caps {
	font-size: 90%;
	letter-spacing: .07em;
}

acronym, abbr {
	cursor: help;
}

blockquote {
	border-left: 5px solid #ccc;
	margin-left: 1.5em;
	padding-left: 5px;
}

/************************************************************
 *** BODY ***************************************************
 ************************************************************/

body {
        background-color:#000000;
        background-image:url(./images/bgbody.jpg);
        background-repeat:repeat-x;
	/*xxborder: 2px solid #565;*/
	border: 0px solid #00ff00;
	color: #000;
	font-family: Verdana, sans-serif;
	margin: 0 0 32px 0;
	padding: 0;
}

cite {
        background-color:#ffffff;
        /*XXbackground-image:url(./images/bgcite.jpg);*/
	font-size: 90%;
	font-style: normal;
	color: #000000;
}

h2 {
	border-bottom: 1px dotted #000000;
	font: 95% Verdana, sans-serif;
	letter-spacing: 0.2em;
	margin: 15px 0 2px 0;
	padding-bottom: 2px;
}

h3 {
	border-bottom: 1px dotted #000000;
	font-family:Verdana,sans-serif;
	margin-top: 0;
}

ol#comments li p {
	font-size: 100%;
}

p, li, .feedback {
	font-family: Verdana, sans-serif;
	font-size: 100%;
}

/* classes used by the_meta() */
ul.post-meta {
	list-style: none;
}

ul.post-meta span.post-meta-key {
	font-weight: bold;
}

.credit {
    background-color:#ffffff;
    /* background-image:url(./images/bgcredit.jpg);
	position:absolute; bottom:0px;*/
	border: 1px solid #aaaaaa;
	color: #000000;
	font-size: 11px;
	margin: 8px: 0px; 4px; 0px;
	padding: 0px 0px 0px 0px;
	text-align: center;
	z-index:1999;
}

.credit a:link, .credit a:hover {
	color: #000000;
}

.feedback {
	color: #ccc;
	text-align: right;
	clear: both;
}

.meta {
	font-size: .75em;
}

.meta li, ul.post-meta li {
	display: inline;
}

.meta ul {
	display: inline;
	list-style: none;
	margin: 0;
	padding: 0;
}

.meta, .meta a {
	color: #000000;
	font-weight: normal;
	letter-spacing: 0;
}

.storytitle {
	margin: 0;
}

.storytitle a {
	text-decoration: none;
}

#commentform #author, #commentform #email, #commentform #url, #commentform textarea {
	background: #fff;
	border: 1px solid #333;
	padding: .2em;
}

#commentform textarea {
	width: 85%;
}

#commentlist li ul {
	border-left: 1px solid #ddd;
	font-size: 110%;
	list-style-type: none;
}

#commentlist li .avatar {
	float: right;
	margin-right: 25px;
	border: 1px dotted #ccc;
	padding: 2px;
}

#content {
/*	margin: 5px 210px 0 155px;
	margin: 1em 13em 0 1em;
	position:absolute; left:193px; right:246px;
	padding-right: 60px;
	padding-left:8px;
	padding-top:8px;
	padding-bottom:8px;
	background-image:url(./images/bgcontent.jpg);

*/
        background-color:#ffffff;
        
}
/***********************************************************************
 *** HEADER ************************************************************
 ***********************************************************************/

#header {
    background-color:#ffffff;
    background-image:url(./images/bgheader.jpg);
    background-position:center;
    background-repeat:no-repeat;
	border-top: 8px;
	border-right: 8px;
	border-bottom: 1px;
	border-left: 8px;
	border-style: solid;
	border-color: #aaaaaa;
	position:absolute; top:32px; left:32px; right:32px;
	height:100px;
	/*min-width:900px;*/
    margin: 0px;
	padding: 0px;
    font-family:Verdana,sans-serif;
    font-size:130%;
    font-style:normal;
    font-weight:bold;
	letter-spacing: 0.2em;
    color:#00ff00;
}

#header a {
	color: #ddddff;
	text-decoration: none;
}

#header a:hover {
	text-decoration: underline;
}

#menu {
	background-color:#e0e0e0;
	/*background-image:url(./images/bgmenu.jpg);*/
	border-top: 0px;
	border-right: 8px;
	border-bottom: 1px;
	border-left: 1px;
	border-color: #aaaaaa;
    border-style: solid;
	padding: 10px 5px 5px 10px;
	position: absolute; top: 281px; right: 32px;
	width: 190px;
	z-index:999;
}

#menu form {
	margin: 0 0 0 13px;
}

#menu input#s {
	width: 80%;
	background: #eee;
	border: 1px solid #999;
	color: #000;
}

#menu ul {
	color: #000000;
	font-weight: bold;
	list-style-type: none;
	margin: 0;
	padding-left: 3px;
	text-transform: lowercase;
}

#menu ul li {
    font-family:Verdana,sans-serif;
    font-size:110%;
    font-style:normal;
    font-weight:normal;
	letter-spacing: 0.1em;
	margin-top: 10px;
	padding-bottom: 2px; /*border-bottom: dotted 1px #ccc;*/
}

#menu ul ul {
	font-variant: normal;
	font-weight: normal;
	line-height: 100%;
	list-style-type: none;
	margin: 0;
	padding: 0;
	text-align: left;
}

#menu ul ul li {
	border: 0;
	font: normal normal 12px/115% 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
	letter-spacing: 0;
	margin-top: 0;
	padding: 0;
	padding-left: 12px;
}

#menu ul ul li a {
	color: #01007f;
	text-decoration: none;
}

#menu ul ul li a:hover {
	border-bottom: 1px solid #01007f;
}

#menu ul ul ul.children {
	font-size: 142%;
	padding-left: 4px;
}

#wp-calendar {
	border: 1px solid #ddd;
	empty-cells: show;
	font-size: 14px;
	margin: 0;
	width: 90%;
}

#wp-calendar #next a {
	padding-right: 10px;
	text-align: right;
}

#wp-calendar #prev a {
	padding-left: 10px;
	text-align: left;
}

#wp-calendar a {
	display: block;
	text-decoration: none;
}

#wp-calendar a:hover {
	background: #e0e6e0;
	color: #333;
}

#wp-calendar caption {
	color: #999;
	font-size: 16px;
	text-align: left;
}

#wp-calendar td {
	color: #ccc;
	font: normal 12px 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
	letter-spacing: normal;
	padding: 2px 0;
	text-align: center;
}

#wp-calendar td.pad:hover {
	background: #fff;
}

#wp-calendar td:hover, #wp-calendar #today {
	background: #eee;
	color: #bbb;
}

#wp-calendar th {
	font-style: normal;
	text-transform: capitalize;
}

/* Captions & aligment */
.aligncenter,
div.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.alignleft {
	float: left;
}

.alignright {
	float: right;
}

.wp-caption {
	border: 1px solid #ddd;
	text-align: center;
	background-color: #f3f3f3;
	padding-top: 4px;
	margin: 10px;
	-moz-border-radius: 3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}

.wp-caption img {
	margin: 0;
	padding: 0;
	border: 0 none;
}

.wp-caption p.wp-caption-text {
	font-size: 11px;
	line-height: 17px;
	padding: 0 4px 5px;
	margin: 0;
}
/* End captions & aligment */

/**********************************************/
/* Selbst hinzugefuegte Elemente Joerg Osarek */
/**********************************************/

#tipptab {
    background-color:#e0e0e0;
   /* background-image:url(./images/bgtipptab.jpg);*/
	border-bottom: 3px solid #ff0000;
	border-left: 1px solid #ff0000;
	border-right: 209px solid #ff0000;
	border-top: 1px solid #ff0000;
    border:thin solid black;
    border-spacing:5px;
	margin: 0;
	padding: 15px 10px 15px 32px;
	font-family: Verdana, sans-serif;
	font-size: 90%;
}

#tipptab td {
       /* border:thin solid blue;
	   background-image:url(./images/bgtipptabtd.jpg);*/
        border:none;
        vertical-align:top;
        background-color:#ffffff;
        
}

#tipptab a {
	color: #0000aa;
	text-decoration: none;
}

/* Fuer das Navigationsmenue oben ******************/


/*#navcontainer a
{
    text-align:right;
    vertical-align:bottom;
    position: absolute; bottom:8px;
    color:#000000;
}

a.topmenu
{
    padding: 0.2em 1.5em;
    background-image:url('images/bgnavcontainer_a.jpg');
    background-repeat:repeat-x;
    background-color:#ccccfe;
    color: #000000;
    text-decoration: none;
    float: left;
    border-right: 1px solid #aaaaaa;
    text-align:center;
    vertical-align:bottom;
}
*/



/**************************************/
/* Fuer den Left Bar ******************/
/**************************************/

#leftbar
{
    /*background-image:url('images/bgleftbar.jpg');*/
    background-repeat:repeat-y;
    color:#FFFFFF;
    position:absolute; top:280px; left:32px; width:120px; height:720px;
    padding:0 0 0 0;
    margin 0 0 0 0;
    border-top: 0px;
    border-right: 1px;
    border-bottom: 1px;
    border-left: 8px;
    border-color: #aaaaaa;
    border-style: solid;
    z-index:999;
}

.leftbarbox
{
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    width:120px; height:240px;
    float:left;
    display: inline;
    font-size:8pt;
    border-top: 1px;
    border-right: 0px;
    border-bottom: 0px;
    border-left: 0px;
    border-color: #aaaaaa;
    border-style: solid;
}

/* Fuer den statischen und flexiblen Inhalt auf der Haupt-Seite ******************/

#inhaltsbereich
{
	/*
	position:absolute; top:173px; left:193px; right:246px;
	padding-left:8px;
	padding-right: 60px;
	background-image:url(./images/bginhaltsbereich.jpg);*/
	position:absolute; top:281px; left:32px; right:32px;
	min-height:720px;
	padding-right: 222px;
	padding-left:132px;
	padding-top:8px;
	padding-bottom:8px;
    background-color:#f0f0f0;
    border-top: 0px;
	border-right: 8px;
	border-bottom: 8px;
	border-left: 8px;
	border-color: #aaaaaa;
    border-style: solid;
}


/* Fuer den statischen Inhalt auf der Haupt-Seite ******************/

#staticstuff_main
{
	/*
	margin: 5px 210px 0 155px;
	position:absolute; top:281px; left:160px; right:246px;
	padding-right: 60px;
    font-size: 90%;    
    background-image:url(./images/bgstaticstuff_main.jpg);*/
	background-color:#e0e0e0;
	font-family: Verdana, sans-serif;
	
}
Wäre echt tollo wenn mir jemand sagen kann warum denn das Menu nicht mittig erscheint?
Das Layout soll flexibel bleiben und sich an den Viewport des Browsers anpassen.
Lg
Jenny
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 16.12.2008, 13:02
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
  
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard
Hi,

gefloatete Elemente sind von Hause aus Blockelemente, da brauchts kein display:block (li ist auch ohne float ein Blockelement!)
Bei absolut positionierten Elementen wirkt margin:0 auto; nicht.

Elemente werden horizontal zentriert, indem sie eine feste Breite bekommen (nicht floaten und nicht absolut pos. sind!) und dann per margin:0 auto; im umgebenden Container ausgerichtet werden.

In der CSS-FAQ steht bei Heiko's Menü-Tutorial auch noch eine andere Möglichkeit, schau einfach mal rein.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 16.12.2008, 13:05
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
  
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard
Entweder gib ihm eine Breite oder siehe FAQ.

Edit: So sieht's aus
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #4 (permalink)  
Alt 16.12.2008, 13:16
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
  
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard
Mahlzeit,

Zitat:
Zitat von heiko_rs Beitrag anzeigen
Edit: So sieht's aus
hehe, endlich mal schneller als "Heiko" und auch nix falsches und/oder Unvollständiges gepostet.
Das ich das noch erleben darf.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
  #5 (permalink)  
Alt 16.12.2008, 13:34
Benutzerbild von jenny79
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
  
Registriert seit: 14.06.2006
Beiträge: 137
jenny79 befindet sich auf einem aufstrebenden Ast
Standard
danke für Eure schnellen Anworten, also ich habe jetzt dem "<div id="outer">" mal alle Eigenschaften vom "<div id="navcontainer">" gegeben. und dem <div id="navcontainer"> eine feste Breite gegeben.
Und tata.. im IE klappts auch, allerdings nicht im Mozilla Firefox.
Hier nochmal der neue CSS-Code:
HTML-Code:
#navcontainer
{

text-align:center;
width:900px;

	
}

#outer{
    background-repeat:repeat-x;
    background-color:#ffffff;
    color:#000000;
    position: absolute; top: 141px; right: 32px; left: 32px;
     vertical-align:top;	
     height: 132px;
    border-top: 0px;
    border-right: 8px;
    border-bottom: 8px;
    border-left: 8px;
    border-color: #aaaaaa;
    border-style: solid;
    text-align:center;
    margin: 0 auto;
}
Habt Ihr eine Ahnung warum der Mozilla Firefox da nicht mitmacht?

Lg Jenny
Mit Zitat antworten
  #6 (permalink)  
Alt 16.12.2008, 13:44
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
  
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard
Hi,

Zitat:
Zitat von hubspe Beitrag anzeigen
Hi,
Bei absolut positionierten Elementen wirkt margin:0 auto; nicht.

Elemente werden horizontal zentriert, indem sie eine feste Breite bekommen (nicht floaten und nicht absolut pos. sind!) und dann per margin:0 auto; im umgebenden Container ausgerichtet werden.


warum gibst du nicht der ul die feste Breite??

Du könntest auch sowohl der ul als auch li feste Breiten geben.
Der ul zum horizontalen zentrieren und den li's, um das shrink-to-fit-Verhalten durch den Float auszuschalten.
Dann könnten die li's besser in der ul positioniert werden.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
  #7 (permalink)  
Alt 16.12.2008, 14:08
Benutzerbild von jenny79
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
  
Registriert seit: 14.06.2006
Beiträge: 137
jenny79 befindet sich auf einem aufstrebenden Ast
Standard
Hallo hubspe,
ich habe der <ul> die feste breite gegeben, mit width:800px;
allerdings das gleiche Problem, im IE gehts aber im Firefox leider noch nicht.

Hast du evtl. eine andere Idee?

Lg
Jenny
Geändert von jenny79 (16.12.2008 um 14:20 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 16.12.2008, 14:38
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
  
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard
Hi,

dann poste doch noch einmal ein komplettes, lauffähiges Beispiel, mit dem aktuellen Stand.
Ich kann mir das so schlecht vorstellen.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
  #9 (permalink)  
Alt 16.12.2008, 15:14
Benutzerbild von jenny79
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
  
Registriert seit: 14.06.2006
Beiträge: 137
jenny79 befindet sich auf einem aufstrebenden Ast
Standard
Hallo,
hier mal der HTML-Code:
HTML-Code:
<!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" dir="ltr" lang="de-DE">

<head profile="http://gmpg.org/xfn/11">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

	<title>bla</title>

	<style type="text/css" media="screen">
		@import url( /wp-content/themes/DS/style.css );
		@import url( /wp-content/themes/DS/menu.css );
	</style>

	

<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://www.beraterzeitung.de/wp-includes/wlwmanifest.xml" /> 
<meta name="generator" content="WordPress 2.6.1" />

</head>

<body>
<div id="rap">
<h1 id="header">titel</h1>

<!-- START selbstgebautes Menue WORK IN PROGRESS  -->
<div id="outer">
    <div id="navcontainer">
         <ul>
			<li><a href="#" class="company">Company</a></li>
			<li><a href="#" class="beraterzeitung">zeitung</a></li>		
			<li><a href="#" class="geheimtipps">Geheimtipps</a></li>

			<li><a href="#" class="beratertoolbox">Toolbox</a></li>		
			<li><a href="#" class="fragen">Fragen & Hilfe</a></li>
        	<li><a href="#" class="kontakt">Kontakt</a></li>
		</ul>
    </div>  
</div>    
    </div>
und hier der CSS-Code:
HTML-Code:
/* CSS Document */
*{
	margin:0;
	padding:0;
}


#lister{/*ul*/
	width:880px;}

#outer{
	background-repeat:repeat-x;
    background-color:#ffffff;
    color:#000000;
    position: absolute; top: 141px; right: 32px; left: 32px;
    vertical-align:top;	
	height: 132px;
    border-top: 0px;
    border-right: 8px;
    border-bottom: 8px;
    border-left: 8px;
    border-color: #aaaaaa;
    border-style: solid;
	
	text-align:center;
	margin: 0 auto;
}
#navcontainer
{
    /*background-image:url('images/bgnavcontainer.jpg');float:left;*/
    /* border: 1px solid #aaaaaa;
    border: 0px 11px 1px 1px solid #aaaaaa;*/
    text-align:center;
    background-color:#0C6;
	margin: 0 auto;
}	
#navcontainer ul{
	list-style:none;
	text-align:center;
	/*float:none;*/
}
#navcontainer li{
	/**/display:block;
	float:left;
}
#navcontainer li a.company{
	background:#fff url(images/company.gif) repeat-x;
	border:0px solid #80a225;
	margin:0px 1px 0px 0px;
	padding:15px 0px 15px 0px;
	display:block;
	float:left;
	color:#000;
	text-transform:uppercase;
	text-decoration:none;
	text-align:center;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-size:13px;
	font-weight:bold;
	width:140px;
	height: 100px;
}
#navcontainer li a.beraterzeitung{
	background:#fff url(images/beraterzeitung.gif) repeat-x;
	border:0px solid #80a225;
	margin:0px 1px 0px 0px;
	padding:15px 0px 15px 0px;
	display:block;
	float:left;
	color:#000;
	text-transform:uppercase;
	text-decoration:none;
	text-align:center;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-size:13px;
	font-weight:bold;
	width:140px;
	height: 100px;
}
#navcontainer li a.geheimtipps{
	background:#fff url(images/geheimtipps.gif) repeat-x;
	border:0px solid #80a225;
	margin:0px 1px 0px 0px;
	padding:15px 0px 15px 0px;
	display:block;
	float:left;
	color:#000;
	text-transform:uppercase;
	text-decoration:none;
	text-align:center;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-size:13px;
	font-weight:bold;
	width:140px;
	height: 100px;
}
#navcontainer li a.beratertoolbox{
	background:#fff url(images/company.gif) repeat-x;
	border:0px solid #80a225;
	margin:0px 1px 0px 0px;
	padding:15px 0px 15px 0px;
	display:block;
	float:left;
	color:#000;
	text-transform:uppercase;
	text-decoration:none;
	text-align:center;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-size:13px;
	font-weight:bold;
	width:140px;
	height: 100px;
}
#navcontainer li a.fragen{
	background:#fff url(images/fragen.gif) repeat-x;
	border:0px solid #80a225;
	margin:0px 1px 0px 0px;
	padding:15px 0px 15px 0px;
	display:block;
	float:left;
	color:#000;
	text-transform:uppercase;
	text-decoration:none;
	text-align:center;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-size:13px;
	font-weight:bold;
	width:140px;
	height: 100px;
}
#navcontainer li a.kontakt{
	background:#fff url(images/kontakt.gif) repeat-x;
	border:0px solid #80a225;
	margin:0px 1px 0px 0px;
	padding:15px 0px 15px 0px;
	display:block;
	float:left;
	color:#000;
	text-transform:uppercase;
	text-decoration:none;
	text-align:center;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-size:13px;
	font-weight:bold;
	width:140px;
	height: 100px;
}
#navcontainer li a{
	background:#fff url(images/navcontainer_bg.gif) repeat-x;
	border:2px solid #80a225;
	margin:0 1px;
	padding:15px 15px 15px 15px;
	display:block;
	float:left;
	color:#fff;
	text-transform:uppercase;
	text-decoration:none;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-size:13px;
	font-weight:bold;
	width:140px;
	height: 100px;
}
#navcontainer li a span{
	color:#52651f;
	font-size:10px;
	text-transform:lowercase;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-weight:normal;
}
/*
Theme Name: 

Description: 
Default WordPress by Dave Shea || http://mezzoblue.com
Modifications by Matthew Mullenweg || http://photomatt.net
This is just a basic layout, with only the bare minimum defined.
Please tweak this and make it your own. :)
*/

a {
	color: #675;
	height:120px;
	width:100px;
}

a img {
	border: none;
}

a:visited {
	color: #342;
}

a:hover {
	color: #9a8;
}

acronym, abbr {
	border-bottom: 1px dashed #333;
}

acronym, abbr, span.caps {
	font-size: 90%;
	letter-spacing: .07em;
}

acronym, abbr {
	cursor: help;
}

blockquote {
	border-left: 5px solid #ccc;
	margin-left: 1.5em;
	padding-left: 5px;
}

/************************************************************
 *** BODY ***************************************************
 ************************************************************/

body {
        background-color:#000000;
        background-image:url(./images/bgbody.jpg);
        background-repeat:repeat-x;
	/*xxborder: 2px solid #565;*/
	border: 0px solid #00ff00;
	color: #000;
	font-family: Verdana, sans-serif;
	margin: 0 0 32px 0;
	padding: 0;
}

cite {
        background-color:#ffffff;
        /*XXbackground-image:url(./images/bgcite.jpg);*/
	font-size: 90%;
	font-style: normal;
	color: #000000;
}

h2 {
	border-bottom: 1px dotted #000000;
	font: 95% Verdana, sans-serif;
	letter-spacing: 0.2em;
	margin: 15px 0 2px 0;
	padding-bottom: 2px;
}

h3 {
	border-bottom: 1px dotted #000000;
	font-family:Verdana,sans-serif;
	margin-top: 0;
}

ol#comments li p {
	font-size: 100%;
}

p, li, .feedback {
	font-family: Verdana, sans-serif;
	font-size: 100%;
}

/* classes used by the_meta() */
ul.post-meta {
	list-style: none;
}

ul.post-meta span.post-meta-key {
	font-weight: bold;
}

.credit {
    background-color:#ffffff;
    /* background-image:url(./images/bgcredit.jpg);
	position:absolute; bottom:0px;*/
	border: 1px solid #aaaaaa;
	color: #000000;
	font-size: 11px;
	margin: 8px: 0px; 4px; 0px;
	padding: 0px 0px 0px 0px;
	text-align: center;
	z-index:1999;
}

.credit a:link, .credit a:hover {
	color: #000000;
}

.feedback {
	color: #ccc;
	text-align: right;
	clear: both;
}

.meta {
	font-size: .75em;
}

.meta li, ul.post-meta li {
	display: inline;
}

.meta ul {
	display: inline;
	list-style: none;
	margin: 0;
	padding: 0;
}

.meta, .meta a {
	color: #000000;
	font-weight: normal;
	letter-spacing: 0;
}

.storytitle {
	margin: 0;
}

.storytitle a {
	text-decoration: none;
}

#commentform #author, #commentform #email, #commentform #url, #commentform textarea {
	background: #fff;
	border: 1px solid #333;
	padding: .2em;
}

#commentform textarea {
	width: 85%;
}

#commentlist li ul {
	border-left: 1px solid #ddd;
	font-size: 110%;
	list-style-type: none;
}

#commentlist li .avatar {
	float: right;
	margin-right: 25px;
	border: 1px dotted #ccc;
	padding: 2px;
}

#content {
/*	margin: 5px 210px 0 155px;
	margin: 1em 13em 0 1em;
	position:absolute; left:193px; right:246px;
	padding-right: 60px;
	padding-left:8px;
	padding-top:8px;
	padding-bottom:8px;
	background-image:url(./images/bgcontent.jpg);

*/
        background-color:#ffffff;
        
}
/***********************************************************************
 *** HEADER ************************************************************
 ***********************************************************************/

#header {
    background-color:#ffffff;
    background-image:url(./images/bgheader.jpg);
    background-position:center;
    background-repeat:no-repeat;
	border-top: 8px;
	border-right: 8px;
	border-bottom: 1px;
	border-left: 8px;
	border-style: solid;
	border-color: #aaaaaa;
	position:absolute; top:32px; left:32px; right:32px;
	height:100px;
	/*min-width:900px;*/
    margin: 0px;
	padding: 0px;
    font-family:Verdana,sans-serif;
    font-size:130%;
    font-style:normal;
    font-weight:bold;
	letter-spacing: 0.2em;
    color:#00ff00;
}

#header a {
	color: #ddddff;
	text-decoration: none;
}

#header a:hover {
	text-decoration: underline;
}

#menu {
	background-color:#e0e0e0;
	/*background-image:url(./images/bgmenu.jpg);*/
	border-top: 0px;
	border-right: 8px;
	border-bottom: 1px;
	border-left: 1px;
	border-color: #aaaaaa;
    border-style: solid;
	padding: 10px 5px 5px 10px;
	position: absolute; top: 281px; right: 32px;
	width: 190px;
	z-index:999;
}

#menu form {
	margin: 0 0 0 13px;
}

#menu input#s {
	width: 80%;
	background: #eee;
	border: 1px solid #999;
	color: #000;
}

#menu ul {
	color: #000000;
	font-weight: bold;
	list-style-type: none;
	margin: 0;
	padding-left: 3px;
	text-transform: lowercase;
}

#menu ul li {
    font-family:Verdana,sans-serif;
    font-size:110%;
    font-style:normal;
    font-weight:normal;
	letter-spacing: 0.1em;
	margin-top: 10px;
	padding-bottom: 2px; /*border-bottom: dotted 1px #ccc;*/
}

#menu ul ul {
	font-variant: normal;
	font-weight: normal;
	line-height: 100%;
	list-style-type: none;
	margin: 0;
	padding: 0;
	text-align: left;
}

#menu ul ul li {
	border: 0;
	font: normal normal 12px/115% 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
	letter-spacing: 0;
	margin-top: 0;
	padding: 0;
	padding-left: 12px;
}

#menu ul ul li a {
	color: #01007f;
	text-decoration: none;
}

#menu ul ul li a:hover {
	border-bottom: 1px solid #01007f;
}

#menu ul ul ul.children {
	font-size: 142%;
	padding-left: 4px;
}

#wp-calendar {
	border: 1px solid #ddd;
	empty-cells: show;
	font-size: 14px;
	margin: 0;
	width: 90%;
}

#wp-calendar #next a {
	padding-right: 10px;
	text-align: right;
}

#wp-calendar #prev a {
	padding-left: 10px;
	text-align: left;
}

#wp-calendar a {
	display: block;
	text-decoration: none;
}

#wp-calendar a:hover {
	background: #e0e6e0;
	color: #333;
}

#wp-calendar caption {
	color: #999;
	font-size: 16px;
	text-align: left;
}

#wp-calendar td {
	color: #ccc;
	font: normal 12px 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
	letter-spacing: normal;
	padding: 2px 0;
	text-align: center;
}

#wp-calendar td.pad:hover {
	background: #fff;
}

#wp-calendar td:hover, #wp-calendar #today {
	background: #eee;
	color: #bbb;
}

#wp-calendar th {
	font-style: normal;
	text-transform: capitalize;
}

/* Captions & aligment */
.aligncenter,
div.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.alignleft {
	float: left;
}

.alignright {
	float: right;
}

.wp-caption {
	border: 1px solid #ddd;
	text-align: center;
	background-color: #f3f3f3;
	padding-top: 4px;
	margin: 10px;
	-moz-border-radius: 3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}

.wp-caption img {
	margin: 0;
	padding: 0;
	border: 0 none;
}

.wp-caption p.wp-caption-text {
	font-size: 11px;
	line-height: 17px;
	padding: 0 4px 5px;
	margin: 0;
}
/* End captions & aligment */


#tipptab {
    background-color:#e0e0e0;
   /* background-image:url(./images/bgtipptab.jpg);*/
	border-bottom: 3px solid #ff0000;
	border-left: 1px solid #ff0000;
	border-right: 209px solid #ff0000;
	border-top: 1px solid #ff0000;
    border:thin solid black;
    border-spacing:5px;
	margin: 0;
	padding: 15px 10px 15px 32px;
	font-family: Verdana, sans-serif;
	font-size: 90%;
}

#tipptab td {
       /* border:thin solid blue;
	   background-image:url(./images/bgtipptabtd.jpg);*/
        border:none;
        vertical-align:top;
        background-color:#ffffff;
        
}

#tipptab a {
	color: #0000aa;
	text-decoration: none;
}

/* Fuer das Navigationsmenue oben ******************/


/*#navcontainer a
{
    text-align:right;
    vertical-align:bottom;
    position: absolute; bottom:8px;
    color:#000000;
}

a.topmenu
{
    padding: 0.2em 1.5em;
    background-image:url('images/bgnavcontainer_a.jpg');
    background-repeat:repeat-x;
    background-color:#ccccfe;
    color: #000000;
    text-decoration: none;
    float: left;
    border-right: 1px solid #aaaaaa;
    text-align:center;
    vertical-align:bottom;
}
*/



/**************************************/
/* Fuer den Left Bar ******************/
/**************************************/

#leftbar
{
    /*background-image:url('images/bgleftbar.jpg');*/
    background-repeat:repeat-y;
    color:#FFFFFF;
    position:absolute; top:280px; left:32px; width:120px; height:720px;
    padding:0 0 0 0;
    margin 0 0 0 0;
    border-top: 0px;
    border-right: 1px;
    border-bottom: 1px;
    border-left: 8px;
    border-color: #aaaaaa;
    border-style: solid;
    z-index:999;
}

.leftbarbox
{
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    width:120px; height:240px;
    float:left;
    display: inline;
    font-size:8pt;
    border-top: 1px;
    border-right: 0px;
    border-bottom: 0px;
    border-left: 0px;
    border-color: #aaaaaa;
    border-style: solid;
}

/* Fuer den statischen und flexiblen Inhalt auf der Haupt-Seite ******************/

#inhaltsbereich
{
	/*
	position:absolute; top:173px; left:193px; right:246px;
	padding-left:8px;
	padding-right: 60px;
	background-image:url(./images/bginhaltsbereich.jpg);*/
	position:absolute; top:281px; left:32px; right:32px;
	min-height:720px;
	padding-right: 222px;
	padding-left:132px;
	padding-top:8px;
	padding-bottom:8px;
    background-color:#f0f0f0;
    border-top: 0px;
	border-right: 8px;
	border-bottom: 8px;
	border-left: 8px;
	border-color: #aaaaaa;
    border-style: solid;
}


/* Fuer den statischen Inhalt auf der Haupt-Seite ******************/

#staticstuff_main
{
	/*
	margin: 5px 210px 0 155px;
	position:absolute; top:281px; left:160px; right:246px;
	padding-right: 60px;
    font-size: 90%;    
    background-image:url(./images/bgstaticstuff_main.jpg);*/
	background-color:#e0e0e0;
	font-family: Verdana, sans-serif;
	
}



/
Geändert von jenny79 (16.12.2008 um 15:43 Uhr)
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 16.12.2008, 15:58
Benutzerbild von jenny79
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
  
Registriert seit: 14.06.2006
Beiträge: 137
jenny79 befindet sich auf einem aufstrebenden Ast
Standard
hast auch keine Lösung?
Mein Chef hat dieses blöde Template gebaut und ich muss es wieder ausbaden.

Lg
Jenny
Mit Zitat antworten
Sponsored Links
Antwort
Seite 1 von 2 1 2

« Vorheriges Thema | Nächstes Thema »

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.
BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
drop-down Menü mittig stellen Saleman (X)HTML 1 16.01.2010 01:45
Darstellungsproblem flohpapa CSS 3 16.12.2009 08:55
Vertikale Navigation: IE6 - Whitespace-Bug? b.erry CSS 6 12.02.2009 16:46
Umbruch in einem LI bei horizontalem Menü M4rco CSS 12 13.10.2006 11:26
Navigation - Menü T.S. CSS 6 18.02.2006 18:49


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:50 Uhr.

Datenschutzerklärung - Impressum - Archiv - Nach oben

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023