|
CSS - Website Positioning
Hi, I am creating a website for an assignment in University. It is complete but while testing it on browsers, I noticed my text runs into my menu, to the left when i minimize the browser page. Just wondering if there's something I can put in CSS to hold everything in place? It seems fine otherwise
Edit: Must use Firefox! Similar TutorialsHey all! I tried this forum once before and no one helped me, but I hope someone can help me now. I scrapped the design of the last problem and started over, so now I have new problems. I got a Blogger template off the internet and all of the pages work fine except the homepage and calendar page that I made in Dreamweaver to try to look like the blog pages. In internet explorer, it doesn't work right. It looks okay in Firefox. It looks better in internet explorer with...oh...that google add-on installed...cannot remember what it is called. What can I do to fix the coding. Please help! I am self taught and this is driving me crazy. You have no idea how long it took me to get it to where it is now! www.hanoverlutheran dot com Hey guys i have some image layout problems with my images on safari and firefox on Mac only. Firefox and safari on PC seem fine but its only happening on Mac. The positioning of the images have moved dramatically. Not sure how to fix it CSS is validated and so is xhtml strict 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 Hello all! Well I'm just designing my personal website, and I'm encountering a problem with positioning div elements. (This is going to be a very basic question that I couldn't find anywhere.) To understand the exact problem I am having, here are the links: lightblu.com/4/1.html lightblu.com/4/2.html Notice in the first one, it is perfectly fine. In the second, when I add more text, it just overlaps everything, including the footer and the bg color. It only works fine when I add more text on those right boxes. So question is, what should I do so that when I add text either on the left side OR on the right side, the background expands accordingly? Thanks for all your help! thanks for taking the time to read my question. I have a div that I want to float right, but it is staying on the left side, and I can't figure out why. HTML: 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>
<meta name="description" content="Warren Persowich Humour Facilitator - Stand-Up Comedian Winnipeg Manitoba. Comedic entertainment performances laughter and insight. Fun professional development. A decade of stand-up experience." />
<meta name="keywords" content="Warren Persowich, Comedian, Comedic, Stand Up, Stand-Up, Comedy, Business, Winnipeg, Manitoba, Cancer, Entertainment, Funny, Hilarious, Interactive, Laughter, Psychology, Professional, Development" />
<meta name="Revisit-After" content="7 Days" />
<meta name="Robots" content="index, follow" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="verify-v1" content="ongXn98vPdWEemx2Lu5qZozNxw3CDdugXLIpK9XzOr4=" />
<title>2 Nations Female Hockey League:::::</title>
<script type="text/javascript" src="Javascript/coolmenu.js"></script>
<script type="text/javascript" src="Javascript/menu_items.js"></script>
<link rel="stylesheet" type="text/css" href="menu_styles.css">
<link rel="stylesheet" type="text/css" href="2NFHL.css">
</head>
<body>
<script type="text/javascript">var m1 = new COOLjsMenu("menu1", MENU_ITEMS)</script>
<div class="LogoDiv"><a href="Index.htm"><img class="Logo" src="Images/WOMENSHOCKEY CHOICE 1Small2.jpg" alt="Two Nations Female Hockey League"></a></div>
<div class="NavDiv">
<p class="TeamsNav">Teams: <a href="Team1">Coyotes</a> | <a href="Team2">Extreme</a> | <a href="Team3">Ice Cats</a> | <a href="Team4">Saints</a> | <a href="Team5">Mustangs</a> | <a href="Team6">Lightening</a> | <a href="Team7">On Edge</a></p>
</div>
<div class="ContentDiv">
<div class="prop"></div>
<div class="Welcome">
<p class="FirstLine">Welcome to the Two Nations Female Hockey Leage web site.</p>
<p>The Two Nations Female Hockey Leage is a Spring - Summer league that is comprised of female hockey teams hailing from both Canada and United States.</p>
<p>To learn more about the Two Nations Female Hockey League, click <a href="AboutUs.htm">here</a> or use the About Us link in the navigation bar above.</p>
</div>
<div class="TNFHLTW">
<p class="TNFHLTWP">This week in the TNFHL the Coyote's and On Edge faced off in Winnipeg, Manitoba. The teams skated to a 3 all tie.</p>
</div>
<div class="Banners">
<div class="BannerCont"><img src="Images/ChampWeekend.gif" /></div>
<div class="BannerCont"><img src="Images/ChampWeekend.gif" /></div>
</div>
<div class="clearprop"></div>
</div>
<div class="BottomNavDiv">
<div class="BottomNavDivCont">
<p class="BottomNavLinkP"><a href="Index.htm" class="BottomNavLink">Home</a> | <a href="Index.htm" class="BottomNavLink">About Us</a> | <a href="Index.htm" class="BottomNavLink">Philosophy</a> | <a href="Index.htm" class="BottomNavLink">Teams</a> | <a href="Index.htm" class="BottomNavLink">Standings</a> | <a href="Index.htm" class="BottomNavLink">Schedule</a> | <a href="Index.htm" class="BottomNavLink">Contact Us</a> | <a href="Index.htm" class="BottomNavLink">Links</a><p/>
</div>
</div>
</body>
</html>
CSS: Code: html, body {
height: 100%;
padding: 0;
margin: 0;
}
.LogoDiv {
/*background-image:url("Images/WOMENSHOCKEY CHOICE 1Small2.jpg");
background-repeat: no-repeat;
background-position: top left;*/
margin: 2px auto;
padding: 0px;
height: 87px;
width: 800px;
display: block;
}
img.Logo {
border: 0px;
}
.Banners {
float: right;
width: 300;
margin: 20px 20px 0px 0px;
padding: 0px;
background-color: red;
/*clear: both;*/
}
.BannerCont {
width: 300;
height: 50px;
margin: 5px 0px 0px 0px;
padding: 5px 0px 0px 0px;
background-color:#362161;
}
.NavDiv {
background-image: url(Images/N2NavBar2.jpg);
background-repeat: repeat-x;
background-position: top left;
padding: 10px 0px 0px 0px;
margin: 0px 0px -13px 0px;
height: 80px;
width: 100%;
display: block;
}
.TeamsNav {
padding: 0px;
margin: 0px 0px 0px 400px;
font-size: 12px;
}
/*.prop and .clearprop are in here to create a min height of 400px*/
.prop {
height: 400px;
width: 1px;
float: right;
background-color: yellow;
}
.clearprop {
clear: both;
height: 1px;
overflow: hidden;
background-color: yellow;
}
.ContentDiv {
width: 800px;
/*height: 400px;*/
overflow: hidden;
background-image:url(Images/Background-Blue3.jpg);
background-repeat: no-repeat;
background-position: top left;
margin: 0px auto;
padding: 0px;
display: block;
position:static;
z-index: -1;
}
.TNFHLTW{
width: 212px;
overflow: hidden;
background-image:url(Images/TNFHLThisWeekShortNarrow.gif);
background-position: top left;
background-repeat: no-repeat;
margin: 50px 0px 0px 30px;
padding: 50px 0px 0px 0px;
}
.Welcome {
float: right;
margin: 10px 20px 0px 0px;
overflow: hidden;
width: 450px;
background-color: aqua;
}
.FirstLine {
font-size: 20px;
margin: 0px;
padding: 0px;
text-align: center;
}
.COC1 {
padding: 2px;
margin: 50px 0px 0px 30px;
width: 700px;
float: left;
text-indent: 20px;
}
.COC {
padding: 2px;
margin: 10px 0px 0px 30px;
width: 700px;
float: left;
text-indent: 20px;
}
.OLHolder {
margin: 10px 0px 0px 30px;
padding: 2px;
float: left;
width: 700px;
}
.COCOL li {
margin-bottom: 10px;
}
.COCTitle {
padding: 2px;
margin: 10px 0px 0px 30px;
width: 700px;
float: left;
text-align: center;
font-weight: bold;
text-decoration: underline;
font-size:18px;
}
.LinkList li {
margin-top: 10px;
list-style-type:none;
}
p.TNFHLTWP {
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
padding: 4px;
margin: -20px 0px 0px 0px;
font-size: 12px;
background-color: #ffffff;
}
.BottomNavDiv {
padding: 0px;
height: 72px;
width: 100%;
display: block;
border-top: 4px solid red;
margin: 0px;
height: 25px;
}
.BottomNavDivCont {
margin: 0px auto;
width: 800px;
overflow: hidden;
display: block;
height: 25px;
padding: 0px 0px 0px 20px;
}
/*.BottomNavDivCont ul li {
display: inline;
padding: 0px 10px 0px 0px;
font-size: 10px;
color: #ff0000;
margin: 0px;
}*/
.BottomNavLinkP {
font-size: 10px;
color: #ff0000;
display: block;
}
.BottomNavLink {
font-size: 10px;
color: #ff0000;
}
a.BottomNavLink:link{
text-decoration: none;
}
a.BottomNavLink:visited{}
a.BottomNavLink:hover{
text-decoration: underline;
}
a.BottomNavLink:active{}
p.TeamsNav a:link{
text-decoration: none;
color: #000099
}
p.TeamsNav a:visited{}
p.TeamsNav a:hover{
text-decoration: underline;
}
p.TeamsNav a:active{}
.LinkList li a:link {
text-decoration: none;
color: #000099;
}
.LinkList li a:visited {}
.LinkList li a:hover {
text-decoration: underline;
}
.LinkList li a:active {}
I put clear:both on .Banners but then it moves to the bottom under .prop I'd like .Banners to be under .Welcome The page displays the same in FF and IE7, but in IE6 .Banners stretches across most of the .ContentDiv help? I'm using a JS/CSS calender script found at http://www.dynarch.com/projects/calendar/. It works great except for one thing.. it wont position correctly in IE (6 & 7). I have a form with 20 text inputs strait down a page. As per instruction i place the following code just below my desired text input, say at tab index 12. Code:
<script type="text/javascript">
Calendar.setup({
inputField : "this_fieled_name", // id of the input field
ifFormat : "%Y-%m-%d", // format of the input field
showsTime : true,
timeFormat : "24"
});
</script>
When the page and script run, in Firefox its perfect, but in IE, the calender places almost 200px high than desired near tab index 6. My question is, how do i get IE to position as FF does? Here are i think the two most important files that may need affecting. Both are stock from download. http://www.empiresolutions.net/demo/calendar-setup.js http://www.empiresolutions.net/demo/theme.css Thanks much. Cesar CSS is very new to me so if someone can help me with my problem i would very much appreciate it. I am using a background image that is 1024 x 768px. I have positioned this using... Code: body
{
background-color:#000000;
background-image:url('images/homebg.jpg');
background-repeat:no-repeat;
background-position:center top;
}
As i am new to css i am using tables to position my content over the top of the background image. If the browser is adjusted in size the content appears to be going over the edge of the background image instead of staying with in it. is there any way i can lock the 2 (background image and content) in position so that when the browser is made smaller or the site is viewed in different resolutions it will remain together without the content going over the edge of the background. Or am i doing this wrong. I have read about wrappers and such but i don't really understand them. An example of what i am trying to achieve is at www.blue-leaf.co.uk I have a select menu that I want to sit on the bottom of the page regardless of the length of the page. How can this be achieved? Height of menu is 235px and width is 150px. Allright first off this is the first time I have written any web based code in over a year, so its *NOT* cross browser, compliant in any way shape or form, it just works to make the design come together in firefox... what I am looking for is the menu bar to have the carrot (the downward pointing triangle) centered ON TOP OF whatever page you are on CURRENTLY) page is he http://www.gr-p.com/test2.html what should I be aiming for as far as CSS, or should I start from scratch.. I want suggestions (not necisarily for you to fix my code.) I need to learn again and thats the only way I am going to Hello all, i have a page setup which is working well in all browsers. I have a div layer positioined in the page at the moment it is positioned absolute, and it is in the correct place you can see it at www.loadedtechnologies.com/impact , the layer is id="demoImage", you can have a look at the css file in page source. I don't want this layer positioned absolute, i want it to be relative to the "MidTopContent" layer, so that when the ADMIN menu appears on the top of the page once logged in, the demoImage layer will follow down within MidTopContent, Please help THANKS Hi all.. I just stumbled onto this site via a google search. I'm having a problem with some "div" work and postitioning of a graphic. I'm working on a site and have decided to do all the positioning via CSS. The positioning shows fine in Firefox but the last portion is shifted down 10 or so pixels in Internet Explorer. Here's a quick show of the error: URL Here's the HTML with CSS below: Code: <div id="Table_01"> <div id="hdr-main_"> <img id="hdr_main" src="images/hdr_main.jpg" width="557" height="161" alt="" /> </div> <div id="hdr-mnu-left_"> <img id="hdr_mnu_left" src="images/hdr_mnu_left.jpg" width="5" height="20" alt="" /> </div> <div id="hdr-mnu-bg_"> <img id="hdr_mnu_bg" src="images/hdr_mnu_bg.jpg" width="547" height="20" alt="" /> </div> <div id="hdr-mnu-right_"> <img id="hdr_mnu_right" src="images/hdr_mnu_right.jpg" width="5" height="20" alt="" /> </div> <div id="hdr-mnu-bottom_"> <img id="hdr_mnu_bottom" src="images/hdr_mnu_bottom.jpg" width="557" height="5" alt="" /> </div> </div> </body> </html> I've also pasted the CSS code: Code: #Table_01 {
position:absolute;
left:0px;
top:0px;
width:1024px;
height:768px;
}
#hdr-main_ {
position:absolute;
left:228px;
top:41px;
width:557px;
height:161px;
}
#hdr-mnu-left_ {
position:absolute;
left:228px;
top:202px;
width:5px;
height:20px;
}
#hdr-mnu-bg_ {
position:absolute;
left:233px;
top:202px;
width:547px;
height:20px;
}
#hdr-mnu-right_ {
position:absolute;
left:780px;
top:202px;
width:5px;
height:20px;
}
#hdr-mnu-bottom_ {
position:absolute;
left:228px;
top:222px;
width:557px;
height:5px;
}
Does anyone know why my graphic is turning out the way it is in IE and not in Firefox? This is my first serious attempt at positioning with CSS.. so bear with me Thanks all... Jason I wasn't sure how to title this problem as I'm not sure exactly what it is. I've only been learning CSS over the last few days and transformed an old site as I went. learnware .com . au/css/index .htm The page displays fine in IE7 and FF but in IE6 the left menu moves over and sits just over the top of the left hand edge of the green area in the middle. I'm not sure what code to post or which area to focus on. I'm hoping someone can assist me with what I should be looking at. I've spent all night looking at forums, etc trying to figure out where the problem lies but I can't even get that far! (Sorry if I've disobeyed any forum rules) Hi all, hoping someone can help me with what feels like it should be a simple problem, but one I can't work out. Apologies if the problem seems too obvious to you, I'm a total noob at this. I basically have two div objects within a space beneath the header. These are a video player, which is fine, and a scrolling menu. Presently the menu (navigation.php) is off the bottom-right, beneath the video, and I simply want to force it to the TOP right, parallel with the player. My code is below, and I'm looking for an elegant css solution if possible. Any more info needed, just ask. I took a grab, but the forum won't let me post links. Cheers in advance. </style> </head> <body bgcolor="#B94F1F"> <div id="container"> <div id="header"><?php include("header.php"); ?></div> <div id="wrapper"> <p id='preview'>The player will show in this paragraph</p> Words here? <p>Paragraph <p>Paragraph <script type='text/javascript' src='swfobject.js'></script> <script type='text/javascript'> var s1 = new SWFObject('player.swf','player','640','380','9'); s1.addParam('allowfullscreen','true'); s1.addParam('allowscriptaccess','always'); s1.addParam('flashvars','file=xxx'); s1.write('preview'); </script> <div id="navigation" style="width:300px;height:430px;overflow:auto;border-width:1px;border-color:000000;border-style:solid;"> <font size=2> <div id="header"><?php include("navigation.php"); ?></div> </font></div> Hi, I can't figure out why my top nav won't stay in place in ie. Here's what I have for my nav. Works everywhere but ie, its position (just the height) it's off. Thanks much for any help. Simone div.navigation { position: relative; left:160px; top: 140px; line-height:0; border : 0 solid #000000; overflow : auto; width : 50%; font-size : 20px; font-weight: bold; margin: 0px 0 0 0px; } div.left { width : 45%; float : left; } div.right { width : 30%; float : right; } a.navigation { border-bottom : 5px solid #99c37f; text-decoration : none; color : #4c2110; font-size: 20px; } a.navigation:hover { border-bottom : 5px solid #99c37f; text-decoration : none; color : #4c2110; font-size: 20px; } G'day all, I am hoping some here can help me with a problem I am having with positioning. I have a content div with dynamically generated text, next I have a side-bar div that i'd ideally like to centre vertically but this seems to be bad practice so my other thought, if possible would be to have the side-bar position itself relative, x position from top with the dynamic text to wrap around the side-bar div. What I have currently is: Code:
<div id="main-content">
<div class="side-bar">
<div class="side-bar_header">Content Header</div>
<div class="side-bar_content">
<ul>
<li>Side-bar info</li>
</ul></div>
</div>
{dynamic_content_tag}
</div>
Code:
#main-content {
height: auto;
width: 630px;
}
.side-bar {
background-color: #CCC;
float: left;
width: 180px;
position: relative;
top: 50%;
margin-right: 10px;
margin-bottom: 20px;
}
.side-bar_header {
background-color: #666;
text-align: center;
padding: 5px;
}
.side-bar_content {
padding-left: 5px;
}
Any help would be much appreciated. I am having some problems getting this to perform properly. I want this to look like this: http://img108.imageshack.us/img108/8540/newestdesign5qd.jpg But it is displaying like this: http://img119.imageshack.us/img119/8716/problem1qk.jpg Could you guys tell me what is causing that, and maybe any other touch ups in the code I should do. I will gladly list anyone that helps out in the site credits. BTW, HTML in Next Post, the post was too long with it. Here is the CSS: Code:
ul{
display: inline;
list-style-type: none;
}
li{
display: inline;
list-style-type: none;
}
BODY {
background: #104080 url(http://www.digitalsupremacy.com/forums/ds_01/alt_index/bg.gif) repeat-x;
color: #000000;
font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
margin: 0px 0px 0px 0px;
padding: 0px;
}
a:link {
font: 9px verdana, geneva, lucida, 'lucida grande', arial, helvectica, sans-serif;
color: #a4a4a4;
font-weight: bold;
}
a:visited {
font: 9px verdana, geneva, lucida, 'lucida grande', arial, helvectica, sans-serif;
color: #a4a4a4;
font-weight: bold;
}
#wrapper {
width: 740px;
color: #FFFFFF;
background: url(images/sidebar_all.jpg) repeat-y;
}
#logo_2 {
float: left;
}
#logo_3 {
float: right;
}
#logo_3 IMG {
border: none;
}
#ads {
margin-left: 216px;
margin-top: 0px;
background-color: #FFFFFF;
}
#sidebar {
margin-top: 0;
background: url(images/side_bg.gif) repeat-y;
float: left;
width: 187px;
height: 100%;
}
.content-title {
background: url(images/content.jpg);
width: 554px;
float: right;
height: 28px;
}
.content-title-text {
padding-left: 2px;
margin-top: -7px;
font-family: verdana, arial, sans-serif;
font-size: 10px;
font-weight: bold;
color: #7489b9;
float:left;
}
.content-title-text a:link {
font-family: verdana, arial, sans-serif;
font-size: 10px;
font-weight: bold;
color: #7489b9;
}
.content-title-text a:visited {
font-family: verdana, arial, sans-serif;
font-size: 10px;
font-weight: bold;
color: #7489b9;
}
.content-title-text a:hover {
font-family: verdana, arial, sans-serif;
font-size: 10px;
font-weight: bold;
color: #a6c1ff;
}
.postmetadata {
background: url(images/content_2.jpg);
width: 554px;
height: 22px;
float: right;
}
.postmetadata-text {
color: #bdc4d9;
font-family: verdana, arial, sans-serif;
font-size: 10px;
font-weight: bold;
margin-top: 1px;
}
.post {
font-family: verdana, arial, sans-serif;
font-size: 10px;
color: #000000;
float: right;
}
.entry {
margin-left: 187px;
}
#footer {
margin-left: 187px;
width: 554px;
}
.contentcol {
width: 554px;
}
#sidebar_fix {
background: url(images/side_bg.gif) repeat-y;
height: 100%;
}
#left_bg {
background: url(http://www.digitalsupremacy.com/forums/ds_01/alt_index/pagebg_l.gif) repeat-y;
float:left;
}
#right_bg {
background: url(http://www.digitalsupremacy.com/forums/ds_01/alt_index/pagebg_r.gif) repeat-y;
float:right;
}
#sidebar ul li ul li {
color: #666666;
list-style-type: square;
list-style-image: none;
}
.side_exp {
background: url(images/side_bg.gif) repeat-y;
}
.categories {
float: left;
margin: 0;
}
I'm trying to build an example layout that I plan to use in a website. My goal is simple, I want a content section to grow as the the content gets bigger and place a footer after that division that is as wide as the page. Here's the code I'm currently using: (the problem I'm having right now is that the footer section is rendering at the top.. How can I get this to be placed at the bottom of the page, after the content section?) Help me please <html> <head> <title>TESTING 1 2 3</title> <style type="text/css"> <!-- body { margin: 0px; padding: 0px; } #mrbig { background: #f0f; width: 800px; } #header { position: absolute; background: #0f0; width: 800px; height: 100px; } #leftcol { position: absolute; background: #f00; top: 100px; width: 150px; height: 500px; } #content { background: #fff; position: absolute; float: left; width: 650px; top: 100px; left: 175px; height: 500px; } #footer { position: relative; left:111px; background: #00f; width: 800px; height: 100px; } --> </style> </head> <body> <div id="mrbig"> <div id="header">Header Section</div> <div id="leftcol">Left Section</div> <div id="content">Content SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent Section Content SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent Section</div> </div> <div id="footer">Footer Section</div> </body> </html> I have a table with 680px in width & trying to fit my img into the table. I'v tested it both in 1024x768 & 1280x1024. But it just doesn work. When i position it to match my 1024x768, it'll look bad at 1280x1024.. here is my positioning code : img.one{ position:absolute; top:325px; left:550px; } why is that so... Hi all, I'm trying to get the two <ul> tags in div#header to sit on top of each other (horizontally), and for both of them to sit next to the <h1> title tag. The problem is that the second <ul> floats left underneath the <h1>. Any suggestions? Relevant HTML: Code: <div id="header"> <h1>Athena:</h1> <ul> <li><a href="library.php" alt="Browse Library">Library</a></li> <li><a href="project.php" alt="Browse Projects">Projects</a></li> <li><a href="personal.php" alt="Browse Personal Section">Personal</a></li> </ul> <br /> <ul> <li><a href="" alt="">Subhead1</a></li> <li><a href="" alt="">Subhead2</a></li> </ul> </div> Relevant CSS: css Code: Original - css Code #header { width:98%; margin:0px auto; background-color: #2E5C8A; border:solid #2E5C8A; 2px; border-width: 0px 5px 0px 5px; color:#fff; padding:5px; } #header a { text-decoration:none; color:#fff; } #header a:visited { text-decoration:none; color:#fff; } #header h1 { font-size: 3em; margin: 0px; display:inline; } #header ul { list-style-type: none; display: inline; } #header li { vertical-align: top; display: inline; padding: 0px 5px 0px 5px; margin: 0px 5px 0px 5px; border:solid #49496e 1px; background-color:#8699ad; font-size: 1em; font-weight: bold; } #header ul li:before { content: "\2606 \0020"; } #header li:hover { border:solid #fff 1px; background:#49496e; } #header ul li:hover:before { content: "\2605 \0020"; }
Also - is there anyway of getting the <li>'s to be the same width? Thanks heaps, --Simon |
|||||||