PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
j

background kleur wordt niet vertoond

Door johannes davidian op 14-06-2017 13:28 gewijzigd op 17-06-2017 22:31
4.280 views
Hallo,
Ik had deze probleem eerder gehad nadat ik gebruik maak van bootstrap media query,nu het probleem komt weer te verschijnen.

deze is mij css code:



@media (max-width: @screen-xs-max) {

.site-header
 {
border:0.0625em solid #074e68;
background-color:#074e68;
height:6em;
width:100%;

}



.site-title
 {
margin-top:-0.3em;
margin-left:-1.5em;
color:#f5f5f5;
font-size:1.4em;
font-weight:400;
}
.site-description
 {
margin-left:-0.1em;
margin-top:-1.2em;
color:#f5f5f5;
word-wrap:nowrap;
font-size:1em;
font-weight:400;
}

.site-header-advertentie
 
 {
margin-top:-4%;
color:#808080;
opacity:1.2;
font-size:1.2em;
font-weight:400;
margin-left:0.5%;

}

.site-header-advertentieV
 
 {
margin-top:-1.95%;
color:#808080;
opacity:1.2;
font-size:1.2em;
font-weight:500;
margin-left:-4.5%;

}


.site-header-image  {
width:100%;
margin-top:0em;
}



.site-image-board  {
border:0.0625em solid #074e68;
background-color:#074e68;
height:3em;
width:100%;
margin-top:0em;
}


.site-image-boardT1  {
color:#f5f5f5;
margin-top:-2em;
font-weight:400;
margin-left:
}
 .site-image-boardT2 {
color:#f5f5f5;
margin-top:-2em;
font-weight:400;
margin-left:10.5em;
}

.site-image-boardT3 {
color:#f5f5f5;
margin-top:-2em;
font-weight:400;

}
.entry-title {
display:none;
}


/*------------
Home page----------*/




/*----------------
footer en info----*/
.site-footer  {
border:0.0625 solid #074e68;
background-color:#074e68;
height:10em;
width:100%;
}

.site-info {
border:0.0625 solid #333333;
background-color:#333333;
height:4em;
width:100%;
}
.site-footer-section1 {
margin-top:1.5em;
color:#f5f5f5;

}
.site-footer-section2 {
margin-top:1.5em;
color:#f5f5f5;
margin-left:2em;
}

.site-footer-section3 {
margin-top:1.5em;
color:#f5f5f5;
}
.site-footer-section3C {

color:white;

}
.site-info-section2 {
margin-top:1.5em;
color:#9c9c9c;
opacity:1.2;

}

.site-info-section3 {
margin-top:1.5em;
color:#9c9c9c;
opacity:1.2;

}

}

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { 

.site-header
 {
border:0.0625em solid #074e68;
background-color:#074e68;
height:6em;
width:100%;


}



.site-title
 {
margin-top:-0.3em;
margin-left:-1.5em;
color:#f5f5f5;
font-size:1.4em;
font-weight:400;
}
.site-description
 {
margin-left:-0.1em;
margin-top:-1.2em;
color:#f5f5f5;
word-wrap:nowrap;
font-size:1em;
font-weight:400;
}

.site-header-advertentie
 
 {
margin-top:-4%;
color:#808080;
opacity:1.2;
font-size:1.2em;
font-weight:400;
margin-left:0.5%;

}

.site-header-advertentieV
 
 {
margin-top:-1.95%;
color:#808080;
opacity:1.2;
font-size:1.2em;
font-weight:500;
margin-left:-4.5%;

}


.site-header-image  {
width:100%;
margin-top:0em;
}



.site-image-board  {
border:0.0625em solid #074e68;
background-color:#074e68;
height:3em;
width:100%;
margin-top:0em;
}


.site-image-boardT1  {
color:#f5f5f5;
margin-top:-2em;
font-weight:400;
margin-left:
}
 .site-image-boardT2 {
color:#f5f5f5;
margin-top:-2em;
font-weight:400;
margin-left:10.5em;
}

.site-image-boardT3 {
color:#f5f5f5;
margin-top:-2em;
font-weight:400;

}
.entry-title {
display:none;
}


/*------------
Home page----------*/




/*----------------
footer en info----*/
.site-footer  {
border:0.0625 solid #074e68;
background-color:#074e68;
height:10em;
width:100%;
}

.site-info {
border:0.0625 solid #333333;
background-color:#333333;
height:4em;
width:100%;
}
.site-footer-section1 {
margin-top:1.5em;
color:#f5f5f5;

}
.site-footer-section2 {
margin-top:1.5em;
color:#f5f5f5;
margin-left:2em;
}

.site-footer-section3 {
margin-top:1.5em;
color:#f5f5f5;
}
.site-footer-section3C {

color:white;

}
.site-info-section2 {
margin-top:1.5em;
color:#9c9c9c;
opacity:1.2;

}

.site-info-section3 {
margin-top:1.5em;
color:#9c9c9c;
opacity:1.2;

}

}

