Problem mit Website (Dreamweaver)

Push-Nachrichten von MacTechNews.de

Würden Sie gerne aktuelle Nachrichten aus der Apple-Welt direkt über Push-Nachrichten erhalten?

Forum>Software>Problem mit Website (Dreamweaver)

dustz3330.09.0920:35

Hallo,

ich arbeite seit einiger Zeit an einem neuen Design für eine Website und habe folgendes Problem; ich schaffe es nicht, dass sich Elemente überlappen bzw, dass der Banner sich über die Menüleiste legt ohne das ein Spalt bleibt durch den man ungewollt den Hintergrund sieht. Das Problem liegt darin, dass die Such ja dafür sorgt, dass die Menüleiste nicht ganz flach ist. Grafik der Menüleiste Größer machen funktioniert leider nicht und ich finde nirgends ein falsches Margin . Ich benutze Dreamweaver.

Bild:

Würde Mich sehr über Antworten freuen!

PS: Das die Links in der Version unten teilweise nicht relativ sind weiß ich.

Mein CSS Sheet:

/*

body {
margin-top: -15px;
padding: 0;
background: #000000 url(hintergrund.jpg) no-repeat left top;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #8A8A8A;
}

h1, h2, h3 {
margin: 0;
text-transform: uppercase;
font-weight: normal;
color: #549900;
}

h1 { font-size: 44px; }

h2 { font-size: 18px; }

h3 { }

p, ul, ol {
margin-top: 0;
line-height: 240%;
text-align: justify;
}

ul, ol { }

blockquote { }

a { color: #F71476; }

a:hover { text-decoration: none; }

a img {
border: none;
}

img.left {
float: left;
margin: 7px 30px 0 0;
}

img.right {
float: right;
margin: 7px 0 0 30px;
}

hr { display: none; }

.list1 {
}

.list1 li {
float: left;
line-height: normal;
}

.list1 li img {
margin: 0 30px 30px 0;
}

.list1 li.alt img {
margin-right: 0;
}

#wrapper {
}

/* Header */

#header-wrapper {
}

#header {
width: 960px;
height: 45px;
margin: 0 auto;
background: url(Juz%20Page/Dustin%20Neue/images/img03.jpg) no-repeat left top;
}

/* Menu */

#menu {
float: left;
width: 650px;
height: 50px;
background: url(Juz%20Page/Dustin%20Neue/images/img02.jpg) no-repeat left top;
}

#menu ul {
margin: 0;
padding: 0px 0px 0px 5px;
list-style: none;
line-height: normal;
}

#menu li {
display: block;
float: left;
}

#menu a {
display: block;
float: left;
height: 32px;
margin-right: 3px;
padding: 18px 30px 0px 30px;
background: url(Juz%20Page/Dustin%20Neue/images/img07.gif) no-repeat left top;
text-decoration: none;
text-transform: capitalize;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000000;
}

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

#menu .current_page_item a {
height: 50px;
color: #000000;
}

#menu .first {
background: none;
}
/* Search */

#search {
float: right;
width: 310px;
height: 50px;
background: url(Juz%20Page/Dustin%20Neue/images/img03.jpg) no-repeat left top;
}

#search form {
float: right;
margin: 0;
padding: 14px 30px 0 0;
}

#search fieldset {
margin: 0;
padding: 0;
border: none;
}

#search input {
float: left;
font: 12px Georgia, "Times New Roman", Times, serif;
border: none;
}

#search-text {
width: 200px;
height: 18px;
padding: 3px 0 0 5px;
border: 1px solid #333333;
background: #ECF9E4;
color: #000000;
}

#search-submit {
height: 21px;
margin-left: 10px;
padding: 0px 5px;
background: #000000;
color: #FFFFFF;
}

/* Page TEXTFELD!!!!!!!!!!!!!!!!*/

#page {
width: 920px;
margin: 0 auto;
padding: 40px 20px 0px 20px;
background: #101010;
}

/** LOGO */

#logo {
width: 960px;
height: 120px;
margin: 0 auto;
}

