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.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    My div tags being read backwards or me being stupid

    Ok so I have made quite a few websites by modifying templates and such but I thought for once I would have a go at making one from scratch. I will admit however that it has been about 6 months since I did any coding so it is probably a stupid mistake.
    Basicly I am using dreamweaver and I have written my code and in the liddle preview box everything looks ok. From top to bottom it is 'title' then 'image fader' but for some reason when I save and preview it it puts them the opposite way around.

    html
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <LINK REL=StyleSheet HREF="style.css" TYPE="text/css" media="screen"/>
    </head>
    
    <body>
    <div id="header">
     <p> Testtext title probz will end up a picture<br />
     _____________________________________________<br />
     Where my css menu will go
     </p>
        </div>
    
    <div id="imgbox">
     <p>
     This is where my Image fader thing will go
     </p>
    </div>
    
    </body>
    
    </html>

    css
    Code:
    /* CSS Document */
    
    body {
      font-size:100%;
      font-family:'century gothic' ;
      text-align:left;
      background:#ffffff;
    }
    
    #header {
      height:66px;
      width:80%;
      background:#FFFFFF;
      margin:0 auto 0 auto;
      position:fixed
    
    }
    
    #imgbox {
      height:66px;
      width:80%;
      background:#FFFFFF;
      margin:0 auto 0 auto;
      position:fixed;

    I realise there isnt alot of code because I wanted to sort this and i have been battling with it a few hours now. Any help or explanation would be appreciated. Thanks

  • #2
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    You have define same code for both IDs (#imgbox and #header).

    Both are overlapping each other thats why 1 is not visible.

    If you are using Positioning with both as fixed. You must define and top and left properties too. Otherwise botn are taking top and left as 0 by default.




    Try following code for example and see the change:

    Code:
    #header {
      height:66px;
      width:80%;
      background:#FFFFFF;
      margin:0 auto 0 auto;
      position:fixed;
    
    }
    
    #imgbox {
      height:66px;
      width:80%;
      background:#FFFFFF;
      margin:0 auto 0 auto;
      position:fixed;
      top:100px;}

  • Users who have thanked vikram1vicky for this post:

    Sciisere2 (08-04-2011)

  • #3
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    This worked perfect thank you. I made a nooby assumption that it would place it below it because one was after the other. Thanks

  • #4
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Quote Originally Posted by Sciisere2 View Post
    This worked perfect thank you. I made a nooby assumption that it would place it below it because one was after the other. Thanks

    You are welcome

    Following are some links which will help you understanding CSS positioning and box model:

    http://www.w3.org/TR/CSS2/box.html

    http://css-tricks.com/1191-absolute-...o-they-differ/

    http://css-tricks.com/2841-the-css-box-model/

    http://css-tricks.com/7323-box-sizing/

    http://www.barelyfitz.com/screencast...s/positioning/


  •  

    Posting Permissions

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