I'm having trouble setting the width of the in this Coda-Slider tab set up. I'd like all the tabs to display in one line rather that wrap to two.
http://www.cidigitalmedia.com/coda-slider-2.0/index.html
You'll see the last tab wraps below.
Looked over the CSS and .js and could not find anything setting the to 552...
But IE Developer Tools toolbar and Firebug show an inline style of 552px...
I just can't find where that is.
Style sheet:
http://www.cidigitalmedia.com/coda-slider-2.0/stylesheets/coda-slider-2.0.css
Would greatly appreciate some help.
Best wishes,
Adninjastrator
You're right. Some of the styles in the slider aren't in the CSS, but are instead in the HTML using style attributes. You'll need to open the index.html page, find the ul, and replace the style="width:572px attribute to style="margin-left: 0px; width: auto;" or something that suits your needs.
For a cleaner perspective, you could create your own CSS class or id.
ul#tabs {
margin-left: 0px;
width: auto;
}
And give ul an id id="tabs"
Related
I'm new to CSS. I have copied a CSS from existing code and changed as below:
.feedback_h1 {
width: 100%;
float: left;
margin: 0px;
font-family: Arial;
font-size: 12px;
font-width: 400;
color: #000000;
margin-bottom: 15px;
}
<div Class="feedback_h1">
We will use only personal information. Our <a href="https://example.com" target="_blank">privacy
policy</a> agreed?
</div>
Right now I'm getting result as below:
We will use only personal information. Our
privacy policy
agreed?
However, I'm expecting a result like (in one line) :
We will use only personal information. Our privacy policy agreed?
I think, I need a right alignment (as left is aligned properly) OR
Am I missing something in CSS? What additional attribute can I consider in CSS to make this in a single line?
Is VS 2013 provides a designer view to align cshtml page?
It seems as though your <a> anchor element might have a display of block. This will cause the words wrapped between the anchor elements to have a width of 100% by default.
Try putting the following in your css
.feedback_h1 a {
display: inline-block;
}
<a> elements are display: inline by default, so not sure why it might be like this. But from the code, that seems to be the most obvious reason your code is having this result.
To figure out what's going on, I would suggest using your browser's inspector tools and directly inspecting the element. It usually helps with debugging to look at the CSS styles applied to an element, and test by unchecking them, or changing them, to see the live effect of this on your site.
My team developed the portfolio website.
But we are facing with strange issue.
We pasted this issue in the theme support, but it is not yet solved.
While loading this page, it is giving sometimes like this:
and sometimes like this(We want like this):
How to get rid of this??
I'm not very familiar with Wordpress but if you have access to the CSS that controls the template them maybe you can use Firebug or Inspect Element to find out if the upper and lower divs have any class specifications, and then set the margins to zero in the CSS file like this:
I'll pretend Firebug revealed div classes upperdiv and lowerdiv like this:
<div class="upperdiv">photos</div>
<div class="lowerdiv">photos</div>
in the CSS you could try:
.upperdiv {
margin-bottom: 0px;
}
.bottomdiv {
margin-top: 0px;
}
Hope this helps.
Motive
Google receantly added a feature to display only mobile friendly pages in a mobile google search. Since I did already some CSS tricks to adopt mobile devices, I've confidently tried their test, but surprised by the results. Although I could quickly address 2 errors, there is one, that I have difficulty to quickly fix it: Links are too close together.
My site sports a menu like list, that altough I could quickly fix (and I may already have) and adopt to a mobile screen without any change in the desktop appearance, however sometimes links are inevitabely ends up above in each other in the body of each page. Also on one page there is a list that happens to have a list of links each other, but I'm not sure I would like to apply a CSS style to the list elements, to leave greater space in between list items (yet). I'm not seeking help on how to properly resolve that, (Like only leave gap between them, if they are actually end above each other) because it may fall under the "rethorical" question category. (Of course, I'm open to suggestions, if you have one.)
Question
I've decided, that I'll go with an ugly solution for now, that to leave a margin above&below each link regardless, what is surrounded with. Simply changing the margin did not worked. How can I do this? The page I'm currently testing is at http://adam.lehelj.com/ but the sub-domain is in currently only in hungarian.
Edit
The pages are generated from Markdown using PHP Extra library by Michel Fortin and I would prefer not to modify these files. It has a limited feature where to apply classes. (I believe it is for title, code and links.)
The answer as to why you cannot set a margin top or bottom to an achor can be found here, more specifically about the margin top and bottom:
These properties have no effect on non-replaced inline elements.
one solution that you could use would be to set a line-height on your anchors.
With the links on the top left of your example page you can add a class to the anchor tags.
<a class="links" href=""></a>
The css could be something like..
.links {
display: block; /* default is inline and top margin won't work on an inline element */
margin: 3px 0px 3px 0px;
}
With the social links on the page bottom top margins should work fine for you as well. Just adjust the numbers until google is happy with the spacing and sure that people with fat fingers like me aren't clicking on 5 links at a time ;)
li {
margin: 3px 0px 3px 0px;
}
If the rest of your site is more complex add a class to the ul or li or wrapper div around them to differentiate styles as needed.
html
li class="social-links-item"
css
social-links-item {
css here
}
html
<div class="social-links-wrapper">
<ul>
<li></li>
</ul>
</div>
css
.social-links-wrapper li {
css here
}
So I have a simple page:
www.kensandbox.info/centerthis
This is a simple html/css page and I'm trying to add a paypal button.
The problem is that I can't figure out how to center the button? I've tried adding the following:
<div align="center"> form code here </div>
No dice. I've even tried adding the center tag before the form.
The site code (simple html and css file) can be downloaded here:
www.kensandbox.info/centerthis/centerthis.zip
My guess is that one of the other CSS elements is overriding my change.
What am I missing?
Thanks
there is a float:left in form input, form .btn inside mycss.css
Add float:none to that input if you want to override.
Without looking at your code I would say the best way to center a div is usually make sure it's displayed as a block element (should be by default) and that its width is specified; then finally apply margin: auto.
e.g.
<div class="container">
...
<div class="centered-element"> form code here </div>
...
</div>
where
container {
width: 200px;
}
centered-element {
width: 150px;
margin: auto;
display: block; /* to make sure it isn't being mucked up by your other css */
float: none; /* to make sure it isn't being mucked up by your other css */
}
Edit:
I say to do it this way because, like I now see someone has commented, <div align="center"> is deprecated and so is the <center> tag. To expand, this is because your HTML should only be used to create the structure and semantics of your web page, and CSS should be used for the presentational aspects of it. Keeping the two separate as best as you can will save you a lot of time in the long run.
Also it's best to design your CSS in a way where you shouldn't have to set display: block; on a div (because a div is already a block element) and your shouldn't have to unset a float by using float: none;. For more on a good way to do that, improve your workflow, save yourself some time, and generally be awesome, check into object-oriented CSS a.k.a. ooCSS
I found the answer and I want to thank the two individuals who took the time to answer.
The thing I didn't understand is how to look at a web page and see what CSS code was driving the formatting.
Some research lead me to a Chrome plug in named CSSViewer. Using this plugin and the information from the answer I was able to identify a float left css element that I simply had to change to a float center.
Thanks again for the help.
I'm reworking a site but only have permission to change the CSS. Most of the elements I need to change are properly tagged as id's or classes, but a few places have ids or classes listed inside an img tag.
I want to replace that image in the img tag using only css. Is there a way to do this? ie, hide the src img and have only my css referenced image visible?
sorry for such a late post, (almost a year, i know..), but i had the same exact problem Dreamling,
Some of the html used on our site is called up externally, so editing the html was not an option for me either. Here's how i solved the problem... Using only CSS.
Use Firebug if you have it.
Now look for the image you'd like to replace in the HTML. (firebug will show the id's and classes of the elements)
Your HTML should look something like this for it to work. (with an img src element inside a span element)
<span class="Dreamlings_ClassA Dreamlings_ClassB">
<img src="http://www.dreamlingsSite.com/dreamlingspic.png" alt="Dreamling's Pic">
<span>[This is just an extra span!] </span>
</span>
Now for the CSS :)
Call up the first element by class in the css. (use the last class name to be more specific in with editing [if you have multiple span elements with same first class name])
<span class="Dreamlings_ClassB">
should look something like this..
span.Dreamlings_ClassB {
background-image: url('../dreamlingsnewpic.png') !important;
}
and to hide that pesky image in the img src element..
span.Dreamlings_ClassA img {
display: none !important;
}
And thats it! :)
p.s. I was using the !important tags in my css to overwrite other external stylesheets..
but you don't have to use the tags if yours css will work without them. (you just have to be more specific in the css with id's and classes)
Hope this helped!
-tony
If your image tag is inside a container, anything that's a block, then use this:
<style>
#container {
background: url('image.png') no-repeat;
text-indent: -9999;
}
</style>
<div id="container">
<img src="image.png" alt="image to be replaced" />
</div>
As others said, it's really not good practice, but it works. Only tested in Chrome.
I want to replace that image in the img tag using only css.
Not that I know of, no. An image's src attribute can't be altered from CSS.
I also can't think of a workaround to do this, not even a terribly kludgy one. You can of course assign a background-image to the image element, but the actual image will always be in front of it,
You would have to have the original HTML altered in a way so the original button is a <button> element with a background-image property - that you can override using CSS.
Restricting access to the HTML but allowing access to edit CSS is odd practice. Both elements go hand in hand to produce the page.
Anyway, you could try removing or changing the name of "btn_next.png" so that it doesnt display when called from "src" and make the CSS the following:
#btn_next {
background: url('image.png') no-repeat;
display:block;
width:150px; /* for example */
height:30px; /* for example */
}
If that doesnt work, the only other way would be to hide the input button and replace the li row with a background image but then the button will cease to work. Unless you have access to an already included javascript file, then you can look at other solutions.