CSS - Move text without moving block

CSS - Move text without moving block - html

I style few things on place i want to, things looks cool but i need to move a short text inside a "buble". To make it looks like:
But atm it looks like :
My CSS:
#news #right ul li{
list-style-position: inside; /* Bodka v novom riadku vo vnutry */
list-style-type: none; /* bez bodky */
background-image: url("images/black_bar.png");
background-repeat: repeat-x;
color: #898989;
height:45px;
width: 569px;
line-height: 45px;
border 1px;
border-color: #898989;
position: relative;
right: 40px;
}
#news #right ul li:hover{
list-style-position: inside; /* Bodka v novom riadku vo vnutry */
list-style-type: none; /* bez bodky */
background-image: url("images/blue_bar.png");
background-repeat: repeat-x;
color: #FFFFFF;
height:45px;
width: 569px;
line-height: 45px;
border 1px;
border-color: #898989;
position: relative;
right: 40px;
}
#news #right ul li a:visited{
color: #898989;
}
#news #right ul li a:active{
color: #898989;
}
#news #right ul li a:link{
color: #898989;
}
#news #right ul{
padding 0px auto;
margin: 0px auto;
}
.newsheading{
background-image: url("images/cs_icon.png");
background-repeat: no-repeat;
margin-left: 20px;
padding-left: 30px;
margin-top: 10px;
height: 22px;
line-height: 22px;
display: inline-block;
}
#news #right ul li:hover .newsheading{
color: #FFFFFF;
}
#news #right ul li .blue-arrow{
background-image: url("images/blue_arrow.png");
background-repeat: no-repeat;
width: 31px;
height: 46px;
position: absolute;
right: 568px;
display: none;
}
#news #right ul li:hover .blue-arrow{
display: inline-block;
}
#news #right ul li .balloon{
width: 32px;
height: 27px;
background-image: url("images/white_buble.png");
margin-left: 250px;
display: none;
}
#news #right ul li:hover .balloon{
display: inline-block;
vertical-align: middle;
color: #1d5f97;
}
#news #right ul li .blueballoon{
width: 32px;
height: 27px;
background-image: url("images/blue_buble.png");
display: inline-block;
margin-left: 250px;
vertical-align: middle;
text-align: center;
color: #FFFFFF;
}
#news #right ul li:hover .blueballoon{
display: none;
vertical-align: middle;
}
My HTML Looks like:
<span id="right">
<ul>
<li><span class="blue-arrow"></span><span class="newsheading">Gamesites má nový web ou jeeee!</span><span class="blueballoon">10</span><span class="balloon">10</span></li>
<li><span class="blue-arrow"></span><span class="newsheading">Gamesites má nový web ou jeeee!</span><span class="blueballoon">10</span><span class="balloon">10</span></li>
<li><span class="blue-arrow"></span><span class="newsheading">Gamesites má nový web ou jeeee!</span><span class="blueballoon">10</span><span class="balloon">10</span></li>
<li><span class="blue-arrow"></span><span class="newsheading">Gamesites má nový web ou jeeee!</span><span class="blueballoon">10</span><span class="balloon">10</span></li>
<li><span class="blue-arrow"></span><span class="newsheading">Gamesites má nový web ou jeeee!</span><span class="blueballoon">10</span><span class="balloon">10</span></li>
</ul>
</span>
The text in bubles are moved out and i need to change it, is here somebody who can help me with that? Also i have problem with change text color when hover up, even if i set on #FFFFFF in hover:newsheading
Live preview can be find on:
http://funedit.com/andurit/try2/
Thanks for reading this post :)

#news #right ul li .blueballoon {
line-height: 24px;
}

Related

Mozilla Float Bug in XHTML Strict 1.0/CSS

