Domanda

this is my worksite - mysite i have created a page and called it to the home page using the following code

<div class="hilight-hometext">
<?php if(is_front_page()) :
$home_page_post_id = 308;
$home_page_post = get_post( $home_page_post_id, ARRAY_A );
$content_home = $home_page_post['post_content'];
$content_title = $home_page_post['post_title'];
?><?php
echo $content_home;
endif; ?></div>

and the result is

<div class="hilight-hometext">
<div id="hilightbox">
<div class="hilightbox-text">
<h2>At Salisbury we want everyone to understand their landscaping choices</h2>
Our latest landscaping innovation is our Outdoor Vision questionnaire. We’ll guide you     through a set of questions that will help you realize what you want out of your yard.

</div>
<!-- end tier 2 text -->
<div class="hilightbox-action">

<a class="myButton" href="resources/the-outdoor-vision-tool/">GET STARTED</a>

Your Outdoor Vision

</div>

</div></div>

i have added the styling as follows

#hilightbox {
background: url(../img/action-bg.jpg);
width: 100%;
margin: 20px auto;
}
#hilightbox .hilightbox-text {
width: 75%;
float: left;
margin: 0;
}
#hilightbox .hilightbox-action {
width: 25%;
float: left;
padding: 15px 0;
}
.myButton {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #c9df23),         color-stop(1, #747728));
background: -moz-linear-gradient(center top, #c9df23 5%, #747728 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9df23', endColorstr='#747728');
background-color: #c9df23;
display: inline-block;
color: #ffffff;
font-family: Arial;
font-size: 20px;
font-weight: bold;
padding: 14px 14px;
text-decoration: none;
text-shadow: 1px 1px 0px #747728;
}

but the background image and the styles are not showing up.Please help!! Thanks

È stato utile?

Soluzione

I think if you just add this:

#hilightbox {
  background: url(../img/action-bg.jpg);
  width: 100%;
  margin: 20px auto;
  overflow: hidden;
}

it will solve you problem. currently your container div #hilightbox does not know about child div's (.hilightbox-text and hilightbox-action) height & width because of float:left property.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top