Hoping you can help with my query.
I'm in the process of building a WP blog within a hand coded website and having issues due to the css in WP being complicated.
Here's the page
http://www.carehomesderby.co.uk/news/
I want to span the menu nav and footer the full width of the browser, keeping the content central
I've tried setting the ul width to 3000px (for example) but it adds on about 30px to the RHS. I can't separate the menu nav as it's within the header.php in WP.
Styles are being pulled through for the same element in several places so I'm having difficulty in determining what's what.
Many thanks in advance
I have see your page
For footer if you want it to cover full page then just remove the role from footer tag
<footer id="colophon" style="width:100%;" role="contentinfo">
just remove the contentinfo from the role attribute.
just remove the contentinfo from the role attribute.
For Navigation : you need to couple of thing, I am here giving you an idea
Remove the max-width for site class
.site
{
/*max-width: 68.5714rem;*/
}
remove width 950px value from div tag
<div id="page" class="hfeed site" style="padding-top:0px; margin-top:0px;">
what it will do is, Your navigation and page will acquire entire page then just set content wherever you want other than navigation.
You can try and add:
position:absolute;
left:0px;
on line 1479.
And put the navigation buttons in a new div inside the nav bar. For example:
<div class="nav-menu">
<div class="nav-button">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Facilities</li>
<li>Respite Care</li>
<li>Day Care</li>
<li>Gallery</li>
<li>Events</li>
<li>Testimonials</li>
<li>Contact Us</li>
</ul>
</div>
</div>
and then center the buttons.
Related
I have been having a tonne of issues with a site I'm developing. Even download to slow page loads and such. But the biggest issue I'm having is the behaviour of fixed position elements.
First of all the nav is supposed to stay fixed at all times, but it doens't. It does however appear in the middle of the page if you reload whilst you are scrolled. Very odd.
Live site here
Second of all the background is supposed to stay fixed yet it does not.
Nav code
<div class="navwrapper">
<nav id="top">
<div class="wrapper">
<ul>
<li>The Project</li>
<li>The Makers</li>
<li>The Markets</li>
<li>The Workshops</li>
<li>The Shop</li>
<li>Get involved</li>
</ul>
</div></nav>
<span class="navshadow"></span>
</div>
CSS
.navwrapper{position:fixed;width: 100%;top: 0;}
There is a bug in Chrome with position fixed and transforms:
https://code.google.com/p/chromium/issues/detail?id=20574
So you will have to remove the transforms from .label.
See also:
Position Fixed Not Working for Header
I have a vertical menu that needs some sub-menus. I can accomplish a decent-looking one just by putting a ul tag inside the link I want to expand and absolute-positioning it on hover, with display:none when it's inactive. But I'd like to make it slide out, and I haven't had any luck doing so. I have this basic markup:
<aside>
<ul>
<li>Link Text</li>
<li class="more">
Base
<ul>
<li></li>
</ul>
</li>
</aisde>
The aside tag is itself a secondary navigation menu, the main one is in my header. It is position:fixed for easy access while scrolling.
The ul tag inside of <li class="more"> is absolutely positioned, anchored to -1px on the top and width:154px, and on hover it becomes display:block; left:154px (of course, it is display:none when inactive). I have tried transitioning the left property, but it does not change anything, it acts as if my transition weren't even there.
I am unable to get :hover to function on my footer links. Does this have to do with z-index?
Thank you!
URL: http://bonusest.com/clients/republican_committee/
The problem is that your main div with id page-wrap is ontop (overlapping) of your footer so the links in the footer cannot be clicked.
Seems the .links and .contact divs don't contain any actual links - you need to wrap them in anchor tags like in your main navigation.
As for the .social div, this should work:
<h4>Find Us</h4>
<ul>
<li id="facebook">facebook</li>
<li id="twitter">twitter</li>
<li id="picassa">picassa</li>
</ul>
You'll want to keep the text-indent:-9999px to hide the text. To add a hover state, simply target #facebook:hover
I'd like to center the navigation bar but I'm not sure which part of the code is problematic.
<div align="center"><ul id="nav" class="dropdown dropdown-horizontal"><li class="hover">HOME</li>
<li><a name="blank">PORTFOLIOS</a>
<ul>
first of all, your html is missing end div tag
more importantly, instead of , assign an id selector to your div tag and apply CSS to get the centering
for instance
<div id="wrapper"><ul id="nav">...</ul></div>
and css
body {width:100%;}
#wrapper {width:700px;margin:0 auto;}
I have a div which contains an unordered list... After some user actions i load the div with a longer list i.e. containing more list items than the previous one. I use jquery's higher level ajax functions to do this.
The problem is when i load it through ajax the list elements overflow the div's bottom portion and some of them get's displayed out of the div.
I haven't set any heights for the containing div assuming that it will expand to accomodate any future longer lists.
I'll post the code below and will be extremely grateful if someone figures this out....
#sidebar1 {
float: left;
width: 15%; /* since this element is floated, a width must be given */
background: #FFE8BF; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 15px 0; /* top and bottom padding create visual space within this div */
text-align:center;
}
<div id="sidebar1">
<div class="sidebarmenu">
<ul id="sidebarmenu1">
<li>
<a href="#" id="loadHotel" >
HOTEL
</a>
</li>
<li>
<a href="#" id="loadCountry">
COUNTRY
</a>
</li>
<li>
<a href="#" id="loadCity">
CITY
</a>
</li>
</ul>
</div>
</div> <!-- end #sidebar1 -->
I load the list elements into the <ul id = "sidebarmenu1">
Hope i'm clear...
Thanks a lot in advance....
have you tried:
$('ul#sidebarmenu1').removeClass('class here').AddClass('class here');
that should work
Figured out a workaround for the curvy corner problem...!!!
after i load the menu items with ajax, i use jquery to increase the height of the div and then call curvy corners to round the edges...!
Voila..!!!!