zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Wrapper DIV verschwindet bei zu kleinem Browserfenster

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 11.11.2013, 18:30
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.11.2013
Beiträge: 5
mareike befindet sich auf einem aufstrebenden Ast
Standard Wrapper DIV verschwindet bei zu kleinem Browserfenster

Hallo
ich brauche BITTE BITTE eure Hilfe, da ich nicht weiterweiß.
Ich habe ein wrapper div, das bei zu kleinem browserfenster einfach verschwindet (egal welcher browser).

was mache ich falsch oder woran liegt das und wie kann ich es begeben?
ich danke euch 100000000 mal für eure hilfe.

php code für den wrapper:

PHP-Code:
   <div class="servicesWrapp">

        <img class="parallax_one" src="<?php echo $parallax_one?>" alt="Featured Image">
        <img class="parallax_two" src="<?php echo $parallax_two?>" alt="Featured Image">
        <img class="parallax_three" src="<?php echo $parallax_three?>" alt="Featured Image">
        
        <div class="servicesHolder">
            
            <!-- Service -->
            <a href="<?php echo $service_url_one?>" class="service serviceOne">
                <img class="lazy" data-original="<?php echo $service_image_one?>" src="<?php echo get_template_directory_uri(); ?>/img/gray.png" height="191" width="189"  alt="Featured Image">
                <div class="hoverEffect">
                    <img src="<?php echo $service_icon_one?>" alt="Featured Ico">
                    <p><?php echo $service_title_one?></p>
                </div>
            </a>


            <!-- Service -->
            <a href="<?php echo $service_url_two?>" class="service serviceTwo">
                <img class="lazy" data-original="<?php echo $service_image_two?>" src="<?php echo get_template_directory_uri(); ?>/img/gray.png" height="191" width="189" alt="Featured Image">
                <div class="hoverEffect">
                    <img class="service-ico" src="<?php echo $service_icon_two?>" alt="Featured Icon">
                    <p><?php echo $service_title_two?></p>
                </div>
            </a>


            <!-- Service -->
            <a href="<?php echo $service_url_three?>" class="service serviceThree">
                <img class="lazy" data-original="<?php echo $service_image_three?>" src="<?php echo get_template_directory_uri(); ?>/img/gray.png" height="191" width="189" alt="Featured Image">
                <div class="hoverEffect">
                    <img src="<?php echo $service_icon_three?>" alt="Featured Icon">
                    <p><?php echo $service_title_three?></p>
                </div>
            </a>

            <!-- Service -->
            <a href="<?php echo $service_url_four?>" class="service serviceFour">
                <img class="lazy" data-original="<?php echo $service_image_four?>" src="<?php echo get_template_directory_uri(); ?>/img/gray.png" height="191" width="189" alt="Featured Image">
                <div class="hoverEffect">
                    <img src="<?php echo $service_icon_four?>" alt="Featured Ico">
                    <p><?php echo $service_title_four?></p>
                </div>
            </a>

            <!-- Service -->
            <a href="<?php echo $service_url_five?>" class="service serviceFive">
                <img class="lazy" data-original="<?php echo $service_image_five?>" src="<?php echo get_template_directory_uri(); ?>/img/gray.png" height="191" width="189" alt="Featured Image">
                <div class="hoverEffect">
                    <img class="service-ico" src="<?php echo $service_icon_five?>" alt="Featured Icon">
                    <p><?php echo $service_title_five?></p>
                </div>
            </a>

            <!-- Service -->
            <a href="<?php echo $service_url_six?>" class="service serviceSix">
                <img class="lazy" data-original="<?php echo $service_image_six?>" src="<?php echo get_template_directory_uri(); ?>/img/gray.png" height="191" width="189" alt="Featured Image">
                <div class="hoverEffect">
                    <img src="<?php echo $service_icon_six?>" alt="Featured Icon">
                    <p><?php echo $service_title_six?></p>
                </div>
            </a>

            <!-- Service -->
            <a href="<?php echo $service_url_seven?>" class="service serviceSeven">
                <img class="lazy" data-original="<?php echo $service_image_seven?>" src="<?php echo get_template_directory_uri(); ?>/img/gray.png" height="191" width="189" alt="Featured Image">
                <div class="hoverEffect">
                    <img src="<?php echo $service_icon_seven?>" alt="Featured Ico">
                    <p><?php echo $service_title_seven?></p>
                </div>
            </a>
            
        </div>

    </div>

und der CSS Code dazu ist:

