I need to align the image 'Special offers' on the site http://sherridon.bluefrogclients.com/.
I need to move it up a bit.
Let me know what exactly to change.
Below is the code from css file:
#call_to_action {
background: #e6e6e6 url("images/outset_breadcrumbs.gif") repeat-x scroll center bottom;
min-height: 170px;
}
body.inset #call_to_action {
background-image: url("images/inset_breadcrumbs.gif");
}
#call_to_action #blurb {
padding: 15px 230px 20px 0;
}
#call_to_action_button {
background: url("images/started.jpg") no-repeat scroll 0 0 transparent;
height: 80px;
padding-bottom: 0;
position: absolute;
right: 0;
top: 0;
width: 300px;
}
#call_to_action_button a {
display: block;
height: 100%;
width: 100%;
}
Regards,
Shyam.
In blue.css:
#call_to_action_button {
margin-top: -30px;
height: 90px;
}
Increase it as you much as you like(or decrease)
I noticed your image wasn't showing well. so I added the height and compensated with the margin top
#corroded's answer looks correct also (gave +1), but mine makes better use of your existing code:
Your image is exactly 89px high.
You already have a top attribute which you can make use of, you don't need margin-top.
#call_to_action_button {
height: 89px;
top: -29px
}
(in blue.css)
Related
I recently have created this banner for my website, but I realized that I only want the main part of my site to be 900px long. However, I want the banner to run off the page, but have the part where it runs off be darkened (through opacity). So, this means, I need to make the image of my site positioned in the middle. Here is what I developed so far:
https://jsfiddle.net/h3w89t9y/4/
As you can see, this doesn't really get what I need. Here's the issue:
.banner {
background:url(https://i.gyazo.com/74f0fa6b9d9ed6652f3e220ceae113cf.png) no-repeat;
background-position: center;
margin: 0 auto;
height:185px;
}
The banner isn't 800px. If I add in a width of 800px, it will go to the middle just like I wanted. However, the image will be limited to only be 800px long rather than overflowing off of 800px.
This is what I'm trying to get it to look like:
https://i.gyazo.com/c38cae7bd34379477a6fcc8eeb160c22.png
How do I make it to where my banner is centered to the middle, but has the sides overlapped with opacities?
You can achieve what you want using pseudo like this:
body {
margin: 0;
}
.wrapper {
background:url(https://i.gyazo.com/74f0fa6b9d9ed6652f3e220ceae113cf.png) no-repeat center;
width: 100%;
}
.wrapper:before, .wrapper:after {
content:'';
width: calc((100% - 900px) / 2); /*setting the width to the 100% minus your desired header's width / 2 so it will occupy the rest of your content*/
height:185px;
position: absolute;
top: 0;
background: rgba(0, 0, 0, 0.3); /*set the desired opacity*/
}
.wrapper:before {
left: 0;
}
.wrapper:after {
right: 0;
}
.banner {
width: 900px;
height:185px;
margin: 0 auto;
}
<div class="wrapper" style="">
<div class="banner"></div>
</div>
So the idea is your pseudo elements occupy the rest of the content and setting them your desired transparency, notice that in this way you also can set them blur or whatever filter that you want.
Here a working jsfiddle to play with
You can't control opacity of a single background like that, you need another element. For example:
.banner, .bannert {
background:url(https://i.gyazo.com/74f0fa6b9d9ed6652f3e220ceae113cf.png) no-repeat;
background-position: center;
margin: 0 auto;
height:185px;
}
.banner {
max-width: 800px;
position: absolute;
left: 0;
right: 0;
top: 0;
}
.bannert {
background-repeat: repeat-x;
opacity: 0.5;
}
<div style="width: 100%; background: black; padding: 1px;position: relative;">
<div class="bannert"></div>
<div class="banner"></div>
</div>
https://jsfiddle.net/h3w89t9y/6/
Try this; add two divs first, one for the left side, and one for the right,hence you can apply your desired opacity to them and make the banner sides filtered, look at the snippets below;
HTML
<div style="width: 100%; padding: 1px;">
<div class="banner">
<div class="trans_right"></div>
<div class="trans_left"></div>
</div>
</div>
CSS
.trans_right {
padding: 2rem;
width: 13%;
float: right;
background: rgba(71,67,255,0.9);
height: 65%;
}
.trans_left {
padding: 2rem;
width: 13%;
float: left;
background: rgba(71,67,255,0.9);
height: 65%;
}
I'm really not sure if there is a better way to do this, but it gives you what you're looking for, checkout the link:
Transparent Sides
I have recently tried to position a "username" and "password" field in a div which it's background has some graphics. In the graphics, I need a text field to be positioned and sized. I have a live view at the front page of "spaggit.com". Here is my CSS code:
#pageFrontMiddle {
margin: 0px auto;
width: 1000px;
background-color: #F9F9F9;
height: 590px;
background: url('/images/frontImage.png') no-repeat;
}
and here is the image:http://www.spaggit.com/images/frontImage.png
Any help would be greatly appreciated.
Thanks in advance,
-Jaydon.
Although this is NOT how you should develop your website, here is how you can do it:
Just put relative positioning on the Image Wrapper and absolute positioning on the Inputs and mess with the height, width, top and left properties.
#pageFrontMiddle #input_username {
border: 0;
background: transparent;
height: 51px;
width: 365px;
padding: 10px 20px;
font-size: 20px;
position: absolute;
top: 289px;
left: 466px;
}
JSFiddle
Here is what it looks like:
I'd like to have the picture and the name be in the same line as the header... Without having to do manual margin-top...
Just to note... I am using Bootstrap.
http://getbootstrap.com/
Here is the HTML code...
Here is the CSS code...
.navbar-top {
height: 64px;
background-color: #772A75;
position: fixed;
width: 100%;
min-height: 64px;
top: 0;
left: 0;
z-index: 1000;
box-shadow: 0px 2px 10px #888888;
}
.navbar-container {
padding: 0 20px;
}
.navbar-heading {
margin-top: 10px;
}
Just set float: left for the left heading and set float: right for the right image block.
You can move the dropdown-toggle after the h1 tag, make sure to add display : inline-block to both of them. you might have to play with floats and width to get them the way you want...
Assume, that I have three boxes (divs) on website (see image below):
header with logo
content with some text
footer with contact info
Each box have unique color (in order: yellow, orange and blue) and black border.
I would like to website always fills the entire screen, the logo was on the top and the footer was at the bottom. So if there is not enough text in content, content should be extended, so that the footer was on the bottom. And if will be a lot of text in content, slider should appear on the right.
How do this in CSS? Important is that boxes have backgrounds. I found many solutions, but none doesn't work properly with backgrounds.
Solution Explained
The black box in your diagram gets min-height 100%, is the scrolling container, and is position relative, to allow child positions to be respective to it.
The red box in your diagram is actually composed of 2 boxes:
one for your dynamically-sized content; this has sufficient top and bottom padding to make room for your header and footer, and force the scrolling container to expand
one for the background; this is position absolute, with top and bottom position specified relative to the black box, its parent.
The yellow and blue boxes in your diagram can be position: absolute, top: 0 and bottom: 0, respectively... or however you choose to position them.
Here's a fiddle of it: http://jsfiddle.net/syndicatedshannon/F5c6T/
And here is another version with explicit viewport elements just to clarify, matching colors, and borders added to replicate the OP graphics (although per the OP the black border is actually the window).
Sample HTML
<html>
<body>
<div class="background"></div>
<div class="content"></div>
<div class="header"></div>
<div class="footer"></div>
</body>
</html>
Sample CSS
html { position: absolute; height: 100%; left: 10px; right: 10px; overflow: auto; margin: 0; padding: 0; }
body { position: relative; width: 100%; min-height: 100%; margin: 0; padding: 0; }
.background { position: absolute; top: 120px; bottom: 120px; background-color: red; width: 100%; }
.content { position: relative; padding: 120px 0; }
.header { position: absolute; top: 10px; height: 100px; width: 100%; background-color: yellow; }
.footer { position: absolute; bottom: 10px; height: 100px; width: 100%; background-color: cyan; }
Also note that this assumes you cannot rely on CSS3 yet.
If you're only targeting modern browsers, you can use calc()
body, html {
height: 100%;
padding: 0;
margin: 0;
}
.header {
height: 50px;
margin-bottom: 10px;
}
.footer {
height: 100px;
margin-top: 20px;
}
.content {
min-height: calc(100% - 50px - 10px - 100px - 20px);
}
The drawback is that you need to know the header and footer sizes and they need to be fixed. I don't know any way around this without using Javascript. For slightly less modern browsers, you can use border-box to get the same effect as above.
body, html {
height: 100%;
padding: 0;
margin: 0;
}
.header {
height: 50px;
margin-bottom: 10px;
z-index: 5;
position: relative;
}
.footer {
height: 100px;
margin-top: -100px;
z-index: 5;
position: relative;
}
.content {
box-sizing: border-box;
padding: 60px 0 120px 0;
margin-top: -60px;
min-height: 100%;
z-index: 1;
position: relative;
}
Lastly, here is the JS solution:
$(function(){
$('.content').css('min-height',
$(window).height()
- $('.header').outerHeight()
- $('.footer').outerHeight() - $('.content').marginTop()
- $('.content').marginBottom());
});
EDIT: My JS solution assumed border-box and no border. This solution should be more robust:
function setContentSize() {
$('.content').css('min-height',
$(window).height()
- $('.header').outerHeight()
- $('.footer').outerHeight()
- ($('.content').outerHeight()
- $('.content').innerHeight()));
}
$(setContentSize);
$(window).on('resize', setContentSize);
I have a gallery plugin in my main page -> http://tranceil.fm
It is set to these css rules:
box_skitter {
position: relative;
width: 985px;
height: 560px;
margin: 52px auto 32px;
background: black;
}
If you take a look at the website, the gallery is not exactly aligned. I want to move it a bit to the right. But whenever I try doing that it looses its grip and moves all around if I resize the window..
How can I move it without making it go along with a resize?!
Use left property instead of margin
box_skitter {
position:relative;
width: 985px;
height: 560px;
left: 52px;//will move the div to 52px right
background: black;}
EDIT: Since box_skitter is not an HTML element , so if it's ID then do
#box_skitter {
position:relative;
width: 985px;.....
If it's class then
.box_skitter {
position:relative;
width: 985px;....
Try this
.box_skitter {
position: relative;
width: 985px;
height: 560px;
margin: 52px auto 32px;
background: black;
left: 19px;
}