Beiträge von stormraider

stormraider

Danke für die Hilfe, werde es die Tage implentieren...;)

Falls noch iwelche Fragen diesbezüglich auftreten werde ich mich melden. THX

stormraider

So ich hoffe das ist so in ordnung..;)

stormraider

Ok danke werd ich dann mal loslegen...

stormraider

Danke für eure Antworten aber ich weiss nicht wie ihr das haben wollt, muss ich zeilenumbrüche machen wegen dem scrollen oder ist euch das allgemein zu viel..?

Ansonsten muss ich die Tage die Webseite online stellen dann könnt ihr vielleicht mehr damit anfangen...

Danke vorab

stormraider

Keiner der einen rat übrig hat...

weil wenn ich Befehle im Html hinzufüge wie hier halt den Subject-Befehl dann muss das doch in der send.php ankommen oder wie läuft das, ich kann nämlich dort nichts großartig finden was abgeändert werden muss.

stormraider

So, habe nun auch nochmal alles nachgeschaut...

Und voila nun funktioniert alles bestens, hab alles nochmal erneuert und umgeädnert.
So siehts nun aus und alles perfekt...

HTML

<div id="container_slideshow">
  <img alt="slide show" src="images/inlay_bottom_h01.jpg" width="647" height="503" id="slidepics">
</div>
<script type="text/javascript">
var FadeDurationMS=1000;
function SetOpacity(object,opacityPct)
{
  // IE.
  object.style.filter = 'alpha(opacity=' + opacityPct + ')';
  // Old mozilla and firefox
  object.style.MozOpacity = opacityPct/100;
  // Everything else.
  object.style.opacity = opacityPct/100;
}
function ChangeOpacity(id,msDuration,msStart,fromO,toO)
{
  var element=document.getElementById(id);
  var msNow = (new Date()).getTime();
  var opacity = fromO + (toO - fromO) * (msNow - msStart) / msDuration;
  if (opacity>=100)
  {
    SetOpacity(element,100);
    element.timer = undefined;
  }
  else if (opacity<=0)
  {
    SetOpacity(element,0);
    element.timer = undefined;
  }
  else 
  {
    SetOpacity(element,opacity);
    element.timer = window.setTimeout("ChangeOpacity('" + id + "'," + msDuration + "," + msStart + "," + fromO + "," + toO + ")",10);
  }
}
function FadeInImage(foregroundID,newImage,backgroundID)
{
  var foreground=document.getElementById(foregroundID);
  if (foreground.timer) window.clearTimeout(foreground.timer);
  if (backgroundID)
  {
    var background=document.getElementById(backgroundID);
    if (background)
    {
      if (background.src)
      {
        foreground.src = background.src; 
        SetOpacity(foreground,100);
      }
      background.src = newImage;
      background.style.backgroundImage = 'url(' + newImage + ')';
      background.style.backgroundRepeat = 'no-repeat';
      var startMS = (new Date()).getTime();
      foreground.timer = window.setTimeout("ChangeOpacity('" + foregroundID + "'," + FadeDurationMS + "," + startMS + ",100,0)",10);
    }
  } else {
    foreground.src = newImage;
  }
}
var slideCache = new Array();
function RunSlideShow(pictureID,backgroundID,imageFiles,displaySecs)
{
  var imageSeparator = imageFiles.indexOf(";");
  var nextImage = imageFiles.substring(0,imageSeparator);
  if (slideCache[nextImage] && slideCache[nextImage].loaded)
  {
    FadeInImage(pictureID,nextImage,backgroundID);
    var futureImages = imageFiles.substring(imageSeparator+1,imageFiles.length)
      + ';' + nextImage;
    setTimeout("RunSlideShow('"+pictureID+"','"+backgroundID+"','"+futureImages+"',"+displaySecs+")",
      displaySecs*1000);
    // Identify the next image to cache.
    imageSeparator = futureImages.indexOf(";");
    nextImage = futureImages.substring(0,imageSeparator);
  } else {
    setTimeout("RunSlideShow('"+pictureID+"','"+backgroundID+"','"+imageFiles+"',"+displaySecs+")",
      250);
  }
  // Cache the next image to improve performance.
  if (slideCache[nextImage] == null)
  {
    slideCache[nextImage] = new Image;
    slideCache[nextImage].loaded = false;
    slideCache[nextImage].onload = function(){this.loaded=true};
    slideCache[nextImage].src = nextImage;
  }
}
</script>
<script type="text/javascript">
RunSlideShow("slidepics","container_slideshow",
    "images/inlay_bottom_h01.jpg;images/inlay_bottom_h02.jpg;images/inlay_bottom_h03.jpg;images/inlay_bottom_h04.jpg;images/inlay_bottom_h05.jpg;images/inlay_bottom_h06.jpg;" + "images/inlay_bottom_h07.jpg",4);
