Positioning and margins for a webpage recreation

StackOverflow https://stackoverflow.com/questions/22826289

  •  26-06-2023
  •  | 
  •  

質問

i'm attempting to recreate a webpage as part of my HTML/CSS training. The webpage in question is this: enter image description here , the UEI website (it's old and doesn't look like that anymore).

Below is my code, CSS is rolled into the HTML since it's a single project. Here are a few things i'm having trouble with, any help is greatly appreciated!

1.) How do I get my main div, the center of the body containing all the paragraphs and whatnot, to "spill" over into the footer just like in the original? I've tried the z-indexes but that doesn't seem to do anything.

2.) How come the second box, and the "Start" div will not show up at all? Am I doing something wrong with positioning?

3.) For the right arrow in the orange bar, how do I resize it so it's not cutting off the bottom quarter of the arrows?

4.) How do I get the nav bar UL to have the orange background not just around the words, but as it shows in the original?

5.) How do I resize the bottom UEI logo so it appears smaller like in the original?

Thank you so much for any help! Below is the code I have so far. I'm pretty new to this, but please don't hesitate to critisize anything you see:

<!DOCTYPE html>
<html>
<head> 
<style type="text/css">
#wrapper {
 width: 960px;
 margin: 0 auto;
 background: #D6D6D7;
}
#topbanner {
 background: url(http://i.imgur.com/TWVzlpx.gif) repeat-x;
 height: 131px;
 margin-top: -20px;
}
.menu {
  float: left;
  display: inline-block;
  margin-top: 14px;
  margin-left: 50px;
  color: white;
}
ul {
  background: url(http://i.imgur.com/bjHBavK.png) repeat-x;
  height: 40px;
  margin-left: 266px;
  margin-right: 100px;
  margin-top: 34px;
  width: 560px;
  position: relative;
}
li:hover {
  background: url(http://i.imgur.com/AByXJxy.png) repeat-x;
}
#main {
  background: white;
  width: 788px;
  height: 650px;
  z-index: 10;
  margin-left: 78px;
  position: relative;
  padding-top: 20px;
}
#blackbar {
  background: url(http://i.imgur.com/TPKqsEL.png) no-repeat;
  background-size: contain;
  width: 100%;
  height: 75px;
  position: relative;
  padding: 150px 25px 0 25px;
  left: -25px;
}
#whitepeople{
  background: url(http://i.imgur.com/pjdSiLg.png) no-repeat;
  background-size: contain;
  width: 50%;
  height: 250px;
  margin-top: -190px;
}
#orangebar {
  background: url(http://i.imgur.com/tnMNDvd.png) no-repeat;
  background-size: contain;
  width: 100%;
  height: 75px;
  margin-top: -22px;
  position: relative;
  padding: 150px 25px 0 25px;
  left: -25px;
}
#arrow {
  background: url(https://i.imgur.com/EMHd88R.png) no-repeat;
  position: relative;
  height: 35px;
  width: 100%;  
  margin-left: 375px;
  margin-top: -48px;
}
#box1 {
  background: #CCC;
  height: 450px;
  width: 275px;
  position: relative;
  float: right;
  margin-top: -488px;
  margin-right: 70px;   
  z-index: 5;
}
#start {
  background: url(https://i.imgur.com/rp7lJrE.png) contain;
  height: 75px;
  width: 275px;
  position: relative;
  float: right;
  margin: 0 auto;   
}
#box2 {
  background: #0C3
  height: 450px;
  width: 275px;
  position: relative;
  float: right;
  margin-top: -475px;
  margin-right: 50px;
  z-index: 1;
}
#bottom {
  background: url(http://i.imgur.com/IK2iIjz.gif) repeat-x;
  height: 200px;
  z-index: 1;
  position: relative;
}
#ueilogo {
  background: url(http://i.imgur.com/2C6fyCc.png) no-repeat;
  float: left;
  height: 131px;
  width: 131px;
  padding-left: 45px;
  padding-right: 55px;
  margin-left: 35px;
  margin-right: 35px;
}
#botlogo {
  background: url(http://i.imgur.com/UyFOCTw.png) no-repeat;
  background-size: contain;
  height: 150px;
  width: 960px;
  z-index: 5;
  margin: 0 auto;
  position: relative;
}
h2 {
  color: white;
  size: 16px;
  font-family: Times New Roman;
  margin-left: 25%;
  padding-top: 35px;
  position: relative;
}
.banner1{
  color: white;
  font-size: 14px;
  margin-top: -145px;
  margin-left: 65px;
}
.banner2 {
  color: white;
  margin-top: -150px;
  margin-left: 70px;
  padding-top: 9px;
  font-size: 18px;
}
</style>
<title>UEI Mockup</title>
</head>
<body>
<div id="wrapper">
  <div id="topbanner">
      <div id="ueilogo">
      </div>
      <h2>Student Success is Our Success</h2>
        <ul>
          <li class="menu">ABOUT UEI COLLEGE</li>
          <li class="menu">OVERVIEW</li>
          <li class="menu">FINANCIAL AID</li>
        </ul>
  </div>
  <div id="main">
    <div id="blackbar"><p class="banner1">START TRAINING FOR A NEW CAREER TODAY</p>     </div>
  <div id="whitepeople"></div>
    <div id="orangebar"><P class="banner2">GET STARTED WITH UEI COLLEGE</P><div id="arrow"></div></div>
    <div id="box1"><div id="start"></div></div><div id="box2"></div>