@media (min-width: @screen-md-min) and (max-width: @screen-md-max)  { 

.site-header
 {
border:0.0625em solid #074e68;
background-color:#074e68;
height:6em;
width:100%;

}


.site-title
 {
margin-top:-0.3em;
margin-left:-1.5em;
color:#f5f5f5;
font-size:1.4em;
font-weight:400;
}
.site-description
 {
margin-left:-0.1em;
margin-top:-1.2em;
color:#f5f5f5;
word-wrap:nowrap;
font-size:1em;
font-weight:400;
}

.site-header-advertentie
 
 {
margin-top:-4%;
color:#808080;
opacity:1.2;
font-size:1.2em;
font-weight:400;
margin-left:0.5%;

}

.site-header-advertentieV
 
 {
margin-top:-1.95%;
color:#808080;
opacity:1.2;
font-size:1.2em;
font-weight:500;
margin-left:-4.5%;

}


.site-header-image  {
width:100%;
margin-top:0em;
}



.site-image-board  {
border:0.0625em solid #074e68;
background-color:#074e68;
height:3em;
width:100%;
margin-top:0em;
}


.site-image-boardT1  {
color:#f5f5f5;
margin-top:-2em;
font-weight:400;
margin-left:
}
 .site-image-boardT2 {
color:#f5f5f5;
margin-top:-2em;
font-weight:400;
margin-left:10.5em;
}

.site-image-boardT3 {
color:#f5f5f5;
margin-top:-2em;
font-weight:400;

}
.entry-title {
display:none;
}


/*------------
Home page----------*/




/*----------------
footer en info----*/
.site-footer  {
border:0.0625 solid #074e68;
background-color:#074e68;
height:10em;
width:100%;
}

.site-info {
border:0.0625 solid #333333;
background-color:#333333;
height:4em;
width:100%;
}
.site-footer-section1 {
margin-top:1.5em;
color:#f5f5f5;

}
.site-footer-section2 {
margin-top:1.5em;
color:#f5f5f5;
margin-left:2em;
}

.site-footer-section3 {
margin-top:1.5em;
color:#f5f5f5;
}
.site-footer-section3C {

color:white;

}
.site-info-section2 {
margin-top:1.5em;
color:#9c9c9c;
opacity:1.2;

}

.site-info-section3 {
margin-top:1.5em;
color:#9c9c9c;
opacity:1.2;

}

}

@media (min-width: 1200px) {

.site-header
 {
border:0.0625em solid #074e68;
background-color:#074e68;
height:6em;
width:100%;

}


.site-title
 {
margin-top:-0.3em;
margin-left:-1.5em;
color:#f5f5f5;
font-size:1.4em;
font-weight:400;
}
.site-description
 {
margin-left:-0.1em;
margin-top:-1.2em;
color:#f5f5f5;
word-wrap:nowrap;
font-size:1em;
font-weight:400;
}

.site-header-advertentie
 
 {
margin-top:-4%;
color:#808080;
opacity:1.2;
font-size:1.2em;
font-weight:400;
margin-left:0.5%;

}

.site-header-advertentieV
 
 {
margin-top:-1.95%;
color:#808080;
opacity:1.2;
font-size:1.2em;
font-weight:500;
margin-left:-4.5%;

}


.site-header-image  {
width:100%;
margin-top:0em;
}



.site-image-board  {
border:0.0625em solid #074e68;
background-color:#074e68;
height:3em;
width:100%;
margin-top:0em;
}


.site-image-boardT1  {
color:#f5f5f5;
margin-top:-2em;
font-weight:400;
margin-left:
}
 .site-image-boardT2 {
color:#f5f5f5;
margin-top:-2em;
font-weight:400;
margin-left:10.5em;
}

.site-image-boardT3 {
color:#f5f5f5;
margin-top:-2em;
font-weight:400;

}
.entry-title {
display:none;
}


/*------------
Home page----------*/




/*----------------
footer en info----*/
.site-footer  {
border:0.0625 solid #074e68;
background-color:#074e68;
height:10em;
width:100%;
}

.site-info {
border:0.0625 solid #333333;
background-color:#333333;
height:4em;
width:100%;
}
.site-footer-section1 {
margin-top:1.5em;
color:#f5f5f5;

}
.site-footer-section2 {
margin-top:1.5em;
color:#f5f5f5;
margin-left:2em;
}

.site-footer-section3 {
margin-top:1.5em;
color:#f5f5f5;
}
.site-footer-section3C {

color:white;

}
.site-info-section2 {
margin-top:1.5em;
color:#9c9c9c;
opacity:1.2;

}

.site-info-section3 {
margin-top:1.5em;
color:#9c9c9c;
opacity:1.2;

}

}


deze is mij header.php code:



 <div class="container-fluid">
 <div class="row">  
<div class="site-header col-sm-12 col-md-12 col-lg-12 col-xl-12 ">
            

 <div class="row"> 



  <div class="site-title col-sm-4 col-md-4 col-lg-4 col-xl-4">
<h5>David's APK Station</h5>
               <div class="row"> 
                          <div class="site-description text-nowrap col-sm-4 col-md-4 col-lg-4 col-xl-4">
