Verschiedene kleine Probleme

onpoint · 04.02.2011

Hey

Ich bin gerade im Aufbau meiner neuen Webseite. Läuft soweit ziemlich gut..allerdings schleichen sich da kleine Konflikte ein..

Hier ist die Seite:

Bei "Dates" zeigt er mir im Eventkasten nicht direkt den Scrollbalken, sondern erst nachdem ich die Seite aktualisiere..kann mir nicht erklären woher das kommen soll..ich verwende jscrollpane...jedoch funktionieren die scrollbalken auf der Startseite jedoch sehr gut...

weiß jemand ne Lösung?

Zweiteres wäre bei "Booking" und "Contact" das Formular...wenn ich auf "Abschicken" gehe hätte ich gerne, dass er im selben Fenster bleibt und die Bestätigungsmeldung dort anzeigt...momentan öffnet er mir eine komplett neue weiße Seite mit der Bestätigung..

Freue mich über Hilfe!

Code für "Dates.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>ONPOINTMUSIC</title>
<link href="" rel="stylesheet" type="text/css" />
<!-- styles needed by jScrollPane -->
<link type="text/css" href="" rel="stylesheet" media="all" />

<!-- latest jQuery direct from google's CDN -->
<script type="text/javascript" src="">
</script>

<!-- the mousewheel plugin - optional to provide mousewheel support -->
<script type="text/javascript" src=""></script>
<!-- the jScrollPane script -->
<script type="text/javascript" src=""></script>

<script type="text/javascript">
$(function()
{
	$('.scroll-pane').jScrollPane();

});
	
</script>
</head>
<body>

<div id="header">
<object type="application/x-shockwave-flash" data="skins/emff_silk.swf" width="84" height="32" style="position:absolute;top:5px;left:9px;">
 <param name="movie" value="skins/emff_silk.swf">
 <param name="bgcolor" value="#000000">
 <param name="FlashVars" value="src=example.mp3">
</object>
<marquee scrollamount="2" scrolldelay="5" width="400" style="position:absolute;top:20px;left:110px">
<b>Der nächste Gig ist noch nicht bekannt. Sobald etwas bekannt wird, wird es sofort hier erscheinen</b>
</marquee>
<ul id="navi-top">
<li><a href="">Shop</a></li>
<li><a href="">Booking</a></li>
<li><a href="">B-Boyng</a></li>
<li><a href="">Links</a></li>
<li><a href="">Impressum</a></li>
<li class="noBorder"><a href="">Contact</a></li>
</ul>


<ul id="navi">
<li>
<a href="" target="_blank">Myspace</a>
</li>
<li>
<a href="" target="_blank">Facebook</a>
</li>
<li>
<a href="" target="_blank">Twitter</a>
</li>
<li class="noBorder">
<a href="" target="_blank">Youtube</a>
</li>
</ul>
<p style="position:absolute;top:245px;left:71px;color:#000;letter-spacing:2px;font-size:16px;text-transform:uppercase;">

</p>


<div class="button"></div>
<div class="button" style="left:171px;"></div>
<div class="button" style="left:331px;"></div>
<div class="button" style="left:491px;"></div>
<div class="button" style="left:651px;"></div>
<div class="button" style="left:811px;"></div>


<ul id="navi-haupt">
<li style="padding-left:53px;"><a href="">Home</a></li>
<li style="padding-left:113px;"><a href="">About</a></li>
<li style="padding-left:108px;"><a href="">Music</a></li>
<li style="padding-left:108px;"><a href="">Videos</a></li>
<li style="padding-left:106px;"><a href="">Dates</a></li>
<li style="padding-left:90px;"><a href="">Guestbook</a></li>
</ul>

</div>

<div id="content">
<img src="" alt="About" style="margin-left:5px;"  />
<div class="column">
<font style="padding-left:8px;word-spacing:4px;text-transform:uppercase;font-size:9px;">Die nächsten Veranstaltungen / Jams</font>
<div class="highlightabout scroll-pane" style="height:510px;position:relative;">

<img src="" alt="Veranstaltung" style="margin:20px 10px 20px 20px;" />
<p style="color:#035c02;position:absolute;left:190px;top:19px;text-transform:uppercase;font-size:8px;"> 
Event: Name des Events <br />
<font color="#000000">Datum: 02-02-2011</font><br />
Uhrzeit: Der Einlass ist um 19 Uhr<br />
<font color="#000000">Eintritt: 5 Euro</font><br />
Beschreibung:<br />
<font color="#000000">ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.</font>
</p>

<br />
<img src="" alt="Veranstaltung" style="margin:20px 10px 20px 20px;" />

<p style="color:#035c02;position:absolute;left:190px;top:247px;text-transform:uppercase;font-size:8px;"> 
Event: Name des Events <br />
<font color="#000000">Datum: 02-02-2011</font><br />
Uhrzeit: Der Einlass ist um 19 Uhr<br />
<font color="#000000">Eintritt: 5 Euro</font><br />

Beschreibung:<br />
<font color="#000000">ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.</font>
</p>
<br />
<img src="" alt="Veranstaltung" style="margin:20px 10px 20px 20px;" />

<p style="color:#035c02;position:absolute;left:190px;top:475px;text-transform:uppercase;font-size:8px;"> 
Event: Name des Events <br />
<font color="#000000">Datum: 02-02-2011</font><br />
Uhrzeit: Der Einlass ist um 19 Uhr<br />
<font color="#000000">Eintritt: 5 Euro</font><br />

Beschreibung:<br />
<font color="#000000">ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.</font>
</p>
<br />




