Beiträge von romacasa

romacasa

Ja, so habe ich es mir vorgestellt. Und responsiv ist es auch dazu. Jetzt kann ich mal mein Chef konsultieren, ob ihm dies auch passt...

romacasa

Herzlichen Dank,

dass soviele den Beitrag angeklickt haben und nur einer sich meiner erbarmte. An MyXoToD gilt mein Dank.

PS: z-index muss noch auf 1 oder höher gesetzt werden, da sonst der Strich immer hinten ist.

romacasa

Hallo

Bastle gerade auf der Grundlage von Boilerplate eine Webseite für den Betrieb, wo ich arbeite. Dabei möchte ich eine responsive SlideShow einfügen - benutze dazu http://responsiveslides.com.

Von Oben nach unten durchlädt eine rote Linie. Es wäre schön, wenn auch diese über den Slide verlaufen würde. Ich habe die Grafiken bereits erstellt. Es fehlt mir aber an Grundwissen, wie ich es bewerkstelligen könnte.

Hier die Codes:
Blank.gif ist ein 1x1 px transparent, eingefügt, damit DIV nicht leer ist.

HTML

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<html class="no-js">




<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Hotelgasthof zur Sonne - Bad Gögging</title>




    <!-- Mobile viewport optimisation -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">




    <!-- (de) Fuegen Sie hier ihre Meta-Daten ein -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="cache-control" content="no-cache">
    <title>Hotel Zur Sonne</title>
    <meta name="author" content="Romano Casanova">
    <meta name="publisher" content="Pauline Haunschild">
    <meta name="copyright" content="Romano Casanova">
    <meta name="description" content="Gutbürgerliches Gasthof im Herzen Bad Göggings, dem besonderen Kurort in Bayern. ">
    <meta name="keywords" content="Hotelgasthof, Hotel Zur Sonne, Hotelgasthof zur Sonne, Bad Gögging, Übernachtung in Bad Gögging, Kurort, Traiansstrasse 3-5, Sonne Bad Gögging, Wellness Bad Gögging, Thermalbad, Kur, Familienfeier">
    <meta name="page-topic" content="Reise Tourismus">
    <meta name="page-type" content="Produktinfo über Hotelgasthof Zur Sonne in Bad Gögging">
    <meta name="audience" content="Alle">
    <meta http-equiv="content-language" content="de">
    <meta name="robots" content="index, follow"> 

     <!--Styles -->
     <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700' rel='stylesheet' type='text/css'>
     <link rel="stylesheet" href="css/normalize.css">

         <link rel="stylesheet" href="css/step4.css">
         <!--[if (lt IE 9) & (!IEMobile)]>
         <link rel="stylesheet" href="css/ie.css">
         <![endif]-->
     <link rel="stylesheet" href="css/grid.css">    
     <link rel="stylesheet" href="css/responsiveslides.css">
      <link rel="stylesheet" href="css/main.css">



     <!-- script -->
     <script src="js/vendor/jquery-1.10.2.min.js"></script>
     <script src="js/vendor/modernizr-2.6.2.min.js"></script>

       <script>
         $(function() {
           $(".rslides").responsiveSlides();
         });
       </script>    
</head>
<body>
<!--[if lt IE 9]>
    <p class="browsehappy">Hoppla... Sie benutzen aber einen alten <strong>Explorer-Browser</strong> . Zu Ihrer eigenen Sicherheit fürs Surfen im Web: <a href="http://browsehappy.com/?locale=de_DE">Aktualisieren oder laden Sie die neuste Version eines Browsers Ihrer Wahl! </a> <strong> -- Dies ist keine Werbung!!!</strong></p>
<![endif]-->




