So, in my header, I have a horizontal list of links. Next to them, I wanted a search bar, but when I insert it next to my links, all of them now appear behind my body div.
HTML:
<ul id="unordered">
<li>LInk1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li><input type="text"></li>
</ul>
CSS:
#unordered {
display:inline-block;
height:0px;
padding-bottom:5px;
margin-left:400px;
}
#unordered li a{
text-align:center;
color:white;
text-decoration:none;
font-size:18px;
list-style-type:none;
}
#unordered li {
list-style-type:none;
display:inline;
padding-left: 0px;
padding-right: 55px;
padding-bottom: 15px;
}
#unordered li link {
list-style-type:none;
margin-bottom: 10px;
}
Here's screenshots of before and after...
Before: http://prntscr.com/2jfi8i
After: http://prntscr.com/2jfhxz
Thank you.
Edit: I noticed that I forgot form tags. After I inserted them, it's no longer hidden behind the body div, but the links are now above the text box.
So I think what's happening is your #unordered is not wide enough with the position you give it. The text field shifts down. The following fixed it
#unordered {
display:inline-block;
height:0px;
padding-bottom:5px;
margin-left:100px; /*It's 100px instead of 400px, the ul is wider*/
}
There are other ways to fix it, the above is just one way.
Update
I removed the form tags, unless you really want those? (they were not in the original code) I then removed the height:0px which resolved the body appearing to be in front of the ul element. It was not allowing for any padding/margin below the text element. Again though, if the page stretches (the width increases) out the text input re-renders inline with the rest.
Please see Fiddle Update
Related
I am working on a supposedly simple drop down menu using HTML and CSS, and have encountered an issue. After scouring google and the forums to no avail, figured it was time to ask. I am trying to get the drop down menu to line up with it's parent element.
I have experimented with a few different methods, so far the most hopeful seems to be setting the "left:" value to the necessary percentage.
This brings up another issue though:
Issue: when I set the left value, I end up with a bunch of blank space to the right of the item that I can't seem to get rid of. Can't get the width right.
Code located here: https://jsfiddle.net/c6mz3t08/5/
HTML
<div id="navbar-top">
<ul class="horizontal">
<li>Home</li>
<li>About
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</li>
<li>Header</li>
<li>Header</li>
<li>Header</li>
</ul>
CSS for dropdown
.horizontal li ul {
opacity:0;
visibility:hidden;
text-align:left;
position:absolute;
top:50px;
left:-38%; //end up with blank space on right?
}
.horizontal li ul li {
position:relative;
background-color:#BBB;
display:block;
width:100%;
}
It seems the alignment problem happens because the <ul> starts after the word "About" in the second <li>.
a.) for positioning adjust the leftparameter in .horizontal li ul (-39px seems to work well).
b.) for the width of the submenus adjust the width parameter in .horizontal li ul li (70px worked well here, but depends on the content)
Do not guess on the left. The reason it is pushed to the right is because the ul has by default some padding.
Setting the padding to 0 and the left to 0 will fix this.
The space on the right is added because you set the width to 100%. If you remove the width it will fit its container. But that might not be what you want because the text will wrap, it might be better to set white-space:nowrap on it.
.horizontal li ul {
opacity:0;
visibility:hidden;
text-align:left;
position:absolute;
top:50px;
padding:0;
left:0; //using the LEFT parameter to get it in to alignment--end up with "blank" space on right?
}
.horizontal li ul li {
position:relative;
background-color:#BBB;
display:block;
white-space:nowrap;
}
Updated demo at https://jsfiddle.net/c6mz3t08/6/
I'm trying to make an HTML/CSS only <ul> layout in which the <li> items are evenly spread over the available width, and the padding between <a> and <li> elements are all the same. Here's my HTML-code (not very exciting):
<ul>
<li>item 1</li>
<li>item 2 with long name</li>
<li>item 3</li>
</ul>
The result should look like this:
The x of course represents the amount of padding, which is the same for every item in the list.
I tried to use display: table, but this doesn't give the desired result. When using display: table the spacing between the <li> items depends on the length of the text within the <a> element, so x is different for every element.
Since the available width and the amount of <li> items are variable, what is the best way to determine the value of x? I also also want x to have a maximum value of 100px, in this case the width of the <ul> isn't the same as the available width.
I presume this is possible with JavaScript, but since there's already a lot of JavaScript on the page I don't want to use anymore JavaScript than necessary. So I prefer a CSS/HTML only solution.
Here's the JavaScript i'm using:
var containerWidth = $('ul').outerWidth();
var liWidthTotal = 0;
$('li').each(function() {
liWidthTotal += $(this).outerWidth();
});
var padding = Math.round((containerWidth - liWidthTotal) / ($('.topNav > div > ul > li').length*2));
$('.li > a').each(function() {
$(this).css('padding', '0px ' + padding + 'px');
});
I'm basically checking how much space is available to fill (width of ul - width of li) and spread that equally to all A-Tags as padding. Why to the a-tags? So your hover effekts fill the whole width of that element. You can also give it to the LI's of course.
Of course you need to adjust your selectors in the jQuery call.
If you made your LI's inline-block you should also either write them in one line or give them float: left to prevent white-space between them.
In my example your UL needs to fill the whole width (display: block).
See this fiddle, you want to use display:table-cell; on the list items, and display:table; on the list element. On each list item then do padding: 0 100px;
CSS:
body{
margin:0;
padding:0;
width:100%;
}
ul{
margin:0;
padding:0;
width:100%;
display:table;
}
li{
border:1px solid red;
padding:0 100px;
text-align:center;
display:table-cell;
}
html
<ul>
<li>bipin</li>
<li>bipin kumar pal</li>
<li>pal</li>
</ul>
css
ul{
width:100%;
display:table;
}
li{
border:2px solid green;
display:table-cell;
text-align:center;
}
And see this link http://jsfiddle.net/bipin_kumar/t2B4B/5/
I just edited the below fiddles to match your requiremens.Try this fiddle : http://jsfiddle.net/t2B4B/9/
CSS:
body{
margin:0;
padding:0;
width:100%;
}
ul{
margin:0;
padding:0;
width:100%;
display:table;
}
li{
border:1px solid red;
padding-left:20px;
padding-right:20px;
display:table-cell;
}
I am trying to create a grid-style navigation menu, which I have done. Here is a jsFiddle of what I have so far. If you hover over the links you can see there is a 1 or 2px gap between the left and right hand columns, and I can't seem to get rid of it.
At the moment I have:
#nav {
float:left;
width:230px;
display:inline;
text-align:right;
}
#footer li {
display:inline-block;
text-align:left;
line-height:32px;
text-indent:10px;
width:49%;
}
If I set the li {width:50%} the list doesn't fit into 2 columns, but when it is set to 49% I get the gap between list elements. There must be some padding or margin coming in somewhere but I can't see it. Any help would be great.
My favorite method of fixing this is to use a font-size: 0 in the parent and then restore the font size in the child. What happens is that a physical space in your html code (for example, pressing enter after an element) renders a physical space in the code, aka a space in between lis. The font-size: 0 renders that space as no physical width, thus allowing for two 50% lis.
#nav {
font-size: 0;
}
#nav ul li {
font-size: 15px;
}
Check it out: http://jsfiddle.net/3XqZ3/9/
Another option would be to use floats to get the elements right up next to each other. This also gets rid of the space in between.
#nav ul li {
float: left;
}
A third option would be to make sure that there are no breaks in between elements in the html. Like:
<li>This is an li</li><li>This is another li</li>
Or:
<li>This is an li</li><!--
--><li>This is another li</li>
That is white space caused by your inline-blocks. Because they are 'inline', your white space is taken into account.
There are a number of ways to overcome this. One is commenting out the whitespace:
<li class="green">Home</li><!--
--><li class="green">FAQs</li>
JSFiddle
Or you could use floating:
#footer li {
float:left;
}
JSFiddle
You should use float instead of display, like this:
#footer li {
text-align:left;
line-height:32px;
text-indent:10px;
width:49%;
float: left;
}
Demo: http://jsfiddle.net/3XqZ3/11/
I'm trying to make the footer for my website. It's supposed to contain 5 lines of contact information, white text on a black background and white space between. So essentially it will look like 5 black strips on top of each other with white text on them.
The problem is that all the black strips turn out the same length, when I want them to be roughly the length of the text. I tried floating the list items instead of the <ul> and put line breaks after each one. The backgrounds were now the right size but I was unable to add the white space between them without messing it up.
HTML:
<ul>
<li>Company name</li>
<li>Adressadress 123444</li>
<li>023311 postal code</li>
<li>+358 12385495955</li>
<li>info#company.com</li>
</ul>
css:
ul {float:left;
li {
list-style:none;
background-color:black;
color:white;
text-transform:uppercase;
font-weight:bold;
margin-bottom:5px;
padding-left:5px;
padding-right:5px;
}
}
Any ideas?
Adding span tags around the text should solve your problem.
<ul>
<li><span>one</span></li>
<li><span>two</span></li>
<li><span>three</span></li>
<li><span>four</span></li>
<li><span>five</span></li>
</ul>
ul {
margin:10px;
}
ul li {
margin-bottom:15px;
}
ul li span {
background:black;
padding:5px;
color:white;
}
http://jsfiddle.net/uwPcv/
I'm working on a template like this:
The as you can see the frame (3) has a glassy border which goes behind the tabs (1,2). But I don't know how to do this layout in CSS. I searched stackoverflow and found the following threads, but they didn't help:
https://stackoverflow.com/questions/6649360/how-to-overlap-put-a-frame-layout-from-top-border-of-an-imageview
CSS problem, creating tabs
The HTML code is something like this:
<div id="frame">
<nav>
<ul id="topnav">
<li>Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
<li>Tab4</li>
<li>Tab5</li>
<li>Tab6</li>
<li>Tab7</li>
</ul>
</nav>
</div>
Try This
HTML :
<div id="frame">
<ul>
<li>Tab 01</li>
<li>Tab 02</li>
<li>Tab 03</li>
<li>Tab 04</li>
</ul>
</div>
<div id="frame2">Frame 02</div>
CSS :
#frame,#frame ul
{ height:30px;
background:#f0f0f0;
}
#frame ul li
{ height:30px;
float:left;
padding-right:2px;
}
#frame ul li a
{ position:relative;
height:30px;
display:block;
float:left; /* for IE6 bug */
background-color:#f00;
left:0;
top:0;
padding:0 4px;
color:#fff;
}
#frame ul li a:hover,#frame ul li a.active
{ height:40px;
}
#frame2
{ border:#000 1px solid;
padding:10px;
}
Please Check JSFIDDLE for Reference
I think you are looking for the z-index. An element with a higher z-index will appear above another element with a lower z-index. you can use something like this:
.tabSelected {
z-index: 99;
}
I would suggest having a look at jquery-ui which provides an example on the site of a tabbed element such as this, you can modify the design using the theme roller on the site to get the colours you want.
jquery ui tabs
If you're using CSS3, you could try using RGBA for the background colour of the frame - here's a couple of links:
SO question/answer
CSS Tricks article
RGBA will allow the divs to be slightly transparent while keeping the contents visible - just make sure the frame is slightly larger than the contents (so it can be seen) and set the background colour to match the glass effect.