zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Navigations-Leiste wird nicht richtig angezeig.

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 05.02.2014, 16:14
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.02.2014
Beiträge: 8
vaporizzle befindet sich auf einem aufstrebenden Ast
Standard Navigations-Leiste wird nicht richtig angezeig.

Hallo!

Erstmal ein dickes Hallo in die Runde. Ich bin noch etwas frisch was CSS angeht, und möchte meinen Kenntnisstand (eventuell auch mit eurer Hilfe ) etwas auffrischen!

Ich habe folgendes Problem:

Ich kriege es nicht hin, dass mir meine Navigationsleiste angezeigt wird, so wie ich es will. Sie ist weder ein ordentlicher Balken, noch ist Sie an dem Fleck wo sie sein soll.

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tasty Testseite</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="container">

	<div id="header">
    <img src="images/Logo.png" alt="logo" />
    
    <br />
    
    <ul id="social">
    <li><a href="http://twitter.com" target="_blank"> <img src="images/Twitter.png"/> </a></li>
     <li><a href="http://facebook.com" target="_blank"> <img src="images/facebook.png"/> </a></li>
     
     </ul> 
     
     <ul id="nav">
      <li><a href="index.html" target="_blank">Home</a></li> <span> | </span>
      <li><a href="about.html" target="_blank"> About </a></li> <span> | </span>
      <li><a href="services.html" target="_blank"> Services  </a></li> <span> | </span>
      <li><a href="portfolio.html" target="_blank"> Portfolio </a></li> <span> | </span>
      <li><a href="contact.html" target="_blank"> Contact </a></li> <span> | </span>
   
     </ul>
     
     </div><!--end header-->
     
     <div id="featured">
     	<img src="images/Banner.png" alt="banner" class="featuredImage"/>
        <img src="images/Dropshadow.png" alt="dropshadow" class="dropShadow"/>
       
     
     </div> <!--end featured-->
     
     <div id="main">
     <div id="content">
     <h1>Welcome</h1><hr>
     <h3> Welcome to my first CSS Website, designed with Photoshop! </h3>
     </div> <!-- content-->
     
     <div id="col1">
     	<h2> Who we are </h2>
        <h2>
        <p> Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. 			Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text.  </p>
        </div> <!-- col1-->
        
        <div id="col2">
     	<h2> What we do </h2>
        <h2>
        <p> Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text.  </p>
        </div> <!-- col2-->
        
         <div id="col3">
     	<h2> Why Chose us </h2>
        <h2>
        <p> Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text.  </p>
        </div> <!-- col3-->
     
     </div> <!-- end main -->
     
     <div id="footer">
     <span> <p> Copyright 2014 Roy </p> <br>
     <ul id="nav">
      <li><a href="contact.html" target="_blank"> Contact  </a></li> <span> | </span>
     <li><a href="advertice.html" target="_blank"> Advertose</a></li> <span> | </span>
       <li><a href="sitemap.html" target="_blank"> Sitemap</a></li> <span> | </span>
     <li><a href="privacy.html" target="_blank"> Privacy </a></li> <span> | </span>
       <li><a href="#top" target="_blank">  Top </a></li> <span> | </span>
       
       </ul>
     
     
     </div> <!--end footer-->
     
     
    </div><!--container-->
   




</body>
</html>
So sieht der HTML Code aus! Mein dazugehöriger CSS Code sieht so aus:

Code:
@charset "utf-8";
/* CSS Document */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

a {
	text-decoration: none;
	color: black;
}

a.hover {
	text-decoration: underline;
}

h1,h2,h3,h4,h5 {
	font-family: Arial, Helvetica, sans-serif;
	font-weight:normal;
	text-transform: uppercase;
	line-height: 100%;
	margin-top: 0;
	
}

h1 {
	font-size: 20px;
	font-color: #000;
}

h2 {
	font-size: 16px;
	font-color: #000;
	
}

h3 {
	font-size: 12px;
	font-color: #000;

}

/*Main CSS*/

html {
background-color: #1e3f64;
}

#container {
width: 980px;
border: 1px solid #696969;
background: white;
margin: 2em auto;
}

#header {
overflow: hidden;
height: 100%;
}

#header img {
float: left;
margin-right: 10px;
margin-top: 20px;
margin-left: 10px;
}

#header ul#social{
position: relative;
margin-left: 50px;
margin-top: 20px;
}

#nav {
position: relative;
background-color: #969696;
height: 30px;
width: 960px;
margin-left: 0px;
padding-top: 10px;
padding-bottom: 5px;


}

#nav span {
color: green;
}

#nav li a {
color: black;
}

#nav li a:hover {
text-decoration: none;
}

#featured {
overflow: hidden;
padding-right: 10px;
margin-top: 10px;
}

