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;
}
Related
I'm trying to move up the cache bar at the webpage: http://www.skandicinkasso.de/ - cant move the element because it is at the bottom of the "DOM"
I have been trying remove that positioning, and put the element inline where i wanted it, but i cant do that way.
i want to move the bar to here: http://prntscr.com/fsqb5d
Change your ginger_container.bottom css to
.ginger_container.bottom {
position: fixed;
left: 0;
right: 0;
top: 125px;
overflow: hidden;
padding: 10px;
width: 1100px;
margin: 0 auto;
}
remove bottom: 0 and add top: 125px; width: 1100px; margin: 0 auto;
Isn't that enough?
.ginger_container.bottom {
border-top: 1px solid #cccccc !important;
top: 125px;
height: 28px;
}
In the CSS : From .ginger_container.bottom remove position:fixed; and all other position attributes(left,right,bottom).
In the HTML : Move the entire <div class="ginger_banner-wrapper"> and its contents into the header and palce it just above the closing header tag </header>.
Output: Its fixed and stays close below the navigation bar.
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
I am trying to place a css element to the right side of the header but not sure exactly how to do it. I tried using:
position: Absolute; top: 20px; right 0px;
That would work but if you adjust the browser the text moves with it.
I created a JFiddle that you can find here:
http://jsfiddle.net/rKWXQ/
This way you can see what I am trying to do. I have a text inside a wrapped div element that says Call Now (555) 555-5555.
Here is the header element and inside of that I have a right_header element.
<div id="header">
<span class="right_header">Call Now (555) 555-5555</span>
</div>
Here is my Header CSS:
/* Header */
#header {margin: auto; width: 1007px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;}
.right_header{color: #fff; position: absolute; top: 70px; right: 0px}
Can someone please tell me the proper way to accomplish this please?
Note the left side will have a logo there that will not load in JFiddle!
Thanks!
You can easily just float it to the right, no need for relative or absolute positioning.
.right_header {
color: #fff;
float: right;
}
Updated jsFiddle - might need to add some padding/margins - like this.
Two more ways to do it:
Using margins on the element you want to position to the right of its parent.
.element {
margin-right: 0px;
margin-left: auto;
}
Using flexbox on the parent element:
.parent {
display: flex;
justify-content: right;
}
As JoshC mentioned, using float is one option. I think your situation suggests another solution, though.
You need to set position: relative on your #header element in order for the position: absolute on your #right_header to take effect. once you set that, you are free to position #right_header however you want relative to #header
You can do this way also if you want to do with position, Try this please
#header {margin: auto; position:relative; width: 1007px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;}
.right_header{color: #fff; position: absolute; top: 0px; right: 0px}
The answer using floats from JoshC will work fine, however, I think there is a reason this is not working.
The reason your code does not work, is that the absolute position is relative to the which has dimensions of 0x0.
The '' should be absolutely position in order for this code to work.
#header {margin: auto; width: 1007px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;}
change it to...
#header {margin: auto; position: absolute; left: 0px; right: 0px; top 0px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;}
<div><button>Continue</button></div>
to make button on the right of div
<style>
button {
display:block;
margin-left:auto;
}
</style>
Click here for visual
As you can see from the picture, my parent container is not expanding to fit my child container. The page container (#contain) actually stops at the bottom left hand corner of the kitchen photograph. The child container (#zone2) is clearly overflowing outside its parent container (#contain). I would like to be able to have (#contain) expand automatically to fit (#zone2). The CSS is:
#contain {
position: relative;
width: 100%;
margin: 0 px;
background: #E3DCCC;
z-index: 0;
}
#zone1 {
width: 100%;
height: 850px;
background: url(http://waly1039.com/sites/default/files/k4.jpg) no-repeat center top;
position: absolute;
z-index: -1;
}
#head {
position: absolute;
top: 20px;
width: 100%;
height: 330px;
}
#head img {
max-width: auto;
height: auto;
}
#zone2 {
position: relative;
overflow: hidden;
padding: 3px;
top: 360px;
float: right;
right: 15px;
width: 53%;
height: auto;
border: 4px solid #715E40;
background-color: white;
}
#zone2 img {
max-width:100%;
height: auto;
float:left;
margin: 5px;
}
#zone3 {
position: relative;
top: 710px;
left: 15px;
float: left;
height: 340px;
width: 38%;
border: 4px solid #715E40;
background-color: white;
}
This is a float issue. Try adding the traditional CSS clear fix to #zone2's container:
.container:after{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
Be sure to put this in the :after pseudo selector, otherwise it won't work for you. Floated elements exist outside of normal document flow, which is why the container isn't expanding to contain them. The clear fix forces the floats to be cleared, which will cause the container to expand around the bottom of this element.
I tested adding more images to #zone2 and #contain expands vertically. Somehow you've got an element(s) in #zone2 with padding or margins that aren't being added to the parent's total height.
If you want a quick fix in order to move on then add margin-bottom: 30px; to #zone2.
I've duplicated your problem and was able to resolve it with this: You might want to try it. It's looks a bit odd so make a class for it if you like. I'm more concern with where it is placed.
Just beneath lines of your code, add my third line. Just that and you are done. Note, it more about positioning.
<div id="zone3"></div>
<div id="zoneclear"></div>
<br style="clear:both; float:none; display:block; height:1px;" />
Just add the third line.
and just modify one of your styles:
#zoneclear {
clear: both;
float:none;
display:block;
height: 30px;
position: relative;
}
[EDIT]
The codes have a serious bug in firefox which is not present in Google Chrome (that I tested in earlier due to your relative positioning. So I've modified the #zoneclear style to fix that. You might have to test if the other browsers like this hack.
I hope it helps you
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)