Welcome Guest [Log In] [Register]
~ If you really want to excel, do more than what is asked. Ask yourself what you do or specialize in that can boost the Angels of Fire culture. The Jedi Collective observes, and recognizes. ~ ~Looking to improve your saber/force techniques? Want to show the rest of the clan your creative or logical sides? Sign up for a Wings of the Inferno Challenge! Open to all members ranked Hopeful through Jedi Master. ~ ~Something on your mind? Don't be afraid to speak up! Contact a member of The Jedi Council!~
Welcome to Angels Of Fire A New Jedi Order for the Ages. We hope you enjoy your visit.


You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features.

Username:   Password:
Add Reply
HTML and CSS problem
Topic Started: Jan 2 2012, 05:45 AM (873 Views)
IrishDragon
Member Avatar
Founder of AoF
[ *  *  *  *  *  * ]
Ok, so I'm building a 40 page website for a friend. 10 of the same in the following for languages: French, Finnish, Swedish, English.

One problem I am facing is getting the footer to remain at the bottom of variable length pages.

From the HTML
Quote:
 
<div class="clearfooter"></div>
<div id="footer">
<p>Emilie Mayer 1234567890, 123 funny street, Jstad, Finland 68600 - Webmaster Link</p>
</div> <!-- end of footer div -->


Excerpt from the cascading style sheet
Quote:
 
.clearfooter {
height: 330px;
clear: both;
}

#footer {
height: 4em;
position: relative;
border: 4px solid navy;
}


Problem right now is the footer will sit right smack in the middle of the longer pages. Certain adjustments I make set the footer far higher or cut the width. It's quite annoying. I'm also only using the border right now as a means of seeing how the page is laid out.

Suggestions?
Offline Profile Quote Post Goto Top
 
Apollonios
Member Avatar
Apple Onion Nose
[ *  *  * ]
I know that newest verison of HTML (HTML5) actually has a <footer> tag. That might be what you're looking for. It may even eliminate the need of CSS positioning as long as you put it at the end of the document.

If that doesn't work out, try testing the "bottom" attribute in your css (this tells the browser how many +/- pixels the content will appear from the bottom of the page) .
Edited by Apollonios, Jan 2 2012, 07:54 AM.
Offline Profile Quote Post Goto Top
 
IrishDragon
Member Avatar
Founder of AoF
[ *  *  *  *  *  * ]
No luck with it

Quote:
 
<div class="clearfooter">
<div id="footer">
<p>Emilie Mayer 1234567890, 123 funny street, Jstad, Finland 68600 - Webmaster Link</p>
</div> <!-- end of footer div -->


changed to:

Quote:
 
<footer><p>Emilie Mayer 1234567890, 123 funny street, Jstad, Finland 68600 - Webmaster Link</p></footer>


No positive results.
Offline Profile Quote Post Goto Top
 
