Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
CSS
This icon image in on my recently installed forums style keeps repeating, creating an obnoxious background that is too noisy and distracts from the actual words.
Here is a copy of that particular element's CSS:
element {
}
ul.topiclist li.row dl {
padding: 2px 0;
}
ul.topiclist dl {
font-size: 10px;
}
ul.topiclist dl {
position: relative;
}
.clearfix, fieldset dl, ul.topiclist dl, dl.polls {
overflow: hidden;
}
dl.icon {
background-position: 95% 15%;
position: relative;
}
.topic_read_mine {
background-image: url("./images/icons/topic_read_mine.png");
}
I was able to retrieve this from the browser inspection tool # http://www.gaymerscommunity.com/viewforum.php?f=4
I would like for the icon to display only once. It is meant to be an indicator if the forum was read/unread.
Answered Below
added 'background-repeat: no-repeat' to the ul.topiclist dl
Also found 'dl.icon' and adjusted the background-position to display on the right.
Thank you.
Css Code to fix that.
ul.topiclist dl {
background-repeat: no-repeat;
}
background-repeat: no-repeat;
There is no PHP in here
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I am having some trouble trying to figure out what's happening with my page. As you can see below on the mobile version, it appears right next to the top part of the logo.
My current code for nav (the element in blue) is:
nav {
top: 0;
left: 0;
text-align: center;
font-style: italic;
font-weight: 700;
font-size: 25px;
}
Since it maybe hard to tell just by the picture, you can find the code to this page in https://jsfiddle.net/bg5srnj8/1/
nav > img {
vertical-align: middle;
margin: 0px 25px 10px 25px;
}
you had a 10px margin top in the image.
I hope it works.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I have an inhouse developed website for doing Home Inspections www.e-ghar.com. But I am facing a issue on its home page. The home page shows an extra blank space on the right side when viewed on a smaller screen. Can any expert of CSS help me in identification of issue?
There is two way to resolve your problem.
quick fix
body {
overflow-x: hidden;
}
Or actual fixes
.tt-wrapper {
overflow: hidden;
}
Try to something like this.
#fwslider {
overflow-x: hidden;
}
Looks like all you need is box-sizing: border-box.
box-sizing: border-box includes the padding and border in the width.
* {
box-sizing: border-box;
}
If you do this, you will have to change your .product1_of_3 to:
.product1_of_3 {
float: left;
width: 29.3333%;
padding: 2%;
margin: 0 2%;
background: #ffffff;
}
Try this.
#fwslider {
overflow: hidden;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I found this wonderful navbar online but I don't find the line in the code to remove the dots.
The current Looking: https://gyazo.com/0531847d45ebfc31d7a15b09b5404c9f
JSFiddle: https://jsfiddle.net/ujzge3sg/
#import url(http://fonts.googleapis.com/css?family=Open+Sans:700);
nav {
display: block;
width: 100%;
}
.navbar {
background: #f96e5b;
width: 100%;
}
.navbar-fixed-top {}
.navbar ul {
margin: 0;
padding: 0;
line-height: 1;
display: block;
zoom: 1;
}
Here's a tutorial of list-style-type, or in your words, those are the black dots.
Just do list-style-type: none; on the li list. It would help if you would learn HTML and CSS before asking a question about it.
Update
After seeing the full HTML and CSS, I saw the 'problem'. There was an after adding squares after every li. To remove the squares, just delete from line 68-78 in the JSFiddle.
Here's an updated version: https://jsfiddle.net/d7Lrartp/
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
Hi,
I have managed a blog(wordpress) for a company and pasted their header footer code to make the site look uniform. But the social icons in header are not clickable whereas they are clickable in rest of the website. Link to the blog is: Blog
Thank you.
Try this -
.social > li > a
{
padding:5px 3px;
}
.top-bar a
{
background:#0091EA none repeat scroll 0 0;
z-index:9999;
position:relative;
}
This is the solution:
.top-bar {
background: #0091ea none repeat scroll 0 0;
clear: both;
color: #ffffff;
float: left;
font-size: 12px;
padding: 5px 0;
width: 100%;
z-index: 99;
position: relative;
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have a background img 120x30, but it's not showing in the full size..why?
Please look here http://f1u.org/en - under each article readmore button.
<a> is an inline element. So, an inline element in not take height, width , vertical margin & vertical padding in it's.
Then we have to define display:block in the css like this:
.comments-link, .readmore-link {
display: block;
}
Add display: block;
.comments-link, .readmore-link {
background: url("images/readmore.png") no-repeat scroll 0 0 transparent;
border: medium none;
display: block;
font-size: 11px;
height: 30px;
line-height: 30px;
padding: 0;
text-indent: 8px;
text-transform: uppercase;
width: 120px;
}
The a tags are inline elements so width won't apply, they will automatically resize depending on content. If you change the display to block then you can control the elements width and height and should see the image. You might want to also float them so if you have the comments link and read more link they will be displayed side by side. Add the following to your style sheet:
.comments-link, .readmore-link {
display: block;
float: left;
}