Please excuse me if there are any mistakes in the following code or with my question, I don't know much about code but am learning :). Sorry for spaces in links and lack of these things - < - really struggling posting code :)
On my website http:// second to nature .co.uk/en/ I am trying to create background images with ivy down both sides of the website. Is it a prestashop website.
I did manage to achieve this with the following css code, however it would not work in ie 6-8 - because those browsers do not support css3.
background:url(http:// second to nature.co.uk/img/backgroundleft.jpg) top left fixed
no-repeat, url(http:// second to nature.co.uk/img/backgroundright.jpg) top right fixed no-repeat;
Therefore after some researching, I tried to create the wanted effect with two divs:
<div id="container">
<div id="inner-container">
</div>
</div>
And then use the following css to implement this.
And as you can see if you visit the site, the left image is shown properly, but the right does not show up.
#container {
background: url(http:// second to nature.co.uk/img/backgroundleft.jpg) repeat-y;
position: fixed;
top: 0px;
left: 0px;
width: 130px;
height: 1000px;
}
#inner-container {
background: transparent url(http:// second to nature.co.uk/img/backgroundright.jpg)) repeat-y;
position: fixed;
top: 0px;
right: 0px;
width: 130px;
height: 1000px;
}
Can anyone see where I am going wrong or have a fix? Help would be much appreciated.
Many thanks
You have a typo in your CSS:
url(http://secondtonature.co.uk/img/backgroundright.jpg))
There is a double )) at the end of the URL where there should be only one.
HOWEVER ... your HTML is all messed up, and there's a better way to do this. Firstly, you have a whole bunch of meta tags and other asset links inside your body element, when they should all be up in the head.
A better way to do this would be to wrap two divs around your content (they would be 100% width by default) and place the bg images on each of those.
You could use Modernizr and then us CSS3 border image. Then the border image will show up in IE6, 7 and 8.
A shame that you have IE6 users to worry about. It's such a bad, buggy and unsafe browser.
http://modernizr.com/
Related
I used part of the wordpress theme of another developer and now this slider content is floating to top
I want to center content vertically and horizontally with padding on all sides padding:100px;
Someone can visit my site and help with centering this block? This is url of my mywebsite, please share some knowledge and hope I will solve this problem.
I looked through your code, (thank god for Inspect Element on Google Chrome!) and it seems you have the header inside the body of the code, try moving the page header above the body in your html. I have found this to work for me in some cases.
Also next time try adding code relevant to the question to your OP, will help get faster and better answers
EDIT: You can centre it horizontally by changing the left and right tags in the css:
.//div class here {
left: 10%;
right: 10%;
width: 80%;
}
EDIT 2: Try this, im not sure if it will work but its worth a show:
.//div class here {
left: 10%;
right: 10%;
width: 80%;
height: 80%;
top: 10%;
bottom: 10%;
}
Try doing the steps explained on this site: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/. You will most likely want to apply this to:
.image img
which is the CSS selector for the div with a class of image containing an image tag. This may be too general though and I actually recommend giving your image an ID and targeting that.
I have a very simple background image of a couple of lines on my webpage. The code I'm currently using for it is:
{
background-image:url('stripe.png');
background-repeat:repeat-x;
background-attachment:fixed;
}
Super simple. But when I'm scrolling down in the page, I want things to underlap it, rather than overlap it.
Considering it's a small image (only 8px tall and 1px wide), it needs to go the entire edge of the page, and needs to meet the top edges to look right. Because of this, I don't know how to do it as anything other than a background image. Any suggestions?
Thank you.
Edit: If you know of a way to do this as being something other than a background, that'd be great! It doesn't need to be a background, so long as the effect is there.
Edit again: Thank you, here is a link to the page in question: What's going on really is that I want a bar to appear between the frames (but a nice looking bar, not like the ones that are automatically made) And I can't figure out how to make one that will stay on top.
I've got the two frames, and most pages don't scroll, so it's not a problem. So I have the bar as the background of the bottom frame, but when viewing scroll able pages, the effect falls apart.
Thanks everyone! I was able to edit things by adding a div at the top and having it formatted like this
#stripe {
background-image:url('stripe.png');
position: fixed;
width: 100%;
height: 8px;
left: 0;
top: 0;
}
That way I still had my image as the border, and was able to make the div exactly the right size and everything. Thank you for your help!
It is a background, so it is in the back. If you want something in the front, you need to have an element that is in front of the page.
HTML:
<div id="header"></div>
CSS:
#header {
background: gold;
position: fixed;
width: 200px;
height: 200px;
left: 0;
top: 0;
}
JsFiddle
I am trying to position a Twitter and Facebook image next to my portrait on my website but in order to get the positioning correct i have to use divs. The problem is that when i add a div to the image and a link to it the div makes the image unable to be clicked and go to the link. I can't get rid of the divs because its the only way for my images to be positioned correctly. I will post a JSfiddle below with the code.
JSFiddle: http://jsfiddle.net/HeyItsProdigy/RVUhV/
Area of issue : <div id="facebook"><img src="fb.png" height="101" width="101" />
The problem isn't exactly as you describe. The issue is that your positioning is causing your Twitter element to overlap the others, which makes them un-clickable.
There's unfortunately not an easy solution. I think you're going to have to rethink your whole CSS structure, including eliminating the deprecated <center> tags to figure this one out. Good luck.
Use z-index:
#twitter {
position:relative;
bottom:290px;
left:168px;
z-index: 1;
}
#facebook {
position:relative;
top:83px;
right:168px;
z-index: 5;
}
jsfiddle
However, this type of CSS styling shouldn't be used in this manner. Using rules such as top, left, bottom, right etc should rarely be used for positioning, unless using absolute positioned elements.
You should look into using margin and padding as well as display properties for positioning your divs. Much of this code can be taken out.
I'm very sorry to tell you, but the answer is: do a modern HTML tutorial!
You should try Code Academy they have interactive course for beginners and intermediates with direct feedback. It seems you got stuck with an old HTML 3/4 book which won't do you any good.
But I also got an direkt answer for your link problem: this fiddle where you include the images as background-images and by using your classes and selectors efficiently you have to write(mostly copy+paste) very few lines if you want to add something.
You do the most with this CSS part:
.socialmedia a {
display: block; /* Because the image is probably higher than the text */
height: 50px; /* you have to set it to block and height 50px to show the image */
padding-left: 55px; /* make room for the background image(50px) and extra margin(+5px) */
padding-top: 12px; /* center in the middle of the image */
padding-bottom: 12px;
text-decoration: none;
}
Example g+:
CSS:
.g a {
background: url(logo_g_50x50.png) no-repeat;
}
HTML
<li class="g">+1 me on g+</li>
and done!
It's easier to read and even easier to maintain for later reuse or additions
I am trying to center page on IE. If I force quirk-mode by adding <!-- some comment --> before DOCTYPE declaration margin: auto; doesn't work properly and page is adjusted to the left. If I remove the comment page is centered, but some other elements are in mess. Could you give me some hints how to solve this?
Setting margin-left: auto and margin-right: auto for the body using CSS usually does the trick.
Forcing quirks mode probably isn't a great idea, though.
Of course, being in quirks mode is not where you want to be so quit doing that. The problem will lie with the rest of the markup but, unless you give us a link or a jsfiddle with the complete markup, anything we say will just be a wild guess.
Does the page work in a modern browser (anything but IE)?
You can use a 50% margin, and a negative left position with half of your element size:
position: relative;
width: 600px;
margin-left: 50%;
left: -300px;
Well, this is my first post here and really enjoying the site.
I have a very basic (ugly as sin) site I have started and for some reason, I can not get the CSS Sticky footer to work for FireFox. IE works but FF shows it halfway up the page.
The URL is http://dev.aipoker.co.uk
I know I should be developing in FF and bug fixing in IE so I am guessing I might have actually made a mistake and somehow it works in IE but nowhere else.
Can anyone help put me out of my misery please?
Thanks, guys and gals.
I've had success with code like this:
footer {
display: block;
position: absolute;
width: 100%;
bottom: 0px;
}
Try this one, it works well on Firefox.
BTW, you should listen to Boagworld's podcast if you don't already. It's brilliant! :)
Cheers.
The minimal changes I can see to do this would be:
move footerSection inside of body
set position absolute on both body and footerSection
set bottom = 0px on footerSection
which ends up with something like this in your head:
<style type="text/css">
#body, #footerSection { position: absolute; }
#footerSection { bottom: 0px; }
</style>
<div id="body">
...
<div id="footerSection">
...
</div>
</div>
This is all you need to know about css only sticky footers & sticky navs:
Stick to bottom of page
Position: absolute;
top:auto;
bottom: 0;
Stick to bottom of screen
Position: fixed;
top:auto;
bottom:0;
Any issues and it's probably due to where you placed your html code (don't make the footer a child element unless it's sticking to the content wrapper), or overlapping CSS.
You can apply the same technique to sticky navigation by flipping the auto & top. It'sis cross browser compatible (From memory from IE7 and above) including mobiles.