I'm working on a project with multiple columns. The lay-out displays correctly in Chrome, IE, Opera, even Konqueror, but not in Firefox. I'm currently using Firefox 37.0.1.
The issue I'm having is that all of my div's overlap atop the background image at the top of the page when opening in Mozilla. I'd like to correct this, so that it displays as it does in Chrome, Konqueror, etc.
I've also attached images to visualize the issue.
(CORRECT DISPLAY)
(INCORRECT DISPLAY
EDIT
http://i57.tinypic.com/fp58n7.jpg
In this final image, I've applied a suggested solution of using
<div style="clear:both;"></div>
to clear the parent div of its floats, but I'm not able to get it to work the way I want it to.
Here's my CSS Code:
/* ORGANIZATION: CAL WATER WARS
AUTHOR: GEOFF HOWARD
LAST REVISED: 4/13/201 */
/* VIEWPORT RENDERING */
/* background image auto-scaling */
html {
height: 100%;
background: #99afd6;
}
body {
height: 100%;
margin: 0 auto;
background-color: #0078c4;
font-family: verdana;
font-size: .9em;
background-image: url(content.jpg);
background-repeat: no-repeat;
background-position: 320px 24px;
}
/*this creates the slow fade affect on all links */
a {
-webkit-transition:all .5s;
}
/* END VIEWPORT RENDERING */
/* LAYOUT SETUP */
/* content center + page wrapping */
#contentwrap {
width: 1024px;
height: auto;
margin: 0 auto;
/*padding-top: 200px;*/
}
/* water droplet navigation cfg */
div#sidenav {
clear: both;
padding-top: 100px;
width: 128px;
margin-left: auto;
margin-right: auto;
padding-right: 50px;
}
/* nav link transition setup */
#sidenav ul {
list-style-type: none;
}
#sidenav li a {
display: block;
background: url(water.png); /* free stock icon copyright: http://www.elegantthemes.com/ */
background-repeat: no-repeat;
background-position: center;
width: 128px;
height: 128px;
}
#sidenav li a:hover {
color: #fff;
background: url(waterhover.png); /* free stock icon copyright: http://www.elegantthemes.com/ */
background-repeat: no-repeat;
background-position: center;
width: 128px;
height: 128px;
}
/* menu frame cfg */
div#menubox {
padding-top: 200px;
width: 300px;
margin: 0px;
float: left;
height: 100%;
/*background-color: #4f5d73;*/
}
div#menubox p {
text-indent: 5em;
}
div#menubox h2 {
text-align: center;
color: #77b3d4;
text-decoration: none;
}
div#menubox h2 a:link {
text-decoration: none;
}
div#menubox h2 a:visited {
color: #77b3d4;
text-decoration: none;
}
div#menubox h2 a:hover {
color: #4f5d73;
}
/*drop down menu cfg, learned from a tutorial found at www.csswizardry.com */
#menu {
list-style: none;
font-weight: bold;
margin-bottom: 10px;
float:left;
width: 100%;
position: relative;
z-index: 5;
}
#menu li{
float: left;
margin-right: 10px;
position: relative;
text-align: center;
color: #c0d8f1;
}
#menu a {
display: block;
padding: 5px;
color:#4973AB;
background: #FFF;
text-decoration: none;
text-align: left !important;
}
#menu a:hover {
color: #4973AB;
background:#DBE9EC;
text-decoration: underline;
}
#menu ul{
background: #fff;
background: rgba(255,255,255,0);
list-style:none;
position:absolute;
left:-9999px;
}
#menu ul li{
padding-top: 1px;
float:none;
}
#menu ul a{
white-space:nowrap;
}
#menu li:hover ul{
left:0;
}
#menu li:hover a{
background:#DBE9EC;
text-decoration:underline;
}
#menu li:hover ul a{
text-decoration:none;
}
#menu li:hover ul li{
background-color: #fff;
color: #4f5d73;
}
#menu li:hover ul li a:hover{
background:#333;
}
/* story frame cfg */
div#storybox {
margin: 0px;
margin-left: 304px;
padding-left: 20px;
text-indent: 3em;
width: 700px;
background-color: rgba(119,179,212,0.7);
min-height: 100px;
max-height: 500px;
border-top: groove;
border-left: groove;
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
border-color: #fff;
overflow-y:scroll;
overflow-x:hidden;
color: #fff;
}
div#storybox h2 {
color: #fff;
text-align: center !important;
text-decoration: underline;
}
div#storybox h3 {
color: #d1edff;
text-align: center !important;
font-style: italic;
}
div#storybox a:link {
color: #0059FF;
text-decoration: none;
font-size: 1.3em;
}
div#storybox a:visited {
color: #0059FF;
text-decoration: none;
}
div#storybox a:hover {
color: #FFA500;
text-decoration: none;
}
/* begin scrollbar configuration, learned from stackoverflow forums */
#storybox {
scrollbar-face-color: #009cfe;
scrollbar-shadow-color: #FFFFFF;
scrollbar-highlight-color: #009cfe;
scrollbar-3dlight-color: #009cfe;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-arrow-color: #009cfe;
}
#storybox::-webkit-scrollbar {
width: 10px;
}
#storybox::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(255,255,255,1);
-webkit-border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
#storybox::-webkit-scrollbar-thumb {
-webkit-border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
background: #009cfe;
-webkit-box-shadow: inset 0 0 1px rgba(255,255,255,1);
}
/* end scrollbar configuration */
/* top navigation cfg */
div#topnav {
color: #fff;
width: 1024px;
font-size: 2em;
font-family: sans-serif;
}
div#topnav ul {
list-style-type: none;
float: right;
}
div#topnav ul li {
display: block;
padding: 10px;
}
div#topnav ul li a:link {
color: #fff;
text-decoration: none;
}
div#topnav ul li a:visited {
color: #fff;
}
div#topnav ul li a:hover {
color: #4f5d73;
background-color: #fff;
}
/* END LAYOUT SETUP */
And lastly, my (X)HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- ORGANIZATION: CAL WATER WARS
AUTHOR: GEOFF HOWARD
LAST REVISED: 4/13/2015
-->
<head>
<title>California Water Wars</title>
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<link href="test.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js"></script>
<![endif]-->
</head>
<body>
<div id="contentwrap">
<div id="topnav">
<ul>
<li>
resources
</li>
<li>
policies
</li>
<li>
sanitation
</li>
</ul>
</div>
<div id="menubox">
<h2>
Editors
</h2>
<ul id="menu">
<li>
John Howard
<ul>
<li>
Available Stories
</li>
<li>
A Grain of Salt
</li>
<li>
Despite Drought, Water Conservation Not a Priority
</li>
</ul>
</li>
</ul>
<div id="sidenav">
<ul>
<li>
</li>
</ul>
</div>
</div>
<div id="storybox">
<h2>
Who We Are
</h2>
<p>
California Water Wars offers a snapshot of water policy and politics in California. We are a professional news team with experience covering California water issues and government, including the Legislature, the bureaucracy and the lobbying community.</p>
<p>
Since statehood – before, in fact – disputes over water have defined California; north and south, inland and coastal. The mission of California Water Wars is to inform the public and policy makers about California water issues and to suggest solutions to the problems.
</p>
</div>
</div>
</body>
</html>

