Beiträge von Billbos

Billbos

http://www.poure.eu/

Billbos

Ich danke dir vielmals!

Billbos

Hallo,

wie auf dem Screenshot zu sehen ist, verschiebt sich die #contentboxrechts nach Links!
Bei meinen anderen Sites tut sie dies nicht, trotz gleicher Einstellungen!

Komme einfach grade nicht drauf!
Hier ein Beispiel von einer anderen Site!

HTML

<div id="contenttop"></div>
        <div id="content">
            <div id="formularcontainer">
                <form action="" method="">
                    <fieldset id="contactForm">
                        <ul>
                            <li class="form">
                                Bei allen Feldern handelt es sich um Pflichtfelder!
                            </li>
                            <li class="form">
                                <label for="vorname">Vorname</label>
                                <input name="vorname" aria-required="true" id="vorname" type="text" />
                            </li>
                            <li class="form">
                                <label for="nachname">Nachname</label>
                                <input name="nachname" aria-required="true" id="nachname" type="text" />
                            </li>
                            <li class="form">
                                <label for="email">Email</label>
                                <input name="email" aria-required="true" id="email" type="email" />
                            </li>
                            <li class="form">
                                <label for="telefon">Tel.</label>
                                <input name="telefon" aria-required="true" id="telefon" type="tel" />
                            </li>
                            <li class="form">
                                <label for="betreff">Betreff</label>
                                <input name="betreff" aria-required="true" id="betreff" type="text" />
                            </li>
                            <li class="form">
                                <label for="nachticht">Nachricht</label>
                                   <textarea name="nachricht" aria-required="true" id="nachricht" rows="5" cols="20">
                                </textarea>
                            </li>
                            <li class="form">
                            <input class="btnCancel" type="reset" name="cancel" value="Abbrechen" />
                            <input class="btnSend" type="submit" name="absenden" value="Bestellen" />
                            </li>
                        </ul>
                    </fieldset>
                </form>
            </div>

            <div id="contentboxrechts">
                <h2 class="sidebar">Überschrift h2</h2>
                    <hr class="contentboxtrennlinie" />
                        <p class="sidebar-font">
                        Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
                        </p>
            </div>

            <br clear="left" />

        </div>

    <div id="contentbottom"></div>

Alles anzeigen

CSS

Code

/*---------- SCHRIFTEN ----------*/


h2.boxueberschrift {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 30px;
    text-indent: 10px;
    color: #7e7e7e;
    text-shadow: 0px 1px 0px #fff;
    }

h2.sidebar {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    text-indent: 10px;
    color: #7e7e7e;
    text-shadow: 0px 1px 0px #fff;
    margin-bottom: 10px;
    }

p.sidebar-font {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    margin-left: 30px;
    color: #7e7e7e;
    padding-bottom: 20px;
    }




/*---------- CONTENT ----------*/


#contenttop {
    background: #7e7e7e;
    width: 960px;
    height: 25px;
    margin: 25px auto 0 auto;
    -webkit-border-top-left-radius: 7px;
    -webkit-border-top-right-radius: 7px;
    -khtml-border-top-left-radius: 7px;
    -khtml-border-top-right-radius: 7px;
    -moz-border-radius-topleft: 7px;
    -moz-border-radius-topright: 7px;
    -webkit-box-shadow: 0px 1px 2px #333;
    box-shadow: 0px 1px 2px #333;
    }

#contentindex {
    background: #ebebeb;
    width: 910px;
    margin: 25px auto 0 auto;
    -webkit-border-top-left-radius: 7px;
    -webkit-border-top-right-radius: 7px;
    -khtml-border-top-left-radius: 7px;
    -khtml-border-top-right-radius: 7px;
    -moz-border-radius-topleft: 7px;
    -moz-border-radius-topright: 7px;
    -webkit-box-shadow: 0px 1px 2px #333;
    -webkit-box-shadow: 0px 1px 2px #333;
    box-shadow: 0px 1px 2px #333;
    padding: 0 25px 20px 25px;
    }

#content {
    background: #ebebeb url(../img/content_hintergrund.png) repeat-y;
    width: 910px;
    margin: 0 auto;
    padding: 0 25px 20px 25px;
    }


