I am in the middle of creating a website using Dreamweaver CC 2014. The Homepage scrolls fine, but the About page and Calendar page doesn't scroll at all and cuts off the bottom half that should be displaying. I've read the other threads that say to add the overflow: scroll code to the CSS. I have done that, but it still isn't working and I'm wondering if I have placed the code in the wrong place?
Here is the link to the Calendar page:
http://normajdougherty.com/Calendar.html
Would you look at the CSS and HTML code and let me know what the problem is? Thanks so much.
You have
position:fixed;
Specified in your navigation bar, which is effectively "locking" the page in place. If you set its position to relative, your menu items (which should also not be set to "fixed") are no longer going to be attached to the navbar.
But the way you have implemented the navbar in the first place is kind of kludgy. You don't need a separate div for the blue bar in the background.
Instead of having two overlapping fixed divs, which is a bad practice for several reasons, just place your navigation buttons in a single div with a background color, using the "background-color" property.
Also, the reason it looks "cut off" halfway down is because that's just the size of the image you're using in the background. Consider setting up a color gradient or something, or honestly just leave the background a solid color. Unless you do something particularly fancy, a big static image like that is not going to look the way you want it to.
EDIT: Okay, at second glance, it looks like your entire page is wrapped within the navigation bar div. That's why the whole page is locked in place when "position:fixed" is set. Make sure you close the tag for the navbar before the rest of the page content starts.
But still, you shouldn't have a fixed navbar like that in the middle of the page, as it will scroll down with the rest of your content and just end up looking really bad.
It is because you set
positon:fixed;
in navbar class.
remove it and page will work fine
So remove
position:fixed
from .navbar class in calendar.css
You're facing this problem because the content part of your page is wrapped inside the navbar div which has been assigned a fixed position. You will need to add the intro div and the <iframe> after the navbar div for your website to function properly.
This is how that particular part of code currently looks like on your website (notice <div class="intro"> and the <iframe> is inside <div class="fluid navbar">):
<div class="fluid navbar">
<img src="images/BlueNavBar.png" alt="navigation menu">
<div id="menu">
<ul>
<li>HOME
</li>
<li>ABOUT ME
</li>
<li><a href: "books.html"="">BOOKS</a>
</li>
<li>BLOG</li>
<li>MEDIA KIT</li>
<li>SPEAKER</li>
<li>
</li><a href="Calendar.html" calendar<="" a="">
<li>CONTACT</li></a>
</ul><a href="Calendar.html" calendar<="" a="">
</a>
</div>
<div class="intro">
<p><b>Below is a monthly calendar of the events I will be attending, participating in or speaking. <br>I may also post my blog schedule, contests and other giveaways.</b>
</p>
</div>
<br>
<center>
<iframe src="https://www.google.com/calendar/embed?src=sffk4qmbgj5b1e08d7lkg84rr0%40group.calendar.google.com&ctz=America/New_York" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
</center>
</div>
And this is how you should modify it (both <div class="intro"> and the <iframe> are added after <div class="fluid navbar">):
<div class="fluid navbar">
<img src="images/BlueNavBar.png" alt="navigation menu">
<div id="menu">
<ul>
<li>HOME
</li>
<li>ABOUT ME
</li>
<li><a href: "books.html"="">BOOKS</a>
</li>
<li>BLOG</li>
<li>MEDIA KIT</li>
<li>SPEAKER</li>
<li>
</li><a href="Calendar.html" calendar<="" a="">
<li>CONTACT</li></a>
</ul><a href="Calendar.html" calendar<="" a="">
</a>
</div>
</div>
<div class="intro">
<p><b>Below is a monthly calendar of the events I will be attending, participating in or speaking. <br>I may also post my blog schedule, contests and other giveaways.</b>
</p>
</div>
<br/>
<center><iframe src="https://www.google.com/calendar/embed?src=sffk4qmbgj5b1e08d7lkg84rr0%40group.calendar.google.com&ctz=America/New_York" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe></center>
Add this two styles in at header section of Calendar.html (this code is writing as internal css, because this code don't affect other pages)
#menu {position: absolute; }
.navbar {position: static;}
Related
This site: https://dev.romaycorp.com/shop/
If you hover over "Products" the images underneath overlap. Some random elements appear on top, some don't. Those images do.
The borders on this page do the same thing: https://dev.romaycorp.com/product-category/silicone-nitrade/
I've tried every z-index setting on every element imaginable.
I cannot solve this one.
Your CSS is little awkward. But found your mistake.
Add to class .product-category .product z-index: -1 this will fix your problem.
Here the source you should add:
<li class="product-category product">
<a href="https://dev.romaycorp.com/product-category/cermet/"><img src="https://dev.romaycorp.com/wp-content/uploads/2017/07/store-cermet-insert-2.jpg" alt="Cermet" width="300" height="300" data-pin-nopin="true"> <h2 class="woocommerce-loop-category__title">
Cermet <mark class="count">(72)</mark> </h2>
</a>
</li>
Apologies, I have attempted to create a JS Fiddle replication, but the issue does not seem to occur in the JS Fiddle so I can only think it is a problem with the more general CSS on the page.
The JS Fiddle created does not show the error, but here it is anyway: https://jsfiddle.net/j2qxh9zg/
I am attempting to line up two elements side-by-side. They use display:inline-block; and have a width of 33.3% and 66.6%. The body has font-size:0 set in order to remove any whitespace issues so I do not believe this to be an issue with the whitespace between containers.
<div class="grid one-third">
<div class="logo">
<img src="assets/logo.png" alt="Something"/>
</div>
</div>
<div class="grid two-thirds menu">
<ul>
<li><a name="#home">Home</a></li>
<li><a name="#expertise">Our Expertise</a></li>
<li><a name="#portfolio">Portfolio</a></li>
<li><a name="#tech">New Technology</a></li>
<li><a name="#contact">Get In Touch</a></li>
<li>01483 746650</li>
</ul>
</div>
I cannot seem to get the .one-third and the .two-thirds divs to sit side by side, despite them both being display:inline-block;
.grid.one-third{width:33.3%}
.grid.two-thirds{width:66.6%}
.grid{display:inline-block;box-sizing:border-box;}
Live link, you can see the menu is at the bottom of the page (grey box) http://digitalshowcase.somethingbigdev.co.uk/
The nav container is 70px high. It should be 50px high. Both the inside elements are 50px high, yet the container expands. Why?
I think adding vertical-align: middle; to .grid will do it.
Does anyone can create a JSfiddle code to demonstrate how to integrate two or more anchor tags in the same li item? I have searched but no clear answer of how could you for instance divide the li element with lets say 3 square anchors 1/3 each. Do you for example need to add div tags to each anchor?
eg.
<ul>
<li>
</li>
<li>
</li>
You can use the jQuery Mobile grid:
http://demos.jquerymobile.com/1.4.5/grids/
e.g.:
<li>
<div class="ui-grid-b">
<div class="ui-block-a">
<img src="http://lorempixel.com/80/80/food/1/" />
</div>
<div class="ui-block-b">
Some text
</div>
<div class="ui-block-c">
Delete
</div>
</div>
</li>
Here is a simple DEMO
NOTE: you can then use CSS to tweak widths, margins, padding, etc. to taste.
Let's say, as you asked, you have 3 elements:
<div class="your_three_elements">
<img src="..." alt="..." />
Your Text
Your Button
</div>
So you have to have one link per one target. But those things aren't anchors. An anchor would be something like this:
<div class"your_anchorlink">
Your Link
</div>
<div id="gototext">
When you click on the link, you will get to this text (which is on the same page).
</div>
You could combine that by having a link go_to_some_page.html#gototext which will open the go_to_some_page page and jump to the id gototext.
But maybe I am missunderstanding what you want to do.
I have a list of calendar events. The html looks like this:
<li data-id="1">
<a href="#calendar-item/1">
<div class="calendar" style="">
<div class="calendar-header"></div>
<div class="calendar-month">Dec</div>
<div class="calendar-day">11</div>
</div>
<p>Parents Association Non-Uniform Day</p>
<span class="chevron"></span>
</a>
</li>
I have given the list item padding, but it is ignoring the content of the div tag, see the image:
Here is the jsfiddle.
works in firefox for me but you defenitely need to clear your float. The easiest way to do that is using overflow: hidden on the list item so it takes the space of the floating icon and wraps its padding around that instead of just the text next to it
Try this my be slow your problem
CSS
give flot:left in below class
li p:nth-of-type(1) {float:left;}
And give flot:left in below class
li{float:left;}
So i have a 'meganav' in my site that is essentially a side nav in an area, that is floated left and takes up a 3rd of the site, then once a parent anchor is clicked, it opens up its child div with a class of 'meganav-div', which opens up to the right and takes up the other 2/3rds of the wrapper area appearing above whatever is in that area.
Currently i have it all working in all browsers, apart from ie6 and ie7, where you can open the first item (div#one) and click on everything just fine, however, anything underneath this (div#two, div#three etc) are not working in that any links inside these divs are not clickable. I have a close button in each div that works on all browsers but not ie6 and 7. The cursor even changes to a pointer on all the anchors, but just will not click. Im assumint that this is something to do with z-index due to the first one working and then not the ones further down the nav list, but i have added the same z-index for all .meganav-div's and still no joy.
Please find the code below. Any help would be much appreciated. thanks. Please find a link to jsfiddle: http://jsfiddle.net/tomiswoot/vqJnY/1/
<section id="herocontainer">
<div class="hero-white">
<aside>
<ul id="mainnav">
Nav item 1
<!--===MEGANAV one====----->
<div id="one" class="meganav-div">
MEGANAV DIV CONTENT HERE
</div>
</li>
<li>
Nav item 2
<!--===MEGANAV two====----->
<div id="two" class="meganav-div">
MEGANAV DIV CONTENT HERE
</div>
</li>
<li>
Nav item 3
<!--===MEGANAV three====----->
<div id="three" class="meganav-div">
MEGANAV DIV CONTENT HERE
</div>
</li>
<li>
Nav item 4
<!--===MEGANAV four====----->
<div id="four" class="meganav-div">
MEGANAV DIV CONTENT HERE
</div>
</li>
<li>
Nav item 5
<!--===MEGANAV five====----->
<div id="five" class="meganav-div">
MEGANAV DIV CONTENT HERE
</div>
</li>
</ul>
</aside>
</div>
</section>
It's caused by the fact that you have multiple close buttons with the same id=close1 - which makes your html invalid. I changed it to class=close1, now it seems to be working (i also changed positioning a bit for more easy testing)
http://jsfiddle.net/vqJnY/7/