HomepageHelfer.org

vergessen
https://www.test.karins-poserbilder.de/new%201.php

Bitte ans ENDE der CSS-Datei einfügen aber keine zusätzlichen Klammern einfügen, ich füge hier mal die gesamte CSS ein zur Verdeutlichung was ich meine:

Code: Alles auswählen

/*CSS Format by http://HomepageHelfer.net*/

@font-face {
    font-family: 'gabrielle';
    src: url('gabrielle-webfont.eot');
    src: url('gabrielle-webfont.eot?#iefix') format('embedded-opentype'),
         url('gabrielle-webfont.woff2') format('woff2'),
         url('gabrielle-webfont.woff') format('woff'),
         url('gabrielle-webfont.ttf') format('truetype'),
         url('gabrielle-webfont.svg#gabrielleregular') format('svg');
         font-weight: normal;
         font-style: normal;

}
/*CSS Format by http://HomepageHelfer.net*/

body {
        font-family: 'gabrielle';
        background-color: #E0E0E2;
        color: #5C2B41;
        font-size: 1.8em;
        margin: 0;
        padding: 1%;
}
ul, ol, dl {
        margin: 0;
}
h1 {
        font-size: 1.2em;
        letter-spacing: 0.1em;
        padding-left: 24px;
        color: #AB557A;
        text-align: left;
        margin-bottom: 15px;
        text-decoration: none;
        text-shadow: 1px 1px  black;
}
h2 {
        font-size: 1.0em;
        letter-spacing: 0.11em;
        padding-left: 18px;
        color: #AB557A;
        text-align: left;
        margin-bottom: 15px;
        text-decoration: none;
        text-shadow: 2px 2px  FF6A00;
}
h3 {
        font-size: 0.90em;
        font-weight: bold;
        letter-spacing: 0.10em;
        padding-left: 18px;
        color: #AB557A;
        text-align: left;
        margin-bottom: 15px;
        text-decoration: none;

}
img {
        border: none;
        max-width: 100%;
        height: auto;
}
a:link {
        color:  #AB557A;
        text-decoration: none;

}
a:visited {
        color: #AB557A;
        text-decoration: none;
}
a:hover, a:active, a:focus {
        text-decoration: underline;
        color: #AB557A;
}
textarea {
    max-width: 300px !important;
    width: 100%;
   color: #5C2B41;
   font-size: 0.6em;
   padding: 3px;
   background-color: #E0E0E2;
   border: 1px solid #5C2B41;
   margin-bottom: 2%;
   margin-top: 2%;
}
img {
        max-width: 100%;
        height: auto;
        border: 0;
        vertical-align: initial;
}
a img {
        border: none;
}
p {
        margin-top: 1.0em;
        margin-bottom: 1.0em;


}
/*-------- design--------- */
.container {
        width: 97%;
        padding: 1.5%;
        max-width: 1800px;
        background: #E0E0E2;
        background-image: url(../design/bg.jpg);
        background-repeat: repeat;
        border-radius: 9px;
        margin: 1% auto;
        -webkit-box-shadow:0 0 2px #5C2B41, 0 0 2px #5C2B41,0 0 2px #5C2B41,0 0 2px #5C2B41,0 0 2px #5C2B41,0 0 5px #5C2B41,0 0 5px #5C2B41,0 0 5px #5C2B41;
}
.container1 {
        width: 96%;
        padding: 2%;
        background: #E0E0E2;
        background-image: url(../design/bg_1.jpg);
        background-repeat: repeat;
        border: 1px solid #5C2B41;
        -webkit-box-shadow:0 0 2px #5C2B41, 0 0 2px #5C2B41,0 0 2px #5C2B41,0 0 2px #5C2B41,0 0 2px #5C2B41,0 0 5px #5C2B41,0 0 5px #5C2B41,0 0 5px #5C2B41;
}
.container2 {
   width: 98%;
   padding: 1%;
   float: left;
   background-color: #E0E0E2;
   border-radius: 9px;
   margin: 1% auto;
   margin-bottom: 2%;
   -webkit-box-shadow:0 0 2px #5C2B41, 0 0 2px #5C2B41,0 0 2px #5C2B41,0 0 2px #5C2B41,0 0 2px #5C2B41,0 0 5px #5C2B41,0 0 5px #5C2B41,0 0 5px #5C2B41;
}

}
.header {
        width: 100%;
        max-height: 100%;
        margin-bottom: 1,4%;
}
.sidebar {
        float: left;
        width: 20%;
}
.box-left {
        float: left;
        width: 96%;
        text-align: center;
        font-size: 1.0em;
        padding: 1%;
        margin-bottom: 2.5%;
}
.box-left-navi {
        float: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
        width: 96%;
        text-align: left;
        padding: 1%;
        padding-bottom: 15px;
        margin-bottom: 2.5%;
}
.content {
float: left;
width: 77%;
}

}
.content-text {
        float: left;
        width: 98%;
    text-align: left;
        padding: 1%;
    background-color: transparent;
         font-size: 1.2em;
}

.cc_container {
background: #E0E0E2 !important; /* Hintergrundfarbe des gesamten Bereichs */
color: #5C2B41 !important; /* Schriftfarbe des gesamten Bereichs */
}
.footer {
   position: relative;
   width: 100%;
   min-height: 50px;
   line-height: 48px;
   text-align: center;
   font-weight: normal;
   background-color: #E0E0E2;
   border: 1px solid #5C2B41;
   border-radius: 8px;
   -webkit-box-shadow:0 0 2px #5C2B41, 0 0 2px #5C2B41,0 0 2px #5C2B41,0 0 2px #5C2B41,0 0 2px #5C2B41,0 0 5px #5C2B41,0 0 5px #5C2B41,0 0 5px #5C2B41;
   margin-bottom: 1.4%;
   clear: both;
}
.clearfloat {
        clear: both;
        height: 0;
        font-size: 1px;
        line-height: 0px;
}

