0

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
44
Views
4 Years
Discussion Span
Last Post by ingolfsson
0

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

0

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.

0

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 :)

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.