Cross Browser Implementierung

H&K · 16 April 2011

Hallo Community...

ich bin schon seit einer Weile auf der Suche nach einem Forum wie diesen und ich hoffe, dass ich hier Hilfe finde. Den Einstieg in das WebDesign suche ich noch. Meine Coding-Skills sind daher noch nicht so weit, dass ich eine schicke Site auf allen Browsern anwenden kann. Diese hier, finde ich, sieht auf FireFox schon recht gut aus. Ruft man sie jedoch im Internet Explorer auf, kommt es zum HTML-SuperGAU - die Site sieht nach gar nichts aus.

Wenn jemand einen signifikanten Tipp hat, würde ich mich sehr freuen. Sonst versuche ich es einfach weiter, was bisher nicht sehr erfolgreich war.

Vielen Dank schon einmal

H&K

HTML:

HTML:

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Henke &amp; König</title>
<script src="includes/jquery-1.4.2.js" type="text/javascript"></script>
<script src="jQuery/js/jquery.jsocial.js" type="text/javascript"></script>
<link href="jQuery/css/style.css" rel="stylesheet" type="text/css">
<script type="text/xml">
<!--
<oa:widgets>
  <oa:widget wid="2149023" binding="#social" />
</oa:widgets>
-->
</script>

</head>

<body> 
     <header>  
         <h1><img src="media/penrose_neu.png" width="869" height="126"></h1>
</header>  
    
    
     <nav>
<center>
         <!-- Navigation -->  
     <ul>  
         <li><a href="#">Home</a></li>  
         <li><a href="#">Portfolio</a></li>  
         <li><a href="#">Kontakt</a></li>  
         <li><a href="#">Impressum</a></li>   
     </ul>  
         
         
        </center>
     </nav>  
    
    
    
     <section id="content">  
         <!-- Main content area -->  
         <h1>Commitment</h1>
         <p>Henke & König ist ein kleines Designhaus aus der Mitte der Hauptstadt. Unser erklärtes Ziel ist es, von der Massenabfertigung vieler Designer Abstand zu nehmen und uns gezielt um ihr Projekt zu kümmern. Henke & König begleitet ihr Projekt von der Erfindung einer <strong>Corporate Identity</strong> über das <strong>Logo</strong> und der <strong>Website</strong> bis hin zur Erstellung von <strong>Print-</strong> und <strong>Digitalmedien</strong>. Denn Ihr Projekt ist auch unser Projekt.</p>
         <p>Diese Website ist optimiert von den Mozilla Firefox!</p>
         <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
</section>  
     
     
     
     
     
     
<footer>  
<table width="990" border="0" align="center">
  <tr>
    <td>
        <ul>
            <li>
              <h4>Sitemap</h4>
            </li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Kontakt</a></li>
            <li><a href="#">Impressum</a></li>
            <li><a href="#">English</a></li>
        </ul>
    
    
    
    </td>
    <td>
        <ul>
            <li>
              <h4>FAQ</h4>
            </li>
            <li><a href="#">Corporate Identity</a></li>
            <li><a href="#">Web Design</a></li>
            <li><a href="#">Web Development</a></li>
            <li><a href="#">Logo</a></li>
            <li><a href="#">Media</a></li>
        </ul>
    
 
    </td>
    <td><div class="social"></div>
      <script type="text/javascript">
// BeginOAWidget_Instance_2149023: #social
    
    $('.social').jsocial({
            twitter        :  '',
            facebook    :  'www.facebook.com/pages/Henke-K%C3%B6nig/147208331987019',
            flickr        :  '',
            delicious    :  '',
            linked        :  '',
            youtube        :  '',
            feed        :  'myID',
            friendfeed    :  '',
            digg        :  '',
            lastfm        :  '',
            center        : false,    
            inline        : true,
            small        : false,
            newPage        : false
        });
    

// EndOAWidget_Instance_2149023
      </script></td>
  </tr>
</table>
</footer>  
</body>
</html>

CSS:

Code:

/* CSS Document */
header, footer, aside, nav {
    display: block;
}



body {
    margin-left: auto;
    margin-right: auto;
    width: 960px;
    font: Arial, Helvetica, sans-serif;
    background: url(../media/bg.gif);    

}

h1 {
    text-shadow: 1px 1px 1px #000;
    font-size: 30px;
}

h4 { 
    text-shadow: 1px 1px 1px #000;
    font-size: 20px;
}

p {
    font-size: 18px;
    text-align: justify;
    text-shadow: 1px 1px 1px #000;
}


/* NAVIGATION */

nav {
    position: absolute;
    left: 0;
    width: 100%;
    background: #003399;    
}
    

nav ul {
    margin: 0;
    width: 960px;
    list-style: none;
}


nav ul li {
    float: left;
}


nav ul li a {
    display: block;
    margin-right: 75px;
    width: 165px;
    font-size: 20px;
    line-height: 44px;
    text-align: center;
    text-decoration: none;
    color: #FFF;
    text-shadow: 1px 1px 1px #000;
}


nav ul li a:hover {
    color: #c6c6c6;
}



/* CONTENT */    


#content {
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 0;
    width: 960px;
    position: absolute;
    margin-top: 60px;
    border-left: solid #c3c3c3;
    border-right: solid #c3c3c3;
    color: #fff;
}


/* Footer */

footer {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    background: #003399;
    height: 210px;
    color: #FFF;
    clear: left;
}

footer tr td ul {
    list-style: none;
}

footer tr td ul li a {
    color: #fff;
    text-shadow: 1px 1px 1px #000;
}

footer tr td ul li a:rollover {
    text-decoration: underline;
}

Cross Browser Implementierung

H&K

Neues Mitglied

Neueste Beiträge