I am trying to make a navigation bar with the following code , but i can't seem to get the outer div to be of the same height as that of the unordered list inside.
I tried display:inline-block too but it doesn't seem to work.
Here is the html,
http://jsfiddle.net/jairajdesai/7Lyss/
HTML :
<div id="top_navigation_menu">
<ul id="top_navigation_list">
<li class="top_navigation_options">Home</li>
<li class="top_navigation_options">Places</li>
<li class="top_navigation_options">Travel</li>
<li class="top_navigation_options">Stay</li>
<li class="top_navigation_options">FAQs</li>
</ul>
</div>
CSS :
#top_navigation_menu{
position:absolute;
top:14%;
min-width: 50%;
background-color:#eee;
color:white;
}
#top_navigation_list{
list-style-type: none;
}
.top_navigation_options{
display:inline;
}
Use display:inline with Ul and display:inline-block with li css class. Something like this
#top_navigation_list{
list-style-type: none;
background-color:#000;
display:inline;
}
.top_navigation_options{
display:inline-block;
}
JS Fiddle Demo
Just add margin: 0 in #top_navigation_list to remove the default margin of an unordered list.
Updated JsFiddle
Related
I am currently using this css sheet to stylize my page but no matter what I do I cannot get the footer to line up with the main content of my webpage. It seems to be an centering issue.
Here is my css:
.footnav
{
padding: 20px 40px 20px 40px;
clear:both;
text-align:center;
color:white;
position:relative;
z-index:100;
}
.footnav li a{
text-decoration:none;
display: inline;
font-weight:bold;
}
.footnav li {
list-style-type: none;
}
Here is the code that previous css it is stylizing, I apologize if it is a lot to read.
<div class="footnav" >
<ul class="nav1">
<li class="header">Main</li>
<li><Home</li>
</ul>
<ul class="nav2">
<li class="header">Aventure</li>
<li>News</li>
<li>Map</li>
</ul >
<ul class="nav3">
<li class="header">Survival</li>
<li>Guide</li>
<li>Gear</li>
</ul>
</div>
This is the css for the content area, that I am trying to line my footer with.
.content
{
color:white;
font-size:12px;
font-weight:none;
font-family:sans-serif;
padding:30px;
margin:auto;
margin-top:10px;
width:70%;
position:relative;
z-index:14;
opacity:1;
border-style:solid;
border-width:10px;
border-style:solid;
border-width:5px;
background-color:#000000;
border-color:#FFFFFF;
border-right-color:#999999;
border-left-color:#666666;
border-bottom-color:#333333;
}
I know that it involves trying to take half the width of the body of the webpage, but for my page I used percentages instead of pixels. I am not sure how to handle that. Thanks in advance and once again, I apologize for the lengthy question but the only way to properly assist me, would be to have the full picture. If there is any more material needed just ask.
Wrap the footer content in <center> tags </center>. They automatically align any child content with the center of the page.
try to add display: inline-block; to .footnav ul. The ul blocks would otherwise have 100% width - this way they can be next to each other, and be centerded together. inline-block limits the width, therefore you also should add a width setting to this rule. So it is:
.footnav ul {
display: inline-block;
width: 200px;
}
(The actual width depends on the content of your li elements in those nav lists)
Is it possible to create a horisontally styled menu (like on image below) without using absolute positioning or JS?
Trying to create a menu. It uses standard unordered list to display.
Here is what I'm trying to achieve:
(Green list is a submenu of "How are you". It has a line break because it is limited by width.)
And currently what I have is this:
This is the pen: http://codepen.io/olegovk/pen/NNREMY
And the code:
HTML
<nav>
<ul>
<li>Hello</li>
<li>How are you
<ul>
<li>Allright!</li>
<li>And you?</li>
<li>Fine</li>
<li>La-la-la</li>
<li>Bla-bla-bla</li>
<li>Cheerio!</li>
</ul>
</li>
<li>Good bye</li>
</ul>
</nav>
<div class="clear"></div>
<p>Some paragraph to make sure it's below the menu.</p>
CSS
.clear {
clear: both;
}
p {
background-color: lightgrey;
}
li {
float: left;
list-style: none;
display: list-item;
margin: 0 0.5em;
}
li li {
margin: 0 1em;
}
li li a {
color: green;
}
nav ul ul{
max-width: 300px;
}
I know it's possible with absolutely positioning child lists or with JS. But absolute positioning of child lists takes them out of doc flow. As a result they overlap with content below them. Also I can't use JS.
for li li use this css style .
li li {
margin: 0 1em;
position:relative;
left:-110px;
}
and give a id to good bye li and then write it css
e.g
<li><a href="#" id='someId'>Good bye</a></li>
li #someId{
position:relative;
left:-150px;
}
Seems that it's impossible.
Here is another similar question: Position: absolute and parent height?
With regards to the menu, to achieve the desired result, the only solution is to have top level menu and sub-menu in different lists. That way no need to position sub-menu (second level list) absolutely.
A series of ul elements contained within separate div elements need to not only have the correct content in their :before pseudo element, but also keep the bold tag titles adjacent to the lists.
Additionally, when there are no lists present within the div in question, nothing should appear whatsoever. This is why I'm looking for CSS as a solution, because if I hard-code the titles within the div it will appear if there are no lists present.
I cannot predict which instances of this unique div will have a ul within ahead of time - our application generates content based on user input from drop-down menus, and so if a menu is never used, a ul is not created.
I am unable to use JavaScript of any sort for this labeling process.
This is what I would like to see:
Foo Items
List One
aaaa
bbbbb
cccc
List Two
defdefdef
ghighighi
Bar Items
List One
xxx
yyy
List Two
zzzzzzz
aaaabbbbccc
At present I am trying to use the alt attribute of the ul to populate the div:before area. This is with the hope that there is a way to define CSS which says "for each div that contains an .exam class element, place the ul's attr(alt) in the div:before element".
This is what I've tried:
<div>
<b>Far</b>
<ul class="exam" alt="Foo Items">
<li>Stuff</li>
<li>Things</li>
</ul>
<b>Near</b>
<ul class="exam" alt="Foo Items">
<li>dunno</li>
</ul>
</div>
<div>
<b>Far</b>
<ul class="exam" alt="Bar Items">
<li>Foo</li>
</ul>
<b>Near</b>
<ul>
<li>bar</li>
<li>eggs</li>
</ul>
</div>
And the CSS to go with it:
div > .exam:first-of-type:before {
content:attr(alt);
font-style:italic;
}
ul {
margin:0 0 1em 1em;
padding:0;
}
li {
margin-left:2em;
}
Please see the jsfiddle link here - https://jsfiddle.net/f6gwyvuu/
I realize it's all a bit convoluted but unfortunately this is the result of working around the way in which the application generates its content. I don't really have control over that, I can only stylized the elements it creates.
Thanks in advance.
First, ul elements can't have an alt attribute. You can use custom data-* attributes instead.
And it doesn't make much sense to repeat the same data in each ul. Instead, add it only to the div.
Then, you can use
div:not(:empty):before {
content: attr(data-alt);
display: block;
}
div:not(:empty):before {
content: attr(data-alt);
display: block;
font-style: italic;
}
ul {
margin: 0 1em;
padding: 0;
}
li {
margin-left: 2em;
}
<div data-alt="Foo Items">
<b>Far</b>
<ul class="exam">
<li>Stuff</li>
<li>Things</li>
</ul>
<b>Near</b>
<ul class="exam">
<li>dunno</li>
</ul>
</div>
<div data-alt="Baz Items"></div>
<div data-alt="Bar Items">
<b>Far</b>
<ul class="exam">
<li>Foo</li>
</ul>
<b>Near</b>
<ul>
<li>bar</li>
<li>eggs</li>
</ul>
</div>
If you must do this, try
div {position:relative;} /*let this be the absolute container*/
div > .exam {position: static;}
div:not(:empty) {padding-top: 30px;} /*for div with generated content, only works for short titles*/
div > .exam:first-of-type:before {
content:attr(alt);
font-style:italic;
position: absolute;
top: 0;
margin-left: -1em; /*compensate your ul margin*/
}
ul {
margin:0 0 1em 1em;
padding:0;
}
li {
margin-left:2em;
}
This works for short titles, but maybe tweak it to work for long titles as well.
JSFiddle
I think you are looking for :empty and :not css selectors.
You can do something like this:
div > .exam:not(:empty):before {
content:attr(alt);
font-style:italic;
}
ul {
margin:0 0 1em 1em;
padding:0;
}
li {
margin-left:2em;
}
JSFIDDLE
If you are trying to change styles of previous sibling, then it is not possible using css. You better add another attribute as you did by adding alt attribute. And also it is best practice to add our custom attributes with a prefix as data-.
I have this site here: http://jamessuske.com/freelance/seasons/
At the bottom you will see social media icons and the issue I am having is when I put my mouse over them, they are not clickable, only when I move my mouse to the left a little bit and I do not understand what I did wrong:
HTML
<ul class="social-media">
<li class="twitter"> </li>
<li class="instagram"> </li>
<li class="facebook"> </li>
</ul>
CSS
ul.social-media{
padding-top:30px;
}
ul.social-media li{
float:left;
padding-left:5px;
list-style:none;
}
ul.social-media li.twitter{
background-image:url(http://jamessuske.com/freelance/seasons/images/social.png);
background-position-x:0px;
width:25px;
height:26px;
}
ul.social-media li.instagram{
background-image:url(http://jamessuske.com/freelance/seasons/images/social.png);
background-position-x:-26px;
width:25px;
height:26px;
}
ul.social-media li.facebook{
background-image:url(http://jamessuske.com/freelance/seasons/images/social.png);
background-position-x:-52px;
width:25px;
height:26px;
}
Any help would be appreciated. Thanks.
The size of the clickable area depends on the content of the a tag. Your a tag does not have any content.
One solution is to apply your background image directly to the a tag and changing the display attribute to block.
ul.social-media li.twitter a {
background-image:url(http://jamessuske.com/freelance/seasons/images/social.png);
background-position-x:0px;
width:25px;
height:26px;
display: block;
}
Note that we also need to set display to block since the anchor tag is an inline element by default. The width and height attributes only have an effect on block elements.
It's because of the padding-left you have set on the li element
it is probably because your links are so small.
try this :
.social-media a {
display:block;
height:100%;
width:100%;
}
So they fill entire <li> and stand over sprite.
As in the title - I want to stretch the last li tag in horizontal menu till end of menu. Here is my code:
#menu{width:600px; height:50px; background-color:#666; }
ul{padding:0; margin:0;}
ul li{list-style:none; height:20px;}
li{
float:left;
background-color:#999;
display:block;
padding:10px;
border-right-style:solid;
border-right-width: 1px;
border-right-color: #000;}
<div id="menu">
<ul id="nav">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li class="last"></li>
</ul></div>
Just simply add
.last {
float: none;
}
and the complete thing will be as wide as it can because it's display is set to block.
Alternately you could just set the background-color of the ul.
UPDATE
The solution doesn't work perfectly, as it does span the li over the complete ul.
The fix is actually pretty simple:
.last {
float: none;
overflow: hidden;/* Add this */
}
See updated jsfiddle: http://jsfiddle.net/BsrLD/8/
You can take off the float on the last li and it gives the result i think you want.
.last{float:none}
You can see in this FIDDLE