</script>

Alles anzeigen

Danke für die schnellen Antworten..

stormraider

HI,

ich kenne mich jetzt nicht so gut damit aus, wie kann ich das denn ändern, weil ihr braucht doch sicherlich die Infos oder?

stormraider

Hallo,

ich habe auf meiner Webseite ein Emailformular eingerichtet mit Name, Email, Betreff und Nachricht. Nun habe ich aber diesbezüglich ein paar Fragen.

Wie funktionieren die Bereiche Name, Email, Betreff.?
ich habe den Bereich Betreff selbst hinzugefügt dann muss doch auch in der php datei was geändert werden oder.?

Wie funktioniert die Sendebestätigung genau.? Kann ich einfach einen Satz einfügen der erscheint oder leitet der auf ne andere Seite wo dann ein text steht.? Das muss ich dann ja auch bestimmt ändern.

HTML

<form name="myForm" method="get" action="send.php" id="myForm">
              <div id="form_box">
                <div>
                  <p> Vorname, Nachname: </p>
                  <input type="text" value="" name="name" class="fieldclass">
                </div>
                <div>
                  <p> E-Mail: </p>
                  <input type="text" value="" name="e_mail" class="fieldclass">
                </div>
                <div>
                  <p> Betreff: </p>
                  <input type="text" value="" name="subject" class="fieldclass">
                </div>
                <div>
                  <p> Nachricht: </p>
                  <textarea rows="5" cols="40" name="message" class="fieldclass"></textarea>
                </div>
                <div class="hr">
                  <!-- spanner -->
                </div>
                <input type="submit" value=" " id="submitter" name="button">
              </div>
            </form>

Alles anzeigen

PHP

<?php


$my_email = "kontakt@dornröschen-wohnen.de";


$continue = "#index.htm";
$errors = array();


// Remove $_COOKIE elements from $_REQUEST.


if(count($_COOKIE)) {
    foreach(array_keys($_COOKIE) as $value) {
        unset($_REQUEST[$value]);
    }
}


// Check all fields for an email header.


function recursive_array_check_header($element_value) {
    global $set;
    if(!is_array($element_value)) {
        if(preg_match("/(%0A|%0D|\n+|\r+)(content-type:|to:|cc:|bcc:)/i",   $element_value)) {
            $set = 1;
            }
        }
        else {
            foreach($element_value as $value) {
                if($set) {
                    break;
                    } 
                recursive_array_check_header($value);
                }


            }


        }


    recursive_array_check_header($_REQUEST);
    if($set){$errors[] = "You cannot send an email header";
}


unset($set);


// Validate email field.


if(isset($_REQUEST['email']) && !empty($_REQUEST['email'])) {
    if(preg_match("/(%0A|%0D|\n+|\r+|:)/i",$_REQUEST['email'])) {
        $errors[] = "Email address may not contain a new line or a colon";
        }
            $_REQUEST['email'] = trim($_REQUEST['email']);
            if(substr_count($_REQUEST['email'],"@") != 1 || stristr($_REQUEST['email']," ")) {
                $errors[] = "Email address is invalid";
                }
            else {
                $exploded_email = explode("@",$_REQUEST['email']);
                if(empty($exploded_email[0]) || strlen($exploded_email[0]) > 64 || empty($exploded_email[1])) {
                    $errors[] = "Email address is invalid";
                    }
            else {
                if(substr_count($exploded_email[1],".") == 0) {
                    $errors[] = "Email address is invalid";
                    }
            else {
                $exploded_domain = explode(".",$exploded_email[1]);
                    if(in_array("",$exploded_domain)) {
                        $errors[] = "Email address is invalid";
                        }
            else {
                foreach($exploded_domain as $value) {
                    if(strlen($value) > 63 || !preg_match('/^[a-z0-9-]+$/i',$value)) {
                        $errors[] = "Email address is invalid"; break;
                        }
                    }
                }
            }
        }
    }
}


// Check referrer is from same site.


if(!(isset($_SERVER['HTTP_REFERER']) && !empty($_SERVER['HTTP_REFERER']) && stristr($_SERVER['HTTP_REFERER'],$_SERVER['HTTP_HOST']))){$errors[] = "You must enable referrer logging to use the form";
}


// Check for a blank form.


function recursive_array_check_blank($element_value) {
    global $set;
        if(!is_array($element_value)) {
            if(!empty($element_value)) {
                $set = 1;
            }
        }
else {
    foreach($element_value as $value) {
        if($set) {
            break;
            }
        recursive_array_check_blank($value);
        }
    }
}


