0

I am an awful web programmer trying to make a website for a school club. I'm using the fullcalendar plugin to display my Google calendar's events.

The trouble is, I'm using a lot of weird little tricks to get my sidebar to work, and I think that some of the css i'm using to get my divs to display in the proper places are preventing my calendar from displaying correctly. Right now, it's crammed at the top of my div (as you can see in the events tab). I just want the calendar to display beneath the header in my #events div.

I think the culprit lies somewhere in one of these css blocks:

.container div
{
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px 40px;
    overflow:hidden;
}

.container
{
    font-family: Avant Garde,Avantgarde,Century Gothic,CenturyGothic,AppleGothic,sans-serif; 
    width:80%;
    min-height: 100%;
    left:20%;

    background-color: #ffffff;
    position: relative;
    box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1);
    border-radius: 0 3px 3px 3px;
    overflow-x:hidden;
    overflow-y:scroll;
}

I play around with the "position:absolute" in .container div, but that just makes all of my divs go haywire. I'm really, really new at this. If anyone can help me figure out why this isn't working or give me tips on how to manage my sidebar more intelligently, I would appreciate it.

The site is hosted here: http://webbox.cs.du.edu/~samkern/DU-GDS/index.php

Also, if any clarifications are needed, please ask. I hope I have given enough information.

2 Answers 2

Reset to default
1

I think I might have a sollution for you:

change

.container div {}

to

.container > div {}

What you're saying with .container div {}, is that ALL divs within the .container must have that style. This is apparently not what you want.

With .container > div, you only select the div's within the .container on the 1st level.

I.E.:

<div class="container">
    <div> <!-- this div gets the styling from .container > div -->
        <div> <!-- this div doesn't get styling from .container > div --> </div>
    </div>
</div>

I hope I made this clear for you.

0
0

Give a height to your div, either in the HTML initially, or in the JavaScript when that populates the div with something. Since the page starts up with nothing much in the div it doesn't have any height. Later the JavaScript is adding content, but that won't change the height, so scroll bars appear instead and everything is out of sight. So give it enough height to hold all the content (use em units for the height, rather than px units, so it won't matter what text height your users are using).

Also check out your JavaScript syntax - there's an unwanted comma I think in the $(document.ready()) function, for instance, which should stop that bit of code running.

Also correct your HTML (run it through an HTML validator - there's several around). The errors aren't causing your particular problem, but needs cleaning up nevertheless. It needs a DOCTYPE eg for HTML5. The link to normalize.css should be in an href not an src attribute, and the for attributes in your labels don't all point to field names.

2
  • Thank you for the comments. I'll look for a good HTML validator; I wasn't aware such a thing existed. I'll also try giving the div an initial height. Haha, I can imagine that reading my code must be like pulling teeth for someone who really knows his way around web languages :P
    – 13rave
    Commented Dec 14, 2014 at 0:03
  • Actually your code is a lot better than many who have been doing it for much longer! I think I would perhaps just suggest more consistent indenting to assist readability, and either collect all the JavaScript at the end of the body, or better still there's enough of it to be worth separating out into a separate file. But you're doing well already.
    – GuyH
    Commented Dec 14, 2014 at 0:37

Not the answer you're looking for? Browse other questions tagged or ask your own question.