Jump to content

Margin-top not working

music_fan01

By music_fan01
in CSS Help

 Share

Recommended Posts

music_fan01 Member

music_fan01

Posted
Posted

I am trying to get rid of my <br/> tags by using margin-top, but when I insert my margin-top into the div that has my image and two paragraphs it doesnt work where I it. It adds it below my links. I have an image and my two paragraphs in my content div and the content div is in the main div. I've tried putting margin-top in my content div, nothing happens, I put it in my main div and thats where I get the break at. Dont know what I am doing wrong.  :(

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Author: Reality Software
Website: http://www.realitysoftware.ca
Note: This is a free template released under the Creative Commons Attribution 3.0 license, 
which means you can use it in any way you want provided you keep the link to the author 

intact.
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" /></head>
<body>


<!-- header -->
     <div id="header">
    	<div id="logo"><a href="#">Header</a></div>
        <div id="menu">
        	<ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="">Link</a></li>
            <li><a href="">Link</a></li>
            <li><a href="">Link</a></li>
            <li><a href="contact.php">Contact</a></li>
    <li><a href="guestbook.php">Guestbook</a></li>
            
                  </ul>

<div><a href="twitter.com/">
<img border="0" src="images/twitter.png" alt="twitter" width="58px;" height="53px;" />
</a></div>

   
      </div>
  </div>
    <!--end header -->
    <!-- main -->
    <div id="main">
    <div id="content">

   
<div id="text">
                <h1><strong>Welcome</strong></h1>
</div>

<br/>
<br/>
<br/>
<br/>
<br/>
<br/>


<div id="image">
<img src="images/test.jpg" style="width: 360px;"/></div>




<div id="p">
<div style="float: left; width: 180px;">
<h2>Header</h2>
  <p>
     This is our right text column.
    This is our right text column.
    This is our right text column.
    This is our right text column.
    This is our right text column.
     This is our right text column.
    This is our right text column.
    This is our right text column.
    This is our right text column.
    This is our right text column.
  </p>
</div>


<div id="div" style="float: left;">
<img src="images/div103.gif" /></div>

<div style="float: left; width: 190px;">
<h2>Header</h2>
  <p>
    This is our left text column.
    This is our right text column.
    This is our right text column.
    This is our right text column.
    This is our right text column.
     This is our right text column.
    This is our right text column.
    This is our right text column.
    This is our right text column.
    This is our right text column.
  </p>
  </div>
</div>


</div>


           
     <!-- footer -->
    <div id="footer">
    <div id="left_footer">© Copyright 2011<strong> Author </strong></div>
    <div id="right_footer">

<!-- Please do not change or delete this link. Read the license! Thanks. :-) -->
Design by <a href="http://www.realitysoftware.ca" title="Website Design">Reality 

Software</a>

    </div>
    </div>
    <!-- end footer -->
</div>
    <!-- end main -->



</body>
</html>

 


/* body */

body {
margin:114px 0 0 0; 
line-height:16px; 
font-family: Tahoma, Arial; 
background: url(images/body_top_bckg.jpg) no-repeat center top #171c20; 
color:#bed7e6; 
font-size:11px;
}

a { 
color:#018BC1;
}
a:hover { 
text-decoration:none;
}
#header {}
#logo { 
padding:30px 0 120px 0;
color:#fff; 
text-align:center;
}


/* logo */
#logo a{ 
color:#fff; 
text-decoration:none; 
font-weight:bold; 
font-size:24px; 
text-transform:uppercase; 
}

/* Menu */
#menu {
color:#fff; 
text-align:center; 

}
#menu ul {
text-align:center;
list-style:none; 
padding:0;
}
#menu ul li {
display:inline
}
#menu ul a { 
font-weight:bold; 
font-size:14px; 
text-decoration:none; 
color:#fff; 
background-color:#445d6c; 
padding:0 10px 2px 10px;
}
#menu ul a:hover 
{ 
background-color:#f26513;
}