#featured img.featuredImage {
float: left;
margin-left: 10px;
border-top: 5px solid #969696;
}

#featured img.dropShadow {
float: left;
margin-left: 10px;
}

#main {
position: relative;
background-color: #ececec
height: 600px;
margin-top: 10px;
margin-left: 10px;
}

#main #content {
font-size: 18px;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
height: 400px;
}

#main p {
font-size: 12px;
line-height: 22px;
}

#main h1 {
padding-top: 10px;
}

#col1, #col2, #col3 {
float: left;
width: 275px;
margin-right: 3em;
}

col1 {
margin-left: 10px;
}

#col2 h2 {
float:left;
margin-left: 80px;
}

#col3 {
margin-right: 0;
margin-bottom: 20px;
}

#col3 h2 {
float: left;
margin-left: 125px;
}

#footer {
margin-top: 10px;
margin-left: 10px;
margin-right: 20px;
margin-bottom: 10px;
clear: both;
}

#footer li {
display: inline;
margin-left: 10px;
margin-right: 10px;
}

#footer span {
font-size: 24px;
margin-left: 0px;
}

footer span a {
color: #542121;
}

#footer span a.hover {
text-decoration: underline;
}
Kann ich das irgendwie besser erklären?
Ich hab jegliche div Container durch kontrolliert, aber so richtig schlauer werde ich nicht! Hier mal ein Bild vom Fehler, wenn ich die CSS Datei über das Firefox-Entwicklertool bearbeite:

Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 05.02.2014, 16:26
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 12.11.2010
Ort: Bad Langensalza
Beiträge: 733
gabischatz ist in Verruf geraten
Standard

Hi das was du suchst findest du im Buch
Little Boxes Teil 1 kostenlos online lesen - Little Boxes - Webseiten gestalten mit HTML und CSS (Peter Müller)
von Peter Müller.
Es gibt auch was für die Ohren,
http://xhtmlforum.de/41679-little-boxes.html#post308810
Und es immer besser wenn du uns deine Webseite-Adresse mitteilst.
Grüße
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 05.02.2014, 16:33
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.02.2014
Beiträge: 8
vaporizzle befindet sich auf einem aufstrebenden Ast
Standard

Hallo.

Vielen Dank für die Antwort. Vielen Dank für die Lektüre. Werde ich mir sicherlich zu Gemühte führen!

Es gibt noch keine Internetseite, die Seite ist nur auf meinem Rechner zu finden, deshalb ist ein Link schwer zu veröffentlichen!

Eventuell gibt es ja trotzdem eine Möglichkeit meinen Fehler zu finden? Ob ein kompletter Teil falsch ist, oder nur eine Winzigkeit?
Mit Zitat antworten
  #4 (permalink)  
Alt 05.02.2014, 16:43
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von vaporizzle Beitrag anzeigen
Vielen Dank für die Antwort. Vielen Dank für die Lektüre. Werde ich mir sicherlich zu Gemühte führen!
Lies das erst mal durch.

Danach fängst du noch mal von vorne an.
Zitat:
Es gibt noch keine Internetseite, die Seite ist nur auf meinem Rechner zu finden, deshalb ist ein Link schwer zu veröffentlichen!
Es gibt "free webspace" Anbieter, wo du kostenlos dein Seite zum testen hochladen kannst.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
  #5 (permalink)  
Alt 05.02.2014, 17:16
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.02.2014
Beiträge: 8
vaporizzle befindet sich auf einem aufstrebenden Ast
Standard

Hmmm. Prinzipiell nochmal danke, allerdings saß ich doch schon recht lange an dem Stylesheet und alles komplett neu machen wäre zwar eine Möglichkeit, aber eine Konkretisierung meines Fehlers erhalte ich dann ja auch höchstwahrscheinlich nicht.

Gesendet von meinem Nexus 4 mit Tapatalk
Mit Zitat antworten
  #6 (permalink)  
Alt 05.02.2014, 17:29
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Leider bist du noch nicht so weit.

Benutze mal den The W3C Markup Validation Service, dort findest du allein im HTML 26 Fehler.

Glaube mir es ist besser du fängst noch mal an und liest das, was gabischatz dir empfohlen hat.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
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
Navigations Mneü Inet Explorer wird nicht richtig Angezeigt. shround (X)HTML 9 03.02.2012 12:07
Formular wird im IE 8 nicht richtig angezeigt Basti82 (X)HTML 14 12.05.2011 16:55
Website Navigations Grafiken werden nicht richtig angezeigt jantro CSS 6 07.02.2011 21:41
DIV immer ganze Breite - normal?!?!? csski CSS 3 02.07.2008 13:20
IE zeigt falsch, FF richtig - change - FF zeigts falsch, IE richtig nick CSS 6 19.08.2006 03:02


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:12 Uhr.