#contentbottom {
    background: #7e7e7e;
    width: 960px;
    height: 25px;
    margin: 0 auto 25px auto;
    -webkit-border-bottom-left-radius: 7px;
    -webkit-border-bottom-right-radius: 7px;
    -khtml-border-bottom-left-radius: 7px;
    -khtml-border-bottom-right-radius: 7px;
    -moz-border-radius-bottomleft: 7px;
    -moz-border-radius-bottomright: 7px;
    -webkit-box-shadow: 0px 1px 2px #333;
    box-shadow: 0px 1px 2px #333;
    border-top: 1px solid #fff;
    }

#contentboxlinks {
    background: transparent;
    width: 290px;
    margin: 20px 10px auto auto;
    float: left;
    }


#contentboxmitte {
    background: transparent;
    width: 290px;
    margin: 20px 10px auto 10px;
    float: left;
    }


#contentboxrechts {
    background: transparent;
    width: 290px;
    margin: 20px auto auto 10px;
    float: left;
    }

Alles anzeigen

Ich bezweifel zwar, dass das Formular schuld ist, aber hier der komplette CSS Code!

Code

@charset "UTF-8";
/* CSS danielsfotos.com */


* {
    margin: 0;
    padding: 0;
    }


p {
    color: #989898;
    }


/*---------- BODY ----------*/


body {
    background: #c9c7c8;
    }


/*---------- WRAPPER ----------*/


#wrapper {
    background: transparent;
    width: 960px;
    margin: 50px auto auto auto;
    }

/*---------- NAVIGATION ----------*/


#navigation {
    font: Arial, Helvetica, sans-serif;
    background: #ebebeb;
    width: 645px;
    height: 40px;
    -webkit-border-radius: 7px;
    -khtml-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px; 
    -webkit-box-shadow: 0px 1px 2px #333;
    -moz-box-shadow: 0px 1px 2px #333;
    box-shadow: 0px 1px 2px #333;
    float: left;
    text-decoration: none;
    }

#navigation ul {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    }

#navigation li {
    width: 120px;
    display: inline-block;
    line-height: 45px;
    font-size: 25px;
    text-align: center;
    }

#navigation li a {
    font: 30px bolder;
    color: #7e7e7e;
    text-shadow: 0px 1px 0px #fff;
    text-decoration: none;
    }

#navigation li a:hover {
    font: 30px bolder;
    color: #339ce6;
    text-shadow: 0px 1px 0px #fff;
    text-decoration: none;
    }

#navigation-sidebar {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    width: 290px;
    margin-bottom: 20px;
    }

#navigation-sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    text-indent: 30px;
    }


#navigation-sidebar li {
    width: 290px;
    text-decoration: none;
    padding: 5px 0;
    }

#navigation-sidebar li a {
    color: #7e7e7e;
    text-decoration: none;
    }

#navigation-sidebar li a:hover {
    color: #fff;
    text-decoration: none;
    }


/*---------- LOGO ----------*/


#logo {
    height: 40px;
    width: 315px;
    float: left;
    display: inline-block;
    background: transparent url(../img/logo.png);
    }


/*---------- HEADER ----------*/


#header {
    background: transparent url(../img/header.png) no-repeat;
    width: 960px;
    height: 265px;
    border: none;
    margin-top: 35px;
    }

#headerbottom {
    background: #ebebeb;
    width: 960px;
    height: 35px;
    -webkit-border-bottom-left-radius: 7px;
    -webkit-border-bottom-right-radius: 7px;
    -khtml-border-bottom-left-radius: 7px;
    -khtml-border-bottom-right-radius: 7px;
    -moz-border-radius-bottomleft: 7px;
    -moz-border-radius-bottomright: 7px;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    -webkit-box-shadow: 0px 1px 2px #333;
    -moz-box-shadow: 0px 1px 2px #333;
    box-shadow: 0px 1px 2px #333;
    }
/*---------- CONTENT ----------*/


#contenttop {
    background: #7e7e7e;
    width: 960px;
    height: 25px;
    margin: 25px auto 0 auto;
    -webkit-border-top-left-radius: 7px;
    -webkit-border-top-right-radius: 7px;
    -khtml-border-top-left-radius: 7px;
    -khtml-border-top-right-radius: 7px;
    -moz-border-radius-topleft: 7px;
    -moz-border-radius-topright: 7px;
    -webkit-box-shadow: 0px 1px 2px #333;
    box-shadow: 0px 1px 2px #333;
    }

