I have 2 groups of code and a rather easy question for most people, nevertheless, a question.
There is this piece of code ready made with working css implemantation:
<div class="subTopHolder">
<ul class="language">
<li>TR</li>
<li>EN</li>
</ul>
And it breaks as soon as I turn EN into a hyperlink. Resulting code:
<div class="subTopHolder">
<ul class="language">
<li>TR</li>
<li>EN</li>
</ul>
In this case, rather than standing side by side with a margin, they are stacked vertically.
Accompanying css code is:
div.subTopHolder
{
width:1002px;
height:201px;
margin:auto auto;
padding:0 12px;
position:relative;
overflow:hidden;
background:url(../images/bck-bannerHolder.jpg) no-repeat center top;
}
ul.language
{
float:right;
clear:left;
padding:2px 0;
margin-bottom:4px;
cursor:default;
}
ul.language li
{
display:inline;
background:#f8c180;
padding:2px 4px;
font-size:10px;
cursor:default;
text-shadow:0 1px white;
border-radius:2px;
}
ul.language li a
{
font-size:10px;
display:block-inline;
background:#fff;
color:#000;
text-decoration:none;
margin:-2px -4px;
padding:2px 4px;
border-radius:2px;
transition:all .5s;
-moz-transition:all .5s;
-webkit-transition:all .5s;
}
ul.language li a:hover
{
box-shadow:1px 1px 8px 0px black;
There are two things wrong here:
First, your html syntax is broken. The correctly formed link should be:
EN
You've applied the wrong style to ul.language li. Instead of display: inline; give it display: inline-block;.
set ul.language li to display : inline-block or float: left
ul.language li
{
// with ie hack
display:inline;
float : left;
zoom : 1;
}
or
ul.language li
{
*display : inline;
zoom : 1;
display:inline-block;
}
It should be
English
Related
I'm developing my web design recently, I tried to use as much css as I can without javascript. Problem came when I'm making my navigation menu which should stay on top. Here is a copy of my code :
ul {
background: rgba(37,39,44,.80);
list-style-type:none;
margin : 0;
padding: 0;
overflow:visible;
font-family:Kreon;
min-width:1349px;
width:100%;
top:0;
position:fixed;
border-bottom: 5px solid #22A85B;
}
li {
float : right;
}
li a{
display:block;
color : white;
text-align:center;
padding: 15px 20px 15px 20px;
text-decoration :none;
border-right:0.5px solid #22a85b;
transition: 0.3s all;
}
li a:hover {
background:#22a85b;
}
.dropdown-arrow {
position:relative;
top:1px;
display:inline-block;
width:0;
height:0;
margin-left:5px;
border: 4px solid transparent;
border-top-color:#fff;
}
.dropdown {
float:right;
position:relative;
display:inline-block;
color: white;
text-align:center;
padding: 15px 20px 15px 20px;
cursor:pointer;
border-right:1px solid #22A85B;
}
.dropdown:hover{
background:#22a85b;
}
.dropdown:focus {
pointer-events:none;
background:#eee;
color:#000;
}
.dropdown-content {
position:absolute;
background-color:#eee;
min-width:150px;
z-index:1;
opacity:0;
visibility:hidden;
transition: 0.2s linear;
margin-top:36px;
margin-left:-50px;
border : 1px solid #bbb;
border-top:none;
}
.dropdown-content a{
text-align:right;
color: black;
font-family:kreon;
text-decoration:none;
padding: 10px 15px 10px 15px;
display:block;
transition: 0.1s linear;
border-bottom: 1px solid #20D23F;
}
.dropdown-content a:hover{
background: #22a85b;
color:#fff;
}
.dropdown:focus .dropdown-content{
opacity:1;
visibility:visible;
pointer-events:auto;
}
.dropdown:focus .dropdown-arrow{
border: 4px solid transparent;
border-bottom-color:#000;
margin-bottom : 4px;
}
<ul>
<li style ="float:left; margin-left:150px; border-left:1px solid #22A85B;">Logo Here</li>
<li style="margin-right:60px;">About Us</li>
<li>Hire Us!</li>
<div tabindex="0" class="dropdown">
<li class="fol">Follow Us <span class="dropdown-arrow"></span></li>
<div class="dropdown-content">
Twitter
Facebook
Pinterest
</div>
</div>
<li>Be Our Designer!</li>
<li>Portfolio</li>
<li style="border-left:1px solid #22A85B;">How Do We Work</li>
</ul>
So to make the menu stay on top, I put position : fixed; on my CSS. But when I resize the browser, the floating menu move to the bottom of some menu. Then I tried to set the min-width only to find out that some of my menu were missing when I resize my browser (can't see it even though I'm scrolling to the left) due the position : fixed.
Any help from you guys would be appreciated. thanks!
I cannot reproduce the described problem when resizing my browser.
Edit: I think I do now understand what you mean (the line break in the menu when you reduce the screen width). You can't change that, only if you change the menu on smaller screen sizes bar like Bootstrap does (see the example below)
See https://jsfiddle.net/bdtbz74f/ (Fiddle of your code)
I also added
body {
margin-top: 60px;
}
ul {
width:100%;
top:0;
left:0;
right:0;
position:fixed;
}
and remove the min-width. The margin-top on the body prevents the content from hiding behind your navbar.
Tip: Take a look at the CSS code of Bootstraps Fixed Top Navbar Example
basically I have this navigation menu, made with a list. Runs perfectly on Firefox but in Chrome and IE it's only working on the first page, all the others show like in this fiddle here (yeah it's not working on fiddle aswell).
<div id="nav">
<ul>
<li><a id='0'>Entry0</a></li>
<li><a id='1'>Entry1</a></li>
<li><a id='2'>Entry2</a></li>
</ul>
#nav {
background-color:#31353e;
width:100%;
border-bottom:5px solid #d9d9d9;
height:55px;
}
#nav ul {
list-style-type: none;
}
#nav ul li a {
color:white;
font-family:'Roboto', sans-serif;
font-style:normal;
font-size:14px;
font-weight:300;
text-transform: uppercase;
text-decoration:none;
padding:18px 20px 18px 20px;
border-bottom:5px solid #d9d9d9;
}
#nav ul li {
float:left;
margin-top:16px;
}
#nav li a:hover {
cursor:pointer;
border-bottom:5px solid #fafafa;
-webkit-transition:border-bottom-color 0.3s ease-in;
-moz-transition:border-bottom-color 0.3s ease-in;
transition:border-bottom-color 0.3s ease-in;
}
/* active item */
body#0 a#0, body#1 a#1, body#2 a#2, body#3 a#3 {
border-bottom:5px solid #fafafa;
}
http://jsfiddle.net/blackice856/7p2p29mj/12/
Ok guys, looks like the problem was an 'em' tag in the html code. My editor automatically added it, it is solved now.
How can it be that there are so many answers on this topic and I still can't figure this out? I've been fiddling with the CSS on jsfiddle for hours and I still don't understand why my navigation bar won't center without going into a vertical list.
The html:
<div class='nav'>
<ul class='menu' id='menu'>
<li><a expr:href='data:blog.homepageUrl'>home</a></li>
<li><a class='drop-ctg' href='a'>MAKEUP</a>
<ul>
<li><a href='a'>EYES</a></li>
<li><a href='a'>LIPS</a></li>
<li><a href='a'>FACE</a></li>
</ul>
</li>
<li><a href='a'>SKINCARE</a></li>
<li><a href='a'>LIFESTYLE</a></li>
<li><a href='a'>DIY</a></li>
<li><a href='a'>CONTACT</a></li>
</ul>
</div>
and the CSS, I think:
*{
margin:0;
padding:0;
outline:0;
}
.nav {
width:950px;
height:auto;
border-bottom:1px solid #eee;
margin:10px auto 5px;
display:inline-block;
}
.menu {
width:auto;
list-style:none;
font:$pagenavifont;
text-align:center;
margin:0 auto;
}
.menu a {
float:left;
color:#999;
text-decoration:none;
text-transform:uppercase;
width:auto;
line-height:36px;
padding:0 20px;
}
.menu a:hover,li.menuhover a{
color:#111;
}
.menu li {
position:relative;
float:left;
width:auto;
}
.menu li:last-child {
background:none;
}
.menu ul{
display:none;
position:absolute;
top:36px;
left:0;
background:#fbfbfb;
display:none;
list-style:none;
}
.menu ul li{
float:none;
border-top:1px solid #e3e3e3;
border-right:1px solid #e3e3e3;
border-left:1px solid #e3e3e3;
width:auto;
background:none;
}
.menu ul li:last-child {
border-bottom:1px solid #e3e3e3
}
.menu ul li a{
float:none;
display:block;
background:none;
line-height:36px;
min-width:137px;
width:auto;
text-align:left;
padding-left:10px;
color:#444;
}
.menu ul li a:hover{
background:#fdfdfd;
color:#777;
}
I just started my blog today, and so far I've learned that getting rid of floats and putting inline-block might help, but there are so many that I really don't get which code applies to what. Any help is appreciated!
Here's the fiddle link: http://jsfiddle.net/vFDrV/9/
Here's the link to my blog: http://theprettyfoxes.blogspot.com/
if I understand correctly your question, its quite simple.
Add the follow code to your menu css class.
.menu { /* applying to a ul element */
/* ... your code ... */
display: inline-block;
}
You can read more about this at the Mozilla Docs
https://developer.mozilla.org/en-US/docs/Web/CSS/display
What it's going on when we add "inline-block" is this:
The element generates a block element box that will be flowed with
surrounding content as if it were a single inline box (behaving much
like a replaced element would)
Thats all!
remove float from following:
.menu a {
/*float: left;*/
color: #999;
text-decoration: none;
text-transform: uppercase;
width: auto;
line-height: 36px;
padding: 0px 20px;
}
.menu li {
position: relative;
/*float: left;*/
width: auto;
display: inline; /* <- add this */
}
Roll over the text and the blue block below moves along the blue line. If I do it via position relative and set the blue block to top 20px, it also moves the text down.
Is there a way I can do this purely in CSS, or should I use a background image with the top half set as a transparent gif and the bottom blue?
The code I've tried so far is:
#menu ul {
list-style:none;
margin:0;
padding:10px;
text-align:center;
}
#menu ul li {
display:block;
float:left;
list-style:none;
margin-right: 40px;
font-family: Arial, Helvetica, sans-serif;
color: #FFF;
font-size: 14px;
padding-top: 5px;
padding-bottom: 5px;
height: 39px;
}
#menu ul li a {
display:block;
margin:0px;
padding:0px;
color:#FFF;
text-decoration:none;
font-family: Arial, Helvetica, sans-serif;
margin-right: 5px;
margin-left: 5px;
padding-left: 10px;
padding-right: 10px;
}
#menu ul li a:hover {
color:#fff;
margin-bottom:5px;
padding-bottom:5px;
}
#menu ul li a.active,
#menu ul li a.active:hover {
color:#fff;
background-color: #0488C5;
font-weight:bold;
}
I am still learning so excuse any mistakes!
Click here for a demo.
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
</ul>
ul {
width: 100%;
border-bottom: 3px solid blue;
overflow: hidden;
}
li {
float: left;
margin: 0 20px 0 20px;
}
li a {
border-bottom: 20px solid #fff;
display: block;
}
li a:hover, .active {
border-bottom: 20px solid blue;
}
You can then use the hover state for another class called something like "active" that you can apply when on that page.
You should be able to tweak this example to suit your needs.
You don't need any images. CSS is more than capable of doing this for you.
....................................
Live demo
Hi now this is possible used to after in css
as a simple example is this
HTML
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
Css
ul{
list-style:none;
border-bottom:solid 10px blue;
}
li{
display:inline-block;
vertical-align:top;
background:red;
}
li a{
text-decoration:none;
display:inline-block;
vertical-align:top;
position:relative;
padding-left:10px;
padding-right:10px;
padding-bottom:10px;
}
li:hover a:after{
content:'';
position:absolute;
left:0;
right:0;
bottom:0;
height:10px;
background:blue;
}
LIve demo
Place three anchors in an unordered list and have them displayed in-line by setting the list display to none an floating the list items. Further add an empty span to each anchor which you can style with the :hover pseudo selector.
Learn CSS, its fun!
I have a horizontal list (for a nav bar) and i want an individual list item to be multilined. I tried using a <br /> but that causes the entire list to skip a line
Here's what i got for html :
<ul class="nav_list">
<li><a href="#">Home<a></li>
<li><a href="#">Bar/Bat Mitzvah<br />Tutoring<a></li>
<li><a href="#">Early <br />Childhood<a></li>
<li><a href="#">Home<a></li>
<li><a href="#">Home<a></li>
</ul>
and css:
.nav_list {
float:right;
height:30px;
margin-top:55px;
width:510px;
}
.nav_list li {
display:inline;
list-style-type:none;
}
.nav_list li a {
font-size:18px;
font-family: arial;
color:#b64366;
text-decoration:none;
padding:4px 4px 5px 10px;
background-image:url('../images/nav_divider.png');
background-repeat:no-repeat;
background-position:right;
font-weight:bold;
cursor:pointer;
}
And this is what it should look like (photoshop):
Any suggestions?
Here is your solution: http://jsfiddle.net/3jWwH/
The Html had some errors, like the 'a' tag wasn't ended correctly '/a'.
'br /' works fine, you just have to add float:left to '.nav_list li'
Also I think you should apply padding to 'li' instead of 'a'.
Is this correct?
You can set a width to each of the list elements to constrain them to a certain width. This will cause the words to split to multiple lines.
.nav_list li a {
width: 100px;
}
Then add a bottom border to make the underline on hover.
.nav_list li :hover {
border-bottom: 1px solid #b64366;
}
I think this is what you want:
http://jsfiddle.net/zXzXn/1/
CSS:
.nav_list {
float:right;
margin-top:55px;
}
.nav_list li {
display:inline-block;
list-style-type:none;
text-align:center;
margin:0 10px 0 0;
}
.nav_list li a {
font-size:18px;
font-family: arial;
color:#b64366;
text-decoration:none;
padding:4px 10px 5px 10px;
background-image:url('../images/nav_divider.png');
background-repeat:no-repeat;
background-position:right;
font-weight:bold;
cursor:pointer;
display:block;
}
.nav_list li a:hover{
border-bottom:2px solid #b64366;
}