#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    87
    Rep Power
    2

    Why does my layout change?


    I been having problems with css doing fine one time and then screwing up the next. I know it is not the codes fault, but mine. I know that I am obviously doing something wrong, I just don't know what. I forgot to mention that this is all the same browser, firefox 26 if anyone is wondering. Ok on to the problem.... I have anchor tags that lead somewhere and I am trying to get them to stay in a specific spot on the webpage. When I started everything worked fine and it does not. I need a pair of eyes that good at finding the culprit because I can not find it. Now the anchor tags sit at the top of the div and they are dead links. Which I need them to be underneath the div.

    Mind you I did not know whether to post in php threads or here. I thought since this is more a css question I would post here.

    I also forgot to mention that I have a file that echo's the link tags for the external style sheets and have already included the file that has the link tags.

    PHP Code:

    if(!empty($errors)){
        
        echo 
    '<div class="background">
        
                <div id="content">'
    ;

            foreach(
    $errors as $error){
            
                echo 
    $error'<br />';
                
            }
        
            
    //end of content div
            
    echo '</div>
        
        </div>
        
        <a href="../../login/change_password.php" class="links">Go Back</a><span class="emp-text"> / </span>
        
        <a href="../../admin_panel.php" class="links">Admin Panel</a>'
    ;

    }else{
        
        echo 
    '
        
        <div class="background">
        
            <div id="content">
                
                <p class="success">Password was changed successfully!</p>
                
            </div>
        
        </div>
        
        <br /><br /><a href="../../admin_panel.php" class="links">Admin Panel</a> <span class="emp-text">/</span> 
        
        <a href="../../login/logout.php" class="links">Logout</a>'
    ;
        



    Code:
    .background {
    position: absolute;
    text-align: center;
    left: 0;
    top:0;
    z-index:70;
    height: 100%;
    width:100%;
    }
    
    .links{
    text-decoration: none;
    color: #ffffff;
    }
    
    .links:hover{
    color: #000000;
    text-decoration: underline;
    }
    
    .links:visited{
    color: #ffffff;
    text-decoration: none;
    }
    
    #content{
    width: 80%;
    height:20%;
    margin: 18.750em auto 0 auto;
    padding-top: 2%;
    text-align: center;
    background-color:#000000;
    }
    Another thing I have been noticing is that the links do not change color when I hover over them.
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2014
    Posts
    29
    Rep Power
    0
    why do you have the div.background set as position:absolute?

    I ask, because position:absolute takes the element out of the flow, so the other elements position themselves as though it weren't there -- thus, your links ignore the div and appear at the top of the screen, rather than below the div.

    Removing the position:absolute from the .background { } CSS will cause the links to move underneath the div again -- but since I don't know what problem you were solving by making div.background as position:absolute in the first place, I don't know if that will break something else.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    87
    Rep Power
    2
    Sorry for the extremely late reply , but that worked perfectly. OH , now I remember why used absolute positioning. On one of my pages I have a div with nested divs that contain an image of a folder and the name of folder underneath in each of the nested divs and they are all floated to the left which was the only way I could get the divs to display inline because display : inline; screwed up everything. Because of the float I could not center the divs so I used absolute positioning, which I hate because I learned that absolute positioning is the enemy of a fluid layout. Which brings me to another question as I know that this type of layout makes no sense semantically, if that is the right term. I have created what one article calls "div hell". Is there a cleaner way to achieve this without the use of divs.
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2014
    Posts
    29
    Rep Power
    0
    That depends -- since right now I'm not entirely clear on what you're trying to accomplish
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    87
    Rep Power
    2
    Originally Posted by LindaJeanne
    That depends -- since right now I'm not entirely clear on what you're trying to accomplish
    Look in the attachment to see what I am referring to. The attachment is what I am trying to accomplish, except without the use of divs. Also centered of course. Mind you that the names are separate from the images which is why I thought of using divs in the first place, to keep everything together. The only two things I want to change in the attachment is getting rid of divs and center the whole thing so it looks presentable.
    Attached Images

IMN logo majestic logo threadwatch logo seochat tools logo