Ashton Ashton - 5 months ago 31
CSS Question

Make entire webpage relative to edges of Banner

I am new to webpage design (only a week in). I am building my website and have been trying to mimic the approach that this website took Desired Format

They have their entire website centered and all of their content in that one center piece. I am still learning so I assumed what they used was a

div
and simply made all of the content inside relative to the location.

My attempt at doing this is this:My Website

I added the borders to my banner and what is supposed to be my "side bar" character to show their positions better. I would like the characters position relative to the far left side of the banner so that it looks "in line" and centered like the website example above.

I am very sure that the way I am doing this is bad or , honestly, incorrect but I am willing to learn and have learned alot!


  1. Does anyone know what the website example used? Or the methods they
    used? I would like to look them up and learn those styles.

  2. Does anyone know how I can fix my own website issue with having the
    div
    location of the side character relative to the far left border
    of the banner?






Here is my HTML/CSS so far

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<title></title>
<head>
<style type="text/css">
/*BACKGROUND IMAGE*/
body {
margin: 0;
background-image: url("background5.png");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
padding: 1px;
}
div#banner {
width: 100%;
height: 100%;
}
.nav-bar {
list-style: none;
margin: 0 auto;
padding: 1px;
width: 525px;
}
ul#nav-bar li {
display: inline-block;
}
ul#nav-bar li a {
text-decoration: underline;
padding: 10px 0;
width: 200px;
margin: 0 1%;
background: #25aee4;
color: black;
float: left;
text-align: center;
border-left: 2px solid black;
border-radius: 5px;
}
div#sidebar {
border: 20px;
}
</style>
</head>



<body>
<div id="banner">
<center>
<img src="owiFull.png" width="1150" height="170" alt="banner" border="1px">
</center>
</div>
<div class="navigation">
<center>
<ul id="nav-bar">
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="about.html">About Us</a>
</li>
<li>
<a href="about.html">Current Projects</a>
</li>
<li>
<a href="about.html">Contact</a>
</li>
</ul>
</center>
</div>

<div id= "sideBar">
<img src="pixelSideBar.png" border="1px">
</div>



</body>
</html>


I appreciate anyone who takes the time to teach and help!

Answer

This is the so called, boxed layout. You wrap all your content in one big container with the width of the box defined, and then you adjust your content width relative to this container.

If you're starting making a website, a good thing is to start learning bootstrap or similar framework, wich will help you to get quickly started with layouts and positioning of the content without too much effort (the grid system is awesome).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<title></title>
<head>
    <style type="text/css">
    /*BACKGROUND IMAGE*/
        body {
            margin: 0;
            background-image: url("background5.png");
            background-size: cover;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: center;
            padding: 1px;
        }
        div#banner {
            width: 100%;
            height: 100%;
        }
        .nav-bar {
            list-style: none;
            margin: 0 auto;
            padding: 1px;
            width: 525px;
        }
        ul#nav-bar li {
            display: inline-block;
        }
        ul#nav-bar li a {
            text-decoration: underline;
            padding: 10px 0;
            width: 200px;
            margin: 0 1%;
            background: #25aee4;
            color: black;
            float: left;
            text-align: center;
            border-left: 2px solid black;
            border-radius: 5px;
        }
        div#sidebar {
            border: 20px;
        }
        /* Added style for the box */
        .boxed {
            width:80%;
            margin-left:10%;
        }
    </style>
</head>



<body>
<!-- We wrap everything in the box and set the sizes according to this box -->
<div class="boxed">
<div id="banner">
    <center>
        <img src="owiFull.png" width="1150" height="170" alt="banner" border="1px">
    </center>
</div>
<div class="navigation">
<center>
    <ul id="nav-bar">
        <li>
            <a href="index.html">Home</a>
        </li>
        <li>
            <a href="about.html">About Us</a>
        </li>
        <li>
            <a href="about.html">Current Projects</a>
        </li>
        <li>
            <a href="about.html">Contact</a>
        </li>
    </ul>
</center>
</div>

<div id= "sideBar">
    <img src="pixelSideBar.png" border="1px">
</div>
<!-- END OF THE WRAPPER -->
</div>


</body>
</html>