|
CSS - Div Positioning Question - Real Easy For You Guys
I am completely new to CSS. I usually use A LOT OF tables in my designs, and want to switch to CSS now.
Anyways, I am trying to put 2 divs next to each other. here is what I have http://www.findagoodhost.com/2/ I'd like to make them as if I put a table with 1 row, 2 columns, but with CSS positioning. Any help would be apreciated. Thanks Similar TutorialsI 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. This may be a dumb questions as I think I already know the answer to it. Is there any way to protect your css page from others. I would like to protect my websites against those who want to just copy them. Ofcourse these are live websites and do not need to be penalized by Google in any way if it is possible. I haven't heard or seen anything on this but I knew you guys would know for sure. Thank You! Ok, this is a problem I've never bothered fixing but I'm sure it's something simple. On virtually every horizontal CSS rollover menu I've ever built, IE7 always leaves a tiny artifact of the rollover background color on click. Here's my latest example(I'm using IE8's compat mode, but I've checked this in IE7 itself before): http://tinyurl.com/y6uf4zd CSS and XHTML are both valid. Here's the code I always use (but customize for the project): Code:
#navbar{
position:absolute;
top:162px;
left:47px;
width:448px;
height:26px;
color:white;
font-size:.75em;
}
#navbar ul{
margin:0;
padding:0;
color:#FFFFFF;
white-space:nowrap;
}
#navbar li{
list-style-type:none;
display:inline;
}
#navbar li a{
display:block;
float:left;
margin-left:8px;
text-decoration:none;
padding:.4em .75em;
color:#FFFFFF;
}
#navbar li a:hover{
background-color:#CCCCCC;
}
#navbar a:link, #navbar a:visited{
color: #FFFFFF;
text-decoration: none;
}
Go ahead and click a menu item in FF, and then click one in IE7. It never fails. IE7 always leaves a piece of the hover background-color to the right of the LI element. If you highlight the navbar, they go away... but it's very annoying. Lemme know where I n00bed. Thanks all. For my paragraph elements I want the text-indent: property to apply to every new line..... Instead of just the first line... How is this done? thank ye. I am trying to get my container to be 100% the height of the browser window but have so far been unsuccessful, and I am not sure what I am doing wrong. Thanks for any help. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>TEST</title>
<style type="text/css" media="all">
body {
margin: 0;
padding: 0;
color: #333;
font: 13px Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
background: #EEEEEE;
text-align: center;
}
a {
color: #434C3E;
}
a:hover {
color: #F15925;
}
#container {
margin: 0 auto;
width: 724px;
height:100%;
position: relative;
background: #fff;
padding: 0 10px 0 10px;
text-align: left;
}
* html #container {
width: 744px;
w\idth: 724px;
}
#logo {
position: absolute;
top: 20px;
left: 70px;
width:94px;
height:147px;
background-image:url(../images/logo.gif);
}
h3 {
color:#555555;
}
#top {
height: 145px;
margin-left:240px;
}
#container #intro #quickSummary .p1 {
font-size: 11px;
height: 171px;
margin: 0;
width: 724px;
color: #fff;
font: 12px/150% Trebuchet MS;
}
#container #intro #quickSummary .p1 span {
padding: 30px 530px 0 30px;
display: block;
margin: 0;
font: 12px/150% Trebuchet MS;
}
#text {
margin: 20px 20px 0 243px;
}
#text p {
line-height: 150%;
margin: 10px 0 10px 0;
}
#footer {
color: #fff;
height: 48px;
text-align: right;
padding: 0 10px 0 0;
line-height: 26px;
font-size: 11px;
}
#footer a {
color: #fff;
text-decoration: none;
}
#footer a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div id="container">
<div id="intro">
<div id="logo"></div>
<div id="top"></div>
<div id="text">
<h3>Heading number one</h3>
<p class="p1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam arcu purus, sodales volutpat, eleifend ac, semper ut, dolor. Curabitur porttitor suscipit ligula. Sed vehicula mauris non sapien suscipit luctus. Fusce luctus pulvinar lectus. Aenean mi. Pellentesque rutrum nibh ut diam. Mauris porta, lectus sit amet ultricies lobortis, metus mauris semper orci, porta tincidunt neque dui ac magna.</p>
<p class="p2">Curabitur nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum eu purus ac nisl vestibulum ultrices. Pellentesque lacus. Suspendisse quam risus, hendrerit sit amet, gravida non, dapibus quis, ante.</p>
</div>
</div>
<div id="text">
<h3>Heading Number Two</h3>
<p class="p1">Etiam nec metus vestibulum lacus facilisis consectetuer. Cras sed odio. Sed et purus a pede condimentum fermentum. In hac habitasse platea dictumst. Integer ornare nisl eu sem.</p>
<p class="p2">Nam laoreet, eros non cursus varius, nisi enim pharetra nisi, ut fringilla nisl turpis a diam. Proin ac elit ut nibh nonummy ultrices. Phasellus felis quam, consectetuer in, bibendum et, dictum id, mi. Nunc quis eros id metus auctor volutpat. Nunc diam odio, vehicula a, accumsan a, semper quis, mauris. Ut mauris enim, ultricies sed, viverra non, porta vitae, dui.</p>
<div>
<h3>Heading Number Three</h3>
<p class="p1">Curabitur nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum eu purus ac nisl vestibulum ultrices. Pellentesque lacus. Suspendisse quam risus, hendrerit sit amet, gravida non, dapibus quis, ante.</p>
</div>
</div>
<div id="footer">Foo</div>
</div><!--end container-->
</body>
</html>
Is it ok to nest a div tag inside a table? It appears to work correctly. 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 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>
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. hi, I have a div that holds everything in called #bgcontain. This is just viewable in 800x600. An would center if the browser res is higher. I would like to place an advert on the right of this div that 'appears' if some has a higher res. So this advert would be off center. I have tried to put the advert div inside #bgcontain and relatively position it but I cant seem to get there, can any help point me in the right direction thanks 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 Is there a way to do an absolute position, and then position other things off of that? For instance if you look at www.thechristianparent.com/test/ you will see a menu section on the left hand side. I want the place for links where you see test twice to be and auto height, so it adjusts accordingly. I then want to place a seporator div right below that and then have another link area. How do I position the dive below that? So I just started working on my first complete website in a couple years and needless to say i'm behind the times in regards to layouts. I want to use CSS, more specifically DIVs to layout my site. I created a background in Photoshop that will serve as a guide for where I want the various boxes/text. I've done extensive searching and reading on the different kinds of positioning you can do with DIVs. Whether it be absolute or relative or float. But I have yet to figure out the proper way to code in the various DIVs so that they remain in the same spot no matter the resolution of the screen or if someone resizes the window. I just want to be able to tell them where I want them and not have to worry about them moving. The way I have it coded now, the DIV moves around when I resize the window - something I don't want. Any help would be greatly appreciated! Like I said I'm just getting back on my feet when it comes to HTML/CSS and i'm a bit rusty. Thanks!! 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
<style type="text/css">
body {
font-family: 'Lato', sans-serif;
margin: 0;
background: #0C0 url(landscaping1.jpg) no-repeat center top;
}
#leftcontent
{
border:1px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:300px;
height:300px;
border-radius:12px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
box-shadow: 10px 10px 5px #888888;
float:left;
position:relative;
top:450px;
left:80px;
}
</style>
<title>Mueller Lawn and Lanscape 2012</title>
</head>
<body>
<div id="leftcontent">
Some text goes here.
</div>
</body>
</html>
Also, here is what the site looks like with the above code. Obviously i'm still working on the visual aspects of the site, so disregard that part for now. http://i110.photobucket.com/albums/n120/infantryclothing/0cb6b676.png 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 trying to create a page to be printed out as a letter but I cannot for the life of me make the footers stick to the bottom when printed. Here is the code: Code:
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Header Test</title>
<style type="text/css">
body {
font-family:arial;
font-size:10pt;
}
h1 {
text-align:center;
margin:0;
padding:0;
}
div.letter {
page-break-after:always;
}
.from {
text-align:center;
}
.to {
font-style:normal;
margin-top:30px;
}
.date {
}
.footer {
position:absolute;
bottom:0;
}
</style>
<!-- compliance patch for microsoft browsers -->
<!--[if lt IE 7]>
<script src="/ie7/ie7-standard-p.js" type="text/javascript"></script>
<![endif]-->
</head>
<body>
<div class="letter">
<h1>Stanley Road Baptist Church</h1>
<address class="from">
Stanley Road, Morecambe, Lancashire, LA3 1UP
</address>
<address class="to">
Joe Bloggs
</address>
<p class="date">
Friday 27th August 2004
</p>
<p>
Dear Joe,<br />
Blah blah blah.
</p>
<p>
Yours sincerely,
</p>
<p>
Matt Fletcher
</p>
<div class="footer">
The Footer In Question
</div>
</div>
<div class="letter">
...
</div>
<div class="letter">
...
</div>
</body>
</html>
I can get it to stick to the bottom of only the first page, but it doesn't appear on any others. I am trying to figure out the best way to right justify an element in relation to other elements within a div. Here is an example: <head> <title>right position</title> <style type="text/css"> #maindiv {width: 600px; background: #cccccc; padding: 10px; border: solid 1px black;} .left {font-size: 2em;} .right {padding-left: 350px} </style> </head> <body> <div id="maindiv"> <span class="left">hello world</span> <span class="right">hi there</span> </div> </body> This can't be the best way to right position something, can it? The only alternatives I can think of are absolute positioning or possibly floating, which seems unnecessarily complicated for something so simple. Can anyone suggest a better way of doing this? Ideally, the element would stay pinned to the right even if the left element changes widths. Thanks in advance, CSS Newbie! dear all, i am writing a table-less form. it is going well, but i have an issue i wonder if anyone can help me with.... i am using labels for each form field (or set thereof), which is displayed to the left of the form flied(s). this works really well. i also have numerous situations where i have many checkboxes which i am displaying in multiple columns (or rows). All is well until the label for a set of checkboxes wraps over more than one line. when this happens, the space in between first and second row of checkboxes expands inline with the amount of text in the label tag. hope that explanation makes sense, and i also hope there is some way around it. I originally tried with inline-block positioned elements, but this would only look god on ie. here is the css: Code:
<style type="text/css">
/* each row in a div */
#cssform div.row {
font-size:0.8em;
font-family:Arial, Helvetica, sans-serif;
clear: left;
margin: 0;
padding: 5px 0 8px 175px;
border-top:1px solid #999999;
}
#cssform label {
float: left;
margin-left: -165px;
width: 155px;
text-align:right;
padding-top: 0.2em;
}
#cssform input[type=radio] {
margin-right: 3px;
}
#cssform input[type=checkbox] {
margin-right: 3px;
}
div.row div.multiColumnH {
display:inline;
float:left;
margin-right: 10px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
div.row br.cleared {
clear:left;
}
</style>
and the html: Code: <form id="cssform"> <div class="row"> <label>horizontal columns horizontal columns</label> <div class="multiColumnH" style="width:150px;"> <input type="radio" name="radio4" value="a" /><span title="This is A">This is A</span> </div> <div class="multiColumnH" style="width:150px;"> <input type="radio" name="radio4" value="b" /><span title="This is B">This is B</span> </div> <div class="multiColumnH" style="width:150px;"> <input type="radio" name="radio4" value="c" /><span title="This is C">This is C</span> </div> <div class="multiColumnH" style="width:150px;"> <input type="radio" name="radio4" value="d" /><span title="This is D">This is D</span> </div> <div class="multiColumnH" style="width:150px;"> <input type="radio" name="radio4" value="e" /><span title="This is E">This is E</span> </div> <br class="cleared" /> <div class="multiColumnH" style="width:150px;"> <input type="radio" name="radio4" value="f" class="noClass"><span title="This is F">This is F</span> </div> <div class="multiColumnH" style="width:150px;"> <input type="radio" name="radio4" value="g" /><span title="This is G, and a big fella too">This is G, and a big fella too</span> </div> <div class="multiColumnH" style="width:150px;"> <input type="radio" name="radio4" value="h" /><span title="This is H">This is H</span> </div> <div class="multiColumnH" style="width:150px;"> <input type="radio" name="radio4" value="i" /><span title="This is I">This is I</span> </div> <div class="multiColumnH" style="width:150px;"> <input type="radio" name="radio4" value="j" /><span title="This is J">This is J</span> </div> <br class="cleared" /> <div class="multiColumnH" style="width:150px;"> <input type="radio" name="radio4" value="k" /><span title="This is K">This is K</span> </div> <div class="multiColumnH" style="width:150px;"> <input type="radio" name="radio4" value="l" /><span title="This is L">This is L</span> </div> <div class="multiColumnH" style="width:150px;"> <input type="radio" name="radio4" value="m" /><span title="This is M">This is M</span> </div> <div class="multiColumnH" style="width:150px;"> <input type="radio" name="radio4" value="n" /><span title="This is N">This is N</span> </div> <div class="multiColumnH" style="width:150px;"> <input type="radio" name="radio4" value="o" checked="checked" /><span title="This is O">This is O</span> </div> <br class="cleared" /> <div class="multiColumnH" style="width:150px;"> </div> </div> </form> The aim is to have a table-like layout, with fixed width "cells". Many thanks in advance, Mark Hey people. I'm kind of new to CSS (well not new, just unfamiliar), and I need to ask the old question about absolute positioning, which I haven't managed to find a satisfactory answer to on the net. I downloaded a script for a drop down menu. The page on which it appears is made up of a table, and the headers of menu is in a row across the top. The menu items are in their own tables: <div id="dropdown1" style="left: 257; visibility: hidden; width: 81; position: absolute; top: 299; height: 53"> <table class="popup" onmouseover="clearTimeout(timerID)" onmouseout="timerID=setTimeout('closeall()',200)" cellspacing="0" cellpadding="2" width="79" height="15" border="1"> <tbody><tr><td>Item 1<br>Item 2</td></tr> </tbody></table> </div> And as you can see, they use absolute positioning. Unfortunately, this means that when I change the text size on my browser, the menu headers and the menu items are not aligned. I tried using table id=dropdown1, but this resulted in a huge gap between the menu headers and the rest of the page, where the hidden menu items were. I realise changing text size will always be a problem when using absolute positioning in CSS, so I was wondering if anyone had any suggestions on an alternate method? Or if not, atleast what text size most people use, so I can set it to align for the majority of viewers? Or if it's possible to do a similar menu in a different (understandable) language? I appreciate any help, MKK (Before you ask, no, the page is not online. I know this makes it harder to find a solution, but my webhosting company just disappeared - "failed to pay server bills", so I currently have no web space) Hi, I have the following code: PHP Code: <table cellspacing="0" cellpadding="2" border="0"> <tr> <td valign="top"> <span style="position: relative; top: 80px; left: 10px;"><img src="images/sold.gif" alt="" border="0"></span> <img src="upload/mainimage.jpg>" alt="" border="0"> </td> </tr></table> The span and sold.gif image are pushing the main image down in the table, so there's a big piece of whitespace above it. Not sure what I'm doing wrong here.. is there some special trick I should know about using relative positioning? |
|||||||