Help with HTML/CSS


#1

I’m trying to make a header, on it is a banner a logo and contact information, so far. The problem is, is that despite the banner being set to being transparent, it appears opaque on the website. Also, the contact information box resizes itself if I make the window smaller on the webpage. Is there anyway of doing this?

CSS code:

body {
  background-image: url(web-development-university-worcester-course-page-header.jpg);
}
.banner {
  margin: 0px auto;
  padding: 0px 0px 0px 0%;
  clear: both;
  top: 0px;
  display: block;
  left: 0px;
  bottom: 0px;
  right: 0px;
  height: 156px;
  z-index: 0;
  opacity: 0.532;
  background-color: #3754e9;
  position: absolute;
}
.contact {
  border: 3px solid #858500;
  margin: 0px auto;
  padding: 4px 7px;
  background-color: #339999;
  visibility: visible;
  clear: both;
  float: left;
  display: inline;
  z-index: 1;
  left: 65%;
  min-width: 100px;
  min-height: 100px;
  max-height: 1510px;
  position: absolute;
}
#email {
  margin: 0px auto;
  font-family: Lucida Sans Unicode,sans;
  font-size: 20px;
  color: black;
  float: none;
  font-weight: normal;
  font-style: normal;
  text-transform: none;
  text-align: left;
  text-decoration: none;
}
#address {
  margin: 0px auto;
  font-family: Lucida Sans Unicode,sans;
  color: black;
  float: none;
  font-size: 20px;
}
#telephone {
  margin: 0px auto;
  font-family: Lucida Sans Unicode,sans;
  font-size: 20px;
  color: black;
  float: none;
}
#logo {
  float: left;
  display: block;
  clear: both;
  visibility: visible;
  margin-left: auto;
  margin-right: auto;
  bottom: 11px;
  left: 30px;
  z-index: 1;
  position: relative;
}

#2

yes, you can use the @media query, and set min and max-width for specific css ruless

difficult to say without the html code


#3

I haven’t used the @media query before, and what parts do you need, just the header?


#4

https://developer.mozilla.org/en-US/docs/Web/CSS/@media

from the docs:

/* Media query */
@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}

now padding will only be applied to article element when the screen/window is larger then 900px

so media queries allow us to write css rules for specific screen size (there is also max-width, and you can also have min-width + max-width to indicate a range in which the css rule should apply


#5

OK, I had a look, but I’m talking about different screen sizes. Say I have the webpage open in full screen, it is fine, then reduced the width to a quarter of its size, the text and box it is in will move down slightly (its height will increase). Yet I want the text and text box to stay at a constant height and width no matter what the screen size. Also, I want the text and text box to stay at a constant position from the top and right hand side from the webpage (for some reason using the top offset just sticks it at the top of the webpage no matter what the offset value is, unless it is null).


#6

what do you think screen is referring to? the screen size of the window


#7

When I say screen sizes, I mean window sizes.


#8

yes, it refers to the window size occupied on the screen. Lets put it that way, look:

http://jsbin.com/tolafud/edit?output

if you make the windows smaller then 900px, the orange color will vanish (see the css rule i implemented)

i didn’t do the naming of css rules, please explore what i suggest properly before saying it isn’t right


#9

How would I use it to keep a text box staying at a certain height, i.e. 120px, and keep the three rows of text at the same height without going onto new lines and either overlapping or pushing text down.


#10

i already covered that this is impossible to say without the html code

You now know how to write css rules for smaller screen sizes, now the trick is to find out how to prevent overlap.

Look, i can try to help you, but don’t expect me to write the full solution for you. So, how would you go about preventing the overlap?


#11

Well, this is updated CSS code:

body {
  background-image: url(web-development-university-worcester-course-page-header.jpg);
}
.banner {
  margin: 0px auto;
  padding: 0px 0px 0px 0%;
  clear: both;
  top: 0px;
  display: block;
  left: 0px;
  bottom: 0px;
  right: 0px;
  height: 156px;
  opacity: 0.532;
  background-color: #3754e9;
  position: absolute;
  z-index: 1;
}
.contact {
  border: 3px solid #858500;
  margin: 0px auto;
  padding: 4px 7px;
  background-color: #339999;
  visibility: visible;
  clear: both;
  float: left;
  display: inline;
  left: 65%;
  min-width: 100%;
  max-height: 120px;
  z-index: 2;
  top: -2px;
  position: fixed;
  min-height: 120px;
}
#address {
  margin: 0px auto;
  font-family: Lucida Sans Unicode,sans;
  color: black;
  float: none;
  font-size: 20px;
  min-width: 100%;
  line-height: 1.6em;
  max-height: 50px;
  max-width: 100%;
}
#email {
  margin: 0px auto;
  font-family: Lucida Sans Unicode,sans;
  font-size: 20px;
  color: black;
  float: none;
  font-weight: normal;
  font-style: normal;
  text-transform: none;
  text-align: left;
  text-decoration: none;
  line-height: 25px;
  max-height: 50px;
  max-width: 100%;
  min-width: 100%;
}
#telephone {
  margin: 0px auto;
  font-family: Lucida Sans Unicode,sans;
  font-size: 20px;
  color: black;
  float: none;
  min-width: 100%;
  line-height: 25px;
  max-height: 50px;
  max-width: 100%;
}
#logo {
  float: left;
  display: block;
  clear: both;
  visibility: visible;
  margin-left: auto;
  margin-right: auto;
  bottom: 11px;
  left: 30px;
  position: relative;
  z-index: 3;
}
#navigation {
  border-style: solid;
  position: fixed;
  height: 100%;
  z-index: 0;
  left: -33px;
  background-color: #43caca;
  padding-top: 156px;
  padding-right: 12px;
  padding-left: 0px;
  top: 1px;
}
#navigation a:hover {
  color: #666666;
  background-color: #003333;
  line-height: 300%;
  font-size: 31px;
  text-align: center;
  text-transform: capitalize;
}
#navigation li {
  border-style: solid;
  border-color: black;
  font-family: Myanmar Text;
  text-decoration: none;
  display: block;
  background-color: #5b9ed4;
  text-align: center;
  list-style-type: none;
  font-size: 31px;
  line-height: 300%;
}

