css Problem im neuen Template

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

Moderator: mikey

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

css Problem im neuen Template

Postby 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
logo2.PNG (404 Bytes) Viewed 442 times


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
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: 2475
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: css Problem im neuen Template

Postby 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

Postby 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
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: 11897
Joined: Tue Jun 21, 2011 11:04 am
Location: Mü-Sa, RLP, DE
Contact:

Re: css Problem im neuen Template

Postby 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, but not for CMSimple 4+

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

Re: css Problem im neuen Template

Postby 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
(17.63 KiB) Downloaded 34 times
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

Postby 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
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: 2475
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: css Problem im neuen Template

Postby 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

Postby 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: 2475
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: css Problem im neuen Template

Postby 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: 983
Joined: Wed Mar 23, 2011 11:43 am
Location: Germany
Contact:

Re: css Problem im neuen Template

Postby 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 ;)       ► CMSimple_XH Templates & OnePage-Templates ◄


Return to “Templates”

Who is online

Users browsing this forum: No registered users and 2 guests