Countdown Code auf Grafik

CSS, Java Script u.s.w

Moderator: HTML-Laie

Benutzeravatar
Butterblume
Held des Forums
Held des Forums
Beiträge: 7524
Registriert: Fr 3. Aug 2012, 16:33
Mein Vorname: Karin
Wohnort: Peine / Niedersachsen
Kontaktdaten:

Re: Countdown Code auf Grafik

Beitrag von Butterblume »

Kussi... und Bild für all eure Bemühungen!

Butterblume / Karin

https://www.karins-poserbilder.de
Benutzeravatar
HTML-Laie
Moderator
Moderator
Beiträge: 354
Registriert: So 19. Nov 2017, 12:42
Mein Vorname: Hape
Wohnort: Wesermarsch
Kontaktdaten:

Re: Countdown Code auf Grafik

Beitrag von HTML-Laie »

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 :)
Unmögliches wird sofort erledigt, Wunder dauern etwas länger. 95% aller Computerprobleme befinden sich zwischen Tastatur und Stuhl.
Hapes-Javascript-Demo-Page ; Hapes-Baustelle ; Hape's-Javascript-Forum ; Hapes-Fotowelt ; Boitwarder Bürgerverein
Benutzeravatar
Butterblume
Held des Forums
Held des Forums
Beiträge: 7524
Registriert: Fr 3. Aug 2012, 16:33
Mein Vorname: Karin
Wohnort: Peine / Niedersachsen
Kontaktdaten:

Re: Countdown Code auf Grafik

Beitrag von Butterblume »

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.
Kussi... und Bild für all eure Bemühungen!

Butterblume / Karin

https://www.karins-poserbilder.de
Benutzeravatar
Butterblume
Held des Forums
Held des Forums
Beiträge: 7524
Registriert: Fr 3. Aug 2012, 16:33
Mein Vorname: Karin
Wohnort: Peine / Niedersachsen
Kontaktdaten:

Re: Countdown Code auf Grafik

Beitrag von Butterblume »

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
Kussi... und Bild für all eure Bemühungen!

Butterblume / Karin

https://www.karins-poserbilder.de
Benutzeravatar
HTML-Laie
Moderator
Moderator
Beiträge: 354
Registriert: So 19. Nov 2017, 12:42
Mein Vorname: Hape
Wohnort: Wesermarsch
Kontaktdaten:

Re: Countdown Code auf Grafik

Beitrag von HTML-Laie »

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
Unmögliches wird sofort erledigt, Wunder dauern etwas länger. 95% aller Computerprobleme befinden sich zwischen Tastatur und Stuhl.
Hapes-Javascript-Demo-Page ; Hapes-Baustelle ; Hape's-Javascript-Forum ; Hapes-Fotowelt ; Boitwarder Bürgerverein
Benutzeravatar
Butterblume
Held des Forums
Held des Forums
Beiträge: 7524
Registriert: Fr 3. Aug 2012, 16:33
Mein Vorname: Karin
Wohnort: Peine / Niedersachsen
Kontaktdaten:

Re: Countdown Code auf Grafik

Beitrag von Butterblume »

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?
Kussi... und Bild für all eure Bemühungen!

Butterblume / Karin

https://www.karins-poserbilder.de
Benutzeravatar
Butterblume
Held des Forums
Held des Forums
Beiträge: 7524
Registriert: Fr 3. Aug 2012, 16:33
Mein Vorname: Karin
Wohnort: Peine / Niedersachsen
Kontaktdaten:

Re: Countdown Code auf Grafik

Beitrag von Butterblume »

Habs gefunden
Kussi... und Bild für all eure Bemühungen!

Butterblume / Karin

https://www.karins-poserbilder.de
Benutzeravatar
Butterblume
Held des Forums
Held des Forums
Beiträge: 7524
Registriert: Fr 3. Aug 2012, 16:33
Mein Vorname: Karin
Wohnort: Peine / Niedersachsen
Kontaktdaten:

Re: Countdown Code auf Grafik

Beitrag von Butterblume »

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! :DA :DA :DA


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!
Kussi... und Bild für all eure Bemühungen!

Butterblume / Karin

https://www.karins-poserbilder.de
Antworten

Zurück zu „Fragen zu HTML & Programmiersprachen“

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 16 Gäste