CSS Questions

Chimaira · June 25, 2006

Hello, I'll start by making a brief introduction, my username is Chimaira though my real name is Ben, and please feel free to call me either, it all depends on your taste. I'm 16 years of age, I like to believe I'm somewhat mature and I've begun the coding of my new and upcoming website. I enjoy socialising with my friends, and I’ve applied to study ICT, English and Art at A Level. But I’ve rambled on enough, I’ve registered to your forum because I have several questions concerning css to ask and I feel that you can help me. But off course, if questions are not allowed in this forum then I send you my deepest apologies and I’ll understand if this thread is deleted. I’ll provide a link and a couple of screenshots to help explain what I mean, I’m not very good at asking questions you must understand. First QuestionI’ve created a gradient above a table on my page, this screenshot points to what I mean. How do I place the text into the middle of the gradient? I've tried padding but it made the gradient larger then it should be. Though perhaps I'm doing it wrong. Second QuestionI'm trying to create a navigation bar so that my end users may easily navigate the website, the only problem is I’m bad at positioning using css. I’m able to place css classes at the right, left, etc of the page, whilst moving it from the left, right, etc using pixels. However, I need to position these classes inside another div. The class is named .middle.How could I edit my classes to move say 20px from the right of the .middle class?My Codehttp://ericanque.co.uk/main.phpThis is the coding for my website, I realise that it's not perfect nor valid, but it's the first time I've atempted coding so I'm rather proud of myself.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>The Betrothal of Ericanque</title><meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" /><meta http-equiv="Content-Language" content="en-us" /><link href="/uploads/scripts/css.php" rel="stylesheet" type="text/css" /></head><?php/*+-----------------------------------------------|   The Betrothal of Ericanque v1.0 Script|   ========================================|   Created by Benjamin Lambe|   © 2006 Benjamin Lambe|   ========================================|   Date Created: Tuesday, 14th March 2006|   Last Updated: Wednesday, 20th June 2006|   Web: [url="http://ericanque.co.uk"]http://ericanque.co.uk[/url]|   Email: ben@ericanque.co.uk|   ========================================+-----------------------------------------------*/?><style type="text/css">BODY { font-family: Verdana, Tahoma, Arial, sans-serif; font-size: 10px;  color: #262223;  margin:0px 10px 0px 10px;background-color:#000000  }BODY {background-image:url(/); background-attachment: fixed;}A:link {font-family:Verdana,Arial,sans-serif; font-size:11px/18px; font-weight:bold; color: #262223;}A:visited {font-family:Verdana,Arial,sans-serif; font-size:11px/18px; font-weight:bold; color: #262223;}A:active {font-family:Verdana,Arial,sans-serif; font-size:11px/18px; font-weight:bold; color: #262223;}A:hover {font-family:Verdana,Arial,sans-serif; font-size:11px/18px; font-weight:bold; color: #262223;}<!--A{text-decoration:none}-->.logo { float: center; width:900px; padding: 5px; padding-left: 70px; background-color: #000000; }.base { float: center; width:734px; height:28px; background-repeat: no-repeat; background-image: url(uploads/images/v1/base.jpg); background-color: #E1E7F5; }.base2 { float: center; width:734px; height:28px; background-repeat: no-repeat; background-image: url(uploads/images/v1/base2.jpg); background-color: #E1E7F5; }.warning { float: center; width:590px; padding: 5px; padding-left: 70px; text-align: left; background-repeat: no-repeat; background-image: url(/uploads/images/v1/warning.jpg); background-position: left; background-color: #EDF1AB; border-top: 1px solid #A7AB65; border-bottom: 1px solid #A7AB65; border-right: 1px solid #A7AB65; border-left: 1px solid #A7AB65;}.important { float: center; width:590px; padding: 5px; padding-left: 70px; text-align: left; background-repeat: no-repeat; background-image: url(/uploads/images/v1/warning.jpg); background-position: left; background-color: #EDF1AB; border-top: 1px solid #A7AB65; border-bottom: 1px solid #A7AB65; border-right: 1px solid #A7AB65; border-left: 1px solid #A7AB65;}.middle { float: center; height: 100%; width:734px; padding: 0px; background-color: #E1E7F5;}.table1 { float: center; width:600px; padding: 5px; text-align: left; background-repeat: no-repeat; background-image: url(/uploads/images/v1/php.jpg); background-position: right; background-color: #EBEDFF; border-top: 1px solid #BBC1FF; border-bottom: 1px solid #BBC1FF; border-right: 1px solid #BBC1FF; border-left: 1px solid #BBC1FF }.category { float: center; width:600px; height:28px; font-padding: 5px; background-repeat: repeat; background-image: url(/uploads/images/v1/category.jpg);background-color: #000000;}.copyright { float: center; width:600px; padding: 5px; text-align: center; background-color: #EBEDFF; background-position: center; border-top: 1px solid #BBC1FF; border-bottom: 1px solid #BBC1FF; border-right: 1px solid #BBC1FF; border-left: 1px solid #BBC1FF }</style><div align="center"><div class="logo"><div align="left"><a href="/index.php"><img src="/uploads/images/v1/home.jpg"></a><img src="/uploads/images/v1/line.jpg"><a href="/policies/terms.php"><img src="/uploads/images/v1/terms.jpg"></a><img src="/uploads/images/v1/line.jpg"><a href="/policies/privacy.php"><img src="/uploads/images/v1/privacy.jpg"></a><img src="/uploads/images/v1/line.jpg"><a href="/policies/etiquette.php"><img src="/uploads/images/v1/etiquette.jpg"></a><img src="/uploads/images/v1/line.jpg"><a href="/contact.php"><img src="/uploads/images/v1/contact.jpg"></a><div align="right"><a href="/index.php"><img src="/uploads/images/v1/logo.jpg"></a></div></div><div align="center"><img src="/uploads/images/v1/leftlogo.jpg"><img src="/uploads/images/v1/rightlogo.jpg"></div><br /><script type="text/javascript"><!--google_ad_client = "pub-9575253358525712";google_ad_width = 728;google_ad_height = 90;google_ad_format = "728x90_as";google_ad_type = "text_image";google_ad_channel ="";google_color_border = "000000";google_color_bg = "000000";google_color_link = "FFFFFF";google_color_text = "DFDFDF";google_color_url = "FFFFFF";//--></script><script type="text/javascript"  src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script><br /><br /><div class="base"></div><div class="middle"><div class="warning"><div align="left"><font color="#222222"><b>Warning:</b> The opinions expressed on these pages are those of their respective authors, not necessarily of The Betrothal of Ericanque.I would like to remind you that the Zoo Keeper has peripherally requested that you <i>do not</i> feed the staff. After a series of complaints from the members it has been decided that the staff members are at risk and therefore must be preserved and protected. What a crazy world we live in don't you think! Oh and please remember to avoid Audentia; he's been known to bite. Vicious creature, he should be put down right? Great!   </font></div></div><br /><div class="category"><b>The Betrothal of Ericanque!</b></div><div class="table1">The opinions expressed on these pages are those of their respective authors, not necessarily of The Betrothal of Ericanque.I would like to remind you that the Zoo Keeper has peripherally requested that you <i>do not</i> feed the staff. After a series of complaints from the members it has been decided that the staff members are at risk and therefore must be preserved and protected. What a crazy world we live in don't you think! Oh and please remember to avoid Audentia; he's been known to bite. Vicious creature, he should be put down right? Great! The opinions expressed on these pages are those of their respective authors, not necessarily of The Betrothal of Ericanque.I would like to remind you that the Zoo Keeper has peripherally requested that you <i>do not</i> feed the staff. After a series of complaints from the members it has been decided that the staff members are at risk and therefore must be preserved and protected. What a crazy world we live in don't you think! Oh and please remember to avoid Audentia; he's been known to bite. Vicious creature, he should be put down right? Great!</div><br /><br /><br /><br /><br /><?php$d=date("D");if ($d=="Sun")echo "Bill S. Preston and Theodore Logan";if ($d=="Mon")echo "Robocop and the Terminator";if ($d=="Tue")echo "Gandalf the Grey and Gandalf the White";if ($d=="Wed")echo "Benito Mussolini and The Blue Meanie";if ($d=="Thu")echo "Captain Kirk and Darth Vader";if ($d=="Fri")echo "Monty Python and the Holy Grail’s Black Knight";if ($d=="Sat")echo "Lo Pan and Superman";?> recomend you download <a href="http://opera.com" target="main_frame">Opera</a>!<br />Hosted by <a href="http://varhosting.net" target="main_frame">VARhosting</a> | Powered by Nickelodeon™ and Pixie Dust™ <br /><br /><div class="copyright">Copyright © 2006 <b><a href="http://ericanque.co.uk/agents/chimaira.php" target="main_frame">Ben Lambe</a></b>. All Rights Reserved. <br /></div><div class="base2"></div></div></div></div><br /></body></html>

Thank you in advance and best regards,Chimaira.

reportingsjr · June 25, 2006

Well first as I was looking at your code I saw one odd thing. You used the .php ending on your css page? isnt it supposed to be the .css ending? Odd...Another thing I noticed is your using css, but you still have a font tag? (line 112) and a bold tag.... USE CSS!!First question: Im guesing thats all one div where the gradient is.. *checks* yep, it is. you just used a background image I guess..heres some coding to fix that:

<div class="category" style="vertical-align: middle; line-height: <replace with height of div>; font-weight: bold;">The Betrothal of Ericanque!</div>

Second question: im confused but ill give it a shot..so, theres one div for positioning the menu into the center, and inside the actual div that contains all the menu; but you want it 20 pixels from the right? heres a quick fix:

<div class="middle"><div style="margin-right: 20px;">menu coding crap</div></div>hope this works for you! :)

Sign In

CSS Questions

Recommended Posts

Chimaira

Link to comment

Share on other sites

reportingsjr

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity