zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS Layout Tutorial von www.subcide.com klappt nicht

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 15.05.2008, 18:31
img img ist offline
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 15.05.2008
Beiträge: 258
img befindet sich auf einem aufstrebenden Ast
Standard CSS Layout Tutorial von www.subcide.com klappt nicht

Hi Leute,

habe eben folgendes Tutorial durchgemacht: Creating a CSS layout from scratch : Subcide

leider habe ich das Problem, dass das Menü nicht funktioniert.. es wird einfach nichts angezeigt... das "main menü" bleibt leider weiß.

CSS-Code
Code:
html, body {
	margin: 0;
	padding: 0;
	}
	
body {
	font-family: Arial, Helvetica, Verdana, Sans-serif;
	font-size: 12px;
	color: #666666;
	background: #ffffff;
	text-align: center;
	}
	
.hidden {
	display: none;
	}

h1 {
	margin: 0;
	padding: 0;
	float: right;
	margin-top: 57px;
	padding-right: 31px;
	}

#page-container{
	width: 760px;
	margin: auto;
	text-align: left;
	}	
	
/* Main Navigation */

#main-nav { height: 50px; }
#main-nav dl { margin: 0; padding: 0; }

/* IE5 Mac Hack \*/ 
#main-nav { padding-left: 11px; } 
/*/ 
#main-nav { padding-left: 11px; overflow: hidden; } 
/* End Hack */

#main-nav dt { float: left; }

#main-nav dt a {
	display: block;
	height: 0px !important;
	height /**/:50px; /* IE 5/Win hack */ 
	padding: 50px 0 0 0;
	overflow: hidden;
	background-repeat: no-repeat;
}

#main-nav dt a:hover {
	background-position: 0 -50px;
}

#main-nav dt#about,
#main-nav dt#about a { width: 71px; background-image: url(../images/nav/about.gif); }

#main-nav dt#services,
#main-nav dt#services a { width: 84px; background-image: url(../images/nav/services.gif); }

#main-nav dt#portfolio,
#main-nav dt#portfolio a { width: 95px; background-image: url(../images/nav/portfolio.gif); }

#main-nav dt#contact,
#main-nav dt#contact a { width: 106px; background-image: url(../images/nav/contact.gif); }

body.about dt#about,
body.about dt#about a,
body.about dt#about a:hover,
body.services dt#services,
body.services dt#services a,
body.services dt#services a:hover,
body.portfolio dt#portfolio,
body.portfolio dt#portfolio a,
body.portfolio dt#portfolio a:hover,
body.contact dt#contact,
body.contact dt#contact a
body.contact dt#contact a:hover  {
	background-position: 0 -100px;
}


	
body.about #header {
	height: 150px;
	background: #db6d16
		    url(../images/headers/about.jpg);
}


#sidebar-a {
	width: 280px;
	float:right;
	line-height: 18px;
	}
	
#sidebar-a .padding {
	padding: 25px;
	}
	
#content {
	margin-right: 280px;
	line-height: 18px;
	}
	
#content .padding {
	padding: 25px;
	}
	
#content h2 {
	margin: 0;
	padding: 0;
	padding-bottom: 15px;
	}

#content p {
	margin: 0;
	padding: 0;
	padding-bottom: 15px;
	}
	
#footer {
	height: 66px;
	clear:both;
	font-family: Tahoma, Arial, Helvetica, Sans-serif;
	font-size: 10px;
	color: #c9c9c9;
	border-top: 1px solid #efefef;
	padding: 13px 25px;
	line-height: 18px;
	}
	
#footer a {
	color: #c9c9c9;
	text-decoration: none;
	}
	
#footer a:hover {
	color: #db6d16;
	}

#footer #altnav {
	width: 350px;
	float: right;
	text-align: right;
	padding-top: 13px;
	}
#footer #copyright {
	padding-top: 13px;
}
und der HTML-Code
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>CompanyName - PageName</title>
<meta http-equiv="Content-Language" content="en-us" />

<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />

<meta name="description" content="Description" />
<meta name="keywords" content="Keywords" />

<meta name="author" content="Enlighten Designs" />

<style type="text/css" media="all">@import "css/master.css";</style>
</head>