</div>
<div id="bottom"><div id="botlogo"></div></div>
</div>
</body>
</html>
役に立ちましたか？

解決

equal to the image.

   <div id="wrapper">
      <div id="topbanner">
          <div id="ueilogo"></div>
          <h2>Student Success is Our Success</h2>
            <ul>
              <li class="menu">ABOUT UEI COLLEGE</li>
              <li class="menu"> OVERVIEW </li>
              <li class="menu">FINANCIAL AID</li>
            </ul>
      </div>
      <div id="main">
        <div id="blackbar"><p class="banner1">START TRAINING FOR A NEW CAREER TODAY</p>     </div>
      <div id="whitepeople"></div>
        <div id="orangebar"><P class="banner2">GET STARTED WITH UEI COLLEGE</P><div id="arrow"></div></div>
        <div id="box1"><div id="start"></div></div><div id="box2"></div>
    </div>
    <div id="bottom"><div id="botlogo"></div></div>
    </div>

css

*{
    margin: 0;
    padding: 0;
}
#wrapper {
 display: table;
 width: 960px;
 margin: 0 auto;
 background: #D6D6D7;
}
#topbanner {
 background: url(http://i.imgur.com/TWVzlpx.gif) repeat-x;
 width: 100%;
 height: 131px;
}
#ueilogo {
  background: url(http://i.imgur.com/2C6fyCc.png) no-repeat;
  float: left;
  height: 131px;
  width: 131px;
  padding-left: 45px;
  padding-right: 55px;
  margin-left: 35px;
  margin-right: 35px;
}
ul {
  background: url(http://i.imgur.com/bjHBavK.png) repeat-x;
  height: 40px;
  list-style: none;
  margin-left: 266px;
  margin-top: 34px;
  width: 600px;
}
.menu {
  padding: 1px 20px;
  margin-top: 13px;
  float: left;
  color: white; 
}
li:hover {
  padding: 1px 20px;
  background: url(http://i.imgur.com/AByXJxy.png) repeat-x;
  background-size: 100% 100%;
}    

#main {
  background: white;
  width: 788px;
  height: 650px;
  z-index: 10;
  margin-left: 78px;
  position: absolute;
  padding-top: 20px;
  border-bottom-right-radius:6px;
  border-bottom-left-radius:6px;
}
#blackbar {
  background: url(http://i.imgur.com/TPKqsEL.png) no-repeat;
  background-size: contain;
  width: 100%;
  height: 75px;
  position: relative;
  padding: 150px 21px 0 25px;
  left: -23px;
}
#whitepeople{
  background: url(http://i.imgur.com/pjdSiLg.png) no-repeat;
  background-size: contain;
  width: 50%;
  height: 250px;
  margin-top: -190px;
}
#orangebar {
  background: url(http://i.imgur.com/tnMNDvd.png) no-repeat;
  background-size: contain;
  width: 100%;
  height: 75px;
  margin-top: -22px;
  position: relative;
  padding: 150px 25px 0 25px;
  left: -25px;
}
#arrow {
  background: url(https://i.imgur.com/EMHd88R.png) no-repeat;
  position: relative;
  height: 35px;
  width: 100%;  
  margin-left: 375px;
  margin-top: -30px;
}
#box1 {
  background: #CCC;
  height: 450px;
  width: 275px;
  position: relative;
  float: right;
  margin-top: -490px;
  margin-right: 70px;  
  border-radius: 5px;
  z-index: 5;
}
#start {
  background: url(https://i.imgur.com/rp7lJrE.png) no-repeat;
  background-size: 100% 100%;
  position: absolute;
  height: 32px;
  width: 292px; 
}
#box2 {
  background: #8dc73f;
  height: 441px;
  width: 275px;
  position: relative;
  float: right;
  margin-top: -470px;
  margin-right: 61px;
  border-radius: 5px;
  z-index: 1;
}
#bottom {
  background: url(http://i.imgur.com/IK2iIjz.gif) repeat-x;
  margin-top: 620px;
  height: 200px;
  position: relative;
}
#botlogo {
  background: url(http://i.imgur.com/UyFOCTw.png) no-repeat;
  background-size: contain; 
  position: absolute;
  height: 150px;
  width: 788px;
  z-index: 5;
  margin-left: 78px;
  bottom: 0;
}
h2 {
  color: white;
  size: 16px;
  font-family: Times New Roman;
  margin-left: 25%;
  padding-top: 35px;
  position: relative;
}
.banner1{
  color: white;
  font-size: 14px;
  margin-top: -145px;
  margin-left: 65px;
}
.banner2 {
  color: white;
  margin-top: -150px;
  margin-left: 70px;
  padding-top: 9px;
  font-size: 18px;
}

