Countdown Code auf Grafik
Moderator: HTML-Laie
- Butterblume
- Held des Forums
- Beiträge: 7528
- Registriert: Fr 3. Aug 2012, 16:33
- Mein Vorname: Karin
- Wohnort: Peine / Niedersachsen
- Kontaktdaten:
- HTML-Laie
- Moderator
- Beiträge: 355
- Registriert: So 19. Nov 2017, 12:42
- Mein Vorname: Hape
- Wohnort: Wesermarsch
- Kontaktdaten:
Re: Countdown Code auf Grafik
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:
So soll es aussehen.
LG Hape
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%;
}
=-->
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
Hapes-Javascript-Demo-Page ; Hapes-Baustelle ; Hape's-Javascript-Forum ; Hapes-Fotowelt ; Boitwarder Bürgerverein
- Butterblume
- Held des Forums
- Beiträge: 7528
- Registriert: Fr 3. Aug 2012, 16:33
- Mein Vorname: Karin
- Wohnort: Peine / Niedersachsen
- Kontaktdaten:
Re: Countdown Code auf Grafik
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.
Ä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.
- Butterblume
- Held des Forums
- Beiträge: 7528
- Registriert: Fr 3. Aug 2012, 16:33
- Mein Vorname: Karin
- Wohnort: Peine / Niedersachsen
- Kontaktdaten:
Re: Countdown Code auf Grafik
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
bild ja, aber kein countdown
https://www.test.karins-poserbilder.de/new%201.php
Guck mal wo der sitzt
- HTML-Laie
- Moderator
- Beiträge: 355
- Registriert: So 19. Nov 2017, 12:42
- Mein Vorname: Hape
- Wohnort: Wesermarsch
- Kontaktdaten:
Re: Countdown Code auf Grafik
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
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
Hapes-Javascript-Demo-Page ; Hapes-Baustelle ; Hape's-Javascript-Forum ; Hapes-Fotowelt ; Boitwarder Bürgerverein
- Butterblume
- Held des Forums
- Beiträge: 7528
- Registriert: Fr 3. Aug 2012, 16:33
- Mein Vorname: Karin
- Wohnort: Peine / Niedersachsen
- Kontaktdaten:
Re: Countdown Code auf Grafik
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?
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?
- Butterblume
- Held des Forums
- Beiträge: 7528
- Registriert: Fr 3. Aug 2012, 16:33
- Mein Vorname: Karin
- Wohnort: Peine / Niedersachsen
- Kontaktdaten:
Re: Countdown Code auf Grafik
Habs gefunden
- Butterblume
- Held des Forums
- Beiträge: 7528
- Registriert: Fr 3. Aug 2012, 16:33
- Mein Vorname: Karin
- Wohnort: Peine / Niedersachsen
- Kontaktdaten:
Re: Countdown Code auf Grafik
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!
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!
Wer ist online?
Mitglieder in diesem Forum: 0 Mitglieder und 8 Gäste