I am trying to embed this iTunes button that I am putting on a site, but it seems to automatically alight left. Where and how in this code would I make the button center itself? Please see the example code below. Thanks!
Here's a quick fix if you have access to the css you could easily do this with flex box.
Wrap your anchor tag:
<div class="itunes">
</div>
add this css:
.itunes {
display:flex;
justify-content:center;
}
jsFiddle
Although adding inline-styles is frowned upon..., if your in a pinch this will work as well. Please don't do this unless you must:
<div style="display:flex;justify-content:center;">
</div>
note: flex box works on most browsers.
Related
The CSS centering works on this page: http://www.paragondictionary.info/A.html
But not on this page: http://www.paragondictionary.info/C.html
Both HTML pages are using the same CSS link so I don't know why the centering is not working on one page. Any help is appreciated.
The reason it's not working on the second one is because you forgot to add the
<div class="center">
</div>
that surrounds the definition list in the body
If you look at the first page in view source, you can see on line 20 there's a class called
.center
That is used to presumably, center the content.
you have forgotten to use {div class="center"} in the second page.
I'm trying to make my little icons on this page (http://www.alinewbury.com/contact.html) into links.
They're each in a div separately, but whenever I try to do:
<div class="social-btn pinterest"></div>
It doesn't seem to work! How can I link these icons to the respective websites?
The Div is supposed to be inside the Anchor tag.
Check Anchor tag usage
To make the icon click able you have to fix some issues. First of all your icons are not really linked. you can see the Hand cursor because the property defined in the class .social-btn
To make a icon clickable you should follow this approach. put the text inside a tag a better approach also you have to change the font-size:0
.social-btn a
{
padding: 22px;
font-size: 0;
}
your HTML should be like this.
<div class="social-btn pinterest">
pinterest
</div>
I have a SharePoint 2010 site and would like to use CSS only in the wikipage.
On my page I have a paragraph of information and at the end of it, has a question. After the viewers read the information and the question I would like them to be able to click on an image that says 'answer'. When clicking on the 'answer' image a text box comes up under the question with the answer. I would like the answer to stay on the page, not just hovering over the image.
My preference is to do this solely in css. I don't think I have the capabilities to do it in javascript.
I'm open to both options, I guess. If it is javascript can it be done inline?
Like mentioned by #JofryHS, css doesn't really respond to clicks.
Using inline js click handlers isn't great as it'll leave you having to repeat yourself a lot, but from the sounds of things you're fighting against not having enough access to Sharepoint (sigh, corporate networks).
This uses an inline click handler to show the answer:
<div class="question" id="q1">
What colour is the sky?
<button class="answerButton" onClick="document.getElementById('q1Answer').style.display='block'">Answer</button>
<div class="answer" id="q1Answer">
Overcast and grey, because I live in the UK.
</div>
</div>
<div class="question" id="q2">
Why does it always rain on me?
<button class="answerButton" onClick="document.getElementById('q2Answer').style.display='block'">Answer</button>
<div class="answer" id="q2Answer">
I'd have thought you figured this out already... It's Britain, of course it always rains on you!
</div>
</div>
the answers are hidden using css (note the display:none inside the .answer block):
.answer {
display:none;
background-color:#e5e5ff;
padding:15px;
}
.question {
background-color:#f5f5f5;
padding:15px;
border-radius:5px;
margin:7px;
}
Essentially, all the onClick does is change the css of the answer from display:none to display:block, rendering the answer visible.
There's also a tad of css to make it look shinier, and here's a demo jsfiddle
I pasted this code into my header.php file to get an opt-in button:
<div class="createsend-button" style="height:27px;display:inline-block;"data-listid="r/72/191/0E3/389738A3FFEDFFA8">
</div>
<script type="text/javascript">....</script>
I can't seem to control the placement - if I add .createsend-button to css there's no effect. When I look at this in Firebug it says this div class is actually .subscribe-button-inner but customizing that class in css has no effect either.
What am I missing here?
My site is at : http://tinyurl.com/c5eujcj
The iframe for the createsend button has inline CSS including position: absolute. If createsend offers an option to change the button, that would be your best option. If not, use this:
<div class="applyStylesToThis">
<div class="createsend-button" style="height:27px;display:inline-block;" data-listid="r/72/191/0E3/389738A3FFEDFFA8"></div>
</div>
I have a gallery plugin. If I click on another image, or in a arrow, a popup will appear.
The problem is that whem the popup is opened, the plugin gallery moves down on the page.
What is the css problem?
How can I fix it?
here my plugin:
http://judopassion.com/wordpress/?p=274
Thanks a lot.
There's quite a lot going on here, so I'll try and simplify the steps you need to take.
<div id="box">...
Needs to be a child of
<div id="gallery-1">....
So you would have:
<div id="gallery-1">
<div id="box"></div>
</div>
Add position:relative; to gallery-1.
Your #box styles are really, really messy. You need to delete left: and top: instructions from the CSS for #box.
I have added top property on pop-up appearing, and removed it when is closed:
$("gallery-1").css("top","-xxem");
I can't use GeorgeBuckingham solutions, because the plugin don't not allow it. Thanks anyway.