Hm, nested floats. Part of the problem is caused by the clear: both inside the #menubox, which is itself floating. Firefox doesn't handle that very well. You can't really clear a floating element inside itself, only after its end. So at first I thought the solution would be to include a clear: right on #storybox, and also to change the clear: both on #sidenav to clear:right.
However, that won't work, because of those nested floats.
Therefore, your best bet is to take the #menubox out of the flow by positioning it absolutely.
#contentwrap {
(...)
position:relative; /* needed as container for abs positioning */
}
div#menubox {
(...)
position:absolute;
left:0 top:0;
}
div#storybox {
(...)
clear:right; /* and you do need this. */
}
/* ORGANIZATION: CAL WATER WARS
AUTHOR: GEOFF HOWARD
LAST REVISED: 4/13/201 */
/* VIEWPORT RENDERING */
/* background image auto-scaling */
html {
height: 100%;
background: #99afd6;
}
body {
height: 100%;
margin: 0 auto;
background-color: #0078c4;
font-family: verdana;
font-size: .9em;
background-image: url(content.jpg);
background-repeat: no-repeat;
background-position: 320px 24px;
}
/*this creates the slow fade affect on all links */
a {
-webkit-transition:all .5s;
}
/* END VIEWPORT RENDERING */
/* LAYOUT SETUP */
/* content center + page wrapping */
#contentwrap {
width: 1024px;
height: auto;
margin: 0 auto;
/*padding-top: 200px;*/
position:relative;
}
/* water droplet navigation cfg */
div#sidenav {
padding-top: 100px;
width: 128px;
margin-left: auto;
margin-right: auto;
padding-right: 50px;
}
/* nav link transition setup */
#sidenav ul {
list-style-type: none;
}
#sidenav li a {
display: block;
background: url(water.png); /* free stock icon copyright: http://www.elegantthemes.com/ */
background-repeat: no-repeat;
background-position: center;
width: 128px;
height: 128px;
}
#sidenav li a:hover {
color: #fff;
background: url(waterhover.png); /* free stock icon copyright: http://www.elegantthemes.com/ */
background-repeat: no-repeat;
background-position: center;
width: 128px;
height: 128px;
}
/* menu frame cfg */
div#menubox {
position:absolute;
left:0 top:0;
padding-top: 200px;
width: 300px;
margin: 0px;
height: 100%;
/*background-color: #4f5d73;*/
}
div#menubox p {
text-indent: 5em;
}
div#menubox h2 {
text-align: center;
color: #77b3d4;
text-decoration: none;
}
div#menubox h2 a:link {
text-decoration: none;
}
div#menubox h2 a:visited {
color: #77b3d4;
text-decoration: none;
}
div#menubox h2 a:hover {
color: #4f5d73;
}
/*drop down menu cfg, learned from a tutorial found at www.csswizardry.com */
#menu {
list-style: none;
font-weight: bold;
margin-bottom: 10px;
float:left;
width: 100%;
position: relative;
z-index: 5;
}
#menu li{
float: left;
margin-right: 10px;
position: relative;
text-align: center;
color: #c0d8f1;
}
#menu a {
display: block;
padding: 5px;
color:#4973AB;
background: #FFF;
text-decoration: none;
text-align: left !important;
}
#menu a:hover {
color: #4973AB;
background:#DBE9EC;
text-decoration: underline;
}
#menu ul{
background: #fff;
background: rgba(255,255,255,0);
list-style:none;
position:absolute;
left:-9999px;
}
#menu ul li{
padding-top: 1px;
float:none;
}
#menu ul a{
white-space:nowrap;
}
#menu li:hover ul{
left:0;
}
#menu li:hover a{
background:#DBE9EC;
text-decoration:underline;
}
#menu li:hover ul a{
text-decoration:none;
}
#menu li:hover ul li{
background-color: #fff;
color: #4f5d73;
}
#menu li:hover ul li a:hover{
background:#333;
}
/* story frame cfg */
div#storybox {
clear:right;
margin: 0px;
margin-left: 304px;
padding-left: 20px;
text-indent: 3em;
width: 700px;
background-color: rgba(119,179,212,0.7);
min-height: 100px;
max-height: 500px;
border-top: groove;
border-left: groove;
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
border-color: #fff;
overflow-y:scroll;
/*overflow-x:hidden;*/
color: #fff;
}
div#storybox h2 {
color: #fff;
text-align: center !important;
text-decoration: underline;
}
div#storybox h3 {
color: #d1edff;
text-align: center !important;
font-style: italic;
}
div#storybox a:link {
color: #0059FF;
text-decoration: none;
font-size: 1.3em;
}
div#storybox a:visited {
color: #0059FF;
text-decoration: none;
}
div#storybox a:hover {
color: #FFA500;
text-decoration: none;
}
/* begin scrollbar configuration, learned from stackoverflow forums */
#storybox {
scrollbar-face-color: #009cfe;
scrollbar-shadow-color: #FFFFFF;
scrollbar-highlight-color: #009cfe;
scrollbar-3dlight-color: #009cfe;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-arrow-color: #009cfe;
}
#storybox::-webkit-scrollbar {
width: 10px;
}
#storybox::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(255,255,255,1);
-webkit-border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
#storybox::-webkit-scrollbar-thumb {
-webkit-border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
background: #009cfe;
-webkit-box-shadow: inset 0 0 1px rgba(255,255,255,1);
}
/* end scrollbar configuration */
/* top navigation cfg */
div#topnav {
color: #fff;
width: 1024px;
font-size: 2em;
font-family: sans-serif;
}
div#topnav ul {
list-style-type: none;
float: right;
}
div#topnav ul li {
display: block;
padding: 10px;
}
div#topnav ul li a:link {
color: #fff;
text-decoration: none;
}
div#topnav ul li a:visited {
color: #fff;
}
div#topnav ul li a:hover {
color: #4f5d73;
background-color: #fff;
}
/* END LAYOUT SETUP */
<div id="contentwrap">
<div id="topnav">
<ul>
<li>
resources
</li>
<li>
policies
</li>
<li>
sanitation
</li>
</ul>
</div>
<div id="menubox">
<h2>
Editors
</h2>
<ul id="menu">
<li>
John Howard
<ul>
<li>
Available Stories
</li>
<li>
A Grain of Salt
</li>
<li>
Despite Drought, Water Conservation Not a Priority
</li>
</ul>
</li>
</ul>
<div id="sidenav">
<ul>
<li>
</li>
</ul>
</div>
</div>
<div id="storybox">
<h2>
Who We Are
</h2>
<p>
California Water Wars offers a snapshot of water policy and politics in California. We are a professional news team with experience covering California water issues and government, including the Legislature, the bureaucracy and the lobbying community.</p>
<p>
Since statehood – before, in fact – disputes over water have defined California; north and south, inland and coastal. The mission of California Water Wars is to inform the public and policy makers about California water issues and to suggest solutions to the problems.
</p>
</div>
</div>
That's about it. You may also need to reposition other elements, which now end up under the #menubox. But that would be mostly a matter of adjusting the left margins.

