I have a layout for a website i am working on, basically i have about 10 pages but my footer will not stay in the same place. I have tried so many different variations of code and have been unsuccessful.
The footer should stay at the bottom of the page in the same place on every page.
I am fairly new to this so bear with me if there is any obvious mistakes.
I have created a JSFiddle with a page where the footer is at the bottom but it inst as far down as i need.
#footer {
width: 100%;
height: 20px;
text-align: center;
clear:both;
position:relative;
}
http://jsfiddle.net/mjbL7tcx/
I have created another JSFiddle with another page where it is no where at all where i want it.
http://jsfiddle.net/dej6b2df/
Any suggestions much appreciated.
I fixed your HTML code on both your example pages (too long to post as code chunk and unnecessary):
Page 1
Page 2
The solution is on the CSS side of things: don't float your photo elements, you should be good to go. I also optimized your css styles for your photo-divs since you can set a photo-div class to all your photo divs, style them as a group, and use their numeric class (ex: photo-div1) to set the background image:
.photo-div {
width: 241px;
height: 400px;
margin-left: 60px;
margin-top: 90px;
border: 2px solid #333;
box-shadow: 0px 7px 7px #999;
overflow: hidden;
display:inline-block;
}
.photo-div1 {
background-image: url(images/wildlife/cow.jpg);
}
.photo-div2 {
background-image: url(images/food/ice-cream.jpg);
}
.photo-div3 {
background-image: url(images/flowers/blue-bells.jpg);
}
.photo-div4 {
background-image: url(images/sport/cycling-zoom.jpg);
}
Related
My problem is as follows: I replaced some items (navigation, footer) in my HTML-code by adding objects instead and loading them externally. Since I did that, I can't load background pictures into my 'collage' part of the website.
HTML: Stripped it off of everything not part of the problem (except for the content).
The container is just a wrapper for the whole thing. My website will contain a bunch of images in the middle that link to the appropriate websites and, on hover over, display a short description and a title.
.collage is used to style the overall frame of the element
id will be used to add the background images (worked before!)
HTML-Part:
<!DOCTYPE HTML>
<head>
<link rel="stylesheet" type="text/css" href="styles/main.css">
<title>Startseite</title>
</head>
<html>
<body>
<div id="container">
<article>
<div class="collage" id="cg">
<a href="#">
<div class="text">
<h2>CG-Projekte</h2>
<p>
Computergerenderte Projekte, basierend auf der Open-Source-Software 'Blender', sowie Tutorials für einige der Projekte.
</p>
</div>
</a>
</div>
</article>
</div>
</body>
</html>
Use the first part for general purposes.
body: font-size so I can scale all em elements with one value (mobile)
#container: Placed in the middle, positioned accordingly, slightly darker than the overall background. Pretty basic
article .collage: Display as table to make the image hover-over work properly (which it does even now)
#cg: The part that isn't working. I can change the background-color with this tag, but not the image
.text parts: Those are the designs for the hover-over part, they work as far as I can see. I am using opacity to make it invisible, until it is hovered over.
CSS-Styling:
*{
margin: 0;
padding: 0;
}
body{
font-size: 100%;
background-color:#2B2B2B;
}
#container{
margin: 0 auto;
margin-top: 100px;
min-height: 50em;
min-width: 70em;
max-width: 80em;
background-color: #2A2A2A;
border: 2px solid white;
}
article .collage {
display: table;
height: 500px;
width: 700px;
margin: 100px 0 0 5px;
border: 1px white solid;
}
#cg{
background: url("cg_collage.jpg");
}
article div .text{
height: 400px;
width: 800px;
background: rgba(0,0,0,0.55);
position: relative;
top: 0;
left: 0;
vertical-align: middle;
display: table-cell;
opacity: 0;
transition: all ease-in 0.1s;
}
article .collage a{
text-decoration: none;
}
article .collage .text{
padding: 0 10px 0 10px;
}
article .collage .text h2{
text-align: right;
text-decoration: none;
color: #ADFF5C;
line-height: 70px;
font-size: 40px;
font-family: monospace;
border-bottom: 3px ridge #FFFFFF;
line-height: 50px;
}
article .collage .text p{
text-align: right;
font-family: Arial, Helvetica, sans-serif;
margin-top: 5px;
color: #ADFF5C;
}
article div:hover .text{
opacity: 1;
}
Folders
As I said: I can change the background color fine, hover-over works perfectly. The only thing that won't work is the background-images. Images work fine if I embed them in the html-file.
I can't figure it out and a different viewpoint might find the 'Error 30' ;)
All of the other answers are correct, in the sense that your paths are not correct. The reason why this is happening is b/c your CSS file is in, I'm assuming, the "styles" folder, and when you reference your image, the path is assuming that the image is in the same folder as your CSS file.
Instead of using ".." to "back out" of a folder, it's always a best practice to use relative paths. Reason being, if you move files, folders, etc, then the path will always be correct.
Hence, instead of using background: url('../cg_collage.jpg'), you should use background: url('/cg_collage.jpg'). The "/" at the beginning tells the file(s) to look at the root and start from there. So rather than always counting how many folder structures you need to "drop back", use relative paths.
Also, a good practice is to always have your images in a folder, and name that folder appropriately (eg - "img" or "images" or w/e).
Helpful article on absolute and relative paths.
You have to change your CSS:
#cg{
background: url("cg_collage.jpg");
}
To:
#cg{
background: url("../cg_collage.jpg");
}
This is because your image is outside styles folder (where your stylesheet is).
I am not sure but CSS is looking for image file in its direcotry (styles). Try this one:
#cg{
background: url("../cg_collage.jpg");
}
You code works perfectly, when the file cg_collage.jpg is in folder /styles. Is it there in your project?
I have some text and want it to be higher and inline with the first icon. This is it live: http://www.penguinie.co.uk/#projects the css is:
.german img {
height: 100;
width: 100;
padding: 2px 2px 1px 2px;
}
.german img:hover {
border: 1px solid #2e8ece;
border-radius: 10px 10px 10px 10px;
}
.german-content {
display: none;
float: right;
width: 400px;
}
.german:hover .german-content {
display: inline-block;
border: 1px solid;
}
.german-content p {
font-size: 15px;
font-weight: normal;
line-height: 30px;
word-spacing: 5px;
color: black;
}
.chembond img {
height: 100;
width: 100;
padding: 2px 2px 1px 2px;
}
.chembond img:hover {
border: 1px solid #2e8ece;
border-radius: 10px 10px 10px 10px;
}
.chembond-content {
display: none;
float: right;
width: 400px;
}
.chembond:hover .chembond-content {
display: inline-block;
border: 1px solid;
}
.chembond-content p {
font-size: 15px;
font-weight: normal;
line-height: 30px;
word-spacing: 5px;
color: black;
overflow: scroll;
}
And this is the HTML:
<section id="projects-content">
<p>Projects</p>
<section class="german">
<img src="assets/img/german.png" height="60" width="50" />
<section class="german-content">
<p>I started this project because I have seen many students in my German class keep on getting the tenses wrong by putting verbs in the wrong places, missunderstanding past participles etc... so I started this to help students (or anyone) understand the sometimes confusing German tenses. Each tense page consistes of three sub-sections: a question, an answer and a statement. These then in turn include an example and an explanation. If you were to hover over some of the words then a popup box will appear, explaining the use of the word. You can see it here (please bare in mind that this is still a work in progress). If you want to email me a tip about it, or just ask me about it then don't hesitate to contact me.</p>
</section>
</section>
<section class="chembond">
<img src="assets/img/bonding.png" height="60" width="50" />
<section class="chembond-content">
<p>This isn't much of a project, more homework. In Science we were asked to create a poster on the different types of bonding (ionic, metallic, covalent, etc) and I naturally said no as I cannot draw and hate making posters. I then did it as homework and made a website. It was a joint website with my friend Elliott who did all the drawings/images, I then wrote the code. If you are wondering if my teacher like it then I can tell you that he did. If you want to see it then click here. I know there is one mistake in the image but I have put a note at the bottom of that section.</p>
</section>
</section>
</section>
So when I hover over the second icon I want the text in the box to be the same height as the first one is when you hover over it.
Here is what you should add to your css:
.chembond-content {
display: none;
float: right;
width: 400px;
position: relative;
top: -72px;
}
You could add margin-top with a negative value to your CSS, but NO.
A much more maintainable solution would be to have only one <section class="content"> tag, align it, and with JS change the text when hovering over the relevant icon.
when making a question here with simple CSS and HTML consider doing a jsFiddle and sharing that instead of a personal link, otherwise when this is working and your live link changes then the question will be irrelevant.
The CSS Position Approach
So here is my fiddle minus a bit of code clutter:
Demo
The reason the second image is hovered to reveal the the section element with the class of .chembond-content and the element is not at the top (like the first image) is because you are floating it to the right but it's still part of the document flow after that image that you have right before the section.
If you want to have both elements open up in the same spot then you would get them out of the document flow by giving them a fixed or absolute position which in this example I simple set it to 20 pixels from the top and from the right.
Since these elements are not taking up space in the flow of your markup then you are free to position both at the top if you want to.
So I've got a series of clickable images in my page. I've tried to optimise this by generating a single image containing all the images I need and I intend to use sprites to select the one I want. I'm having trouble figuring out the best way to add anchor tags to the sprites though?
So I'm after a clickable HTML element that supports sprites, preferably without using JavaScript. I can do it using JavaScript but I'd prefer to avoid it.
OK, here's my code, what there is:
.touringEscorted {
height:125px;
width: 214px;
background-image: url('/Images/Travel2New/ToursImages/ToursBanners.jpg');
background-position: 0 0;
}
.touringNew {
height:125px;
width: 214px;
background-image: url('/Images/Travel2New/ToursImages/ToursBanners.jpg');
background-position: -10px 0;
}
I've tried
<div class="touringEscorted">
and
and several others. Seems there's no way to use sprites/background images and anchor tags at the same time. Am I right?
Any suggestions?
Ok then :
Should work, but adding display:block; to the CSS :
.touringEscorted {
height:125px;
width: 214px;
background-image: url('/Images/Travel2New/ToursImages/ToursBanners.jpg');
background-position: 0 0;
display:block;
}
Like this?
<a class="sprite sprite1" href="javascript:;">Link Text</a>
sprite {
display: block;
background: url(path/to/image/file.ext);
text-indent: -9999px;
}
sprite1 {
width: WWpx;
height: HHpx;
background-position: -NNpx - MMpx;
}
Doesn't Google consider off screen text as spammy? I came up with a modification. I put the link in another element, in this case a table. I added the background image class in the element and in the link like this:
CSS code:
.sprite{
background: url('images/sprite.png') no-repeat top left;
}
.sprite.termite {
background-position: 0px -499px;
width: 150px; height: 113px;
display: block;
}
HTML code:
<td class="td sprite termite">
</td>
It renders the image in the table perfectly and clicks!
I'm at a total loss on why I can't align the Search box to the left
The Search and RSS feed align on the test page:
http://scottjaxon.com/devsite/testnivo48.html
As it is on the home page (with a pic instead of nivo slider)
http://scottjaxon.com/devsite/index.html
I don't get it. I gotta be missing the smallest thing!
#wrapper #user1 #feahome #searchhome {
float: right;
color: #FFFFFF;
height: 22px;
margin-top: 8px;
padding: 0px 20px 0px 20px;
Or is it something with the NivoSlider CSS?
.nivoSlider {
position:relative;
width:100%;
height:auto;
overflow: hidden;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
}
.nivo-main-image {
display: block !important;
position: relative !important;
width: 100% !important;
}
Your index.html and testnivo48.html have different dom structures.
In index.html, the feahome div tag is the parent of rsshome and searchhome div tags; but in the testnivo48.html, they are all on the same level.
That's why the following css rule (in http://scottjaxon.com/devsite/css/style.css) gets applied on index.html, but ignored in testnivo48.html
#wrapper #user1 #feahome #searchhome {
...
}
After you fix the html, your problem might get solved.
I was looking at the CSS for both and the only thing I saw that was different in your
CSS compared to the CSS for http://scottjaxon.com/devsite/index.html is this:
#wrapper #user1 #feahome #searchhome {
float: LEFT; // the working version has it floated left as well
color: #FFFFFF;
height: 22px;
margin-top: 8px;
padding: 0px 20px 0px 20px;
Give it a shot and see if that works.
It may be a prioritizing problem. Using div#searchhome will give it a higher priority.
Problem
I am working on a project to theme a website, but I am not allowed to change the HTML or JavaScript. I can only update the CSS stylesheet and add/update images.
Requrements
I need to style a h3 tag to have an
underline/border after the content.
This h3 will be used multiple times
on the page, so the conent length can
vary
The solution needs to be
cross-browser (IE 6/7/8, FF 3, &
Safari)
Sample Code
<div class="a">
<div class="b"><!-- etc --></div>
<div class="c">
<h3>Sample Text To Have Line Afterwards</h3>
<ul><!-- etc --></ul>
<p class="d"><!-- etc --></p>
</div>
</div>
Sample Output
Sample Text to Have Line Afterwards ______________________________________
Another Example __________________________________________________________
And Yet Another Example __________________________________________________
Notes
I think #sample:after { content: "__________"; } option wouldn't work since that would only be the correct length for one of the tags
I tried a background-image, but if it gave me problems if I gave it one with a large width
Using text-indent didn't see to give me the effect I was looking for
I tried a combination of border-bottom and text-decoration: none, but that didn't seem to work either
Any ideas would be much appreciated!
This will work if class 'c' is always the parent of the h3...
.c {
position: relative;
margin-top: 25px;
border-top: 1px solid #000;
padding: 0px;
}
h3 {
font-size:20px;
margin-top: 0px;
position: absolute;
top: -18px;
background: #fff;
}
It lets the container have the border, then uses absolute positioning to move the h3 over it, and the background color lets it blot out the portion of c's border that it's covering.
try attaching a background image to class c of a repeating underline, then add a background color to the h3 to match the background of the container. I believe that you would have to float the h3 left in order to get the width to collapse. does that make sense?
.c {
background: #ffffff url(underline.gif) left 20px repeat-x;
}
.c h3 {
margin: 0;
padding: 0 0 2px 0;
float: left;
font-size: 20px;
background: #ffffff;
}
.c h3 { display: inline; background-color: white; margin: 0; padding: 0; line-height: 1em; }
.c ul { margin-top: -1px; border-top: 1px solid; padding-top: 1em; /* simulate margin with padding */ }
http://besh.dwich.cz/tmp/h3.html
H3 {
border: 1px solid red;
border-width: 0 0 1px 0;
text-indent: -60px;
}
You need to know the width of the text, but works pretty well.
The only solution I've imagined so far is to make a PNG or GIF image, with 1px height and a very large width (depends on your project, could be like 1x2000px), and do something like this:
h3#main-title { background: url(line.png) no-repeat bottom XYZem; }
where the XYZ you'd set manually, for each title, in 'em' units. But I can't figure out a 100% dynamic solution for this one, without using JS or adding extra markup.
this worked for me
div.c
{
background-image:url(line.gif);background-repeat:repeat-x;width:100%;height:20px;
}
div.c h3
{
height:20px;background-color:white;display:inline;
}
you make the div the width of your content
then you set the background of the h3 to the background of your page. this will then overlap the background imageof the full div. You might want to play with background positioning depending on your image
Can you pad content in the UL tags? If so, this might work:
h3 { display: inline; margin: 0; padding: 0 10px 0 0; float: left;}
ul { display: inline; border-bottom: 1px solid black; }
check source code of: http://nonlinear.cc/lab/friends/elijahmanor.html
then again i have NO IDEA how to control the end of the line.
Assuming that you're working with dynamic content, the best I could suggest is to accept graceful degradation and use a mix of great_llama and Bohdan Ganicky
Imagine:
A long title that will wrap to two lines___________________
and leave you like this in great_llama's solution
and nothing appearing at all with Bohdan Ganicky's solution if ul isn't immediate preceded by ul.
Solution:
.c h3 { display: inline; background-color: white; margin: 0; padding: 0; line-height: 1em; }
.c + * { margin-top: -1px; border-top: 1px solid; padding-top: 1em; /* simulate margin with padding */ }
We care about IE6, but accept that this is an aesthetic touch and IE6 users will not suffer. If you can't get the designer to accept this AND you can't alter the HTML, then do something else (before you find another job ;))
Here's a better answer:
.c {
background: url('line.png') repeat-x 0 20px;
}
H3 {
background-color: white;
display: inline;
position: relative;
top: 1px;
}
Use a small, 1px height, couple px wide image as your underline and occlude it with a background color on your H3.
h3:after {
content: '___________';
}