How do I position this button
in the center of this page?
This rule in your css is responsible:
.thim-sc-button.home-6-top {
text-align:left;
display:inline-block;
margin-right:18px;
}
You can remove the home-6-top class from your button element to center it or just remove the text-align and display properties to keep the margin.
give this css styles to the div element containing the button
.container {
display: flex;
justify-content: center;
}
I tried it on your website, appears like that:
Tol,
Welcome to Stackoverflow.
You can try this
Related
I have the following RSS feed:
https://jsfiddle.net/yhtf36a1/
Right now, it gets displayed one below the other.
How do I use CSS to make it display two items per row, so that it looks like the following?
I tried using display:inline-block but that didn't work.
Use the following CSS:
.entry-wrapper {
float:left;
width: 48%;
background: lightblue;
margin: 1%
}
See the example here: jsfiddle.net/GillesCoeman/5e8z00z1
Hope this helps
*{font-family:arial}
.rssRow{display:flex}
.entry-wrapper{display:inline-block; margin:.25em;background:#f3f3f3; border:3px solid #f1f1f1; background:#FFF;padding:10px;border-radius:5px;}
.entry-wrapper:hover{background:#edfdff;border:3px solid #f4f4f4}
.entry-image{float:left;}
.entry-text{float:left;}
.entry-title h4{margin:0; font-size:1.5em;font-weight:bold;}
.entry-title h4 a {color:#333; text-decoration:none;}
.entry-title h4 a:hover{text-decoration:underline;}
.entry-date{color:#999; padding-bottom:.75em;font-size:.75em}
Preview at https://jsfiddle.net/itsselvam/yhtf36a1/3/
Let me know for any query on this
I am using a bunch of divs (created with PHP) to generate a block of clickable elements. What I need to do is apply some styles to these generic elements, rather than to specific ones, yet using the code below seems to be invalid.
#Container {
height: 80%;
width: 60%;
background-color: green;
}
#Container div:hover {
background-color: blue;
}
<div id="Container">
<div style="background-color: red; width: 100px; height: 100px;">
</div>
http://jsfiddle.net/XD2eZ/
So I am not sure if it is an issue that a generic div element cannot be styled as a sub-element AND have a :hover attribute that operates properly. I know that classes or id's can be specified to handle this, but have thousands of unique divs. I also cannot use
#Container:hover div{ background-color: blue;}
As it ALSO seems to be invalid, but I need to select the one element from a block, and not all at once.
Any ideas here? Thanks in advance.
This will work if you remove the background color from the HTML, and apply it using css:
#Container {
height: 80%;
width: 60%;
background-color: green;
}
#Container div {background-color: red;}
#Container div:hover {
background-color: blue;
}
Example: http://jsfiddle.net/XD2eZ/1/
The reasone is CSS Specificity - a style attribute rule is much more specific (stronger) than an ID + element rule.
I am looking to handle files that were uploaded by users. The main issue in that situation is that they differ in size.
How can I center an image of unknown size, both vertically and horizontally, into a div?
Thanks a lot
EDIT: I am making a thumbnail for an image. Basically, I want to keep the div to the same size, and I want the image inside that div to fit the div, but without changing the scale. I am using overflow:hidden
EDIT:My code is
<div class='pic'><img id='theimage' src='image.png'></div>
and my CSS is
#theimage {
vertical-align: middle;
display: inline;
}
You can do this using the background CSS property. Give your <div> these properties:
div.whatever {
background-position: center center;
background-repeat: no-repeat;
}
Then in your HTML (because it's being generated dynamically), add a style="" attribute to the <div> with the URL of your image in it:
<div style="background-image: url('/path/to/image.png');"></div>
You could do this with an <img> tag inside the <div> too:
<div>
<img src="image.png">
</div>
With this CSS (untested, should work):
div {
text-align: center;
}
div img {
vertical-align: middle;
display: inline;
}
I'm assuming you've given your <div> a fixed width and height elsewhere.
Force the container to behave as a table cell.
#container {
display: table-cell;
vertical-align: middle;
text-align: center;
}
Demo
i got a suggestion though this thread is old
try
< div style='text-align:center;overflow:hidden;width:200px;height:200px;' >
< img src='anypath' width='190'style='vertical-align:middle;display:inline;' />
works just fine ! goodluck
I've done a bit of searching but so far I am confused as to what the best way to show a hidden image in CSS that only pops up if a random chance trigger in PHP happens, and during that random chance being successful, to play audio using html5.
If this is not possible, please let me know as I am trying all sorts of things.
As for right now I am using CSS to hide the image offscreen manually by a few thousand pixels, and then on a mouseover to bring it back. What I am trying to figure out is, how can you make php execute this if certain criteria are met? I want it to have a random chance of happening when an input button is clicked, this input button also loads another php document into a frame on the page, if that is of any help.
#hideme a img
{
height: 0;
width: 0;
border-width: 0;
}
#hideme a:hover img
{
position: absolute;
top:-60px;
left:40px;
height: 60px;
width: auto;
}
#hideme ul
{
list-style:none;
position:absolute;
left:-9999px;
}
#hideme ul li
{
padding-top:0px;
float:none;
margin:0px;
}
#hideme li:hover ul
{
left:-40px;
}
Is there a reason the random chance has to be with PHP? If you could use Javascript then on the onclick event of the button you could do
function onclick(e) {
if(Math.random()>.5)
$('#hideme').show();
}
And the changed css
#hideme ul
{
list-style:none;
position:absolute;
display:none;
}
My Website
On the link above you can see that I have a CSS drop down menu in my site. It works fine, however, I want the top level items to stay highlighted when I'm on the page they represent.
I have this so far but it won't work (I'm only showing one menu item which doesn't have any sub menus as it saves space)
Here's the HTML:
<ul>
<li><h2><a name="donate" id="donate" href="index2.php?op=Donate">Donate</a></h2></li>
</ul>
Here's the CSS that colours the background:
#menu a {
color: #000;
background: #efefef;
text-decoration: none;
}
The content of each page is determined by the value of $head: $head = $_GET['op'];
I tried to implement the change by placing this straight after the menu:
if($head == "Donate") {
echo '<style>
#menu a donate {
color: #000;
background: #fff;
text-decoration: none;
</style>';
}
When I leave 'donate' out of the above code: '#menu a {' the background color of all the menu items changes to white, but I need to change the 'donate' button specifically. I tried doing this by adding id="donate" / name="donate" to the menu item (as seen above), and then calling it in css with '#menu a donate {'. but that is obviously wrong as it doesn't work! What should I do?
I think you need to use
if($head == "Donate") {
echo '<style>
#menu a#donate {
color: #000;
background: #fff;
text-decoration: none;
}
</style>';
}
as a selector instead, because donate is an id for the a tag, therefore it comes immediately after the a tag (no spaces) with a "#" in front.
You were also missing a "}" closing bracket for the css declaration.
OK, quick and dirty answer : your CSS selector wont work, because right now it search for a tag "donate" inside a "a" tag inside a tag with the id "menu". I assume all your link have a specific Id, so the easy way to do it is to use this selector
#donate
{
color: #000;
background: #fff;
text-decoration: none;
}
As an added bonus, this selector will be faster to parse by the browser.
By the way, you seem not to close the style tag. Is that an error?
Now, for a longer answer, it is not exactly the best way to do it. I suggest you create a CSS class with a name like "currentpage" and to use it like this in your menu
<li><h2><a <?php if($head == "Donate") echo 'class="currentpage"'; ?> id="donate" href="index2.php?op=Donate">Donate</a></h2></li>
That way you can keep your style in the stylesheet where it will be easier to maintain. Now of course, if all your menu tags are handcoded, you may find it pretty tedious to add the condition in everytag. If it's indeed the case, I suggest you create your menu using a loop.
By the way, you should remove the name attribute in the a tag, its a deprecated feature. id does the job just fine.
In this kind of situations, you will generally use a CSS class for the currently highlighted item :
<a href="..." class="highlight" ...>Current item </a>
<a href="..." ...>not current item</a>
This way, you won't change the id nor name nor anything else -- but just :
When an item is highlighted, add the css class
And when an item is un-highlighted, remove the css class.
That class can be added from Javascript, if necessary -- but it can also be generated from PHP, using something like this :
<a href="..." <?php if ($current=='item1') {echo 'class="highlight"';} ?> ...>Current item </a>
<a href="..." <?php if ($current=='item2') {echo 'class="highlight"';} ?>...>not current item</a>
usgin css you can try like this:
#menu a:active {
color: #000;
background: red:
text-decoration: none;
}
using jquery this can be done as following:
First create a css like below:
.active {
color: #000;
background: red:
text-decoration: none;
}
then write jquery code:
$('#menu a').click(function(){
$('#menu ul li h2').find('a.active').removeClass('active');
$(this).addClass('active');
});
You should set a class for the current page item using php, and use css to set rules for that class.