CSS - Style menu clickable places

Hey guys i am styling my first website and i am having problem with my secondary menu, atm just text work as link and i need to change it to whole li will works as link.
I need to do it in CSS not JS.
Live version: http://funedit.com/andurit/try9/ (u can see multiple submenues there, they are all same CSS / HTML
HTML:
<nav class="submenu">
<ul>
<li><span class="text">HERNÍ SERVERY </span><span class="arrows"></span></li>
<li><span class="text">BAN LIST </span><span class="arrows"></span></li>
<li><span class="text">UNBAN ŽÁDOSTI </span><span class="arrows"></span></li>
<li><span class="text">ADMINI </span><span class="arrows"></span></li>
</ul>
</nav>
CSS:
.submenu{
color: #1a6eb6;
display: inline-block;
height: 50px;
width:780px;
}
.submenu ul {
margin-left: 20px;
padding-left: 0px;
}
.submenu ul li{
list-style-position: inside; /* Bodka v novom riadku vo vnutry */
list-style-type: none; /* bez bodky */
background-image: url("images/shop_menu_bg.png");
background-repeat: repeat-x;
height: 38px;
width: 187px;
display: inline-block;
color: #1a6eb6;
}
.submenu ul li:hover {
background-image: url("images/shop_menu_bg_hover.png");
width: 187px;
height: 38px;
}
.submenu ul li .text{
color: #1a6eb6;
display: inline-block; /* aby sa dala rovnomerne posunut sipka a nie podla dlzky textu*/
height: 31px;
width:115px;
line-height: 28px;
margin-left: 5px;
}
.submenu ul li .arrows{
background-image: url("images/arrows.png");
background-repeat: repeat-x;
display: inline-block;
height: 17px;
width: 14px;
margin: 0px 0px 0px 45px;
vertical-align: middle;
}
.submenu ul li:hover .arrows{
background-position: -3px -14px;
}
Can somebody help me with it?
p.s. Thanks for reading this post :)

