(The target browser is IE8)
I have a div that contains a list of elements floated left. The elements width can change at runtime. I'd like to make it so that if they longer fit in the div it just gets cut off and doesn't wrap to a new line.
It only seems to work if the item is on a line by itself:
This page demonstrates the problem:
(The text input's width needs to change at runtime)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<style type="text/css">
div.aclb {background:#EEF3FA; color:#666; cursor:text; padding:1px; overflow-y:auto; border:#BBC8D9 1px solid; }
div.aclb:hover {border:#3399FF 1px solid;}
div.aclb.focus {background:#FFF; border:#3399FF 1px solid;}
div.aclb ul {padding:0; margin:0; list-style:none; display:table; vertical-align:middle; }
div.aclb li {float:left; cursor:default; font-family:Arial; padding:0; margin:0; height:18px;} /*Setting Height here is important. Seems li can have a height>18px on some browsers*/
div.aclb li.block {padding:0px 2px; height:16px; white-space:nowrap; border:solid 1px #BBD8FB; background:#f3f7fd; font-size:11px; line-height:16px;}
div.aclb li.block:hover {border:solid 1px #5F8BD3; background:#E4ECF8; color:#000;}
div.aclb input {margin:0; padding:0; height:18px; background:transparent; border:none; color:#666; overflow:hidden; resize:none; font-family:Arial; font-size:13px; outline:none}
div.aclb input:focus {margin:0; padding:0; height:18px; background:transparent; border:none; color:#22F; overflow:hidden; resize:none; font-family:Arial; font-size:13px; outline:none;}
div.aclb a.d {cursor:pointer; display:block; color:#6B6B6B; width:13px; height:12px;float:right; margin:1px 0 1px 4px; border:solid 1px transparent; font-family:Verdana; font-size:11px; text-align:center; line-height:10px;}
div.aclb a.d:hover { border:solid 1px #7DA2CE; background:#F7FAFD; color:#AD0B0B;}
div.aclb a.d:active {border:solid 1px #497CBB; background:#BAD8E8; color:#A90909;}
</style>
</head>
<body>
<div style="width:250px" class="aclb">
<ul>
<li class="block">
<a class="d">x</a><span>Item 1</span>
</li>
<li class="input">
<input type="text" style="width:300px" maxlength="30"/>
</li>
</ul>
</div>
</body>
</html>
You can do that easily by adding another block element around the floated ones, with high width and overflow set to hidden. Also, you'll need to set overflow:hidden to the original parent container.
Note that if the width of the floated elements exceed the width of the new block element mentioned above, they will wrap again. So I recommend a high value for that.
EDIT: I see you have a div with an ul and some li's inside. So you don't have to add a new element, since the ul is also a block element and it is already there.
Here is your code with some corrections:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<style type="text/css">
div.aclb {background:#EEF3FA; color:#666; cursor:text; padding:1px; overflow-y:auto; border:#BBC8D9 1px solid; }
div.aclb:hover {border:#3399FF 1px solid;}
div.aclb.focus {background:#FFF; border:#3399FF 1px solid;}
div.aclb ul {padding:0; margin:0; list-style:none; display:table; vertical-align:middle; }
div.aclb li {float:left; cursor:default; font-family:Arial; padding:0; margin:0; height:18px;} /*Setting Height here is important. Seems li can have a height>18px on some browsers*/
div.aclb li.block {padding:0px 2px; height:16px; white-space:nowrap; border:solid 1px #BBD8FB; background:#f3f7fd; font-size:11px; line-height:16px;}
div.aclb li.block:hover {border:solid 1px #5F8BD3; background:#E4ECF8; color:#000;}
div.aclb input {margin:0; padding:0; height:18px; background:transparent; border:none; color:#666; overflow:hidden; resize:none; font-family:Arial; font-size:13px; outline:none}
div.aclb input:focus {margin:0; padding:0; height:18px; background:transparent; border:none; color:#22F; overflow:hidden; resize:none; font-family:Arial; font-size:13px; outline:none;}
div.aclb a.d {cursor:pointer; display:block; color:#6B6B6B; width:13px; height:12px;float:right; margin:1px 0 1px 4px; border:solid 1px transparent; font-family:Verdana; font-size:11px; text-align:center; line-height:10px;}
div.aclb a.d:hover { border:solid 1px #7DA2CE; background:#F7FAFD; color:#AD0B0B;}
div.aclb a.d:active {border:solid 1px #497CBB; background:#BAD8E8; color:#A90909;}
</style>
</head>
<body>
<div style="width:250px; overflow: hidden;" class="aclb">
<ul style="width: 1000px; overflow: hidden;">
<li class="block">
<a class="d">x</a><span>Item 1</span>
</li>
<li class="input">
<input type="text" style="width:300px" maxlength="30"/>
</li>
</ul>
</div>
</body>
</html>
I hope it will work for you. :)
overflow:hidden on the parent container should do the trick.
Could you use "nowrap"? probably just for text mind you
It seems like you're looking for this sort of behaviour, no?
div.aclb {
overflow: hidden;
}
div.aclb ul {
white-space: nowrap;
}
div.aclb li {
display: inline;
}
Related
You guys will probably be able to answer this in a heartbeat but I have spent days trying to figure this out.
I am working on a responsive site and want to have a 3 column layout that changes width as the screen is resized. I have 3 divs defined: left 20%, center 59% and right 20% (99%). The divs are formatted correctly when they are empty (same height, same top and bottom alignment). When I add a menu to the 3rd column, it shifts column 3 down and aligns the bottom link to the bottom of the other two columns. If I vary the number of links, column 3 shifts down and aligns the bottom of the final link to the bottom of columns 1 and 2. All the reference examples are simple and work fine because they are very simple. Code and screenshot are attached.
Screen shot
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body {
background-color:black;
}
/* Logo Styles */
.divlogo {
width:96%;
height:71px;
background-color: #444;
}
/* Drop Down Menu Styles */
.column1 {
display:inline-block;
width:20%;
height:400px;
background-color:#888;
}
.column2 {
display:inline-block;
width:59%;
height:400px;
background-color:#444;
}
.column3 {
display:inline-block;
width:20%;
height:400px;
background-color:#888;
}
.ddm_menu {
margin-left:auto;
margin-right:auto;
padding:0;
list-style: none;
font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
font-size:14px;
width:100%;
}
ul.ddm_menu li {
margin-top:4px;
margin-left:auto;
margin-right:auto;
width:160px;
height:48px;
position:relative;
cursor:pointer;
display:inline-block;
}
.ddm_toplnk {
-moz-box-shadow:0px 0px 16px #fff inset;
-webkit-box-shadow:0px 0px 16px #fff inset;
box-shadow:0px 0px 16px #fff inset;
border-radius: 8px;
}
ul.ddm_menu li > a {
position:absolute;
top:0px;
left:0px;
width:160px;
height:48px;
z-index:12;
}
ul.ddm_menu li span.ddm_wrap{
position:absolute;
top:8px;
left:0px;
width:160px;
height:60px;
z-index:15;
}
ul.ddm_menu li span span.ddm_link {
color:#fff;
font-size:24px;
clear:both;
margin:auto;
}
</style>
</head>
<body>
<center>
<div class="divlogo">
</div>
<hr width="96%">
<div class="column1">
</div>
<div class="column2">
</div>
<div class="column3">
<ul id="ddm_menu" class="ddm_menu">
<li>
<a class="ddm_toplnk" href="#">
<span class="ddm_wrap">
<span class="ddm_link">Home</span>
</span>
</a>
</li>
<li>
<a class="ddm_toplnk" href="#">
<span class="ddm_wrap">
<span class="ddm_link">Contact</span>
</span>
</a>
</li>
</ul>
</div>
</body>
</center>
</body>
</html>
ks
Remove display:inline-block from ddm_menu class
change
ul.ddm_menu li {
margin-top:4px;
margin-left:auto;
margin-right:auto;
width:160px;
height:48px;
position:relative;
cursor:pointer;
display:inline-block;
}
to
ul.ddm_menu li {
margin-top:4px;
margin-left:auto;
margin-right:auto;
width:160px;
height:48px;
position:relative;
cursor:pointer;
}
Hope this helps!
Here is my HTML code snippet :
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin:0px;
padding:0px;
}
<!--Resetter rules for browsers-->
#bodyContainer {
}
body {
border:black 2px solid;
background-color : grey;
padding:5px;
}
#header {
margin:10px auto;
background-color : red;
width:70%;
height:80px;
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
}
#header1 {
display:inline-block;
width:50%;
text-align:center;
line-height:80px;
}
#header2 {
display:inline-block;
width:50%;
text-align:center;
line-height:80px;
}
#navmenu {
list-style-type:none;
background-color:#444;
border:black 2px solid;
width:100%;;
text-align:center;
float:left;
margin-bottom:20px;
}
#content {
}
#nav {
}
#navmenu li {
border:black 1px solid;
background:yellow;
border-radius:5px;
height:30px;
line-height:30px;
width:33%;
float:left;
}
#navmenu li a {
text-decoration:none;
display:block;
}
</style>
</head>
<body>
<div id="bodyContainer">
<div id="header">
<div id="header1"><h1>Welcome</h1></div><div id="header2"><h1>You Get to choose better !! </h1></div>
</div>
<div id="content">
<div id="contentHeader">
<p>You Select ... We Serve </p>
</div>
<div id="nav">
<ul id="navmenu">
<li>Home</li>
<li>Electronics</li>
<li>Fashions</li>
</ul>
</div>
</div>
<div id="sidebar">
</div>
<div id="footer">
<p>WebApp Version Numbered v1.0. All rights Reserved. </p>
</div>
</div>
</body>
</html>
Why the floated unordered list seems not to obey the 5px padding at the right edge of the parent container #bodyContainer ? Also is there any efficient way to distribute the floated list items evenly (except from setting it explicitly to Width:33%) as there is an apparent space after the last list item in the floated horizontal navigation list ?
The issue you are having in regards to your ul being unrespectful of the 5px padding on the body is due to the ul being floated.
#navmenu {
list-style-type:none;
background-color:#444;
border:black 2px solid;
// width:100%;;
text-align:center;
// float:left;
margin-bottom:20px;
}
For the distribution of the navigation elements, it depends. Whenever you float elements, they stop being contained by other elements. I think what you want to acheive would ask for display:inline-block;
Try this:
#navmenu li {
border:black 1px solid;
background:yellow;
border-radius:5px;
height:30px;
line-height:30px;
width:32%;
display:inline-block;
}
I want to remove the red lines in-between "google links" but I still want the border color to be red.
How do I do it?
Here is the code:
<!doctype html>
<html>
<head>
<title>Website</title>
</head>
<body>
<style>
a{
text-decoration:none;
color:white;
font-weight:bold;
font-family:tahoma;
background:black;
padding-top:2px;
padding-right:0px;
padding-bottom:3px;
padding-left:0px;
border:1px solid red;
margin-left:0px;}
</style>
googlegooglegooglegooglegoogle
</body>
</html>
You can set seperate border attributes for each a element like this:
a{
text-decoration:none;
color:white;
font-weight:bold;
font-family:tahoma;
background:black;
padding-top:2px;
padding-right:10px;
padding-bottom:3px;
padding-left:0px;
border-bottom: 1px solid red;
border-top: 1px solid red;
margin-left:0px;
}
a:last-child{
border-right:solid 1px red;
}
a:first-child{
border-left:solid 1px red;
}
fiddle
You can try below code:
Demo
Demo 2
<div style="border:1px solid red;">
google
google
google
google
google
<div>
Border-color will help you
Fiddle
CODE :
a{
text-decoration:none;
color:white;
font-weight:bold;
font-family:tahoma;
background:black;
padding-top:2px;
padding-right:0px;
padding-bottom:3px;
padding-left:0px;
margin-left:0px;
border-color:red;
}
You should use pseudo classes and remove your left and right border from a.
a {
border-right:none;
border-left:none;
}
a:last-child {
border-right: 1px solid red;
}
a:first-child {
border-left: 1px solid red;
}
See here for a demo
Wrap a div around your anchor tags and set the border to that div.
<div id="wrap">
google
google
google
google
google
</div>
Use display:inline-block; that your width is as big as your anchor tags.
Have a look at this fiddle
I have a vertical navigation menu but can't seem to get the text to start from very left edge of the element.
HTML
<div class="jobs-links">
<ul>
<li>Renovations</li>
<li>Remodelling</li>
<li>Adding</li>
</ul> </div>
CSS
.jobs-links {
list-style-type:none;
float:left;
border-bottom:1px solid #5f564d;
border-left:1px solid #5f564d;
border-top:1px solid #5f564d;
font-size:15px;
font-family:Calibri, Times, serif;
box-sizing:border-box;
width:10%;
text-align:left;
height:120px;
}
li {
list-style-type:none;
float:left;
display:block;
width:179px;
height:30px;
border-bottom:1px solid #5f564d;
}
Here is my jsfiddle
Cheers.
Add this:
ul{
padding:0;
}
fiddle
If I run the markup as it is now the <li> element is not within the <ul> element.
But if I add this style display:block; to #nav a so the complete #nav a declaration looks like this then the <li> element is within <ul>.
#nav a {
display:block;
margin:0;
padding:8px 16px;
color:#333;
text-decoration:none;
border:1px solid #9B8748;
border-bottom:none;
background:#F9E9A9;
}
Can anybody explain why the <li> element is within the <ul> when I add display:block to #nav a?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
font-family:Arial, sans-serif;
font-size:small;
width:720px;
margin:0;
padding:0;
}
#nav {
float:left;
width:100%;
margin:0;
padding:10px 0 0 46px;
list-style:none;
background:#FFCB2D;
}
#nav li {
float:left;
margin:0 1px 0 0;
padding:0;
font-family:"Lucida Grande", "sans-serif";
font-size:90%;
}
#nav a {
/* display:block;*/
margin:0;
padding:8px 16px;
color:#333;
text-decoration:none;
border:1px solid #9B8748;
border-bottom:none;
background:#F9E9A9;
}
#nav a:hover {
color:#333;
padding-bottom:5px;
border-color:#727377;
background:#fff;
}
</style>
<meta charset="utf-8" />
<title>Chapter 3</title>
</head>
<body>
<ul id="nav">
<li id="t-intro">Introduction</li>
<li id="t-about">About Lance</li>
<li id="t-news">News & Events</li>
<li id="t-sponsors">Sponsors</li>
</ul>
</body>
</html>
I update your code...
see following http://jsfiddle.net/LUzbR/
HTML
<ul id="nav">
<li id="t-intro">Introduction</li>
<li id="t-about">About Lance</li>
<li id="t-news">News & Events</li>
<li id="t-sponsors">Sponsors</li>
</ul>
CSS
body
{
font-family:Arial, sans-serif;
font-size:small;
width:720px;
margin:0px;
padding:0px;
}
#nav
{
float:left;
width:100%;
margin: 0px;
padding:10px 0px 0px 46px;
display: block;
list-style:none;
background:#FFCB2D;
}
#nav li
{
float:left;
display: block;
margin:0 1px 0 0;
padding:0;
font-family:"Lucida Grande", "sans-serif";
font-size:90%;
}
#nav a
{
/* display:block;*/
margin:0px;
padding:8px 16px;
color:#333;
text-decoration:none;
border:1px solid #9B8748;
border-bottom:none;
background:#F9E9A9;
display: block;
}
#nav a:hover
{
color:#333;
padding-bottom:5px;
border-color:#727377;
background:#fff;
}
You're floating the #nav element on the left, so all <li> elements will appear outside of that container. Try adding overflow: hidden; to your #nav for starters, although there's probably more that could be done to clean up your CSS.
Without adding display: block, a elements are treated as display: inline. As such, when calculating the size of their parents (height is default to auto), the padding of the a element is omitted, while it is included in cases of display: block.