css Problem im neuen Template

Please post the URLs to pages, where you've made a CMSimple template available for download

Moderator: mikey

Post Reply
aceaccis
Posts: 71
Joined: Tue May 30, 2017 7:09 am

css Problem im neuen Template

Post by aceaccis » Tue Jul 11, 2017 2:08 pm

Hi zusammen,

beiße mir seit einiger Zeit die Zähne an einem Problem aus.

Ich möchte mit Hilfe von CSS im Head Breich eines Templates 2 Grafiken darstellen eine soll als Background no-repeate sticky bleiben und eine 2. soll an der selben Stelle repeate wiederholt werden.

Das ganze soll den zweck haben das bei einer großen Darstellung der Headbereich nicht zu leer wirkt bei einer kleinen am Schluß nur die erste Grafik in seiner sticky Position dargestellt werden soll.

Jetzt zeigt er mir nur die erste Grafik an und die 2. ignoriert er vollkommen. und das Problem mit dem repeat habe ich auch noch nicht raus das ist die Überlegung.

Code: Select all

#banner { width: 100%; height: 175px; 
   background-image: url(logo1.png), url(logo2.png);
                            ^               ^
                            |               |
           oberes Bild  ----+               |
                                            |
                           unteres Bild ----+ 
   background-position-x: 0px;
   background-position-y: 20px, 20px;
                            ^     ^
                            |     |
           oberes Bild  ----+     |
                                  |
                unteres Bild  ----+ 
                   
   background-repeat: repeat-x;
   background-size: 33%,  80%;
   background-color: #222244 }
   
@media only screen and (min-width:680px) {
    #banner { width: 600px; height: 175px }
}
Das ist Logo 1 :
logo1.PNG
und das Logo 2:
logo2.PNG
Hätte dazu jemand eine Idee oder einen anderen Ansatz ?

Ach ja so sieht es aktuell aus ohne dem 2. Logo :

Code: Select all

#banner {
    margin: 2px 2px 2px 2px;
    background: #222244
    url("images/bild1.png") left top no-repeat;
    background-size: 40%,  80%;
    background-position-x: 0px;
    background-position-y: 20px;
    height: 175px;
    border: 1px solid #FFF;
    -webkit-border-radius: 10px;
    box-shadow: 3px 2px 4px rgba(0,0,0,.4);
}
Danke und Gruß

Chris
You do not have the required permissions to view the files attached to this post.
Chris S. aus B
Hoster: df.eu
Domains: 25 an der Zahl
CMS: CMSimple_XH, jeweils 1.6.10 und nun 1.7.0

Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: css Problem im neuen Template

Post by Tata » Tue Jul 11, 2017 2:32 pm

Etwas, wie hier? http://cmsimple.sk/dd/?Vitajte-v-CMSimp ... ing_banner

Code: Select all

.header-01{background: url(images/header/header-overlay.png) no-repeat right top, url(images/header/header-background.jpg) no-repeat left top;}
Oder zwei DIVs nutzen mit eigenen Hintergründe und z-index(hier kann dann die Bilder im Hintergrund sogar responsive haben)? Etwa:

Code: Select all

<div class="banner-back">
<div class="banner-front">BANNER</div>
</div>
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

aceaccis
Posts: 71
Joined: Tue May 30, 2017 7:09 am

Re: css Problem im neuen Template

Post by aceaccis » Tue Jul 11, 2017 4:26 pm

Hi Tata,

die Idee mit den 2 Div's fand ich nicht schlecht als Lösung nur Funktionieren will es nicht oO.

CSS- Part :

Code: Select all

.banner_back {
    margin: 2px 2px 2px 2px;
    background: #222244
    url(images/head/logo2.png) repeat-x left top;	
    height: 175px;
    border: 1px solid #FFF;
    -webkit-border-radius: 10px;
    box-shadow: 3px 2px 4px rgba(0,0,0,.4);
}
.banner_front {
    background: 
    url(images/head/logo1.png) no-repeat left top;
}
und der Div Part :
<div class="banner_back"><div class="banner_front"></div></div>
Dabei Passiert das :
Back.PNG
das möchte ich jedoch erreichen :
ist.PNG
So Langsam treibt es mich an den Rand des Wahnsinn.

Also Logo2 ist quasi der kleine weiße Streifen der soll repeat-x dargestellt werden und Logo1 Der Hundekopf der darüber stehen soll.

Ich weiß im Aktuellen css fehlen noch die x/y Angaben aber soweit komme ich gar nicht erst.

Könnte es damit zusammen hängen das ich im oberen teil auch die Box mit definiere ?

Gruß Chris
You do not have the required permissions to view the files attached to this post.
Chris S. aus B
Hoster: df.eu
Domains: 25 an der Zahl
CMS: CMSimple_XH, jeweils 1.6.10 und nun 1.7.0

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: css Problem im neuen Template

Post by cmb » Tue Jul 11, 2017 5:06 pm