Replace some of the CSS with the CSS I have below, setting the span.text width to 100%, then the arrows span to position: absolute and then set their parent to position: relative that should do the trick
.submenu ul li {
background-image: url("images/shop_menu_bg.png");
background-repeat: repeat-x;
color: #1A6EB6;
display: inline-block;
height: 38px;
list-style-position: inside;
list-style-type: none;
position: relative; /* added this */
width: 187px;
}
.submenu ul li .text {
color: #1A6EB6;
display: inline-block;
height: 31px;
line-height: 28px;
margin-left: 5px;
position: relative; /* added this for correct z-index */
width: 100%; /* added this */
z-index: 3; /* added this */
}
.submenu ul li .arrows {
background-image: url("images/arrows.png");
background-repeat: repeat-x;
display: block;
height: 17px;
margin: 0;
position: absolute; /* added this */
right: 10px; /* added this to position it correctly */
top: 6px; /* added this to position it correctly */
vertical-align: middle;
width: 17px;
z-index: 2; /* added this for correct z-index */
}
.submenu ul li .text a {
color: #636363;
display: block; /* added this */
width: 100%; /* added this */
}

Change the structure slightly so that the text and the arrow are inside your hyperlink like this:
<li><span class="text">DISKUSNÍ FÓRUM </span><span class="arrows"></span></li>
And then style your 'li a' to:
.submenu ul li a{display:block}
That should do the trick.

CSS -Menu work as <a href> with background not just text