Code:
/*##################################################################
 Services
 ##################################################################*/


 .servicesWrapp {
 	position: relative;  Margin:0px auto;
 	width: 100%;
 	height: 550px;
 }

 .servicesWrapp > img {
 	 Position: absolute;

 }

 .servicesHolder {
 	position: relative;
 	width: 1080px;
 	margin: 0 auto;

 }

 .service {
 	display: block;
 	float: left;
 	position: absolute;
 	-webkit-transform: rotate(46deg);
 	-moz-transform: rotate(46deg);
 	-o-transform: rotate(46deg);
 	-ms-transform: rotate(46deg);
 	transform: rotate(46deg);
 }

 .service > img {
 	-webkit-transition: all 0.3s;
 	-moz-transition: all 0.3s;
 	-o-transition: all 0.3s;
 	-ms-transition: all 0.3s;
 	transition: all 0.3s;
 }

 .hoverEffect {
 	opacity: 0;
 	padding-top: 25%;
 	text-align: center;
 	top: 0;
 	left: 0;
 	width: 100%;
 	height: 100%;
 	position: absolute;
 	-webkit-transform: rotate(-46deg);
 	-moz-transform: rotate(-46deg);
 	-o-transform: rotate(-46deg);
 	-ms-transform: rotate(-46deg);
 	transform: rotate(-46deg);
 }

 .hoverEffect p {
 	color: #f2f2f2;
 	text-transform: uppercase;
 	font-weight: 300;
 	padding: 15px 0;
 	margin-top: 15px;
 	background-image: url(img/servicesBorder.png);
 	background-repeat: no-repeat;
 	background-position: center top;
 }

 .service:hover > img {
 	opacity: 0;
 }

 .service:hover .hoverEffect {
 	opacity: 1;
 }


 .serviceOne {
 	background-color: #fd797b;
 	top: 70px;
 	left: 0;
 }

 .serviceTwo {
 	background-color: #16a6b6;
 	left: 147px;
 	top: 222px;
 }

 .serviceThree {
 	top: 73px;
 	left: 297px;
 	background-color: #34495e;
 }

 .serviceFour {
 	top: 225px;
 	left: 442px;
 	background-color: #fd797b;
 }

 .serviceFive {
 	top: 76px;
 	left: 593px;
 	background-color: #16a6b6;
 }

 .serviceSix {
 	top: 225px;
 	left: 740px;
 	background-color: #34495e;
 }

 .serviceSeven {
 	top: 79px;
 	left: 890px;
 	background-color: #fd797b;
 }

 .blankOne {
 	background-color: #444545;
 	width: 189px;
 	height: 191px;
 	float: left;
 	top: 218px;
 	left: -152px;
 }

 .blankTwo {
 	width: 189px;
 	height: 191px;
 	right: -145px;
 	top: 228px;
 	float: left;
 	background-color: #444545;
 }

 .blankThree {
 	width: 189px;
 	height: 191px;
 	right: -295px;
 	top: 83px;
 	float: left;
 	background-color: #fff;
 }

 .servicesHolderTwo {
 	left: 200px;
 }

 .servicesTag {
 	display: block;
 	float: left;
 	position: absolute;
 	background-image: url(img/circle-triangle_header.png);
 	background-repeat: no-repeat;
 	background-position: center center;
 	line-height: 96px;
 	text-align: center;
 	left: -155px;
 	width: 96px;
 	height: 96px;
 	top: 50px;
 	font-size: 9px;
 	color: #f2f2f2;
 	text-transform: uppercase;
 	font-weight: 300;
 }

 .servicesPortfolioWrapp {
 	margin-top: 50px;
 }

 .designClass {
 	display: block;
 	background-image: url(img/servicesSquare.png);
 	background-repeat: no-repeat;
 	background-position: center center;
 	line-height: 96px;
 	width: 96px;
 	text-transform: uppercase;
 	color: #4d4c4c;
 	font-weight: 300;
 	font-size: 9px;
 	text-align: center;
 	margin-bottom: 30px;
 	height: 96px;
 }

 .servicesWrappPink .designClass {
 	background-image: url(img/circle-triangle_header.png);
 	color: #fff;
 }

 .servicesWrappPink {
 	background-color: #fd797b;
 	overflow: hidden;
 	padding-bottom: 40px;
 }

 .servicesWrappPink .about_portfolioText h2, .servicesWrappPink .about_portfolioText p, .servicesWrappPink .about_portfolioText a {
 	color: #fff;
 }

 .servicesWrappPink .about_portfolioText a {
 	border-color: #fff;
 	background-image: url(img/arrow-right-readmore.png);
 	margin-bottom: 20px;
 }

 .servicesWrappPink .about_portfolioText a.pinkBgBtn:hover {
 	background-color: #fff;
 	border-color: #727171;
 }

 .about_portfolioText a.grayBgBtn:hover {
 	background-color: #e84c3d;
 	color: #fff;
 	border-color: #fff;
 	background-image: none;
 }

 .servicesWrappGray {
 	padding-bottom: 40px;
 	background-color: #c6c4c4;
 	overflow: hidden;
 }
DANKE!!!!!!!!!!!!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 11.11.2013, 18:32
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.11.2013
Beiträge: 5
mareike befindet sich auf einem aufstrebenden Ast
Standard

ahja
anzusehen ist das ganze hier:
IN DER PRAXIS | IN DER PRAXIS

