Assigned a div container for 1200 px but can't get my background to work

Report · Apr 24, 2018

I haven't assigned a background via page properties.

Here is my code:

<body>

<ul>

<li><a href="#">PHOTOS</a></li>

<li><a href="#">CALENDAR</a></li>

<li><a href="#">TESTIMONIALS</a></li>

<li><a href="#">CONTACT</a></li>

<li><a href="#">PRICING</a></li>

</ul>

</div>

</body>

Any help will be much appreciated.

Don

Report · Apr 24, 2018

The days of fixed width websites are over.

You realize that your images won't be responsive this way.

Your question about a background image is unclear.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Apr 25, 2018

Why don't you tell me how I should define my image? I'd appreciate that.

My <div class="container"> contains a fill color but it is not filling. I want to know how I can make it fill with desired color.

Thanks.

Don

Report · Apr 24, 2018

I have have noticed that you have received an email from Adobe with a request to change your screen name. Please do so A.S.A.P.

Wappler, the only real Dreamweaver alternative.

Report · Apr 25, 2018

Ben,

Don't remember receiving an email from adobe. Can you provide info on how to do that?

Thanks.

Don

Report · Apr 25, 2018

Could you share your entire code (css included)?

My guess would be you have floated items within the element that isn't showing and that element is collapsing due to the floats not being cleared.

Report · Apr 25, 2018

Jon,

If I'm in design mode and enter carriage returns right after the Div container, then I get the fill. I thought that because there were other DIV's within it, that would cause it to be filled. How do I get the fill without entering these carriage returns? Any suggestions would be much appreciated.

Thanks.

Don

<!doctype html>

<html>

<head>

<title>CL - Cedar Lodge</title>

a:link {

color: rgba(255,255,255,1);

text-decoration: none;

}

a:visited {

text-decoration: none;

color: rgba(255,255,255,1);

}

a:hover {

text-decoration: underline;

color: rgba(247,228,58,1);

}

a:active {

text-decoration: none;

color: rgba(255,255,255,1);

}

</style>

</head>

<body>

<ul>

<li><a href="#">PHOTOS</a></li>

<li><a href="#">CALENDAR</a></li>

<li><a href="#">TESTIMONIALS</a></li>

<li><a href="#">CONTACT</a></li>

<li><a href="#">PRICING</a></li>

</ul>

</div>

</body>

</html>

************************** CSS ***********************************

@charset "utf-8";

/*GLOBAL / DESKTOP VIEW*/

.header_text {

float: left;

margin-top: 140px;

}

.header_photo {

width: 500px;

float: left;

padding-left: 50px;

padding-bottom: 35px;

padding-top: 35px;

}

.container {

margin-right: auto;

margin-left: auto;

width: 1200px;

float: none;

background-color: #7F0B06;

}

.menu_container {

float: right;

width: 190px;

padding-top: 60px;

padding-right: 20px;

}

.menu_items {

}

/*TABLET VIEW*/

@media (min-width: 401px) and (max-width: 768px){

.container {

background-color: #FF3300;

}

/*MOBILE VIEW*/

@media (max-width: 400px){

.container {

background-color: #036711;

}

Report · Apr 25, 2018

The easiest way to get the parent container of floated elements to stop collapsing is to add overflow:hidden to the parent container's css (as long as the parent container doesn't have a height setting).

In your case, adding the overflow:hidden to the .container class should do the trick.

Report · Apr 25, 2018

Jon,

Thanks so much!!!

Don

Adobe Community

Assigned a div container for 1200 px but can't get my background to work

1 Correct answer