Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag06.10.2009 um 14:53 (UTC)    
Titel: Gallerie - Problem mit den Codes

Hallo HPBKBastler,

ich will bald eine eigene Gallerie auf meiner Seite haben, die nicht vom HPBK ist, und auch ein gutes Design hat.

Ich bin auf diese Seite gestossen:
http://www.sohtanaka.com/web-design/examples/image-rotator/#

Hier das Tutorial:
http://designm.ag/tutorials/image-rotator-css-jquery/

Allerdings, bin ich ein totaler cssnoob und werde daraus gar nicht schlau^^

Wo füge ich welche Codes ein?
Und ist das überhaupt eine Beschreibung zur ganzen Gallerie?

LG
jl
Beitrag06.10.2009 um 15:16 (UTC)    
Titel:

diesen teil in css-code:
Code:

.main_image {
    width: 598px;
    height: 456px;
    float: left;
    background: #333;
    position: relative;
    overflow: hidden; /*--Overflow hidden allows the description to toggle/tuck away as it slides down--*/
    color: #fff;
}
.main_image h2 {
    font-size: 2em;
    font-weight: normal;
    margin: 0 0 5px;
    padding: 10px;
}
.main_image p {
    font-size: 1.2em;
    line-height: 1.6em;
    padding: 10px;
    margin: 0;
}
.block small { /*--We'll be using this same style on our thumbnail list--*/
    font-size: 1em;
    padding: 0 0 0 20px;
    background: url(icon_calendar.gif) no-repeat 0 center;
}
.main_image .block small {margin-left: 10px;}
.main_image .desc{
    position: absolute;
    bottom: 0;
    left: 0; /*--Stick the desc class to the bottom of our main image container--*/
    width: 100%;
    display: none; /*--Hide description by default, if js is enabled, we will show this--*/
}
.main_image .block{
    width: 100%;
    background: #111;
    border-top: 1px solid #000;
}
.main_image a.collapse { /*--This is our hide/show tab--*/
    background: url(btn_collapse.gif) no-repeat left top;
    height: 27px;
    width: 93px;
    text-indent: -99999px;
    position: absolute;
    top: -27px;
    right: 20px;
}
.main_image a.show {background-position: left bottom;}

.image_thumb {
    float: left;
    width: 299px;
    background: #f0f0f0;
    border-right: 1px solid #fff;
    border-top: 1px solid #ccc;
}
.image_thumb img {
    border: 1px solid #ccc;
    padding: 5px;
    background: #fff;
    float: left;
}
.image_thumb ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.image_thumb ul li{
    margin: 0;
    padding: 12px 10px;
    background: #f0f0f0 url(nav_a.gif) repeat-x;
    width: 279px;
    float: left;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #fff;
    border-right: 1px solid #ccc;
}
.image_thumb ul li.hover { /*--Hover State--*/
    background: #ddd;
    cursor: pointer;
}
.image_thumb ul li.active { /*--Active State--*/
    background: #fff;
    cursor: default;
}
html .image_thumb ul li h2 {
    font-size: 1.5em;
    margin: 5px 0;
    padding: 0;
}
.image_thumb ul li .block {
    float: left;
    margin-left: 10px;
    padding: 0;
    width: 170px;
}
.image_thumb ul li p{display: none;}/*--Hide the description on the list items--*/


diesen teil in den quellcode deiner seite:
Code:

<div class="main_image">
    <img src="banner1.jpg" alt="" />
    <div class="desc">
        <a href="#" class="collapse">Close Me!</a>
        <div class="block">
            <h2>Title</h2>
            <small>Date</small>
            <p>Copy</p>
        </div>
    </div>
</div>
<div class="image_thumb">
    <ul>
        <li>
            <a href="banner1.jpg"><img src="banner1_thumb.jpg" alt="Image Name" /></a>
            <div class="block">
                <h2>Title</h2>
                <small>Date</small>
                <p>Copy</p>
            </div>
        </li>
    </ul>
</div>


dann kommt noch der teil wo man jquery braucht
ich weiß nicht genau ob das hier geht aber es ist ja eigentlich nur javascript
du musst halt die bibliothek extern hochladen und dann einbinden

also wenn das alles geht dann würde ich das einen einsteiger in der programmierung nicht empfehlen
das script ist wohl leicht aufgebaut aber für anfänger endeutig zu schwer und noch dazu ist es ja in englisch beschrieben

mfg
______________
Forenregeln, FAQ, Suchfunktion
Beitrag06.10.2009 um 17:23 (UTC)    
Titel:

Mein Englisch ist relativ gut, verstehe eigtl.alles was er sagt außer eben die die ich auch nicht in Deutsch verstehen würde Razz

Den zweiten Teil mit dem Quellcode verstehe ich noch, aber wo soll der CSSCode hin?

Und was genau muss ich downloaden und wo wieder hochladen?

LG
Beitrag07.10.2009 um 15:34 (UTC)    
Titel:

*PUSH*
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de