<h5>Reparatie & Onderhoud<br> Alle Merken Auto's </h5></div>  </div>  </div>                                                              
                                                                        
                                               
			<div class="site-logo col-sm-4 col-md-4 col-lg-4 col-xl-4">  </div>        
                        
                      
                       <div class="site-header-tekst col-sm-4 col-md-4 col-lg-4 col-xl-4"><h5>   </h5>       </div>
        </div> </div>  </div> 
 <div class="container-fluid">
<div class="row">                            
<div class="site-header-image">
        <?php 
echo do_shortcode('[smartslider3 slider=157]');
?>
 </div> </div> </div>
<div class="container-fluid1">
<div class="row">
<div class="site-image-board">  


<div class="row">
<div class="site-image-boardT1 text-nowrap  col-sm-4 col-md-4 col-lg-4 col-xl-4">
<h6> Welkom bij David's Auto Service</h6></div> 
<div class="site-image-boardT2 text-nowrap  col-sm-4 col-md-4 col-lg-4 push-lg-3 col-xl-4">
<h6>40 jaar vaak ervaring </h6></div>

<div class="site-image-boardT3 text-nowrap col-sm-4  col-md-4   col-lg-4 push-lg-8 col-xl-4">
<h6>BMW Specialist(25 jaar ervaring)</h6></div> 

</div>  </div> </div> </div>


deze is mij footer.header code:



 <div class="container-fluid2">
<div class="row">                   
<div class="site-footer"> 
                             
           <div class="row">
                  <div class="site-footer-section1 col-sm-4 col-md-4 col-lg-4 col-xl-4">Je krijgt altijd vooraf een<br>
 prijsopgave, dus geen verrassingen<br>
 achteraf.  </div> 
                  
                  <div class="site-footer-section2 col-sm-4  col-md-4  col-lg-4 col-xl-4">Gecertificeerde eerste monteur<br>
                                                                    Keurmeester(25 jaar ervaring)  </div> 
                       
                             <div class="site-footer-section3 text-nowrap  col-sm-4 col-md-4 col-lg-4  col-xl-4"> David's Apk Station <br>
                                                                 Klompenmakerstraat 123<br>
                                                                  3194 DD Hoogvliet RT<br>
                                                                  010-2160660 
                    <div class="row">
                  <div class="site-footer-section3C col-sm-4 col-md-4 col-lg-4 col-xl-4">                                                              Email:[email protected]    </div> </div>  
           


  </div> </div> </div> </div>
                  
                
 
		
<div class="container-fluid1">
              <div class="row">
<div class="site-info">
 <div class="row">
               <div class="site-info-section1 col-sm-4 col-md-4 col-lg-4 col-xl-4">  </div>

                 <div class="site-info-section2 col-sm-4  col-md-4  col-lg-4 col-xl-4">40 jaar vaak ervaring </div> 

		<div class="site-info-section3 col sm-4 col-md-4 col-lg-4 col-xl-4">BMW Specialist(25 jaar ervaring)</div>
   </div> 
      </div> </div>	</div>


ik heb van alles geprobeerd maar ik kunde het probleem niet oplossen. ik heb ook via inspect bekijken maar ik kunde zelf niets vinden.

mij url is :http://webdesignleren.net/

wat kan het probleem of het oorzak zijn dat het background kleur wordt niet vertoond?

Dank U Wel
johannes

J
Jan te Pas
16-06-2017 22:39
Ik zie dat je de kleur #074e8 als background color gebruikt. En die kleur zie je dus ook. Dus als je een andere kleur wilt hebben, moet je in de header en de andere locaties background-color: veranderen. Succes.

[size=xsmall]Toevoeging op 16/06/2017 22:43:51:[/size]


Ik zie dat je de kleur #074e8 als background color gebruikt. En die kleur zie je dus ook. Dus als je een andere kleur wilt hebben, moet je in de header en de andere locaties background-color: aanpassen. Kijk in de css.
j
johannes davidian
17-06-2017 22:28
Dank U Wel,
ik heb deze codes buiten media query van bootstrap gezet en doordat het gelukt,

.site-header {
background-color:#074e68;
border:0.0625em solid #074e68;
height:6em;
}
.site-image-board {
border:0.0625em solid #074e68;
height:3em;
background-color:#074e68; 
margin-top:0em;
}
.site-footer {
border:0.0625 solid #074e68;
height:10em;
background-color:#074e68;

}

.site-info {
border:0.0625 solid #333333;
height:4em;
background-color:#333333;

}


maar ik begript niet waarom deze codes (background kleur en height) werkt niet onder media query van bootstrap

johannes
Danny von Gaal
18-07-2017 22:42
Je media query's worden alleen gebruikt wanneer de pagina een bepaalde grootte heeft.
Kleiner dan 1024px breed bijvoorbeeld of 800px hoog.

Als je wilt dat de background-color altijd die kleur toont dan moet je dit daar buiten plaatsen zodat het altijd gebruikt wordt.

Reageren

Inloggen om te reageren