recursive_array_check_blank($_REQUEST);
    if(!$set) {
        $errors[] = "You cannot send a blank form";
        }
    unset($set);


// Display any errors and exit if errors exist.
if(count($errors)) {
    foreach($errors as $value) {
        print "$value<br>";
        }
    exit;
    }
if(!defined("PHP_EOL")) {
    define("PHP_EOL", strtoupper(substr(PHP_OS,0,3) == "WIN") ? "\r\n" : "\n");
    }


// Build message.
function build_message($request_input) {
    if(!isset($message_output)) {
        $message_output ="";
        }
    if(!is_array($request_input)) {
        $message_output = $request_input;
        }
    else {
        foreach($request_input as $key => $value) {
            if(!empty($value)) {
                if(!is_numeric($key)) {
                    $message_output .= str_replace("_"," ",ucfirst($key)).": ".build_message($value).PHP_EOL.PHP_EOL;
                }
            else {
                $message_output .= build_message($value).", ";
                }
            }
        }
    }
return rtrim($message_output,", ");
}


$message = build_message($_REQUEST);
$message = $message . PHP_EOL.PHP_EOL."-- ".PHP_EOL."";
$message = stripslashes($message);
$subject = "FormToEmail Comments";
$headers = "From: " . $_REQUEST['email'];
mail($my_email,$subject,$message,$headers);


?>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


<html>


<head>
<title>Dreamweaver Tutorial - Contact Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>


<body bgcolor="#ffffff" text="#000000">


<div>
<center>
<b>Thank you <?php print stripslashes($_REQUEST['name']); ?></b>
<br>Your message has been sent
<p><a href="<?php print $continue; ?>">Click here to continue</a></p>
<p><b>Dreamweaver Spot</b> by <a href="http://dreamweaverspot.com">dreamweaverspot.com</a></p>
</center>
</div>


</body>
</html>

Alles anzeigen

stormraider

Hi,

ja sry vertippt.

Einen Link kann ich momentan nicht liefern da die Webseite noch nicht online ist-. Hoffe es geht im moment auch offline
Aber wenn die Seite online sein muss werd ich es versuchen

Bildpfad habe ich überprüft, ebenso die Endungen.

ich vermute es liegt iwie am javascript, als ob da iwas noch falsch angegeben ist oder fehlt... ist schon mein 3 Anlauf aber nie hats funktioniert.

stormraider

Hallo zusammen,

habe anhand einer Anleitung versucht mir eine Slideshow per Javascript einzubauen aber aus irgendeinem Grund werden die Bilder nicht angezeigt.
Ist der Pfad zu den Bildern (Ich teste offline) falsch oder hab ich was beim programmieren falsch gemacht.?

Index.html -> [Ordner-images],[Ordner-js],[Ordner-css]

01.) Javalink im Head-Bereich eingefügt
02.) div class container_show mit img class eingefügt im Bodybereich...

HTML

<!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" />
        <meta name="title" content="Dornröschen Wohnen" />
        <meta name="author" content="Michael Meyer - Dornröschen Wohnen" />
        <meta name="publisher" content="Manuel Meyer - Dornröschen Wohnen" />
        <meta name="copyright" content="Dornröschen Wohnen, 2010" />
        <meta name="robots" content="index, follow" />
        <meta name="language" content="de" />
        <meta name="revisit-after" content="3 days" />
        <title>Dornröschen Wohnen - kreativ, sauber, flexibel</title>

        <link rel="Shortcut Icon" href="images/favicon.ico" />


        <meta name="description" content="Dornröschen Wohnen - kreativ, sauber, flexibel. Möbelt ihr Zuhause auf. Wir verschönern ihr Zuhause, mit behutsamen Veränderungen, Akzenten und Einrichtugnsgegenständen. Kleine Veränderungen durch kreative Hände erzielen eine große Wirkung" />


        <meta name="keywords" content="Dornröschen, Wohnen, Dornröschen Wohnen, Leidenschaft, Hobby, Möbel, Dekor, Dekoration, Veränderung, Akzent, Akzente, Wohlgefühl, Einrichtung, Gegenstände, Accessoires, Stoff, Farben, Farbgebung, Materialien, Holz, Blumen, Kerzen, Raumelemente, Kreativ, Sauber, Flexibel, Gestalten, Verschönerung, Aufarbeitung, Umbau, Stimmig, Gemütlich, Gestaltungsideen, Ausführung, Neustrukturierung, Auffrischung, Frisch, Reperaturen, Kleinreperaturen, Bearbeitung, Reinigung, Raum, Kamin, Komode, Regal, Tisch, Wohnzimmer, Esszimmer, Küche, Schlafzimmer, Bad," />