aceaccis wrote:die Idee mit den 2 Div's fand ich nicht schlecht als Lösung nur Funktionieren will es nicht oO.
Ich glaube, das kann auch gar nicht funktionieren. Wenn die zwei <div>s übereinander liegen, dann wird das untere vollständig verdeckt. Damit man das untere vollständig sieht, müsste man das obere vollständig transparent machen, und dann würde man nichts mehr vom oberen sehen.

Es ginge aber wohl, wenn das obere <div> entsprechend schmal gemacht wird. Dann könnte man die <div>s aber auch gleich nebeneinander positionieren.
Christoph M. Becker – Plugins for CMSimple_XH

Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: css Problem im neuen Template

Post by Tata » Tue Jul 11, 2017 5:08 pm

Versuch mal das

Code: Select all

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/*reset*/
*, html{margin:0; padding:0;}
body, .body{background: #fefefe; color: #555; font-family:arial; font-size: 16px;}
.banner{
    max-width: 100%; width: 100%; 
    min-height: 100px; height:200px; 
    background: url(images/banner-logo.png) no-repeat, url(images/banner-back-line.png), url(images/banner-back-img.jpg);
    }
</style>
<body class="body">
    <div class="banner">
        <!-- falls nötig, noch padding usw. anpassen -->
    </div>
</body>
</head>
Falls die Bilder transparent sind, kannst Du wievieleauchimmer rein definieren. Sind es die JPGs, muss man sie posizionieren.
banner.zip
You do not have the required permissions to view the files attached to this post.
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

aceaccis
Posts: 71
Joined: Tue May 30, 2017 7:09 am

Re: css Problem im neuen Template

Post by aceaccis » Tue Jul 11, 2017 5:14 pm

Hi,

bin nochmal in mir gegangen und habe einen anderen Ansatz gewählt :-)

Code: Select all

.banner_box {
    margin: 2px 2px 2px 2px;
    background: #222244
    url(images/head/logo2.png) repeat-x left top;
    height: 175px;
    border: 1px solid #eee;
    -webkit-border-radius: 10px;
    box-shadow: 3px 2px 4px rgba(0,0,0,.4);	
}

.banner_front {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
}
Habe quasi eine Class für die Box generiert und dort den Streifen als BG definiert und dann eine class die mir es erlaubt ein img darüber zu setzen .

Code: Select all

	<div class="banner_box"><div class="banner_front"><img src="./userfiles/images/logos/logo1.png" alt="Logo"></div></div>
Das liefert mir jedenfalls das gewünschte Ergebnis und ich habe die Möglichkeit das Logo mehr einrücken zu lassen:
lösung.PNG
Danke für eure Hilfe.

Gruß Chris
You do not have the required permissions to view the files attached to this post.
Chris S. aus B
Hoster: df.eu
Domains: 25 an der Zahl
CMS: CMSimple_XH, jeweils 1.6.10 und nun 1.7.0

Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: css Problem im neuen Template

Post by Tata » Tue Jul 11, 2017 5:17 pm

cmb wrote:Ich glaube, das kann auch gar nicht funktionieren. Wenn die zwei <div>s übereinander liegen, dann wird das untere vollständig verdeckt. Damit man das untere vollständig sieht, müsste man das obere vollständig transparent machen, und dann würde man nichts mehr vom oberen sehen.
Doch geht es. Hat man z.B. DIV1 1000x100px mit dem Bild1 100x100 "left", drin dann DIV2 1000x100px mit Bild2 "right".
Oder DIV1 1000x100px mit dem Bild1.jpg und drin dann DIV2 1000x100px mit Bild2.png "right" - hier sogar die Breite ist nicht wichtig.
So was habe ich hier http://cmsimple.sk/dd/?Vitajte-v-CMSimp ... ing_banner.

Mehr z.B. hier: https://developer.mozilla.org/en-US/doc ... ackgrounds
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

aceaccis
Posts: 71
Joined: Tue May 30, 2017 7:09 am

Re: css Problem im neuen Template

Post by aceaccis » Tue Jul 11, 2017 5:46 pm

Hi Tata,

ja so wie in deiner Zip sollte es aussehen werde das gleich einmal testen jetzt geht es um meinen Stolz :D .

Danke dir für deine Mühe.

Gruß Chris
Chris S. aus B
Hoster: df.eu
Domains: 25 an der Zahl
CMS: CMSimple_XH, jeweils 1.6.10 und nun 1.7.0

Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: css Problem im neuen Template

Post by Tata » Tue Jul 11, 2017 7:30 pm

Oder schau mal einige meiner Tremplates. Die tata-xh Templates können wohl auch helfen.
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

lck
Posts: 2955
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: css Problem im neuen Template

Post by lck » Tue Jul 11, 2017 8:11 pm

aceaccis wrote:Ich möchte mit Hilfe von CSS im Head Breich eines Templates 2 Grafiken darstellen eine soll als Background no-repeate sticky bleiben und eine 2. soll an der selben Stelle repeate wiederholt werden.
Das geht per css, Demo:

Code: Select all

.header {
    background-color: #222244;
    background-image: url(images/logo1.png), url(images/logo2.png);
    background-position: 0% 40%, 0% 0%;
    background-repeat: no-repeat, repeat;
    height: 175px;
    width: 100%;
} 
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

Post Reply