SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Feb 2008
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Another #container on footer?

    I need some advise on this issue. Since my #container is 840px and the footer dont, how can i put the site credits on the footer (and not bellow it) displaying on the 840px container?

    My html;
    HTML Code:
    </head>
    <body>
    <!-- container -->
    <div id="container">
    <!-- logotipo -->
    <div id="logotipo"><img src="images/logotipo.png" alt="Logotipo" width="184" height="80" /></div>  
    <!-- Fim Logotipo-->  
    		
            <!-- Navbar -->
               
            <div id="navbar">
              <ul>
                <li><a href="#">home</a></li>
                <li><a href="#">portfolio</a></li>
                <li><a href="#">contact</a></li>
              </ul>
            </div>
            <div id="image-header"><img src="images/image_header.png" alt="Image" width="840" height="268" /></div>	
    <div id="post-it">
    <div id="post_it-image">
      <img id="post_it" src="images/post-it.png" width="241" height="243" alt="" />	</div>
      </div>
    	<div id="who-i-am-label-image"><img src="images/who_i_am_label.png" alt="Who I Am" name="who_i_am_label" width="361" height="59"/></div>
    <div id="who-i-am-label">
          <p> Lorem ipsum ea nam saepe prodesset contentiones, in est sumo graeci tritani. His eius accusam in, eu his elit maiestatis. Eum rebum dicam albucius ei, puto oportere vim et tantas.</p>
    	</div> 
      <div id="what-i-do-label-image"><img src="images/what_i_do_label.png" alt="What I Do" name="what_i_do_label" width="356" height="53" id="what_i_do_label" /></div>
      
      		<!-- -->
      	
        <div id="how-i-do-it-label-image"><img id="how_i_do_it_label" src="images/how_i_do_it_label.png" width="317" height="53" alt="How I Do It" /></div>
      
      <!-- -->
      
    	<div id="what-i-do-label">
    	  <ul>
    	    <li>Some text here</li>
            <li>Some text heret</li>
    	    <li>Some text here</li>
    	    <li>Some text here</li>
    	    <li>Some text here</li>
    	  </ul>
        </div>
    
      
      		<!-- -->
      
      <div id="how-i-do-it"> 
        <ul>
          <li>Some text here</li>
          <li>Some text here</li>
          <li>Some text here</li>
          <li>Some text here</li>
          <li>Some text here</li>
          <li>Some text here</li>
        </ul>
      </div>
    </div>
    <div id="footer"><img src="images/background_footer.jpg" alt="Footer" /></div>
    </body>
    </html>
    and my css;

    Code:
    body{
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    	color: #000000;
    	background-image: url(images/background_header.png);
    	background-repeat: repeat-x;
    	margin-left: 0px;
    	margin-top: 0px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    }
    
    #container {
    	width: 840px;
    	margin-right: auto;
    	margin-left: auto;
    }
    
    
    
    #logotipo {
    	margin-left: 35px;
    	margin-top: 15px;
    	width: 184px;
    	float: left;
    
    }
    
    
    #image-header {
    	margin-top: 5px;
    	/*position: absolute;*/
    }
    #navbar {
    	float: right;
    	width: 400px;
    	height: 30px;
    	padding-top: 37px;
    }
    #navbar ul {
    	list-style-type: none;
    	margin-left: 0px;
    	padding-left: 0px;
    	text-align: center;
    	text-transform: uppercase;
    	font-family: Calibri, Verdana, Arial, Georgia;
    }
    #navbar li {
    	display: inline;
    }
    #navbar a {
    	text-decoration: none;
    	padding: .2em 1em;
    	color: #FFFFFF;
    }
    #navbar a:hover {
    	border-bottom-width: thin;
    	border-bottom-style: solid;
    	border-bottom-color: #40321F;
    }
    
    
    
    #post-it {
    	top:378px;
    	width:300px;
    	float: right;
    	margin-top: 5px;
    }
    #post_it-image {
    	padding-right: 35px;
    }
    
    #who-i-am-label-image {
    	float: left;
    	width: 361px;
    	margin-top: 21px;
    	padding-left: 35px;
    }
    
    #who-i-am-label{
    	width:361px;
    	float: left;
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    	color: #000000;
    	font-size: 16px;
    	line-height: 25px;
    	font-weight: normal;
    	padding-left: 50px;
    }
    #what-i-do-label-image {
    	float: left;
    	width: 361px;
    	margin-top: 60px;
    	padding-left: 40px;
    }
    #what-i-do-label {
    	float: left;
    	width:360px;
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    	color: #000000;
    	font-size: 16px;
    	line-height: 25px;
    	font-weight: normal;
    	padding-left: 30px;
    	clear: both;
    }
    #what-i-do-label ul {
    	list-style-type: none;
    	padding-left: 17px;
    }
    #what-i-do-label li {
    	background-image: url(file:///C|/Users/Paulo_Couto/Desktop/qoska/images/bullet.png);
    	background-repeat: no-repeat;
    	background-position: left center;
    	padding-left: 15px;
    }
    #how-i-do-it-label-image {
    	float: right;
    	width: 317px;
    	margin-top: 23px;
    	margin-right: 40px;
    }
    
    
    #how-i-do-it {
    	float: right;
    	width:360px;
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    	color: #000000;
    	font-size: 16px;
    	line-height: 25px;
    	font-weight: normal;
    	clear: right;
    }
    #how-i-do-it ul {
    	list-style-type: none;
    	padding-left: 17px;
    }
    #how-i-do-it li {
    	background-image: url(file:///C|/Users/Paulo_Couto/Desktop/qoska/images/bullet.png);
    	background-repeat: no-repeat;
    	background-position: left center;
    	padding-left: 15px
    }
    #footer {
    	background-image: url(../images/background_footer.jpg);
    	background-repeat: repeat-x;
    	clear: both;
    }

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Stick them inside the footer DIV.

  3. #3
    SitePoint Member
    Join Date
    Feb 2008
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    Stick them inside the footer DIV.
    But in that case i must apply absotute positioning to them right?

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No. Absolute positioning renders content in relation to its parent if the parent container has a position other than static applied to it (or the browser window if it doesn't).

  5. #5
    SitePoint Member
    Join Date
    Feb 2008
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    No. Absolute positioning renders content in relation to its parent if the parent container has a position other than static applied to it (or the browser window if it doesn't).
    I dont know what i´m doing wrong but i cant put the div on the footer. Can you take as look at the attachment please?

    Html;

    HTML Code:
    <div id="footer"><img src="images/background_footer.jpg" alt="Footer" />
      <div id="footernav">
        <ul>
          <li>home</li>
          <li>portfolio</li>
          <li>contact</li>
        </ul>
      </div>
    CSS;

    Code:
    @charset "utf-8";
    /* CSS Document */
    
    body{
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    	color: #000000;
    	background-image: url(images/background_header.png);
    	background-repeat: repeat-x;
    	margin-left: 0px;
    	margin-top: 0px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    }
    
    #container {
    	width: 840px;
    	margin-right: auto;
    	margin-left: auto;
    }
    
    
    
    #logotipo {
    	margin-left: 35px;
    	margin-top: 15px;
    	width: 184px;
    	float: left;
    
    }
    
    
    #image-header {
    	margin-top: 5px;
    	/*position: absolute;*/
    }
    #navbar {
    	float: right;
    	width: 400px;
    	height: 30px;
    	padding-top: 37px;
    }
    #navbar ul {
    	list-style-type: none;
    	margin-left: 0px;
    	padding-left: 0px;
    	text-align: center;
    	text-transform: uppercase;
    	font-family: Calibri, Verdana, Arial, Georgia;
    }
    #navbar li {
    	display: inline;
    }
    #navbar a {
    	text-decoration: none;
    	padding: .2em 1em;
    	color: #FFFFFF;
    }
    #navbar a:hover {
    	border-bottom-width: thin;
    	border-bottom-style: solid;
    	border-bottom-color: #40321F;
    }
    
    
    
    #post-it {
    	top:378px;
    	width:300px;
    	float: right;
    	margin-top: 5px;
    }
    #post_it-image {
    	padding-right: 35px;
    }
    
    #who-i-am-label-image {
    	float: left;
    	width: 361px;
    	margin-top: 21px;
    	padding-left: 35px;
    }
    
    #who-i-am-label{
    	width:361px;
    	float: left;
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    	color: #000000;
    	font-size: 16px;
    	line-height: 25px;
    	font-weight: normal;
    	padding-left: 50px;
    }
    #what-i-do-label-image {
    	float: left;
    	width: 361px;
    	margin-top: 60px;
    	padding-left: 40px;
    }
    #what-i-do-label {
    	float: left;
    	width:360px;
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    	color: #000000;
    	font-size: 16px;
    	line-height: 25px;
    	font-weight: normal;
    	padding-left: 30px;
    	clear: both;
    }
    #what-i-do-label ul {
    	list-style-type: none;
    	padding-left: 17px;
    }
    #what-i-do-label li {
    	background-image: url(file:///C|/Users/Paulo_Couto/Desktop/qoska/images/bullet.png);
    	background-repeat: no-repeat;
    	background-position: left center;
    	padding-left: 15px;
    }
    #how-i-do-it-label-image {
    	float: right;
    	width: 317px;
    	margin-top: 23px;
    	margin-right: 40px;
    }
    
    
    #how-i-do-it {
    	float: right;
    	width:360px;
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    	color: #000000;
    	font-size: 16px;
    	line-height: 25px;
    	font-weight: normal;
    	clear: right;
    }
    #how-i-do-it ul {
    	list-style-type: none;
    	padding-left: 17px;
    }
    #how-i-do-it li {
    	background-image: url(file:///C|/Users/Paulo_Couto/Desktop/qoska/images/bullet.png);
    	background-repeat: no-repeat;
    	background-position: left center;
    	padding-left: 15px
    }
    #footer {
    	background-image: url(../images/background_footer.jpg);
    	background-repeat: repeat-x;
    	clear: both;
    }
    #footernav {
    	width: 300px;
    	margin-top: 5px;
    }
    #footernav ul {
    	list-style-type: none;
    }
    #footernav li {
    	display: inline;
    }
    Thank´s.
    Attached Images Attached Images

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try removing the background_footer.jpg file from the HTML and serving it as a background on the footer DIV.

  7. #7
    SitePoint Member
    Join Date
    Feb 2008
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    Try removing the background_footer.jpg file from the HTML and serving it as a background on the footer DIV.
    It works now. Thank´s for the tip and for your patience .

  8. #8
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No problem.


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
  •