/* Main */
#main {
background: url(images/body_all_bckg.jpg) repeat-y top center;

}
#content {
width: 780px; 
margin:0 auto;
overflow:hidden;
margin-bottom:3cm;



}

/ * Text */
#text {
    float: left;
    width: 780px;
}
#text p {
margin:7px 0 7px 0;
}

#text li {
background:url(images/li.gif) no-repeat 0px 7px;
}

h1 {
margin:30px 0 0 0; 
padding:5px 0 7px 45px; 
text-transform:uppercase; 
font-size:24px; color:#fff; 
background:url(images/h1_bckg.jpg) no-repeat;
float:left;
}

/* Footer */

#footer {
background:url(images/footer_bckg.jpg) no-repeat top center; 
height:102px; clear:both; 
width:780px; 
margin:0 auto; 
}
#left_footer {
float:left;
padding:60px 0 0 30px; 
color:#fff; font-size:12px;
}
#left_footer a { 
color:#fff;
}
#left_footer a:hover { 
text-decoration:none;
}
#right_footer { 
float:right;  
padding:60px 30px 0 0; 
color:#fff;  
font-size:12px; text-align:right;
}
#right_footer a { 
color:#fff;
}
#right_footer a:hover { 
text-decoration:none;
}

#content .inner_copy {
border:0;color:#f00;
float:left;
width:50%!important;
margin:-202px 0 0 0;
overflow:hidden;
line-height:0;
padding:0;
font-size:12px

}


/* Floats */

#leftFloat
{
  float: left;
  width: 100px;
}

#rightFloat
{
  float: right;
  width: 100px;
}

/* gallery */
.row img {
    margin: 2px;
    border: 1px solid #0000ff;
    clear: both;
    width: 100px;
    height: 90px;
    margin-left:3px;
}

.first
{
    float: right;
    text-align: center;
} 
     
.last {
    border: 1px solid #ffffff;
    float: right;
}

.desc
{
    text-align: center;
    font-weight: normal;
    width: 120px;
    margin: 10px;
}


/* image */
#image {
float: left; 

}

/* paragraphs */
#p {
    float: right;  
    margin-right: 4px;
}

/* Divider */
#div {
float: right; 
width: 20px; 
margin-right: 1px;
height: 200px;
}

/* Icon */
#icon {
text-align:center;
}

Link to comment
Share on other sites
Frank P Newbie

Frank P

Posted
Posted

There is no margin declared for div#image:

<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div id="image">
    <img src="images/test.jpg" style="width: 360px;"/>
</div>

(...)

#image {
    float: left; 
}

 

Also, you have a very illogical and redundant way of giving elements IDs, and you're using way too much divs. You'd better do a good - and free - course in CSS before you continue: http://w3schools.com (step-by-step) or http://htmldog.com (crash course).

 

Link to comment
Share on other sites
music_fan01 Member

music_fan01

Posted
  • Author
Posted

There is no margin declared for div#image:

<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div id="image">
    <img src="images/test.jpg" style="width: 360px;"/>
</div>

(...)

#image {
    float: left; 
}

 

Also, you have a very illogical and redundant way of giving elements IDs, and you're using way too much divs. You'd better do a good - and free - course in CSS before you continue: http://w3schools.com (step-by-step) or http://htmldog.com (crash course).

 

I went back and focused on my divs and I read over the tutorials. Would using classes be a better option?

Link to comment
Share on other sites
Frank P Newbie

Frank P

Posted
Posted
I went back and focused on my divs and I read over the tutorials. Would using classes be a better option?
]

No, that makes little difference. And I don't wanna be an a......le, but your rebuttal question makes clear that your understanding of CSS hasn't improved much since yesterday. I would really urge you to do the step-by-step W3 Schools course, lest you will run into much, much more trouble.

Link to comment
Share on other sites
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.

×
 Share
Go to topic listing
×
×
  • 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.