Jump to content

Recommended Posts

This is the page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Please keep the author:)
Template made by WickedHacker
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>My f****** Page</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>

<div id="header"></div>
<div id="navigation">
<div id="nav-menu">
  <ul>
    <li><a href="/home"><span>Home</span></a></li>
    <li><a href="#"><span>Forum</span></a></li>
    <li><a href="#"><span>Updates</span></a></li>
  </ul>
</div>
</div>
<div id="aspect-top"></div>
<div id="aspect-content">
<div id="content">
aaa<br />aaa<br />aaa<br />aaa<br />aaa<br />aaa<br />aaa<br />
</div>
</div>




</body>
</html>

 

 

This si the part of css where i need help

 

#aspect-content {
position:absolute;
top:505px;
left:200px;
width: 900px;
background: url(page.png) repeat-y left top;

}

#content {
position:relative;
top:30px;
left:30px;
width: 810px;


}

 

 

When i put someting in <div id="content"> the <div id="aspect-content">`s widht don`t grow up once with <div id="content">

Here is an image:)

http://imageshack.us/photo/my-images/807/unled4fp.png/

Link to comment
https://forums.phpfreaks.com/topic/238917-a-noob-needs-help-in-css/
Share on other sites

That's because you gave it a property of absolute. If you read the manual it will say that by assigning an element with the property of absolute it will be taken out of the normal flow. The consequence of that is that the dimensions of the absolute positioned element will not affect anything else. So if you would just assign it with a position of relative you will probably see the impact.

 

Although i must say that there is no reason at all for this design to add a position of relative nor absolute as far as i can tell from the picture. I recommend to have a read on the css boxmodel. A pretty vital concept in css if your designing. http://bayarearcsociety.com/tutorial/css_tutorial14.php

 

Btw that is a link to a pretty good to follow css tutorial. it wont beat a book, but for learning the basics it's good enough.

I have another problem now:)

 

 

 

	<div id="aspect-top">
<div class="title"><h1>My title Here!</h1></div>
<div class="title_author">Wicked hacker</div>

</div>

 

#aspect-top {
position:absolute;
top:230px;
left:200px;
width: 900px;
height: 60px;
background: url(page_top2.png) no-repeat left top;
z-index:-1;

}

.title {
margin:20px auto;
width: 860px;
color:#752626

}
.title  h1{
line-height:2em;
color:#752626;
text-align:center;

}

.title_author {
position:relative;
right:25px;
top:20px;
color:#ff0000;

}

 

 

 

Image

 

 

i think i should use z-index but it doesn`t work:)

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.