|
CSS - Quick Question About Centering My Site
For IE, I have used text-align:center; to define the body tag, which allows the entire website to be centered no matter the browser window size.
That method doesn't seem to be working for Firefox, yet I have seen it done before. A few of my divs are using absolute positioning (NOT absolute to the document, mind you, but to a parent div). Could this affect anything? Again, it works fine in IE, but not in Firefox or Safari If body {text-align:center;} is not a good centering tool, I would love any other suggestions. Thanks! Similar Tutorialsfigured it out. don't know how to delete Hi I'm having some problems with CSS and was hoping that somebody on here could help me. Firstly despite having a container (wrap) div set to a padding of : 0px auto; the site is not centering. Second none of my images are showing, I've attempted to add a background and header image but neither are showing. I'm a little confused because the same methods work fine on my wordpress site. Here is a link to the dev site; C:\Users\Keith\Documents\Site\index.html And below is the CSS code; Code: /* ------------------------------
HTML Redefine Tags
------------------------------ */
body {
width: 100%;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background: url (img/background.jpg) no-repeat bottom;
}
input, form, textarea
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
}
h1 {
font-size: 18px;
}
h2 {
font-size: 14px;
color: #999999;
}
h3 {
font-size: 13px;
border-bottom: solid 1px #DEDEDE;
padding: 4px 0;
margin-bottom: 10px;
}
a:link, a:visited {
color: #0033CC;
}
a:hover {
text-decoration: none;
}
/* ------------------------------
PAGE STRUCTURE
------------------------------ */
/* #container has an absolute width (780 pixel) */
#container {
width: 1024px;
background: #ececec;
margin: 0px auto;
}
#topbar {
width: 1000px;
height: 118px;
display: block;
background: url(img/header.png);
float: left;
position: relative
}
#navbar {
width: auto;
display: block;
height: 28px;
}
#navbar a {
heigth: 28px;
line-height: 28px;
padding: 0 8px;
display: inline;
}
#main {
width: auto;
display: block;
padding: 10px 0;}
#column_left {
width: 332px;
height: 387px;
margin-right: 1px;
margin-left: 13px;
background: #000;
float: left;
}
#column_right {
width: 332px;
height: 387px;
margin-right: 1px;
background: #000;
float: left;
}
#column_right_adsense {
width: 332px;
height: 387px;
background: #000;
float: left;
}
div.spacer {
clear: both;
height: 10px;
display: block;
}
#footer {
width: 1000px;
height: 150px;
display: block;
margin: 0 13px;
padding: 10px 13px;
font-size: 11px;
color: fff;
background: #737373;
}
Hi, Im not sure what the difference between an ID and a class. I was reading an article and It seems that a ID and a class would do the same thing. Thanks to who can clear this up. i have a pre maid script that i want to modify.it is all css and im not to good at it yet. there is a menu box.very plain.i want to make an image to replace that plain css. i have this Code: #menu table { font-family:Verdana,Tahoma,Arial; font-size:8pt; font-weight: bold; color:#FFFFFF; background-color:#003399; }
how could i link it to an image instead? edited I had the wrong code I have the following html/css code. I was wondering if this is the only way to do a multi column layout where all the columns fit to the size of the largest one?? I am newer to css to be warned. Is there any other way besides layering to have perfectly even columns? Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="" />
<title>Untitled 8</title>
<style type="text/css">
.clear {
line-height:0;
font-size:0;
clear:both;
}
#container {
background-color: white;
border: black solid;
}
#container3 {
float: left;
width: 100%;
background: green;
overflow: hidden;
position: relative;
}
#container3 #header {
width: 100%;
height: 50px;
margin: 5px;
padding-left: 5px;
padding-bottom:10px;
background-color: blue;
color: white;
font-size: 25px;
}
#container2 {
float: left;
width: 100%;
background:yellow;
position:relative;
right:30%;
}
#container1 {
float:left;
width:100%;
background:red;
position:relative;
right:40%;
}
#column1 {
float: left;
width:26%;
position: relative;
left:72%;
overflow:hidden;
}
#column2 {
float:left;
width:36%;
position:relative;
left: 76%;
overflow:hidden;
}
#column3 {
float:left;
width:26%;
position:relative;
left:80%;
overflow:hidden;
}
</style>
</head>
<body>
<div id="container3">
<div id="header">
Test Header
</div>
<div id="container2">
<div id="container1">
<div id="column1">
Test Column1
<br />
Test Column1
<br />
Test Column1
<br />
Test Column1
<br />
Test Column1
</div>
<div id="column2">
Test Column2
</div>
<div id="column3">
Test Column3
</div>
</div>
</div>
</div>
</body>
</html>
Can either someone direct me to a webpage or help me out in figuring out what to do when one css style interferes with another? I have a couple different style sheets and when I load them together in one page one style is taking over another one. Thanks. Hi all. I've used tables to layout websites for a long time, and I've finally decided to start using CSS like everyone else is doing. I'm having a hard time understanding why this is happening: Check out this site at: http://216.69.165.177/ Why is it that when I increase the padding in the left div, it causes the content in the right column to be placed beneath the content in the left div. Is that because adding padding adds length to a div? I've never seen this behavior before with tables. I'm a little confused by it. Thanks in advance, Gregg Good Evening, Am very glad to find this board. Am working on my first paid Joomla site - and the Suckerfish menu's do not seem to center, and I cannot find any directions on how to go about making them so. Also, many sites I've visited will scale to the size of the window open (until too small) - am using the JNS Epic Pro Template and was wondering if there was any CSS feature to program the whole site to scale as best possible. Hope this makes sense. Am not new to computers, but rather a newbie to Joomla and CSS (although I do know a little). If any further info is required, please just advise. Thanking you in advance ... going live on 7/1 ... Ok, I know there must be a simple solution to this that I'm blanking on. The website has a background image: Code:
#background {background-image: url(x.jpg);
margin-left: auto;
margin-right: auto;
width: 1024;
height: 760;
z-index: 1;}
So it's centered and the margins auto resize. Now, I want to add a text content area over the background so that it moves with it upon resizing. What's the best way to do so? I am using this script: http://sperling.com/examples/menuh/ It works great, but I would like the parent to retain its hover color when you are hovering over its children so that you can visually see which parent you went to to get to the children. Does that make sense? Thanks! I have the hardest time w/ selectors and inheritance (esp nested div's and selectors). Can someone tell me if I have the following code, how do I select it in the css? ---html--- Code:
<body>
<div id="wrapper">
<div id="container">
<div id="banner">
</div><!-- END BANNER -->
<div id="navbar">
<ul>
<li><a href="index.html"><span>Home</span></a></li>
<li><a href="index.html"><span>Boats</span></a></li>
<li><a href="index.html"><span>Cars</span></a></li>
<li><a href="index.html"><span>RV's</span></a></li>
<li><a href="index.html"><span>Aircraft</span></a></li>
<li><a href="index.html"><span>Contact</span></a></li>
</ul>
</div><!--END NAVBAR -->
</div><!-- END CONTAINER -->
</div><!-- END WRAPPER -->
</body>
---css--- THIS DOESN'T WORK Code:
navbar span
{
display: none;
}
navbar ul
{
list-style: none;
display: block;
position: relative;
}
I guess when do I use # and when do I use . and when do I use them together? A good link that uses NESTED selectors would help because most examples don't include that. i have a div which will contain a list of user inputted names. i want the div to simulate a select box, so i need the width of the div to match the contents: Code: <div id="dselect"> <div class="arrow" style="float: right"><img src="arrow.jpg"></div> <img src="icons/icon1.jpg" /> Label 1 </div> Code: <!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>DevPlooth.com | Forums | Arcade | Tutorials | Web Hosting</title>
<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1' />
<meta http-equiv='Content-Style-Type' content='text/css' />
<meta http-equiv='Content-Script-Type' content='text/javascript' />
<meta name='description' content='Find webmasters, web designers, SEO techs, web developers, designers PHP
experts, html experts, javascript experts, css experts, SEO advice, marketing tips and resources. Our forum provides a
way for people to find web help and support!' />
<meta name='keywords' content='webmaster forum, web design, web developers, developer forum, web forum, php
experts, web marketing, seo experts, database experts, support forum, programming, html, css, javascript, mysql, sql,
web' />
<script type="text/javascript">
function check1() {
var box=document.forms[0].search;
if(box.value=='') {
box.value='Enter your Search Query';
}
}
function check2() {
var box=document.forms[0].search;
if (box.value=='Enter your Search Query') {
box.value='';
}
}
</script>
<style type="text/css">
* {
margin:0;
padding:0;
}
body,html {
min-height:101%;
}
body {
background: #3c3c3c;
color:#FFFFFF;
font-family:'Century Gothic',sans-serif;
padding: 13px 0 25px 0;
}
input, option, select, textarea {
font-family: verdana, tahoma, arial, sans-serif;
font-size: 11px;
background-color: #999999;
}
.search {
margin: 10px 0px 0px 60%;
padding: 2px;
width: 366px;
height: 24px;
}
.input-search {
margin: 0px 0px 5px 0px;
padding: 2px;
background: #B8B8B8;
color: #808080;
width: 220px;
}
.search.input-submit {
margin-top: 10px;
}
/*/// CONTAINER /// */
div#container {
width:70%;
margin:auto;
text-align:center;
background-color:#FFFFFF;
border:solid 1px #333;
}
/*/// HEADER ///*/
div#container div#header {
width:100%;
padding-top:10px;
background-color:#333333;
border-bottom:double 3px #D1D1D1;
}
div#container div#header h1 {
color:#93C251;
font-size:300%;
font-family:Georgia,serif;
margin-bottom:0px;
}
div#container div#header h1 a {
color:inherit;
text-decoration:none;
}
div#container div#header blockquote.accent {
color:#82A377;
font-size:7pt;
margin-top:0px;
}
.search {
margin: 10px 0px 0px 60%;
padding: 2px;
width: 366px;
height: 24px;
}
.input-search {
margin: 0px 0px 5px 0px;
padding: 2px;
background: #B8B8B8;
color: #808080;
width: 220px;
}
.search.input-submit {
margin-top: 10px;
}
#nav {
background:#29292B;
font-size:1.1em;
}
#nav, #nav ul {
list-style: none;
line-height: 1;
}
#nav a, #nav a:hover {
display: block;
text-decoration: none;
border:none;
}
#nav li {
float: left;
list-style:none;
border-right:1px solid #a9a9a9;
}
#nav a, #nav a:visited {
display:block;
font-weight:bold;
color: #f5f5f4;
padding:6px 12px;
}
#nav a:hover, #nav a:active, .current_page_item a, #home .on {
background:#4E4F53;
text-decoration:none
}
#nav li ul {
position: absolute;
left: -999em;
height: auto;
width: 100px;
border-bottom: 1px solid #a9a9a9;
}
#nav li li {
width: 200px;
border-top: 1px solid #a9a9a9;
border-right: 1px solid #a9a9a9;
border-left: 1px solid #a9a9a9;
background: #777;
}
#nav li li a, #nav li li a:visited {
font-weight:normal;
font-size:0.9em;
color:#FFF;
}
#nav li li a:hover, #nav li li a:active {
background:#000;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
display: block;
}
.clearfloat:after {
display:block;
visibility:hidden;
clear:both;
height:0;
content:".";
}
.clearfloat {
display:inline-block
}
.clearfloat {
display:block
}
/*/// INNER-CONTAINER ///*/
div#container div#inner-container {
width:57%;
overflow:hidden;
margin:0px;
padding-right:43%;
}
* html div#container div#inner-container {
height:1%;
}
/*/// CONTENT ///*/
div#container div#inner-container div#content {
width:100%;
height:100%;
text-align:left;
padding:3%;
border-right:solid 200px #FFF;
margin-right:-200px;
float:left;
background-color:blue;
}
/*/// SIDEBAR ///*/
div#container div#inner-container div#sidebar {
text-align:left;
padding:3px;
margin-top:0px;
margin-left:0px;
margin-right:-40%;
float:right;
background-color:#FA2F23;
}
div#container div#sidebar form label a {
color:#FFFFFF;
text-decoration:none;
line-height:7pt;
font-size:7pt;
border-top:solid 1px #E2FFA8;
border-bottom:solid 5px #E2FFA8;
border-left:solid 3px #E2FFA8;
border-right:solid 2px #E2FFA8;
background-color:#333333;
margin-top:2px;
margin-bottom:6px;
}
div#container div#sidebar form label a:hover {
background-color:#FFFFFF;
}
div.spacer {
height:10px;
}
</style>
</head>
<body>
<div id='container'>
<div id='header'>
<h1><a href='#'>DevPlooth</a></h1>
<blockquote class='accent'>Tutorials-XHTML/CSS/JS/PHP/SQL</blockquote>
<div class='spacer'></div>
<div>
<ul id="nav" class="clearfloat">
<li><a href="#" class="on">Home</a></li>
<li><a href="#" title="">XHTML</a>
<ul>
<li><a href="#" title="">Berenato, White & Stavish, LLC</a></li>
<li><a href="#" title="">LegalZoom.com Endorsement</a></li>
<li><a href="#" title="">About IPWatchdog.com</a>
<ul>
<li><a href="#" title="">About the United Inventors Association</a></li>
</ul>
</li>
<li><a href="#" title="">Articles by Gene Quinn</a></li>
<li><a href="#" title="">Legal & Consulting Services</a></li>
<li><a href="#" title=">Contact IPWatchdog.com</a></li>
<li><a href="#" title="">Gene Quinn, IPWatchdog.com Founder</a></li>
<li><a href="#" title="">John White, IPWatchdog.com Advisor</a></li>
<li><a href="#" title="">Privacy Policy</a></li>
<li><a href="#" title="">Search IPWatchdog.com</a></li>
<li><a href="#" title="">Subscribe to the IPWatchdog.com Blog</a></li>
<li><a href="#" title="">Terms & Conditions of Use</a></li>
</ul>
</li>
<li><a href="#" title="">CSS</a></li>
<li><a href="#" title="Business">JavaScript</a>
<ul>
<li><a href="#" title="">Available Business Resources</a></li>
<li><a href="#" title="">Creating a Small Business Plan</a></li>
<li><a href="#" title="">Making Your Website Better</a></li>
<li><a href="#" title="">Successful Business Networking</a></li>
<li><a href="#" title="">The Importance of Having a Website</a></li>
</ul>
</li>
<li><a href="#" title="">PHP</a>
<ul>
<li><a href="#" title="">Applying for a Copyright</a></li>
<li><a href="#" title="">Copyright Fair Use</a></li>
<li><a href="#" title="">Copyright Infringement</a></li>
<li><a href="#" title="">Copyright Infringement Remedies</a></li>
<li><a href="#" title="">Digital Millenium Copyright Act</a></li>
<li><a href="#" title="">Law of Recipes</a></li>
<li><a href="#" title="">Names, Titles & Phrases - Copyright</a></li>
<li><a href="#" title="">Work for Hire</a></li>
<li><a href="#" title="">Who Owns Software Copyrights?</a></li>
</ul>
</li>
<li><a href="" title="Inventing">MySQL</a>
<ul>
<li><a href="#" title="">About the Invention Process</a></li>
<li><a href="#" title="">Drafting a Licensing Agreement</a></li>
<li><a href="#" title="">Invention Marketing</a></li>
<li><a href="#" title="">Invention Submission Companies</a></li>
<li><a href="#" title="">Keeping a Good Invention Notebook</a></li>
<li><a href="#" title="">Moving from Idea to Patent</a></li>
<li><a href="#" title="">No Prior Art for my Invention</a></li>
<li><a href="#" title="">Protecting Ideas</a></li>
<li><a href="#" title="">What is Prior Art?</a></li>
</ul>
</li>
<li><a href="#" title="Patents">Articles</a>
<ul>
<li><a href="#" title="">Patent Search FAQs</a></li>
<li><a href="#" title="">Provisional Patent Applications</a></li>
<li><a href="#" title="">Patent Search Questionnaire</a>
<ul>
<li><a href="#" title="">Patent Search Agreement</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#" title="">Forums</a>
<ul>
<li><a href="#" title="">Applying for a Trademark</a></li>
<li><a href="#" title="">Names, Titles & Phrases</a></li>
<li><a href="#" title="">The Likelihood of Confusion</a></li>
<li><a href="#" title="">The Right of Publicity</a></li>
<li><a href="#" title="">The Role & Function of Trademarks</a></li>
<li><a href="#" title="">Trademarks - A Limited Right</a></li>
<li><a href="#" title="">Trademarks - A Universal Phenomenon</a></li>
<li><a href="#" title="">Trademark Searches</a></li>
<li><a href="#" title="">Types of Trademarks</a></li>
</ul>
</li>
<li><a href="#" title="">Contact Us</a>
<ul>
<li><a href="#" title="">Confidentiality Agreements</a></li>
<li><a href="#" title="">Mutual Nondisclosure Agreement</a></li>
<li><a href="#" title="">Sample Confidentiality Agreements</a></li>
<li><a href="#" title="">Simple Confidentiality Agreement</a></li>
<li><a href="#" title="">Simple Confidentiality Agreement 2</a></li>
<li><a href="#" title="">Standard Confidentiality Agreement</a></li>
<li><a href="#" title="">Trade Secrets - The Secrecy Requirement</a></li>
<li><a href="#" title="">Uniform Trade Secret Act</a></li>
</ul>
</li>
<li><a href="#" title="">About Us</a>
<ul>
<li><a href="#" title="">Confidentiality Agreements</a></li>
<li><a href="#" title="">Mutual Nondisclosure Agreement</a></li>
<li><a href="#" title="">Sample Confidentiality Agreements</a></li>
<li><a href="#" title="">Simple Confidentiality Agreement</a></li>
<li><a href="#" title="">Simple Confidentiality</a></li>
<li><a href="#" title="">Standard Confidentiality Agreement</a></li>
<li><a href="#" title="">Trade Secrets</a></li>
<li><a href="#" title="">Uniform Trade Secret Act</a></li>
</ul><li><a href="#" title="">Site Map</a><ul>
<li><a href="#" title="">Mutual Nondisclosure Agreement</a></li>
<li><a href="#" title="">Sample Confidentiality</a></li>
<li><a href="#" title="">Simple Confidentiality</a></li>
<li><a href="#" title="">Simple Confidentiality</a></li>
<li><a href="#" title="">Standard Confidentiality</a></li>
<li><a href="#" title="">Trade Secrets</a></li>
</ul>
</li></li>
</ul></div>
</div>
<div id='inner-container'>
<div id='content'>
<h2>this is the welcoming</h2>
<p>Donec ornare tristique leo. Morbi odio orci, porta et, tempor varius, auctor id, lorem.
Maecenas lacinia nisl non orci. In egestas, nunc molestie facilisis laoreet, sem turpis congue eros, in euismod neque arcu non mi.
Donec vel diam. Nulla adipiscing purus blandit enim. Sed in risus. Suspendisse varius. Cras luctus mollis enim. Fusce euismod
scelerisque dolor. Pellentesque laoreet turpis a ante.</p>
</div>
<div id='sidebar'>
<div class="search">
<form action="search.php" method="get" style="display:inline;" name="forms">
<input type="text" name="search" class="input-search" value="Enter your Search Query" onblur="check1()" onfocus="check2()"
/>
<input type="image" class="input-submit" src="http://www.gameyin.com/images/search.gif" /></div></div>
<div class='spacer'></div>
</div>
</body></html>
I didn't put in separeate file for CSS just because this makes it easier for you guys...Ok, if you copy and paste into a browser. You'll see same thing happening in everyone. How can I get that red part onto the right column? I gave it a float: right; since it's supposed to push it up as far as possible and to the right (left is that way so figured right is same). Also, just a quick JS question, doesn't need a new thread. Why does FF do the function? Look at the text box and click the input box and see what it does. No other browser does it. Any help? Also, how do I get the very top nav to be smaller. It's presumably the font-size of it. But I can't locate it in my CSS. New set of eyes there please PS: If you see any unneeded CSS that isn't doing anything, then tell me. Thanks. problem solved How do you make a div without margins that spans the entire screen. There seems to be an automatic margin on either side of the screen even when i set no margins and 100% width. say if i have a css file such as #title {text:indent= 1In;........} .content{.......} how do i refer to it in my html? <p class = "title">welcome......</p> similarly for the ID <p id = content>welcome.....</p> i have tried something along thesel ines but it dont work! Hi, If you set a font-size: 7pt and font-family:Verdana in your stylesheet, does the text in your webpage look slightly bigger in Firefox than in IE 6? I'm using Windows by the way ... this is just a general question as some of my menu links are lined up well on IE (which displays text a bit smaller) but overlapping to multiple lines on Firefox (because the text size is slightly bigger) Many thanks! Sometimes, when I change the CSS to using periods instead of pound signs, (i.e. div.container{text-align:left} vs. div#container{text-align:left} ) things don't work. When I switch it back to pound signs, it works again. However, my teacher said never to use pound signs and always stick to periods. Is there any advantage/ disadvantage of using periods instead of pound signs? And come when you change a layout which has pound signs to a layout with periods, it doesn't work? Thanks for the help! I will preface this with the fact I am a newbie with CSS. Site location - I would tell you where site was but against rules! Question - site looks OK on everything except IE6 and lower. The body should be centered under the header image however it is pushed/alligned left. The CSS is below. Can anyone see why this is happening and what a good fix would be? Thanks /* CSS Document */ body{ padding:0; margin:0;} form, div, p , ul, span, h2, h3, h4, h1,input, img{ padding:0; margin:0;} p{ color:#3D3B45; font: 12px/normal Verdana, Arial, Helvetica, sans-serif} ul{ list-style-type:none } img { border:none; } .spacer{ font-size:0; line-height:0; clear:both; } /*---------------header-------------------------------*/ #main{ width:780px; margin:0 auto 0 auto; background:#FFFCEC; } #main #header{ width:780px; height:175px; background:#FFFCEC url(images/header.jpg) no-repeat 0 5px; position:relative; } #header a.title{ position:absolute; left:23px; top:37px; width:228px; height:25px; display:block; } #header h1.title a{ display:block; text-decoration:none; } #header ul.nav{ position:absolute; left:566px; top:5px; background:url(images/nav.gif repeat-x 0 0 #FFFEE4; width:213px; padding:0px 0 18px 0; margin:0; } #header ul.nav li{ background:url(images/h_line.gif) repeat-x left bottom; font:bold 11px/normal Arial, Helvetica, sans-serif, Tahoma; color:#484848; width:197px; padding:5px 0 5px 0; } #header ul.nav li a{ background:url(images/arrow.gif) no-repeat 0 5px; margin:0 0 0 15px; font:bold 11px/normal Arial, Helvetica, sans-serif, Tahoma; color:#484848; text-decoration:none; padding:0 0 0 15px; } #header ul.nav li a:hover{ color:#000000; } /*------body-------*/ #main #left{ background:url(images/v_line.gif) repeat-y right top; width:543px; margin:0 0 0 0; padding:15px 0px 0px 23px; float:left; } #left h2.contact{ background:url(images/contact_wp.gif) no-repeat 0 0; width:518px; height:16px; text-indent:-200000px; } #left h2.survty{ background:url(images/survty.gif) no-repeat 0 0; width:518px; height:32px; text-indent:-200000px; } #left h2.welcome{ background:url(images/welcome_to_wp.gif) no-repeat 0 0; width:518px; height:35px; text-indent:-200000px; } #left p.weltxt{ font: 12px/normal Verdana, Arial, Helvetica, sans-serif; color:#3D3B45; text-align:justify; width:518px; margin:0px 0 0 0; } #left p.weltxtsp{ font: 12px/normal Verdana, Arial, Helvetica, sans-serif; color:#3D3B45; text-align:justify; width:518px; margin:16px 10px 10px 0; } #left p.headingtext{ font: 12px/normal Verdana, Arial, Helvetica, sans-serif; color:#3D3B45; text-align:justify; width:518px; margin:10px 0px 10px 0; } #left p.weltxt a.more{ float:right; padding:25px 0 21px 0; color:#3D3B45; text-decoration:none; font-weight:bold; } #left p.weltxt a:hover{ color:#990000; text-decoration:underline; } #left h2.rest{ background: url(images/catering.gif) no-repeat 0 0; width:516px; height:29px; line-height:0; font-size:0; margin:20px 0 0 0; text-indent:-200000px; clear:both; } #left div.menu{ background:url(images/menu_bg.gif) repeat-x 0 0; width:516px; height:123px; padding:11px 0 0 7px; } #left div.menu ul.brown{ float:left; width:94px; margin:0 8px 30px 0; display:block; } ul.brown li{ background:url(images/brown.gif) no-repeat 0 8px; padding:0 0 13px 10px; color:#3D3B45; } ul.brown li a{ text-decoration:none; color:#3D3B45; font:bold 11px/normal Arial, Helvetica, sans-serif, Tahoma; } ul.brown li a:hover{ color:#990000; text-decoration:underline; } #left h2.order{ background:url(images/directions2.gif) no-repeat 0 0; width:513px; height:26px; text-indent:-200000px; clear:both; } #left ul.image{ margin:15px 0 0 0; width:520px; } #left ul.image li{ height:153px; width:95px; text-align:center; margin:0 6px 0 0 ; background:url(images/order_now.gif) no-repeat 14px 134px; float:left; font:bold 11px/normal Arial, Helvetica, sans-serif, Tahoma; color:#3D3B45; } #left ul.image li span{ color:#B57D0A; } #left ul.image li a{ margin:0 0 0 0; text-decoration:none; color:#990000; } #left ul.image li a:hover{ color:#000000; text-decoration:underline;} /*------right----*/ #main #right{ width:200px; background:url(images/right_bg.gif) repeat-x left bottom #FFFEE4; float:left; padding:25px 0 97px 13px; } #right h2.our{ background: url(images/location.gif) no-repeat 0 0; width:145px; height:15px; text-indent:-200000px; } #right p.ourtxt{ font: 12px/normal Verdana, Arial, Helvetica, sans-serif; color:#3D3B45; text-align:justify; width:168px; margin:18px 0 0 0; } #right img{ margin:13px 0 0 0; } #right p.border{ width:178px; height:5px; margin:23px 0 0 0; font-size:0; line-height:0; background:#FCF2B8; } #right p.ourtxt span{ color:#8F1401; font:bold 12px/normal "Trebuchet MS",Helvetica, sans-serif, Tahoma; } #right p.ourtxt a{ color:#B57D0A; font:bold 12px/normal "Trebuchet MS",Helvetica, sans-serif, Tahoma; text-decoration:underline; } #right p.ourtxt a:hover{ color:#000000; } /*----footer-----*/ #footer{ width:780px; position:relative; background:url(images/footer_bg.gif) repeat-x 0 0 #FDF6D2 ; clear:both; height:168px; } #footer ul.foot{ position:absolute; top:21px; left:140px; width:522px; } #footer ul.foot li{ float:left; margin:0 14px 0 0; color:#232323; font:bold 11px/normal Arial, Helvetica, sans-serif, Tahoma; } #footer ul.foot li a{ text-decoration:none; text-transform:uppercase; color:#232323; } #footer ul.foot li a:hover{ color:#990000; } #footer p{ position:absolute; top:43px; left:324px; text-align:center; color:#232323; font:normal 11px/20px Arial, Helvetica, sans-serif, Tahoma; } #footer p a{ color:#232323; font:normal 11px/20px Arial, Helvetica, sans-serif, Tahoma; text-decoration:underline; } #footer p a:hover{ text-decoration:none; } |
|||||||