my code of menu work fine, but only text is a href, how ever i try to make it a bit more user friendly so make even background in to work as href but its not working, can somebody help me to fix it?
My HTML:
<div id="menu">
<ul>
<li>GAMESITES<span class="arrow"></span></li>
<li class="spacer"> </li>
<li>HRY<span class="arrow"></span></li>
<li class="spacer"> </li>
<li>SERVERY<span class="arrow"></span></li>
<li class="spacer"> </li>
<li>CLANKY<span class="arrow"></span></li>
<li class="spacer"> </li>
<li>FORUM<span class="arrow"></span></li>
<li class="spacer"> </li>
<li>DOWNLOADS<span class="arrow"></span></li>
<li class="spacer"> </li>
<li>BLOGY<span class="arrow"></span></li>
<li class="spacer"> </li>
<li>FLASHOVKY<span class="arrow"></span></li>
</ul>
</div>
My CSS:
#menu{
background-image: url("images/menubg.png");
background-repeat: repeat-x;
height: 44px;
width: 983px;
margin: 0 22px;
}
.spacer{
background-image: url("images/menu_spacer.png");
background-repeat: no-repeat;
width: 1px;
height: 25px;
margin: 0px 12px;
}
#menu ul{
list-style-position: inside; /* Bodka v novom riadku vo vnutry */
list-style-type: none; /* bez bodky */
}
#menu ul li{
padding: 0px 5px 0px 0px;
display: inline-block;
color: #f7f7f7;
}
.arrow{
background-image: url("images/sipka.png");
background-repeat: no-repeat;
width: 10px;
height: 8px;
margin-left: 8px;
display: inline-block;
}
Live preview: http://funedit.com/andurit/try4/

Your markup can be heavily simplified into this:
<div id="menu">
<ul>
<li>GAMESITES</li>
<li>HRY</li>
<li>SERVERY</li>
<li>CLANKY</li>
<li>FORUM</li>
<li>DOWNLOADS</li>
<li>BLOGY</li>
<li>FLASHOVKY</li>
</ul>
</div>
Flexbox solution
If you're willing to explore modern CSS specifications, you can always use flexbox instead of relying on inline-block to position your elements — check out the demo fiddle here: http://jsfiddle.net/teddyrised/9FZS8/
#menu {
background-image: url(http://funedit.com/andurit/try4/images/menubg.png);
background-repeat: repeat-x;
height: 44px;
width: 983px;
font-family: Arial;
}
#menu ul{
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
#menu ul li {
color: #f7f7f7;
flex: 1 1 auto;
}
#menu ul li a {
background-image: url(http://funedit.com/andurit/try4/images/menu_spacer.png);
background-repeat: no-repeat;
background-position: top right;
color: #f7f7f7;
display: block;
padding: 14px 0;
text-decoration: none;
text-align: center;
}
#menu ul li:last-child a {
background: none;
}
#menu ul li a:after {
background-image: url(http://funedit.com/andurit/try4/images/sipka.png);
content: '';
width: 10px;
height: 8px;
margin-left: 8px;
display: inline-block;
}
Non-Flexbox solution
Otherwise, you can always fallback to floating your individual <a> elements, but that requires you to calculate the padding for each of them carefully so the menu does not overflow: http://jsfiddle.net/teddyrised/9FZS8/2/
#menu {
background-image: url(http://funedit.com/andurit/try4/images/menubg.png);
background-repeat: repeat-x;
height: 44px;
width: 983px;
font-family: Arial;
}
#menu ul{
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#menu ul li {
color: #f7f7f7;
}
#menu ul li a {
background-image: url(http://funedit.com/andurit/try4/images/menu_spacer.png);
background-repeat: no-repeat;
background-position: top right;
color: #f7f7f7;
float: left;
padding: 14px 15px; /* Disadvantage: you will have to adjust this padding MANUALLY */
text-decoration: none;
text-align: center;
}
#menu ul li:last-child a {
background: none;
}
#menu ul li a:after {
background-image: url(http://funedit.com/andurit/try4/images/sipka.png);
content: '';
width: 10px;
height: 8px;
margin-left: 8px;
display: inline-block;
}

Add to your links a padding of x and a margin of -x, for example:
#menu a {
padding: 20px;
margin: -20px;
}

Make link to take full space:
li > a{
display:inline-block;
width: 100%;
height: 100%;
}

Menu - Style ul / li to be width depend on text lenght

