Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Beginner: CSS Layout problem

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 22 total)
  • Author
    Posts
  • #161181
    blyk
    Participant

    Hi, I new to this forum and this is my first post related to css. Recently I have started learning CSS. I am using pure css for creating this website

    Here I have several problems regarding my code. Please help me 1. My fixed header(id:navigation) is eating the div container (id:content) 2. I am not able to set the background for (id:navigation) fixed header div 3. How can I make the scroll smooth using pure css if possible

    If possible can anyone give me pure CSS solution for these. Here is the codepen link http://codepen.io/anon/pen/wnvjk

    HTML CODE

        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
        <head>
        <link rel="stylesheet" href="style.css" type="text/css">
        </head>
        <body>
    
            <div id="navigation">
                <ul>
                    <li><a href="#one">One</a></li>
                    <li><a href="#two">Two</a></li>
                    <li><a href="#three">Three</a></li>
                    <li><a href="#four">Four</a></li>
                    <li><a href="#four">Five</a></li>
                </ul>
            </div>
    
            <div class="content" id="one"></div>
            <div class="content" id="two"></div>
            <div class="content" id="three"></div>
            <div class="content" id="four"></div>
            <div class="content" id="five"></div>
        </body>
    <html>
    

    CSS CODE

    body{
        margin: 0px auto;
    }
    #navigation {
        width:100%;
        height:30px;
        text-align: center;
        position:fixed;
        background: rgba(0,0,0);
    }   
    ul {
        display: inline-block; /*important line*/
        list-style: none; /*define it in ul tag*/
        padding: 0px;
        margin: 0px auto;
    }
    li { 
        width: 159px;
        height:30px;
        float: left;
        /*border: white solid 1px;*/
        border: 1px dashed #000; 
    }
    
    a{
      font-family: Helvetica, Verdana,  sans-serif;
      font-size: 14px;
      font-weight: bold; /*normal,bold,900px*/
     /* font-style: normal, italic, oblique*/
      text-decoration:none;
      text-align: center;
      color: white;
      display: block; 
      padding: 8px;
    }
    
    a :hover{
      color: rgba(255,0,0);
    }
    
    .content{
      width: 800px;
      height:500px;
      margin:0px auto;
    }
    
    
    #one{
       background: green; 
    }
    #two{
       background: red; 
    }
    #three{
       background: blue; 
    }
    #four{
       background: gray; 
    }
    #five{
       background: black; 
    }
    
    #161188
    Paulie_D
    Moderator

    Because the fixed header is ‘taken’ out of the flow the rest of the content moves up.

    To correct this add some padding-top to the first element after the header, usually the same amount as the height of the header.

    See: http://codepen.io/anon/pen/LgEaA

    I’ve made a couple of corrections to your CSS as well

    #161197
    blyk
    Participant

    thank you Paulie_D ! :) But still div (id:content) is hiding under the header. Using padding I can shift the content but can you tell me how to shift div container below the header?

    Other problem is that background-color: is not taking rgba() where as hex is working fine in fixed header(id:navigation)

    #161199
    Paulie_D
    Moderator

    but can you tell me how to shift div container below the header?

    Technically, you can’t because you have fixed position the header.

    The padding-top just means that the actual content (text etc) inside your '.content divs will be pushed down.

    There is a sort of hacky way where you can add 'margin-top to the first content div in the same way as the padding-top. Now initially this won’t do anything due to the way margins collapse but if you add a 1px transparent border to the body it has the same effect.

    Codepen updated to show this option: http://codepen.io/anon/pen/LgEaA

    The padding-top is the best solution though.

    Other problem is that background-color: is not taking rgba() where as hex is working fine in fixed header(id:navigation)

    You have to remember that rgba requires 4 values whereas your original had omited the last alpha/opacity value.

    #161259
    blyk
    Participant

    Okay then shifting the div container using css is not possible then is it possible using js? if yes then how?

    #161260
    jaycrisp
    Participant

    What do you mean by “shifting the div container”? It’s not clear what you want to achieve that hasn’t been solved by Paulie.

    Visually, it appears below the menu header. Technically, it’s a margin/padding that shifts it down, but that doesn’t matter, as what the user sees is the effect you seem to be looking for.

    #161312
    blyk
    Participant

    @jaycrisp
    I wanted that the top of the div containers with id: content should touch exactly bottom of the fixed header. I wanted it to be done using pure css but since Pauli_D said it is technically not posssible becasue I have fixed the header. Do you have any idea if I can’t do it with pure css then how to do it with JS.

    #161329
    Gus
    Participant

    navigation is fixed, but not told to where.

    Add: top:0; This positions it to the top of parent/body.

    Place the divs classed as “content” inside a wrapper and move it down the height of the Nav. Add to the Markup: [div id=”wrapper”> [“content” id= one-five] [/div>

    Add to the stylesheet:
          #wrapper {margin-top:32px;}
    

    To set the colors in the Nav section, Add to the stylesheet: li:first-child {background:green;} li:nth-child(2) {background:blue;} li:nth-child(3) {background:red;} li:nth-child(4) {background:maroon;} li:last-child {background:tan;}

    Anyway, problems with this forum – check out the revised version at:
    http://codepen.io/anon/pen/FwAdr

    #161377
    blyk
    Participant

    @Gus Thanks but now the links are not working, I mean when you click on the links it doesn’t go to the divs.

    [solved] sorry it was not working in the codepen but when I ran it from my html file it worked. Thanks :)

    [Problem] Now again the wrapper margin only work once at the page load but after that when you click on the links to navigate other divs, rest of the div containers remain have some hidden top under the header.

    #161454
    nkrisc
    Participant

    http://codepen.io/anon/pen/jkxcr

    Do you mean like this? All I did was take what Paulie_D did and change the padding-top to 30px instead of 50px so it visually aligns with the navigation.

    Because the header is fixed, it is removed from the flow of elements. Nothing can change that, CSS or JS. What you can do is make it appear that it’s behaving that way, which is exactly what he did. There’s no reason to use JS because it can only do the same thing, make it appear that way.

    #161483
    blyk
    Participant

    @nkrisc …. Pauli_D has solved my problem but the other problem was almost solved by the GUS :) but I think his code needs a little tweak to achive what I exacly want.

    #161492
    blyk
    Participant

    can anyone of you tell me why two javascripts used in the code is not working together?

    I have seperated them by dotted line

    http://codepen.io/blyk/pen/scvfA

    #161503
    Paulie_D
    Moderator

    can anyone of you tell me why two javascripts used in the code is not working together?

    Please create a new thread in the Javascript section for this since your original problem has been solved

    #161506
    blyk
    Participant

    Pauli_D :) Thanks for suggestion but I have solved the problem. Actually it needed to be inlude jquery.min.js in the head section and it is working now but can you tell me when I have created each file on my desktop such as html, css and js file and linked css and js file in the html so CSS file is working fine but javascript is not working at all. I have tried to link the js file both ways. I have downloaded the jquery.min.js

        <script type="text/javascript" href="jquery.min.js"></script> 
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    

    It has again stopped working. Am I doing something wrong?

    #161509
    Paulie_D
    Moderator

    You’re linking to the same (apparently) file in two different places (one local and one at the CDN) and there is no need to do that.

    http://www.websightdesigns.com/posts/view/javascript-cdn-with-fallback-to-local-script

    However, if you still can’t solve a JS issue…please start a new thread in the JS section.

Viewing 15 posts - 1 through 15 (of 22 total)
  • The forum ‘CSS’ is closed to new topics and replies.