/    Sign up×
Community /Pin to ProfileBookmark

problem with css attrbute, margin-top

Copy linkTweet thisAlerts:
Jul 22.2006

hey, although quite experianced in web design, im a newbie to css :p

as a learning excercise im trying to replicate a css design from scratch

im having a problem getting my paragraph headings <div class=”head”> to move to were they should be, without using <br> in html, when i try putting “margin-top 217px;” into the css for my head class it, it moves ALL my content down

please could you help me!, its probably structural

here is my css:

[CODE]body {
font-size: 8pt;
font-family: sans-serif;
color: #555753;
background: #fff url(bg.jpg) no-repeat bottom right;
margin: 0px;
}
a:link {
font-weight: bold;
text-decoration: none;
color: #B7A5DF;
}
a:visited {
font-weight: bold;
text-decoration: none;
color: #D4CDDC;
}
a:hover, a:active {
text-decoration: underline;
color: #9685BA;
}
div.main {
margin-left: 250px;
margin-top: -14px;
background-color: #FFFFFF;
background-image: url(“bg_main.gif”);
background-repeat: repeat-y;
width: 569px;
height: 700px;
}
div.lefty {
background-image: url(“bg_header.jpg”);
background-repeat: no-repeat;
margin-left: 32px;
width: 346px;
height: 217px;
}
div.righty {
background-image: url(“bg_header2.jpg”);
background-repeat: no-repeat;
width: 148px;
height: 217px;
margin-left: 389px;
margin-top: -217px;
}
div.para {
margin-left: 9px;
width: 330px;
}
div.para p {
margin-top: 217px;
}
div.head {
background-image: url(“flower3.gif”);
background-repeat: no-repeat;
background-position: top left;
}
div.head h1 {
margin-left: 24px;
}
[/CODE]

and here is my html:

[CODE]<html>
<head>
<title>Test Template</title>
<link href=”style.css” rel=”stylesheet” type=”text/css”
</head>
<body>
<!– start the main div –>
<div class=”main”>
<!– start the left in main –>
<div class=”lefty”>
<!– start the top in left –>
<div class=”topl”>
</div>
<!– start the para in left –>
<div class=”para”>
<!– start the head in para –>
<div class=”head”>
<h1>
Welcome to Floware</h1>
</div>
<p>
Welcome to Floware! We are a web design company based in Edinburgh and run by students. Our services include: web design, graphic design, branding, banner creation and widget creation. Due to the fact we are students our prices are 10% of what most established companys charge, and there is no difference in quality!</p>
</div>
</div>
<!– start the right in main –>
<div class=”righty”>
<!– start the topr in right –>
<div class=”topr”>
News <Br> No news
</div>
</div>
</div>
</body>
</html> [/CODE]

thanks in advance to anyone who trys or suceeds in helping me!
?

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@The_Little_GuyJul 22.2006 — try adding:

[CODE]position:absolute;[/CODE]
Copy linkTweet thisAlerts:
@tabzterJul 23.2006 — instead of margin-top 217px; for the head clss try instead:

[B]

div.para {

...

...

padding-top:217px;

}[/B]
Copy linkTweet thisAlerts:
@ray326Jul 23.2006 — First of all, you're missing half the point of CSS. That is the HTML should be structurally and semantically significant. Here's a quick shot at it. It's crappy but I gotta run.
[code=html]
<html>
<head>
<TITLE></TITLE>
<style type="text/css">
body {
font-size: 8pt;
font-family: sans-serif;
color: #555753;
background: #fff url(bg.jpg) no-repeat bottom right;
margin: 0px;
}
a:link {
font-weight: bold;
text-decoration: none;
color: #B7A5DF;
}
a:visited {
font-weight: bold;
text-decoration: none;
color: #D4CDDC;
}
a:hover, a:active {
text-decoration: underline;
color: #9685BA;
}
div.main {
margin-left: 250px;
margin-top: -14px;
background-color: #FFFFFF;
background-image: url("bg_main.gif");
background-repeat: repeat-y;
width: 569px;
height: 700px;
}
div.lefty {
background-image: url("bg_header.jpg");
background-repeat: no-repeat;
margin-left: 32px;
width: 346px;
height: 217px;
}
div.righty {
background-image: url("bg_header2.jpg");
background-repeat: no-repeat;
width: 148px;
height: 217px;
margin-left: 389px;
margin-top: -217px;
}
div.para {
margin-left: 9px;
width: 330px;
}
div.para p {
margin-top: 217px;
}
h1 {
background-image: url("flower3.gif");
background-repeat: no-repeat;
background-position: top left;
margin-left: 24px;
}
</style></head>
<body>
<!-- start the main div -->
<div class="main">
<!-- start the left in main -->
<div class="lefty">
<!-- start the top in left -->
<h1>Welcome to Floware</h1>
<p>
Welcome to Floware! We are a web design company based in Edinburgh and run by students. Our services include: web design, graphic design, branding, banner creation and widget creation. Due to the fact we are students our prices are 10% of what most established companys charge, and there is no difference in quality!</p>
</div>

<!-- start the right in main -->
<div class="righty">
<!-- start the topr in right -->
<div class="topr">
<h2>News</h2>
<p>No news</p>
</div>
</div>
</div>
</body>
</html>
[/code]
Copy linkTweet thisAlerts:
@FlowareauthorJul 23.2006 — thanks guys, you were a great help

i worked it out, my design and css was fine, but i forgot to use one part of the structure i had laid out

?

so thanks anyway
×

Success!

Help @Floware 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 5.18,
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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

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

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...