:: Buchempfehlung ::

Mike3845 · #1 31.12.2009, 01:58:20

Hi,
ich baue derzeit eine Homepage für einen Faschingsverein auf. Leider ist dort ausschließlich HTML und Java-Script erlaubt. Die Seite ist auch schon recht gut, nur als ich sie dann im Internet Explorer geöffnet habe, hab ich einen Schreck bekommen. Es ist alles verschoben und nichts ist da wo es hin soll.
Daraufhin hab ich einige Foren durchsucht und dort stand das es evt. sein kann das man ein /div oder etwas ähnliches vergessen hat. Ich hab mir mein Script nochmal angeschaut und hab keine Fehler entdeckt.
Könnt ihr mir helfen?

http://keltereckesel.de/bilder/index.html

**vt1816** · #2 31.12.2009, 08:57:19

Er(n)ste Hinweise kannst Du hier erhalten. Dies sollte Dich weiter bringen...

cortex · #3 31.12.2009, 11:02:37

Zitat:

Zitat von Mike3845

Leider ist dort ausschließlich HTML und Java-Script erlaubt.

was fehlt dir denn noch zu deinem glück?

cx

Mike3845 · #4 31.12.2009, 14:03:38

So hab alle Fehler behoben. In der index.html und der style.css
Allerdings bekomme ich den weißen hintergrund nicht mehr richtig hin.
Meine index.html:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Keltereckesel</title>
<link href="style.css" rel="stylesheet" type="text/css" >
<script type="text/javascript">
<!--
    if (document.images)
    {
        image1 = new Image(131, 33);
        image1.src = "images/top_nav_small_tab_hover.gif";
	  }
//-->
</script>    
</head>

<body>

<!-- START TOP HEADER -->
<img src="images/header.jpg" alt="header" width="851" height="50" >
<!-- END TOP HEADER -->



<!-- START SLOGAN HEADER -->
<img src="images/slogan_box.gif" alt="slogan box" width="851" height="110" >
<!-- END SLOGAN HEADER -->

<!-- START STATS BAR -->
<img src="images/stats_bar.gif" alt="bar" width="851" height="39" >
<!-- END STATS BAR -->

<div id="container">

<!-- START LEFT COLUMNS -->
<div id="left">

<h2>Navigation</h2>

<!-- START MAIN NAVIGATION -->
<ul id="leftnav">
<li><a href="index.html">Home</a></li>
<li><a href="termine.html">Termine</a></li>
<li><a href="historie.html">Historie</a></li>
<li><a href="#">Aktive</a></li>
<li><a href="bilder.html">Bildergalerie</a></li>
<li><a href="sponsoren.html">Sponsoren</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
<li><a href="gb.html">Gästebuch</a></li>
<li><a href="links.html">Links</a></li>
<li><a href="impressum.html">Impressum</a></li>
</ul>
<!-- END MAIN NAVIGATION -->

<h2>Aktuelles</h2>

<div id="news">

<img src="images/news_icon.gif" alt="news" ><strong>06.01.2010</strong> - Wilferdingen<br >
Dreikönigstreffen
<img src="images/news_seperator.gif" alt="sep" >

<img src="images/news_icon.gif" alt="news" ><strong>16.01.2010</strong> - Rastatt<br >
Narrenbaumstellen
<img src="images/news_seperator.gif" alt="sep" >

<img src="images/news_icon.gif" alt="news" ><strong>30.01.2010</strong> - Wilferdingen<br >
Zunftball</div>

</div>

<!-- END LEFT COLUMN -->

<!-- START RIGHT COLUMN -->

<div id="right">

<!-- START SLOGAN 2 HEADER -->

<h2><font size="3" color="green"><b>Herzlich Willkommen auf der Homepage der Keltereckesel Wilferdingen</b></font></h2>

<div id="maincontent">

<!-- START MAIN CONTENT HERE -->

<h3>Home</h3>
<p>
  <table>
    <tr>
      <td><img src="images/pics/esel1.gif" width="80" alt="esel1.gif"></td>
      <td align="center">
        <font size="5" color="blue"><i>Allerorten hell und klar;<br>
        wir freuen uns aufs neue Narrenjahr.<br>
        Die Esel gehen jetzt wieder auf die Gass;<br>
        und bringen allen Menschen Spaß!<br>
        </i></font></td>
      <td><img src="images/pics/esel2.gif" width="80" alt="esel2.gif"></td>
    </tr>
  </table>
  <table cellspacing="6">
    <tr>
      <td><img src="images/pics/desc2.jpg" width="300" alt="bild1"></td>
      <td><br><br><br><br><br><br><img src="images/pics/desc3.jpg" width="300" alt="bild2"></td>
    </tr>
    <tr>
      <td colspan="2" align="center"><img src="images/pics/desc1.jpg" alt="bild3"></td>
    </tr>
  </table>  



<!--END MAIN CONTENT HERE -->

</div>

</div>

<!-- END RIGHT COLUMN -->

</div>

</body>
</html>

Und die style.css:

Code:

html {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	background-color: #282828;
	color: #383838;
	text-align: center;
}

body {
	margin: 20px auto 0 auto;
	text-align: left;
	width: 1000px;
	background-color: #282828;
	color: #383838;
}

html > body {
  background-color: #282828;
	background-image: url(images/bg.gif);
  background-position: center;
  background-repeat: repeat-y;
}

div#container {
	background-color: #282828;
  background-image: url(images/bg.gif);
  background-position: center;
  background-repeat: repeat-y;
	width: 703px;
}

