I'm trying come up with the responsive CSS code for the layout in the picture I posted. Basically, I have to have the front picture
on top of the picture gallery <div>
, with relative and absolute techniques, as well as flexible % widths for the <divs>
, Logo with Navigation should be implemented with relative absolute techniques.
Thank you very much.
Here is the CSS and HTML code. Can someone tell which div should be absolute and which one relative in order to achieve the layout in the image. Many thanks
<body>
<div id="wrapper">
<header>
<div id="nav">
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
</div>
<div id="logo">
<h1>Welcome to Origin Cards!</h1>
<img src="images/Logo.jpg" width="150" height="100"/>
</div>
</header>
<div id="paragraph">
<p>
<img src="images/Logo.jpg" />
</p>
</div>
<div id="paragraph2">
<p>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here,
content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum
as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions
have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like
</p>
</div>
<footer>
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
</footer>
</div>
</body>
</html>
And CSS:
body {
font-size: 1em;
border: solid red;
width: 80%;
margin: 0 auto;
border-radius: 6px;
list-style: none;
}
#wrapper{
width: 100%;
background: yellow;
position: relative;
}
#logo {
float: right;
}
#nav {
list-style: none;
}
#nav li {
float: left;
list-style: none;
}
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
}
#nav li a:hover {
color: #c00;
background-color: #fff;
}
#paragraph {
width: 30%;
top: 10%;
left: 20%;
z-index: 1;
position: absolute;
}
#paragraph2 {
width: 80%;
background: #332211;
top: 20%;
left: 10%;
position: absolute;
}
img {
max-width: 100%;
}
footer {
margin: 0 auto;
width: 100%;
background: #123456;
}
You simply need to realize that a 'relative' sets the base of two property sets, 1: zIndex and 2: positions. Make 'front' a high zindex and position it relatively.
Wrapping the elements with the relative block-div, makes the width of children calculate via the width of said block-div - and also positions them with the parentOffset of left/top of the wrapper.