Member Avatar for tony75

Hi
I would like my markup look like this demo bu I got wrong!!!
I will be grateful for your help
http://puu.sh/5tYXV.jpg

This is my php code.

<div id="container" style="text-align: center">
<header style="text-align: center">Header</header>
<nav>nav</nav>
<aside>aside</aside>
<section id="content">
       section id="content"
    <br>
    <article >article</article>
    <br>
    <article>article</article>
    <br>
    <article>article</article>
    <br>
</section>
<footer>footer</footer>

And this is my style code

#container
{
    width: 340px;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
}
header
{
    width: 300%;
    height: 20%;
    background-color: #eefa0e;
}
nav
{
    background-color: #fe5301;
    float: left;
    margin-top: 15px;
    width: 30%;
    height:300%;
    text-align: center;

}

aside
{
background-color: #fe5301;
float: right;
margin-left: 40px;
width: 30%;
height:300%;
text-align: center;


}

#content
{
    background-color: #a5c7a6;
    float: right;
    margin-top: 15px;
    width: 80%;
    height: 70%;
}

article
{
    /*background-color:#bbf0ee;
    text-align: center
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    height: 20%;*/
    margin: 10px;
    width: 75%;
    height: 20%;
    position: relative;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px

}



footer
{
    /*clear: both;
    margin: 0;
    padding: .5em;
    border-top: 1px solid gray;
    text-align:center;
    clear: both;*/


    clear: both;
    position: relative;
    z-index: 10;
    height: 3em;
    margin-top: -3em;
    background-color: #d3b4c9;
    width: 300%;

}
Edited by tony75
  • 3 Contributors
  • 4 Replies
  • 155 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by ingolfsson
Member Avatar for Lsmjudoka

I'm not sure exactly why you have 300% width specified on your header, and 300% height specified on a couple other things - Perhaps you mean 300px?

Also you use <header> <nav> and <aside>, are you intending to use those as divs? (e.g. <div id="header">)

Edited by Lsmjudoka
Member Avatar for Lsmjudoka

Ohhh, disregard the second part of my post. Just realized you're using HTML5. Depending on your browser those tags may not be fully supported yet. I would try to build the page with <div id='header'> <div id='nav'> and so on to test and get it working, then transition to HTML5 later.

Member Avatar for ingolfsson

Hi, I looked into your code and there was couple of tags and divs missing
and floating was not quite right.

try this

<html>
<head>
    <link rel="stylesheet" type="text/css" href="danstyle.css">
    <link rel="stylesheet" type="text/css" href="reset.css">
</head>
<body>
<div id="container">
<header style="text-align: center">Header</header>
<div class="wrap">

<nav>nav</nav>

<section id="content">
       section id="content"
    <br>
    <article >article</article>
    <br>
    <article>article</article>
    <br>
    <article>article</article>
    <br>
</section>

<aside>aside</aside>
</div>

<footer>footer</footer>

</div>
</body>
</html>

and for the css

#container
{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
header
{
    width: 100%;
    height: 20%;
    background-color: #eefa0e;
}
nav
{
    background-color: #fe5301;
    float: left;
    margin-top: 15px;
    width: 20%;
    height:100%;
    text-align: center;
}
aside
{
background-color: #fe5301;
float: left;
margin-left: 40px;
width: 20%;
height:100%;
text-align: center;
}

section {
    background-color:green;
    float: left;
    margin-top: 15px;
    width: 40%;
    height:100%;
    text-align: center;

}

#content
{
    background-color: #a5c7a6;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    float:left;
    width: 60%;
    height: 100%;
}
article
{
    background-color:#bbf0ee;
    margin-right:0;
    margin-left:0;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    width: 100%;
    height: 20%;*/
    margin: 10px;
    height: 20%;
    position: relative;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px
}
footer
{
    clear: both;
    margin: 0;
    padding: .5em;
    text-align:center;
    border-top: 1px solid gray;
    text-align:center;
    clear: both;*/
    clear: both;
    position: relative;
    z-index: 10;
    height: 3em;
    margin-top: -3em;
    background-color: #d3b4c9;
    width:100%;
}

and I added a reset.css

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header, 
hgroup, menu, nav, section, menu,
time, mark, audio, video {
    margin: 0;
    border: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;
}

.clearfix:after {content: "."; display:block; height:0; clear:both; visibility:hidden; }
.clearfix {display:inline-block; }
* html .clearfix {height:1%; }
.clearfix {display: block; clear:both; }
ul { list-style: none; text-decoration: none; }
li { list-style: none; text-decoration: none; }
li a {list-style: none; text-decoration; none; }
.flow, #flow { overflow:visible; }
.upper-clearspace {height: 25px; width:auto; }
.lower-clearspace {height: 35px; width:auto; }
a { color:#193649; text-decoration:none; }
a:hover { color:#1166aa; text-decoration:none; }

You can add margins around the elements or paddings inside them
but now you should have the basic setup and it´s responsive

Let me know how it it :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.