I'm trying to make a floated menu at the top of the page, but it wont center.
I used the code from here: http://codepen.io/anon/pen/rxgoj
and this is mine: http://codepen.io/anon/pen/BDpte
<body>
<div id="header">
</div>
<div id="content">
<div id="main">
</div>
</div>
<div class="navigation">
<div class="navigation.fixer">
<ul class="floating-elements">
<li class="floated">Home</li>
<li class="floated">Joeys</li>
<li class="floated">Cubs</li>
<li class="floated">Scouts</li>
<li class="floated">Venturers</li>
<li class="floated">Rovers</li>
</ul>
</div>
</div>
</div>
<div id="footer">
</div>
</body>
#charset "utf-8";
.navigation {
float:left;
position:relative;
left:50%;
/*overflow:hidden;*/
}
.navigation.fixer {
float:left;
position:relative;
left:-50%;
}
.floating-elements
{
list-style:none;
}
.floated
{
float:left; margin-right:10px;
}
Help would be much appreciated.. :)
.navigation {
position:relative;
text-align:center;
}
.floated {
display:inline-block;
margin-right:10px;
}
http://jsfiddle.net/otbmtf13/
I have solution here : http://codepen.io/anon/pen/tJaHy
For elements with class names containing a period '.' in them, you should escape the period while specifying the css handle like so
.navigation\.fixer{
.....
}
else the regular css handling means a string of type ".navigation.fixer" is an element having both distinct class names of "navigation" and "fixer" , which is not the case here as it is a single class name.
Related
body {
background-color:olive;
}
#container{
background-color:;
display:flex;
}
#container > a {
background-color:chocolate;
margin:5px;
padding:7px;
border-radius:10px;
}
#item-2 {
}
#item-4{
margin-left:auto;
}
#bonus {
background-color:red;
}
<body>
<nav>
<div id="container">
<a id="item-1 bonus" href="#">Information</a>
<a id="item-2 bonus" href="#">Contacts</a>
<a id="item-3 bonus" href="#">Media</a>
<a id="item-4" href="#">Logout</a>
</div>
</nav>
</body>
Hello, could anyone tlel me why doesnt "bonus" class apply background-color:red ? Is there a rule where you can't put two id's or something? Some clarification would be really useful. Thanks.
What are valid values for the id attribute in HTML?
Read this regarding HTML attribute id.
You can instead use a class attribute for having multiple class names on a single element. id can't be used like that.
That is not a valid id. You can use class instead of id. Also, update your style for bonus to following for getting the right specificity. For details refer to CSS Specificity
body {
background-color:olive;
}
#container{
background-color:;
display:flex;
}
#container > a {
background-color:chocolate;
margin:5px;
padding:7px;
border-radius:10px;
}
#item-2 {
}
#item-4{
margin-left:auto;
}
#container > a.bonus {
background-color:red;
}
<body>
<nav>
<div id="container">
<a id="item-1" class="bonus" href="#">Information</a>
<a id="item-2" class="bonus" href="#">Contacts</a>
<a id="item-3" class="bonus" href="#">Media</a>
<a id="item-4" href="#">Logout</a>
</div>
</nav>
</body>
body {
background-color:olive;
}
.container{
background-color:;
display:flex;
}
.container > a {
margin:5px;
padding:7px;
border-radius:10px;
}
.link {
background-color: chocolate;
}
.item-2 {
}
.item-4{
margin-left:auto;
}
.bonus {
background-color:red;
}
<body>
<nav>
<div class="container">
<a class="item-1 bonus link" href="#">Information</a>
<a class="item-2 bonus link" href="#">Contacts</a>
<a class="item-3 bonus link" href="#">Media</a>
<a class="item-4 bonus link" href="#">Logout</a>
</div>
</nav>
</body>
I advise you to always use class instead of id (read on this topic: https://dev.to/claireparker/reasons-not-to-use-ids-in-css-4ni4).
Note that I removed the background-color: chocolate property, because the .container > a selector is stronger than the bonus.
I am trying to recreate the Windows 8 application menu ( the new "start menu" )
My goal is to have square divs with a descriptive text next to it, the column splits itself up when it reaches a certain point ( something I have yet to determine but Iv'e come quite far with this )
In other words: I am trying to make a column that goes down and splits itself into 3 columns automatically and beginnen at the left side again after it has reached the end of the wrapper width.
as you can see in my JFIDDLE Iv'e made something that comes quite close.
http://jsfiddle.net/Qq98X/
Stil I can't seem to find the correct solution for this.
Mainly because i cannot use NTH-CHILD etc properties because it is meant to work on IE7
<html>
<head>
<style>
.mp-submenu {
margin-bottom: 1px;
position:relative;
}
.mp-submenu ul{
max-width:500px;
max-height:300px;
list-style:none;
}
.mp-submenu ul li{
float:left;
}
#triple li { width:30.333%; }
.mp-submenu-square-dg,
.mp-submenu-square {
float:left;
margin: 5px 0 5px 0;
padding:5px;
width:50px;
height:50px;
background-color: #8D8D8D;
}
.mp-submenu-square-dg:hover,
.mp-submenu-square:hover {
background-color: #F17B0A;
}
.mp-submenu-square-dg {
background-color: #696969;
}
.mp-submenu-headletter {
margin: 5px 0 5px 0;
font: normal 27px arial;
text-align: left;
vertical-align:bottom;
width:50px;
height:50px;
color: black;
display:inline-block;
background-color:none;
float:left;
}
.mp-submenu-headletter-desc {
padding-top:35px;
font: normal 12px arial;
}
</style>
</head>
<body>
<article class="mp-submenu">
<ul id="triple">
<li>
<div class="mp-submenu-headletter">A</div>
</li>
<li>
<div class="mp-submenu-square">1</div>
<div class="mp-submenu-headletter-desc">Beschrijving</div>
</li>
<li>
<div class="mp-submenu-square-dg">2</div>
<div class="mp-submenu-headletter-desc">Beschrijving</div>
</li>
<li>
<div class="mp-submenu-square">3</div>
<div class="mp-submenu-headletter-desc">Beschrijving</div>
</li>
<li>
<div class="mp-submenu-square-dg">4</div>
<div class="mp-submenu-headletter-desc">Beschrijving</div>
</li>
<li>
<div class="mp-submenu-square">5</div>
<div class="mp-submenu-headletter-desc">Beschrijving</div>
</li>
<li>
<div class="mp-submenu-headletter">B</div>
</li>
<li>
<div class="mp-submenu-square">1</div>
<div class="mp-submenu-headletter-desc">Beschrijving</div>
</li>
<li>
<div class="mp-submenu-square-dg">2</div>
<div class="mp-submenu-headletter-desc">Beschrijving</div>
</li>
<li>
<div class="mp-submenu-square">3</div>
<div class="mp-submenu-headletter-desc">Beschrijving</div>
</li>
<li>
<div class="mp-submenu-square">1</div>
<div class="mp-submenu-headletter-desc">Beschrijving</div>
</li>
<li>
<div class="mp-submenu-headletter">C</div>
</li>
<li>
<div class="mp-submenu-square">1</div>
<div class="mp-submenu-headletter-desc">Beschrijving</div>
</li>
<li>
<div class="mp-submenu-square-dg">2</div>
<div class="mp-submenu-headletter-desc">Beschrijving</div>
</li>
<li>
<div class="mp-submenu-square-dg">3</div>
<div class="mp-submenu-headletter-desc">Beschrijving</div>
</li>
</ul>
</article>
</body>
Add this:
#triple li:nth-child(3n+1) {clear:both}
This will cause every third item beginning from the first to clear the float and start a new row.
I have the following code.
<html>
<head>
<style>
.fb{
position: relative;
right:-1000px;
}
.info{
position:relative;
}
</style>
</head>
<body>
<div id="info">
About Us |
Privacy Policy
<a id = "fb" href="https://www.facebook.com/xyz" target="https://www.facebook.com/xyz"> <img src="../images/facebook.png" height = 16, width = 16 /> </a>
</div>
</body>
</html>
I want to move the fb link to the right corner. I guess my styling is not working. Or am I going wrong somewhere?
You have defined a class in your stylesheet
.fb{
position: relative;
right:-1000px;
}
.info{
position:relative;
}
so while using it you should do
<div class="info">
...
</div>
<div class="fb">
...
</div>
OR if you want to use id then
#fb{
position: relative;
right:-1000px;
}
#info{
position:relative;
}
<div id="info">
...
</div>
<div id="fb">
...
</div>
first don't use spaces in attr="smth". Also you use id not class so css selector should be #fb , not .fb
Use this #fb{
float:right;
}
You are using class (.class) selectors instead of id (#id) selectors in your css
The styles are not reflecting because you are using . instead of #. . is used while dealing with class, for id use #.
Try this:
#fb{
position: fixed;
right:10px;
}
#info{
position:relative;
}
Jsfiddle
<div id="info">
About Us |
Privacy Policy
<a id ="fb" href="https://www.facebook.com/xyz" target="https://www.facebook.com/xyz">
<img src="../images/facebook.png" height = 16, width = 16 alt="FB"/> </a>
</div>
CSS
#fb
{
float:right;
}
.info
{
position:relative;
}
There were no class named fb. DEMO
I want to have text aligned left and right inside the same <li> element in nav-list of Twitter Bootstrap. Here's my code:
<ul class="nav nav-list">
...
<li class="active">All<p class="pull-right">100</p></li>
<li>Warning<p class="pull-right">100</p></li>
<li>Error<p class="pull-right">100</p></li>
...
</ul>
And here is how it looks:
EDIT:
Thanks all for replies. Solved this problem in such way:
replace <p> with <span>
add class="clearfix" to <li> alements
OPTION ONE: CHANGE THE MARKUP:
Just change your markup a bit. Put the <p> outside of the anchor tag.
<ul class="nav nav-list">
<li class="active">All<p class="pull-right">100</p></li>
<li>Warning<p class="pull-right">100</p></li>
<li>Error<p class="pull-right">100</p></li>
</ul>
.pull-right {float:right;}
OPTION TWO: CHANGE THE CSS:
Otherwise if the <p> is needed inside of the anchor tag then you could do something like this.
a {
display:block;
width:100%;
}
p{ float:right;}
EXAMPLE: (note I am using a css reset in my example)
http://jsfiddle.net/vRSMZ/1/
HTML:
<ul class="nav nav-list">
...
<li class="active"><label>All</label><span>100</span><div class="clr"></div></li>
<li><label>Warning</label><span>100</span><div class="clr"></div></li>
<li><label>Error</label><span>100</span><div class="clr"></div></li>
...
</ul>
CSS:
.nav-list ul li a{ padding:5px 10px; display:block;}
.nav-list ul li a label{ cursor:pointer; display:block; float:left; width:80%;}
.nav-list ul li a span{ cursor:pointer; display:block; float:left; width:20%; text-align-right;}
.clr{ clear:both;}
Note: Adjust the width of text in the left on label and numbers on the right on span accordingly.
HTML:
<ul class="nav nav-list">
...
<li class="active">All<span class="num">100</span></li>
<li>Warning<span class="num">100</span></li>
<li>Error<span class="num">100</span></li>
...
</ul>
CSS:
.num{
float: right;
}
I changed your <p> to <span> because that makes more sense... Then added a .nums class to the span, and floated that right.
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