|
CSS - Right Side Content Appearing At Bottom Instead Of Top
Hi there,
I have 2 main divs.. one left for navigation and one to the right for the content. For some reason, the right hand side one is displaying content at the bottom where the left div's content ends, instead of at the top. This is my code. Any help on what I have done wrong would be great! PHP Code: #main_left{ width: 238px; float:left; background-color: #EBE1D1;} #main_left_inside{ padding: 10px;} #main_content{ margin-left: 248px; background-color: #ffffff;} #main_content_inside{ padding: 10px;} Similar TutorialsThere is a video player and a playlist at the following address. I am trying to move the playlist on the right side of the video player. Very stubborn, couldnt move it so some help will be appreciated. http://www.pangeaadvisors.org Hello all, On a friend's site: tincansingingtelegram dot com/who-are-we the horizontal sidebar keeps appearing. It doesn't appear on the homepage, but on all the subpages. Thanks for any help! Hi, I'm racking my brain here and I can't figure out what I'm doing wrong. First of all, I have a "sidebar" div that is being pushed outside of the page, even though there is plenty of room for it in the content. http://65.175.116.253/design/demo.html I have included the CSS below, followed by the HTML and you can get the rar file for the entire layout at the following link http://65.175.116.253/design/design.rar I've been racking my head! All I want is the side bar, the two boxes way off to the right, to be floated to the right hand side of the screen, contained within the page. I can't figure out what I'm doing wrong. Can somebody look at this and tell me what I am doing wrong? I will paypal $5 to who ever figures it out.. Code: /*--- Generic Styles ---*/
body
{
background: #e3edc2; color: #333;
font: .8em, Arial, verdana, sans-serif;
margin: 0;
padding:0px;
}
#main {width:840px; margin:18px auto 0 auto; _text-align:left;}
a
{
color: #686397;
}
a img
{
border: 0px none;
}
p
{
margin: 0 0 1em;
}
.smallboldtext
{
font-family: verdana, helvetica, sans-serif;
color: #686397;
font-size: .7em;
font-weight: bold;
}
.mediumtext
{
font-family: verdana, helvetica, sans-serif;
color: #686397;
font-size: .9em;
}
.mediumboldtext
{
font-family: verdana, helvetica, sans-serif;
color: #686397;
font-size: .9em;
font-weight: bold;
}
.largetext
{
font-family: verdana, helvetica, sans-serif;
color: #686397;
font-size: 1.5em;
}
/*--- Header Styles ---*/
#header
{
margin-bottom: 1.75em;
padding-top: 1px;
background: #abd240;
}
#navbar
{
margin: 0;
padding: 0.5em 3em;
background: #686397;
color: #fff;
}
#navbar li
{
display: inline;
margin-right: 0.5em; padding-right: 0.75em;
border-right: 1px solid #99c;
font-weight: bold;
}
#navbar li.last
{
border: 0px none;
}
#navbar a
{
color: #d4ec84;
text-decoration: none;
}
#today
{
text-align: right;
margin-top: -1.66em; padding: 0 2em 0 0;
color: #fff;
line-height: 1;
}
/*--- Content Styles ---*/
#content
{
float: left;
padding: 0 20em 4em 3em;
width: 100%;
}
#content h1
{
background: #fff; color: #686397;
font-size: 1.5em;
margin: 0 33% 1.25em -2em; padding: 0.4em 2em;
}
#content h1 b
{
color: #b0d742;
}
#content h2
{
margin: 0.5em 0; padding-bottom: 0.25em;
border-bottom: 1px solid #b0d742;
font-size: 1.5em;
}
/*--- Content Styles ---*/
table.basic
{
border: 0px;
width: 100%;
border-collapse: collapse;
}
table.basicborder
{
border: 2px solid #b0d742;
width: 505px;
border-collapse: collapse;
}
table.mainsearch
{
border: 2px solid #b0d742;
width: 415px;
border-collapse: collapse;
}
/*--- Sidebar Styles ---*/
#sidebar
{
float: left;
width: 17em;
margin: 0 0 4em -18em; /* this creates a mathematical layout width of -1 */
}
#sidebar div h3{
background: #9b96ca;
}
#sidebar form_div
{
margin: 0; padding: 0.8em;
}
#sidebar div{
background: #3a3c2d; color: #fff;
padding: 0 1em 1em;
margin-top: 0.75em;
}
#sidebar div h3{
font-size: 1.25em;
margin: 0 -0.8em; padding: 0.4em 0.8em;
text-transform: lowercase;
}
#whatiscompany h4{
margin: 0 0 0.5em; padding: 0.5em 0;
border-bottom: 1px solid #fff;
font-weight: normal;
}
#whatiscompany p:first-line{
font-style: italic;
}
/*--- Footer Styles ---*/
#footer
{
clear: both;
padding: 1.5em 3em;
background: #a0c63a;
height: 15px;
}
#footer p
{
margin: .1em;
}
#footer a
{
color: #333;
text-decoration: underline;
}
------------------------------------------------------- Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>www.company.com/</title>
<link href="css.css" type="text/css" rel="stylesheet" media="screen">
<!--[if IE]>
<style type="text/css">
#today{
text-align: right;
margin-top: 0;
margin-bottom: 0;
padding: 0 2em 0 0;
position: relative;
top: -1.66em;
color: #fff;
font-weight: bold;
line-height: 1;
}
</style>
<![endif]-->
</head>
<body>
<!-- mockup, adding borders | markup, using float for layout (or the appropriate section) -->
<div id="header">
<img src="logo.jpg" alt="a link to the home page" width="231" height="52">
<ul id="navbar">
<li class="first">
<a href="http://www.company.com">nav link</a></li>
<li><a href="http://www.company.com">nav link</a></li>
<li><a href="http://www.company.com">nav link</a></li>
<li><a href="http://www.company.com">nav link</a></li>
<li><a href="http://www.company.com">nav link</a></li>
<li><a href="http://www.company.com">nav link</a></li>
<li><a href="http://www.company.com">nav link</a></li>
<li class="last"><a href="http://www.company.com">nav link</a></li>
</ul>
<p id="today">date here</p>
</div> <!-- end div id header -->
<div id="content">
<h1><b>home:</b> search</h1>
<img src="flash.jpg"><br>
<h2>quick search</h2>
<table class="mainsearch">
<tr>
<td>
<FORM action="http://company.com/" method="post">
<input type="radio" name="quicksearch"><span class="smallboldtext">title</span>
<br>
<input type="radio" name="quicksearch"><span class="smallboldtext">title</span>
<br>
<input type="radio" name="quicksearch"><span class="smallboldtext">title</span>
<br>
<input type="radio" name="quicksearch"><span class="smallboldtext">title</span>
<br>
<input type="radio" name="quicksearch"><span class="smallboldtext">title</span>
<br>
<input type="radio" name="quicksearch"><span class="smallboldtext">title</span>
<br>
<input type="radio" name="quicksearch"><span class="smallboldtext">title</span>
<br>
</td>
<td width="285" valign="top">
<br>
<span class="smallboldtext">Keywords - </span><input type="Text" name="keywords" size="25">
<br>
<span class="smallboldtext">Within - </span><select name="distance">
<option value="50"
>
50
</option>
<option value="Any"
>
Any
</option>
<option value="1"
>
1
</option>
<option value="5"
>
5
</option>
</select>
<select name="distance_measure">
<option value="Miles"
>
Miles
</option>
<option value="kilometers"
>
Kilometers
</option>
</select> <span class="smallboldtext">of</span>
<br>
<span class="smallboldtext">City & State or Zip - </span> <input type="Text" name="zip" size="15">
<br>
<center>
<input type="submit" name="search" value="search">
</center>
</FORM>
</td>
</tr>
</table>
</div> <!-- end div id content -->
<div id="sidebar">
<div id="whatiscompany">
<h3>what is company.com?</h3>
<h4>www.company.com</h4>
<p> This is simply example text that goes here. Sample example text is in this place. You can read the sample text here it is.
<br>
</p>
</div> <!-- end div id whatistea -->
<div id="loginsidebar">
<h3>login</h3>
<br>
<form action="http://company.com" method="post" name="login">
<p>
Username - <INPUT type="Text" name="member_user_name" size="12">
<br>
Password - <INPUT type="password" name="member_password_a" size="12">
<INPUT type="submit" name="submit" value="login" >
</FORM>
<br>
<a href="http://company.com">Forget Your Password?</a>
<br>
<br>
</p>
</div> <!-- end div id loginsidebar -->
</div> <!-- end div id sidebar -->
<div id="footer">
<p>
- <a href="http://company.com">nav link</a>
- <a href="http://company.com">nav link</a>
- <a href="http://company.com">nav link</a>
- <a href="http://company.com">nav link</a>
- <a href="http://company.com">nav link</a>
- <a href="http://company.com">nav link</a>
- <a href="http://company.com">nav link</a>
- <a href="http://company.com">nav link</a>
- <a href="http://company.com">nav link</a>
- <a href="http://company.com">nav link</a>
- <a href="http://company.com">nav link</a>
-
</p>
</div> <!-- end div id footer -->
</body>
</html>
I'm working on a really simple theme. You can see the progress here. this is a table-less theme. trouble that I'm having is that I cannot get the content to center. It is all floated left. Now, I'm intentionally floating the left column to the left, but that's the only thing (and changing that didn't fix the problem either). So I'm hoping one of you css gurus will have some suggestions. (link to style.css file) Thanks in Advance! I now am fixing it with tables.... thanks for the forum! [IMG]cater-express dot com/IE7.png[/IMG] An image of IE7 and IE6 of my newly relaunched website - I actively have: html,body { text-align: center } #content { width: 400px; margin: 0 auto; text-align: left } </style> __________ it does not work... please help bring content up to top in "content" ______ I wish I could just do all the cooking and not the coding! Thanks for any help! So I have a 3-column layout in CSS and I'd like to have the content in the right-most column to be align to the bottom, like so: Code: | LEFT | MIDDLE | | | (top) | | | | | | | | | | | | | | | | | | | | | | RIGHT | | | | (bottom) | Any idea how to do it? Thx! Hello. I'm having an impossible time trying to get my page to behave properly. First, here's a link to the testing site: http://www.tromadance.com/hoffman_test/index.php The black left/right borders are supposed to go down to the bottom of the page (as long or short as that may be, depending on the content). Whichever is longer between the left side content or the right side content should be in charge of "stretching" the page. There is also a footer that should remain at the bottom, which is not even being shown... I added borders to some of the divs to try to see what was going on. It looks like a mess, but I'm not sure what i am doing wrong!... Here is the CSS, followed by the HTML... CSS: Code: /* CSS Document */
html, body {
background-color: #8A1410;
font-family: Geneva, Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
color: #000;
height: 100%;
}
p {
font-size: .8em;
}
#container {
background: #EC1D25;
width: 800px;
margin: auto;
padding: 0px;
text-align: left;
border-left: 2px solid #000;
border-right: 2px solid #000;
overflow: hidden;
height: 100%;
}
#header {
background-color: #EC1D25;
width: 800px;
height: 177px;
background: url(../images/header_top.jpg) top center no-repeat;
margin-bottom: 0px;
padding-bottom: 0px;
margin-top: 0px;
}
#nav {
background-color: #000;
color: #FFF;
text-align: center;
width: 100%;
height: 50px;
}
#nav p {
margin-top: 30px;
}
#sidebar {
background-color: #EC1D25;
width: 270px;
min-height: 86px;
float: left;
margin-top: 20px;
text-align: center;
margin-left: 10px;
border: 1px solid #999;
}
#donate {
background-color: #000;
width: 270px;
height: 500px;
}
#maincontent {
background-color: #7AD3F7;
margin-top: 20px;
margin-right: 10px;
height: 100%;
width: 500px;
float: right;
border: 1px solid #66F;
}
#spacer {
clear: both;
border: 1px solid #FF0;
}
#footer {
font-size: .7em;
text-align: center;
height: 20px;
margin-top: 10px;
}
HTML: 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" />
<title>TROMADANCE!</title>
<link href="includes/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="nav"><?php include("includes/nav.php") ?></div>
<div id="sidebar">
<object width="270" height="215"><param name="movie" value="http://www.youtube.com/v/zQR7sDpGegw&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/zQR7sDpGegw&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="270" height="215"></embed>
</object>
Tromadance 10th Anniversary PSA
<p>
<div id="donate">
</div>
</p><br />
<p>asdsadsa</p>
</div>
<div id="maincontent">
<p>SAMPLE TEXT</p>
</div>
<div id="spacer"></div>
<div id="footer"><?php include("includes/footer.php") ?></div>
</div>
</body>
</html>
Thank you in advance for any help that can be offered!!!... I want a footer that's at the bottom of the page. If there isn't much content that means it should be at the bottom of the screen and there will be no scrollbars. If there is tons of content then it should show after the content and only be visible if the user scrolls to the bottom of the page. This code shows what I'm after and the problem I'm hitting. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>title</title>
<style type="text/css">
body, html {margin: 0; padding: 0; height: 100%}
#top {background: red; position: absolute; top: 0px; left: 0px; height: 50px; right: 0px;}
#content {background: orange; margin: 50px 200px;}
#leftNav {position: absolute; left: 0px; top: 50px; bottom: 50px; width: 200px; background: yellow}
#rightNav {position: absolute; right: 0px; top: 50px; bottom: 50px; width: 200px; background: cyan}
#bottom {background:green; position: absolute; bottom: 0px; left: 0px; height: 50px; right: 0px;}
</style>
</head>
<body>
<div id="content">
Content<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div id="leftNav">
LeftCol
</div>
<div id="rightNav">
rightNav
</div>
<div id="top">
I'm at the top.
</div>
<div id="bottom">
I'm at the bottom.
</div>
</body>
</html>
Appreciate your thoughts. Greetings, I have a 3 column layout with a header, nav bar, content space and footer on the center column, making the center column have 4 rows. The content div's height is set to auto and it's overflow to auto so that when the browser is maximized on higher resolutions it will expand and contain the text without a scrollbar. alternatively it will give a scroll bar if the content div is shrunk below 300px. however the auto height on the content div is causing it to take up more room than necessary. if the window is shrunken down, the content text will leak out over the footer bar and beyond. Before i post code does anyone have any suggestions on what i should be looking for? If code is wanted lemme know. Hi all, this is my first post and hope I get help in a hear-tearing problem that I face at this link: (URL address blocked : See forum rules) ie show the complete page fine but firefox obscure the bottom content, no need for more explanation since it is obvious from looking at the page, I have the same problem when page content get much long as in the above link. any help would be greatly appreciated. sorry for my bad english Hello - I'm having trouble with the layout of a site I'm working on. Here's the site in question: http://www.americanidiotsband.com/ If you look at it in anything up to 1024x768, it's fine. But if you go higher than that (say, 1280x1024 resolution), then the main (black) part of the page goes only as far down as the content that is filling it. What SHOULD happen is that the black background should span all the way to the bottom, no matter how much content is inside it... Here is a link to the stylesheet that I made up: http://www.americanidiotsband.com/styles.css I'm sure I'm doing something wrong, and I'm hoping that someone could help me correct this. Thanks in advance for any help that can be offered!... Hello, My first CSS site was going fine; I was learning as I went and drawing from different resources. My code and CSS probably isn't very pretty ( I validated it, I know it needs to be cleaned up) but things were working. Then I went back and made some adjustments concerning the widths of my column divs. Now I find that Firefox is respecting the rightcolumn div (specifically: <div id="contentright">)but IE keeps kicking it to the bottom left. I've tried messing with the column lengths so everything fits accordingly as specified in the frame div width. Can anyone please take a look and offer a suggestion? thanks. http://www.brinjac.com/test/binnspark.html hi, I am fairly new to css and working on a website with a complete css layout for the first time, one I got from dreamweaver. I thought things were going great because I did all my testing in Firefox (like a good boy) but then I tried to test it in Internet Explorer 6 and alot if not all of my webpages have the text positioned at the bottom instead of the top of a page. Here is a link: http://www.jcstrategies.com/jeff/featured_listings.php CSS CODE ----------------------------------------------------------- /***********************************************/ /* emx_nav_left.css */ /* Use with template Halo_leftNav.html */ /***********************************************/ /***********************************************/ /* HTML tag styles */ /***********************************************/ body{ font-family: Arial,sans-serif; color: #333333; line-height: 1.166; margin: 0px; padding: 0px; background: #cccccc url(./images/bg_grad.jpg) fixed; } /******* hyperlink and anchor tag styles *******/ a:link, a:visited{ color: #005FA9; text-decoration: none; } a:hover{ text-decoration: underline; } /************** header tag styles **************/ h1{ font: bold 120% Arial,sans-serif; color: #334d55; margin: 0px; padding: 0px; } h2{ font: bold 114% Arial,sans-serif; color: #006699; margin: 0px; padding: 0px; } h3{ font: bold 100% Arial,sans-serif; color: #334d55; margin: 0px; padding: 0px; } h4{ font: 100% Arial,sans-serif; color: #333333; margin: 0px; padding: 0px; } h5{ font: 100% Arial,sans-serif; color: #334d55; margin: 0px; padding: 0px; } /*************** list tag styles ***************/ ul{ list-style-type: square; } ul ul{ list-style-type: disc; } ul ul ul{ list-style-type: none; } /********* form and related tag styles *********/ form { margin: 0; padding: 0; } label{ font: bold 1em Arial,sans-serif; color: #334d55; } input{ font-family: Arial,sans-serif; } /***********************************************/ /* Layout Divs */ /***********************************************/ #pagecell1{ position:absolute; top: 112px; left: 2%; right: 2%; width:95.6%; background-color: #ffffff; } #tl { position:absolute; top: -1px; left: -1px; margin: 0px; padding: 0px; z-index: 100; } #tr { position:absolute; top: -1px; right: -1px; margin: 0px; padding: 0px; z-index: 100; } #masthead{ position: absolute; top: 0px; left: 2%; right: 2%; width:95.6%; } #pageNav{ float: left; width:178px; padding: 0px; background-color: #F5f7f7; border-right: 1px solid #cccccc; border-bottom: 1px solid #cccccc; font: small Verdana,sans-serif; } #content{ padding: 5px 10px 5px 5px; margin:0px 0px 0px 179px; border-left: 1px solid #ccd2d2; } /***********************************************/ /* Component Divs */ /***********************************************/ #siteName{ margin: 0px; padding: 16px 0px 8px 0px; color: #ffffff; font-weight: normal; } /************** utility styles *****************/ #utility{ font: 75% Verdana,sans-serif; position: absolute; top: 16px; right: 0px; color: #919999; } #utility a{ color: #ffffff; } #utility a:hover{ text-decoration: underline; } /************** pageName styles ****************/ #pageName{ padding: 0px 0px 14px 10px; margin: 0px; border-bottom:1px solid #ccd2d2; } #pageName h2{ font: bold 175% Arial,sans-serif; color: #000000; margin:0px; padding: 0px; } #pageName img{ position: absolute; top: 0px; right: 6px; padding: 0px; margin: 0px; } /************* globalNav styles ****************/ #globalNav{ position: relative; width: 100%; min-width: 640px; height: 32px; color: #cccccc; padding: 0px; margin: 0px; background-image: url(./images/glbnav_background.gif); } #globalNav img{ margin-bottom: -4px; } #gnl { position: absolute; top: 0px; left:0px; } #gnr { position: absolute; top: 0px; right:0px; } #globalLink{ position: absolute; top: 6px; height: 22px; min-width: 640px; padding: 0px; margin: 0px; left: 10px; z-index: 100; } a.glink, a.glink:visited{ font-size: small; color: #000000; font-weight: bold; margin: 0px; padding: 2px 5px 4px 5px; border-right: 1px solid #8FB8BC; } a.glink:hover{ background-image: url(./images/glblnav_selected.gif); text-decoration: none; } .skipLinks {display: none;} /************ subglobalNav styles **************/ .subglobalNav{ position: absolute; top: 84px; left: 0px; /*width: 100%;*/ min-width: 640px; height: 20px; padding: 0px 0px 0px 10px; visibility: hidden; color: #ffffff; } .subglobalNav a:link, .subglobalNav a:visited { font-size: 80%; color: #ffffff; } .subglobalNav a:hover{ color: #cccccc; } /*************** search styles *****************/ #search{ position: absolute; top: 5px; right: 10px; z-index: 101; } #search input{ font-size: 70%; margin: 0px 0px 0px 10px; } #search a:link, #search a:visited { font-size: 80%; font-weight: bold; } #search a:hover{ margin: 0px; } /************* breadCrumb styles ***************/ #breadCrumb{ padding: 5px 0px 5px 10px; font: small Verdana,sans-serif; color: #AAAAAA; } #breadCrumb a{ color: #AAAAAA; } #breadCrumb a:hover{ color: #005FA9; text-decoration: underline; } /************** feature styles *****************/ .feature{ padding: 0px 0px 10px 10px; font-size: 80%; min-height: 200px; height: 200px; } html>body .feature {height: auto;} .feature h3{ font: bold 175% Arial,sans-serif; color: #000000; padding: 30px 0px 5px 0px; } .feature img{ float: left; padding: 0px 10px 0px 0px; } /*************** story styles ******************/ .story { padding: 10px 0px 0px 10px; font-size: 80%; } .story h3{ font: bold 125% Arial,sans-serif; color: #000000; } .story p { padding: 0px 0px 10px 0px; } .story a.capsule{ font: bold 1em Arial,sans-serif; color: #005FA9; display:block; padding-bottom: 5px; } .story a.capsule:hover{ text-decoration: underline; } td.storyLeft{ padding-right: 12px; } /************** siteInfo styles ****************/ #siteInfo{ clear: both; border-top: 1px solid #cccccc; font-size: small; color: #cccccc; padding: 10px 10px 10px 10px; margin-top: 0px; } #siteInfo img{ padding: 4px 4px 4px 0px; vertical-align: middle; } /************ sectionLinks styles **************/ #sectionLinks{ margin: 0px; padding: 0px; } #sectionLinks h3{ padding: 10px 0px 2px 10px; border-bottom: 1px solid #cccccc; } #sectionLinks a:link, #sectionLinks a:visited { display: block; border-top: 1px solid #ffffff; border-bottom: 1px solid #cccccc; background-image: url(./images/bg_nav.jpg); font-weight: bold; padding: 3px 0px 3px 10px; color: #21536A; } #sectionLinks a:hover{ border-top: 1px solid #cccccc; background-color: #DDEEFF; background-image: none; font-weight: bold; text-decoration: none; } /************* relatedLinks styles **************/ .relatedLinks{ margin: 0px; padding: 0px 0px 10px 10px; border-bottom: 1px solid #cccccc; } .relatedLinks h3{ padding: 10px 0px 2px 0px; } .relatedLinks a{ display: block; } /************* relatedLinks2 styles **************/ .relatedLinks2{ margin: 0px; padding: 10px 0px 10px 1px; border-bottom: 1px solid #cccccc; } .relatedLinks h3{ padding: 10px 0px 2px 0px; } .relatedLinks a{ display: block; } /**************** advert styles *****************/ #advert{ padding: 10px; } #advert img{ display: block; } /********************* end **********************/ ANY IDEAS???? Please take a look at this mumbo jumbo example: Testing page The objective is to adjust the images of the four round corners of a content rectangle. Now the problem is that the two bottom round corners are not showing properly in Firefox 1.0. They bleed outside the rectangle towards the bottom, with a few pixels. And no matter what I change or try, it won't work. Second, the corners don't look even close to right in Internet Explorer 6.0. Do you have any idea how to correct this thing? Thanks a lot for anyone taking the time to help and give tips. Hi Guys, I'm trying to create a footer for a web page. The content displayed will change dynamically from article to article that is posted. The footer is a simple div that has centered text stating "page posted by $membername on $date" What I want is if the article is not long enough to push the footer all the way to the bottom, that it would be fixed to the bottom of the screen (not the page). Is this possible? For instance, someone posts an article that is long enough that you would need to scroll down to see the entire page. The footer would be ok being placed just after the article. But if the article is very short, just like 1 paragraph.. the footer would show halfway up the page. Ideas? Hi, I'm working on a website for a church and we're near completion, but I'm having trouble getting the site to display properly in IE7 on Windows XP and a few other browsers according to browsershots.org. CSS and XHTML both validate at w3c.org. I've ripped this thing apart and put it back together with no luck. The really weird thing is the Home page looks fine, but in the rest of the pages the body content gets pushed below the left and right navigation bars. Is it a CSS float problem? Margins or paddings??? Home page: Looks OK in IE7, at least on my machine - http://www.stlukeslutheran.com/index_temp.php Ministry page: Content is pushed to bottom of page - http://www.stlukeslutheran.com/mini...ns_ministry.php The CSS files are at http://www.stlukeslutheran.com/css/main.css and http://www.stlukeslutheran.com/css/common.css. Would anyone be willing to take a look? Thanks in advance. Thanks for taking time to read my question. How do I position 3 pictures beside eachother with no spaces between them? (so they look like one continuous picture) eg: ______ |1|2|3| |_|_|_| instead of ________ |1||2||3| |_||_||_| Thanks, Brad Hi, I'm having a slight problem with my css. I want to display a comment with a number of images to the right of it. e.g "Excellent" plus 5 stars next to it (note: images of stars) so i tried this: Code: <div id = "commentText"> Excellent </div> <div id = "star"> </div> <div id = "star"> </div> <div id = "star"> </div> <div id = "commentText"> Fantastic </div> <div id = "star"> </div> <div id = "star"> </div> <div id = "star"> </div> <div id = "star"> </div> css Code:
#commentText
{
font-size: 100%;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
padding-left: 30px;
}
#star
{
display: inline;
height: 24px;
background-image: url(images/star.png);
background-repeat: no-repeat;
padding-left: 20px;
}
I currently have comment with 3 stars displayed underneath it - however they are only half being shown for some reason. Any help is appreciated to help me get the desired effect. Thanks! Alright, I run a joomla site and im working on making a 100% tableless xhtml compliant template. I'm very new at this so im trying my best to learn. I used the Lean version of skidoo's layout as the base and then added all the appropriate php tags needed to make it a joomla template. For the one part I need two modules to load right next to each other near the top of the page to mimic the table version of the Latest News and Popular Modules. I'll show you code snipits of how I did it. Code:
html:
<div id="contentColumn">
<div class="inside">
<!-- middle column content begin -->
<p class="blocktext">
<?php mosLoadModules( 'banner', -1 ); ?>
</p>
<div id="users">
<?php mosLoadModules ( 'user1' ); ?>
</div>
<div id="users">
<?php mosLoadModules ( 'user2' ); ?>
</div>
<p>
<div id="nofloat">
<?php mosLoadModules ( 'top' ); ?>
<?php mosMainBody(); ?>
<?php mosLoadModules ( 'bottom' ); ?>
</div>
css:
/*top users */
#users {
float:left;
width: 300px;
}
#nofloat {
float: none;
}
So anyways this does indeed put each div tag side by side but my problem is that I need the following PHP code ( <?php mosLoadModules ( 'top' ); ?> <?php mosMainBody(); ?> <?php mosLoadModules ( 'bottom' ); ?>) to return to the next line after the div's, but instead it jumps everything to the right and breaks the template. So I added the nofloat css and that fixed it and put the rest of the content below the side by side div's but now it doesn't work in FireFox. Now I tried padding-top and that worked in both browsers, but its not flexible as the side by side div modules are not always there and I don't want 200px of white space on the pages that don't show it. Also as a side note I tried putting <?php mosLoadModules ( 'user1' ); ?> and user2 into separate div tags that that floated left and right but it had the same outcome, so I stuck with one float left that seems to work the same. My question is what can I do to make this content show after the side by side div's and not beside it in both browsers? You can see what I mean by looking at this test site in both IE 6 and FireFox. http://www.wii-volution.com/testbed/ Thanks for any help you guys can give me! |
|||||||