I've been trying to get the overflowing text to go to a new line, to no avail.
In the thumbnails section of my website, the thumbnail title is set to "overflow: hidden":
.thumb_title a {
color:#333333;
line-height:18px;
overflow:hidden;
text-decoration:none;
white-space:nowrap;
}
.index .thumb_title a:hover {
background:none;
text-decoration:underline;
}
.thumb_title {
overflow:hidden;
padding-top:2px;
white-space:nowrap;
width:280px;
font-size:11px;
font-weight:bold;
}
I've read that if the width of the element is set, it will automatically wrap itself.. but the thumbnail_title is already set to 280px. I changed it to max-width but nothing happened. I've also tried adding "word-wrap: break-word" (CSS3), but there was no effect. Any ideas?
Remove white-space:nowrap; That prevents text from going to new lines.
These two selectors have nowrap and need it removed: .thumb_title and .thumb_title a
Fixing this will also change the layout. I recommend this:
.index .module {
display: inline-block;
vertical-align: top;
/* remove float: left */
}
There are few things preventing the wrap to happen.
Here the css changed :
.thumb_title a {
color:#333333;
line-height:18px;
/*overflow:hidden;*/
text-decoration:none;
/*white-space:nowrap;*/
}
.index .thumb_title a:hover {
background:none;
text-decoration:underline;
}
.thumb_title {
/*overflow:hidden;*/
padding-top:2px;
/*white-space:nowrap;*/
width:280px;
font-size:11px;
font-weight:bold;
}
But, you will have another issue with the floating statement , the next image will move right.
Related
Here's what I'm trying to do. I currently have a vertical menu at the very tippy top of my web page. I structured it with this CSS code.
#main ul {
text-align:center;
padding:0;
margin:0;
list-style:none;
}
#main li {
display:inline;
vertical-align:middle;
line-height:50px;
}
#main a:link {
text-decoration:none;
color:black;
transition:0.5s;
padding:30px;
}
#main a:hover {
text-decoration:underline;
color:gray;
background-color:white;
padding:50px;
}
Bad thing is that when I get to the hover, I want the background to also change on top of the background that I've already set with my div. I can't seem to get it in the same height as my div while keeping the width at the place that it was at. What exactly do I have to do with my code to get it to work? Thanks in advance.
Add this CSS rule to make the a elements fill their parent elements:
#main a {
display: block;
with: 100%;
}
I have this CSS :
<style>
#web_pagination_number {
float:left;
position:relative;
width:35px;
height:35px;
line-height:35px;
background-color:#111111;
font-family:Arial;
font-size:14px;
color:#ffffff;
text-align:center;
}
#web_pagination_number:hover {
color:#111111;
background-color:#93CF25;
}
#web_pagination_number a {
text-decoration:none;
color:#ffffff;
}
#web_pagination_number a:hover {
text-decoration:none;
color:#111111;
}
</style>
The problem i have it´s when i go over web_pagination_number , change the color of background of this div but no the color of the link , the link color only change when i go over the link
I don´t know how i can fix this
Thank´s , Regards
You need to add :hover to your web_pagination_number id, like this:
#web_pagination_number:hover a {
color: #333;
}
Just add a property display: block on a
Demo
I have a list with floated <li> elements, the heights are different, thats the problem. I know I know theres an alternative, display:inline-block but this propery adds extra spaces, and I dont know why.
My css:
ul {
padding:0;
margin:0;
list-style:none;
width:700px;
}
ul li {
float:left;
border:1px solid #000;
width:24%;
margin:0 0.3% 20px 0.3%;
font-size:11px;
}
.yellow {
background:yellow;
}
online preview: http://jsfiddle.net/f3CA3/1/
you can do it clearing the sides as:
clear:both;
or maybe
clear:right;
just as an example, could be also;
clear:left;
The image is pretty self explanatory. I can't get rid of those two pixels at the bottom of only one list element. I've inserted text-decoration:none and list-style-type none in every corner of the css with no results.
Reason?
http://s1089.photobucket.com/user/3Joez/media/disp_zps6fe2774c.jpg.html
#rightnav {
float:right;
width:65%;
height:50px;
/*border:2px solid #Df1;*/
}
#rightnav ul {
margin-left:9.5%;
/*border:1px solid #F30;*/
width:500px;
}
#rightnav ul li {
display:inline-block;
font-family:Times New Roman, Times, serif;
font-size:1.4em;
margin-left:2%;
margin-top:1.5%;
color:#FFF;
text-decoration:none ;
list-style:none;
list-style-type:none;
}
Pretty sure you have an <a> inside your <li>. Did you change the text decoration on that? Changing it on the <li> will probably not change the inner style because the UA CSS likely ties the underline style to the <a> tag.
#rightnav ul li a {
text-decoration:none;
}
Hi guys I'm new and making progress in css design. I tried setting the border, margin, padding to 0 of container that has a gray background, but I can't remove the whitespace above, below, left and right. How do I remove it and stretch to fit the browser without extra white space on top, bottom left and right?
Here's what I have so far. Thanks :) http://jsfiddle.net/blackknights/3yhRt/embedded/result/
#charset "utf-8";
/* CSS Document */
#container {
min-width:1024px;
min-height:768px;
background:#CCC;
border:0;
padding:0;
margin:0;
}
#container2 {
width:1080px;
background-color:#FFF;
min-width:1024;
}
#wrapper {
min-width:800;
min-height:600px;
}
#header {
width:900px;
min-height:120px;
background-color:violet;
}
#menubar {
width:900px;
height: 30px;
padding-top:5px;
padding-bottom:5px;
text-decoration: none;
}
ul {
list-style-type:none;
padding:0;
margin:0;
display:inline;
}
li {
list-style-type:none;
background-color:#;
border-right:1px solid #CCC;
float:left;
padding-left:30px; /*adjust space of menu text to each other*/
padding-right:30px;
padding-top:8px;
padding-bottom:8px;
}
a:link {
text-decoration:none;
} /* unvisited link */
a:visited {
text-decoration:none;
} /* visited link */
li:hover {
background-color:#ffd640;
}
ul#mcolor li:hover > a {
background-color:#ffd640; <!-- sets all link color when hovering to yellow -->
}
try:
body{
margin:0px;
padding:0px;
}
Try
body,html
{
min-width: 100%;
}
I agree with #ra_htial
I have updated fiddle for the same
Please refer and reply.