Css background color width and image position - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

Css background color width and image position

Gateux

11:28 am on Jun 30, 2020 (gmt 0)

Hello, please see my coding example here [codepen.io...] for the image because i'm not a Codepen Pro account so i cant upload them.
The html for the header:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>Birdwatching</title>
 <link rel="stylesheet" type="text/css" href="style.css">

 </head>

 <body class="test">
<div class="header">
  <h1>Birdwatching</h1>
</div>


  <img src="dove.png" class="headerimg" alt="a simple dove logo">


<div class="menu">
  <ul>
  <li><span>Home</span></li>
  <li>Get started</li>
  <li>Photos</li>
  <li>Gear</li>
  <li>Forum</li>
  </ul>
</div>
CONTENT
 </body>
</html>

The CSS:

.menu {
 color: black;
 font-size: 25px;
 text-transform: uppercase;
 text-align: center;
 background-color: #7FFF00
}

.menu li {
 display: inline;
 
 padding-left: 40px;
}

.header {
 text-align: center;
 height: 300px;
 font-family: 'Cinzel Decorative', cursive;
 padding-top: 5px;
 clear: right;
 background-color: #32CD32
}


.headerimg {
 width: 150px;
 height: 120px;
 float: left;
 position: relative;
}

1st problem: The <div> which contains the h1 element has been given a green background color, but it does not occupy full width even though it's set to 100% width. How do remove the empty space on both side and have the background color occupy full screen on that <div> ?

2nd problem: The dove.png image, i want to position it to the right of the h1 text but no matter how much margin or padding I put, the image always stuck below the green background. Can someone advise me how to fix this?

[edited by: not2easy at 2:02 pm (utc) on Jun 30, 2020]
[edit reason] charter [/edit]

Koray Tugberk Gubur

2:19 pm on Jun 30, 2020 (gmt 0)

*{
margin:0;
}

For the first problem.

For the second problem:

<div class="header">
<h1>Birdwatching</h1>
<img src="dove.png" class="headerimg" alt="a simple dove logo">
</div>

not2easy

2:36 pm on Jun 30, 2020 (gmt 0)

WebmasterWorld Administrator

10+ Year Member

Top Contributors Of The Month

Hi Gateux and and Welcome to WebmasterWorld [webmasterworld.com]

Your image is below the header area because there is a </div> tag just below the h1 text. To include the image within the header, you would need to move that </div> tag to be after the image because it closes the previous <div which is

<div class="header">

You can position the elements within the header by using a css for the <h1 element to float it left and float the image right - since you are using floats, (though not in a way that can do what you'd like). The formatting such as font-family should be applied to the text and not to the <div where the text is found.

NickMNS

2:54 pm on Jun 30, 2020 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

Koray's answer above works for your first problem. But I would warn against doing it this way as it may have some unwanted effects. The "*" symbol applies to all elements on the page, setting the margins to 0. This may not be desired. At a minimum this style definition should be placed at the top of the style such that any explicit settings of the margin are not overwritten by it. But I believe that it is preferable to set the margin of body to 0. This has the outcome without any side effects.

body {margin:0;}

For the second problem, Koray's answer is incomplete, changing the HTML as suggested is correct and necessary but this doesn't move the image to the right. Some additional CSS is required. There are several ways to achieve this, some here will prefer to use float. Personally I prefer flex-box.
[developer.mozilla.org...]

You would need to add the to the .header class:

display: flex;
justify-content:space-between;

You can play around with the justify-content setting if you want different spacing between the h1 tag and the image.
[developer.mozilla.org...]

Finally, welcome WW and thanks for adding the demo, it makes it much easier to find a solution. Unfortunately, I was not able to save the changes I made to your demo.

NickMNS

2:55 pm on Jun 30, 2020 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

As you see, not2Easy provided the "float" while I was typing mine.

not2easy

3:52 pm on Jun 30, 2020 (gmt 0)

WebmasterWorld Administrator

10+ Year Member

Top Contributors Of The Month

I prefer your use of flex-box for this positioning, I only suggested the float changes because I saw that floats were being used. I do not use floats for anything but that all depends on what else is going into the mix. Overall, Flex-box is the better suggestion.

tangor

12:28 am on Jul 2, 2020 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

Good results suggested ... just a reminder that a misplaced </div> is perhaps the number one debugging error out there! Been bit too many times myself!