#logo h1, #logo p {
margin: 0px;
line-height: normal;
text-align: center;
text-transform: lowercase;
font-weight: normal;
color: #FFFFFF;
}

#logo p {
text-transform: lowercase;
font-size: 13px;
color: #757575;
}

#logo h1 {
padding-top: 10px;
font-size: 48px;
}

#logo a {
text-decoration: none;
color: #757575;
}

#logo h1 a {
text-decoration: none;
color: #FFFFFF;
}

#banner {
padding-bottom: 20px;
}

/* Content */

#content {
float: left;
width: 580px;
}

/* Post */

.post {
background: url(Juz%20Page/Dustin%20Neue/images/img08.gif) repeat-x left bottom;
margin-bottom: 45px;
}

.post .title {
height: 30px;
color: #FFFFFF;
}

.post .title a {
text-decoration: none;
text-transform: capitalize;
font-size: 30px;
color: #FFFFFF;
}

.post .date {
}

.post .meta {
margin-left: 2px;
padding: 2px 30px 2px 16px;
background: url(Juz%20Page/Dustin%20Neue/images/img10.gif) no-repeat left 7px;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 10px;
color: #66665E;
}

.post .meta span {
display: block;
margin-top: -10px;
}

.post .meta a { }

.post .entry {
padding: 10px 0;
}

.post .links {
margin: 0 250px 0 0;
padding: 0 0 0 0px;
}

.post .links .comments {
}

.post .links .permalink {
padding-left: 17px;
}

/* Sidebar */

#sidebar {
float: right;
width: 300px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}

#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
}

#sidebar li {
margin-bottom: 30px;
padding: 0 0 10px 0px;
}

#sidebar li ul {
margin: 0px 14px;
}

#sidebar li li {
margin: 0;
padding: 12px 0px;
background: url(Juz%20Page/Dustin%20Neue/images/img05.gif) repeat-x left bottom;
}

#sidebar li li a {
padding: 0px 0px 0px 20px;
background: url(Juz%20Page/Dustin%20Neue/images/img06.gif) no-repeat left 2px;
font-weight: normal;
color: #B3B2B2;
}

#sidebar li li a:hover {
color: #FFFFFF;
}

#sidebar p {
margin: 0;
padding: 0px 14px;
}

#sidebar h2 {
height: 30px;
margin: 0 0 10px 0px;
padding: 6px 0 2px 14px;
background: url(Juz%20Page/Dustin%20Neue/images/img04.jpg) no-repeat left top;
text-transform: capitalize;
font-size: 18px;
font-weight: normal;
color: #FFFFFF;
}

#sidebar p {
line-height: 200%;
}

#sidebar a {
text-align: left;
text-decoration: none;
font-weight: bold;
}

/* Calendar */

#calendar {
}

#calendar caption {
padding-bottom: 5px;
font-weight: bold;
}

#calendar table {
width: 100%;
border-collapse: collapse;
border-bottom: 1px solid #24130F;
border-left: 1px solid #24130F;
border-right: 1px solid #24130F;
}

#calendar thead th {
padding: 5px 0;
text-align: center;
border-top: 1px solid #24130F;
border-left: 1px solid #24130F;
background: #24130F;
}

#calendar tbody td {
padding: 5px 0;
text-align: center;
border-top: 1px solid #24130F;
border-left: 1px solid #24130F;
border-bottom: 1px solid #24130F;
}

#calendar tfoot td {
padding: 5px;
border-left: 1px solid #24130F;
border-bottom: 1px solid #24130F;
}

#calendar tfoot #next {
border-top: 1px solid #24130F;
text-align: right;
}

#calendar tfoot #prev {
border-top: 1px solid #24130F;
}

#calendar .pad {
border-bottom: 1px solid #24130F;
}

#calendar #today {
background: #24130F;
}

/* Footer */

#footer {
width: 920px;
height: 49px;
margin: 0 auto;
padding-top: 50px;
}

#footer-bgcontent {
margin: 0px;
padding: 0px;
height: 99px;
}