<!-- full skip link functionality in webkit browsers -->




    <div id="outer-wrap">
        <div id="inner-wrap">
                <!--Kopfbereich -->
                <header id="top" role="banner">

                        <div id="titel2">
                            <img src="img/titel2.png" alt="Titel" />
                        </div>
                        <div id="address">
                            <address>
                                Trajanstrasse 3-5<br />93333 Bad Gögging<br /><br />Telefon: 0049-(0)9445/95470<br />Fax 0049-(0)9445/2176
                            </address>
                        </div>

                    <a class="nav-btn" id="nav-open-btn" href="#nav">Navigation</a>

                </header>
                <nav id="nav" role="navigation">
                        <div class="block">
                            <h2 class="block-title">Hotel zur Sonne</h2>
                            <ul>
                                <li class="is-active">
                                    <a href="#">Start</a>
                                </li><!--
                             --><li>
                                    <a href="#">Zimmer</a>
                                </li><!--
                             --><li>
                                    <a href="#">Kulinarisches</a>
                                </li><!--
                             --><li>
                                    <a href="#">Impressionen</a>
                                </li><!--
                             --><li>
                                    <a href="#">Informationen</a>
                                </li><!--
                            --><li>
                                   <a href="#">Kontakt</a>
                               </li>
                            </ul>
                            <a class="close-btn" id="nav-close-btn" href="#top">Return to Content</a>
                        </div> <!-- Ende  Blockdiv-->
                    </nav>
                <!-- Slide -->

                <div id="slideshow">
                    <div id="slide">
                        <ul class="rslides" id="slider1">
                          <li><img src="img/home/1.png" alt=""></li>
                          <li><img src="img/home/2.png" alt=""></li>

                        </ul>
                    </div>
                    <div id="bild2">
                        <img src="img/blank.gif "alt="Blank">    
                    </div>
                </div>


                <div id="cont">


                       <div id="main" role="main">



                                    <h1>Titel</h1>

                                    <p>Test</p>


                    </div><!-- Ende main -->





            <footer role="contentinfo">

                <div class="block prose">
                    <p class="small"><a href="http://ota.ahds.ac.uk/desc/5730">Text distributed by the University of Oxford under a Creative Commons Attribution-ShareAlike 3.0 Unported License</a></p>
                    <p class="small">Copyright © <a href="http://dbushell.com/">David Bushell</a></p>
                </div>

            </footer>
            <div id="maintitelende">
                <img src="./img/blank.gif" alt="Blank" />
            </div>
        </div><!-- Ende cont-->


        </div><!-- Ende inner warp -->
    </div><!-- Ende outher warp -->
<script src="js/main.js"></script>
<script src="js/plugins.js"></script>
<script src="js/responsiveslides.min.js"></script>
</body>
</html>

Alles anzeigen

CSS

/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */


/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */




/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */




html,
button,
input,
select,
textarea {
    color: #222;
}




html {
    font-size: 1em;
    line-height: 1.4;
}




/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */




::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}




::selection {
    background: #b3d4fc;
    text-shadow: none;
}




/*
 * A better looking default horizontal rule
 */




hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}




/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */




audio,
canvas,
img,
video {
    vertical-align: middle;
}




/*
 * Remove default fieldset styles.
 */




fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}




/*
 * Allow only vertical resizing of textareas.
 */




textarea {
    resize: vertical;
}




/* ==========================================================================
   Browse Happy prompt
   ========================================================================== */




.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}




/* ==========================================================================
   Author's custom styles
   ========================================================================== */




body {
    background: url(../img/hintrotlinie.png) repeat;
    font-size: 13px;
    font-family: "Source Sans Pro";
    font-style: normal;
    font-weight: 400;
}




#slideshow{
    position: relative;
    width: 100%;
}
#slide, #bild2 {
    position: absolute;

}
#bild2 {
    background: url(../img/rotelinie.png) repeat-y;




}




h1{
    font-family: "Source Sans Pro";
     font-size: 34px;
     line-height: 73px;
     margin-bottom: 25px;
}




p{
     font-size: 23px;
     line-height: 26px;
     margin-bottom: 35px;
}




#top, #nav .block, #main {
    background-color: transparent;
}




#titel2{
    padding-left: 153px;
    padding-top: 15px;
    padding-bottom: 20px;
    float: left;
}




address {
    color: #4c1010;
    font-size: 20px;
    font-style: italic;
    padding-right: 40px;
    float: right;
    padding-top: 5px;
}
#main{
    padding-left: 153px;
    padding-right: 50px;
    padding-top: 23px;
}




div.block {
    margin-left: 95px;
}