i am trying to style my menu. I had a working code but notied that parent div is smaller then child div. I am pretty sure its not right so i try to edit it a bit but now i have a problem with it. It looks like:
As you can see last part of menu "FLASHOVKY" is on another line, and all li is same width dispite the fact text is different lenght.
CSS:
#menu {
background-image: url('images/menubg.png');
background-repeat: repeat-x;
height: 44px;
width: 983px;
font-family: Arial;
margin-left: 22px;
}
#menu ul{
list-style: none;
margin: 0;
padding: 0;
}
#menu ul li {
color: #f7f7f7;
height: 44px;
display: inline-block;
min-width: 100px;
}
#menu ul li a {
background-image: url('images/menu_spacer.png');
background-repeat: no-repeat;
background-position: top right;
color: #f7f7f7;
float: left;
padding: 14px 15px; /* Disadvantage: you will have to adjust this padding MANUALLY */
text-decoration: none;
text-align: center;
min-width: 85px;
}
#menu ul li:last-child a {
background: none;
}
#menu ul li a:after {
background-image: url('images/sipka.png');
content: '';
width: 10px;
height: 8px;
margin-left: 8px;
display: inline-block;
}
HTML:
<nav id="menu">
<ul>
<li>GAMESITES</li>
<li>HRY</li>
<li>SERVERY</li>
<li>CLANKY</li>
<li>FORUM</li>
<li>DOWNLOADS</li>
<li>BLOGY</li>
<li>FLASHOVKY</li>
</ul>
</nav>
Can somebody help me with that guys?
p.s. Live demo : http://funedit.com/andurit/try11/

1] You can fix this by setting box-sizing:border-box;. The issue is the padding on your <a> tags, it's causing the content to overflow because the padding and border are placed outside of the content box.
2] To fix the spacing issue, you need to add a float: left; to #menu ul li. The reason for this is because the <a> tags nested in #menu ul li are floated left. That's why the links were offset.
Change this:
#menu ul li {
color: #f7f7f7;
height: 44px;
display: inline-block;
min-width: 100px;
}
#menu ul li a {
background-image: url('images/menu_spacer.png');
background-repeat: no-repeat;
background-position: top right;
color: #f7f7f7;
float: left;
padding: 14px 15px; /* Disadvantage: you will have to adjust this padding MANUALLY */
text-decoration: none;
text-align: center;
min-width: 85px;
}
To this:
#menu ul li {
color: #f7f7f7;
height: 44px;
display: inline-block;
min-width: 100px;
float:left; /* Add this float to remove extra space */
}
#menu ul li a {
-webkit-box-sizing: border-box; /* Safari, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
background-image: url('images/menu_spacer.png');
background-repeat: no-repeat;
background-position: top right;
color: #f7f7f7;
float: left;
padding: 14px 15px; /* Disadvantage: you will have to adjust this padding MANUALLY */
text-decoration: none;
text-align: center;
min-width: 85px;
}

Try playing around with the min-width values in your css.

#menu {
background-image: url('images/menubg.png');
background-repeat: repeat-x;
height: 44px;
width: 983px;
font-family: Arial;
margin-left: 22px;
}
#menu ul{
list-style: none;
margin: 0;
padding: 0;
}
#menu ul li {
color: #f7f7f7;
height: 44px;
display: inline-block;
min-width: 100px; // this property causing you to make all box of same size and it occupie the 100px wether text is small or large
}
#menu ul li a {
background-image: url('images/menu_spacer.png');
background-repeat: no-repeat;
background-position: top right;
color: #f7f7f7;
float: left;
padding: 14px 15px; /* Disadvantage: you will have to adjust this padding MANUALLY */
text-decoration: none;
text-align: center;
min-width: 85px; // dont fix width
}
#menu ul li:last-child a {
background: none;
}
#menu ul li a:after {
background-image: url('images/sipka.png');
content: '';
width: 10px;
height: 8px;
margin-left: 8px;
display: inline-block;
}