(ggf müsst ihr bitte das brwoserfenster vergrössern oder verkleinern um es zu sehen)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 11.11.2013, 19:32
Benutzerbild von plastiko
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 26.12.2007
Ort: Hannover
Beiträge: 945
plastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblick
Standard

In media-querries.css steht display: none; für .servicesWrapp:
Code:
@media only screen and (max-width: 1260px) {
	.servicesWrapp, .servicesBanner {		
	display: none; 
	}
__________________
MfG
Jens
Mit Zitat antworten
  #4 (permalink)  
Alt 11.11.2013, 20:02
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.11.2013
Beiträge: 5
mareike befindet sich auf einem aufstrebenden Ast
Standard

darf ich fragen wie du auf media-queries.css kommst?
steh irgendwie auf der leitung?
wo finde ich die datei und was muss ich dann ändern und wo?
Danke für deine hilfe!!!!
Mit Zitat antworten
  #5 (permalink)  
Alt 11.11.2013, 20:15
Benutzerbild von plastiko
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 26.12.2007
Ort: Hannover
Beiträge: 945
plastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblick
Standard

Zitat:
Zitat von mareike Beitrag anzeigen
darf ich fragen wie du auf media-queries.css kommst?
Das steht in dieser css-Datei:
http://www.i-am-artist-designer.com/...ia-queries.css.
Dort kannst du .servicesWrapp, aus dem oben genannten Abschnitt entfernen.
__________________
MfG
Jens
Mit Zitat antworten
  #6 (permalink)  
Alt 12.11.2013, 10:59
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.11.2013
Beiträge: 5
mareike befindet sich auf einem aufstrebenden Ast
Standard

tausend Dank Jens!!!!!!!
Vielen vielen Dank, das ist es.

Kannst du mir vielleicht noch verraten, wie ich deklarieren muss, dass das ServicesWrapp der Bildschirmbreite angepasst wird? Das wäre wichtig für die mobile Version, da ist es riesig gross und wird nur 10% gezeigt.
Danke nochmal!!!!
Mit Zitat antworten
  #7 (permalink)  
Alt 12.11.2013, 15:23
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.779
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von mareike Beitrag anzeigen
Kannst du mir vielleicht noch verraten, wie ich deklarieren muss, dass das ServicesWrapp der Bildschirmbreite angepasst wird?
Das geht nicht mal eben schnell mit einer Zeile CSS.

Auf den anderen Seiten (nicht der Startseite) ist das Menü bereits in einer responsiven Version enthalten. Ein Ansatz könnte sein, eben dieses normale Menü auch auf der Startseite anzuzeigen, wenn wenig Platz ist.

Bist du dir mit diesem "Memory-Spiel" ganz sicher? Ich finde es überaus nervig, wenn ich nur durch zufälliges Überfahren mit der Maus herausfinden kann, dass das ein Menü sein soll. Und was machen Besucher ohne Maus?

[OT]Noch eine Bitte: Bleib doch bei einer normalen Anzahl von Satzzeichen. Man versteht dich dann auch -- sogar besser. [/OT]
Mit Zitat antworten
  #8 (permalink)  
Alt 13.11.2013, 14:47
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.11.2013
Beiträge: 5
mareike befindet sich auf einem aufstrebenden Ast
Standard

Hallo Corina,
ok, ich werde die vielen Satzzeichen lassen, wollte nur deutlich machen, dass ich mich so über die Hilfe freue

Ich danke dir auch für deine Meinung, möchte aber gerne das Menü auf der Startseite so lassen, mit dem Mosaikeffekt, da er mir sehr gut gefällt.

Kannst du mir bitte einen Tipp geben, wie in etwa die Programmierung aussehen muss, damit der Wrapper auch anpassungsfähig gegenüber der Größe des Browserfensters wird?

Vielen Dank!
Mareike
Mit Zitat antworten
  #9 (permalink)  
Alt 13.11.2013, 15:07
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.779
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von mareike Beitrag anzeigen
Kannst du mir bitte einen Tipp geben, wie in etwa die Programmierung aussehen muss, damit der Wrapper auch anpassungsfähig gegenüber der Größe des Browserfensters wird?
Ich habe dir doch bereits einen Ansatz genannt.

Ansonsten musst du ein Layout entwerfen, das diese Boxen bei einer verfügbaren Breite <1080px (edit: nein, es sind gar 1260px) annehmen sollen und dann dein Stylesheet entsprechend anpassen.

Geändert von fricca (13.11.2013 um 15:10 Uhr)
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
browser, css, div, fenster, verschwindet, wrapper

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Fragen zu CSS und Joomla DOKTOR CSS 2 23.05.2011 19:29
Brauche Hilfe: Schwarzes Nichts Zwox CSS 10 19.11.2010 16:53
Header entfernen tripple CSS 17 15.06.2010 15:41
Schriftfarbe in den Eintragungsfeldern von jforms Steveislucky CSS 2 16.03.2010 10:59
CSS Text nebeinander? carstiee09 CSS 13 13.11.2009 19:18


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:02 Uhr.