<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen"/>
<script type="text/javascript" src="../js/slideshow.js"></script>
</head>


<body>


<div id="container">


<div class="main">
<div class="line_top">
<div class="line_bottom">
<div class="line_lr">


<div id="header">
<div class="header_background">
</div>
</div>


<div id="navigation">
    <ul class="nav_buttons">
        <li class="link_home"><a title="Startseite" href="index.html">Startseite</a></li>
        <li class="link_about"><a title="Wir über uns" href="about.html">Wir über uns</a></li>
        <li class="link_contact"><a title="So erreichen Sie uns" href="contact.html">So erreichen Sie uns</a></li>
        <li class="link_joblist"><a title="Dienstleistungsliste" href="joblist.html">Dienstleistungsliste</a></li>
        <li class="link_projectlist"><a title="Projektliste" href="projectlist.html">Projektliste</a></li>
    </ul><!--Nav_buttons schließen-->  
</div><!--Navigation schließen-->


<div id="main_content">
<div class="container_news">
<div class="news">
<h1>09.03.2010</h1>
<p>Unsere Webseite ist nun auch On-line gegangen.</p>
<p>Sie können sich nun vorab online ein Bild von uns machen.</p>
<p>Bei Fragen können sie uns gerne anschreiben.</p>
</div><!--NEWS ENDS-->
</div><!--CONTAINER_NEWS END-->


<div class="container_show">
<img class="start" src="../images/inlay_bottom_h01.jpg" />
</div><!--CONTAINER_SHOW END-->
</div><!--MAIN_CONTENT END-->


<div id="footer_top">
    <ul class="ftr_links">
        <li>
            <a title="Startseite" href="index.html">Startseite</a>
    |
        </li>
        <li>
            <a title="wir über uns" href="about.html">Wir über uns</a>
    |
        </li>
        <li class="ftr_contact">
            <a title="So erreichen Sie uns" href="contact.html">So erreichen Sie uns</a>
    |
        </li>
        <li>
            <a title="Dienstleistungsliste" href="joblist.html">Dienstleistungsliste</a>
    |
        </li>
        <li>
            <a title="Projektliste" href="projectlist.html">Projektliste</a>
        </li>
    </ul>
</div><!--Footer_Top END-->


<div class="ftr_btm">
<div id="footer_bottom">
<p id="information">Copyright © 2010 by Manuel Meyer - Alle Rechte vorbehalten</p>
<div class="btt">
<a title="Dornröschen Wohnen" href="#header">Dornröschen Wohnen</a>
</div>
</div>
</div><!--Footer_Bottom END-->


<!--Counter-->
<script type="text/javascript" src="https://ssl4stats.de/de/counter?id=60492&amp;cntr=hide"></script>
<noscript><a href="http://www.4stats.de/" target="_blank"><img src="https://ssl4stats.de/de/stats?id=60492&amp;cntr=hide" border="0" alt="Counter" /></a></noscript>
<!--Counter END-->


<div style="clear: both;"></div>


<!-- Schatten schliessen -->
</div>
</div>
</div>
</div>
<!-- Container schliessen -->


</div>


</body>
</html>

Alles anzeigen

Code

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, font, img, ins, kbd, q, s, samp;
small, strike, strong, sub, sup, tt, var;
dl, dt, dd, ol, ul, li;
fieldset, form, label, legend;
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}


:focus {
    outline: 0;
}
ol, ul {
    list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    text-align: left;
    font-weight: normal;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}


*{
    padding:0;
    margin:0;
}


img {
border:0 none;
}


#container_show {
    height: 503px;
    position: relative;
}
#container_show img {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
}
#container_show img.start {
    display: block;
}


#lightbox {    position: absolute;    left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }


#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }


#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}


#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }


#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%    ; }


#imageData{    padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }    
#imageData #caption{ font-weight: bold;    }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;    }            
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}         


#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }


body {
    font-family: times new roman, tahoma, arial, helvetica, sans-serif;
    font-size: 14px;
    color:#000000;
    margin: 0px;
    padding: 0px;
    background-color: #676767;
    background: url(../images/dwbg.jpg) fixed;
    background-position: center;
    background-repeat: repeat;
}


div#container {
    width: 820px;
    margin: 15px auto;
    text-align: left;
}


.main {
    clear: both;
    width: 820px;
}