(None of the info below is real, all made up)
(Also, only included the header stuff, most relevant)
HTML code:

<header>
    <div id="logo"><img style="width: 145px; height: 145px;"
 alt="Hot Beans Web logo" src="imageedit_1_5480767507.png"><br>
    </div>
    <div class="banner"><br>
    </div>
    <div class="contact">
        <div id="address">
            <p><strong>Address:</strong> 1 Somewhere Road, Place,
Country, AB3 4CE</p>
        </div>
        <div id="email">
            <p><strong>Email:</strong>
HBWSupport@HotBeans.com</p>
        </div>
        <div id="telephone">
            <p><strong>Telephone:</strong>
01474 123456</p>
        </div>
    </div>
</header>

#12

For the overlap, I tried all sorts of values for max/min-height/wdith, but nothing seemed to work. I mean, the fact that it is overlapping means I’m getting close to what I want it to do, instead of pushing all the text down.

And also, I don’t know what screen size causes the text to move around and overlap?

What happens is, is that the overlap is caused because the text moves onto new lines but doesn’tpush the other text down.


#13

but using media queries has no value if you don’t know what causes the overlap, given within the media query we need to write css rules to prevent the overlap, but if we don’t understand what causes it, we are nowhere

i have overlap even on large screen:

what overlap needs preventing? the contact and banner elements?


#14

Is this what we’re going for?

Fullscreen

Small (reduced screen)


#15

Yes, and then for it to stay like that, no matter the screen size. Just the green box.


#16

Okay, well first things first, your .contact div is floating left with a margin of 65%. That just won’t work.

Float it differently.
You’ll then want to change its minimum width as well.
Display it inline-block.

Then you’ll need to find a way to adjust how the information appears inside of it.

This should give you similar results.


#17

OK, I’ll try that thanks.


#18

Feel free to come back with any more questions you might have, based on your progress with this.

I’m sorry I can’t just give you the code outright, it would defeat the purpose of learning about this. But you’re doing good so far, try a few things out and if it doesn’t work, come back for more information!


#19

A little problem, for display the software I’m using allows for inline or block, so would inline-block be block? By changing its minimum width, would that mean increasing it or decreasing it?

In terms of the information, would I change their min/max height/widths?


#20

But yeah, changing min-width to 250% did help, thanks.