Im new here have seen a lot of this site and videos around the internet and now i have a problem with my CSS fort i would say hello and see if there is any one out there that can help me out.
Im righting a website and have a sliding bar on my nav.
but the text witch is hiden then shows on hover will not stay on the same line intel it is open full, As im making this site on a local host cant show you sorry but here is the code…
<p data-height="257" data-theme-id="9309" data-slug-hash="icrwC" data-default-tab="result" data-user="jandrew" class='codepen'>See the Pen <a href='http://codepen.io/jandrew/pen/icrwC/'>Social Slider</a> by jerome Andrew (<a href='http://codepen.io/jandrew'>#jandrew</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
<script async src="//codepen.io/assets/embed/ei.js"></script>
would like it to work
Thanks to any one that can help :)
My site as it is at the moo.. lots of work needs doing
my site
You could put:
white-space: nowrap;
in the css in ".socialSlider li"
It will prevent the line from wrapping.
Related
I'm building a site in Chrome and just discovered none of my anchor links work in IE or Firefox.
I'm coding it in Wordpress like:
Menu link:
http://dev.legendpower.com/contact/#Offices
Anchor:
<a name="offices" class="anchor"><h3 style="text-align: center;"><span
style="color: #000000;">Legend offices.</span></h3></a>
Strangely, there is one page on the whole site where the anchor link is working, and I can't for the life of me figure out what if anything there is different on that page. The coding there goes like...
Menu Link:
http://dev.legendpower.com/markets/#Casestudies
Anchor:
<a name="casestudies" class="anchor"><h3 style="text-align: center;"><span
style="color: #000000;">Case studies.</span></h3></a><p></p><p>The case
studies below are just a subset of our customer-base. We’ve installed over
200 Harmonizers in almost every type of building. Click on an image to
access the case study.</p>
Does anyone know the solution to this?
hope you doing well...
Please use this snippet
<a href="http://dev.legendpower.com/contact/#Offices" name="casestudies"
class="anchor">The case studies below are just a subset of our customer-
base. We’ve installed over 200 Harmonizers in almost every type of
building. Click on an image to access the case study.</a>
I'm trying to make a simple yet interactive webpage for my school. Our current homepage we use for links is plain and boring.
I've created this: JSFiddle
But when I open the 'Student Links', the 'PHHS Website' button seems to automatically position itself ~50 pixels up.
Code because I have to:
<a class="itemLink" href="http://hcps.us/phhs/">
<div class="itemStudentsLink" id="PHHSWebsite">
<p class="itemText">PHHS Website</p>
</div>
</a>
If anyone knows why it's acting like this, please tell me. I'm not sure why this problem occurs.
This has to do with the vertical alignment of the blocks and the fact that one of the block's text goes onto two lines. Add
.itemStudentsLink {
vertical-align: bottom;
}
http://jsfiddle.net/ExplosionPIlls/mKYaL/19/
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'm new to css and have been getting by fine so far from going through tutorials and reading some of the great advice on this site but I just cant get my head around this one. I am trying to achieve a Polaroid effect using css and am getting some weird effects on my website. I have tested the code on jsfiddle and it works fine, I even copied the entire sites css and it still worked fine in jsfiddle. But as soon as I use that code on my website the margins, padding, rotation etc. are wrong.
Please help I'm at a loss here and don't know what could be affecting it, my only idea is that for some reason the css selectors I am using are not selecting the elements properly.
The site page is: http://kamhairandmakeup.co.uk/vintage/
The JSFiddle is:
<iframe width="100%" height="300" src="http://jsfiddle.net/deepwaterlizard/NxsUQ/1/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
or
http://jsfiddle.net/deepwaterlizard/NxsUQ/1/
I can post the css and html here if needed but didn't want to take up too much space, thank you in advance.
I am not entirely sure, but for starters, the first image (black and white) has this html on your site:
<p>
<!--the caption that appears below the image-->
<br>
</p>
after figcaption tag and its not present in your fiddle.
Looks like you are using Wordpress. Its editor will generate a lot of <p> tags, e.g. for each new line, it will generate <p> </p> or empty <p></p>
I have a Wordpress multisite installation with these websites:
A portal: http://www.gprsoftware.nl which links to
http://www.gpradvies.nl
http://www.gprstedenbouw.nl
http://www.gprspecials.nl
http://www.gprgebouw.nl
http://www.gpronderhoud.nl
The problem occurs on all pages of gprgebouw.nl and gpradvies.nl but not on the other domains. Here is a screenshot of the homepage of gprgebouw.nl
What happens:
the right sidebar slides under the content area
the bar-graph icon image is increased in size
grey borders of the sidebar are extended to the top of the content area
Especially point 3 makes me believe that somehow the content area is not closed properly, but I cannot find this in the HTML source.
The weirdest part is that this only happens on the mentioned websites and not on the others although they share all of the Javascript and plugins and most of the CSS (only some colours are different).
Of course all is fine in browsers like Firefox.
Any ideas what is causing this?
I'm using selectivzr and modernizr for IE lte 8.
On http://www.gprgebouw.nl you have a missing closing div tag here:
<div class="aside-content">
<div class="textwidget">
...
<p><img alt="Justus van Effen" src="http://software.gprgebouw.nl/start/images/thumb4476.jpg"> <span class="stars rating30"></span></p>
<p>Bekijk meer projecten op www.gprprojecten.nl</p>
</div>
</div>