<body class="about">
<div id="page-container"> 
	<div id="main-nav">
    	<dl class="hidden">
			<dt id="about"><a href="#">About</a></dt>
			<dt id="services"><a href="#">Services</a></dt>
			<dt id="portfolio"><a href="#">Portfolio</a></dt>
			<dt id="contact"><a href="#">Contact Us</a></dt>
		</dl>
    </div>
	<div id="header">
    	<h1><img src="images/general/logo_enlighten.gif" 
		width="236" height="36" alt="Enlighten Designs" border="0" /></h1>
    </div>
	<div id="sidebar-a">
    	<div class="padding">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus. 
        Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus. 
		Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus 
		euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio. 
		Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget, 
		purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.</div>
    </div>
	<div id="content">
    <div class="padding">
    	<h2><img src="images/headings/about.gif" width="54" height="14" alt="About" /></h2>
			<p><strong>Enlighten Designs</strong> is an Internet solutions provider that specialises in 
	   		front and back end development. To view some of the web sites we have created view our 
	   		portfolio.</p>
			<p>We are currently undergoing a 'face lift', so if you have any questions or would 
	   		like more information about the services we provide please feel free to contact us.</p>
	
		<h2><img src="images/headings/contact.gif" width="98" height="14" alt="Contact Us" /></h2>
		<p>Phone:   (07) 853 6060<br />
		Fax:     (07) 853 6060<br />
		Email:   <a href="mailto:info@enlighten.co.nz">info@enlighten.co.nz</a><br />
		P.O Box: 14159, Hamilton, New Zealand</p>
		<p><a href="#">More contact information...</a></p></div>
    </div>
	<div id="footer">
    	<div id="altnav">
			<a href="#">About</a> - 
			<a href="#">Services</a> - 
			<a href="#">Portfolio</a> - 
			<a href="#">Contact Us</a> - 
			<a href="#">Terms of Trade</a>
	</div>
    <div id="copyright">
    Copyright &copy; Enlighten Designs<br />
	Powered by <a href="http://www.enlightenhosting.com/">Enlighten Hosting</a> and
	<a href="http://www.vadmin.co.nz/">Vadmin 3.0 CMS</a>
    </div>
    </div>

</div>

</body>
</html>

ich weiß nicht woran es liegt

Alternative, falls jemand das Tutorial durchgemacht hat, könnte mir auch bei bedarf die fertigen Dateien schicken, dann kann ichs vergleichen.

vielleicht kann mir ja wer helfen.


grüße img
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 15.05.2008, 19:01
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 09.07.2004
Beiträge: 1.103
cgdesign befindet sich auf einem aufstrebenden Ast
Standard

Da steht was von:
Zitat:
Lets start out easy. Remove the red background in the css, and show the navigation by removing the "hidden" class on the definition list.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 15.05.2008, 19:07
img img ist offline
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 15.05.2008
Beiträge: 258
img befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von cgdesign Beitrag anzeigen
Da steht was von:
*autsch* das war maln guter Start hier

dank dir.
Mit Zitat antworten
  #4 (permalink)  
Alt 15.05.2008, 19:14
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 09.07.2004
Beiträge: 1.103
cgdesign befindet sich auf einem aufstrebenden Ast
Standard

Dir fehlt übrigens noch ein Komma im CSS:

Code:
body.about dt#about,
body.about dt#about a,
body.about dt#about a:hover,
body.services dt#services,
body.services dt#services a,
body.services dt#services a:hover,
body.portfolio dt#portfolio,
body.portfolio dt#portfolio a,
body.portfolio dt#portfolio a:hover,
body.contact dt#contact,
body.contact dt#contact a,
body.contact dt#contact a:hover  {
	background-position: 0 -100px;
}
Mit Zitat antworten
  #5 (permalink)  
Alt 15.05.2008, 19:20
img img ist offline
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 15.05.2008
Beiträge: 258
img befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von cgdesign Beitrag anzeigen
Dir fehlt übrigens noch ein Komma im CSS:

Code:
body.about dt#about,
body.about dt#about a,
body.about dt#about a:hover,
body.services dt#services,
body.services dt#services a,
body.services dt#services a:hover,
body.portfolio dt#portfolio,
body.portfolio dt#portfolio a,
body.portfolio dt#portfolio a:hover,
body.contact dt#contact,
body.contact dt#contact a,
body.contact dt#contact a:hover  {
	background-position: 0 -100px;
}
super dank dir, warum hatte dies keine Auswirkung?
Mit Zitat antworten
  #6 (permalink)  
Alt 15.05.2008, 19:21
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 09.07.2004
Beiträge: 1.103
cgdesign befindet sich auf einem aufstrebenden Ast
Standard

Keine Ahnung, ich habe es nicht getestet gehabt Und vorher hast du ja das ganze Menü noch nicht mal gesehen
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

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
Redesign für Steiner Cycling Team pkipper Site- und Layoutcheck 11 09.02.2011 13:25
Banner neben CSS Layout platzieren? delaspuke CSS 19 29.12.2010 23:08
Css 3 Seiten Layout will net so :) nova_rs CSS 1 30.03.2010 16:54
CSS Layout Komplex yanu CSS 0 01.04.2009 21:27
CSS layout was 'mit geht' Iceman* CSS 2 30.12.2005 09:36


Alle Zeitangaben in WEZ +2. Es ist jetzt 21:44 Uhr.