#contentindex {
    background: #ebebeb;
    width: 910px;
    margin: 25px auto 0 auto;
    -webkit-border-top-left-radius: 7px;
    -webkit-border-top-right-radius: 7px;
    -khtml-border-top-left-radius: 7px;
    -khtml-border-top-right-radius: 7px;
    -moz-border-radius-topleft: 7px;
    -moz-border-radius-topright: 7px;
    -webkit-box-shadow: 0px 1px 2px #333;
    -webkit-box-shadow: 0px 1px 2px #333;
    box-shadow: 0px 1px 2px #333;
    padding: 0 25px 20px 25px;
    }

#content {
    background: #ebebeb url(../img/content_hintergrund.png) repeat-y;
    width: 910px;
    margin: 0 auto;
    padding: 0 25px 20px 25px;
    }


#contentbottom {
    background: #7e7e7e;
    width: 960px;
    height: 25px;
    margin: 0 auto 25px auto;
    -webkit-border-bottom-left-radius: 7px;
    -webkit-border-bottom-right-radius: 7px;
    -khtml-border-bottom-left-radius: 7px;
    -khtml-border-bottom-right-radius: 7px;
    -moz-border-radius-bottomleft: 7px;
    -moz-border-radius-bottomright: 7px;
    -webkit-box-shadow: 0px 1px 2px #333;
    box-shadow: 0px 1px 2px #333;
    border-top: 1px solid #fff;
    }

#contentboxlinks {
    background: transparent;
    width: 290px;
    margin: 20px 10px auto auto;
    float: left;
    }


#contentboxmitte {
    background: transparent;
    width: 290px;
    margin: 20px 10px auto 10px;
    float: left;
    }


#contentboxrechts {
    background: transparent;
    width: 290px;
    margin: 20px auto auto 10px;
    float: left;
    }


/*---------- FOOTER ----------*/


#navigationfooter {
    font: Arial, Helvetica, sans-serif;
    float: right;
    margin: 0 20px auto auto;
    }


#navigationfooter ul {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    }

#navigationfooter li {
    display: inline-block;
    line-height: 25px;
    font-size: 12px;
    text-align: center;
    padding: 0 12px;
    }

#navigationfooter li a {
    font-size: 12px;
    font-weight: bold;
    color: #c9c8c8;
    text-decoration: none;
    }

#navigationfooter li a:hover {
    color: #fff;
    font-weight: bold;
    }


/*---------- TRENNLINIEN ----------*/


hr.contentboxtrennlinie {
    width: 290px;
    border-top: 1px solid #f6f6f6;
    border-bottom: 1px solid #8f8f8f;
    margin: 1px 0 10px 0;
    } 


/*---------- ICONS ----------*/


.facebook-link {
    width: 290px;
    height: 166px;
    display: block;
    margin: 0 auto;
    }


.foto1 {
    background: url(../img/facebook_index.png) no-repeat;
    }

.facebook-link:hover {
    background-position: 0 -166px;
    }

.youtube-link {
    width: 175px;
    height: 170px;
    display: block;
    margin: 0 auto;
    float: left;
    padding-right: 2px;
    }

.foto2 {
    background: url(../img/youtube_index.png) no-repeat;
    }

.youtube-link:hover {
    background-position: 0 -170px;
    }

.profilbild {
    background: url(../img/profilbild.png) no-repeat;
    display: block;
    width: 290px;
    height: 375px;
    border: none;
    margin: 0;
    padding: 0;
    }

.facebookabout-link {
    width: 290px;
    height: 40px;
    display: block;
    margin: 0 auto;
    }


.foto3 {
    background: url(../img/facebook_link.png) no-repeat;
    }

.facebookabout-link:hover {
    background-position: 0 -40px;
    }

.youtubeabout-link {
    width: 290px;
    height: 40px;
    display: block;
    margin: 0 auto;
    }


.foto4 {
    background: url(../img/youtube_link.png) no-repeat;
    }

.youtubeabout-link:hover {
    background-position: 0 -40px;
    }


/*---------- FORMULAR ----------*/


#formularcontainer {
    width: 580px;
    padding: 25px 0 25px 0;
    float: left;
    }


fieldset { 
    padding:0 40px 35px 50px;    
    margin:0;
    border:0px solid transparent;
} 

