I have an image and text both with links inside of a <li> tag. The <ul> is styled to create columns out of the images and content.
Question: How do I center the copy under the image and add a small margin below the image to give it some separation?
HTML:
<ul class="display-posts-listing">
<li class="listing-item one-fourth first">
<a class="image" href="http://websitex.com/sept-15-2014/">
<a class="title" href="http://websitex.com/sept-15-2014/">Sept 15, 2014</a>
</li>
</ul>
CSS:
ul.display-posts-listing li img{display:block;margin:0px auto;}
ul.display-posts-listing li a.title{margin:0px auto;font:bold 14px arial;margin-top:30px;color:white;text-decoration:none;}
ul.display-posts-listing li a.title:hover{color:orange;}
In order to center text try using the following CSS code.
text-align:center
Adding margin to the bottom of the image should give you the separation you're seeking. Alternately the margin-bottom property can be used.
margin: 0 0 10px 0;
example:
ul.display-posts-listing li .img{display:block;margin: 0 0 10px 0;}
ul.display-posts-listing li a.title{margin:0px auto;font:bold 14px arial;margin-top:30px;color:white;text-decoration:none;text-align:center;}
both your HTML aqnd CSS are weird, change it to this:
<div class="container mainbody">
<ul class="display-posts-listing">
<li class="listing-item one-fourth first">
<img class="image" src="http://i.stack.imgur.com/OrkwY.jpg?s=128&g=1" alt="" />
<a class="title" href="http://websitex.com/sept-15-2014/">Sept 15, 2014</a>
</li>
</ul>
and CSS to something like this:
ul{width:200px;}
ul{width:200px; text-align:center; list-style-type:none}
li img{display:block;margin:0px auto; margin-bottom:20px;}
ul li a{margin:0px auto;font:bold 14px arial;margin-top:30px;color:#f00;text-decoration:none;}
ul.display-posts-listing li a.title:hover{color:orange;}
See fiddle here
i note you use
<a class="image" href="http://websitex.com/sept-15-2014/">
in this way i think your css code should be a.image
ul.display-posts-listing li a.image{display:block;margin:0px auto;}
or also,, make big <li> with position:relative and text position:absolute;
you can control it's position by ex: top:10px;right:10px; and other side
Related
Picture
if you click on this link you will see at left corner of the navigation bar i want to create an folat image like it
so i started to get some codes to preform it
so i found this
<html>
<head></head>
<body>
<div class="menu">
<li>
<img style="float: left;margin-left: -50%;" src="../images/logo.png" alt="Tera Host inc." height="60" width="200">
</li>
</div>
</body>
</html>
but its appearing at the top of the page i want something on the top left corner so an friend told me to do something
You have to make 2 divs following each other
And on each one you do style="float:left;"
And when yuu re done with the floating left
Make a big div that contain those divs
and on the ending do
so if anyone could help me pls reply the whole code
Thanks in advance
I am not very clear with your question! But i just gave a try in an assumption and I think you need to make the menu & logo float separately.
You can check this fiddle,
https://jsfiddle.net/8brvykvn/1/
<div class="header">
<a href="#" class="logo">
<img src="../images/logo.png" alt="Tera Host inc." height="60" width="200"></a>
<ul class="menu">
<li>Dashboard</li>
<li>Game Monitor</li>
<li>TS3 Admin</li>
</ul>
css:
.header a{
float: left;
margin-right:10px;
}
.header .menu{
float : left;
margin : 0;
padding: 0;
}
.header:after{
content:'';
display:block;
clear: both
}
.header .menu li{
list-style:none;
display:inline-block;
}
.header .menu li > a{
margin-right:10px;
}
A few days ago I was working on a classic menu. It has a logo on the left and some menu buttons on the right. This was my first try – fiddle1. But someone from this community told me that menus normally aren't coded like that but with <ul>and <li>.
So I tried to rebuild that menu – fiddle2. Unfortunately nothing works.
My first issue is that I have the feeling that the <div id="menubuttons"> is not located IN the <div id="header">. The second problem is that <div id="menubuttons" align="right"> isn't aligned right as it should be.
Can you help me to get the visual result of fiddle1 with <ul>and <li> tags?
ul element by default will take margin
So please add css like this, it will remove the default margin and padding
ul{margin:0; padding:0}
#menubuttons { float:right}
Check this Demo
I changed some code, try this:
http://jsfiddle.net/WnneG/
<ul style="float:left;paddin:0px;margin:0px;">
<li class="menubutton"> Home
</li >
<li class="menubutton"> Info
</li>
<li class="menubutton"> Spenden
</li >
<li class="menubutton" align="right" style="margin-right: 20px;"> Kontakt & Impressum
</li >
</ul>
replace this line of code:
<div id="header_logo" align="left">
<img src="http://futurized.t15.org/fut_logo.png" style="height: 12px; z-index: 2;" />
</div>
<div id="header_menu" align="right">
with:
<div id="header_logo" style="float:left;">
<img src="http://futurized.t15.org/fut_logo.png" style="height: 12px; z-index: 2;" />
</div>
<div id="header_menu" style="float:right;">
hopefully you will get your desired result if this help You please mark it as green
See the code in the fiddles you posted. Yours tries to create a menu from divs, while the one you are trying to get to, has <li> items with float: left;
Put to <li> tag style display:block;float:right; like this: <li style="display:block;float:right">
Use float = right instead of align for the div menubuttons.
#menubuttons {
margin-right: 0;
margin-top: 0;
height: 2.5em;
line-height: 2.5em;
display: block;
float:right;
}
I have created a version of your menu. I think this helps: http://jsfiddle.net/yBTJF/4/
.menu
{
height: 30px;
background: #FFFFFF;
line-height: 30px;
list-style: none;
padding: 0 5px;
margin: 0px;
}
If you want :hover, all you have to do is create a selector in your CSS:
.menu a:hover
{
// ...
}
I have a problem with my navigation bar. When loading the page, sometimes it changes to look like its in steps however when you refresh it changes back to normal. I cant seem to find out what im doing wrong! Please help!!
Website is http://www.pearsonfoods.com.au
<div id="nav">
<a href="index.html" >
<div class="navBlock" style="color:red;"><p>Home</p>
</div>
</a>
<a href="about.html">
<div class="navBlock"><p>About us</p>
</div>
</a>
<a href="where.html">
<div class="navBlock"><p>Where we sell</p>
</div>
</a>
<a href="foods.html">
<div class="navBlock"><p>Our Foods</p>
</div>
</a>
<a href="contact.php">
<div class="navBlock"><p>Contact us</p>
</div>
</a>
</div>
Your markup is not well-formed. <a> is an "inline element" and <div> is a "block element". Block elements cannot exist within inline elements.
Your navigation list is better structured as a simple unordered list:
<ul>
<li>Home</li>
<li>About us</li>
<li>Where we sell</li>
</ul>
See? So much cleaner :)
Style each <li><a> as a block-flow element with display: block; (note this does not affect the inline/block semantics of elements, it's strictly a visual thing) and apply float: left; to the <li> elements.
html
<ul class="nav">
<li class="current">Home</li>
<li> About Us</li>
<li> Where we sell</li>
<li> Our Foods</li>
<li> Contact Us</li>
</ul>
css
.nav {
width: 900px;
margin: 0 auto;
}
.nav li {
background-color: rgba(0, 0, 0, 0.72);
border-radius: 10px 10px 0px 0px;
width: 180px;
float:left;
}
.nav li a{
color:#fff;
text-decoration:none;
text-align:center;
line-height:50px;
display:block;
}
.nav li a:hover,.nav li.current a{
color:red;
}
Link to running example
I am developing a website having a sidebar nested lists. Parent li has children li structure. On first display 4 li (list items) are displayed and above 4 item should be hidden with a link to "Show All" option.
html codes:
<div id="sideMenuBox">
<div class="header">
<h2 class="cufon">KATEGORİLER</h2>
<a class="moreLink" href="#" title="">Tümü</a>
</div>
<div class="body"> <!-- menubox body -->
<ul id="sideMenu">
<li>
<span><img src="images/icon-1.png" alt="icon" width="32" height="19" /></span>
Alışveriş Merkezleri
<ul>
<li>Online Alışveriş Siteleri</li>
<li>Kuyumcular</li>
<li>Hediyelik Eşya</li>
<li>Çiçek Sektörü</li>
<div class="sbSubMenu" style="border:black 1px solid">
<li>Kuyumcular</li>
<li>Kuyumcular</li>
<li>Kuyumcular</li>
<li>Kuyumcular</li>
</div> <!--// sidebar submenu -->
<li><a class="showAll" href="javascript:" title="" onclick="javascript:showMenu(this);">show all</a></li>
</ul>
<br class="clearFix" />
</li>
</ul>
</div> <!-- // menubox body -->
<div class="bottom"></div>
</div> <!-- // sideMenuBox -->
and CSS codes are:
#sideMenu {
width:200px; height:auto;
margin:10px auto;
}
#sideMenu li{
list-style-type:none;
min-height:25px;
line-height:18px;
height:auto;
border:blue 1px solid;
}
#sideMenu hr { width:100%; height:1px; color:#e69000; background:#e69000; margin:10px auto 5px; border:0;}
#sideMenu li span { width:40px; float:left;}
#sideMenu li a{
color:#003a69;
text-decoration:none;
font-size:16px;
font-weight:bold;
margin:0; padding:0;
}
#sideMenu li li {
margin-left:50px;
display:inline-block;
line-height:20px;
border:red 1px solid;
}
#sideMenu li li a { font-size:13px; height:1px;}
#sideMenu li li a.showAll,
#sideMenu li li a.showLess{
color:006aa6;
text-decoration:underline;
font-size:12px;
font-weight:normal;
margin:10px 0;
padding-right:15px;
background:url(../images/arrow-down-blue.png) right center no-repeat;
}
#sideMenu li li a.showLess{ background:url(../images/arrow-up-blue.png) right center no-repeat;}
#sideMenu .sbSubMenu {
width:100%; height:auto;
}
These codes are working fine in Firefox, Chrome, and IE8 but in IE7 is included in li. and lis included in are rendering out of div that is breaking the layout. If I remove the from the codes then its working fine but to meet the requirements of the project i have to hide list items after four thats why i have enclosed the list items in a div to be hidden by default.
I have setup a online demo page to resolve this problem and to get the experts advise. You can see this page live demo page: http://tinyurl.com/7pqo5ob
Note: I have added some borders to understand how list items and divs are rendering in IE. Its working fine in other browsers but not good in IE7. I have tried many options but in vain.
Please advise.
Thanks in advance.
Thank you very much for being concerned. I tried many tricks and finally i got it. Actual problem was in nested unordered list and list items structure. In the inner structure of "LI" i placed a "DIV" tag to be hidden by default. This was the point where IE 7 start breaking the layout. If i remove the "DIV" tag then it was okay but in project requirements the "DIV" should be there for hiding the "LI"s.
After many hours of frustration, I tried to change the "DIV" to "LI" and its working fine in IE7 and in other browsers too.
Final codes are:
<ul id="sideMenu">
<li>
<span><img src="images/icon-1.png" alt="icon" width="32" height="19" /></span>
Alışveriş Merkezleri
<ul>
<li>Online Alışveriş Siteleri</li>
<li>Kuyumcular</li>
<li>Hediyelik Eşya</li>
<li>Çiçek Sektörü</li>
<li class="sbSubMenu"> <!-- hidden list items -->
<ul>
<li class="innerList">Kuyumcular</li>
<li class="innerList">Kuyumcular</li>
<li class="innerList">Kuyumcular</li>
<li class="innerList">Kuyumcular</li>
</ul>
</li> <!-- // sidebar submenu -->
<li class="Link"><a class="showAll" href="javascript:" title="" onclick="javascript:showMenu(this);">show all</a></li>
</ul>
</li> <!-- // main List Item --->
</ul>
and you can check this page live working fine with IE7.
Link: http://www.designforce.us/demo/kktc/index.html
Thanks
I am trying to override the css from another file and I would like to know how specific of a reference I would need to override it.
Here is the page I am working with if you'd like to take a look:
http://www.bolistylus.com/shop/
This is what I'm trying to override:
.products li {
float: left;
margin: 0 10px 20px 0;
padding: 0;
position: relative;
width: 150px;
}
Here is the HTML I'm working with:
<div id="main">
<section id="primary"><div id="content" role="main"><div id="breadcrumb"><a class="home" href="http://www.bolistylus.com">Home</a> › Shop</div>
<h1 class="page-title">All Products</h1>
<ul class="products">
<li class="product first">
<a href="http://www.bolistylus.com/shop/boli-2/">
<img width="150" height="150" src="http://www.bolistylus.com/wp-content/uploads/pinkproduct-150x150.png" class="attachment-shop_small wp-post-image" alt="pinkproduct" title="pinkproduct" />
<strong>Boli Pink</strong>
<span class="price">$24.00</span>
</a>
Add to cart
</li> <li class="product ">
</li></ul><div class="clear"></div>
</div></section>
</div><!-- #main -->
.products li has a specificity of (0, 0, 1, 1)
a minimal higher specificity can be created with
ul.products li which has a specificity of (0, 0, 1, 2)
See this jsfiddle: http://jsfiddle.net/DAL9A/
.products li and you can use !important if it doesnt take. Try to load that after what your trying to override.
UPDATE*
Try just using ".product"
Actually just ready your comments. What are you trying to target? The image? If So you should get the width and height out of inline and apply it in CSS