I want to make navigation at the same level as h1 text and make it not movable and resizable. For now navigation is acting like random RWD, going below my h1 text, then changing display from left->right to top->bottom. I was trying to set ul position to static/absolute/fixed, nothing seems to work as I'd like.
JsFiddle example: https://jsfiddle.net/26tx3t3p/1/.
HTML:
<header>
<h1 class="logo"> myexamplesite</h1>
<nav class="primary">
<ul>
<li>info1/</li>
<li>info2/</li>
<li>info3</li>
</ul>
</nav>
</header>
CSS:
.logo{
font-size:36px;
font-weight:bold;
float: left;
display:inline-block;
}
a{
text-decoration:none;
}
.primary ul{
float:right;
display:inline-block;
}
.primary ul li{
float:left;
font-size:18px;
padding:10px 15px 0 0;
}
How to make navigation to be set at beggining position, after resizing window ??
Is there a way to do it, without putting stiff margin/width values ??
Do you mean something like that https://jsfiddle.net/26tx3t3p/3/
i added these css
header {
position:relative;
}
nav {
position:absolute;
right:0;
}
Related
How to click the navicon image in mobile phone (not hover) and it will show up a small container which has links. Here are my codings..
HTML
<div id="nav">
<ul class="menu">
<li> <a class="#"> LINK </a> </li>
<li> <a class="#"> LINK </a> </li>
<li> <a class="#"> LINK </a> </li>
<li> <a class="#"> LINK </a> </li>
</ul>
<img src="nav.png">
<div class="navimage">
<img src="twitter.png">
<img src="facebook.png">
</div>
</div>
CSS
#nav {
height:70px;
border-bottom:1px solid #FFF;
margin-bottom:20px;
padding:0;
max-width:95%;
margin:0 auto;
}
#nav-icon img {
display:none;
}
.menu {
float:left;
width:70%;
margin:0 auto;
}
.menu li {
display:inline;
}
.menu a {
padding:15px;
margin:15px 0;
display:inline-block;
text-align:center;
}
.menu a:hover {
color:#DEB887;
}
#nav a:hover {
text-decoration:none;
}
.navimage {
float:right;
margin:20px 0;
width:30%;
}
.navimage img {
width:30px;
height:30px;
margin:0 2px;
border-radius:50%;
-webkit-border-radius:50%;
-moz-border-radius:50%;
-ms-border-radius:50%;
-o-border-radius:50%;
float:right;
}
RESPONSIVE CSS
#media only screen and (min-width: 480px) and (max-width: 764px) {
#nav-icon img {display:inline-block;height:40px;margin-top:10px;margin-left:10px;cursor:pointer;}
#nav ul, #nav:active ul {
display:none;
position:absolute;
padding:15px;
background:#fff;
border: 3px solid #DEB887;
left:30px;
top:50px;
width:30%;
border-radius:0 0 3px 3px;
z-index:9999;
}
#nav:hover ul {display:block;}
#nav ul li a {width:100%;color:#000;padding:0;margin:10px 0;}
#nav ul li a:hover {color:#DEB887;}
}
Here is JSFIDDLE to check it out. The problem is I hover nav div everywhere and it shows menu. What I want is to click the navicon image and it will appear menu? Any ideas?
Thanks
You need a small bit of jQuery, which means including the library in your head and having a small piece of script in the head aswell.
First add this to the head:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
That loads the latest version of jQuery for you.
Next you need to add the jQuery code in to make the nav work. Its a simple 3 line code that checks its been clicked and then toggles the display on and off.
<script type="text/javascript">
$(document).ready(function() {
$('#nav-icon').click(function() {
$('ul.menu').toggle();
});
});
</script>
As you can see, it finds the id nav-icon and when its been clicked, runs a function which toggles the visibility of the ul.menu.
jsFiddle Demo: http://jsfiddle.net/3w63B/2/
If you go on the mozilla developer network (link) or go to the jQuery API pages (link) you can pick up the basics pretty quick. It only starts getting difficult when you start getting jumping right into the deepend of what it can all do.
Hope this helps fella.
What do you think this line of code does?
#nav:hover ul {display:block;}
Everytime you hover the nav anywhere the submenu will appear.
Instead of CSS use javascript / jQuery to make it appear on click.
$("#nav-icon").on("click", function() {
$(".menu").css("display","block");
});
Although above code isn't exactly what you want, because the submenu will stay forever. This will help you finding a solution by yourself ;). Coding is doing.
I got this problem which i can't figure out.
#menuUL{
font-size:32px;
padding:0;
}
#menuUL li:first-child{
list-style-type: none;
}
#menuUL li{
margin-left:30px;
/*display: list-item;*/
display:inline;
list-style-type:disc;
}
I have a horizontal menu, but i only want the first item to hide it's list style type, the rest needs to show the disc. However then i will put 2 display's in the same li which causes it to display vertically instead of horizontal.
UPDATE.
the html code
<div id="photoMenu">
<ul id="menuUL">
<li>ALL</li>
<li>ARCHITECTURE</li>
<li>PEOPLE</li>
<li>LEGO</li>
</ul>
Try floating the li instead
JSfiddle Demo
CSS
#menuUL{
font-size:32px;
padding:0;
}
#menuUL > li:first-of-type {
list-style-type: none;
}
#menuUL li{
float:left;
margin-left:35px;
}
I'm having trouble with a search box. There are two main issues that I'm having. Firstly, I have tried to create a search bar within a navigation bar and the search bar doesnt match the other elements within the navigation bar.
As you can see, the padding does not match the other elements and the size of the box is off by a couple of pixels.
Secondly, the search box looks fine when the page is maximised (besides the problems mentioned above). However, when the page is not maximised, it does this:
I know these are probably rookie errors and the code is probably sloppy but I'm a university student and this is my first HTML project. I am using XHTML 1.0 Transitional and CSS 2.0 as we arent allowed to use CSS3 or HTML 5 or any scripting languages. If someone could help me out, I'd greatly appreciate it!
This is the HTML code:
<div id="nav_bar">
<div id="inner_nav_bar">
<ul>
<li>home</li>
<li>phones</li>
<li>order</li>
<li>faq's</li>
<li>contact us</li>
<li id="search">Search: <input type="text" /> <input type="submit" value="Go!"></li>
</ul>
</div>
</div>
This is my CSS code:
#inner_nav_bar
{
text-align:center;
}
#nav_bar ul
{
list-style-type:none;
padding:0;
overflow:hidden;
}
#nav_bar li
{
display: inline;
}
#nav_bar a:link,a:visited
{
display:inline-block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#27c645;
padding:4px;
text-decoration:none;
text-transform:uppercase;
border-style:solid;
border-width:3px;
border-color:#0d6e1f;
text-align:center;
}
#search
{
display:inline-block;
font-weight:bold;
color:#FFFFFF;
background-color:#27c645;
padding:5px;
text-decoration:none;
text-transform:uppercase;
border-style:solid;
border-width:3px;
border-color:#0d6e1f;
text-align:center;
}
#nav_bar a:hover,a:active
{
background-color:#7A991A;
}
In your CSS, you're treating the #search list item very different from the other list items.
I changed many of the lines in the CSS around, so that most of the properties are now in li and don't have to be repeated in the other elements.
One problem was the a elements in the other list items, that had vertical padding. I replaced that with line-height.
#inner_nav_bar {
text-align:center;
}
#nav_bar ul {
list-style-type:none;
padding:0;
overflow:hidden;
}
#nav_bar li {
text-transform:uppercase;
display: inline-block;
white-space:nowrap;
color:#FFFFFF;
background-color:#27c645;
border:3px solid #0d6e1f;
text-align:center;
font-weight:bold;
line-height:1.66;
}
#nav_bar a {
display:inline-block;
width:120px;
color:#FFFFFF;
text-decoration:none;
padding:0 4px;
}
#search {
padding:0 4px;
}
#search input {margin:0;}
#nav_bar a:hover, #nav_bar a:focus, #nav_bar a:active {
background-color:#7A991A;
}
Another problem was the size of the input element. The only way I could get that right with any kind of browser consistency was to increase the line height. If that is not acceptable, you may have to set the height on the list items explicitly, and add overflow:hidden.
See result in jsFiddle.
PS you also had other errors: One input didn't end with />, which is mandatory for XHTML. And you had #nav_bar a:link,a:visited, which did not do what you wanted; you should hae written #nav_bar a:link, #nav_bar a:visited otherwise the style would have applied to all visited links, not just the ones in #nav_bar.
I'm creating a menu bar with ul li tags and the links are to close together how do I get them to have a bigger space between links?
Give margin on li element ...
<nav>
<ul>
<li><span>Home</span></li>
<li><span>Gallery</span></li>
<li class="last"><span>Map</span></li>
</ul>
</nav>
<style>
li{
display:inline-block;
background:blue;
width:100px;
height:20px;
text-align:center;
margin-right:15px; /* edit this margin to separate your elements*/
}
a{
text-decoration:none;
color:black;
display:block;
}
.last {margin-right:0px;}
</style>
http://jsfiddle.net/Tv7pA/
you can remove margin right from last element like top or with jQuery or with css li:last-child, li:nth-child(3) ... but best way is with jQuery or with class coz it is sup. in all browsers
The Preview, What others are saying tabs are stacked and right-aligned (wrong).
They should be horizontal and left-aligned.
It's displayed correctly in firefox,IE8.
What's the reason for this?
URL: http://www.learncentral.org/resource/view/59896
UPDATE
Related html here:
<div class="ed_tabs">
<ul class="ui-tabs-nav">
<li class="selected ui-tabs-selected">Preview</li>
<li>What others are saying...(0)</li>
</ul>
</div>
css:
.ed_tabs {
border-bottom:3px solid #3F79C2;
float:left;
width:100%;
}
.ed_tabs ul {
float:left;
list-style:none outside none;
margin:0.5em 0 0;
padding:0 0 0 1em;
}
li {
float:left;
padding:0 1px 0 0;
}
Not sure why IE7 is working differently, but I see that your CSS rule for
.ed_tabs ul li a
does a float:right to the anchor (A). Try changing this to float: left instead.