Modify CSS

kriru

03-14-2011, 11:36 AM

Hello Coders,

For the page - http://www.guru99.com/software-testing-seven-principles.html , The top and the left index modules appear BEFORE the main content.

Is there are a way to manipulate the code WITHOUT changing the appearance such that in code the main content appears before anything else.

I guess need to use some content wrapper and some negative margins.

I am very weak with CSS and looking towards the community to direct me to a solution

Cheers
Kris

joedeveloper

03-14-2011, 12:50 PM

You may try this:

<html>
<head>
<title>Negative Margins</title>
<meta http-equiv="Content-Type" content-wrapper="text/html; charset=ISO-8859-1" />
<style type="text/css">
#wrapper {
text-align: left;
width: 770px;
margin: 10px auto 0 auto;
border: 1px solid silver;
}

#header {
background: red;
padding: 10px 15px 10px 13px;
}

#content-wrapper {
width: 100%;
background: gold;
float: left;
margin-right: -200px;
}

#content-inner {
margin-right: 200px;
padding: 5px 15px 0 15px;
}

#navigation {
width: 200px;
float: right;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">header</div>
<div id="content-wrapper">
<div id="content-inner">
<p>this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. </p>
</div>
</div>

<div id="navigation">
<ul>
<li><a href="">Day 1</a></li>
<li><a href="">Day 2</a></li>
<li><a href="">Day 3</a></li>
<li><a href="">Day 4</a></li>
<li><a href="">Day 5</a></li>
</ul>
</div>

</div>

</body>
</html>

effpeetee

03-14-2011, 12:58 PM

There is a lot of help here (http://www.exitfegs.co.uk/Sources.html). Use the search facility. Single words often best when searching.

Frank

Frank