他のヒント

Keep in mind I'm a complete css noob. If I understood some of the questions correctly... Replace

background: url(https://i.imgur.com/rp7lJrE.png) contain;

with

 background: url('https://i.imgur.com/rp7lJrE.png') no-repeat;

Also, you forgot to close the statement

background: #0C3;

when styling box2

And to fit the arrow make the font smaller, change the margin, or use the font they are. Theirs seems big enough but shrunk horizontally.

Here is the updated code:

<!DOCTYPE html>
<html>
<head> 
<style type="text/css">
 #wrapper {
 width: 960px;
 margin: 0 auto;
 background: #D6D6D7;
}
#topbanner {
 background: url(http://i.imgur.com/TWVzlpx.gif) repeat-x;
 height: 131px;
 margin-top: -20px;
}
.menu {
  float: left;
  display: inline-block;
  margin-top: 14px;
  margin-left: 50px;
  color: white;
}
ul {
  background: url(http://i.imgur.com/bjHBavK.png) repeat-x;
  height: 40px;
  margin-left: 266px;
  margin-right: 100px;
  margin-top: 34px;
  width: 560px;
  position: relative;
}
li:hover {
   background: url(http://i.imgur.com/AByXJxy.png) repeat-x;
 }
 #main {
  background: white;
  width: 788px;
  height: 650px;
  z-index: 10;
  margin-left: 78px;
  position: relative;
  padding-top: 20px;
}
#blackbar {
  background: url(http://i.imgur.com/TPKqsEL.png) no-repeat;
  background-size: contain;
  width: 100%;
  height: 75px;
  position: relative;
  padding: 150px 25px 0 25px;
  left: -25px;
}
#whitepeople{
  background: url(http://i.imgur.com/pjdSiLg.png) no-repeat;
  background-size: contain;
  width: 50%;
  height: 250px;
  margin-top: -190px;
}
#orangebar {
  background: url(http://i.imgur.com/tnMNDvd.png) no-repeat;
  background-size: contain;
  width: 100%;
  height: 75px;
  margin-top: -22px;
  position: relative;
  padding: 150px 25px 0 25px;
  left: -25px;
}
#arrow {
  background: url(https://i.imgur.com/EMHd88R.png) no-repeat;
  position: relative;
  height: 35px;
  width: 100%;  
  margin-left: 340px;
  margin-top: -46px;
}
#box1 {
  background: #CCC;
  height: 450px;
  width: 275px;
  position: relative;
  float: right;
  margin-top: -488px;
  margin-right: 70px;   
  z-index: 5;
}
#start {
  background: url('https://i.imgur.com/rp7lJrE.png') no-repeat;
  height: 75px;
  width: 275px;
  position: relative;
  float: right;
  margin: 0 auto;   
}
#box2 {
  background: #0C3;
  height: 450px;
  width: 275px;
  position: relative;
  float: right;
  margin-top: -475px;
  margin-right: 50px;
  z-index: 1;
}
#bottom {
  background: url(http://i.imgur.com/IK2iIjz.gif) repeat-x;
  height: 200px;
  z-index: 1;
  position: relative;
}
#ueilogo {
  background: url(http://i.imgur.com/2C6fyCc.png) no-repeat;
  float: left;
  height: 131px;
  width: 131px;
  padding-left: 45px;
  padding-right: 55px;
  margin-left: 35px;
  margin-right: 35px;
}
#botlogo {
  background: url(http://i.imgur.com/UyFOCTw.png) no-repeat;
  background-size: contain;
  height: 150px;
  width: 960px;
  z-index: 5;
  margin: 0 auto;
  position: relative;
}
h2 {
  color: white;
  size: 16px;
  font-family: Times New Roman;
  margin-left: 25%;
  padding-top: 35px;
  position: relative;
}
.banner1{
  color: white;
  font-size: 14px;
  margin-top: -145px;
  margin-left: 65px;
}
.banner2 {
  color: white;
  margin-top: -150px;
  margin-left: 65px;
  padding-top: 9px;
  font-size: 17px;
}
</style>
<title>UEI Mockup</title>
</head>
<body>
<div id="wrapper">
    <div id="topbanner">
        <div id="ueilogo">
        </div>
        <h2>Student Success is Our Success</h2>
        <ul>
            <li class="menu">ABOUT UEI COLLEGE</li>
            <li class="menu">OVERVIEW</li>
            <li class="menu">FINANCIAL AID</li>
        </ul>
    </div>
    <div id="main">
         <div id="blackbar"><p class="banner1">START TRAINING FOR A NEW CAREER TODAY</p>         </div>
        <div id="whitepeople"></div>
        <div id="orangebar"><P class="banner2">GET STARTED WITH UEI COLLEGE</P><div id="arrow"></div></div>

        <div id="box1"><div id="start"></div></div>
        <div id="box2"></div>
    </div>
    <div id="bottom"><div id="botlogo"></div></div>
</div>
</body>
</html>

Also, nice job naming a div white people. lol.

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top