Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 3 123 LastLast
Results 1 to 15 of 45
  1. #1
    New Coder
    Join Date
    Dec 2009
    Location
    MN
    Posts
    34
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Transitioning to div's help

    I have a good understanding on using div's, but I have to do this to the footer to get it to work
    <div id="footer">
    <div id="footerl"></div>
    <div id="footerr"></div>
    </div>

    footerl, footerr each are 50px by 50px with a gradient image to make a corner. footer has the background repeated x. Problem is when I add text to footer it breaks. I hope someone can understand what's going on.
    Last edited by KatoPC; 12-30-2009 at 05:55 AM.

  • #2
    Regular Coder
    Join Date
    Jun 2008
    Posts
    173
    Thanks
    2
    Thanked 9 Times in 9 Posts
    you need to post the css styles also.

    or post an online link to the page where you are using.

    vineet

  • #3
    New Coder
    Join Date
    Dec 2009
    Location
    MN
    Posts
    34
    Thanks
    2
    Thanked 0 Times in 0 Posts

    css

    #footerl {
    background-image:url(images/edgelb.jpg);
    float:left;
    height:50px;
    width:50px;
    position:relative;}
    #footer {
    height:50px;
    width:900px;
    position:relative;
    float:left;
    background-image:url(images/footer.jpg);
    background-repeat:repeat-x;}
    #footerr {
    background-image:url(images/edgerb.jpg);
    float:right;
    height:50px;
    width:50px;
    position:relative;}

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello KatoPC,
    You have a bit of room there, could put quite a bit of text before you ran out.
    Where were you putting it and how much was there?

    Have a look at this, just copy/paste the whole thing into a new .html document -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	font: 100% "Comic Sans MS";
    	background: #FC6;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	outline: 0;
    }
    #container {
    	height: 400px;
    	width: 800px;
    	margin: 30px auto 0;
    	background: #999;
    	font-size: 0.8em;
    }
    #footer {
    	width: 900px;
    	margin: 0 auto; /*centers footer*/
    	overflow: auto; /*clears floats*/
    	background: #F00 url(images/footer.jpg) repeat-x; /*color for demo only*/
    	text-align: center; /*horizontally centers text*/
    	line-height: 50px; /*vertically centers text*/
    }
    #footerl {
    	height: 50px;
    	width: 50px;
    	float: left;
    	background: #000 url(images/edgelb.jpg); /*color for demo only*/
    }
    #footerr {
    	height: 50px;
    	width: 50px;
    	float: right;
    	background: #00f url(images/edgerb.jpg); /*color for demo only*/
    } 
    </style>
    </head>
    <body>
        <div id="container">
        	<p>Some clever content here</p>
        <!--end container--></div>
            <div id="footer">
                <div id="footerl"></div>
                <div id="footerr"></div>
                	<p>footer text here</p>
            <!--end footer--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    Dec 2009
    Location
    MN
    Posts
    34
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I'll see if I can replicate what I did

    Not much text just the copyright info and design link. I have a test webspace from charter I can ftp to. Check back for a link.

    Test Link
    Last edited by KatoPC; 12-30-2009 at 09:10 PM.

  • #6
    New Coder
    Join Date
    Dec 2009
    Location
    MN
    Posts
    34
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Added link to previous post

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Link is dead right now...

    I did get a quick look at in once though.
    In your markup you have the floats coming after the body section of your footer. You did not re-arrange them like I showed you in my first reply.
    Use the CSS I quoted you in my first reply also.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    New Coder
    Join Date
    Dec 2009
    Location
    MN
    Posts
    34
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I set up the footer id as you specified putting the footer after the </div> for container...correct?
    I'll post the entire style sheet OLD STYLES


    Code:
    #container {
    	float:none;
    	height:1100px;
    	width:900px;
    	background-color:#FFFFFF;
    }
    #edgel {
    	background-image:url(images/edgel.jpg);
    	float:left;
    	height:1050px;
    	width:50px;
    	position:relative;
    }
    #adbanner {
    	float:left;
    	height:60px;
    	width:800px;
    	position:relative;
    }
    
    #edger {
    	background-image:url(images/edger.jpg);
    	float:right;
    	height:1050px;
    	width:50px;
    	position:relative;
    }
    #header {
    	height:180px;
    	width:800px;
    	background-image:url(images/Inertiaheader3.png);
    	position:relative;
    	visibility:visible;
    	float:left;
    }
    #nav {
    	height:35px;
    	width:800px;
    	font-family:Verdana, Helvetica, sans-serif;
    	font-weight:bold;
    	font-size:12px;
    	position:relative;
    	vertical-align:middle;
    	float:left;
    }
    #wrapper {
    	float:none;
    	height:1100px;
    	width:100%;
    	background-color:#808080;
    }
    #spacer {
    	height:20px;
    	width:800px;
    	visibility:hidden;
    	position:relative;
    	vertical-align:middle;
    	float:left;
    }
    #content2 {
    	float:left;
    	height:100px;
    	width:400px;
    	position: relative;
    }
    #content3 {
    	float:left;
    	height:100px;
    	width:400px;
    	position:relative;
    }
    #heading2 {
    	float:left;
    	height:40px;
    	width:400px;
    	position:relative;
    	overflow:hidden;
    }
    #heading3 {
    	float:left;
    	height:40px;
    	width:400px;
    	position:relative;
    	overflow:hidden;
    }
    #footerl {
    	background-image:url(images/edgelb.jpg);
    	float:left;
    	height:50px;
    	width:50px;
    	position:relative;
    }
    #content {
    	height:400px;
    	width:800px;
    	position:relative;
    	float:left;
    }
    #mission {
    	height:60px;
    	width:800px;
    	position:relative;
    	float:left;
    }
    #footer {
    	height:50px;
    	width:900px;
    	background-image:url(images/footer.jpg);
    	background-repeat:repeat-x;
    	overflow: auto;
    	margin: 0 auto;
    }
    #footerr {
    	background-image:url(images/edgerb.jpg);
    	float:right;
    	height:50px;
    	width:50px;
    	position:relative;
    }
    
    #spacer2 {
    	float:left;
    	height:25px;
    	width:800px;
    	position:relative;
    }
    #heading {
    	float:left;
    	height:40px;
    	width:800px;
    	position:relative;
    }
    #content {
    	float:left;
    	height:490px;
    	width:800px;
    	position:relative;
    }
    .mission_text {
    	font-family:Verdana, Helvetica, sans-serif;
    	font-size:12px;
    	font-style:normal;
    	font-weight:bold;
    	padding-left:100px;
    	padding-right:100px;
    	padding-top:15px;
    }
    .heading_text {
    	font-family:Verdana, Helvetica, sans-serif;
    	font-size:24px;
    	font-style:oblique;
    	font-weight:bold;
    	padding-top:5px;
    }
    .heading2_text {
    	font-family:Verdana, Helvetica, sans-serif;
    	font-size:18px;
    	font-style:oblique;
    	font-weight:bold;
    	padding-top:5px;
    }
    .heading3_text {
    	font-family:Verdana, Helvetica, sans-serif;
    	font-size:18px;
    	font-style:oblique;
    	font-weight:bold;
    	padding-top:5px;
    }		
    .content2_text {
    	padding-top:8px;
    }							
    .content3_text {
    	padding-top:20px;
    }		
    .footer_text {
    	font-family:Verdana, Helvetica, sans-serif;
    	font-size:9px;
    	font-style:normal;
    	font-weight:bold;
    	height: 50px;
    	width: 200px;
    Last edited by KatoPC; 12-31-2009 at 10:22 PM.

  • #9
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Hi there,

    The floated elements should be before their non floated siblings in the markup order. Thus
    Code:
    <div id="footer">
    <div id="footerl"></div>
    <div id="footerr"></div>
    <p>Some text</p>
        </div>
    should work with your current CSS.
    PS:
    Transitioning to div's help
    That's not what you need to practice. Your current approach has got divitis! You need to make your document semantic!
    Last edited by abduraooft; 12-31-2009 at 09:27 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Outside #content, inside #content... whatever works best with your layouts images. Try it both ways.

    ab has shown you how to fix the floats out of order that I was referring to.

    Please use the code tags, &#91;code&#93;&#91;/code&#93; - available with the # button in the post edit window.
    This will wrap your code in a scroll box which greatly helps the readability of your post.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #11
    New Coder
    Join Date
    Dec 2009
    Location
    MN
    Posts
    34
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thankyou

    So div's don't necessarily need a class to them? Remember I have a good understanding

    I tried that but couldn't get the text to center or images to be links
    Last edited by KatoPC; 12-31-2009 at 09:11 PM.

  • #12
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by KatoPC View Post
    So div's don't necessarily need a class to them? Remember I have a good understanding

    I tried that but couldn't get the text to center or images to be links
    Is this the current version you're working with? Update that and there is no need to post code here, we can get markup/CSS from the link.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #13
    New Coder
    Join Date
    Dec 2009
    Location
    MN
    Posts
    34
    Thanks
    2
    Thanked 0 Times in 0 Posts
    No not yet, I am in process of rewriting

    How would I position the text in the div's (basically center and middle) everything always is at the top by default.

    Sorry to ask, but I am trying to relearn new habits


    I still currently use dw8

  • #14
    New Coder
    Join Date
    Dec 2009
    Location
    MN
    Posts
    34
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I have uploaded what I have so far Link should be current

  • #15
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    KatoPC,
    We keep telling you how to fix that but it hasn't made it into the current version yet. (I see you're updating now though)
    Right now your code looks like this (pay particular attention to the one line highlighted in red)
    Code:
    <div id="content2">
          <div class="content2_text"><a href="http://helifreak.com/forumdisplay.php?f=216" target="_blank">
    	  <img src="images/hflogo.gif" border="no"></a></div>
        </div>
        <div id="content3">
          <div class="content3_text"><a href="http://twitter.com/inertiarc" target="_blank">
    	  <img src="images/twitterlogo.jpg" border="no"></a></div>
        </div>
        <div id="footer"><p>Some text</p>
          <div id="footerl"></div>
          <div id="footerr"></div>
        </div>
      </div>
    </div>
    Move that one line in red to this position
    Code:
    <div id="content2">
          <div class="content2_text"><a href="http://helifreak.com/forumdisplay.php?f=216" target="_blank">
    	  <img src="images/hflogo.gif" border="no"></a></div>
        </div>
        <div id="content3">
          <div class="content3_text"><a href="http://twitter.com/inertiarc" target="_blank">
    	  <img src="images/twitterlogo.jpg" border="no"></a></div>
        </div>
        <div id="footer">
          <div id="footerl"></div>
          <div id="footerr"></div>
    <p>Some text</p>
        </div>
      </div>
    </div>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  
    Page 1 of 3 123 LastLast

    Posting Permissions

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