I have a problem with my site's logo. It sits in the upper left hand corner. On a lower resolutions, it looks fine. However, at larger resolutions, you can see the logo shift off to the right. How can I adjust my css to make this stationary, just to the left of the "Home" link?
<div id="header">
<div class="headerright">
<img id="logo" src="img/logo.png" alt="" />
<!-- snip -->
</div>
</div>
.headerright {
left: 140px;
position: absolute;
width: 966px;
height: 100px;
}
This should solve it!
Change .headerright to this:
.headerright {
margin-left: auto;
margin-right: auto;
width: 966px;
height: 100px;
}
and #nav to this:
#nav {
display: block;
position: absolute;
top: 10px;
left: 30px;
height: 79px;
width: 906px;
}
The container element, headerright, is declared with an absolute position and a left value of 140 pixels.
.headerright {
left: 140px;
position: absolute;
}
When you resize the window most elements will adjust to a new position except for the headerright layer (or other absolutely position elements). The headerright, which contains the logo, will always be 140 pixels to the left, causing it to be misaligned on smaller screens.
You need to centre the div. This will allow it to adjust its position as the window resizes. Remove position: absolute; left: 140px;.
.headerright {
margin: 0 auto;
width: 966px;
height: 100px;
}
Change .headerright to position: relative; and add margin: 0 auto;
See below:
.headerright {
position: relative;
margin: 0 auto;
}
Then if you want to move the logo a little bit to the left, add this to #logo:
#logo {
margin-left: -60px;
}
Related
I hope I described it correctly when I stated "nested div".
I have an image in a div like this:
content -> content-inner -> column_left
I'm unable to make the image begin at 0 px (the very left side of the screen).
It seems I'm trapped in margin definition of the div.
The divs are defined like this (seen in Chrome Inspector):
#content {
position: relative;
left: 0px;
top: 0px;
z-index: 2;
width: 100%;
min-width: 280px;
max-width: 980px;
margin-left: auto;
margin-right: auto;
padding-top: 0px;
padding-bottom: 0px;
}
#content-inner {
margin-left: 20px;
margin-right: 20px;
background-color: #FFF;
}
.column_left {
position: relative;
left: 0px;
top: 0px;
width: 65%;
margin-right: 5%;
float: left;
}
I created a new div like this:
.inlineimage
{
float: left;
margin-left: 0px;
margin-right: 20px;
margin-bottom: 5px;
margin-top: 3px;
}
And then I assigned it to the image within the "column-left" div:
<div class="inlineimage">
<img src="images/myimage.jpg" alt="" />
</div>
However, the image sticks to the border of the column (which is around 105 px).
How could I make the image stick to 0 px margin from the left side of the page?
Thank you.
You could position your .inlineimage container to position: relative; then position the img as
.inlineimage > img {
position: absolute;
left: 0;
top: 0;
}
This way your image sticks to the top/left
There is a parent container of relative width (50%) so that it responds to the size of the screen.
Now, I want a button at the bottom right corner of this parent container which stays fixed vertically. It works with position: fixed but then when i view it on different devices, i cannot get it to be positioned horizontally.
This is my html and CSS
<div class="container">
<div class="button"></div>
</div>
.container {
position: relative;
height: 2000px;
width: 40%;
margin: 0 auto;
background: yellow;
}
.button {
height: 50px;
width: 50px;
background: red;
position: fixed;
bottom: 20px;
right: calc(50% - 190px);
}
Here is the link to codepen http://codepen.io/anon/pen/VmggdO
This looks fine but when you resize the screen horizontally, the button should stay just 30px inside of the yellow container horizontally - How do i achieve that? REMEMBER - THE BUTTON NEEDS TO STAY FIXED VERTICALLY WHEN YOU SCROLL!
Using position absolute worked for me
.button {
height: 50px;
width: 50px;
background: red;
position: absolute;
bottom: 20px;
right: 30px;
}
EDIT:
With the new requirements of "THE BUTTON NEEDS TO STAY FIXED VERTICALLY WHEN YOU SCROLL", this can be achieved by changing the html to this:
<div class="container">
</div>
<div class="button-container">
<div class="button"></div>
</div>
and the CSS to this:
.container {
position: relative;
height: 2000px;
width: 40%;
margin: 0 auto;
background: yellow;
}
.button {
height: 50px;
width: 50px;
background: red;
margin-bottom: 20px;
float: right;
margin-right: 30px;
z-index: 100;
}
.button-container{
position: fixed;
bottom: 0px;
width: 40%;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
See the updated code pen: http://codepen.io/anon/pen/mOvvgJ
I am trying to add a photo to the banner and have it sit right above my logo on my webpage. I would like the photo to stay in the same position (over the logo) regardless of screen size, right now it stays in the same position within the banner. How do i fix this?
My current code looks like this
div#banner {
position: absolute;
top: 0;
left: 0;
background-color: #00AD83;
width: 100%;
height: 100px;
}
div#banner-content {
position: static;
margin-left: 25%;
padding: 0px;
z-index: 1;
}
div#main-content {
padding-top: 70px;
}
<div id="banner">
<div id="banner-content">
<img src="/img/Banner-Words.jpg" alt="URGENT APPEAL" style="width:349px;height:100px;">
</div>
Give to your logo a fixed margin in stead of a percentage.
div#banner-content {
position: static;
margin-left: 30px;
padding: 0px;
z-index: 1;
}
background-image="/img/Banner-Words.jpg" ?
I have a fixed header on my page, inside the header is an image. Id like it to stay in place when the window is resized.
I have tried different positioning tags and wrapper divs, but i must not be doing something right.
My CSS is as follows
.header {
background: url("#") repeat-x scroll left top transparent;
height: 70px;
margin-left: auto;
margin-right: auto;
width: 100%;
}
#headbar {
position:fixed;
z-index: 99999;
left:0px;
top:0px;
height:50px;
width:100%;
background:#273D90;
padding-top: 10px;
box-shadow: 0 0 50px 0;
}
#headbar img {
display: block;
text-indent: -9999px;
left: 5%;
overflow: hidden;
/*margin: 0 0 0 5%;*/
position: fixed;
float: left;
}
.imgwrap{
float: left;
position: absolute;
}
#logo {
float: left;
margin-right: 50px;
margin-top:25px;
}
and my HTML is
<div class="header">
<div id="headbar">
<div class="imgwrap">
<img alt="logo" src="images/whitelogo.png" height="50" width="100">
</div>
</div>
</div>
Your header is 100% of the width of the page. Your image is positioned with left: 5%. That is 5% of the width of the header. Since the header resizes when the window does, this 5% changes. Use a fixed value with px or em and it will not move.
http://jsfiddle.net/vfvxE/
#headbar img {
display: block;
text-indent: -9999px;
left: 5%; /* <-- % is relative */
overflow: hidden;
/*margin: 0 0 0 5%;*/
position: fixed;
float: left;
}
You will have to use NOT relatives units to achive what you want. Try using Absolute lengths units: the ‘cm’, ‘mm’, ‘in’, ‘pt’, ‘pc’, ‘px’ units
I am trying to change my old website menu to be mobile friendly and have a problem how the "menu elements" are displayed on small screen.
The menu consists of 3 elements (left, middle, right), now on small screen, they go vertically in same order.
But i would like to know if its possible with css to have them position like that, where the middle keeps its position and the left and right are moved under it, or does it need some more tricks.
How to achieve it?
http://img834.imageshack.us/img834/2203/menuse.jpg
EDIT, Added simplified code what i used to play around:
<div id="header">
<div id="Bholder">
<div id="AButton"></div>
<div id="HButton"></div>
<div id="CButton"></div>
</div>
</div>
CSS
#Bholder{
margin-left: auto;
margin-right: auto;
max-width: 750px;
}
#AButton{
float: left;
width: 250px;
height:100px;
background-color: red;
}
#CButton{
float: left;
width: 250px;
height:100px;
background-color: green;
}
#HButton{
float: left;
width: 250px;
height:100px;
background-color: yellow;
}
#media only screen and (max-width: 767px){
#Bholder{
margin-left: auto;
margin-right: auto;
max-width: 250px;
}
}
You could maybe try floating the left and right element to the right, and the middle element to the left. Then make the width of the wrapper element the same size as each element to get them to 'jig' about visually.
But yea, code would be helpful to see how you have the menu set up.
[EDIT]
#media only screen and (max-width: 767px){
#Bholder{
margin-left: auto;
margin-right: auto;
max-width: 250px;
position: relative;
}
#AButton {
position: absolute;
top: 100px;
left: 0;
}
#HButton {
position: absolute;
top: 0px;
left: 0px;
}
#CButton {
position: absolute;
top: 200px;
left: 0;
}
}
A note: I'd stick that in an <ul> with <li> instead of div's. And I'd use classes instead of #id's for your css.