fieldset ul {
    margin: 0;
    padding: 15px 0 0 0;
    list-style-type: none;
}
form {
    border: 1px solid #7e7e7e;
      background: transparent;
    width:360px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 15px 0 0 0;
}
li.form {
    float:left;
    margin:0 0 12px 0;
    padding:0;
    text-align: left;
    width:253px;        
}
.errorMsg {
    float:left;
    width:360px;
    margin:0 0px 20px -50px;
    padding:0;
    border-width:1px 0;
    border-style: solid;
    border-color: #E00 #FFDCE5;
    color:#E00;
    background-color:#FFDCE5;
}
.errorMsg span {
    display: inline-block;
    padding:15px 40px 15px 50px;    
}
label { 
    float:left;
    line-height:167%;
    width:83px;
    cursor: pointer;
    position:relative;    
}
label[title~='Pflichtfeld']:after {
    content:"*";
    position: absolute;
    left:70px;
    top:0;
    font-weight:bold;
    z-index:5;
}
em,
label[title~='Pflichtfeld']:after {
    font-weight:bold;
    font-size:142%;
    color:#E00;
}
input{
    float:left;
    height:20px;
    width: 161px;     
    border:1px solid #8eb0d9;
    padding:0;
    background:#FFF;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  -webkit-box-shadow: 2px 2px 3px #e2e2e2, inset 2px 2px 3px #e2e2e2;
  -moz-box-shadow: 2px 2px 3px #e2e2e2, inset 2px 2px 3px #e2e2e2;
  box-shadow: 2px 2px 3px #e2e2e2, inset 2px 2px 3px #e2e2e2;
}


textarea {
    float:left;
    height:70px;
    width: 161px;     
    border:1px solid #8eb0d9;
    padding:0;
    background:#FFF;  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  -webkit-box-shadow: 2px 2px 3px #e2e2e2, inset 2px 2px 3px #e2e2e2;
  -moz-box-shadow: 2px 2px 3px #e2e2e2, inset 2px 2px 3px #e2e2e2;
  box-shadow: 2px 2px 3px #e2e2e2, inset 2px 2px 3px #e2e2e2;
}


input.btnCancel, 
input.btnSend {
    margin: 25px 0 0 0;
    float:left;
    width:85px;
    height:30px;
    font-weight:bold;
    color: #FFF;
    text-align: center;
    padding:0 0 2px 0;
    text-indent:0px;
    border:1px solid #8eb0d9;
    background-color:#8eb0d9;
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    cursor:pointer;
      -webkit-box-shadow: inset 0px 0px 0px;
      -moz-box-shadow: inset 0px 0px 0px;
      box-shadow: inset 0px 0px 0px;    
}
input.btnSend  {
    float:right;
    margin-right:7px;
    border:1px solid #175ba2;  
      -webkit-box-shadow:1px 1px 2px #ccc;
    -moz-box-shadow:1px 1px 2px #ccc;
    box-shadow:1px 1px 2px #ccc;
    background:#175ba2;
}


