|
CSS - Quick Question. Positioning.
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. Similar Tutorialsfigured it out. don't know how to delete 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>
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? 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. 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 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> 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! 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! 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! 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! 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! Relatively new to CSS, never done anything sans tables. Yes, it all looks fubared right now, but as this is sort of a learning experience, I'd like to tackle one thing at a time. Positioning is...I'm not getting it. Right now, the big thing is getting the "content" div to line up at the top. I've tried various combinations, and the one that works best so far (in Firefox and Safari, at least, IE is totally awful) is what I've got (relative, 25% in from the left) -- at least I get the thing lined up where I want it on the right. But I can't seem to get it to scoot up to the top. I played with the top margin, but that didn't do anything either. The page is he http://www.describe.org/homework/esdcar/ (scroll down to see the problem) The css is he http://www.describe.org/homework/esdcar/esdcar.css And eventually, hopefully, it should look like this: http://www.describe.org/homework/esdcar_home.jpg Yes, there's lots more to fix (the navigation, the announcements box, and so on) and I will be back with more questions, but I think if I can at least get this one fixed I can try fixing the other things on my own before giving up and seeking help again. I Need a div to be placed absolutely at 225left, 0right, 0top. In Firefox this works great the border I have around it seems to work just fine. The problem is IE. It doesnt seem to want to go all the way across. I think the problem might be the position of my div. I have an outer layout file that has the header in it with the logo and whatnot for the site but sub sections of the site need their own logo to go Centered betwwen the right edge of the main site logo and the right of the screen. Since the sub sections have no idea about the outer layout I need them to absoutely position their own div. Here Is the code i'm trying to use. Code: <style type="text/css">
.logo{
position:absolute;
top:0px;
left:225px;
right:0px;
margin:0px;
padding:0px;
border:1px solid black;
align:center;
}
</style>
<div class="logo">
<div align="center" style="width:100%;">
<img src="images/showlogo.gif">
</div>
</div>
In firefox you see a border starting a 225 from the left and stretching 100% of the rest of the screen. In IE its about 225 from either edge of the screen I'm probably doing something stupid but I dont see it. I have designed a site that has a centered container div with a set width of 880px. I used the "margin:0px auto;" formatting to center the container div. Inside the container, I would like to position a div block absolutely or relatively in the page. This is so I can position it over other divs within the container and have control of the look of the page. For centered absolute positioning, I have seen to use a css formatting of: " postition:absolute; width:600px; top:10px; left:50%; margin:0 0 0 -300px; padding:5px; " The problem here is that on smaller resolutions, the absolute div is pushed to the left and if the browser window is thinner than 600px wide, the div starts to disappear to the left of the page. Any help would be appreciated to help me figure out a better way to position this internal div without hiding it or moving the other content on the page. Thanks I have a simple layout done all in CSS. The code is below. With the right boxes that are there, is there a way to make them stretch based on the content that's in them? Right now I'm using absolute positioning but if the content stretches the top box, then as you can see it stretches it into the next box. I tried changing it from absolute to relative and floating it to the right but the box just disappears then. Also, is there another way to achieve the look I want (simple 3 column layout) by using CSS just in a different manner? I'd like it to adapt to any resolution that a user may have and I'm not quite sure how to do that. Any help you can provide would be greatly appreciated. Thanks! Code: <html>
<head>
<title></title>
<style type="text/css">
.BODY{
background-color: #FFFFFF;
color: #000000;
}
.left{
position: absolute;
left: 10px;
width: 150px;
border: 1px solid;
height: 100%;
background-color: #EFEFEF;
color: #000000;
}
.center{
margin-left: 159px;
margin-right: 400px;
border: 1px dashed;
height: 25px;
background-color: #EFEFEF;
}
.right{
position: absolute;
right: 10px;
top: 85px;
width: 150px;
height: 100px;
border: 1px solid;
}
.right2{
position: absolute;
right: 10px;
top: 195px;
width: 150px;
height: 100px;
border: 1px solid;
}
.banner{
border: 1px solid;
height: 50px;
width: 100%;
}
.nav{
border: 1px solid;
height: 15px;
width: 100%;
background-color: black;
</style>
<div class="banner">Banner</div>
<div class="nav"></div>
<div class="left">
Nav
</div>
<div class="center">Center contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter content</div>
<p><div class="center">test</div></p>
<div class="right">
<b>Featured Article:</b>
<br />
<i><small>Featured article link goes here...</small></i>
<br /><br />
<b>Recent Articles:</b>
<br />
<i><small>Recent article links go here...
</div>
<div class="right2">
Test 2
</div>
|
|||||||