Use float:left instead of display block..and only use height if you need..yes inline and float:left has for different use..but may be you will like..
#menu {
background-image: url('images/menubg.png');
background-repeat: repeat-x;
height: 44px;
width: 983px;
font-family: Arial;
border:1px solid;
margin-left: 22px;
}
#menu ul{
list-style: none;
margin: 0;
padding: 0;
width:100%;
}
#menu ul li {
color: #000;
height: 44px;
float:left;
min-width: 100px;
}
#menu ul li a {
background-image: url('images/menu_spacer.png');
background-repeat: no-repeat;
background-position: top right;
color: #000;
float: left;
padding: 14px 15px; /* Disadvantage: you will have to adjust this padding MANUALLY */
text-decoration: none;
text-align: center;
min-width: 85px;
}
#menu ul li:last-child a {
background: none;
}
#menu ul li a:after {
background-image: url('images/sipka.png');
content: '';
width: 10px;
margin-left: 8px;
display: block;
}

Why does the menu hovering behave different for these items on a list?

http://jsfiddle.net/z9wAg/
For the music links hovering and aligning works, but not for the pictures! Why? It's the same types, so as I see it, it should work the same way. As you can probably see, though, it doesn't. I've tried to compare them, and they are pretty much the same in the code.
HTML:
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<title>Home</title>
</head>
<body>
<div ID="menubox">
<ul>
<li>Home</li>
<li>Music
<ul>
<li>My music</li>
<li>The Joao Gilberto project</li>
</ul></li>
<li>Github</li>
<li>Pictures
<ul>
<li>Flickr</li>
<li>Google+ albums</li>
</ul></li>
<li>Twitter</li>
</ul>
</div>
<div ID="circle">
<p ID="title"> α <br> Γ <br> Π <br> ζ <br> τ <br> ξ <br> ι <br> Π </p>
</div>
</body>
CSS:
#menubox
{
width: 8%;
height: 30%;
border: 10% solid #C7D93D;
border-radius: 5%;
position: fixed;
margin-top: 12%;
margin-left: 18%;
font-family: Ubuntu, Futura, Trebuchet MS;
list-style: none;
float: left;
}
#menubox ul li a
{
text-align: left;
font-size: 200%;
color: #FFF0A5;
}
#menubox ul li
{
color: #468966;
font-family: Ubuntu, Futura, Trebuchet MS;
float: left;
margin-right: 10px;
position: relative;
}
#menubox ul
{
color: #468966;
font-family: Ubuntu, Futura, Trebuchet MS;
}
#menubox ul ul
{
position: absolute;
left: -9999px;
list-style: none;
}
#menubox ul ul li
{
float: left;
margin-left: 40%;
position: relative;
font-size: 60%;
text-align: left;
}
#menubox ul ul a
{
white-space: nowrap;
}
#menubox ul li:hover a
{
text-decoration: none;
color: #FFB03B;
}
#menubox ul li:hover ul
{
left: 0;
top: 0;
z-index: 100;
color: #FFB03B;
}
#menubox ul li:hover ul a
{
text-decoration: none;
color: #FFF0A5;
}
#menubox ul li:hover ul li a:hover
{
color: #FFB03B;
}
div p
{
color: #FFF0A5;
text-align: center;
position: relative;
vertical-align: middle;
display: inline-block;
margin-top: 300px;
line-height: 60px;
}
#circle
{
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
background-color: #B64926;
width: 500px;
height: 500px;
display: block;
position: fixed;
margin-top: 9%;
margin-left: 52%;
text-align: center;
}
#title
{
text-color: #FFF0A5;
font-size: 350%;
display: inline;
text-align: center;
}
body
{
height: 100%;
width: 100%;
background-color: #468966;
font-family: Ubuntu, Futura, Trebuchet MS;
}
.link
{
text-color: #FFF0A5;
text-decoration: none;
text-align: left;
}

By making the menu LIs the same width, it seems to have eliminated this issue for me.
#menubox ul li
{
color: #468966;
font-family: Ubuntu, Futura, Trebuchet MS;
float: left;
margin-right: 10px;
position: relative;
width:190px;
}
http://jsfiddle.net/z9wAg/2/

From what I saw, the problem is that in the margin-left CSS rule of #menubox ul ul li.
Instead of it being 40% you could specify a concrete distance (e.g. 80px).
Fiddle

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

CSS - Move text without moving block - html

#news #right ul li .blueballoon { line-height: 24px; }

Related

Mozilla Float Bug in XHTML Strict 1.0/CSS

CSS - Style menu clickable places

CSS -Menu work as <a href> with background not just text

Menu - Style ul / li to be width depend on text lenght

Why does the menu hovering behave different for these items on a list?

Categories

Resources