ul#topnav {
	margin: 0;
	padding: 0;
	height: 33px;
	background: #282828 url(images/top_nav_right_bg.gif) no-repeat bottom right;
}

ul#topnav li {
	list-style-type: none;
	float: left;
	display: block;
	margin: 0;
	padding: 0;
}

ul#topnav li.bigtab {
	background: #282828 url(images/top_nav_large_tab.gif) no-repeat;
	height: 24px;
	width: 131px;
	padding: 9px 0 0 0;
	text-align: center;
	font-size: 14px;
	font-weight: bold;
	color: #f15f10;
}

ul#topnav li a.smalltab:link, ul#topnav li a.smalltab:visited {
	background: #282828 url(images/top_nav_small_tab.gif) no-repeat;
	height: 23px;
	width: 131px;
	padding: 10px 0 0 0;
	text-align: center;
	font-size: 14px;
	color: #515151;
	text-decoration: none;
	display: block;
}

ul#topnav li a.smalltab:hover, ul#topnav li a.smalltab:active {
	background: #282828 url(images/top_nav_small_tab_hover.gif) no-repeat;
	color: inherit;
	height: 23px;
	width: 131px;
	padding: 10px 0 0 0;
	text-align: center;
	font-size: 14px;
	display: block;
}

ul#statsbar {
	background: #282828 url(images/stats_bar.gif) no-repeat;
	height: 39px;
	width: 703px;
	margin: -3px 0 0 0;
	padding: 0;
	color: #fff;
}

body > ul#statsbar {
	margin: 0;
}

ul#statsbar li {
	list-style-type: none;
	float: left;
	display: block;
	margin: 0;
	padding: 11px 0 0 0;
}

ul#statsbar li#comments {
	padding-left: 35px;
}

#statsbar li#hits {
	padding-left: 45px;
}

#statsbar li#online {
	padding-left: 45px;
}

div#left  {
	width: 218px;
	float: left;
	background-color: #fff;
	color: inherit;
}

div#left h2 {
	font-size: 12px;
	font-weight: normal;
	background-color: inherit;
	color: #fff;
	margin: 0;
	padding: 12px 0 0 15px;
	background-image: url(images/left_content_header.gif);
	height: 25px;
	width: 203px;
}

ul#leftnav { 
	margin: 0;
	padding: 0;
}
	
ul#leftnav li {
	list-style-type: none;
	display: block;
	margin: 0;
	background-image: url(images/left_nav_link_bg.gif);
}

ul#leftnav li a:link, ul#leftnav li a:visited {
	background-color: inherit;
	color: #000;
	text-decoration: none;
	display: block; 
	height: 22px;
	padding: 6px 0 0 20px;
}

ul#leftnav li a:hover, ul#leftnav li a:active {
	background-image: url(images/left_nav_link_bg_hover.gif);
	display: block;
	height: 22px;
}

#news {
	margin: 0;
	padding: 10px;
}

div#right {
	width: 485px;
	float: right;
	background-color: #fff;
	color: inherit;
}

div#right h2 {
	font-size: 12px;
	font-weight: normal;
	color: #f9ffff;
	margin: -3px 0 0 0;
	background: #fff url(images/main_content_header.gif) no-repeat;
	height: 25px;
	width: 618px;
	padding: 12px 0 0 15px;
}

div#container > div#right h2 {
	margin: 0;
}

div#maincontent {
	width: 633px;
}
div#maincontent p {
	margin: 0;
	padding: 10px 10px 10px 5px;
}

a:link,a:visited {
	color: #fa6627;
	text-decoration: none;
}

a:hover, a:active {
	color: #383838;
}

h3 {
	margin: 5px 0px 0px 0px;
	padding: 5px 0px 5px 5px;
	width: 623px;
	background: #f0f0f0;
}

p#footer {
	clear: both;
	width: 701px;
	height: 26px;
	padding: 10px 0px 0px 0px;
	background: #383838;
	border: 1px solid #fff;
	border-top: 0;
	color: #fff;
	text-align: center;
	margin: 0;
}

Wenn ich bei div#right die breite erhöhe ist zwar der hintergrund auf der rechten Seite breiter, dafür rutscht der teil aber auch komplett nach unten, unter die navigation. Was mach ich denn falsch?

**vt1816** · #5 31.12.2009, 15:24:15

Kontrolliere mal die Breite (width) der einzelnen Bereiche - möglicherweise ist etwas zu breit und er bricht deshalb um...

Mike3845 · #6 01.01.2010, 14:23:28

Ja sobald ich die breite bei div#right um 1 erhöhe bricht er um. Aber wieso? Das muss hat doch noch platz um breiter zu werden...

Mike3845 · #7 01.01.2010, 15:06:02

Ok habs hinbekommen. Danke für die hilfe.
Frohes neues Jahr!!!

**vt1816** · #8 02.01.2010, 11:34:53

Zitat:

Zitat von Mike3845

Ok habs hinbekommen.

Sieht aber immer noch eine wenig "verschoben" aus. Sollten die Bilder unter das Menü (auf der linken Seite)?

Zitat:

Zitat von Mike3845

[...]
Danke für die hilfe.

Danke - jederzeit wieder.

:: Buchempfehlung ::

:: Anbieterverzeichnis ::

Globale Branchen

Informieren Sie sich über ausgewählte Unternehmen im Anbieterverzeichnis von SELFPHP

:: Newsletter ::

Abonnieren Sie hier den kostenlosen SELFPHP Newsletter!