I am trying to use an unordered list to simulate tabs in CSS but the ones I create somehow extend into a form below them (which of course is unintended)
I created the tabs by floating links to the left. This is what I want,
But unfortunately, this is what am getting. Notice how the tabs displace the 'input' elements of the form. What is going on?
Here is my markup and CSS
<link rel='stylesheet' type='text/css' href='style.css'>
<div id='page'>
<ul class='tabs'>
<li><a href='www.google.co.ug'>google search</a></li>
<li><a href='showall.php'>show all names</a></li>
<li><a href='logout.php'>logout</a></li>
</ul>
<form action='storedata.php' method='post'>
<div class='simpledata'>
<label for='fname'>first name</label>
<input class='kyetagisa' type='text' name='fname' size='20'>
</div>
//more elements added here
<input type='submit'>
</form>
</div>
And here is style.css
label
{
text-align:right;
width:150px;
float:left;
clear:both;
margin-right:5px;
}
div.simpledata
{
margin-top:5px;
}
ul
{
list-style:none;
}
ul.tabs a
{
float:left;
margin-right:10px;
color:white;
text-decoration:none;
background-color:#00e;
}
#page
{
background-color:#eee;
margin-left:130px;margin-right:130px;
height:180px;
}
You could use:
form {
clear: both;
}
To force the form (and its child elements) to appear below the ul.
JS Fiddle.
You need to add a clearing div or br after your ul.
I just eliminated the float: left from the label css block.
http://jsfiddle.net/tTrAa/
Setting the 'overflow' style property of the list to 'hidden' should also work.
ul
{
list-style:none;
overflow:hidden;
}
Related
I'm trying to sort HTML elements. Basically, I would like to set UL LI menu (inline) to the right side, and the INPUT on the left to take all the remaining space, not to be fixed, and all that in 1 line. 3 LI elements, take just as many space as it needs (minimum, not fixed couse i might add some elements), and INPUT take everything else as far as it can (100% of whats left in line) .
I tried with various display: block, inline, inline-block, table, table-cell (with this I almost succeeded), float left, right, and i can't set it without putting fixed width on something...
<main>
<div id="searchBar">
<form>
<input id="searchInput"/>
</form>
<ul id="searchOptions">
<li></li>
<li></li>
<li></li>
</ul>
</div>
</main>
maybe to put some margins, overflows, hacks?
please help!
Like this, maybe?
ul {
list-style-type: none;
display: table-cell;
width: 1px;
padding:0 0 0 5px;
}
form {
display:table-cell;
width:100%;
}
li {
display:table-cell;
white-space: nowrap;
padding:0 5px
}
input {
width:100%;
}
Answer from Alohci is what I was looking for! I solved it like this:
<main>
<div id="searchBar">
<div id="searchText">
<form>
<input id="searchQuery" />
</form>
</div>
<div id="searchOptions">
<ul>
<li>Cla</li>
<li>Res</li>
<li>Pro</li>
</ul>
</div>
</div>
</main>
main div#searchBar {
display:table;
width:100%;
}
main div#searchText {
display:table-cell;
width:100%;
}
main div#searchOptions {
display:table-cell;
width:100%;
}
main input#searchQuery { width:100%; }
main ul { display:table; }
main ul li { display:table-cell; }
main ul li a { display:table-cell; }
I've created more divs around elements, and make main div as table, and those divs as cells, and after that UL as table and LI's as cells... I guess before it didn't work as FORM and INPUT was not in div, and wasn't able to fill 100% up to UL...
But Alochi gave me more compact version of this, THNX!
I created a listbox using nested div tags like so:
<div id="container">
<div id="scrollbox" >
<div id="content" >
<ul>
<li><img src="media/images/person.png" align="left"> Zero Users</li>
</ul>
</div>
</div>
<br><br><span id="status" ></span>
</div>
I have a javascript file that governs the listbox and a css file to set the styles:
#container{
background:white;
border: solid black 1px;
width:160px;
max-height: 150px;
margin:0px auto;
padding:20px 0;
}
#content{
background:white;
}
#scrollbox{
width:150px;
height:150px;
overflow:auto; overflow-x:hidden;
}
#status{background:#D8D8D8;}
I link to the external css file like so:
<link rel="stylesheet" href="media/css/jquery.listbox.css" type="text/css">
For the <ul> tag I wanted to eliminate the bullets that appear so I added the following to the css file:
#content ul {
list-style-type: none;
padding:0;
margin:0;
}
In FireFox and Chrome this styling for the <ul> tag was ignored. But if I setup a separate style on the webpage itself, it works as expected. Can someone explain why it works this way but not when I put it in the css file itself?
So, this might sound basic for some of you guys. But i just haven't been able to figure it out.
So i have this CSS and this HTML Code:
<style type="text/css">
ul.ppt {
position: relative;
}
.ppt li {
position: absolute;
left:0;
right:0;
}
.ppt img {
margin-left: 5px;
}
</style>
<center>
<ul class="ppt">
<li>
<img src="#">
<img src="#">
</li>
</ul>
With this code i will have 2 pictures next to each other in the center.
Now i would like to add 2 more pictures, those 2 just can't be in "lo" nor "li". But the pictures will have to be on the same row, one of them will be at the start and the other one will be at the end, how can i do this?
(Click here for a picture explanation)
Thanks in advance.
Check http://jsfiddle.net/AvqEB/1/
ul.ppt {
position: relative;
list-style:none;
display:inline-block;
padding:0;
margin:0
}
.outerimg { display:inline-block; margin-left: 5px;}
.ppt li {
display:inline-block;
}
.ppt img {
margin-left: 5px;
}
and html
<img class="outerimg" src="http://s.imwx.com//img/common/WinApp_Zoom_155x114.jpg" />
<ul class="ppt">
<li>
<img src="http://s.imwx.com//img/common/WinApp_Zoom_155x114.jpg">
<img src="http://s.imwx.com//img/common/WinApp_Zoom_155x114.jpg">
</li>
</ul>
<img class="outerimg" src="http://s.imwx.com//img/common/WinApp_Zoom_155x114.jpg" />
You can do this by floating things to the left. Here is a jsfiddle demo: http://jsfiddle.net/6L7x9/1/
On an aside, I find using DIV with a centered class far preferable to using the CENTER tag.
<style type="text/css">
ul.ppt {
position: relative;
padding:0px;
margin:0px;
}
.ppt li {
padding:0px;
margin:0px 5px;
list-style-type: none;
float: left;
}
.leftfloat { float: left; }
.inlineimage {
margin:0px 0px 0px 5px;
border:0px;
}
</style>
<center>
<img src="#" class="leftfloat inlineimage" />
<ul class="ppt leftfloat">
<li>
<img src="#" class="inlineimage">
<img src="#" class="inlineimage">
</li>
</ul>
<img src="#" class="leftfloat inlineimage" />
One does wonder why the bounding images must be outside the UL...
UPDATE POST OP COMMENT
Ok, I've taken your sample, dropped it into JSFiddle, and modified it so that back & forward are on either side of the "slideshow" image (http://jsfiddle.net/SFvGk/). One immediate issue is the varying width of the slideshow frame, which causes the "next" button to jump around. You could mitigate that by setting a fixed with for the UL, and then accepting empty space when narrower images are displayed.
Modifications:
Add class "payitforward" to the next/prev buttons.
Add style "display:inline-block" to UL and set margin/padding to 0 for UL and LI.
Add to top of script:
var $slideContainer = $("ul.ppt");
$slideContainer.width(cur.width())
Add to end of "forward" function:
$slideContainer.width(cur.width())
Comments:
You might look into events on the fadeIn/fadeOut functions to possibly smooth out movement of the "Next" button on the right, or just fix the width of the slideshow container so the "Next" button never moves.
Definitely look into requestAnimationFrame to replace "setInterval". Here is one resource: http://creativejs.com/resources/requestanimationframe/.
Use :after and :before.
li{height:20px; width:20px; margin:10px; background:red; display:inline-block; position:relative;}
li:before, li:after{content:" "; position:absolute; height:20px; width:20px;}
li:last-child:after{background:blue; right:-25px;}
li:first-child:before{left:-25px; background:green;}
Fiddle here.
OK, so I have this in <li> floating to the right... like so:
and here it is:
<div id="right_menu">
<ul>
<li class="search-li"><input placeholder="Search things here..." type="text" class="search-tr" /></li>
</ul>
</div>
Here's the CSS:
#right_menu {
float:right;
background: #575757;
}
#right_menu ul li a {
border-left:1px solid #fff;
border-right:0px !important;
}
The search-li class and search-tr have no style. The search menu is wrapped around #first_menu and that CSS is:
#first_menu {
background: #333 !important;
width:100%;
border-top:1px solid #fff;
}
#first_menu ul{
margin: 0;
padding: 0;
background: #333;
float: left;
}
Anyway, when I add <form action="search.php" method="get"> ... </form> around the <input> box inside the <li>... I get this:
How do I fix this?
Thanks
edit: On second thought, not even sure that adding form and pressing enter would even work...
FORMs are block elements, therefore they add a line-break. Reset the form's CSS so it doesn't.
Use:
form {
display:inline;
margin:0;
padding:0;
}
Using !important is a sign that do know how CSS specificity works. It's good to read up on this.
Also, it's good to start with a CSS reset, which would prevent this form layout problem completely.
I'm trying to create a div that would have a dynamic width depending on the content inside that div. It works well in Firefox but in IE I get linebreaks, see screenshot below:
The markup looks like this:
<div class="filter-dropdown">
<div class="filter-dropdown-options-wrapper">
<ul>
<li>
<label>
<input type="checkbox" checked="checked">(Select All)
</label>
</li>
<li>
<label>
<input type="checkbox" value="2010-01-31" checked="checked">2010-01-31
</label>
</li>
</ul>
</div>
<div class="filter-btn-wrapper">
<input type="button" value="Ok" class="btn-filter-ok">
<input type="button" value="Cancel" class="btn-filter-cancel">
</div>
</div>
and CSS looks like this:
.filter-wrapper div.filter-dropdown{
position:absolute;
top:-190px;
right:10px;
border:1px solid #CFD6DA;
z-index:10000;
display:none;
padding:10px;
height:170px;
background-color:#EEF1F2;
}
.filter-wrapper div.filter-dropdown .filter-dropdown-options-wrapper{
border:1px solid #CFD6DA;
padding:5px 10px;
height:130px;
overflow-y:auto;
background-color:#FFFFFF;
width:100%;
}
.filter-wrapper div.filter-dropdown .filter-dropdown-options-wrapper ul{
list-style:none;
padding-left:0px;
margin:0px;
}
.filter-wrapper div.filter-dropdown .filter-dropdown-options-wrapper ul li label{
display:block;
}
.filter-wrapper div.filter-dropdown .filter-btn-wrapper{
margin-top:10px;
text-align:right;
width:130px;
}
.filter-wrapper div.filter-dropdown .filter-btn-wrapper .btn-filter-ok{
margin-right:5px;
width:60px;
}
So, my question is - what do I have to do in order to avoid linebreaks and keep width of the outer div dynamic?
First, make your padding/margins on the right side of your inputs and that box small enough that it doesn't WANT to wrap. It's wrapping because it's running out of room. If you set the background color of the labels you'll probably see where it's ending.
Lastly as a failsafe you can set white-space: nowrap; but this should be a failsafe for funky font size issues and such not your primary solution because it will introduce complications of horizontal scroll bars etc.
Edit: Also, you need to get your <input...> tags out of the <label...> tags. The labels should be attached to the inputs by name, not by virtue of being inside them!