I want my navigation to look like this:
<icon> <icon> <icon>
Title Longer Title Title
Ideally, I want my code to look like:
<li>
<img src="images/icon.png" />
<a class="link_title">Title 1</a>
</li>
<li>
<img src="images/icon.png"/>
<a class="link_title">Title 2</a>
</li>
<li>
<img src="images/icon.png"/>
<a class="link_title">Title 3</a>
</li>
I already have it horizontal, but not sure how to get the link to appear right under the icon, without using a table, which I don't want to do. (Let me know if I must, though.)
li { text-align:center; }
li a.link_title { display:block; }
Also, you're closing your <a> tags with a </span>. This needs to be corrected:
<a class="link_title">Some Text</a>
try this:
li {
float:left;
text-align:center;
}
li a {
display:block;
}
li img {
margin:0 auto;
}
Related
Iam working in Jquery mobileI have an footer like this:
<div data-role="footer" data-position="fixed" data-id="footer" data-tap-toggle="false">
<div class="footer" data-role="navbar">
<ul>
<li>
<a href="#dashboard" data-icon="dashboard" class="footer-icons" id="icon-dashboard">
<span class="navbar-text">Dashboard</span>
</a>
</li>
<li>
<a href="#notifications" data-icon="progress" id="icon-progress" class="footer-icons">
<span class="navbar-text">Voortgang</span>
</a>
</li>
<li>
<a href="#map" data-icon="security" id="icon-security" class="ui-btn-active footer-icons">
<span class="navbar-text">Plattegrond</span>
</a>
</li>
<li>
<a href="#" data-icon="security" id="icon-security" class="footer-icons">
<span class="navbar-text">Securitycheck</span>
</a>
</li>
</ul>
</div>
</div>
I want to change the color of <span class="navbar-text"></span> when its parent is set to active I thought something like this:
.footer > .ui-btn-active > .navbar-text {
color: red!important;
}
But this is not working maybe someon could help me out on this?
The issue is because .ui-btn-active is not a child of .footer as the > requires - it's a grandchild. Remove that operator:
.footer .ui-btn-active > .navbar-text {
color: red !important;
}
Working example
Alternatively if you want to use the child selector, you need to explicity set the full hierarchy in the selector:
.footer > ul > li > .ui-btn-active > .navbar-text {
color: red !important;
}
Also note that the use of !important should be avoided at all costs. If you need to override a setting, make the selector more specific.
I like the :nth-child(n) selector:
a.ui-btn-active > span:nth-child(1) {
background: red;
}
I wanna make a menu very small, so i have the initial letter for each name and i add "focus" but what i want its to appear the full word.
ex:
css:
.menu:focus {
}
php:
<nav>
<li class="menu"><a href="home.php>h</a></li><br>
<li class="menu"><a href="galery.php>g</a></li>
</nav>
and so you simply see the menu like:
h
g
and if you click in h for ex. you would see:
home
g
how can i do it?
and then if click again go to the link page.
is it possible?
edit
php:
<nav>
<li>
<span class="m">
H
</span>
<span class="f">
<a class="menu" href="home.php">
Home
</a>
</span>
</li>
</span>
css:
nav li .f {
display: none;
}
nav li:hover .f {
display: inline;
background-color: #202020;
}
until here ok, you pass by and it shows the full word with the link, but the objective its not just pass by, its to click on it i just change hover to focus and it stops working.
also the hover ".m" display none its not working. it should switch isnt it possible ?
css:
nav li:focus .f {
display: inline;
background-color: #202020;
}
nav li: hover .m {
display: none;
}
Thanks
i have created fiddle for u do you want something like this .
<nav>
<li class="menu">
<a href="home.php">
<span class="test">h</span><span class="test2">ome</span>
</a>
</li>
<li class="menu">
<a href="home.php">
<span class="test">g</span><span class="test2">alery</span>
</a>
</li>
nav li a .test2{display:none}
nav li a:focus .test2, nav li a:hover .test2{display:inline}
OR if you want javascript solution here is code for u
html
<nav class="nav">
<li class="menu">
<a href="javascript:;" data-url="home.php">
<span class="test">h</span><span class="test2">ome</span>
</a>
</li>
<li class="menu">
<a href="javascript:;" data-url="gallary.php">
<span class="test">g</span><span class="test2">alery</span>
</a>
</li>
CSS
nav li.menu a .test2{display:none;}
nav li.menu a .test2.open{display:inline;}
Jquery
$(".nav>li>a").click(function(e) {
var trig = false;
var links = $(this).data("url");
$(this).children(".test2").addClass("open");
if(trig == false){
$(this).click(function(e) {
window.location.href = links;
});
}
});
http://jsfiddle.net/ismailfarooq/p667L2y0/
I have a sortable set of pictures, implemented with jQuery UI. I would like to have each of the pictures within a box and with a caption at the top. The boxes and their captions should not move when pictures are sorted. Is there an easy way to do this?
EDIT: I have been investigating a bit and I found an approach that could do the trick. It consists on locking down some items on their locations using
class: static
(see the second answer to this question) and this demo.
Unfortunately, when I insert images into the list, it does not work well anymore: demo.
It looks like what you need is a combination of draggable and droppables widgets rather than sortable. I'd call it "swappable" :P
You can achieve this by swapping the images on drop event as shown below:
$("#swappable img").draggable({
revert: "invalid",
zIndex: 1
});
$("#swappable .placeholder").droppable({
snap: true,
snapMode: "inner",
drop: function(event, ui) {
var $existing = $(this).find("img.ui-draggable");
if ($existing)
/* droppable already contain an image, append it to the parent of
dropped item. */
ui.draggable.parent().append($existing);
ui.draggable.css({ // reset the positioning applied by widget
top: 0,
left: 0
}).appendTo(this);
}
});
#swappable {
list-style-type: none;
margin: 0;
padding: 0;
}
#swappable li {
border: 1px solid black;
background-color: cream;
}
#swappable li span {
/*style anyway you want*/
}
#swappable li img {
width: 50px;
height: 50px;
}
#swappable li .placeholder {
display: inline-block;
width: 50px;
height: 50px;
margin: 5px;
background: #eee;
}
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<ul id="swappable">
<li>
<div class="placeholder">
<img src="http://i46.tinypic.com/2epim8j.jpg" />
</div>
<span>
Item Description 1
</span>
</li>
<li>
<div class="placeholder">
<img src="http://i49.tinypic.com/28vepvr.jpg" />
</div>
<span>
Item Description 2
</span>
</li>
<li>
<div class="placeholder">
<img src="http://i50.tinypic.com/f0ud01.jpg" />
</div>
<span>
Item Description 3
</span>
</li>
</ul>
The following little code did the trick:
HTML
<div class="sortableDiv">
<ul id="sortable">
<li class="ui-state-default">
<span class="ui-icon ui-icon-arrowthick-2-n-s">
<image src="http://t1.gstatic.com/images?q=tbn:ANd9GcQ0wAliOPQ_saAtWhNhhPajglDjIZVrnO19MXaYS0Doum-yztJ_CA"/>
</span>
</li>
<li class="ui-state-default">
<span class="ui-icon ui-icon-arrowthick-2-n-s">
<image src="http://t1.gstatic.com/images?q=tbn:ANd9GcQ0wAliOPQ_saAtWhNhhPajglDjIZVrnO19MXaYS0Doum-yztJ_CA"/>
</span>
</li>
<li class="ui-state-default">
<span class="ui-icon ui-icon-arrowthick-2-n-s">
<image src="http://t1.gstatic.com/images?q=tbn:ANd9GcQ0wAliOPQ_saAtWhNhhPajglDjIZVrnO19MXaYS0Doum-yztJ_CA"/>
</span>
</li>
</ul>
</div>
<div class="contentDiv">
<ul id="content">
<li class="ui-state-default">
Item Description 1
</li>
<li class="ui-state-default">
Item Description 2
</li>
<li class="ui-state-default">
Item Description 3
</li>
</ul>
</div>
CSS
.sortableDiv,.contentDiv {
float:left;
}
#content {
list-style-type:none;
line-height:88px;
margin:0;
padding:0;
}
#sortable {
list-style-type:none;
margin:0;
padding:0;
}
#sortable li {
padding-left:2em;
width:65px;
margin:5px;
}
#sortable li span {
position:relative;
margin-left:-1.3em;
}
image {
height:100px;
width:100px;
}
JQuery
$(function() {
$( "#sortable" ).sortable();
});
And some CSS given in the demo link.
DEMO
Updated DEMO
Updated DEMO-1
Hello I am trying to make a website but my menu bar is not doing what it should. This is what it should look like:
http://i.stack.imgur.com/KDvwo.png
But instead it looks like this:
http://i.stack.imgur.com/Y1Ya8.png
Here is my code:
HTML
<div class="wrapper">
<header>
<h1>Colve</h1></div>
<nav>
<ul class="menu1">
<li><a class="button" href="#">Home</a></li>
<li><a class="button" href="#about">About</a></li>
<li><a class="button" href="#downloads">Downloads</a>
<li><a class="button" href="invasion.html">INVASION</a></li>
</li><li><a class="button" href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<section id="about">
<h1>About-Colve</h1>
<p>Colve is a company that gives you the things you want in one place</p>
<p>Created by Bradley Beeke</p>
</section>
</div>
CSS
html {
font:12pt Lato, sans-serif;
min-height:100%;
background-image:linear-gradient(45deg,#3498db,#2ecc71);
}
body{margin:0px;}
header{
background-color:white;
Color: #FFDF00;
float:left;
padding-left:5px;
display:block;
}
nav {
background-color:white;
float:right;
padding-right:5px;
height:60px;
display:block;
width:100%;
float:right;
}
nav a {
text-decoration:none;
list-style:none;
color:#FFDF00;
font-size:20px;
padding:8px;
}
nav li:hover, a:hover {color:#998100;}
li{display:inline;}
section { margin-bottom: 1000px; padding-top: 150px; float: left; }
Please can you help me!
Working DEMO
<div class="wrapper">
<header>
<h1>Colve</h1> <!-- remove the </div> present here -->
<nav>
<ul class="menu1">
<li><a class="button" href="#">Home</a></li>
<li><a class="button" href="#about">About</a></li>
<li><a class="button" href="#downloads">Downloads</a>
<li><a class="button" href="invasion.html">INVASION</a></li>
</li><li><a class="button" href="contact.html">Contact</a></li>
</ul>
</nav>
In the nav css, make width to be auto
nav {
background-color:white;
float:right;
padding-right:5px;
height:60px;
display:block;
width:auto;
float:right;
}
Add width: 100%; in header {} because currently the header is not properly aligned.
The HTML is not well constructed. Please remove the extra and from the code.
Well, right off the bat your HTML is invalid.. I see two immediate problems.
First, the closing tag after your closing H1 tag cannot be there (it looks like that was just an accident anyway).
<div class="wrapper">
<header>
<h1>Colve</h1></div>
Second, the closing that starts this line doesn't make any sense.. Remove it.
</li><li><a class="button" href="contact.html">Contact</a></li>
Oh, I lied.. there's a 3rd.. There's no closing tag for this element.
<li><a class="button" href="#downloads">Downloads</a>
Other than that, your HTML looks fine to me at a quick look, but in the future you may want to bookmark this site:
http://validator.w3.org/#validate_by_input
After you correct those problems with your HTML, update your question if you're still having problems.
In simple term i would like to achieve something we have on stack overflow top navigator where the color of the button which is active is different BUT using CSS only NOT JavaScript ?
But the a:active does not seems to be working as expected.
I saw some very common examples where this is done by assigning the class to active element in the markup from server or client side. Is that possible only using the CSS ?
<HTML>
<HEAD>
<TITLE>Its Nav</TITLE>
<STYLE type="text/css">
div {
width:200;
}
ul {
list-style:none;
}
ul li a {
padding:2 4 2 4;
border:1px solid blue;
display:block;
text-decoration:none;
}
ul li a:active {
color:green;
}
ul li a:hover {
color:red;
}
ul li a:link {
color:gray;
}
</STYLE>
</HEAD>
<BODY>
<div>
<ul>
<li><a href="#" >link one</a></li>
<li><a href="#" >link two</a></li>
<li><a href="#" >link three</a></li>
<li><a href="#" >link four</a></li>
<li><a href="#" >link five</a></li>
<li><a href="#" >link six</a></li>
<li><a href="#" >link seven</a></li>
<li><a href="#" >link eight</a></li>
<li><a href="#" >link nine</a></li>
<li><a href="#" >link ten</a></li>
</ul>
<div>
</BODY>
</HTML>
If I understand what you want to do, using a:active won't help you. The css pseudo-class active shows when the link is clicked (exactly when it is clicked and before the next page loads). After that, it changes to visited.
Edit: I didn't see that you wanted an exclusively CSS solution first. I believe that what you need is something that has already been answered before. Check How to set a active link as default when page first time load an see if it helps :)
Since you don't want a JavaScript solution, I suggest creating a new class for the active <li> tag in your navigation bar. You can do that dynamically (for example with php) or manually for each page within the html.
As other people already commented, it'd be easier to give you an answer that you can apply directly, if you posted your code.