Lightbox verwenden (html)

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Lightbox verwenden (html)

    Ich hab mir bei einer Internetseite kostenlose CSS Layouts gezogen.
    In Der .zip befinden sich 3 Bilder und der CSS Code:
    Spoiler anzeigen
    /*
    Design by Free CSS Templates
    freecsstemplates.org
    Released for free under a Creative Commons Attribution 2.5 License
    */

    body {
    margin: 30px 0px 0px 0px;
    padding: 0;
    background: #000000;
    text-align: justify;
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #FFFFFF;
    }

    h1, h2, h3 {
    margin-top: 0;
    }

    h1 {
    font-size: 1.6em;
    font-weight: normal;
    }

    h2 {
    font-size: 1.6em;
    }

    h3 {
    font-size: 1em;
    }

    ul {
    }

    a {
    text-decoration: none;
    color: #2C4449;
    }

    a:hover {
    border-bottom: none;
    }

    a img {
    border: none;
    }

    img.left {
    float: left;
    margin: 0 20px 0 0;
    }

    img.right {
    float: right;
    margin: 0 0 0 20px;
    }

    #header {
    width: 960px;
    margin: 0 auto;
    }

    /* Header */

    #logo {
    width: 960px;
    height: 191px;
    margin: 0 auto;
    background: url(images/img02.jpg) no-repeat left top;
    }

    #logo h1, #logo p {
    margin: 0;
    color: #FFFFFF;
    }

    #logo span {
    color: #FFFFFF;
    }

    #logo h1 {
    padding: 25px 0 0 40px;
    letter-spacing: -1px;
    text-transform: lowercase;
    font-weight: normal;
    font-size: 4.8em;
    }

    #logo p {
    text-transform: lowercase;
    padding: 4px 0 0 43px;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 22px;
    color: #FFFFFF;
    }

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

    /* Menu */

    #menu {
    width: 960px;
    margin: 0 auto;
    padding: 0;
    height: 55px;
    padding-top: 35px;
    background: url(images/img01.jpg) repeat-x left top;
    }

    #menu ul {
    margin: 0;
    padding: 0px 0 0 0px;
    list-style: none;
    }

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

    #menu a {
    height: 40px;
    margin: 0;
    padding: 40px 30px 0 30px;
    background: url(images/img06.jpg) no-repeat right 15px;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: bold;
    color: #FFFFFF;
    }

    #menu a:hover {
    color: #FFFFFF;
    }

    #menu .current_page_item a {
    color: #FFFFFF;
    }

    /* Wrapper */

    #wrapper {
    width: 100%;
    margin: 0px;
    padding: 0px;
    }

    /* Page */

    #page {
    width: 960px;
    margin: 0 auto;
    padding: 0px;
    background: url(images/img03.jpg) no-repeat left top;
    }

    #page-bg {
    }

    /* Latest Post */

    #latest-post {
    padding: 20px;
    border-bottom: 1px #2C4449 solid;
    }

    /* Content */

    #content {
    float: left;
    width: 460px;
    margin: 0px 20px 20px 20px;
    }

    .post {
    padding-bottom: 15px;
    line-height: 200%;
    border-bottom: 1px #2C4449 solid;
    }

    .post h1 {
    font-weight: normal;
    }

    .title {
    margin: 0;
    padding: 30px 0 4px 0px;
    font-size: 28px;
    font-weight: normal;
    }

    .title a {
    border-bottom: none;
    color: #FFFFFF;
    }

    .title a:hover {
    border-bottom: 1px dotted #000000;
    }

    .byline {
    margin: 10px 0px 20px 0px;
    padding: 4px 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #FFFFFF;
    }

    .tag {
    padding: 0 15px;
    }

    .entry {
    padding: 0px 0px;
    }

    .links {
    width: 80px;
    height: 33px;
    background: url(images/img05.jpg) no-repeat left top;
    text-align: right;
    font-weight: bold;
    }

    .links a {
    display: block;
    height: 25px;
    padding-top: 8px;
    padding-left: 10px;
    text-align: left;
    }

    .links a:hover {
    }

    /* Sidebars */

    #sidebar1 {
    float: left;
    width: 230px;
    }

    #sidebar2 {
    float: right;
    width: 230px;
    }

    .sidebar {
    float: left;
    padding: 0;
    color: #737373;
    }

    .sidebar ul {
    margin: 0;
    padding: 20px 0 0 0;
    list-style: none;
    }

    .sidebar li {
    padding: 0 0 20px 0;
    }

    .sidebar li ul {
    background: none;
    padding-bottom: 20px;
    }

    .sidebar li li {
    margin: 0px 15px;
    padding: 8px 0px;
    border-bottom: 1px #314A4F dashed;
    background: none;
    }


    .sidebar li h2 {
    height: 26px;
    margin: 0 15px;
    padding: 14px 15px 0px 0px;
    border-bottom: 1px #2C4449 solid;
    text-transform: capitalize;
    font-size: 18px;
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-weight: normal;
    color: #FFFFFF;
    }

    .sidebar a {
    color: #BDBDBD;
    }

    /* Search */

    #searchform {
    margin: 0;
    padding: 0 0 20px 0;
    }

    #searchform br {
    display: none;
    }

    #searchform h2 {
    }

    #s {
    margin: 10px 0px 0 15px;
    padding: 2px 2px;
    width: 165px;
    height: 18px;
    border: 1px solid #CCCCCC;
    background: #FFFFFF;
    font-size: 10px;
    color: #000000;
    }

    #x {
    margin: 0;
    padding: 2px 5px;
    height: 25px;
    background: #CA8186;
    text-decoration: none;
    text-transform: uppercase;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #CCCCCC;
    }
    /* Calendar */

    #calendar_wrap {
    padding: 10px 15px;
    text-align: center;
    }

    #calendar_wrap table {
    width: 100%;
    }

    #calendar_wrap th {
    }

    #calendar_wrap td {
    }

    #calendar_wrap tfoot td {
    border: none;
    }

    #calendar_wrap tfoot td#prev {
    text-align: left;
    font-weight: bold;
    border: none;
    }

    #calendar_wrap tfoot td#prev a {
    border: none;
    }

    #calendar_wrap tfoot td#next {
    text-align: right;
    font-weight: bold;
    border: none;
    }

    #calendar_wrap tfoot td#next a {
    border: none;
    }

    /* Footer */

    #footer {
    width: 960px;
    height: 80px;
    margin: 0 auto;
    padding: 0 20px;
    border-top: 1px solid #2C4449;
    }

    #footer p {
    margin: 0;
    padding: 10px 0 0 0;
    text-align: center;
    text-transform: uppercase;
    font-size: 10px;
    font-family: Arial, Helvetica, sans-serif;
    color: #737373;
    }

    #footer a {
    color: #BDBDBD;
    }

    #footer .link {
    }

    #footer .copyright {
    }

    Wo kann man einen solchen Code benutzen bzw CSS.
    Ich hab es mal bei Homepage Baukasten probiert, weil ich mich mit Homepages Programmieren und so nicht auskenne. Dort ändert sich ausser der farbe nichts.
    Gibt es einen kostenlosen Anbieter(mir egal wie lange der Name dann ist also z.b meinewebseite.ichbietedenservicean.de), wo so ein Code komplett funktioniert, ohne das man ein unglaubliches Wissen von Programmierung etc braucht? Zudem wäre es gut, wenn man dort einen Domain freischalten könnte. (.de, so dass ichbiete.. wegfällt)

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von Prustel ()

  • Also ich kann dir als kostenlosen Anbieter nur nPage.de Empfelen!
    Eine Domaine bekommst du für 0,49 im Monat bei 1&1.

    Mit CSS.
    Die Datei musst du auf deinem Server hochladen und dann auf jede Seite schreiben:

    Quellcode

    1. <link rel="stylesheet" type="text/css" href="LINK ZU DER CSS DATEI!">


    Ich hoffe ich konnte dir helfen!

    Ich bin keine Signatur... Ich putze hier nur!

  • Wo hast du denn den css code her? Er sollte zu so jedem fertiglayout passen! Wenn ich mir allerdings so die namen der css elemente ansehe, würde ich auf einen blog mit suchfunktion und kalender tippen: #latest-post; #searchform; #calendar_foo;! Ich denke du siehst die ironie ;) . Bei dem Meer an Kostenlosen-Gratis-Einklick-Webhostern ist es so gut wie unmöglich das auszumachen.

    EDIT: @ Krötegames: wer lesen kann ist klar im vorteil ;)

    MfG SDX

  • Meine neue Frage ist ob jemand eine Seite kennt wo es eine Anleitung gibt für eine Lightbox.
    Ich hab einen Generator gefunden codeproject.com/KB/cs/GalleryCreator.aspx aber weiss nicht welchen Code man wo und wie verwenden muss :/
    Gibt es überhaupt eine Lightbox in html oder so die auf einer Seite wie Npage funktionieren würde?!

  • Es kommt nur draufan ob du das richtig einbindest denn HTML sowie CSS werden vom Browser dargestellt und nicht vom Server, auf dem sich die Dateien befinden.

    © 2008 by Teamgrill Productions