|
CSS - Quick Css Display Question
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.
Similar Tutorialsfigured it out. don't know how to delete 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 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. 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 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. 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 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! 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! 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! Tip of the tongue syndrome: What is the CSS selector that affects all elements, again? I remember it being "*" or something I want to apply a thin border to everything on my layout so I can see where the positionings have gone. So, I'm trying to figure out the proper way to use display:block based on what my needs are. My needs: I'm wanting to create essentially a box with a header, image, and paragraph inside. I want to make it so that when any part of the box is hovered over, it is essentially a link... (changes text color when hovered over). However, I know certain elements aren't supposed to go within <a> tags, such as <h3>, <div>, <p>, etc.... In IE, when I do it this way, using those tags inside the <a href> tag, it works fine. However, in FF, some of the elements aren't applied.... For example, I have 3 boxes of equal length, which all have the same CSS classes, just different content. When I load the page in FF, 1 of the 3 will make the header, image, and paragraph seperate links, and not use the class I have set for it. (The 1 of the 3 isn't always the same... it could be the first box, or second box, or even third box). Sorry for the vagueness, but I'm trying to explain the best I can... If you need to see the code (or site), let me know... Because of the business I'm creating this for, I can't publish it's link until they launch officially. But I can create another page that has the same code to show you what is going on. If you need further clarification as well, just let me know. Thanks. I know that display:inline is supposed to change a Block element to view like an inline element. I take that to mean that the display:inline will eliminate any added space the Block element has in it. Meaning images and text will butt up against each other, but it's not working the way I expected. I have a list with images that I want to butt up against each other vertically . These images stack on top each other and to the left. The list has zero pixels for padding and margins. In the browsers that 5 pixel line shows up unless I code in a <p> then I adjust the <p> to have no padding or margin. EX: Code: <div id="maincontent"> <ul> <li class="hoodmenu"><p><a href="#"><img src="bu_streetware.jpg" alt="street ware"></a></p></li> <li class="hoodmenu"><p><a href="#"><img src="bu_dolls.jpg" alt="womens"></a></p></li> <li class="hoodmenu"><p><a href="#"><img src="bu_dudes.jpg" alt="guys"></a></p></li> <li class="hoodmenu"><p><a href="#"><img src="bu_beginners.jpg" alt="children"></a></p></li> </ul> </div> This seems like a hack. I have tried using display;inline but the spaces still appear. The code validates in 4.01 HTML and in CSS3. I also noticed I don't have to use the <p> in Opera or Safari, but I do for Firefox. Is this the correct way to handle this problem? If not, how should I actually write the code? Thank you! 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! |
|||||||