Page 1 of 1

css Problem im neuen Template

Posted: Tue Jul 11, 2017 2:08 pm
by aceaccis
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

Re: css Problem im neuen Template

Posted: Tue Jul 11, 2017 2:32 pm
by Tata
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>

Re: css Problem im neuen Template

Posted: Tue Jul 11, 2017 4:26 pm
by aceaccis
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

Re: css Problem im neuen Template

Posted: Tue Jul 11, 2017 5:06 pm
by cmb
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.

Re: css Problem im neuen Template

Posted: Tue Jul 11, 2017 5:08 pm
by Tata
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

Re: css Problem im neuen Template

Posted: Tue Jul 11, 2017 5:14 pm
by aceaccis
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

Re: css Problem im neuen Template

Posted: Tue Jul 11, 2017 5:17 pm
by Tata
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

Re: css Problem im neuen Template

Posted: Tue Jul 11, 2017 5:46 pm
by aceaccis
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

Re: css Problem im neuen Template

Posted: Tue Jul 11, 2017 7:30 pm
by Tata
Oder schau mal einige meiner Tremplates. Die tata-xh Templates können wohl auch helfen.

Re: css Problem im neuen Template

Posted: Tue Jul 11, 2017 8:11 pm
by lck
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%;
}