Is it possible to style DIVs so they look like follows:
with simple code
<div class='menubar'><div class='menu'>item1<br/>item2</div>...</div>
This is for menu. I wish just to resize selected DIV.
The features should be follows:
1) DIVs are placed from left to right without specifying absolute positions.
2) DIVs are taller than container DIV but don't stretch it
UPDATE
Please explain with DIVs or SPANs, I failed to use LEFT with them. I need to learn, not get ready solution.
This is pretty basic stuff.
1) don't use divs, use a list
2) float the child element
<ul class='menubar'>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
and the according css:
ul.menubar{
/*some fancy css*/
height:<x>px; /* is needed since it would collapse otherwise*/
}
ul.menubar > li{
float:left;
/* more fancy css */
}
Here you go with a fancy demo.
set a width to your divs, then use float:left; ?
this won't stretch the container
you can also use display:inline-block; (on the divs) and set text-align:center; to the container.
But it will stretch the container.
This will depend on what browser you want it to work for. For ie8 and below i suggest not using this code. Inbox me if you'd prefer an all browser version but to ignore ie 5.5, 6, 7 and 8 its best.
First of all for the menu I find it easier to use the unordered list method than a selection of divs and their ID's and classes. Heres a small example.
HTML List
<ul id="menu">
<li>
list1
</li>
<li>
List2
<ul>
<li>
Option2
</li>
</ul>
</ul>
CSS for the menu:
body, html {
padding:0px;
margin:0px;
width:100%;
}
body{
background:#FCFCFC;
}
#menu{
background:#333333;
list-style-type:none;
padding:0px;
margin:0px;
}
#menu > li {
padding:0px;
margin:0px;
display:inline-block;
}
#menu > li > a {
color:#FFFFFF;
text-decoration:none;
font-size:20px;
font-weight:bold;
}
#menu > li > ul {
display:hidden;
position:absolute;
}
#menu > li:hover > ul{
display:block;
}
thats the basics anyway. Once you've got that your ready to go!;
Related
I'm displaying a series of boxes as <li>s like this:
I want the text vertically centered in the boxes, but as you can see they are way too low. This is my HTML:
<div class="pagelinks">
<ul>
<li>1</li>
<li>2</li>
...
<li>6</li>
</ul>
</div>
and my CSS:
.pagelinks { float:right; margin:0; }
.pagelinks li {
display:inline-block;
width:20px;
height:15px;
border:2px solid #394E7E;
margin:0;
font-weight:bold;
text-align:center;
}
.pagelinks a, .pagelinks a:hover { text-decoration:none; }
I already had a look at vertically-align, but I think it will align the <li> in the <ul>, not the text in the <li>.
How do I fix this?
PS: in the accepted answer to a similar question it was suggested to use <sub>/<sup>, but I'm sure that not the way to do it.
Use line-height.
li{
line-height:15px; // the hight of the li
}
DEMO
Add line-height: 15px; to your li class
FIDDLE
The example you posted is incorrectly formatted HTML. The <a> tag should be inside the <li>.
Also, remove the height from the <li> elements and just use line-height on the <a> tags.
JSFiddle Example
I want to have a left-aligned navigation bar across the top of the page, but before (i.e. to the left of) the menu items, I would like a bit of text ("John Doe") that (i) has a substantially larger font size than the menu items but (ii) has the same baseline as the menu items.
From what I understand, the preferred/recommended way to do navigation bars is with floated <li>'s. However, I haven't found a way to use a left floated list and also have the menus align to the same baseline as the text to the left. My current CSS and HTML are:
<html>
<head>
<style>
#navdiv {
overflow:hidden;
border-bottom:solid 1px red;
}
#nav {
list-style:none;
margin:0;
padding:0;
}
#nav li~li {
float:left;
border:solid 1px blue;
width:100px;
}
#name {
float:left;
border:solid 1px blue;
font-size:40px;
width:250px;
}
</style>
</head>
<body>
<div id='navdiv'>
<ul id='nav'>
<li id='name'>John Doe</li>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
</body>
</html>
Is there any way to vertically align all left floated <li>'s to the bottom of the container <div>?
I should say: I can easily achieve the intended effect by using a table instead of a floated list (using vertical-align:bottom on the menu <td>'s), but since floated lists seem to be the recommended standard, I'd like to know if it's possible with them. (Though I really don't understand the animus folks seem to have against using tables for layout.)
Don't need to use float, in fact it's better if you don't, you can just set the display type to a table-cell
#navdiv {
overflow:hidden;
border-bottom:solid 1px red;
}
#nav {
list-style:none;
margin:0;
padding:0;
}
#nav li {
display: table-cell;
vertical-align: bottom;
border:solid 1px blue;
width:100px;
}
#nav li#name {
font-size:40px;
width:250px;
}
also, the extra border style was unnecessary, just change the selectors to #nav li and #nav li#name and you can supersede anything in #nav li with what's in #nav li#name because it has higher priority.
tables are bad mostly because of the way they load, as far as I understand they require the whole table to build before content can load, while using individual elements can load as they please, or something to that affect, i'm sure someone else could explain that part better.
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.
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
I have this ul menu:
<ul id="superfish-1">
<li class="active-trail">Inicio</li>
<li class="trail">Quienes somos</li>
<li class="trail">Contacto</li>
</ul>
and I need to align it horizontally.
I saw this question but positioning the ul as postion:relative; and setting left:50% didn't make it.
I also found this question but in my case I can't set the width manually because the menu load its content dinamically, then the width changes all the time.
This is what I need:
Write like this:
#superfish-1{
text-align:center;
}
li{
display:inline-block;
*display:inline;/*For IE7*/
*zoom:1;/*For IE7*/
}
Check this http://jsfiddle.net/SdkKd/
Add margin:0 auto; to css of ul.
Check this fiddle: http://jsfiddle.net/dURBJ/1/