I'm using the 960.gs style sheets for a drupal site - I would like to extend both the header, and footer sections to the edge of the webpage- resulting in something precisely like stack overflow's website.
I believe you need to use a div with no predefined helper classes, as div's will by default expand to the full width of their parent (if theres no wrapper - it will be the full screen)
Some trivial example:
<header>
<nav>
<ul>
<li> blarg </li>
</ul>
</nav>
</header>
<div id="main" role="main" class="container_12">
....
....
</div>
<footer>
<p>Thanks!</p>
</footer>
Hope this helps.
Related
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;}
I am working on a site using Zurb Foundation. The content will be rendered differently based on the size of the screen. If the content is being viewed on a phone, the navigation structure will use a off-canvas nav item for example. To demonstrate, here is a fiddle: http://jsfiddle.net/LFUvM/5/.
In my example, you can see that there is
Content Goes Here
My problem is, I don't want to write the actual content three times in my HTML. Some of my content is quite large. Is there a way to a) share the content across all three views b) still use the off-canvas nav option?
THank you!
I made an example using <section role="main"></section> after <a class="exit-off-canvas" href="#"></a>
You can take a look at it here
If it's possible to restructure the HTML a bit you can achieve this with the following setup:
<div class="off-canvas-wrap show-for-small-only">
<div class="inner-wrap">
<nav class="tab-bar show-for-small-only">
<section class="tab-bar-section">
<h1 class="title">Foundation</h1>
</section>
<section class="right-small">
<a class="right-off-canvas-toggle menu-icon"><span></span></a>
</section>
</nav>
<aside class="right-off-canvas-menu">
<ul class="off-canvas-list">
<li><label>Users</label></li>
<li>Hari Seldon</li>
</ul>
</aside>
<a class="exit-off-canvas"></a>
</div>
</div>
<div>
<h1 class="show-for-small-only">Phone</h1>
<h1 class="show-for-medium-only">Medium</h1>
<h1 class="show-for-large-only">Large</h1>
Content Goes here
</div>
And here's the working jsFiddle.
bHello I have a question regarding jQuery mobile css.
I have a page and inside that page I have header,content and footer. Now inside the content I have a grid that has a bunch of textfields:
<div data-role="page" id="calculator">
<div data-role="header" data-id="header">
<div data-role="navbar">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div><!-- /navbar -->
</div><!-- /header -->
<div data-role="content">
<!-- below is the grid -->
<div class="ui-grid-b">
<div class="ui-block-a"><div class="ui-bar ui-bar-c" style="height:65px">Afvallen:<input type="text" name="m1cut" id="m1cut" value=""></div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-c" style="height:65px">Onderhoud:<input type="text" name="m1onderhoud" id="m1onderhoud" value=""></div></div>
<div class="ui-block-c"><div class="ui-bar ui-bar-c" style="height:65px">Aankomen:<input type="text" name="m1bulk" id="m1bulk" value=""></div></div>
</div>
</div><!-- /content -->
<div id="footer" data-role="footer" data-theme="b">
<div data-role="navbar">
<ul>
<li>Omhoog</li>
</ul>
</div>
</div><!-- /footer -->
</div><!-- /page -->
Now, normally the grid seperates in 3 pieces of 33/33/33 (%), but I changed it too 100% each, so that it would stack on top of each other. I did that with the following css:
.ui-grid-b .ui-block-a,
.ui-grid-b .ui-block-b,
.ui-grid-b .ui-block-c,
.ui-grid-b .ui-block-d {
width:100%;
}
Now, that worked as it should, but the problem I have now is that I want to have a navbar inside the header (as you can see in the code) but it also stacks up and has a width of 100%. When I remove the css for the grid it works perfectly (25/25/25/25) but then again the grid is 33/33/33 instead of 100 each, does anyone know why this css causes this conflict and how to solve it, its weird because I only edit the grid while it affects the navbar aswell?
My question is if you want your divs to fill 100% why bother altering jQuery Mobile's css? You can just do a 3 divs and set width 100%.
I'd suggest you that you revert the css modification you did on jQuery Mobile's css and add custom css for your divs.
Update
I tried your problem in jsfiddle and everything works fine after changing the css too http://jsfiddle.net/jEYNy/
.ui-grid-b .ui-block-a,
.ui-grid-b .ui-block-b,
.ui-grid-b .ui-block-c,
.ui-grid-b .ui-block-d {
width:100%;
}
instead of changing your jQuery Mobile's css, add your changed code as custom css and import it into your code and see how it behaves.
I have a header navigation with kinda difficult hover effect.
In order to make it dynamic and NOT hard-coded, I'm gonna have to use spans inside list elements or even better I'm gonna need entire navigation done using DIVs.
Is there a way to edit the wordpress function wp_nav_menu() (codex definition)
so that it will give me divs that I want instead of ul-li hierarchy?
Another solution is to build it the common way but then append spans to it using jQuery. But that's my last resort.
Has anyone had similar experiences?
Thank you
Edit:
instead of
<ul>
<li>...</li>
<li>...</li>
</ul>
I'm gonna need:
<div class="x">
<div class="y">
<div class="z">
</div>
</div>
<div class="y">
<div class="z">
</div>
</div>
<div class="y">
<div class="z">
</div>
</div>
</div>
You need to use a custom menu walker. See http://codex.wordpress.org/Function_Reference/wp_nav_menu and http://www.mattvarone.com/wordpress/cleaner-output-for-wp_nav_menu/ and other Google results for "wordpress menu walker"
I am trying to put together a page that has a header that spans accross the page.
the header contains menu items and looks something like this (ASCII rendering below)
<------ Fixed Width ----------> <----------- Variable Width (Depends on Screen Width) -->
-----------------------------------------------------------------------------------------
LOGO HERE (Fixed Width) | Menu One | Menu Two | menu Three | Menu Four
| | | |
-----------------------------------------------------------------------------------------
I have designed this in HTML like this:
<div id="topMenu">
<div id="topMenuLogo"><!-- flash logo stuff here --></div>
<div id="topMenuContainer">
<div id="topMenuTopBar" class="right-align">
<div class="useroption floatleft">Action 1</div>
<div class="useroption floatleft">Action 2</div>
<div class="spacer"> </div>
</div>
<div id ="topMenuNavBar">
<div id=topmenuMenuContainer">
<ul>
<li>Menu One</li>
<li><!-- Other menus follow below ...... --></li>
</ul>
</div>
</div>
<div class="spacer"> </div>
</div>
<div class="spacer"> </div>
</div>
where the CSS class 'spacer' matches the pattern {height:1px;clear:both;}
I want to be able to write the above so that the page dynamically expands to fit the screen regardless of the resolution. The logo has a fixed width so that does not change, but I want the topMenuContainer dive element to adjust its width dynamically depending on the screensize. basically, that element will contain the following:
A topMenuContainer element that expands or contracts depends on
the screen resolution
A topMenuTopBar that is floated right within the topMenuContainer element
A topMenuNavBar that is floated left within the topMenuContainer element
I would be very grateful if someone could show the CSS required to structure the above HTML snippet in the manner I have described.
This should be your #1 resource for general layout questions like these:
http://layouts.ironmyers.com/
You will find any CSS layout you could possibly want on his site. If you don't know CSS yet, you can check out the tutorials at w3schools:
http://www.w3schools.com/css/