|
CSS - Quick Help??.. Eazy Peezy For Da Pros!! For Me Its A Headache!
yeah so I just need a simple help with something. Its some basic stuff for a myspace layout.. I have got an image to span.. i received help here a while ago with it. but I can't figure out how to hover & span together. like for instance.. the idle image icon is black & white.. then when I mouseover it i want it to alternate to the colour image and also span the large image of itself to the side. I cant seem to combine them.. its either one or the other. just hover colour image over b&W.. or jus span large image. been noob i dont really know what to chop and mix. so how can i do it?? thanks for any help :P Similar TutorialsA friend of mine recently explained to me how css can be used to write webpages without use of any tables whatsoever. I was very sceptical and asked him to show/write me some examples. I immediately noticed that if you use absolute positioning you'll mess up the page presentation on differrent monitor resolutions. Also, for the same reason I found CSS to be unhandy when you have dynamically loaded content. Still, the idea to use div tags and css and abolish tables sounds very tempting, but I want to ask people with more experience than me: Should I stop using tables, is all previous functionality still available without tables, and if not, in what cases, theoretically, it is better to use css and where it is better to use tables? figured it out. don't know how to delete So I came up with this lovely design for the company I'm working for, because they're website now is just utter crap. I figured instead of coding my usual way (a mess and unvalidated) I'd start off making it as clean and css-friendly as possible. I've run into some major issues, some common and some not. If any of you could help me, I would be extremely grateful. My main problem is my issue with internet explorer. I've positioned everything to match up perfectly in Firefox, the site looks great and is aligned fairly well. However, when the site hits IE, everything shifts a couple pixels and throws everything off. Anyone know why this is happening? There is also a gap at the top of the page in IE, which isn't present in firefox. I also can't figure out how to pus the footer to the bottom. I wanted another footer that stretched the whole page at the bottom (similar to the top), with a sort of 'prefooter' on top of it. I can't figure out how to just push a regular footer to the bottom, and I've tried all the fixes I can find online. Any idea why? Here is the site: Code: http://www.chromaticstudios.net/AVT/ Hi All, I am having trouble trying to get the columns in this layout to work properly: http://www.lampdesign.co.uk/desdev/vsc/ The following image is how it should be shaping up: http://www.lampdesign.co.uk/desdev/vsc/vsc_real.png Problems: - In firefox the left column content is floating above the footer image - In IE the left column content appears to be pushing the right content downwards I have avoided padding and margins as far as possible. Relevant Source: <div id="contentcontainer"> <div id="leftcolumn"> This is the left column This is the left column This is the left column This is the left column </div> <div id="pagecontent"> This is the page content </div> </div> </div> <div id="footercurve"> </div> Css: #pagecontainer { background: url('images/global/pagebg.png'); width:790px; margin:0 auto; text-align:left; color:#333; } #contentcontainer { width:790px; margin:0 auto; } #leftcolumn { width: 180px; margin:0px; padding: 0px; font-size: 14px; color: #fff; float: left; } #pagecontent { width: 608px; margin: 0px; margin-left:182px; padding: 0px; font-size: 12px; } #footercurve { background: url('images/global/footercurve.png'); width:790px; height: 10px; margin:0 auto; text-align:left; color:#333; font-size: 0px; } If anyone can shed any light on what I am doing wrong, I would be most grateful. Thanks, Vince I came across this site with a google search. I have been trying to make a website for my new business and I've been trying to learn CSS. Everything went fine until I tested resolutions out yesterday, I noticed they changed. I've been trying to place a text box in middle of an image but I can't get it to work correctly... a perfect example of what I'm trying to achieve is found he http://www.myspace.com/nourotika I have tried and tried and this is the website that came closest to my problem... My code would be: Code: <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
background-color: #000;
}
-->
</style></head>
<body><center>
<p style="position: absolute; top: 735px; right: 314px; width: 537px; padding: 4px; background-color: #000; font-weight: bold; font-size: 11px; font-xolor: #F00; height: 548px; color: #909; overflow: visible; z-index: 1;">content goes here</p>
</div>
http://i158.photobucket.com/albums/t108/Katouuffxi/regular.jpg This would be the regular resolution I'm looking for http://i158.photobucket.com/albums/t108/Katouuffxi/resproblem.jpg And this would be my screen resolution problem Sad I really don't know how in the world to do it and I'm just so close from finishing everything... help would be much much appreciated. Hey DevShed, I'm having issues with the CSS, and floats. I basically float everything to the left, and I'm having issues on the very far right with a space I cant fill basically, and on the left side I'm missing the 1px border from my wrapper div. The "user" div is supposed to be a few pixels wider, I chopped off some pixels because when I made it longer it dropped down to below the "adheader" div. Here's my current code; index.php PHP Code: <body> <div id="wrapper"> <div id="topnav"></div> <div id="banner"> <img src="images/banner.jpg" /> </div> <div id="header"></div> <div id="left_content"> <div id="newsheader">Latest news</div> <div id="box_1"> <img src="images/news.jpg" /> </div> <div id="box_2"> This is content blah blah blah </div> <div id="bottom_left"> </div> <div id="bottom_right"> </div> </div><!--end of left_content--> <div id="right_content"> <div id="adheader"></div> <div id="user"></div> <div id="main_content"></div> </div><!--end of bottom_right--> </div><!--end of container--> </body> global.css PHP Code: #wrapper { margin: 0px auto; padding: 0px; width: 977px; border-left: 1px solid #B1B1B1; border-right: 1px solid #B1B1B1; } #topnav { background: #F0F0F0; background-image: url('images/top_back.gif'); background-repeat: repeat-x; margin: 0px; padding: 0px; width: 977px; height: 18px; } #banner { background: #282828; background-image: #url('images/banner.jpg'); border-bottom: 5px solid #D2D2D2; margin: 0px; padding: 0px; width: 977px; height: 72px; } #left_content { background: #6D6D6D; background-image: url('images/div_back.gif'); background-repeat: repeat-x; border-right: 1px solid #FFF; padding: 0px 0px 0px 0px; width: 476px; height: 100%; float: left; } #newsheader { background: #6D6D6D; background-image: url('images/div_back.gif'); background-repeat: repeat-x; margin: 0px 0px 0px 0px; padding: 0px; width: 476px; height: 29px; } #right_content { background: #282828; padding: 0px; margin: 0px; width: 495px; height: 100%; float: left; } #box_1 { background: #6D6D6D; padding: 0px; margin: 0px; width: 476px; height: 249px; } #box_2 { background: #DADADA; padding: 0px; margin: 0px; width: 476px; height: 96px; } #bottom_left { background: #DADADA; background-image: url('images/div_back.gif'); background-repeat: repeat-x; border-right: 1px solid #FFF; padding: 0px; margin: 0px 1px 0px 0px; width: 236px; height: 29px; float: left; } #bottom_right { background: #DADADA; background-image: url('images/div_back.gif'); background-repeat: repeat-x; border-left: 1px solid #FFF; padding: 0px; margin: 0px; width: 237px; height: 29px; float: left; } #lnewscontent { background: #DADADA; border-right: 1px solid #FFF; padding: 0px; margin: 0px; width: 476px; height: 96px; } #adheader { background: #6D6D6D; background-image: url('images/div_back.gif'); background-repeat: repeat-x; border-right: 1px solid #FFF; border-left: 1px solid #FFF; margin: 0px 0px 0px 1px; padding: 0px; width: 209px; height: 29px; float: left; } #user { background: #6D6D6D; background-image: url('images/div_back.gif'); background-repeat: repeat-x; border-left: 1px solid #FFF; margin: 0px 0px 0px 1px; padding: 0px; width: 281px; height: 29px; float: left; } Here's a basic idea of what I'm going for: img683.imageshack.us/img683/6540/layoutsamp.gif PLEASE help me, I've been going at this for hours. I'm out of ideas! I am trying to do this with a page: Make an image on the left side, and some text on the right side... The actual Image and Text are already inside of a DIV Wrapper, so they can't go out of that wrapper. Another thing is I need to be able to repeat this layout without messing up the position. How would I be able to do this with CSS? Thanks For Any Help! 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? 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 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>
So I am not really a web developer, just a programmer whose boss decided he needed a site :-). So far I've got this: http://imgur.com/onpNk.jpg URL With this code: Code:
div.textBox{
width:20px;
display:inline;
}
....
<div id="filter4" class="textBox">
<span>Between </span><input name="PreText4" type="text" id="PreText4" onblur="ValidateDate(this)" style="width:70px;" />
<span> and </span><input name="PostText4" type="text" id="PostText4" onblur="ValidateDate(this)" style="width:70px;" /></div>
<div id="filter5" class="textBox">
<span>Between </span><input name="PreText5" type="text" id="PreText5" onblur="ValidateTime(this)" style="width:70px;" />
<span> and </span><input name="PostText5" type="text" id="PostText5" onblur="ValidateTime(this)" style="width:70px;" /></div>
<select size="4" name="filter6" multiple="multiple" id="filter6">
<option value="FAIL">FAIL</option>
<option value="PASS">PASS</option>
</select>
And would like this: http://imgur.com/3eyou.jpg URL Any fixes or tips? Hey there everyone. (First time posting!) I was wondering if i could ask your assistance.. I am very close with my new css layout for a project I am working on but i have one small thing that is bugging me... Click here to view the page: URL now.. the problem is, when the content in the main "white" window expands the green div behind does not... also the footer gets covered up... This will cause me problems, ideally i would like it to push the green and the footer down as the content expands via either the browser window shrinking or just having more content in the white center div.... Check out this to see what is happening when there is more content in the white center to see what i mean: URL Link to my css: URL Thank you so much in advance for your suggestions tips and feedback... 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. 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. 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! |
|||||||