.balken-google {
   width: 100%;
   margin-bottom: 30px;
   text-align: left;
   padding: 1%;
}

.balken-werbung {
   float: left;
   width: 98%;
   background-color: #E0E0E2;
   border: 1px solid #5C2B41;
   border-radius: 8px;
   -webkit-box-shadow:    0 0 2px #5C2B41,    0 0 2px #5C2B41,    0 0 2px #5C2B41,    0 0 2px #5C2B41,    0 0 2px #5C2B41,    0 0 5px #5C2B41,    0 0 5px #5C2B41,    0 0 5px #5C2B41;
   margin-bottom: 2%;
   text-align: center;
   padding: 1%;
}

/* ----------Copyright-------- */
.copyright {
        font-size: 0.7em;
        letter-spacing: 2px;
        font-family: Impact;
        font-style: normal;
        color: #5C2B41;
        text-align: center;
        text-shadow: 1px 1px  #black;
}
.copyright a {
        font-size: 0.7em;
        font-family: Impact;
        font-style: normal;
        color: #5C2B41;
        text-decoration: none;
}
.copyright a:hover {
        color: #AB557A;
}

/* --------------Media Screen------------ */
/* Laptop/Tablet (1024px) */
@media only screen and (min-width: 481px) and (max-width: 768px) and (orientation: landscape) {
.container {
        width: 97.5%;
}
.header {
        width: 100%;
}
.sidebar {
        width: 100%;
}
.content {
        width: 100%;
        border-left: 0;
}
.footer {
        width: 100%;
}
.box-left {
        width: 100%;
        visibility: hidden;
        display: none;
}
.box-left-navi {
        width: 98%;
}
img {
        max-width: 100%
}
}
/* Tablet Portrait (768px) */
@media only screen and (min-width: 321px) and (max-width: 768px) and (orientation: portrait) {
.container {
        width: 97.5%;
}
.header {
        width: 100%;
}
.sidebar {
        width: 100%;
}
.content {
        width: 100%;
        border-left: 0;
}
.footer {
        width: 100%;
}
.box-left {
        width: 98%;
        visibility: hidden;
        display: none;
}
.box-left-navi {
        width: 98%;
}
img {
        max-width: 100%
}
}
/* Phone Landscape (480px) */
@media only screen and (min-width: 321px) and (max-width: 480px) and (orientation: landscape) {
.container {
        width: 97.5%;
}
.header {
        width: 100%;
}
.sidebar {
        width: 100%;
}
.content {
        width: 100%;
        border-left: 0;
}
.footer {
        width: 100%;
}
.box-left {
        width: 98%;
        visibility: hidden;
        display: none;
}
.box-left-navi {
        width: 98%;
}
img {
        max-width: 100%
}
}
/* Phone Portrait (320px) */
@media only screen and (max-width: 320px) {
.container {
        width: 97.5%;
}
.header {
        width: 100%;
}
.sidebar {
        width: 100%;
}
.content {
        width: 100%;
        border-left: 0;
}

.footer {
        width: 100%;
}
.box-left {
        width: 98%;
        visibility: hidden;
        display: none;
}
.box-left-navi {
        width: 98%;
}
img {
        max-width: 100%
}
}
.bgimg {
background-image: url('https://www.test.karins-poserbilder.de/images/countdown2019.png');
width:675px;height:500px;
}
.counter {
font-familiy:sans;
font-size:24px;
color:white;
position: absolute;
left: 47% ;
top: 115%;
}
=-->

So soll es aussehen.

LG Hape

Ist das die ganze css?

Äm...momentan ist irgenwie der Wurm drin auf meiner Seite, ich sehe die Schrift jetzt unten. Habe den Cach geleert, aber die schrift bleibt unten.

wer lesen kann ist klar im vorteil.... habe die komplette css eingefügt und hoch geladen

bild ja, aber kein countdown

https://www.test.karins-poserbilder.de/new%201.php

Guck mal wo der sitzt

Der Countdown erscheint ganz unten. Eventuell musst du mal mit den Wert top experimentieren und kleinere Werte eingeben. Ich seh mir das gleich noch mal genauer an.

LG Hape

Hape, du bist echt der Knaller!

Ich danke Dir von Herzen! Es hat geklappt!

https://www.test.karins-poserbilder.de/new%201.php

Eine Frage noch,wo kann ich jetzt die Schrift einstellen?

Habs gefunden

Zum Abschluss wollte ich nur noch einmal sagen, ich habs erst einmal auf die Happy Halloween geseztt

https://www.happy-halloween.karins-poserbilder.de/

Ist direkt unter der Überschrift auf dem Bild!

Hape, ich weiß gar nicht was ich sagen soll, bist echt ein Schatz und vor allem auch so fix!

Noch ein HINWEIS: Ich habe den countdown meiner Bildschirmauflösung angepasst.
Das heißt , dass er auf manchen Geräten nicht da sitzt wo er sitzen sollte! Auf meinem Tablet z.Bsp. sitzt er ziemlich weit unten am Bild. Aber man kann es nicht jedem recht machen... Und ich habe ja auch extra geschrieben für welche Auflösung diese Homepage erstellt ist!

HomepageHelfer.org

Countdown Code auf Grafik

Re: Countdown Code auf Grafik

Re: Countdown Code auf Grafik

Re: Countdown Code auf Grafik

Re: Countdown Code auf Grafik

Re: Countdown Code auf Grafik

Re: Countdown Code auf Grafik

Re: Countdown Code auf Grafik

Re: Countdown Code auf Grafik