/    Sign up×
Community /Pin to ProfileBookmark

Moving the div across

Hello (again)

I’ve been working through some web tutorials for divs- and so far so good. I’ve not uploaded my website to the University server yet. Instead, I have a screenshot and my code.

This is my HTML code:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd“>
<!– I chose this DOCTYPE so I could be more flexible with my code –>

<HTML>
<HEAD>
<!– This is the title of the webpage –>
<TITLE>
COMIX- The online galaxy of comic books
</TITLE>
<!– This is the external link to my CSS file –>
<LINK href= “comixcss.css” rel= “stylesheet” type= “text/css”>
</HEAD>
<BODY>
<DIV id= “background”>
<IMG src= “book.jpg” width= “740” height= “600”>
</DIV>
<DIV id= “contents”>
HHHHHHHHHHHHHHHHH<BR>
HHHHHHHHHHHHHHHHH <BR>
HHHHHHHHHHHHHHHHH<BR>
HHHHHHHHHHHHHHHHH <BR>
HHHHHHHHHHHHHHHHH <BR>
HHHHHHHHHHHHHHHHH <BR>
</DIV>
</BODY>
</HTML>

and this is my CSS:

#background {
position:absolute;
top:0;
left:5;
width:800;
height:800;
z-index:1;
padding:0px;
background-color:#000000;
background-image:url(book.jpg);
layer-background-image:url(book.jpg);
}

#contents {
position:absolute;
top:50;
left:20;
width:20;
height:50;
z-index:2;
}

and this is a screenshot:
[url]http://img208.imageshack.us/img208/1830/screenshotlj1.jpg[/url]

Now, as you can see, I have two divs- one called background and one called contents (which are just mock-ups which I am going to replace.) I am trying to move the H’s over onto the ‘page’ of the book, but no matter what I put in my CSS it doesn’t move. Have any idea how I can go about this?

PLEASE HELP ME, I am new with divs and I am detirmed to learn them.

to post a comment
HTML

1 Comments(s)

Copy linkTweet thisAlerts:
@CentauriMar 05.2007 — Unlike what is typical for table-based layouts, there is no need to put the book image as an <img> element within its own div - it can be set as background for the body - nor is there any need for absolute positioning. Assuming this is the 800x600 graphic in your other post, the usable width across the pages of the book is around 690 pixels (allowing a bit of a gap from the edge). Therefore a contents div set to 690px width, with auto left and right margins for centering and a 70px top margin, will line up nicely over the book graphic when it is a body background positioned top center.

The contents div can then be split into two to hold the contents for left and right sides of the book. See if this is close to what you want - html [CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>COMIX- The online galaxy of comic books</title>
<link href="comixcss.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="contents">
<div id="left_side">
<h4>Content for left side</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In vitae mauris ac nibh volutpat sagittis. Duis ante ipsum, facilisis in, dictum non, mattis vitae, elit. Nunc pellentesque ligula. Cras fermentum velit at sem. Duis a orci eu quam consequat viverra. Donec molestie neque sit amet dolor. Nulla vel pede. Pellentesque odio. Vestibulum convallis, libero sed scelerisque viverra, libero mauris egestas nisi, nec faucibus elit leo id libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus tellus pede, dictum ut, cursus sed, sagittis sit amet, orci. Integer sit amet nisi. Nunc tempor, lacus accumsan pulvinar luctus, nisl nunc gravida mauris, in ullamcorper urna nisl et massa. Sed suscipit neque. Duis erat nisi, mollis sit amet, faucibus in, pulvinar sit amet, diam. Pellentesque consequat sagittis arcu. Donec nunc ligula, vulputate a, ornare quis, consectetuer id, pede. Donec pellentesque rhoncus lorem.</p>
</div>

<div id="right_side">
<h4>Content for right side</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In vitae mauris ac nibh volutpat sagittis. Duis ante ipsum, facilisis in, dictum non, mattis vitae, elit. Nunc pellentesque ligula. Cras fermentum velit at sem. Duis a orci eu quam consequat viverra. Donec molestie neque sit amet dolor. Nulla vel pede. Pellentesque odio. Vestibulum convallis, libero sed scelerisque viverra, libero mauris egestas nisi, nec faucibus elit leo id libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus tellus pede, dictum ut, cursus sed, sagittis sit amet, orci. Integer sit amet nisi. Nunc tempor, lacus accumsan pulvinar luctus, nisl nunc gravida mauris, in ullamcorper urna nisl et massa. Sed suscipit neque. Duis erat nisi, mollis sit amet, faucibus in, pulvinar sit amet, diam. Pellentesque consequat sagittis arcu. Donec nunc ligula, vulputate a, ornare quis, consectetuer id, pede. Donec pellentesque rhoncus lorem.</p>
</div>
</div>
</body>
</html>
[/CODE]

and css [CODE]* {
margin: 0;
padding: 0;
}
body {
background-image: url(book.jpg);
background-repeat: no-repeat;
background-position: center top;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
}
p {
margin: 10px 0;
}
#contents {
width: 690px;
margin: 70px auto 0;
}
#left_side {
float: left;
width: 340px;
}
#right_side {
margin-left: 380px;
}[/CODE]


Note the css starts by zeroing the browser default margins and paddings to ensure conformity, and that the paragraph margin is then assigned a value.

Cheers

Graeme
×

Success!

Help @CreativeCozza spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...