Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 8 years ago.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Improve this question
How to override cloudmade maps css with your own css. I emmbeded code of a map to my site, and map is displayed, but on maps are credits i bottom right corner and zoom scroller. I dont mind for credits but i want to remove that zoom scroller. I tried use css: display: none; on style of cloudemade but not helping. How to put my css over theirs?
Here's the HTML code:
<div id="yjsg6" class="yjsg_grid yjsgsitew">
<div id="user16" class="yjsgxhtml only_mod" style="width:100.00%;">
<div class="yjsquare ">
<div class="yjsquare_in">
<div class="Flexible-container">
<iframe width="100%" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.cloudmade.com/iframe?&lat=45.8122871952285&lng=15.97111701965332&zoom=14&styleId=102945"></iframe>
</div>
</div>
</div>
</div>
</div>
And all CSS code is in this link
Thanks!
This hack works:
#yjsg6 {
margin-left: -50px;
}
You can't affect the content of the iframe, because it's from a different origin. It should be possible to affect iframe styles with but this doesn't seem to be implemented yet.
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 6 years ago.
Improve this question
I am making a template for my website and I have a mysterious transparent line on top of one of the panels. Though i suspect it will be on them all just that the way the parallax works is preventing it from looking bad.
http://muhammadkasimali.co.uk/ParallaxCV/
You can view it here its right on top of 'SKILLS'
Any help would be greatly appreciated. :)
I want to basically find the problem thats causing this.
It happen because inside your 'SKILLS' container there is only either empty or floating element.
You are using bootstrap so a clearfix should do the trick at the level of col-lg-12 bg-2:
<div class="col-lg-12 bg-2 clearfix">
<h2 class="profile-header">SKILLS</h2>
<p class="intro-copy">
</p>
<ul>
<li><span>Communication: </span> English (Fluent, native), Bahasa Melayu (Learning)</li>
<li><span>Skills: </span> HTML, CSS, SASS, jQuery, Bootstrap, E-mail Design, Graphic Design
Learning: JavaScript, Git Version Control, Web APIs </li>
<li><span>Tools: </span> FTP Clients, Wordpress, Sublime text (with emmet),
Adobe Photoshop, Adobe Dreamweaver, Brackets, WebStorm IDE,
Hootsuite, Hubspot, Google AdWords, Pure 360, Drupal, phpMyAdmin,
Google Analytics, Mailchimp </li>
<li><span>Operating Systems: </span> Windows, MAC OSX</li>
</ul>
<p></p>
</div>
After that, you can choose the background you want for this block.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I've been trying to find a good, simple solution for this for days now, and I'm coming up empty handed.
I'm trying to make a blog in wordpress, that currently has excerpt with images on the front page. The images are not featured images and they link to the full post. What I really want is for "read more" to appear when i hover over the post image on the front page.
Ideally, I would love to implement one of these codrops hover effects (http://tympanus.net/Development/HoverEffectIdeas/) on the post images if it's possible. I'm very much a newbie to wordpress, so I don't know where to put what code.
But any help would be greatly appreciated.
Try below core code of HTML and CSS:
<style type="text/css">
div.texthover
{
display:block;
position:relative;
width:150px;
}
div.texthover .overlay
{
position:absolute;
top:45%;
width:100;
width:150px;
background-color:rgba(0, 0, 0, 0.3);
display:none;width:150px;
}
div.texthover:hover .overlay
{
display:block;
}
</style>
<div class="texthover"><br />
<img src="image.jpg" width="150" height="150" />
<div class="overlay"><br />
<span>This is some text I want to display</span>
</div>
</div>
In WordPress, go to Appearance -> Editor and edit style.css or your main .css theme file. You can put there your hover code. You also need to add the corresponding classes to your image. However if you want "read more" to appear you would need the existing associated HTML code. On another hand, you got some hover plugins available, I found this one with a quick search : https://wordpress.org/plugins/amazing-hover-effects/
Good luck.
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 8 years ago.
Improve this question
I would like to move the logo to the left of site title and description. I have Googled CSS tweaks to reposition the logo but it didn't work. I have little to no knowledge about CSS.
Is there anyone who can help me please? The site is www.cebubibleseminary.com
Hello and welcome to stack overflow.
I hope this helps
CSS fix
.site-intro .avatar {
width: 104px;
float: inherit;
}
this is how it will look after
you have the tags wrong. This should be a CSS question.
To solve your problem just put the content in 2 divs. Apply the style property float left and float right for example. If you want them aligned use the attribute width. An example:
<div style="float:left; width:300px;">
<img alt="Cebu Bible Seminary Inc." src="http://0.gravatar.com/avatar/cc3b29587548d89dfb16b15223a18995?s=256&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D256&r=G" class="avatar avatar-256 photo" height="256" width="256">
</div>
<div style="float:right"; width:800px;>
<h1 class="site-title">Cebu Bible Seminary Inc.</h1>
<h2 class="site-description"></h2>
</div>
The reason it doesn't work is that headers automatically create new lines. This website did something similar:
palyrobotics.com
Make the header with the style "display:inline;". See below for an example:
<img src="/assets/img/logos/main_logo.png" width="100" height="50">
<div class="show-for-small-only">
<h2 style="display:inline; margin-left:-10px;">Paly Robotics</h2>
</div>
You would do:
<a href="http://www.cebubibleseminary.com/" title="Cebu Bible Seminary Inc." rel="home" class="site-intro">
<img alt="Cebu Bible Seminary Inc." src="http://0.gravatar.com/avatar/cc3b29587548d89dfb16b15223a18995?s=256&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D256&r=G" class="avatar avatar-256 photo" height="256" width="256">
<h1 class="site-title" style="display:inline;">Cebu Bible Seminary Inc.</h1>
<h2 class="site-description"></h2>
</a>
This should work. LMK if it doesn't.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
Am currently designing a website using bootstrap and so far I have come up with a very nice website that is supposed to respond but it doesn't when scaled down. I want the website to respond to the following screen sizes: 768x1024, 800x1280, 980x1280,1280x600 and yet I've read bootstraps docs of responsivenness and tried them but nothing has changed.
I created my own classes inside a getbootsrap template and even when I tried to put them inside;
<div class="col-md-4"><div class="andy-redbackground"</div>
</div>
even tried to get into the classes and insert:
background-size:cover;
but nothing worked out.
Try this code:-
<div class="row">
<div class="col-xs-4">
<div class="andy-redbackground"></div>
</div>
</div>
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
Am trying to decide the best way to markup this design I'm working on. The quick outline of it is here:
It's a news article.. so I'd like to use the article tag and then some aside information. My issue is the design layout of it.. the h1 of the article spans over the 2 columns.. I want to use article tag for the h1, publish information and main body.. but in order to do that and fit the design I'd have to include the rightcolumn inside the article which is not great semantically. The information in the right column is common to lots of pages so shouldn't be part of an aside.
So at the moment I'm thinking along the lines of
<h1>News article title</h1>
<div class="leftcol">
<article>
<p>publish information</p>
<p>Main body in general markup</p>
</article>
<aside>
Related content here
</aside>
</div> <!-- end left col -->
<div class="rightcolumn">
Contact form code, followed by customer quote stuff
</div> <!-- end right column -->
I'm concerned about leaving the H1 outside the article tag - Seems like it kind of defeats the purpose, but I'm not sure what other way would work. Possible repeat of the h1 tag inside the article as well but that's definitely not ideal..
What is the most semantically correct way of marking this design up?
*ED
Can't do opinion based questions.. but in case anyone else is considering the same thing (and not allowed to ask it) I went with the following:
<div class="page-heading">News article title</div>
<div class="leftcol">
<article>
<h1>News article title</h1>
<p>publish information</p>
<p>Main body in general markup</p>
</article>
<aside>
Related content here
</aside>
</div> <!-- end left col -->
<div class="rightcolumn">
Contact form code, followed by customer quote stuff
</div> <!-- end right column -->
Decided to keep the h1 within the article (and hide it with css) and then just use a div outside the columns with the same content to hold true to the design.