I have a problem of howto remove the white space caused on the bottom of the page - when i remove the gear image it works fine.
html, body{
height: 100%;
width: 100%;
font-size:10pt;
}
.footer_fg{
float: left;
position: relative;
width:455px;
height:358px;
background: url('/include/images/Final-Website2_11a.png') no-repeat 0 0;
top: -150px;
border:0;
}
this is the CSS for the site.
Using position: relative it is not the same as margin-top. position:relative first places the item on it's original position (and messures the size of the parent element with this position) and then just moves it. So there will always be white space where this item was before. If you just want to move it without leaving this white space you should think about using margin-top: -150px instead. As we don't see the rest of your code it is hard to tell if this would work for your site.
Related
I have a contentWrapper class which contains all of the elements on my page. For some reason, the navigation takes up what appears to be 100% of the body and then some. I cannot however get the following elements, the slider and divs below, to stretch to fill the same width. There is always extra room to scroll to the right which displays the background color. I have made it pink in the fiddle its easy to see.
body {
background-color: black;
}
.contentWrapper {
height: 100vh;
width: 100%;
background-color: black;
}
http://jsfiddle.net/o5y26tqw/
Any suggestions? I feel like it could be an easy fix, deleting sections of the page at a time did not seem to remedy the issue.
So it looks like your .cycle-overlay is 100% wide and left is set to 20px. This is pushing everything over and revealing the background. Setting the width to 300px got rid of it for me.
JSFiddle
.cycle-overlay {
position: relative;
top: -200px;
left: 20px;
z-index: 999;
width:200px;
}
Currently, I am using a text widget with HTML and CSS to create my footer. For some reason, on a specific page on my website there is a huge white space above my footer. The space also increases as the resolution increases. It can mainly been seen starting with resolution widths 1440x900 and up. I am sure it has something to do with my footer but I am not sure what exactly.
Can be seen here: http://museiam.ca/vault/
Footer CSS:
.gbtr_dark_footer_wrapper .container_12 .grid_3 {
z-index:99999 !important;
background-color: #fff;
background:rgba(255,255,255);
background:rgba(255,255,255, 0.5);
position: fixed;
bottom: 0 !important;
left:0;
width: 100%;
}
Thanks for looking!
Your footer is fixed to the bottom of the window due to
.gbtr_dark_footer_wrapper .container_12 .grid_3 {
position: fixed;
bottom: 0 !important;
}
As your resolution increases, the content will fill up only the top of the page, and the footer will stay at the bottom, leaving a huge whitespace in between.
please see link below
as you can see there's a text on header (header is an image)
the text is:
mail#yahoo.com (this text is a part of image)
I convert that part of header image to link with below code
<div id="hw"><div id="header"><img src="test.jpg" /></div></div>
and this is #link
#ResponsiveLink {
width: 267px;
height:29px;
display:block;
position:absolute;
top:100px;
margin-left:413px;
}
how can we make that link be responsive in other devices? for example when browser is narrow position of the a tag with #ResponsiveLink id changes but i want it be fixed over my text.
The best way I know, is not to put a big part of your screen as an image. On the other hand you probably don't want to cut the image into several separate images. So, I suggest using CSS Sprit.
After separating the image, you can put the parts beside each other using float, clear, and percentage widths, or use a framework like bootstrap.
If you still want to use the image as a whole header, in a single HTML tag which don't recommend at all, using percentage top for your #ResponsiveLink would work. You should just add width: 100% to all its parents: header, hw, and wrapper.
Following the comments:
#ResponsiveLink {
background: none repeat scroll 0 0 #FF0000;
display: block;
height: 0;
left: 58%;
margin-left: 0;
margin-top: 7%;
padding-bottom: 3%;
position: absolute;
top: 0;
width: 25%;
}
This will fix the problem because of the difference between percentages of position and margin, top percentage is calculated using first absolute parent's height but margin and padding percentages are calculated using parent's width. There's still a problem caused by the max width which you can fix adding a wrapper inside your #head with a width of 100% and no max width.
The other try of using floats and separated images have too many problems to write here, sorry.
What you're currently building isn't a sustainable solution and you should definitely see other replies on how to improve your site layout.
However, if you need a temporary solution, the following CSS changes will work on your current page:
#header {
margin: 0 auto;
max-width: 980px;
position: relative;
}
#ResponsiveLink {
background: none repeat scroll 0 0 #FF0000;
display: block;
height: 30%;
left: 60%;
position: absolute;
right: 12%;
top: 37%;
}
Hey guys I simply cannot get this to work.
I have some content that is centred on the page using the margin: auto; "trick".
In this content I have an image. I need to make a color bar coming under the image continuing out to the sides of the browser. On the right side I need it to look like its coming up onto the image.
I have made this picture to try an graphically show what I mean: image
As you can see the bar runs from the left to the right side of the browser. The centred image is just placed on top of it and then an image positioned on the top of the image. But I haven't been able to get this working. Any one who would give it a go?
I tried positioning the bar relative and z-index low. This worked but the bar keep jumping around in IE 7-8-9. Centring the image wasn't easy either and placing that smaller image on top was even harder. It wouldn't follow the browser if you resized it. The problem here is that the user have to be able to upload a new picture so I cant just make a static image.
Please help I am really lost here
EDIT:
Tried the example below but when I run the site in IE 7-8-9 I have different results. link
I have made a jsFiddle which should work in Chrome and IE7-9: http://jsfiddle.net/7gaE9/
HTML
<div id="container">
<div id="bar1"></div>
<img src="http://placekitten.com/200/300"/>
<div id="bar2"></div>
</div>
CSS
#container{
width: 100%;
margin: 0 auto;
background-color: red;
text-align: center;
position: relative;
}
#bar1{
background-color: blue;
position: absolute;
top: 50%;
right: 0;
z-index: 1;
height: 30px;
width: 40%;
}
#bar2{
background-color: blue;
top: 50%;
left: 0;
z-index: 3;
height: 30px;
width: 40%;
position: absolute;
}
img{
text-align: center;
z-index: 2;
position: relative;
}
The key here is that the container is positioned relative, thus enabling absolute positioning of the child elements in relation to their parent. Use z-index to control how the elements are stacked.
A method I use for centering anything with css is:
.yourclass {
width:500px;
position:absolute;
margin-left:50%;
left:-250px;
}
'left' must be have of your width and then make it negative.
To date I have not experienced any problems with this.
I'm creating a div which has to have a close button in the upper right corner just like in the image
image http://rookery9.aviary.com.s3.amazonaws.com/4655000/4655386_f01b_150x250.jpg
The first image was made in photoshop. I'm trying to do the same but with CSS. "Fechar" is the close button (in Portuguese). What is the better way to properly position it without workarounds, with clean CSS and Web Standards?
Here is my code: http://jsfiddle.net/wZJnd/
This is as far as I could reach.
I would use absolute positioning inside a relatively positioned #header:
HTML
<div id="header">
<h1>Your Title</h1>
Close
</div>
CSS
#header {
width: 700px;
height: 200px;
position: relative;
text-align: center;
background: #000 url(the-logo.png) no-repeat 30px 10px;
}
#header .close {
position: absolute;
top: 20px;
right: 20px;
}
This will cause the a.close link to use the #header as its coordinate system and position it 20px from the top and right edge.
In my experience padding, margins and float are more sensitive to rendering inconsistency and font size changes than positioning. As a result, I use position whenever possible.
You could do a :
img.close {
float:right;
margin:25px 25px 0 0;
}
I would work with div wrappers around the img
So you would have a div for your header "div.header" that would contain these div :
div.logo : The logo on the left containing an img tag;
div.title : The title of the page;
div.close : The close button that would contain your img tag.
I better like using the padding than the margin attribute. I think it works better for compatibility purposes.