Highlighted

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

Explorer ,
Apr 24, 2018

Copy link to clipboard

Copied

I haven't assigned a background via page properties.

Here is my code:

<body>

<div class="container">

  <div class="header_text"><img src="images/header/logo2.png" width="226" height="65" alt=""/></div>

  <div class="header_photo"><img src="images/header/ftop.ru_29096_border.png" width="500" height="333" alt=""/></div>

  <div class="menu_container"><img src="images/Burger/burger-menu.svg" alt="" width="25"/>

    <div class="menu_items">

              <ul>

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

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

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

              <li><a href="#">PLAN YOUR STAY</a></li>

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

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

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

      </ul>

 

    </div>

  </div>

</div>

</body>

Any help will be much appreciated.

Don

Adobe Community Professional
Correct answer by Jon Fritz II | Adobe Community Professional

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.

Views

219

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

Explorer ,
Apr 24, 2018

Copy link to clipboard

Copied

I haven't assigned a background via page properties.

Here is my code:

<body>

<div class="container">

  <div class="header_text"><img src="images/header/logo2.png" width="226" height="65" alt=""/></div>

  <div class="header_photo"><img src="images/header/ftop.ru_29096_border.png" width="500" height="333" alt=""/></div>

  <div class="menu_container"><img src="images/Burger/burger-menu.svg" alt="" width="25"/>

    <div class="menu_items">

              <ul>

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

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

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

              <li><a href="#">PLAN YOUR STAY</a></li>

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

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

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

      </ul>

 

    </div>

  </div>

</div>

</body>

Any help will be much appreciated.

Don

Adobe Community Professional
Correct answer by Jon Fritz II | Adobe Community Professional

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.

Views

220

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Apr 24, 2018 0
Adobe Community Professional ,
Apr 24, 2018

Copy link to clipboard

Copied

The days of fixed width websites are over.

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

<img src="images/header/ftop.ru_29096_border.png" width="500" height="333" alt=""/>

Your question about a background image is unclear. 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 24, 2018 0
Explorer ,
Apr 25, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 25, 2018 0
Adobe Community Professional ,
Apr 24, 2018

Copy link to clipboard

Copied

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.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 24, 2018 0
Explorer ,
Apr 25, 2018

Copy link to clipboard

Copied

Ben,

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

Thanks.

Don

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 25, 2018 0
Adobe Community Professional ,
Apr 25, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 25, 2018 0
Explorer ,
Apr 25, 2018

Copy link to clipboard

Copied

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>

<meta charset="utf-8">

<title>CL - Cedar Lodge</title>

<link href="css/styles_new.css" rel="stylesheet" type="text/css">

<style type="text/css">

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>

<div class="container">

  <div class="header_text"><img src="images/header/logo2.png" width="226" height="65" alt=""/></div>

  <div class="header_photo"><img src="images/header/ftop.ru_29096_border.png" width="500" height="333" alt=""/></div>

  <div class="menu_container"><img src="images/Burger/burger-menu.svg" alt="" width="25"/>

    <div class="menu_items">

              <ul>

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

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

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

              <li><a href="#">PLAN YOUR STAY</a></li>

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

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

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

      </ul>

 

    </div>

  </div>

</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;

}

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 25, 2018 0
Adobe Community Professional ,
Apr 25, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 25, 2018 1
Don_Lowe LATEST
Explorer ,
Apr 25, 2018

Copy link to clipboard

Copied

Jon,

Thanks so much!!!

Don

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 25, 2018 0