#footer p {
margin: 0;
text-align: center;
line-height: normal;
text-transform: uppercase;
font-size: 10px;
color: #FFFFFF;
}

#footer a {
color: #E5FFC4;
}

HTML der Seite

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<script language="JavaScript" src="http://js.stats.de/j/0000093334"></script>
<script language="JavaScript">
rapidstats(93334);
</script>
<style type="text/css">
<!--
.Stil9 {
color: #CC0066
}

</style>
<link href="test dustin.css" rel="stylesheet" type="text/css" />
<noscript>
<a href="http://www.stats.de" target="_blank">
<img src="http://srv1.stats.de/l/0000093334?js=0" border="0" alt="">
</a>
</noscript>

<link rel="shortcut icon" type="image/x-icon" href="Juz Page/Dustin Neue/images/favicon.ico"/>

<title>Home-Juz-Fechenheim</title>

<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="testdustin2.css" rel="stylesheet" type="text/css" media="screen" />
<style type="text/css">
<!--
.Stil7 {
font-size: 18px;
color: #0099FF;
}
.Stil8 {
font-size: 30px;
color: #0099FF;
}
.Stil15 {color: #990066}
.Stil16 {color: #0099FF}
.Stil18 {color: #009eef}
.Stil19 {color: #00FF00}
.Stil21 {color: #FFFF00}

</style>
</head>
<body>
<div id="wrapper">
<div align="center"><img src="banner.jpg" alt="Banner" width="960" height="145" hspace="-10" vspace="-10" /></div>
<hr />
<!-- end #logo
<div id="header">
<div id="menu">
<ul>
<li><a href="#" class="first">Home</a></li>
<li class="current_page_item"><a href="Juz Page/Dustin Neue/connect.html">cafe</a></li>
<li><a href="Juz Page/Dustin Neue/krabbelstube.html">Krabbelstube</a></li>
<li><a href="Juz Page/Dustin Neue/basteln.html">Basteln</a></li>
<li><a href="Juz Page/Dustin Neue/musik.html">Musik</a></li>
<li></li>
</ul>
</div>
<!-- end #menu
<div id="search">
<form method="get" action="">
<fieldset>
<input type="text" name="s" id="search-text" size="15" />
<input type="submit" id="search-submit" value="GO" />
</fieldset>
</form>
</div>
<!-- end #search
</div>
<!-- end #header
<!-- end #header-wrapper
<div id="page">
<div id="content">
<div id="banner"><img src="Juz Page/Dustin Neue/images/juz-schild.jpg" alt="" /></div>
<div class="post"> <a href="#" class="Stil8">Angebote</a>
<div class="entry">
<p>- Krabbelstube für 1 - 4- jährige <br />
- Internetcafé für Jugendliche<br />
- Girlstime - Aktionen für Mädchen<br />
- Übungsräume für Bands <br />
- Sportangebote <br />
- Spielplatz im Hof / Tischtennisplatte <br />
- Hausaufgabenhilfe <br />
- Ausflüge + Freizeitprojekte <br />
- Medienangebote <br />
- Unterricht in HTML und Websidegestaltung <br />
- Basteln für Kinder im Grundschulalter <br />
- Beratung und Hilfe bei persönlichen Problemen <br />
- Unterstützung bei Bewerbungsschreiben und <br />
-Ausbildungsplatzsuche <br />
-Computerkurse </p>
</div>
</div>
<div class="post">
<div class="entry"></div>
</div>
<div class="post"></div>
</div>
<!-- end #content
<div id="sidebar">
<ul>
<li>
<span class="Stil7">Info</span>
<p>Das Selbstverwaltete Jugendzentrum ist eine Institution, die bereits seit 1974 im Stadtteil aktiv ist.</p>
</li>
<li>
<span class="Stil7">Online Spiele</span>
<ul>
<li><a href="Juz Page/Dustin Neue/boxheadzw.html">Boxhead Zombie Wars</a> <span class="Stil15">- Baller</span></li>
<li><a href="Juz Page/Dustin Neue/boxhead2spieler.html"><span class="Stil5">Boxhead 2 Spieler Version</span></a> <span class="Stil15">- Baller</span></li>
<li><a href="Juz Page/Dustin Neue/thingthingarena.html">ThingThing Arena 3</a> <span class="Stil15">- Baller</span></li>
<li><a href="Juz Page/Dustin Neue/shadez.html"><span class="Stil5">Shadez</span></a> <span class="Stil15">- Strategie&Baller</span></li>
<li><a href="Juz Page/Dustin Neue/stickman4.html"><span class="Stil5">Stickman 4</span></a> <span class="Stil15">- Baller</span></li>
<li><a href="Juz Page/Dustin Neue/dirtbike.html"><span class="Stil5">Dirtbike</span></a><span class="Stil16"> - Action</span></li>
<li class="Stil5"><a href="Juz Page/Dustin Neue/tu-95.html">TU-95</a> <span class="Stil18">- Action</span></li>
<li><a href="Juz Page/Dustin Neue/planetracer.html">Planet Racer</a><span class="Stil19"> - Rennen</span></li>
<li><a href="Juz Page/Dustin Neue/18wheeler.html">18 Wheeler</a><span class="Stil21"> - Geschick</span></li>
</ul>
</li>
</ul>
</div>
<!-- end #sidebar
<div style="clear: both;"> </div>
</div>
<!-- end #page
<div id="footer-bgcontent">
<div id="footer">
<p><a href="Juz Page/Dustin Neue/impressum.html" class="Stil9">Impressum</a></p>
</div>
</div>
<!-- end #footer
</div>
</body>
</html>

Bild:

Sorry wegen dem Repost, aber ich kann das in der falschen Kategorie leider nicht löschen...würde das bitte ein Mod übernehmen? Danke!

„The box said Windows Vista or higher. So I bought a Mac.“

Kommentare

Stranger30.09.0921:46

*sick* Dein MarkUp ist unter aller sau...

was macht denn "<noscript>" im head?

raus damit und wenn du schon externe stylesheets nutzt, dann bitte pack auch alles darein und räum deinen headbereich mal auf
in deinen stylesheets solltest du auch mal ordentlich arbeiten, mal schreibst du px hinter einen margin wert, mal nicht und das bei einem margin... werte haben eigentlich immer einen einheit zB. margin:0px 0px 0px 0px; und nicht sowas wie margin:0 0 0 0; du bezahlst ja auch mit 5 euro und nicht mit 5

und benutze mal den validator für deine MarkUp

deinen fehler konnte ich leider auch noch nicht direkt finden, aber ich guck nochmal rein

Stranger30.09.0921:57

also...

gib den div mal ne höhe von 145px per css und deine lücke ist weg, aber du solltest deine ganzen div verschachtelungen alle nochmal überarbeiten sowies das dazugehörige css, weil das alles nicht so schön ist
du solltest auch align="center" vermeiden und das alles per css positionieren

sram30.09.0921:58

Hilfreicher als ein Bild wär ein Link zur Seite.

„Auf Weisung eines Administrators musste diese Signatur entfernt werden“

dustz3330.09.0922:47

stranger: das verzerrt aber nur das Bild wenn ich die height verändere, überlappen tut sich da nix danke trotzdem!

sram: ist ja nur ein Entwurf und deshalb noch nicht online solang ich diese Problem nicht los bin

„The box said Windows Vista or higher. So I bought a Mac.“

hausfreund30.09.0923:11

Das verstehe ich nicht in deinem css: 2x ?

p, ul, ol {
margin-top: 0;
line-height: 240%;
text-align: justify;
}

ul, ol { }

Erst wird p, ul und ol angegeben und dann noch einmal ul und ol mit null?

Ich würde auch die Kommas weg lassen und seperieren:

p {
margin-top: 0px;
line-height: 240%;
text-align: justify;
}
ul {
margin-top: 0px;
line-height: 240%;
text-align: justify;
}
ol {
margin-top: 0px;
line-height: 240%;
text-align: justify;
}

hausfreund30.09.0923:14

mann, da steigt ja niemand durch!

sierkb30.09.0923:16

dustz33:

Produziere erstmal validen HTML-Code und validen CSS-Code. Und dann kann man evtl. Problemstellen anylysieren. Vorher hat das keinen Sinn, sich überhaupt mit deinem Problem näher zu beschäftigen, denn Dein Problem kann durchaus in engem oder gar ursächlichem Zusammenhang mit fehlerhaftem und invalidem HTML- und CSS-Code stehen bzw. Seiteneffekte durch fehlerhaften Code können nicht ausgeschlossen werden. Wenn das Problem trotz sauberen, validen HTML- und CSS-Codes besteht, dann erst werde zumindest ich mich bemühen, mich näher damit zu beschäftigen. Vorher sehe ich das als weitgehend sinnfrei an: an zuvielen Stellen, die den Browser irgendwas darstellen lassen, nur nicht das, was Du erwartest, hätte ich derzeit (so, wie sich mir der Code bisher darstellt) etwas auszusetzen.

Hilfsmittel u.a.:
W3C Markup Validation Service
W3C CSS Validation Service:
W3C Unicorn (Kombination mehrerer Sevices des W3C unter einem Dach, derzeit noch in Entwicklung; wird evtl. irgendwann mal die anderen Validation Services des W3C ablösen.)
Oder z.B. auch als Stand alone application für den Mac: .

Helferlein vorher auf dem Weg dorthin:
HTML Tidy bzw. z.B. online unter oder als Browser-Plugin für Firefox oder Safari .

Stranger01.10.0900:32

kannst du mir bitte mal verraten wie sich dein bild verzerren kann, wenn es 145 pixel hoch ist und du das div auf 145px setzten sollst?!
achja und warum setzt du das margin-top von body auf -15 ???

hehe hab eigentlich nur darauf gewartet, dass sierkb was dazu schreibt

dustz3301.10.0919:17

Hab das Problem mittlerweile gefunden. Einfach das Bild anklicken und "am text ausrichten" auswählen, dann gehts. Wenn ich z.B. das HTML Tidy benutze kommt es zu Fehldarstellungen!

„The box said Windows Vista or higher. So I bought a Mac.“

Stranger01.10.0919:30

das löst aber bei weitem deine ganzen anderen probleme nicht und was denkste warum das zu einer fehlerhaften darstellung kommt? bestimmt nicht wegen HTML Tidy... whatever

Stefan S.01.10.0919:37

Klingt so als wäre Dream Weaver der Übeltäter...

Stranger01.10.0920:34

ich denke eher das sein "überragendes" MarkUp schuld ist

Stefan S.01.10.0921:48

Macht das nicht Dream Weaver?

Mortiis01.10.0921:48

Stefan S.

Klingt so als wäre Dream Weaver der Übeltäter...

Ich persönlich halte auch nicht sehr viel von Dreamweaver und Konsorten (schreiben mir zu viel Müll rein den kein Mensch braucht) und bin mittlerweile auf Taco HTML Edit umgestiegen und sämtliche Seiten werden auch so dargestellt wie sie es sollen, mit CSS Edit oder Simple CSS runde ich die Sache ab und alles kostet ein Bruchteil, was Adobe für sein Zeug verlangt, und man kann die Sache auch nachvollziehen.

Mortiis

„...nichts ist umsonst, selbst den Tod bezahlt man mit dem Leben!“

sram02.10.0900:55

Dem kann ich nur zustimmen.

„Auf Weisung eines Administrators musste diese Signatur entfernt werden“

Stranger02.10.0908:33

ich nutze dreamweaver einfach nur als code editor und das wars und dafür finde ich dreamweaver völlig ausreichend.
klar gibts noch viele andere die viel besser sind zB komodo edit, aber der mensch ist nunmal ein gewohnheitstier

Problem mit Website (Dreamweaver)

Kommentare

Kommentieren

Diese Diskussion ist bereits mehr als 3 Monate alt und kann daher nicht mehr kommentiert werden.