Cziko
Member Avatar
A forum Newbie.
[ * ]
That street has a funny name (couldn't resist).
I was sort of hoping by CSS you meant Photoshop CSS, but I know nothing about HTML :( Sorry.
Offline Profile Quote Post Goto Top
 
IrishDragon
Member Avatar
Founder of AoF
[ *  *  *  *  *  * ]
When using the <li> function I need to find a way to remove the bullet this function creates.

Also, I need to find a way to remove the underlines from links.

Below is a set of code for example.

The top part of the code is the navigation bar where I need to remove the bullets and the underlines.

The 2nd part of the code is the FAQ portion where the client has also request the removal of the bullets and underlining.

Any Web-heads know how to do these?

Quote:
 
<div id="navigation">
<ul>
<li><a href="/Shiatsu/swe/faq.html"><img src="/Shiatsu/graphics/swelang.png" width="25" height="25" alt="Swedish" /></a> <a href="/Shiatsu/fi/faq.html"><img src="/Shiatsu/graphics/finlang.png" width="25" height="25" alt="Finnish" /></a> <a href="/Shiatsu/eng/faq.html"><img src="/Shiatsu/graphics/englang.png" width="25" height="25" alt="English" /></a> <a href="/Shiatsu/fr/faq.html"><img src="/Shiatsu/graphics/frelang.png" width="25" height="25" alt="French" /></a></li>
<li><a href="index.html">Hem</a></li>
<li><a href="shiatsu.html">Shiatsu</a></li>
<li><a href="companies.html">Shiatsu för företag</a></li>
<li><a href="reflexology.html">Zonterapi</a></li>
<li><a href="auromatherapy.html">Aromaterapi</a></li>
<li><a href="emilie.html">Émilie</a></li>
<li><a href="treatments.html">Behandling</a></li>
<li><a href="giftcards.html">Presentkort</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="contact.html">Kontakta mig</a></li>
</ul>
</div> <!-- end of navigation div -->
<div id="bodycontent">
<h2>FAQ</h2></a></p>
<ul>
<li><a href="#QID1">För vilka ändamål passar shiatsu och relexologi?</a></li>
<li><a href="#QID2">För vem passar behandlingen?</a></li>
<li><a href="#QID3">Kan det uppstå jobbiga reaktioner på behandlingen?</a></li>

<li><a href="#QID4">Ser varje behandling med shiatsu och zonterapi likadan ut?</a></li>
<li><a href="#QID5">Passar shiatsu eller zonterapi när jag är gravid?</a></li>
<li><a href="#QID6">Varför är shiatsu och zonterapi effektivt?</a></li>

<li><a href="#QID7">Är shiatsu och zonterapi effektivt mot kroniska sjukdomar?</a></li>
<li><a href="#QID8">Jag tar mediciner. Kan jag ändå behandlas med shiatsu och zonterapi?</a></li>
<li><a href="#QID9">Hur många behandlingar behöver jag?</a></li>

<li><a href="#QID10">Vad händer under en behandling?</a></li>
<li><a href="#QID11">I vilka fall rekommenderas inte shiatsu och zonterapi?</a></li>
<li><a href="#QID12">Hur gör jag det bästa av min session?</a></li>

<li><a href="#QID13">Hur ska jag klä mig?</a></li>
<li><a href="#QID14">Vad är en eterisk olja?</a></li>
<li><a href="#QID15">Hur vet jag om en eterisk olja är av hög kvalitet?</a></li>

<li><a href="#QID16">Hur använder jag en eterisk olja?</a></li>
<li><a href="#QID17">Vilka försiktighetsåtgärder rekommenderas vid användandet av eteriska oljor?</a></li>
<li><a href="#QID18">Kan jag blanda en eterisk olja direkt i badvattnet?</a></li>

<li><a href="#QID19">Kan jag använda eteriska oljor i en oljebrännare?</a></li>
</ul>

Offline Profile Quote Post Goto Top
 
IrishDragon
Member Avatar
Founder of AoF
[ *  *  *  *  *  * ]
Resolved. :D
Offline Profile Quote Post Goto Top
 
IrishDragon
Member Avatar
Founder of AoF
[ *  *  *  *  *  * ]
One major issue is the footer.

I've been unable to get the footer to rest at the bottom of the pages. Each page is very different in length, some much shorter than average, others far longer than average.

I'm unsure of the best method for creating a footer for dynamic page lengths.

<footer> tags have not done it.
Currently using <div id="footer"> tags but not able to find any CSS commands for floating or relative or absolute positioning at the bottom.
Offline Profile Quote Post Goto Top
 
Apollonios
Member Avatar
Apple Onion Nose
[ *  *  * ]
Hey ID,

A few things I noticed with the footer.

1. You include the footer div outside of the bodycontent div in the html (at least, the html in the swedish faqs we went over.) This shifts the div to the left instead of it staying underneath. If you put the div inside of and at the end of the bodycontent div, it will stay at the bottom.

2. You have two different #footer IDs in the CSS and the first one doesn't have a closing bracket (the one with the comment inside of it.) This could render the second one (with the code) useless -- that is if you decide to add any attributes or properties later.

So for starters, include the footer div at the end of the body content div so it doesn't end up in the middle of the page. When closing the div tags, be sure to close the footer div first, then the body content. You can always add other attributes and properties later in the css if needed.

I did these things and they worked no problem in my browser.

To remove links in your html/css, you can use the "text-decoration: none" property in the css for the a:link, a:visited:, a:hover, a:active, um, things.

Not sure about the bullets. I would have to look it up.
Edited by Apollonios, Jan 7 2012, 03:10 AM.
Offline Profile Quote Post Goto Top
 
IrishDragon
Member Avatar
Founder of AoF
[ *  *  *  *  *  * ]
I'll check that div location later on today

And yes, I've resolved the Link underlines and bullet points. B)
Offline Profile Quote Post Goto Top
 
IrishDragon
Member Avatar
Founder of AoF
[ *  *  *  *  *  * ]
Yes, putting the footer div in the bodycontent helped. thanks! B)
Offline Profile Quote Post Goto Top
 
IrishDragon
Member Avatar
Founder of AoF
[ *  *  *  *  *  * ]
The website is complete, minus a few photos to replace the stock photos.

http://www.aof-clan.com/Shiatsu/eng/index.html
Offline Profile Quote Post Goto Top
 
Apollonios
Member Avatar
Apple Onion Nose
[ *  *  * ]
IrishDragon
Feb 27 2012, 10:36 AM
The website is complete, minus a few photos to replace the stock photos.

http://www.aof-clan.com/Shiatsu/eng/index.html
Looks excellent. B)
Offline Profile Quote Post Goto Top
 
IrishDragon
Member Avatar
Founder of AoF
[ *  *  *  *  *  * ]
ty ty =)
Offline Profile Quote Post Goto Top
 
IrishDragon
Member Avatar
Founder of AoF
[ *  *  *  *  *  * ]
Also...

For those of you with HTML or CSS knowledge. I am open to critiques or tips on the site, it's functionality, and its coding. B)
Offline Profile Quote Post Goto Top
 
Aries
Member Avatar
A Jedi Master of Posting
[ *  *  *  *  * ]
A couple little things I'd recommend

On the links, when you click them the text tend to fade with the highlight. I suggest changing the text to turn white when clicked. It's been a while since I've messed with code so I'd have to look up the exact line you use but I know it's possible.

Also I think just to add some dimension to the website, place the content in white boxes, then place a color to the background. If you need an example let me know.
Offline Profile Quote Post Goto Top
 
Go to Next Page
« Previous Topic · Windows · Next Topic »
Add Reply

Primary Maps: Christmas Maps: