I am using dynamic content (WordPress) and would like to center a logo in the middle of a list like: http://www.munto.net/queed-v1/.
I tested it out and my theory works, provided the number of items on both sides is the same...but if they're different it messes up the navigation.
You can see a live example at: http://joshrodgers.com/.
What I did was made my logo a background image and centered that to my unordered-list, then I set a width on each list-item (so that if there was a super-long one it wouldn't mess up the navigation), and finally after the third link I put a 200px margin on to the right of the list-item (that way there is no list-item over the logo)...but like I said this works perfectly if the number of items is even, if the items equal an odd number it looks funny.
Not sure what the best way to do this, so - what would be the best way to fix this?
Page Code:
<html>
<head>
<title>Josh Rodgers - El Paso, Texas</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<ul>
<li>Home</li>
<li>About Us</li>
<li class="example">super new lodge</li>
<li>Programs</li>
<li>Events</li>
<li>Contact Us</li>
<li>Contact Us</li>
</ul>
</body>
</html>
CSS Style:
/* Reset */
#import url("reset.css");
body {
margin: 0 auto;
position: relative;
width: 1000px;
}
ul {
background: #ff0000 url("images/example.jpg") top center no-repeat;
height: 200px;
margin: 0 auto;
text-align: center;
width: 1000px;
}
li {
background: #ffff00;
color: #ff0000;
display: inline-block;
font-size: 20px;
padding: 20px 0;
position: relative;
top: 70px;
width: 100px;
}
li.example {
margin-right: 200px;
}
*Figured I'd work on a normal php solution before integrating it into WordPress.
Thanks,
Josh
From a design point of view i would maybe consider making the logo the home link. A lot of web users are accustomed to clicking the logo and it taking them home. You could still incorporate the home text underneath the logo.
I would probably not use your method of margin-right: 200px to not cover the logo, anything you change before that list item will shift the margin.
Ultimately i would suggest rethinking having the logo set as a background-image and make it one of the list items.
Related
I am designing a slideshow and the absolutely positioned ul of images. The absolutely positioned ul is screwing with the natural flow of the rest of the page. I know absolutely positioned elements do this. However, I was under the impression that setting the #sliding section to position: static and having height: auto !important would work. The #stuff section is showing up underneath the #sliding section. Has anybody else had to work with this before?
To be perfectly clear the actual slideshow works perfectly, but the HTML and CSS is what I am trying to solve. Any help is very appreciated.
Here is the HTML
<section id="sliding">
<img id="leftimg" src="prev.png" alt="left">
<ul class="boxslider">
<li><img class="slidingimg" src=".jpg" id="will" alt="1"></li><!-- will -->
<li><img class="slidingimg" src=".jpg" id="poa" alt="2"></li><!-- powerofattorney -->
<li><img class="slidingimg" src=".jpg" id="probate" alt="3"></li><!-- probate -->
<li><img class="slidingimg" src=".jpg" id="forming" alt="4"></li><!-- forming business -->
<li><img class="slidingimg" src=".jpg" id="contracts" alt="5"></li><!-- -->
<li><img class="slidingimg" src=".jpg" id="realestate" alt="6"></li><!-- -->
</ul>
<img id="rightimg" src="next.png" alt="right">
</section>
<section id="stuff">
<h2>Stuff</h2>
<h2>Stuff</h2>
<h2>Stuff</h2>
<h2>Stuff</h2>
</section>
Here is the CSS
#sliding{
position: static;
display: block;
width: 100vw;
height: auto !important;
clear: both;
}
#leftimg, #rightimg{
display: inline-block;
position: absolute;
top: 40%;
width: 50px;
z-index: 1;
}
#leftimg{
left: 1vw;
}
#rightimg{
right: 1vw;
}
.boxslider{
position: absolute;
left: 0px;
display: block;
width: 600vw;
overflow: none;
}
.slidingimg{
display: inline-block;
vertical-align: top;
width: 100vw;
height: auto;
float: left;
}
#stuff{
width: 100vw;
height: 80vh;
border-top: 8px solid green;
clear: both;
}
Here is the jsfiddle.
http://jsfiddle.net/2ruk3Lju/2/
I guess you cannot use position:absolute. Position absolute has to have the height and width explicitly assigned. I decided to try position relative since it can still be moved by jquery to create a sliding effect. This works because position:relative is still within the normal flow of the document and fixes the issue of the content below the #sliding div stacking underneath it.
This is probably ridiculously simple but I can't understand how to make a 100% wide footer in Foundation 5. I tried with the following:
.footer {
width: 100% !important;
background: #cccccc;
}
and in the template
<div class="row footer">
This is the footer
</div>
but the footer remains centered and with a width not equal to 100% of the page.
Is there some inbuilt way to do this that I am not aware of?
Thanks!
Foundation-5 css has a max-width property set to row class and width of 100%
.row {
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
max-width: 62.5rem;
}
You don't need to override .footer class width with 100% as it takes that anyway from row.
Override max-width property.
.footer{
max-width:none;
}
P.S !important declarations should not be used unless they are absolutely necessary
I'm looking to show a country's tooltip from outside of the geochart. I've searched through the API, but I'm not seeing the method for doing so.
<script>
google.load('visualization', '1', { packages: ['geochart'] });
google.setOnLoadCallback(function()
{
var data = google.visualization.arrayToDataTable([
["Country","Count"],
["Mexico",600],
["Canada",400]
]);
new google.visualization.GeoChart(document.getElementById('map')).draw(data);
});
</script>
<div id="map" style="width: 500px; height: 300px;"></div>
<ul>
<li>Canada</li>
<li>Mexico</li>
</ul>
<p>Is there a way to trigger the map tooltips when hovering over the links above?</p>
Here's a very basic fiddle to start with
You can do this overriding styling for Google Chart Tooltips defined by:
http://ajax.googleapis.com/ajax/static/modules/gviz/1.0/core/tooltip.css
Use for example:
<style>
.google-visualization-tooltip {
border: dashed 1px !important;
position: fixed !important;
top: 30px !important;
right: 250px !important;
margin: 10px 0 0 400px !important;
}
</style>
Tooltip will be floating on the right side of chart.
Ok, I'm trying to tinker with my navigation menu. I want something like this website:
http://aleksfaure.com/
He has a single image (logo) centered with 2 menu links on either side. I've tried a couple of different things, including just using my logo as an image centered at the top, in between the menu. No dice.
Here's the relevant HTML and CSS I have with my current nav menu. I'm still kind of a intermediate beginner at this.
HTML
<nav role="navigation">
<ul id="nav">
<li>Home</li>
<li>About Me</li>
<ul id="nav-right" style="float:right;">
<li>Portfolio</li>
<li>Contact</li> </ul>
</ul></nav>
CSS
#header nav {
position: relative;
width: 700px;
height: 163px;
display: block;
margin: 0 auto;
text-align: center;
}
#header nav ul li {
float: left; list-style: none;
}
ul#nav li a {
display: block;
width: 100px;
height: 100px;
padding: 50px 0 0 0;
margin: 0 10px 0 10px;
font-family: 'MuseoSlab-500', Helvetica, sans-serif;
font-size: 16px;
text-transform: uppercase;
color: #000;
text-shadow: 0 2px 1px #bbbaba;
text-decoration: none;
}
ul#nav li a.mainnav:hover {
color: #13cad1;
text-shadow: 0 2px 1px #fff;
}
You don't need to use two separate lists. Treat the entire menu, including your image, as one list. Consider something like this for your HTML:
<div>
<ul id="nav">
<li>Home</li>
<li>About Me</li>
<li><img src="images/yourLogo.png"></li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
And make sure you have your style set to float: left;
#nav li { float: left; list-style: none;}
Then, just center the entire div on the page, and style your links as you want.
SEPARATE NOTES:
In your code, you are missing the closing tag for your first unordered list.
The navigation element is not very widely supported, so depending on your audience you may want to use a div.
So in my code I have a sticky footer. And the sticky footer has the #wrap container with a min-height of 100%. But with min-height you can't use height:100% on objects inside the wrap div.
So I add height:100% but it messes with the layout by making the footer roll over the content in the wrap div when window height is too small.
Anyone have fixes for this?
<div id="wrap">
<div id="main">
<div id="content">
</div>
</div>
<div class="clearfooter"></div>
</div>
<div id="footer">
</div>
CSS:
*{
padding: 0px;
margin: 0px;
}
html, body {
height: 100%;
}
body{
color: #FFF;
background-image:url('../images/black_denim.png');
}
#wrap {
min-height: 100%;
margin-bottom: -200px;
position: relative;
}
#topBanner{
width: 200px;
margin: 0px auto;
}
.clearfooter {
height: 200px;
clear: both;
}
/* footer */
#footer {
position: relative;
height: 200px;
width: 100%;
min-width: 960px;
}
If all you need is a sticky footer that doesn't cover up any of the body's content then just give the footer a fixed position and give the bottom of the body padding equal to the footers height.
body{
padding-bottom:200px;
}
#footer {
position: fixed;
bottom:0;
height: 200px;
width: 100%;
}
EDIT:
if your concern is that on very small screens the fixed footer covers up most of the screen then there is no workaround for this except for maybe hiding the footer dynamically using css media queries or javascript.
many mobile browsers do not support fixed positions precisely because of the issue of them covering large portions of the screen.