I have a quick question regarding some CSS work on my website. I need help with putting some text on top of my image slider (www.ininkk.com) just like how it looks on the page banner here: http://www.instacool.com.au/white-ink-printing/ (where it says "white ink printing"). Any help would be greatly appreciated. Thank you!
ok you have to put the text position to absolute , something like this :
.image {
position: relative;
width: 100%; /* for IE 6 */
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
Here's a quick codepen, need some styling but should get you started:
http://codepen.io/nilestanner/pen/LkoEZz
<div class="img-bg">
<h2>some text</h2>
</div>
h2{
padding:100px;
}
.img-bg{
background:url('http://nilestanner.com/codepen/expanding-hover-tabs/vista-1.jpg');
height:500px;
}
Related
For some reason the footer on one page of my site is not full width. There's a huge white space on the left that I cannot seem to get rid of and its causing my entire footer to be shifted to the right.
This is the current CSS:
#main-footer {
width: 105%;
margin-bottom: -50px;
margin-left: 0;
margin-right: 0;
height: auto;
padding: 50px;
background-color: #2E2E2E;
}
#top-footer {
height: 30px;
background-color: #77CAE9;
margin-left: 0;
width: 105%;
}
I have a feeling it's related to the page width but I can't figure out where to adjust that either. I'll be so grateful if someone can help me out with this!
EDIT: The URL to the page is http://tstand.com/blog
Thanks :)
Angela
Start with moving your <footer> outside of the <div class="container">.
The class .container is used to centre it's content in middle of the screen. See more details here here:
http://getbootstrap.com/css/
A common cause for this can be a default padding or margin of <body> or even <html>. In that case CSS like this should fix it:
body {
margin:0;
}
If the problem persists please post a complete, but minimal example that demonstrates the issue.
I am currently trying to modify my Royal Slider plugin on Wordpress (http://dimsemenov.com/plugins/royal-slider/)
I am aiming to center the text on all the captions as well as make the caption width 100%
This is the code that is working:
<div class="rsContent">
{{image_tag}}
<div class="rsCaption">
<h3>{{title}}</h3>
<p>{{description}}</p>
</div>
{{thumbnail}}
{{html}}
{{animated_blocks}}
{{#link_url}}
<a class="rsLink" href="{{link_url}}">{{title}}</a>
{{/link_url}}
</div>
This is the part I really don't know about:
#rsCaption {
position: absolute;
text-align: center;
I am unsure of placement as well.
Any guidance / links would be great. I am a total newbie trying figure this stuff out slowly.
Firstly you have class="rsCaption" and your css says #rsCaption which is for ids. So your CSS should be something like this:
.rsContent {
position: relative;
/* rest of the code that already exists */
}
.rsContent .rsCaption {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
margin: 0;
}
This is just a wild guess, depends on what you have at the moment. If I would see it somewhere in action that would be something else.
I'm trying to set images in this style: one on top and other below this.
Actually I do something wrong and in my result images are one under other. Here is jsFiddle.
The second image is hidden by overflow:hidden in slider class.
Question:
Where I make mistake? I'm sure there is easy solution but I lost some time and can't find it.
P.S. If is it possible I'm looking solution with css changes only.
Change the css for your images to simply this:
img{
display:block;
}
that does the trick.
EDIT after comments:
img{
position: absolute;
z-index: -1;
top: 0px;
left:0;
}
That staples all your images over each other in the top left corner.
i think your img must
img
{
display:block; /*if you want top to bottom use display:inline;*/
}
I see you already marked an answer, but I already typed this up so here ya go :)
You can simplify your CSS a bit here as well by removing the floats and if you're only using images for your slider (no text beside the images), you can even simplify the HTML by removing the whole .photo div.
Simplified code:
<div class="slider">
<img src="http://lorempixel.com/754/453/" alt="Bottom Image" />
<img src="http://placehold.it/754x453" alt="Top Image" />
</div>
.slider {
overflow: hidden;
position: absolute;
top: 1px;
left: 371px;
width: 754px;
height: 453px;
}
img{
position: absolute;
z-index: -1;
top: 0px;
left:0px;
}
http://jsfiddle.net/daCrosby/MP6qN/8/
I have web pages on http://rygol.cz/qlife/ and when I zoom out, the id="contacts" goes anywhere every iteration when I zoom out. I need something like
border: 0;
Because I need that text of will be every of bottom of
any ideas how to do that?
To align a div at the bottom of the content add {position: relative;} to the content div and {position: absolute; bottom: 26px;} to the div you want to align.
CSS:
#content-wrapper {
position: relative;
}
#leftcolumn {
padding-bottom: 110px; /* this will prevent the normal content in the left column to go under the aligned div */
}
#contacts {
margin-top: 0;
position: absolute;
bottom: 26px;
}
Demo: http://jsfiddle.net/NMDCF/
First of all, try to validate your HTML by using the following link : HTML Validation
try to fix those errors before trying to fix your id="contact"
as for the id="contact" use position:absolute or position:relative; that may solve your problem. if that did not work, use this display:block; or display:inline-block; both could help you achieve your goals.
I am making a very simple blog for my PHP project, but am having a simple problem. I can't get the image for my header to float all the way right.
I have a banner with some text on the left, I have a 1px slice repeating across the width of whatever resolution may be chosen (ensuring the banner fills any screen). I would like the image to always render on the right edge of the screen, again, independent of screen resolution. But it is coming in at a fixed position. Here is what I have written:
HTML:
<div id="header">
<img src="images/banner.jpg" alt="banner" title="Prairie"/>
<img class="right_image" src="images/banner_right_image.jpg" alt="elavator" title="prairie elevator"/>
</div>
CSS:
#header {
position: fixed;
top: 0px;
width: 100%;
height: 120px;
background: url(images/banner_right.jpg) repeat-x;
z-index: 1;
}
#header.right_image {
float: right;
position: fixed;
top: 0px;
z-index: 1;
}
What is the issue here?
Thanks for any input.
You should separate #header.right_image so that it is #header .right_image
Also remove position: fixed from #header.right_image
This works:
#header .right_image {
float: right;
}
Example: http://jsfiddle.net/FTBWU/
A link to your site would help!
I always throw at the top of my header:
* { margin:0; padding:0}
You probably have padding or margins inherintly applied to your html or body tags depending on what browser you're using. Try that - and the is there a URL I can see the whole thing at?
I don't know how well the float works with a fixed positioned element. Maybe try something like this for your image?
#header .right_image {
right: 0px;
position: fixed;
top: 0px;
z-index: 1;
}