fieldset legend {
    margin:0 0 0 -60px;
    padding:7px 20px;
    color:#FFF;
    font-weight:bold;
    font-size:18px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow:1px 1px 2px #ccc;
    -moz-box-shadow:1px 1px 2px #ccc;
    box-shadow:1px 1px 2px #ccc;
    background-color:#8eb0d9;
    background: -moz-linear-gradient(top, #8eb0d9, #6293cb);
      background: -webkit-gradient(linear, left top, left bottom,color-stop(0, #8eb0d9), color-stop(1, #6293cb));
    background: -webkit-linear-gradient(top, #8eb0d9, #6293cb);
    background: -o-linear-gradient(top, #8eb0d9, #6293cb);
    background: linear-gradient(top, #8eb0d9, #6293cb);          
}    
fieldset ul li:first-child {
    margin:0 40px 12px 0;    
}


input:active, 
input:hover, 
input:focus {
    background-color: #d9f0f9;
    border:1px solid #175ba2;    
}


.error {
    color:#E00;    
}
.error input {
    border-color:#E00;
    background-color:#FFDCE5;
  -webkit-box-shadow: 2px 2px 3px #fec3d2, inset 2px 2px 3px #fec3d2;
  -moz-box-shadow: 2px 2px 3px #fec3d2, inset 2px 2px 3px #fec3d2;
  box-shadow: 2px 2px 3px #fec3d2, inset 2px 2px 3px #fec3d2;    
}


input {
    outline:none;
   -webkit-transition: all 0.25s ease-in-out;
      -moz-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}
input.btnSend:hover,
input.btnSend:active,
input.btnSend:focus  {
     -webkit-box-shadow: 0 0 5px rgba(98,147,203,.9); 
    -moz-box-shadow: 0 0 5px rgba(98,147,203,.9);
   box-shadow: 0 0 5px rgba(98,147,203,.9);
   border:1px solid rgba(23,91,162,1);
    background:#175ba2;
}
input.btnCancel:hover,
input.btnCancel:active,
input.btnCancel:focus {
    -webkit-outline:none; 
      -moz-outline:none; 
      outline:none; 
    background:#8eb0d9;
}


/*---------- SCHRIFTEN ----------*/


h2.boxueberschrift {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 30px;
    text-indent: 10px;
    color: #7e7e7e;
    text-shadow: 0px 1px 0px #fff;
    }

h2.sidebar {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    text-indent: 10px;
    color: #7e7e7e;
    text-shadow: 0px 1px 0px #fff;
    margin-bottom: 10px;
    }

p.sidebar-font {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    margin-left: 30px;
    color: #7e7e7e;
    padding-bottom: 20px;
    }
/*----------  ----------*/
/*----------  ----------*/
/*----------  ----------*/
/*----------  ----------*/

Alles anzeigen

MFG

Billbos

haha du bist auch ein ganz komischer immer unregistriert, anstatt deinen normalen Account zu benutzen! TROTTEL!

Billbos

schon erledigt danke!

Billbos

Hallo,

so schaut es aus!

so soll es ausschauen!

und hier ist der Code dazu!
Falsch gecleart?, wobei mir nicht auffällt an welcher Stelle!

Code

#content {
    background: #ebebeb url(../img/content_hintergrund.png) repeat-y;
    width: 910px;
    margin: 0 auto;
    padding: 0 25px 20px 25px;
    }




#contentboxlinks {
    background: transparent;
    width: 290px;
    margin: 20px 10px auto auto;
    float: left;
    }


#contentboxmitte {
    background: transparent;
    width: 290px;
    margin: 20px 10px auto 10px;
    float: left;
    }


#contentboxrechts {
    background: transparent;
    width: 290px;
    margin: 20px auto auto 10px;
    float: left;
    }

Alles anzeigen

HTML

<div id="contenttop"></div>
        <div id="content">
            <div id="contentboxlinks">
                <h2 class="boxueberschrift">Überschrift h2</h2>
                    <hr class="contentboxtrennlinie" />
                        <p>
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
                        </p>
            </div>

            <div id="contentboxmitte"></div>
                <div class="profilbild"></div>

            <div id="contentboxrechts"></div>

            <br clear="left" />

        </div>

Alles anzeigen

Billbos

Ja schon klar!!!! Nur mir war einfach unklar wieso ich jetzt zwei Klassenamen vergeben soll. Schließlich funktioniert eine Navigation auch nicht einfach wenn ich #navi1 ul .... und plötzlich #navi2 li ....!
Danke dir trotzdem!

Billbos

So funktioniert es, aber ich möchte doch gerne wissen, wieso der von mir gewählte name nicht funktioniert?

Billbos

leider klappt es beim weglassen des .img auch nicht! Ich habe jetzt zwar den Freiraum für das Bild aber es für nicht angezeigt!

Billbos

Danke schonmal für eure Tips!
Ich verstehe das mit der zweiten class nicht ganz. Hier mein Ansatz.

Code

img.facebookindex {
    width: 290px;
    height: 166px;
    display: block;
    margin: 0 auto;
    }


img.facebookindex  {
    background: url(../img/facebook_index.png) no-repeat;
    }

img.facebookindex:hover {
    background-position: 0 -166px;
    }

Alles anzeigen

HTML

<a href="#" class="facebookindex"></a>

Billbos

Hallo,

ich habe vor, folgende Hintergrundgrafik durch background-postion so zu verschieben, dass sich zwei verschiedene Versionen ergeben!

In diesem Falle ist die Grafik 290px lang und 332 Pixel hoch. Als Einzelgrafik hätte sie den Wert 290px*166px.
Der obere Teil soll immer angezeigt werden und die blaue Facebook schrift beim darüberfahren.
Irgendwo ist bei mir im CSS bzw. im HTML ein Fehler?!?!

MFG

HTML

<a href=""><img class="facebookindex" src="img/facebook_index.png" /></a>
                         <p>
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                        </p>

CSS

Code

img.facebookindex a {
    background: url(../img/facebook_index.png) no-repeat;
    background-position: 0 0;
    width: 290px;
    height: 166px;
    }

img.facebookindex a:hover {
    background-position: 290px -166px;
    width: 290px;
    height: 166px;
    }

Alles anzeigen

Billbos

Hallo,

im folgenden Bild seht ihr eine Schrift, die den Anschein erweckt als wäre sie eingestanzt. Diesen Effekt habe ich mit Photoshop realisiert.
Weiß jemand, wie ich dies mit CSS3 realisieren kann?
Text-Shadow!, nur wie beginne ich?

MFG

Mein Ansatz bis jetzt schaut so aus! (oben im Brower unten in Photoshop)

Code

#navigation li a {
    font: 30px bolder;
    color: #7e7e7e;
    text-shadow: 0px 1px 0px #fff;
    text-decoration: none;
    }

#navigation li a:hover {
    font: 30px bolder;
    color: #339ce6;
    text-shadow: 0px 1px 0px #fff;
    text-decoration: none;
    }

