|
CSS - Css Positioning Question
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 Similar TutorialsI 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. 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? 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 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. 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 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! 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? I want a basic page like: Header --- Body --- Footer 1) Nothing should use absolute positioning. The whole page should use regular flow. 2) Most pages will have lots of dynamic content in the body section and user will need to scroll. The user can scroll to the top to see the header and scroll to the bottom to see the footer. 3) For a few pages (login page), the body content will be small. The page should expand to fill the screen. The body should be centered, the footer should be at the bottom of the browser, and of course, the user shouldn't have to scroll. #1+#2 are very simple by themselves. However, I can't get #3 to work without breaking 1 or 2. My final site needs to work with IE 6.0, IE 7.0, and Firefox 2.0, but if even if someone knows a solution that only works with one of those, that would be very helpful. Ideally I'd like to do this in CSS, although I'll switch back to tables if that works. Here is what I have so far: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(URL address blocked: See forum rules)"> <html xmlns="(URL address blocked: See forum rules)" style="min-height: 100%; height: 100%;"> <head> <title>Vertical Sizing Test Page</title> </head> <body style="min-height: 100%; height: 100%; margin: 0; background-color: #FFF; font-family: Verdana; font-size: 10pt;"> <div style="background-color: #FED; padding: 10px; height: 25px;"> Top Banner. I want this to be sized in pixels to accommodate raster backgrounds. </div> <div style="min-height: 100%; vertical-align: middle; background-color: #DEF; padding: 10px; margin: 10px; border: 1px dotted black;"> <h2>Main Content Area</h2> I want this to vertically fill the remainder of the page.<br/> <br/> There should not be any unused space below the bottom banner.<br/> <br/> If there is a lot of dynamic content in this section, the user will need to scroll. However, if there isn't a lot of content, the user shouldn't have to scroll.<br/> <br/> This should also be vertically centered.<br/> <br/> <!-- Turn on/off to simulate lots of content that requires scrolling. --> <div style="display: none;"> filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/> filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/> filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/> filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/> filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/> filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/> filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/> filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/> filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/> filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/> filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/> filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/> filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/> filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/> filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/> filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/> </div> </div> <div style="background-color: #FED; padding: 10px; height: 25px;"> Bottom Banner. I want this to be sized in pixels to accommodate raster backgrounds. </div> </body> </html> 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'm trying to be a good forward-thinking web designer and am giving the xhtml/css design thing a try with the site I'm currently building. The challenge is to do the whole layout without using a table, but I'm having a hell of a time. You can see the site now at: http://epoch.pursuedbybear.com - currently, I've got the header and footer table-free, but it's the main content area that's giving me trouble. It's using a table right now, since that's so easy, but I'd like to fix that. Here's what I want: the page is 750 pixels wide, centered. I would like the text to be on the left taking up about 400 pixels, with the margins it currently has. I would like the image to be on the right, aligned to the very edge of the header and just underneath it - no gaps. I would like a 1px black border on the left and right. I can ALMOST get there with CSS, but everything I've tried has put the image slightly off (typically not flush against the header or after the text entirely). - you can see my latest efforts at http://epoch.pursuedbybear.com/page2.shtml. Can anyone offer advice on this? I feel so close, but so infuriatingly far... Thanks, Daniel 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 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 I've said this before, on he I'm old and trying to ween myself off tables. I'm re-doing a site for a mattress store (I did one for the owner a number of years ago) and I absolutely want to ditch the archaic code.... But, I've got a very basic question about laying things out with CSS - and I'm going to post a picture because - I think - it may explain my question best. In short, I have a DIV that's centered in the middle of the page called "container". It has a javascript slider at the top, that kinda fills the area in terms of width, and below it I want two columns. I have no idea - using strict CSS and no tables - how this would be done. I mean, I suppose you could use DIVs and absolute positioning but it seems like that might cause problems - I mean, heck...I don't know - maybe not. I just want to know what the best approach would be. Here's a graphic: I don't think it matters, but you can see the whole page (and examine the code), here (just a parking spot on my own server): http://www.guymerritt.net/xdog2/ Any help - as always - would be greatly appreciated. I have successfully added a background image to the page but it does not center how I want it to. Right now it is positioned at top center. I would like to move it to Center center of entire page. Using this code instead of center for background-position did not do anything. Neither did 50%, 50%. What can I do to move this over. I have the same problem with a picture file to go above the background file and web links which are all placed at top left of page. It would be nice to move them to top center of page. How is this possible through html code? Here is the code for the background image: <style type="text/css"> body { background-image: url(picture/bamboo.jpg) } body { background-position: center } body {background-repeat: no-repeat } </style> Thank you for your help, Hello everyone, this is my first post, and i am fairly new to css and web design but i'm really exited to learn more (specially involving theming for drupal). I'm having a problem wrapping my mind around this design i'm trying to layout. Here is the naked design... Code: http://i65.photobucket.com/albums/h201/smiro/1-3.jpg And here is what it's supposed to behave like when there is a lot of content in it... Code: http://i65.photobucket.com/albums/h201/smiro/2-1.jpg as you can see from the first image i sliced a pixel to repeat in the center portion of the tree. In the second image is an illustration of what i'd like the final product to look like but i can't seem to be able to wrap my mind around how to make that happen. i'm starting to feel like it just might not be possible with CSS. here is the snippet of my html code Code: <div id="contentWrapper"> <div id="topWrapper"></div> <div id="bottomWrapper"></div> </div> and the relative CSS code Code: #contentWrapper {background-image: url(images/contentWrapper.gif);
background-repeat: repeat-y;
width: 924px;height: 100%;
margin: auto;}
#topWrapper{background-image:url(images/topWrapper.gif);
margin: auto;
height: 354px;
width: 924px;}
#bottomWrapper {background-image:url(images/bottomWrapper.gif);
margin: auto;
height: 393px;
width: 924px;}
The only thing i can think of is to assign the DIV with the text in it an absolute positioning relative to #contentWrapper but that will not cause #bottomWrapper to push down when the text DIV needs the room... anyway, thank you all for taking the time to look at this, i am very grateful and eager to discuss a possible solution Hello and thanks for your patience. I have a page here that is having a positioning problem for "sidebar2". I can't seem to get it to stick to that right side of the page in a fixed position. Code: @charset "UTF-8";
* {
margin: 0px;
padding: 0px;
}
body {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
color: #32240C;
line-height: 1.5em;
}
a:link {
color:#C42617;
}
a:hover {
color: #687ABB;
}
a:visited {
color:#C42617;
}
a:active {
color: #687ABB;
}
h2 {
font-size: 1.2em;
line-height: 2.3em;
color: #34260b;
border-left-width: thin;
border-left-style: double;
border-left-color: #34260b;
text-indent: 10px;
background-repeat: no-repeat;
}
#clear {
clear: both;
}
#welcome {
color: #325084;
float: left;
width: 590px;
text-align: left;
padding: 15px;
border: thin solid #D0DAEF;
background-color: #FFF;
margin-left: 25px;
margin-right: 5px;
}
#welcome h2 {
padding-left: 2px;
}
#welcome p {
padding-left: 2px;
}
input {
width: 185px;
}
/* reset width for non-text inputs */
input.radio, input.checkbox, input.submit, input.dropdown {
width:auto;
}
/* display labels next to form elements add a class for when you want them to stack */
label {
float: left;
margin-right: 1em;
}
label.top {
display: block;
float: none;
}
.sidebar2 {
position:absolute;
top:182px;
right: 150px;
text-align:left;
width: 255px;
padding-top: 0px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 10px;
margin-top: 0px;
}
.sidebarheader {
color:#D75500;
padding-bottom: 5px;
font-weight: bold;
font-style: italic;
font-size: 16px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
img {
border: none;
}
/*- Menu 3--------------------------- */
#menu3 {
width: 250px;
border-style: solid solid none solid;
border-color: #BCD2E6;
border-size: 1px;
border-width: 1px;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 0px;
font-size: 12px;
}
#menu3 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu3 li a:link, #menu3 li a:visited {
color: #325084;
display: block;
background: url(menu3.gif);
padding: 8px 0 0 10px;
}
#menu3 li a:hover {
color: #627EB7;
background: url(menu3.gif) 0 -32px;
padding: 8px 0 0 10px;
}
#affiliates {
color: #325084;
float: left;
width: 580px;
text-align: left;
margin-left: 25px;
margin-right: 15px;
}
#affiliates table td {
padding: 15px;
}
Can you tell me how format that div? 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 I have problem with footer DIV in this layout (the order of DIV's in code after <body> should be - content, left, right, right2, header, footer - positioned centraly with fixed values): It needs to be sticked to fit after content of 4 column DIV's like it is in example. http://www.split.info/dev/less-content/ http://www.split.info/dev/more-content/ 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>Title of website</title>
<style type="text/css">
<!--
body {margin: 0px 0px 0px 0px; background-image:url(images/bg.jpg); background-position:center; background-repeat:repeat-y;}
#wrapper {width: 1000px; margin: 0 auto; text-align: left; position: relative;}
#contentPane {width: 468px; float: left; position: absolute; margin-left: 3px; padding: 0px 0px 0px 0px; background-color:#0099FF; left: 126px; top: 150px;}
#leftPane {width: 125px; float: left; left: 0px; position: absolute; background-color: #99FFFF; top: 150px;}
#rightPane {width: 173px; float: right; right: 226px; background-color:#999966; position: absolute; top: 150px;}
#rightPane2 {width: 220px; float: right; right: 0px; background-color:#99FF00; top: 150px; position: absolute;}
#headwide {background-image: url(images/head_bg.jpg); background-position: center; background-repeat: no-repeat; width: 100%; height: 142px; position: absolute; top: 0px;}
#header {margin: 0pt auto; width: 1000px; background-color:#CC6600; height: 142px; }
#footer {position: absolute; width: 100%; top: auto; bottom: 0px; background-color: #CCFFCC; height: 50px;}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="contentPane">Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
</div>
<div id="leftPane">Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
</div>
<div id="rightPane">Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
</div>
<div id="rightPane2">Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
</div>
</div>
<div id="headwide">
<div id="header">Header area</div>
</div>
<div id="footer"><strong>Content from above 4 column div's need to push footer DIV below (after them)! </strong>Footer area that is on bottom of div with biggest height (content, left, right or right 2 pane)... foooter follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current state like it is in this document happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So footer can be either moved in code after rightpane2 div after end of wrapper. Pls help. Thx!</div>
</body>
</html>
Content from above 4 column div's need to push footer DIV below (after them)! Foooter need to follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current issue like it is in this layout happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So in your resolution footer can be also moved in code after rightpane2 DIV, after end of wrapper. Pls help. Thx! Echo |
|||||||