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
Related
i'm trying to create an horizontal menu on my site.
The idea is to have a layout in this way ----O---- where the - are the links of the menu and the O is a picture put in the middle of the page, so the two list are on the left and on the right and the are around the picture.
I've created the html
<div class="prima">
<ul class="prima_lista">
<li>primo</li>
</ul>
</div>
<div class="seconda">
<ul class="seconda_lista">
<li>secondo</li>
</ul>
</div>
and then i've created the CSS that will organize everything
.prima{
position:absolute;
top:400px;
width:50%;
left:-70px;
border:1px solid red;
}
.seconda{
position:absolute;
top:400px;
width:50%;
right:-70px;
border:1px solid green;
}
ul.prima_lista {
margin:0 auto;
list-style:none;
text-align:right;
border:1px solid blue;
}
ul.seconda_lista {
margin:0 auto;
list-style:none;
text-align:left;
border:1px solid blue;
}
ul.prima_lista li {
display:inline-block;
border:1px solid gray;
}
ul.seconda_lista li {
display:inline-block;
border:1px solid gray;
}
ul.prima_lista li a {
text-decoration:none;
color:#000;
font-size:18px;
}
ul.seconda_lista li a {
text-decoration:none;
color:#000;
font-size:18px;
}
The big problem is the while the first ul/li works perfectly and is well aligned on the right edge of the div... the second one instead present some spaces between the UL and the DIV margin. Is there a way to eliminate this space?
No matter how much i try i haven't find a way to solve this riddle -> http://jsfiddle.net/7voe8jea/
--- i've updated the link to the jsfiddle. first of all for it didn't work... and second because i think i haven't explained myself very well. What i'd like to do is to "push" the second ul to the left of the div just like the first one is aligned to the right edge of the first div.
I saw that rather that using an id for the div you used a class. SO i changed it to an id, and prefixed everything in the css with a #. Here is a link to the js with it working http://jsfiddle.net/fstxsd5g/1/
Here is the html:
<div id="lista">
<div id="prima_lista">
<ul id="prima_lista">
<li>primo</li>
</ul>
</div>
</div>
And the css
#lista {
position:absolute;
height:60px;
width:100%;
top:400px;
border:1px solid #000;
}
*/
#prima_lista{
position:absolute;
top:400px;
height:60px;
width:50%;
left:-70px;
border:1px solid red;
}
ul.prima_lista {
margin:0 auto;
list-style:none;
text-align:right;
}
ul.prima_lista li {
display:inline-block;
/* border-top:1px solid #dededc; */
/* padding-top:16px;
padding-right:40px; */
}
ul.prima_lista li a {
text-decoration:none;
color:#000;
font-size:18px;
}
.seconda_lista{
width:50%;
right:-70px;
}
ul.seconda_lista {
margin:0 auto;
list-style:none;
text-align:left;
}
ul.seconda_lista li {
display:inline-block;
border-top:1px solid #dededc;
padding-top:16px;
padding-right:40px;
}
ul.seconda_lista li a {
text-decoration:none;
color:#000;
font-size:18px;
}
Hope this helps! Littleswany
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
I have a HTML button, I have to display it just like smart phone dialpad. like number and ABC etc.
<a href="" class="button">
1
<span>ABC</span>
</a>
everything is fine except the text is not visible in the button. How can I solve that ?
You just need to change the style of the span to wrap correctly.
add display: inline-block; to your a span selector so that it looks like this:
a span {font-size:8px;
text-transform:uppercase;
display:block;
text-align:center;
line-height:0em;
margin-top:-5px;
font-style:italic;
display: inline-block;
}
The best solution is usually the simplest. In this case, just a one line addition.
All you need to do is add a height to your button element. Here is an updated fiddle: http://jsfiddle.net/2nv7A/8/
.button {
...
height: 100px;
}
Try this:
a span {
font-size:8px;
text-transform:uppercase;
display:block;
text-align:center;
line-height:0em;
margin-top:-15px; // pulled up the text a little more
margin-bottom:10px; // pushed down the margin at the bottom
font-style:italic;
}
Fiddle around with these and you'll find the best one for you
DEMO HERE
U can use overflow property to show the text cutting off and then can manage height of your element.
.button {
position: relative;
width: 62px;
overflow: visible;
/*border: 1px solid black;*/
border: 1px solid black;
border-radius: 12px;
/*border-radius: 7px;*/
Outline: none;
margin-left:2px;
margin-bottom:7px;
border-color:#ccc;
}
If you remove your positioning, decrease your line-height and then remove your span height (which was set to 0 preventing it from appearing) then it seems to work fine. Here
.button {
width: 62px;
/*border: 1px solid black;*/
border: 1px solid black;
border-radius: 12px;
/*border-radius: 7px;*/
Outline: none;
margin-left:2px;
margin-bottom:7px;
border-color:#ccc;
}
a{
display:inline-block;
vertical-align:top;
text-align:center;
text-decoration:none;
font-weight:bold;
line-height:25px;
overflow:hidden;
font-size:12px;
}
a span {font-size:8px;
text-transform:uppercase;
display:block;
text-align:center;
font-style:italic;
}
Decresea the line-height property of .a AND increase the line-height of a. span.
You need to change the margins on your span. Use this CSS:
a span {font-size:8px;
text-transform:uppercase;
display:block;
text-align:center;
line-height:0em;
margin-top:-10px;
font-style:italic;
margin-bottom:15px;
}
It's because you set the display:block for the span tag, which should be display:inline-block;:
a span {
font-size:8px;
text-transform:uppercase;
display:inline-block; /* <---- here */
text-align:center;
line-height:0em;
margin-top:-5px;
font-style:italic;
}
Fiddle
how to get rid of the border-bottom which under test text in the li when the mouse hover on the test text by css?
the html :
<div class="rank">
<ul>
<li class="tab1 active">test</li>
<li class="tab2">one</li>
</ul>
</div>
<div class="content">....</div>
my style(it's doesn't get rid of the bottom under test text):
.active{
background-color:#FFFFFF;
}
rank ul li{
float:left;
border:1px solid #D5D5D5;
border-bottom:none;
}
.content{
clear:both;
border-top:1px solid #D5D5D5;
}
ps: why when i use overflow:hidden to rank div, it can prevent the float to the content div?
#zhuanzhou; may be you have to play with margin padding
for example
.rank ul{
border-bottom:1px solid #D5D5D5;
}
.clr{
clear:both;
}
.active{
background-color:#FFFFFF;
padding-bottom:1px;
margin-bottom:-1px;
}
.rank ul li{
float:left;
border:1px solid #D5D5D5;
border-bottom:none;
margin-right:10px;
}
.content{
clear:both;
border-top:1px solid #D5D5D5;
}
check live demo http://jsfiddle.net/PBBED/
NOTE:in my example i am using clear:both instead of overflow:hidden for clear floated child element.
.active {
background-color: #ffffff;
border-bottom: 1px solid #ffffff;
margin-bottom: -1px;
}
.active{
background-color:#FFFFFF;
}
ul li{
display:inline;
}
li{
border-bottom:1px solid;
}
li:hover{
border-bottom:none;
}
.content{
clear:both;
border-top:1px solid #D5D5D5;
}
Remove line 7 in your css then start a new selector using the css psuedo class :hover at the end
rank ul li:hover {
border-bottom: none;
}
Although, older browser will disregard that unless it is on an a tag.
(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;
}