Alles anzeigen

In der Schrift, die ich in Photoshop erstellt habe, befindet sich noch ein Farbverlauf von Schwarz nach weiß! Wie realisiere ich den auf die Schrift mit CSS3?

Billbos

Ich weiß zwar nicht warum, aber ich habe mich an meinen localserver orientiert. Dort ist die Gallerie nicht erschienen im Internet tut sie das jedoch.
Danke dir für deine Hilfe!

Billbos

Ich habe doch vorher beides ausprobiert, sprich die Datei lag ebenfalls in den anderen Pfad!
Mit dem Cache löschen dachte ich wäre auch richtig, aber es hat sich in der Richtung nichts getan. Den besagten Weg habe ich bereits ausprobiert!

Billbos

Also, ich bin es jetzt nochmal durchgegangen! Ich hatte am Anfang ausversehen die Thumbs gelöscht, deshalb wurden diese nicht gefunden. Nun habe ich neue erstellt und diese wieder angefügt. In meiner Gallerie (neuer Tab | Flash) ist ebenfalls das <div slideshow> verlinkt. Mein einziges Problem ist jetzt, dass die Gallerie mit ihren 900*600 Pixeln nicht angezeigt wird.

Billbos

Ja das sehe ich, dort ist gar nichts eingbunden, schau mal wie bei mir ausschaut!

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" />
<title>danielsfotos.com | New York</title>


<link rel="stylesheet" type="text/css" href="../../../css/gallerie.css" />


</head>


<body>


<div id="slideshow">
<script type="text/javascript" src="gallery/js/jquery.js"></script>
<script type="text/javascript" src="gallery/js/swfobject.js"></script>
<script type="text/javascript" src="gallery/js/flashgallery.js"></script>
<script type="text/javascript">
jQuery.flashgallery('gallery/gallery.swf', 'gallery/config.json', { width: '900px', height: '600px', background: 'transparent' });
</script>
</div>


</body>
</html>

Alles anzeigen

Billbos

haha, eine Bildergallerie!
Du hast schon recht!
Also ich habe es ausversehen gelöscht! Nun ist die Seite aktualsiert worden, doch meine Flashdatei kann ich noch immer nicht sehen?!?!?

Billbos

Dazu muss ich sagen, dass ich bis jetzt nur eine New York Gallerie habe. Aber mir fehlen alle Thumbs!!!

Billbos

Aber hier müsste es doch all die Thumbs anzeigen, die eben auch dort waren "New York, Wedding u.s.w."
vom Quellcode her, kann ich ja dort noch nicht sein!

<div id="imagecontainer">  <div class="thumbleft"><a href="gallerie/newyork_projekt/gallery/new_york_gallerie.php" target="_blank"><img src="gallerie/gallerie_thumbnails/newyork.png" /></a></div>  <div class="thumbmiddle"><img src="gallerie/gallerie_thumbnails/exceeding.png" /></div>  <div class="thumbright"><img src="gallerie/gallerie_thumbnails/people.png" /></div> <br clear="left" />
</div>

Billbos

Also komisch, alles neu draufgeladen, der Quellcode stimmt nur es wird nichts angezeigt!

Beiträge von Billbos

Contentboxrechts verschiebt sich

Hoover durch background-position

Contentboxrechts verschiebt sich

Hoover durch background-position

Box überlagert!

Box überlagert!

Hoover durch background-position

Hoover durch background-position

Hoover durch background-position

Hoover durch background-position

Hoover durch background-position

CSS3 Stanzschrift

Simples Positionierungsproblem

Simples Positionierungsproblem

Simples Positionierungsproblem

Simples Positionierungsproblem

Simples Positionierungsproblem

Simples Positionierungsproblem

Simples Positionierungsproblem

Simples Positionierungsproblem