#nav{
    background-color: #641111;
    -moz-box-shadow: inset 1px 1px 19px black;
    box-shadow: inset 1px 1px 19px black;
}
#nav div.block ul li a {
    font-size: 20px;
    font-weight: normal;
    font-style: normal;
}












/* ==========================================================================
   Helper classes
   ========================================================================== */




/*
 * Image replacement
 */




.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}




.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}




/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */




.hidden {
    display: none !important;
    visibility: hidden;
}




/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */




.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}




/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */




.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}




/*
 * Hide visually and from screenreaders, but maintain layout
 */




.invisible {
    visibility: hidden;
}




/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */




.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}




.clearfix:after {
    clear: both;
}




/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */




.clearfix {
    *zoom: 1;
}




/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */




@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}




@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}




/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */




@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }




    a,
    a:visited {
        text-decoration: underline;
    }




    a[href]:after {
        content: " (" attr(href) ")";
    }




    abbr[title]:after {
        content: " (" attr(title) ")";
    }




    /*
     * Don't show links for images, or javascript/internal links
     */




    .ir a:after,
    a[href^='javascript:']:after,
    a[href^='#']:after {
        content: "";
    }




    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }




    thead {
        display: table-header-group; /* h5bp.com/t */
    }




    tr,
    img {
        page-break-inside: avoid;
    }




    img {
        max-width: 100% !important;
    }




    @page {
        margin: 0.5cm;
    }




    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }




    h2,
    h3 {
        page-break-after: avoid;
    }
}

Alles anzeigen

Und ein Bild (PS; Natürlich werden keine Kaninchen dargestellt. Sind nur Beispielfotos!)

Mit freundlichen Grüssen Romacasa

romacasa

Hallo

Ich benutze das WebYep-System für eine neu zu entwickelnde Webseite. Dieses CMS verlangt, dass man einen INIT Code an erster Stelle schreibt.

PHP

<?php // WebYep init WebYepV1/* ><table><tr><td bgcolor=white><h2>WebYep message: Error, PHP inactive</h2>
<font color=red>The PHP code in this page can not be executed!<ul>
<li>Are you launching this page directly form your harddisc (e.g. via Dreamweavers
"Preview in Browser" instead of accessing it via a webserver?</li>
<li>Has this file the correct file extension for PHP scripts?
WebYep pages must have the ".php" extension and <b>not</b> ".html" or ".htm"!</li>
</ul></font></td></tr></table><!--
*/
$webyep_sIncludePath = "./";
$iDepth = 0;
while (!file_exists($webyep_sIncludePath . "webyep-system")) {
	$iDepth++;
	if ($iDepth > 10) {
		error_log("webyep-system folder not found!", 0);
		echo "<html><head><title>WebYep</title></head><body><b>WebYep:</b> This page can not be displayed <br>Problem: The webyep-system folder was not found!</body></html>";
		exit;
	}
	$webyep_sIncludePath = ($webyep_sIncludePath == "./") ? ("../"):("$webyep_sIncludePath../");
}
if (file_exists("${webyep_sIncludePath}webyep-system/programm")) $webyep_sIncludePath .= "webyep-system/programm";
else $webyep_sIncludePath .= "webyep-system/program";
include("$webyep_sIncludePath/webyep.php"); // -->?>

Alles anzeigen

Ok. Nun soll ich ein Kontaktformular erstellen. All die Formulare, die mittels PHP funktionieren, haben ihren Code innerhalb der Kontakt-Seite. Wenn ich den INIT Code ebenfalls drin lasse, funktioniert nichts mehr - logischerweise.

Deshalb brauche ich ein php-script welches ausserhalb des Kontaktformulares die Daten des Formularen bearbeitet. nach langer suche frage ich nun euch: (auch wegen der SICHERHEIT, denn ich kenne mich in PHP nicht aus und könnte nicht SICHERHEITEN einbauen): Wo finde ich ein solches SICHERES Script? Was könntet ihr mir empfählen?

Denn ohne INIT Code funktioniert das CMS nicht - und damit ist auch die Navigation unbrauchbar.

Danke für eure Hilfe

Romacasa

Beiträge von romacasa

Bild über ein Slide setzen...

Bild über ein Slide setzen...

Bild über ein Slide setzen...

Benutzung von WebYep und ein PHP Kontakt-Formular