.line_top {
    background: url(http://i47.tinypic.com/168u45f.png) no-repeat scroll left top transparent;
    padding-top: 15px;
}


.line_bottom {
    background: url(http://i47.tinypic.com/6z6dr5.png) no-repeat scroll left bottom transparent;
    padding-bottom: 20px;
}


.line_lr {
    background: url(http://i45.tinypic.com/23kc7qh.png) repeat-y transparent;
    padding: 0 0 0 10px;
}


div#header {
    position: relative;
}


div#header .header_background {
    background: url(http://i46.tinypic.com/182kqh.jpg) no-repeat scroll 0 0;
    height: 259px;
    width: 800px;
    margin: 0px;
    padding: 0px;
}


.border {
    border:0 none;
}


div#navigation {
    background-image: url(http://i48.tinypic.com/9st9pv.jpg);
    background-repeat: no-repeat;
    background-position: center bottom;
    height: 82px;
    width: 800px;
    float: left;
}


.nav_buttons li {
    font-family: times new roman, tahoma, arial, helvetica, sans-serif;
    font-weight: normal;
    font-size: 16px;
    line-height: 110px;
    float: left;
    margin-top: 1px;
}


.nav_buttons li a {
    padding-left: 55px;
    color: #eeeeee;
    height: 81px;
    text-decoration: none;
    display: block;
}


.nav_buttons li a:hover {
    color: #fff;
    height: 81px;
    text-decoration: none;
}


.nav_buttons li:hover {
    color: #fff;
    text-decoration: none;
    background-position: center -81px;
    background-repeat: no-repeat;
}


li.link_home {
    background-image: url(http://i45.tinypic.com/2powac4.jpg);
    background-repeat: no-repeat;
    height: 81px;
    width: 122px;
    margin-right: 1px;
}


li.link_about {
    background-image: url(http://i50.tinypic.com/2mq92ys.jpg);
    background-repeat: no-repeat;
    height: 81px;
    width: 152px;
    margin-right: 1px;
}


li.link_contact {
    background-image: url(http://i46.tinypic.com/2db2hau.jpg);
    background-repeat: no-repeat;
    height: 81px;
    width: 198px;
    margin-right: 1px;
}


li.link_joblist {
    background-image: url(http://i49.tinypic.com/6gimaw.jpg);
    background-repeat: no-repeat;
    height: 81px;
    width: 191px;
    margin-right: 1px;
}


li.link_projectlist {
    background-image: url(http://i46.tinypic.com/2ewpipx.jpg);
    background-repeat: no-repeat;
    height: 81px;
    width: 133px;
}


div#main_content {
    background: url(http://i45.tinypic.com/14vhb3m.jpg) repeat-x;
    background-color: #fff;
    height: 820px;
    width: 800px;
    float: left;
}


.container_news {
    background: url(http://i45.tinypic.com/2ldcc2h.jpg) no-repeat scroll 0 0;
    width: 672px;
    height: 240px;
    overflow: hidden;
    margin-top: 18px;
    margin-left: 74px;
}


.news {
    padding: 70px 75px 10px 75px;
}


.news h1 {
    font-size: 14px;
    text-align: left;
    margin-bottom: 10px;
}


.news p {
    margin-bottom: 2px;
}


.container_show {
    background: url(http://i48.tinypic.com/2gt10zb.jpg) no-repeat;
    width: 647px;
    height: 503px;
    overflow: hidden;
    margin-left: 74px;
    margin-top: 25px;
}


.container_about {
    background: url(http://i41.tinypic.com/15hlp20.jpg) no-repeat scroll 0 0;
    width: 663px;
    height: 688px;
    overflow: hidden;
    margin-top: 19px;
    margin-left: 74px;
}


.about {
    padding: 80px 80px 10px 70px;
}


.about h1 {
    font-size: 16px;
    text-align: left;
    margin-bottom: 10px;
}


.about p {
    text-align: justify;
    font-style: italic;
    margin-bottom: 5px;
}


#short {
    padding-top: 25px;
    font-weight: bold;
}


.container_contact_top {
    background: url(http://i42.tinypic.com/2j2gweq.jpg) no-repeat scroll 0 0;
    width: 648px;
    height: 225px;
    overflow: hidden;
    margin-top: 28px;
    margin-left: 74px;
}


.contact_top {
    padding: 70px 75px 10px 75px;
}


.contact_top h1 {
    font-size: 14px;
    text-align: left;
    margin-bottom: 10px;
}


.contact_top p {
    margin-bottom: 2px;
}


.container_contact {
    background: url(http://i41.tinypic.com/2naiszp.jpg) no-repeat;
    width: 650px;
    height: 501px;
    overflow: hidden;
    margin-left: 74px;
    margin-top: 25px;
}


.contact {
    padding: 70px 75px 10px 75px;
    }


.contact h1 {
    font-size: 14px;
    text-align: left;
    margin-bottom: 5px;
}


.contact p {
    margin-bottom: 5px;
}


div#footer_top {
    background: url(http://i48.tinypic.com/67kqic.jpg) no-repeat scroll left top;
    height: 110px;
    width: 800px;
    float: left;
}


ul.ftr_links {
    font-size: 13px;
    font-family: times new roman, tahoma, arial, helvetica, sans-serif;
    font-weight: normal;
    padding-top: 80px;
    text-align: center;
}




.ftr_links li {
    display: inline;
}


.ftr_links li a{
    color: #6b6b6b;
    text-decoration: none;
}


.ftr_links a:hover {
    color: #000;
    text-decoration: none;
}


div#footer_bottom {
    background: url(http://i45.tinypic.com/71tnag.jpg) no-repeat scroll left top;
    height: 64px;
    width: 800px;
    float: left;
    text-align: center;
    color: #d3d3d3;
    font-size: 9px;
    display: inline;
}


p#information {
    padding-top: 15px;
}


.btt {
    padding-top: 5px;
}


.btt a {
    font-size: 12px;
    font-weight: bold;
    color: #dc272e;
    text-decoration: none;
}


.btt a:hover {
    color: #f84d53;
    text-decoration: none;
}

Alles anzeigen

Hier noch die Javadatei für die Slideshow slideshow.js:

Code

/*****
Image Cross Fade Redux
Version 1.0
Last revision: 02.15.2006
steve@slayeroffice.com


Please leave this notice intact. 


Rewrite of old code found here: http://slayeroffice.com/code/imageCrossFade/index.html
*****/


window.addEventListener?window.addEventListener("load",so_init,false):window.attachEvent("onload",so_init);


var d=document, bilder = new Array(), zInterval = null, aktuell=0, pause=false;
bilderAnzahl=7;
bilderPfad="../images";
geschwindigkeit=1000;


function so_init() {
    if(!d.getElementById || !d.createElement)return;    

    // erstes Bild wird eingelesen
    bild = d.getElementById("slideshow").getElementsByTagName("img");
    bilder[0] = bild[0];
    bilder[0].style.display = "block";
    bilder[0].xOpacity = .99;


    bilder[1] = new Image();
    bilder[1].src = bilderPfad + "inlay_bottom_h01.jpg";
    bilder[1].xOpacity = 0;
    d.getElementById("slideshow").appendChild(bilder[1]);

    setTimeout(so_xfade,geschwindigkeit);
    neuesBild();
}


function so_xfade() {
    cOpacity = bilder[aktuell].xOpacity;
    nIndex = bilder[aktuell+1]?aktuell+1:0;
    nOpacity = bilder[nIndex].xOpacity;

    cOpacity-=.05; 
    nOpacity+=.05;

    bilder[nIndex].style.display = "block";
    bilder[aktuell].xOpacity = cOpacity;
    bilder[nIndex].xOpacity = nOpacity;

    setOpacity(bilder[aktuell]); 
    setOpacity(bilder[nIndex]);

    if(cOpacity<=0) {
        bilder[aktuell].style.display = "none";
        aktuell = nIndex;
        setTimeout(so_xfade,geschwindigkeit);
        neuesBild();
    } else {
        setTimeout(so_xfade,50);
    }

    function setOpacity(obj) {
        if(obj.xOpacity>.99) {
            obj.xOpacity = .99;
            return;
        }
        obj.style.opacity = obj.xOpacity;
        obj.style.MozOpacity = obj.xOpacity;
        obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
    }    
}


function neuesBild() {
    // immer ein Bild vorausladen
    if ( (aktuell < (bilderAnzahl-2)) && (bilder.length < bilderAnzahl) ) {
        bilder[aktuell+2] = new Image();
        bilder[aktuell+2].src =  bilderPfad + (aktuell+3) + ".jpg";
        bilder[aktuell+2].xOpacity = 0;
        d.getElementById("slideshow").appendChild(bilder[aktuell+2]);
    }
}

Alles anzeigen

Wäre für jeden Tipp und Hilfe dankbar,

Gruß Manuel

stormraider

Ahh ok,

vielen Dank hast mir sehr damit geholfen nun kann ich endlich weitermachen

stormraider

Danke danke so klappts Wie simpel...

Habe nun vorm Schattenende (vor den 4divs) folgendes eingebaut:

Aber wieso funktioniert mein Befehl "clear:both" nicht im .main...?
Schließlich ist das der Container für die Schatten...?

muss man sonst extra noch das .clear { clear:both;} angeben. ?

Wo muss ich das .clear im Html code einauen?

Sry für die vielen Fragen

stormraider

Hallo zusammen,

ich bin nun dabei eine erste Webseite für meine Eltern zu erstellen, klappt soweit ganz gut nur jetzt stehe ich vor einem Problem.

Und zwar habe ich einen Container erstellt in diesem Container kommen dann 4 class-Bereiche die den Schatten erstellen (Inhalt, Oben, unten, mitte)

Habe dann Header und Navi erstellt soweit so gut.
Nun wollte ich den Main-Content einbauen aber sobald ich float:left dem .main_content hinzufüge geht der Schatten nur bis zur Navileiste.

Entferne ich den Float funktioniert der Schatten dafür ist der Hintergrund im Content nach unten verschoben...

kann mir da einer weiterhelfen...

HTML

<!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" />
        <meta name="title" content="Dornröschen Wohnen" />
        <meta name="author" content="Michael Meyer - Dornröschen Wohnen" />
        <meta name="publisher" content="Manuel Meyer - Dornröschen Wohnen" />
        <meta name="copyright" content="Dornröschen Wohnen, 2010" />
        <meta name="robots" content="index, follow" />
        <meta name="language" content="de" />
        <meta name="revisit-after" content="3 days" />
        <title>Dornröschen Wohnen - kreativ, sauber, flexibel</title>

        <link rel="Shortcut Icon" href="images/favicon.ico" />


        <meta name="description" content="Dornröschen Wohnen - kreativ, sauber, flexibel. Möbelt ihr Zuhause auf. Wir verschönern ihr Zuhause, mit behutsamen Veränderungen, Akzenten und Einrichtugnsgegenständen. Kleine Veränderungen durch kreative Hände erzielen eine große Wirkung" />


        <meta name="keywords" content="Dornröschen, Wohnen, Dornröschen Wohnen, Leidenschaft, Hobby, Möbel, Dekor, Dekoration, Veränderung, Akzent, Akzente, Wohlgefühl, Einrichtung, Gegenstände, Accessoires, Stoff, Farben, Farbgebung, Materialien, Holz, Blumen, Kerzen, Raumelemente, Kreativ, Sauber, Flexibel, Gestalten, Verschönerung, Aufarbeitung, Umbau, Stimmig, Gemütlich, Gestaltungsideen, Ausführung, Neustrukturierung, Auffrischung, Frisch, Reperaturen, Kleinreperaturen, Bearbeitung, Reinigung, Raum, Kamin, Komode, Regal, Tisch, Wohnzimmer, Esszimmer, Küche, Schlafzimmer, Bad," />


<link href="styles.css" rel="stylesheet" type="text/css" media="screen"/>
</head>


<body>


<div id="container">




<div class="main">
<div class="line_top">
<div class="line_bottom">
<div class="line_lr">


<div id="header">
<div class="header_background">
</div>
</div>


<div id="navigation">
    <ul class="nav_buttons">
        <li class="link_home"><a title="Startseite" href="#">Startseite</a></li>
        <li class="link_about"><a title="Wir über uns" href="#">Wir über uns</a></li>
        <li class="link_contact"><a title="So erreichen Sie uns" href="#">So erreichen Sie uns</a></li>
        <li class="link_joblist"><a title="Dienstleistungsliste" href="#">Dienstleistungsliste</a></li>
        <li class="link_projectlist"><a title="Projektliste" href="#">Projektliste</a></li>
    </ul><!--Nav_buttons schließen-->  
</div><!--Navigation schließen-->


<div class="clear"></div>


<div id="main_content">
<div class="container_news">
<div class="news">
<h1>09.03.2010</h1>
<p>Unsere Webseite ist nun auch On-line gegangen.</p>
<p>Sie können sich nun vorab online ein Bild von uns machen.</p>
<p>Bei Fragen können sie uns gerne anschreiben.</p>
</div><!--NEWS ENDS-->
</div><!--CONTAINER_NEWS END-->
<div class="clear"></div>
<div class="container_show">
<div class="show">
<h1>Test Test Test</h1>
<p>Lorem Ipsum... Lorem Ipsum...</p>
<p>Lorem Ipsum... Lorem Ipsum...</p>
<p>Lorem Ipsum... Lorem Ipsum...</p>
<p>Lorem Ipsum... Lorem Ipsum...</p>
<p>Lorem Ipsum... Lorem Ipsum...</p>
</div><!--SHOW ENDS-->
</div><!--CONTAINER_SHOW END-->
</div><!--MAIN_CONTENT END-->
<div class="clear"></div>
<!-- Schatten schliessen -->
</div>
</div>
</div>
</div>
<!-- Container schliessen -->


</div>


</body>
</html>

Alles anzeigen

Code

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, font, img, ins, kbd, q, s, samp;
small, strike, strong, sub, sup, tt, var;
dl, dt, dd, ol, ul, li;
fieldset, form, label, legend;
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}


:focus {
    outline: 0;
}
ol, ul {
    list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    text-align: left;
    font-weight: normal;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}


*{
    padding:0;
    margin:0;
}


body {
    font-family: times new roman, tahoma, arial, helvetica, sans-serif;
    font-size: 11px;
    color:#000000;
    margin: 0px;
    padding: 0px;
    background-color: #676767;
    background: url(http://i47.tinypic.com/zlzy9v.jpg) fixed;
    background-position: center;
    background-repeat: repeat;
}


div#container {
    width: 820px;
    margin: 15px auto;
    text-align: left;
}


.main {
    clear: both;
    width: 820px;
}


.line_top {
    background: url(http://i47.tinypic.com/168u45f.png) no-repeat scroll left top transparent;
    padding-top: 15px;
}


.line_bottom {
    background: url(http://i47.tinypic.com/6z6dr5.png) no-repeat scroll left bottom transparent;
    padding-bottom: 20px;
}


.line_lr {
    background: url(http://i45.tinypic.com/23kc7qh.png) repeat-y transparent;
    padding: 0 0 0 10px;
}


div#header {
    position: relative;
}


div#header .header_background {
    background: url(http://i46.tinypic.com/182kqh.jpg) no-repeat scroll 0 0;
    height: 259px;
    width: 800px;
    margin: 0px;
    padding: 0px;
}


.border {
    border:0 none;
}


div#navigation {
    background-image: url(http://i48.tinypic.com/9st9pv.jpg);
    background-repeat: no-repeat;
    background-position: center bottom;
    height: 82px;
    width: 800px;
}


.nav_buttons li {
    float: left;
    line-height: 81px;
    margin-top: 1px;
    text-align: center;
}


.nav_buttons li a {
    color: #e8e8e8;
    display: block;
    height: 81px;
    text-align: center;
    text-decoration: none;
}


.nav_buttons li:hover {
    background-position: center -81px;
    background-repeat: no-repeat;
}


li.link_home {
    background-image: url(http://i45.tinypic.com/2powac4.jpg);
    background-repeat: no-repeat;
    height: 81px;
    width: 122px;
    margin-right: 1px;
}


li.link_about {
    background-image: url(http://i50.tinypic.com/2mq92ys.jpg);
    background-repeat: no-repeat;
    height: 81px;
    width: 152px;
    margin-right: 1px;
}


li.link_contact {
    background-image: url(http://i46.tinypic.com/2db2hau.jpg);
    background-repeat: no-repeat;
    height: 81px;
    width: 198px;
    margin-right: 1px;
}


li.link_joblist {
    background-image: url(http://i49.tinypic.com/6gimaw.jpg);
    background-repeat: no-repeat;
    height: 81px;
    width: 191px;
    margin-right: 1px;
}


li.link_projectlist {
    background-image: url(http://i46.tinypic.com/2ewpipx.jpg);
    background-repeat: no-repeat;
    height: 81px;
    width: 133px;
}


div#main_content {
    background: url(http://i45.tinypic.com/14vhb3m.jpg) repeat-x;
    background-color: #fff;
    height: 100%;
    width: 800px;
    float: left;
}


.container_news {
    background: url(http://i45.tinypic.com/2ldcc2h.jpg) no-repeat scroll 0 0;
    width: 672px;
    height: 240px;
    overflow: hidden;
    margin-top: 18px;
    margin-left: 74px;
}


.news {
    padding: 70px 75px 10px 75px;
}


.news h1 {
    font-size: 14px;
    text-align: left;
    margin-bottom: 10px;
}


.news p {
    margin-bottom: 2px;
}


.container_show {
    background: url(http://i48.tinypic.com/2gt10zb.jpg) no-repeat;
    width: 647px;
    height: 503px;
    overflow: hidden;
    margin-left: 74px;
}


.show {
    padding: 70px 75px 10px 75px;
    }


.show h1 {
    font-size: 14px;
    text-align: left;
    margin-bottom: 5px;
}


.show p {
    margin-bottom: 5px;
}

Alles anzeigen

Wofür ist der Befehl <div class="clear"></div> gut?

gruß Manuel

Beiträge von stormraider

Überprüfung eines Mailformulars

Überprüfung eines Mailformulars

Überprüfung eines Mailformulars

Überprüfung eines Mailformulars

Überprüfung eines Mailformulars

Slideshow auf Webseite funktioniert nicht.?

Überprüfung eines Mailformulars

Überprüfung eines Mailformulars

Slideshow auf Webseite funktioniert nicht.?

Slideshow auf Webseite funktioniert nicht.?

Float-Problem lässt sich (von mir) nicht lösen

Float-Problem lässt sich (von mir) nicht lösen

Float-Problem lässt sich (von mir) nicht lösen