I made this page in wordpress and foundation.I want to change the below menu :
into this:
My css to override foundation's app.css is as below:
.top-bar-section li
{
width:150px;
word-wrap:break-word;
border-bottom: solid 1px #BC9633;
float:left;
}
PART OF app.css
.top-bar-section li:not(.has-form) a:not(.button) {padding:0 15px;line-height:45px;background:#ffffff;}.top-bar-section li:not(.has-form) a:not(.button):hover {border-bottom: 1px solid #BC9633;padding-bottom: 1px;padding-bottom: 3px;border-bottom-width: 1px;border-bottom-style: solid;}.top-bar-section li.active:not(.has-form) a:not(.button) {padding:0 15px;line-height:45px;color:#000000;border-bottom: 1px solid #BC9633;padding-bottom: 1px;padding-bottom: 3px;border-bottom-width: 1px;border-bottom-style: solid;}.top-bar-section li.active:not(.has-form) a:not(.button):hover {background:#BC96633;color:#000000;}
HTML
<div class="menu-wrapper">
<div class="top-bar-container contain-to-grid show-for-medium-up">
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<!--<h1><?php bloginfo('name'); ?></h1>-->
<img src="img/fspb_logo.png" width="165" height="145" >
</li>
</ul>
<section class="top-bar-section" style="padding-top:55px;">
//below two lines display the menu
<?php foundationPress_top_bar_l(); ?>
<?php foundationPress_top_bar_r(); ?>
</section>
</nav>
</div>
</div>
***** I removed padding:0 15px;line-height:45px; from .top-bar-section li..and it turned out to be below:
How do I push the long menu up pls?
You could also check the padding/margin on the as well. That might be where the issue is. Or the line-height. Kind of hard to pinpoint the exact problem without the full source (html and css of the problem area). Hope that helps!
CSS
.top-bar-section li
{
width:150px;
word-wrap:break-word;
border-bottom: solid 1px #BC9633;
float:left;
padding-bottom: 0px;
line-height: 20px;
}
Below is my updated css
.top-bar-section li
{
width:103px;
/*word-wrap:break-word;*/
white-space:word-wrap;
border-bottom: solid 1px #BC9633;
float:left;
padding-top : 0; padding-bottom: 0; margin-bottom: 0;
margin-right:10px;
height:35px;
line-height:11px;
}
It turned out better than before and solved my problem. It's just that The ABOUT FSPB looks a bit weird. Only if the words can be used to stretch the line taking up by the line underneath it would be better. If anyone knows how to do that, pls feel free.Thanks all.
There is no Foundation way to accomplish this. You can either us a css positioning or a table valign approach depending on your goals. Here is a SO post that describes how to accomplish both.
Related
http://www.walkerspencer.com/chrhsweb/max
So I'm currently working on a high school project, and I'm completely stumped. One of my divs, article, isn't behaving how I'd like it to. It has a height of 0. Now, after a lot of googling and research, it seemed like this was a common issue... for containers which contained floating elements. My article contains no floating divs. I even tried removing float from the css for my #buttons div, and it had no effect. I've also tried most of the suggested float fixes: the clearfix method, clear:both. At this point, I just need an outside opinion. I couldn't find any major errors in my code (besides a general disorganization and misuse of semantic elements). The intended behavior is that sections scale while maintaining a 16:9 ratio as the browser resizes, and have a black transparent background that fills the entire article. I could also apply the background to article, but article doesn't have a height either. If you'd just like to critique my bad code habits and formatting, that's alright too :). The images' absences shouldn't be important, though they are in a 16:9 ratio, and I had this problem before adding any jquery. Thank you so much. Sorry if there's an issue with my post or how I've asked it, it's my first time asking a question on here.
HTML:
<head>
<meta charset='utf-8'/>
<title>design</title>
<link rel="stylesheet" type="text/css" href="reset.css"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<link href='http://fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#images").cycle({
containerResize: false,
slideResize: false,
fit: 1
});
$('article').cycle({
activePagerClass: 'activeSlide',
containerResize: false,
slideResize: false,
fit: 1,
timeout: 0,
speed: 300,
startingSlide:0,
pager: "#buttons",
pagerAnchorBuilder: function(idx, slide) {
return '#buttons li:eq(' + idx + ')';}
});
$('#right').click(function() {
$('article').cycle("next");
return false;
});
$('#left').click(function() {
$('article').cycle("prev");
return false;
});
});
</script>
</head>
<body>
<div id="container">
<div id="arrows">
<div id="left"><</div><div id="right">></div>
</div>
<nav>
<ul id="buttons">
<li>
<li>
<li>
<li>
<li>
</ul>
</nav>
<div class="fix"></div>
<article>
<section id="images">
<img src="images/alaska.jpg" width="100%" height="auto"/>
<img src="images/field.jpg" width="100%" height="auto"/>
<img src="images/sunset.jpg" width="100%" height="auto"/>
</section >
<section id="about">
<p>
my name is <span style="color:crimson">max</span>.<br>
i'm a senior in high school.<br>
i love <span style="color:yellow">code</span><br>
<span style="color:#a45bc4">&</span><br>
i love <span style="color:lightgreen">design</span>.<br>
<span style="color:#a45bc4">welcome to my site.</span>
</p>
</section >
<section id="work">
</section >
<section id="contact">
</section>
<section id="place">
</section>
</article>
<div id="bottom"></div>
</div>
</body>
CSS:
body{
background-image:url("images/clouds.jpg");
background-size:cover;
background-color:white;
background-repeat:no-repeat;
height:100%
}
#container{
width:70%;
min-height:103px;
margin:0 auto;
min-width:182px;
}
#arrows{
max-width: 140px;
height: 70px;
background: #f7f7f7;
-moz-border-radius: 70px 70px 0 0;
-webkit-border-radius: 70px 70px 0 0;
border-radius: 70px 70px 0 0;
margin:auto;
position:relative;
top:25px;
z-index:100;
border-top:1px solid;
border-color:#cccccc;
font-family:"Lato";
text-align:center;
vertical-align:middle;
line-height:60px;
font-size:68px;
color:#cfcfcf;
font-weight:100;
font-stretch:ultra-condensed;
}
#right:hover, #left:hover{
color:#a45bc4;
text-decoration:none;
}
#right, #left{
display:inline;
color:#cfcfcf;
text-decoration:none;
cursor:pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
nav{
width:calc(100%-2px);
border-left:1px solid #cfcfcf;
border-right:1px solid #cfcfcf;
height:35px;
background-color:#f7f7f7;
min-width:182px;
}
#buttons{
position:relative;
float:right;
margin-right:6px;
z-index:100;
}
.fix{
clear:both;
}
.current{
padding-right:0px;
}
#buttons li{
display:inline-block;
height:26px;
width:26px;
background-image:url("images/navc.jpg");
background-repeat:no-repeat;
background-position:center;
background-size:24px;
margin-left:8px;
margin-top:4px;
vertical-align:middle;
cursor:pointer;
}
#buttons li:hover{
opacity:.8;
}
#buttons a{
color:black;
text-decoration:none;
}
#buttons li.activeSlide{
background-image:url("images/violetc.jpg");
height:26px;
width:26px;
background-size:26px;
vertical-align:middle;
}
article{
width:100%;
min-width:184px;
height:100%;
}
section{
height:100%;
width:100%;
margin:0 auto;
text-align:center;
vertical-align:middle;
color:white;
font-weight:100;
font-size:36px;
font-family:"Lato";
background-color:rgba(0,0,0,.4);
}
p{
}
#about{
}
.option img{
opacity:.6
}
.option:hover{
opacity:.8;
}
#bottom{
border-left:1px solid #cfcfcf;
border-right:1px solid #cfcfcf;
border-bottom:1px solid #cfcfcf;
height:30px;
background-color:#f7f7f7;
min-width:182px;
margin-top:56.25%;
}
#media all and (max-width:690px){
#buttons{
margin-top:2px;
width:98%;
text-align:center;
}
nav{position:relative;
text-align:center;}
}
If you're keeping the slideshow plugin, and it is what's causing the absolutely positioned children (you're not doing it,) then your only option is to force the height of the article element, if you want to use it for something.
You can either apply a class/ID to it (if you're using other article elements that have nothing to do with this style, and you only use it once per page, then use an ID, or if you want to re-use it somewhere else on the same page, use a class.) So you would have something like:
article.slideshow-container { height: 498px; }
And you can then use it for whatever you want. This is a fixed-height though, so if image height changes, you lose out again.
The problem is definitely with your implementation of the jQuery Cycle Plugin. As setek has mentioned, the slideshow makes your section divs position absolute, which collapses the height of the article element to 0. You can add the following to your cycle script to dynamically adjust the height for each slide/section:
before : function(currSlideElement, nextSlideElement){
$('article').css('height', $(nextSlideElement).height()+'px');
},
You should also clean up your code (it is a bit of a mess) and try to take things step by step. I have created a working example for you here:
http://jsfiddle.net/BCyD8/
You will have to work a bit to get the spacing right.
I am having trouble positioning a border in a div id. The border doesn't follow the text within the div.
My HTML looks like this:
<div id="menu-left-top">
<ul class="menu-left-top">
<li>Kategorier</li>
</div>
<div id="menu-left">
<ul class="menu-left">
<li>Lamper</li>
<li>Møbler</li>
<li>Kunst</li>
<li>Design</li>
</div>
And this is my CSS:
#menu-left-top {
width:195px;
height:1em;
margin-top:5px;
border-top-style:solid;
border-width:thin;
border-color: #999;
}
ul.menu-left-top {
list-style-type: none;
height:1em;
}
ul.menu-left-top li{
}
ul.menu-left-top li a{
color:#000;
font-size:12px;
text-decoration:none;
font-family: "Gill Sans light";
}
ul.menu-left-top li a:hover{
color:#cf0036;
font-size:12px;
text-decoration:none;
font-family:"Gill Sans light";
font-weight:300;
}
#menu-left {
width:195px;
max-height:4em;
margin-top:5px;
border-top-style:solid;
border-bottom-style:solid;
border-width:thin;
border-color: #999;
}
ul.menu-left {
list-style-type: none;
}
ul.menu-left li{
}
ul.menu-left li a{
color:#000;
font-size:12px;
text-decoration:none;
font-family: "Gill Sans light";
}
ul.menu-left li a:hover{
color:#cf0036;
font-size:12px;
text-decoration:none;
font-family:"Gill Sans light";
font-weight:300;
}
You can see the result here. It's the navigation to the left that is my current problem. As you can see, the div floating right also has faults, but I don't know if it has anything to do with my initial problem?
No issue buddy, but for this also we dont need to separate the first menu item from others,
check these,
your html code will be like this :
<div id="menu-left">
<ul class="menu-left">
<li class="first">Kategorier</li>
<li>Lamper</li>
<li>Møbler</li>
<li>Kunst</li>
<li class="last">Design</li>
</ul>
</div>
if you want it like this
then you can use this css :
.first { border:#000 solid; }
.last{ border-bottom:#000 solid; }
and if you want it like this then you can use this :
.first { border-top:#000 solid; }
.last { border-bottom:#000 solid; }
you can use this for this
.first { border-top:#000 solid;
border-bottom:#000 solid; }
.last{ border-bottom:#000 solid; }
Remove the max-height property of the menu-left div.
there is a max-height? remove max-height:4em; or you can make it height:auto;
You have not closed your ul tags in this way , as you start any html tag also you have to end the html tag, this is for most of the m\html tags, so this is the main fault here, firstly you need to close your ul's ,
<div id="menu-left-top">
<ul class="menu-left-top">
<li>Kategorier</li>
</ul>
</div>
<div id="menu-left">
<ul class="menu-left">
<li>Lamper</li>
<li>Møbler</li>
<li>Kunst</li>
<li>Design</li>
</ul>
</div>
And the massive border around your list elements are coming due to
border-top-style:solid;
border-bottom-style:solid;
this is not a proper way to bordering, you can use as border:2px soild #00000; , and for more on this kindly update your layout here, just give me a blueprint of how you want to make it look, then i will help you in formatting these. Cheers. and use height:auto also
Use html format like this , as we do not need to differ the top menu, we can achieve this via this thing :
use this html code :
<div id="menu-left">
<ul class="menu-left">
<li class="first">Kategorier</li>
<li>Lamper</li>
<li>Møbler</li>
<li>Kunst</li>
<li>Design</li>
</ul>
</div>
and then the css changes are as :
.first { border-top:#000 solid; }
ul.menu-left li{
border-bottom:#000 solid;
}
this will make something like this, and border styles you can change according to you, if any queries then feel free to ask,
I know there are several posts about this but none of the solutions are working for me. With that said, my containing div will not grow with my content. I know why this is happening, because it is 'float'ing but even when I use 'clear' it will not expand with the parent div. I've tried using using clear in nearly every element below with no success. Any help would be greatly appreciated.
View Image of problem:
For a live example please visit, http://thehopcompany.com/index.php?id=49
---------------CSS----------------
.product {
width:775px;
margin:0;
padding:0;
margin-top:75px;
margin-left:-8px;
}
.product ol{
margin:0px;
}
.product li{
list-style:none;
margin: 0 0 15px 0;
padding:15px;
border:1px solid #ccc;
height:100px;
color:#000;
}
.product-column-left{
float:left;
width:100px;
height:100px;
}
.product-column-right{
float:left;
width:120px;
border-left:1px solid #ccc;
height:100px;
text-align:center;
}
.product-column-center{
float:left;
width:470px;
min-height:100px;
padding-right:15px;
padding-left:15px;
text-align:left;
padding-bottom:30px;
display:block;
}
.product h2{
font-size:18px;
margin-bottom:5px;
margin-top:0;
}
.product .text-underline{
text-decoration:underline;
}
.description-text{
font-size:12px;
color: #000;
}
.clear{
clear:both;
}
--------------------------HTML--------------------------
<li style="list-style:none;">
<div style="width:750px;" >
<div class="product-column-left">
<img align="left" style="border:0;" src="images/hop-pellets.png" width="100" height="100" />
</div>
<div class="product-column-center" >
<h2><span class="hop-title-text-product">Columbus, Tomahawk and Zeus</span></h2>
<div class="description-text" >Proprietary naming rights sometimes have identical or nearly identical strains being sold under multiple names. Columbus, Tomahawk and Zeus, or the CTZ hops, are the most famous example of this phenomenon. CTZ hops are known as super-alpha hops due to the extremely high percentage of alpha acids they contain, making them ideal bittering additions. Columbus hops can be found alongside Centennial hops in Stone Ruination IPA or in Saranac's Brown Ale.
Proprietary naming rights sometimes have identical or nearly identical strains being sold under multiple names. Columbus, Tomahawk and Zeus, or the CTZ hops, are the most famous example of this phenomenon. CTZ hops are known as super-alpha hops due to the extremely high percentage of alpha acids they contain, making them ideal bittering additions. Columbus hops can be found alongside Centennial hops in Stone Ruination IPA or in Saranac's Brown Ale.
</div>
<div class="product-column-right">
<h2>$0.00</h2>
<img style="margin-top:10px; border:0;" type="image"src="images/add-to-cart-button.png" width="90" height="25" />
</div>
</div>
</li>
</ol>
</div>
Try to add overflow hidden to the parent li
.product li {
....
overflow: hidden;
/*height: 100px;*/
}
The problem with overflow:hidden is it will hide overflowing elements if you have them in your layout. So by using clearfix which is i suppose the best practice you can acheive it like below.
.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
Then, basically you just need to add the class in your container elements. More about Clearfix
<li class="clearfix">
<div style="float: left;">
<div class="content">Big content</div>
</div>
</li>
FIDDLE DEMO
Adding a clearfix should solve your problem:
.clear{width: 100%; clear: both; height: 0px; line-height:0px;}
<div class='clear'></div>
.clear{width: 100%; clear: both; height: 0px; line-height:0px;}
<div class='clear'></div>
Add the above div at the very end of your container div (i think after product-column-right) and just before your closing li tag. That should ensure that the div spans the content.
Your product.li style has a height of 100px, so that's going to constrain the box no matter what. Remove that setting (or change it to height:auto) and then add an empty clear div just before the closing li tag and you should be fine.
So your CSS definition would change to:
.product li{
list-style:none;
margin: 0 0 15px 0;
padding:15px;
border:1px solid #ccc;
height:auto;
color:#000;
}
And then the relevant HTML:
<img style="margin-top:10px; border:0;" type="image"src="images/add-to-cart-button.png" width="90" height="25" />
</div>
</div>
<div style="clear:both"></div>
</li>
</ol>
</div>
I was using overflow: for a while with much success - but I had a few problems and decided to go back to this clear fix. If you have any problems - check it out.
http://css-tricks.com/snippets/css/clear-fix/
Trying to get these list headings to line up correctly, but I can't figure out the justification to get it to line up. Trying to style it like the second one but those bold tags are pushing it down a line.
<div class="block">
<ul class="toc partThree">
<li><b>39:</b>Maintaining This Diet</li>
<br/>
<li><b class="parts">Part 3A:</b><a class="partslink" href="#"> About Fruit Consumption</a></li>
<li><b>40:</b>Ideal Fruit-combinations</li>
<li><b>41:</b>Fruits To Go</li>
<li><b>42:</b>Salads & Shakes</li>
<li><b>43:</b>Fruits In General</li>
<li><b>44:</b>About Consuming Nuts</li>
<br/>
<li><b class="parts">Part 3B:</b><a class="partslink" href="#"> About Consuming Animal Food</a></li>
<li><b>45:</b>About Fresh Raw Fish</li>
<li><b>46:</b>About Fresh Raw Egg Yolk</li>
<br/>
<li><b class="parts">Part 3C:</b><a class="partslink" href="#"> The Most Important Section of This book</a></li>
<li><b>47:</b>Remember That...</li>
<li><b>48:</b>The Rules</li>
<li><b>49:</b>The Obstacles</li>
<li><b>50:</b>Cravings</li>
<li><b>51:</b>Traps</li>
<li><b>52:</b>How To Pick Munch-foods</li>
<li><b>53:</b>Protein Contents</li>
<li><b>54:</b>Single Munch-food Items</li>
<li><b>55:</b>Munch-food Meals</li>
</ul>
</div>
Here is the CSS:
.toc{
list-style:none;
font-size: 15px;
}
.toc li{
margin:0 0 0 10px;
width: 220px;
overflow:hidden;
font-size:13px;
font-family:Arial;
}
.toc b{
float:left;
padding: 0 4px 0 0;
font-weight:bold;
}
.toc a{
float:left;
width:191px;
padding:0 0 0 0px;
color: black;
text-decoration:none;
}
.toc a:hover{
color: rgba(0,0,0,.8);
text-decoration: underline;
}
b.parts{
}
a.partslink{
}
http://jsfiddle.net/QbUvD/
Made some adjustments, particularly removing floats. This is assuming you don't use the suggestion above of the counter-reset (although with that you'd have to restructure a lot of your HTML it seems).
the trick I used here is to add a padding-left to the li's that are title (add a class .title) then using a negative text-indent to wrap back the first line, but allow the second one to keep the padding. The only downside here is the need for a manual width on the padding/indent values, but it achieves the look you want.
I have a strange bug when looking at my homepage in Chrome. The bug doesn't seem to appear when I try to edit it with CSSEdit:
I attached the pictures to show you what I mean. Those "points" next to the icons are linked as well.
What could be causing this error?
Thanks for the help!
EDIT sure here's the code (the page isn't online):
<div class="rss">
<p>
<a href="http://linkto">
<img src="/images/facebook.png" alt="Find me on facebook" />
</a>
<a href="http://linkto">
<img src="/images/twitter.png" alt="Follow me on twitter" />
</a>
<a href="http://linkto">
<img src="/images/rss.png" alt="Subscribe to RSS Feed" />
</a>
</p>
</div>
which is wrapped in a div class called footer. And the CSS
.site .footer {
font-size: 80%;
color: #666;
border-top: 4px solid #eee;
margin-top: 2em;
overflow: hidden;
}
.site .footer .rss {
margin-top: 0em;
margin-right: -.2em;
float: right;
}
.site .footer .rss img {
border: 0;
}
Sorry for the strange formatting.
Those "points" are the text-decoration:underline portion of your CSS being applied to <a> tags. The reason you only see part of it is because the image you are using is covering the majority of it.
Try putting this in your CSS:
.rss a { text-decoration:none }
.rss a img { border:none; outline:none }