SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Div Tag Problems

    So I want to remove the div tag for two pages of my site but I can't figure out how to do so without messing up the layout of my page.

    Link to Screenshot

    The image on the left is what happens after I delete the div tag and the one on the right is when it is intact.

    I don't want that gap between the content area and the header. Also it doesn't do that in dream weaver only in the browsers.

    Can anyone help me?

    Code with Div

    Code:
    <head>
    <title>Sigma Lambda Sigma</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link href="../Templates/charitable-organization/style.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    body {
    	background-color: #58B0e3;
    }
    .style1 {color: #FFFFFF}
    .style2 {color: #58B0e3}
    -->
    </style></head>
    <body>
    <div id="container">
      <div id="header">
        <ul>
          <li><a href="index.html"><strong>Home</strong></a></li>
          <li><a href="about.html">About</a><a href="service.html">Service</a></li>
          <li><a href="philanthropy.html">Philanthropy</a></li>
          <li><a href="members.html">Members</a></li>
          <li><a href="alumni.html">Alumni</a></li>
          <li class="style1"><a href="join.html">Join Us</a></li>
          <li> <a href="contact.html"><span class="style1">Contact </span></a></li>
        </ul>
        <img src="Images/header.jpg" width="717" height="288" /></div>
      <div id="content">
        <div align="left" id="left">
          <h1 class="style2"><span style="color:rgb(51, 102, 255);">blah</span></h1>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p><div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like-box href="http://www.facebook.com/pages/Sigma-Lambda-Sigma-Service-Sorority/203075126411924" width="292" show_faces="false" border_color="" stream="false" header="false"></fb:like-box></p>
          <h1>&nbsp;</h1>
          <div id="photos"></div>
        </div>
        <div id="footerline"></div>
      </div>
      <div id="footer">2011</div>
    </div>
    </body>
    </html>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi, Welcome to SitePoint

    You'll need to post your CSS (or provide a link) and then tell us which div tag you want to remove as there are a lot of them in the code above.

  3. #3
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The left one and...

    Code:
    body {
    	background-color:#a6bf79;
    	color:#000000;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	margin: 10px 10px;
    	padding: 0px;
    }
    .clear{clear:both;}
    * {
    	margin: 0px;
    	padding: 0px;
    }
    #container {
    	margin: 0px auto;
    	text-align: left;
    	width: 717px;
    }
    a{
    	font-size:12px;
    }
    p{
    	margin: 15px 0px;
    }
    /********************** Header ***************************/
    #header {
    	margin: 0px 0px 0px 0px;
    	background-image:url(Images/banner.jpg);
    	width:717px;
    	height:288px;
    	position:relative;
    	overflow: hidden;
    }
    #header ul{
    	background-color:#797B7D;
    	width:711px;
    	border: 3px solid #FFFFFF;
    	display:block;
    	top:255px;
    	position:absolute;
    	margin: 0px 0px 0px 0px;
    	height:22px;
    	padding:5px 0px 0px 0px;
    	text-align:center;
    }
    #header li{
    	display:inline;	
    }
    #header ul a{
    	text-decoration:none;
    	color:#FFFFFF;
    	margin: 0px 15px;
    }
    #header ul a:hover{
    	text-decoration:underline;
    	color:#28556b;
    }
    #logo_w1,#logo_w2 {
    	font-size: 24px;
    	font-style:italic;
    	color:#FFFFFF;
    	position:absolute;
    }
    #logo_w1{
    	top:15px;
    	left:70px;
    }
    #logo_w2{
    	top:44px;
    	left:94px;
    }
    #header_text {
    	top:90px;
    	left:43px;
    	width:230px;
    	position:absolute;
    }
    #header_text p{
    	font-size: 18px;
    	color:#FFFFFF;
    }
    #header_text a{color:#28556b;}
    #header_text a:hover{color:#c77e0c;}
    /********************** Content ***************************/
    #content {
    	background-image:url(images/content_bg.gif);
    	width:717px;
    }
    img{
    	border-width:0px;
    }
    h1{
    	color:#000000;
    	font-size:14px;
    	margin: 20px 0px 20px 0px;
    }
    
    h2{
    	color:#85a157;
    	font-size:14px;
    	text-align:center;
    	width:200px;
    	margin: 10px 0px 15px 0px;
    }
    #left {
    	float:left;
    	width:417px;
    	margin-left:27px;
    	display:inline;
    	padding-top: 0px;
    	padding-right: 10px;
    	padding-bottom: 30px;
    	padding-left: 0px;
    }
    #left a{color:#28556b;}
    #left a:hover{color:#c77e0c;}
    #photos a{
    	margin-right:14px;
    }
    #right {
    	float:right;
    	width:210px;
    	padding: 0px 20px 20px 20px;
    	margin-top:10px;
    	border-left: #FFF 2px solid;
    
    }
    #right a{
    	color:#c77e0c;
    }
    #right a:hover{
    	color:#85a157;
    }
    /********************** Footer ***************************/
    #footerline {
    clear:both;
    background-image:url(images/footer_bg.gif);
    font-size:1px;
    height:10px;
    }
    #footer {
    	width:717px;
    	text-align:center;
    	padding: 20px 0px;
    }
    I believe that is it.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    I'll have to us my telepathic powers then

    I'm guessing that you are talking about removing the #left wrapper although you said "the left one" which was a little confusing.

    Removing #left makes the parent of the h1 #content instead which is not floated and therefore the 20px margin on the h1 collapse onto #content instead and moves it 20px down the page causing a gap.

    To stop the margin collapse add a 1px padding to #content.

    Code:
    #content {
        padding:1px 0 0;
    }
    Am I close or are my telepathic powers fading with old age

  5. #5
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy

    Sorry for being confusing!

    I was talking about the div#left and I only want it removed and the gap taken off of a page or two. I haven't written code in about 3 years so I am extremely lost.

    I learned how to make it work but it effects every page and not just the one.

    Sorry for being difficult. I know the coding there is for the style sheet but how do I get it to only effect the one page?

  6. #6
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Never mind! You sir are a scholar and a gentleman!

    Your abilities are still spot on thank you!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •