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.
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.
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.
Related
I'm trying to figure out what is the right term for it so I can research more into and learn.
I encountered this tab, where you click on one the heading the blue line and a pointer pop up to point towards the tab content... (for example when you click on Books, and then click on Articles, etc etc..
Here is the example..
http://www.sutherlandlibrary.com/tabs/library-tabs-v4.htm
I want to know how you can create that. Or what is it ? so I can start researching into it.
Thanks in advanced, I know I'm suppose to search for it first, But i dont know where to start.
Cheers
Look for CSS3 shapes, for the actual pointy-thing.
There are plugins in ever major framework for creating tabs, or you can create a custom one with some jQuery. You'll need .on('click, ...) and .fadeIn/.fadeOut
For the tab-view use the CSS position: absolute on each tab-content inside a container with position: relative.
(community wiki because I didn't actually do any work)
The one from the page you posted uses a simple image for an <li>element which has the class .current on click (jQuery).
That image is positioned with a background-position: center bottom; and overlays the horiz. azure line.
Demo: http://jsfiddle.net/trevordixon/hvBpF/
Each tab is a <li>, and the currently selected tab has a class current. You'll see they have the following CSS rule:
.tab-features .tabs-list .current {
background: url("images/feature-tab-arrow.gif") no-repeat center 27px;
}
So the tab that has the current class has a 27px tall arrow image positioned just below the bottom of the tab. They could have also done something like this instead of using a background image:
.tab-features .tabs-list .current:after {
content: "";
width: 0;
height: 0;
/* These borders make it a triangle */
border-left: 14px solid transparent;
border-top: 14px solid #0088aa;
border-right: 14px solid transparent;
}
So to implement something like this, find a good tabs script or plugin, and style the currently selected tab like that.
I am currently developing a web application using jQuery.
The layout for the same goes as shown in the figure given below:
The orange color box at the very back should be 100% in height and width with some margin like 5px or so.
The logo and the tab-bar are placed as shown and are about 50px in height. But tab-bar should take size as shown with some margin.
The tab content should occupy the remaining height and should scroll for the contents it occupies.
Similar structure is required for the internal menubar and tab content.
Can anyone please suggest the layout method to employ?
Or how can I manipulate different heights/widths?
The requirement also suggests a responsive window i.e. the width/height to manipulate on resize.
The jsFiddle I said I'd make.
As you'll see, I make use of jQueryUI for the "tabs" layout and simply "add" a few things. The few things I "Add" are simple and the jQueryUI alreqady provides a strong CSS with which to manipulate to get desired result. Also attached to that page is a theme-switcher, so you could see what it would look like using different jQueryUI Default Themes.
I'll try to explain the process as shortly as possible without being to vague.
HTML
I first start with a basic page wrapper. Not too necessary, but it provides a nice "element" with which to work inside of and possibly make manipulations for page layout change in otherways in the future. For now it simply holds our page "padding" of 5px. The HTML and BODY tags will be set to a default and should not be manipulated beyond that as height and other properties begin to take different meanings for these tags in different browsers.
I then place 2 divs inside this wrapper, again, these could be done without depending on your needs. I like these 2 divs and use this alot because it provides "vertical align -> middle" as one might expect. The first, parent, is a div with class table. This will have its display set to table to provide a "table-like" layout but still have the ability to do things like "round the corners" or, as in my case, set height! The second, child, is the same except it will have a class and style as table-cell, respectively. This allows us to set something like vertical-align: middle; and ensure that this element is in the vertical middle of the page/table element. Again, with your layout, this may seem unneccessary, but I don't know your full expected end result and I'm trying to give as much "fluid dynamics" to the page as possible.
Finally, I first insert the jQueryUI tabs HTML in their expected layout, with 2 small differences. I place our "logo" in a custom span tag just before the ul. I also take the ui-tab-panel(s) and place them in their own container. This helps us adjust the height of our tabs area as needed. I also gave this container overflow, so even tho overflow maybe hidden on the body, it's still available for the tabs. (see also: small blog i wrote on jQueryUI Tabs)
<div class="page-wrapper">
<div class="table">
<div class="table-cell">
<div id="tabs">
<span class="my-logo">
<img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" alt="logo here" />
</span>
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div class="ui-tabs-panel-container">
<div id="tabs-1">
<<p> ... </p>
</div>
<div id="tabs-2">
<p> ... </p>
</div>
<div id="tabs-3">
<p> ... </p>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
As I mentioned before, jQueryUI provides us with a strong CSS to work with already. As you might have noticed, I made use of some of this by using their predefined class names throughout the HTML. This established things like background, color, and even font-family and more! Now that that is over with, let's layout our page mechanics first. As I mentioned, I give a very "direct" set of properties to HTML and BODY. This will help eliminate "Cross-browser-issues". I also provided a background color, tho you could set that at one of the children levels. This was done just to show you where HTML, BODY exist.
I then set our "frame" elements. .page-wrapper will provide our page wrapping, sizing will come from within, so there is no need to deal with it here. The .table and .table-cell provide display exactly as their name suggest. As previously mentioned, this provides a nice ability to maintain an element in the exact "center" of something, even vertically!
Now we manipulate our tabs and content. I use #tabs throughout to maintain "name-spacing". This will not only help with any "css overrides" on jQueryUI presets, but also helps keep page layout confusions to a minimum. This is always a good thing.
The first thing I manipulate is the placement and setting of our custom span for the logo. Then, of course, I have to change the ul to next to it. Thus I look at the CSS for the uls class. If I open edit tools in a browser, I can see the ul is given the classname ui-tabs-nav and I can see it has a margin setting. If I play with the margin-left of this ul I can see that nothing is affected but the left side of the ul. PERFECT! Here is what I must manipulate to set our log in its "own space".
Finally, I simply set our tabs container (given custom class name, ui-tabs-panel-container, made to match jQueryUI) to have overflow, so that if any content exceeds our page height, it can still be scrolled within this element.
html, body {
background-color: #ADDFFF;
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
width: 100%;
}
.page-wrapper {
padding: 5px;
}
.table { display: table; }
.table-cell { display: table-cell; vertical-align: middle; }
#tabs .my-logo {
display: inline-block;
float: left;
height: 2em;
margin: .5em 0 0;
padding: 0;
width: 2em;
}
#tabs .my-logo img {
max-height: 100%;
max-width: 100%;
float: left;
}
#tabs .ui-tabs-nav {
margin-left: 2em;
}
#tabs .ui-tabs-panel-container {
overflow: auto;
}
JS
Finally, the easy work. I write a function to set the height of our tabs content area, since it will be "filling" the rest of the page. This take a little thought, but not hard to figure out. With the function written, I simply add it to the window resize event and call that event right after. This way it's resized on load, thus giving us our "end height" for first view. I also establish the tabs, although not much work there since I'm just making "default tabs". Feel free to experiment, go wild!
// the following will resize our tabs content area and account for all the spacing neccessary
function setContentHeight(e) { return $(window).innerHeight() - $(this).offset().top - 10; } // -10 to account for padding
$(function() { // our on page load call
$("#tabs").tabs(); // establish tabs
// add ability to resize tabs content area on window resize, then call resize event
$(window).resize(function(e) { $("#tabs .ui-tabs-panel-container").height(setContentHeight) }).resize();
})
As for the layout of tab content, it's all up to you and your imagination. Hopefully this will give you a good idea of where to get started though! Good luck!
You could use something like Blueprint CSS:
http://www.blueprintcss.org/
Here's a very quick and dirty layout (not using blueprint CSS, just plain CSS), as a general guideline. It still needs work, but it could be used as a starting point:
<html>
<head>
<style>
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden; /* hide page scrollbars */
}
div {
margin: 0 auto;
padding: 0;
border: 1px solid black; /* for debugging */
text-align: center;
}
#header {
width: 100%;
position: relative;
overflow: auto;
}
#header > div {
height: 5%;
float: left;
}
#logo {
width: 23%;
}
#spacer {
width: 1%; /* -1% for borders */
}
#tabbar {
width: 75%;
}
#tabContent {
}
#tabContent > div {
width: 100%;
}
#tabContentMenuBar {
height: 5%;
}
#tabContentMain {
min-height: 80%;
}
</style>
</head>
<body>
<div id="header">
<div id="logo">Logo</div>
<div id="spacer"></div>
<div id="tabbar" class="fullWidth">Tab bar</div>
</div>
<div id="tabContent">
Tab content
<div id="tabContentMenuBar">Tab content - menu bar</div>
<div id="tabContentMain">Tab content - main content</div>
</div>
</body>
</html>
I have a form with errors that appear above it that look like
<div class="form-error" id="optin_error" style="display: none; ">You must opt-in to participate.</div>
And a form inside a <form> with a bunch of inputs inside of divs... nothing really out of the ordinary.
But I have javascript validation on my field with turns the form-error from display:none; to display:block; which resizes the container field fine. The problem lies in the fact there is a footer (also inside a div) that does not move down. If I open up IE8 developer and look at the main container (that wraps everything) it also does not extend. If I for example uncheck the main container width style and then recheck it, it fixes everything.
Is there a way to force IE8 to "resize" their divs when an element inside a div turns from display:none; to display:block;
PS. There is no funny css, no floats, no absolute positioning, nothing that would cause this...
Form Error Block CSS
.form-error {
color: #EB1F25;
}
Footer Block CSS
.footer-wrapper {
border-top: 1px solid #000000;
margin: 30px 0 10px 0;
}
.footer-wrapper .links {
width: 960px;
}
After some investigating it seems the inline-block attribute on the container is causing the issue.
Ended up being an issue with display:inline-block; element not resizing. Changing to float worked.
try givin the width to the wrapper. remember the footer should be inside your main wrapper, Also give a height other divs... min-height or something similar.
.footer-wrapper {
border-top: 1px solid #000000;
margin: 30px 0 10px 0;
width: 960px;
}
.footer-wrapper .links {
width : 100px;
}
It's hard to tell what exactly is making the problems. But you can test out some of this tips I suggest you to try:
If your .form-error is showing up before (above) the actual <form ...></form>, then try to insert a <br clear="all"/> tag between those two blocks. If not, add clear:all to <form ...> and width:100% to .form-error.
If not, add position:relative and overflow:hidden first to the .form-error, if not helps, add it to <form...> too.
As already said, will be much easier if we could see your entire code, try to use jsbin with your entire css and html source code, because IE is very strict in html rendering.
For some reason on this page using a mega drop down there is a giant white space below the all the content enabling you to scroll past the footer. Can you please help me figure out what is going on?
I'm quite certain it has to do with the mega drop down because when you hover over it the white space disappears. (menu item 'coop and career' is mega)
http://www.georgiancollege.ca/student-success/
Strangely, these two pages also use it and don't have the issue (some other styles are messed up on these two, but that doesn't affect it as I had them on the same theme/styles as the broken page and they still didn't have it - they're on broken styles currently so another dev can look into something else)
http://www.georgiancollege.ca/athletics/ (fitness center menu item)
http://www.georgiancollege.ca/sdvadev/ (programs menu item)
Thanks.
EDIT: also when you inspect the element the white space gets proportionally larger compared to the size of the inspector toolbar - if that helps.
try to set#menu-item-197 {overflow:hidden}
or simply #pagenav li {overflow:hidden}
It might be because of the relative positioning. For instance, a div block naturally structered at the bottom is forcefully placed at the top. In this case, the space of the div block will always be preserved thus leaving behind white spaces!!!
It is because in custom.css you had:
#wrapper {
min-height: 100%;
position: relative;
}
remove min-height: 100%, and it works well.
P.S.
I'll change footer to be without absolute positioning, because it makes horizontal bar to appear under the browser window, like this:
#footer {
bottom: 0;
height: 60px;
width: auto;
margin-top: 10px;
margin-bottom: 0;
padding: 1%;
text-align: center;
}
This is the markup
img.shadow | div#content |div.shadow
I need to find a way to reliably keep the shadow images the same height as the content area. Problem is the content area can resize (like tabs that have different height, or parts of it that only appear in certain conditions). I was able to set the height of the shadow using javascript on page load, but then as soon as the height of the #content changes... not sure this makes sense, but...
Maybe this explains the problem better
http://jsfiddle.net/uLUnf/28/
The question is
how can I make the images (the grey boxes) resize along with the content (light grey box)?
http://jsfiddle.net/uLUnf/29/
You did it urself? :P
You could put the resize call inside the function that adds the content as well, like this:
jQuery('document').ready(function($){
$('#click_me').click(function(){
var id = $(this).attr('href');
$(id).show();
$('.shadow').height($('#content').outerHeight());
});
$('.shadow').height($('#content').outerHeight());
})()
Or it seems like you could get rid of the shadow images and the call to resize it entirely, and just add a border to the content in the CSS:
#content{
float: left;
display: block;
background: #eee;
width: 200px;
border-right: 7px solid #666;
border-left: 7px solid #666;
}