[Solved] Beginner: CSS Layout problem - CSS-Tricks

This topic is empty.

Viewing 15 posts - 1 through 15 (of 22 total)

1 2 →

Author

Posts
January 27, 2014 at 1:58 am #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; 
}
```
January 27, 2014 at 3:32 am #161188

Paulie_D
Member

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

January 27, 2014 at 6:19 am #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)

January 27, 2014 at 6:31 am #161199

Paulie_D
Member

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.

January 27, 2014 at 11:14 pm #161259

blyk
Participant

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

January 28, 2014 at 1:30 am #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.

January 28, 2014 at 8:45 pm #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.

January 29, 2014 at 2:09 am #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
January 29, 2014 at 10:25 pm #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.

January 30, 2014 at 12:17 pm #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.

January 30, 2014 at 9:21 pm #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.

January 30, 2014 at 11:41 pm #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

January 31, 2014 at 4:20 am #161503

Paulie_D
Member

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

January 31, 2014 at 4:33 am #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?
January 31, 2014 at 4:40 am #161509

Paulie_D
Member

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.
Author

Posts

Viewing 15 posts - 1 through 15 (of 22 total)

1 2 →

The forum ‘CSS’ is closed to new topics and replies.