</div>
</div>
<div class="column noMargin">
<font style="padding-left:8px;word-spacing:4px;text-transform:uppercase;font-size:9px;">Booking</font>
<div class="highlightabout" style="height:200px!important;margin-bottom:20px;position:relative;">
<p style="text-transform:uppercase; margin:20px 10px 0 17px;"> 
<font style="font-size:11px;">Booking per E-Mail</font><br />
an: <font color="#035c02">booking@onpointmusic.de</font><br /><br />
<font style="font-size:11px;">Booking per Messenger</font><br />
MSN: <font color="#035c02">info@onpointmusic.de</font><br />
ICQ: <font color="#035c02">617 - 854 - 307</font><br />
SKYPE: <font color="#035c02">onpointmusic</font>
<br /><br /><br />
<font style="font-size:8px;">Weitere Informationen bei "Booking"</font>
</p>
<img src="" style="position:absolute;top:25px;left:210px;" />
</div>

<font style="padding-left:8px;word-spacing:4px;text-transform:uppercase;font-size:9px;">Bilder der letzten Jams</font>
<div class="highlightabout" style="height:270px!important;position:relative;">
<img src="" style="padding-left:5px;padding-top:10px;position:absolute;" />
<img src="" style="margin:10px 3px 5px 16px;" />
<img src="" style="margin:10px 3px 5px 10px;" />
<img src="" style="margin:10px 3px 5px 10px;" />
<img src="" style="margin:10px 3px 5px 10px;" />
<img src="" style="margin:10px 3px 5px 16px;" />
<img src="" style="margin:10px 3px 5px 10px;" />
<img src="" style="margin:10px 3px 5px 10px;" />
<img src="" style="margin:10px 3px 5px 10px;" />
<img src="" style="position:absolute;top:10px;left:443px;" />



</div>

</div>
<img src="" style="margin-top:15px;padding-left:14px;width:940px;" />
</div>
<div class="clear"></div>
<div id="footercontainer">
<div id="footer">
<p style="position:absolute;left:765px;top:71px;">Copyright 2011: Daniele De Rosa</p>
</div>
</div>


</body>
</html>

Lg

sokie · 05.02.2011

AW: Verschiedene kleine Probleme

Formular: deine action heisst formmailcontact.php. Wenn du willst, dass das ergebnis in der selben Seite angezeigt wird musst du entweder
die action in die selbe Seite integrieren und action="contact.php"
oder
die formmailcontact.php in einem iframe in der Seite laden (das formular braucht dann das attribut target="meinIframeName",
oder
das abschicken des Formulars per submit verhindern (return false) und die daten per xmlHttpRequest in die seite bringen.
jQuery.get()
jQuery.post()

etc.

btw: mit html/css hat aber keins der Beiden Probleme zu tun -> verschoben.

onpoint · 08.02.2011

AW: Verschiedene kleine Probleme

danke hierfür schonmal!

Jemand auch das Problem mit dem Scrollbalken gelöst? Habe wieder gesucht wie ein Irrer, aber finde nirgens nen Fehler..

Duddle · 09.02.2011

AW: Verschiedene kleine Probleme

Nur eine vorläufige Fehleranalyse bzgl. der Scrollbalken: ich habe es mal lokal probiert und auf das mindeste reduziert (also nur .html plus die jquery-Scripte).

Bei mir kommt er nicht mit den seltsam manuell positionierten Paragraphen nicht klar, also bspw.

HTML:

<p style="color:#035c02;position:absolute;left:190px;top:19px;text-transform:uppercase;font-size:8px;"> 
Event: Name des Events <br />
<font color="#000000">Datum: 02-02-2011</font><br />
Uhrzeit: Der Einlass ist um 19 Uhr<br />

Sobald ich "position:absolute;left:190px;top:475px;" aus style im <p> entferne, funktioniert es einwandfrei. Ich vermute, dass das PlugIn hier mit der Berechnung durcheinander kommt oder so. Das erklärt aber nicht die Cache-Effekte.

Natürlich negiert der obige Fix deine Positionierung, aber das kann man auch anders und besser schreiben. Wenn ich das richtig verstehe, willst du je Datum einen Flyer neben den Daten anzeigen? Ich habe länger kein CSS geschrieben, aber so hat es funktioniert:

HTML:

<div>
	<img src="Bilder/flyermuster.jpg" alt="Veranstaltung" style="float:left;margin:20px 10px 20px 20px;" />
	<p style="margin-left:190px; color:#035c02;text-transform:uppercase;font-size:8px;"> 
	Event: Name des Events <br />
	<font color="#000000">Datum: 02-02-2011</font><br />
	Uhrzeit: Der Einlass ist um 19 Uhr<br />
	<font color="#000000">Eintritt: 5 Euro</font><br />

	Beschreibung:<br />
	<font color="#000000">ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.</font>
	</p>
</div>

Geändert habe ich:

position:absolute, etc. wie oben erwähnt entfernt.
den Eintrag in ein <div> eingebettet
float:left für den Flyer, damit er im <div> links schwimmt
margin-left:190px für das <p>, damit es einen "Spalte" ergibt

Duddle

onpoint · 09.02.2011

AW: Verschiedene kleine Probleme

Super! Das funktioniert so sehr gut

Danke dir.

Jetzt muss ich nur noch die Sache mit dem Formular wie oben beschrieben lösen.

Lg

onpoint · 10.02.2011

AW: Verschiedene kleine Probleme

Ne kleine Frage dazu..

ich habe mich für die Methode entschieden die formmail.php in einem Iframe zu laden..

nun ist es so dass ich eine contact.php habe in der der aufbau der seite etc. steht, in dieser setze ich via php include die "buchungsformular.php". und diese "buchungsformular.php" verweist auf die "formmail.php".

versteh ich das also richtig, dass ich auf den php include befehl verzichten muss und das ding via i-frame auf die contact.php bringe? und dann in der "buchungsformular.php" target="mein eingetragener framename"?