|
CSS - Horizontal Sidebar Appearing On Subpages, Content Not Too Big
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! Similar TutorialsI need to center the contents of two divs in one of my sidebars. The page can be seen he http://dev.asbco.com I need to center the free quote image and also the tabbed section beneath it. Any help is greatly appreciated as I'm trying to launch this site by the end of the week. Thanks! Hello, I've found many threads on making your sidebar appear as if it is growing with tiling backgrounds, but my situation is a tad more unique. My project can be found he http://tinyurl.com/ygq22wa If you are on the home page and click "About Us", the content behaves as I want it. The problem is, I want the sidebar to grow with the content, but only underneath the links. I want the bolts image to always be at the lower left of the page, and the "middle" of the sidebar to grow (so that the links stay put, but the sidebar grows underneath to match the content div). That way, I won't have undesired empty space next to the content when the page grows more than the min-height I have defined for the sidebar. I've seen some Javascript solutions, but I really would like to accomplish this with CSS. Big thanks to anyone who can help. 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;} This is my first completely css site and I am having troubles with my main content areas and some other small minor things. My design requires that the sidebar be the same height as my content area. What do I need to do to get them the same heights. The main content area changes on each page so my sidebar needs to do the same. Here is the website. I guess I cannot post url's so I hope I made sense. Also an example of what the site is going to look is here. Once again cannot post urls. Also, I need help with lists. In the example image I have the lists side-by-side. Normally I would use a table for this. Is there a way to do this with css? Any help would greatly be appreciated. Thanks, Shaun I'd like to make a 2-column layout where each column fills the height of the container div, and the container div's height is determined by the longest div within it... this is getting a bit confusing, because I can't have one being determined by the other one with that one being determined by the first, if that makes sense? Any help would be greatly appreciated, thanks Hi all, I've got a horizontal menu that is working just fine in every browser but IE 6 and 7. In IE it's almost there, except that the submenus will only appear one level deep. The menu is created with nested lists. The :hover functionality is simulated via JavaScript for IE 6. The IE developer toolbar shows the 3rd level menu is correctly being changed to display: block when its parent is hovered, and the border the dev toolbar draws even puts it in the correct place, it just doesn't actually appear. You can find the page he http://www.perceptes.com/topdog/ The CSS and JS (uses jQuery) can be found he http://www.perceptes.com/topdog/css/screen.css http://www.perceptes.com/topdog/css/ie.css (loaded with a conditional comment) http://www.perceptes.com/topdog/js/tdps.js http://www.perceptes.com/topdog/js/ie.js (loaded with a conditonal comment) For a specific example of what I'm talking about, try hovering over the second item, Filters & Parts. This will give you another level with four choices. Each of those also has child elements, but when hovered over, the next level doesn't appear. Try it in something other than IE 6 or 7 to see how it's supposed to look. Thanks very much in advance! Hi, I have hit the "wall" in my knowledge of CSS while trying to implement a "flex-width-equal-height-sidebar-layout" style of layout as a skin/theme for a message board system and need some help. My trouble occurs when a direct link to the post is used (instead of following the menu navigation system) where the top menu information/links area (the area between the banner and the post) is chopped off... The relevant portion of the CSS seems to be the .col_wrap {margin-top: 10px; border: 0; overflow: hidden; float: left; width: 100%; position: relative; z-index: 10; clear: both;} portion of my CSS because if I take out the overflow:hidden declaration then the menu portion of the skin/theme/layout shows correctly but the sidebar the shows the part which should be hidden at the bottom and the footer completely vanishes from view! My apologies but this is the best I can do without having the ability to post pics or urls which could better explain what is wrong and frankly speaking I don't know how anyone here can help given my inability to show the problem but hopefully someone knows or has run into this problem before or can offer some resources that may be of assistance.... Thanks for taking the time to read my question. I have a <div id="theheader"> area at the top of my page. Below that I have another <div id="contentbox"> area to which I have applied a negative margin. It displays perfectly in Fire Fox (as you would expect) but in IE the <div id="contentbox"> with the negative margin slips behind the top <div id="theheader">. How can I get the page to display in both browsers the way FF does.? Thanks, Brad CSS Code: @charset "iso-8859-1";
body {
background-color: #435371;
margin: 0px;
}
#theheader {
width: 100%;
height: 150px;
background-color: #FFF3D5;
}
#navbox {
width: 12%;
height: 300px;
float: left;
background-color: #435371;
color: white;
line-height: 20px;
text-align: right;
padding-right: 8px;
padding-top: 10px;
margin-right: 40px;
}
#mainbox {
width: 100%;
float: left;
color: white;
background-color: #435371;
}
#contentbox {
width: 70%;
float: left;
background-color: white;
color: black;
margin-top: -125px;
border-style: solid;
border-width: 5px;
border-color: white;
}
#contentheaderbox {
background-color: #435371;
height: 40px;
padding: 3px;
color: white;
font-weight: bold;
font-size: 40px;
}
ul.nav {
list-style-type: none;
}
a.mainnav:link {
color: white;
text-decoration: none;
}
a.mainnav:visited {
color: aqua;
text-decoration: none;
}
a.mainnav:hover {
color: #FFFFCC;
text-decoration: underline;
}
a.mainnav:active {
color: green;
font-weight: bold;
text-decoration: none;
}
HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Lyndon and April Berg Construction and Finishing</title> <meta name="description" content="Welcome to Berg Construction and Finishing. This site has information about the company, type of work they do, and examples of past projects."> <meta name="keywords" content="residential, construction, interior, finishing, cement, concrete, framing, finished carpentry, national association of home builders, home, house, driveway, stamp, drywall, taping, cabinet, Winnipeg, Landmark, Manitoba, Canada"> <meta name="Revisit-After" content="7 Days" /> <meta name="Robots" content="index, follow" /> <link href="LABCSS.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="theheader">Sampson and Son</div> <div id="mainbox"> <div id="navbox"> <a class="mainnav" href="LAB.html">Framing<a><br /> <a class="mainnav" href="LAB.html">Cement<a><br /> <a class="mainnav" href="LAB.html">Drywall<a><br /> <a class="mainnav" href="LAB.html">Finished Carpentry<a><br /> <a class="mainnav" href="LAB.html">Brick and Tile<a><br /> <a class="mainnav" href="LAB.html">Taping<a><br /> </div> <div id="contentbox"> <div id="contentheaderbox">Home</div> <ol> <li>pictures of past jobs</li> <li>company credo</li> <li>company logo</li> <li>contact information</li> <li>are you a part of any associations?</li> <li>links to association sites (reciprocal)</li> <li>types of work Lyndon does</li> <li>experience - years in the industry, types of work done, training, certificates, tickets (like electrician)</li> <li>experience - years in the industry, types of work done, training, certificates, tickets (like electrician)</li> <li>experience - years in the industry, types of work done, training, certificates, tickets (like electrician)</li> <li>experience - years in the industry, types of work done, training, certificates, tickets (like electrician)</li> <li>experience - years in the industry, types of work done, training, certificates, tickets (like electrician)</li> </ol> </div> </div> </body> </html> I have three questions. 1. I saw some site which cut if there is a wide picture on side bars, like it just show the part which is on the sidebar box if its wider it cuts the extra part like this site if you see the first picture on the side bar its bigger but it cuts the extra part (-http://dot21.blogspot.com/-) , i want to know how to do it. 2. When some people add backgrounds they write background-repeat:no-repeat whats the function of that code??? and what can i write instead of no-repeat?? 3. whats the function of this code (background-position:bottom left) ??? If you couldnt answer some i hope you answer the ones you know. I am working on a site in CSS (first time! Yay!) I am having one problem: there is a sidebar, and I have used spacer images to make the coloring go to the very bottom of the page (the links stop above that). HOWEVER: this is for my screen size, and I am worried that when people view it with a different screen/window size, they will have scroll bars, even though there is no content at the bottom. Is there any attribute that will make it just go right to the bottom? Thanx. I'm trying to have a sidebar to the right of my page content that extends the entire height of the container it is in. Code: .sidebar {
padding: 0px;
margin: 0px;
width: 150px;
height: 100%;
color: #999999;
background: #ffffff;
float: right;
border-top: none;
border-left: 1px solid #cccccc;
border-bottom: none;
border-right: none;
}
This is the code I am currently using, but it is only as tall as the contents of the div. I need the border on the left to extend the length of the container it is in. Any ideas? Thanks, Scott As always IE woes... Anyway I have a design that I'm currently reworking into a css/div positioned site. I'm almost done with it, but the problem I'm having is that I have 2 floated divs below a horizontal navigation bar. In IE these two floated divs are not positioning themselves directly beneath the nav bar like they do in FF. There looks to be a 3px or so gap between them. I will post screenshots for a better idea of what I'm talking about. The HTML is: Code:
<div id="container">
<div id="top"></div>
<div id="brands">
....stuff here....
</div>
<div id="slides"></div> <!-- Slides and Vert_nav are not appearing directly below brands in IE-->
<div id="vert_nav">
....stuff here....
</div>
</div>
CSS Code:
/* CSS Document */
html, body {
background: #000000;
padding: 0px;
margin: 0px;
color: #FFFFFF;
}
#container {
width: 760px;
padding: 0px;
margin: 0px;
}
#top {
width: 760px;
height: 239px;
background: url(../images/top.jpg) top left no-repeat;
}
#brands {
width: 760px;
height: 31px;
}
#slides {
width: 667px;
height: 350px;
float: left;
background: url(../images/slides.jpg) top left no-repeat;
T}
#vert_nav {
width: 93px;
height: 350px;
float: right;
}
should.jpg is how the page is supposed to look. shouldnt.jpg is how it is appearing in IE. Hello, for some reason my CSS XHTML web site shows an Iframe in the body of the body. here's the link:http://www.caillouette.com/Utilitrek/eight/members/search_inquiry.php I've fiddled with the widths and container widths with no luck. Can anyone tell me why this is happening? thanks -Sean I'm playing around with web development after quite a lengthy break. I wrote the home page out by hand and had attempted to validate, fixed the errors and repeated until it validated at w3.org. When I copied the code from the first page and removed the right side of the table ( it was 3 columns on the main page but I only wanted 2 columns for the "template page" ). When viewing the template page in IE the table is off center ( all the way to the left ) and the links have unwarranted line spaces between them. I can understand removing a column might affect the alignment of a table ( or at least, this is not what I'm worried about so much ) but the alterations to the navigation pane are baffling. Specifically, because the nav pane is inserted by the same php script on both the working, and dysfunctional page. The css is also the same as they are coded to pull from the specified url copy and pasted from one doc to the other as opposed to mistakenly using a css in a different directory than the working one. The working page is: Code: <html> <head> <title> Under Construction </title> <link rel="stylesheet" type="text/css" href="css/pcss.css" id="css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <table class="main"> <tr class="header"> <th class="left"><div id="img"></div></th> <th class="center"><h1 class="MainHeading">Brendan Walton</h1></th> <th class="right"> </th> </tr> <tr class="body"> <td> <div id="navMenu"> <ul class="navlist"> <li> <div class="navhead" onclick='IsOpen(0)'>Literature</div> <ul class="navlist" id="sm0" style="display:block;"> <li><a href="" class="navlink">Guides</a></li> <li><a href="" class="navlink">Web Reference</a></li> <li><a href="" class="navlink">Desktop Reference</a></li> <li><a href="" class="navlink">External Reference</a></li> </ul> </li> <li> <div class="navhead" onclick='IsOpen(1)'>Fun and Random</div> <ul class="navlist" id="sm1" style="display:none;"> <li><a href="" class="navlink">Videos</a></li> <li><a href="" class="navlink">Images</a></li> <li><a href="" class="navlink">Music</a></li> <li><a href="" class="navlink">Random Page</a></li> </ul> </li> <li> <div class="navhead" onclick="IsOpen(2)">Code Base</div> <ul class="navlist" id="sm2" style="display:none;"> <li><a href="code_base_sample2.html" class="navlink">Java</a></li> <li><a href="code_base_sample2.html" class="navlink">C++</a></li> <li><a href="code_base_sample2.html" class="navlink">PHP</a></li> <li><a href="code_base_sample2.html" class="navlink">JavaScript</a></li> </ul> </li> <li><div class="navhead" onclick="IsOpen(3)">General</div> <ul class="navlist" id="sm3" style="display:none;"> <li><a href="" class="navlink">About Us</a></li> <li><a href="" class="navlink">Don't Like the Look?</a></li> <li><a href="" class="navlink">Community</a></li> <li><a href="" class="navlink">Site Map</a></li> </ul> </li> </ul> </div> <div class="navhead" style="height:150px;"><img src="images/stats.jpg" alt="TempStats" /></div> <script type="text/javascript" src="javascript/menuwork.js"></script> </td> <td> <h4 class="heading">Coming Soon!!</h4> <hr class="pagebreak" /> <p class="cblock"> This website will eventually have content, for now, just enjoy the pretty colors and the fancy, interactive menu to the left...</p> <h4 class="heading">Update: April 6, 2010</h4> <hr class="pagebreak" /> <p class="cblock"> I have changed the navigation to the left to reflect the content the site will eventually house. Additionally I have begun styling how the codebase will eventually display it's information. To see a sample of the code output simply click any of the codebase links to the left.</p> <p class="cblock"> On a personal note, it has recently come to my attention that Dom's birthday was actually the second of April, not the fourth. I apologize for the tardy wishes. </p> <h4 class="heading">Update: April 4, 2010</h4> <hr class="pagebreak" /> <p class="cblock"> Still working on the style for the website, It's coming along, albeit slowly... Also, even though you're never going to see this, Happy birthday Dom 8-)</p> </td> <td><img src="images/Brendan.jpg" alt="Brendan" id="portrait" /> <hr style="width:150px;" /> <p class="iblock"> "Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live." - Martin Golding"</p> <hr style="width:150px;" /> <a href="aboutus.php"> About Us </a> </td> </tr> <tr > <td> </td> <td> <!-- footer removed for containing urls --> </td> <td> </td> </tr> </table> </body> </html> The dysfunctional page is: Code: <!-- XHTML 1.1 --> <!-- Document Start --> <html> <!-- Head --> <head> <!-- Title --> <title> </title> <!-- Style Sheet --> <link rel="stylesheet" type="text/css" href="css/pcss.css" id="css" /> <!-- Charset UTF-8 --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- PHP Includes --> </head> <!-- End Includes --> <!-- Body --> <body> <!-- Main Table --> <table class="main"> <!-- First Row - Header --> <tr class="header"> <!-- Start Banner --> <th class="left"><div id="img"></div></th> <th class="center"><h1 class="MainHeading">Brendan Walton</h1></th> <!-- End Banner --> </tr> <!-- End First Row --> <!-- Second Row - Content --> <tr class="body"> <td> <div id="navMenu"> <ul class="navlist"> <li> <div class="navhead" onclick='IsOpen(0)'>Literature</div> <ul class="navlist" id="sm0" style="display:block;"> <li><a href="" class="navlink">Guides</a></li> <li><a href="" class="navlink">Web Reference</a></li> <li><a href="" class="navlink">Desktop Reference</a></li> <li><a href="" class="navlink">External Reference</a></li> </ul> </li> <li> <div class="navhead" onclick='IsOpen(1)'>Fun and Random</div> <ul class="navlist" id="sm1" style="display:none;"> <li><a href="" class="navlink">Videos</a></li> <li><a href="" class="navlink">Images</a></li> <li><a href="" class="navlink">Music</a></li> <li><a href="" class="navlink">Random Page</a></li> </ul> </li> <li> <div class="navhead" onclick="IsOpen(2)">Code Base</div> <ul class="navlist" id="sm2" style="display:none;"> <li><a href="code_base_sample2.html" class="navlink">Java</a></li> <li><a href="code_base_sample2.html" class="navlink">C++</a></li> <li><a href="code_base_sample2.html" class="navlink">PHP</a></li> <li><a href="code_base_sample2.html" class="navlink">JavaScript</a></li> </ul> </li> <li><div class="navhead" onclick="IsOpen(3)">General</div> <ul class="navlist" id="sm3" style="display:none;"> <li><a href="" class="navlink">About Us</a></li> <li><a href="" class="navlink">Don't Like the Look?</a></li> <li><a href="" class="navlink">Community</a></li> <li><a href="" class="navlink">Site Map</a></li> </ul> </li> </ul> </div> <div class="navhead" style="height:150px;"><img src="images/stats.jpg" alt="TempStats" /></div> <script type="text/javascript" src="javascript/menuwork.js"></script> </td> <td> </td> </tr> <!-- End Second Row --> <!-- Third Row - Footer --> <tr> <td> </td> <td> <!-- footer removed for containing urls --> </td> </tr> <!-- End Third Row --> </table> <!-- End Table --> </body> <!-- End Body --> </html> <!-- End Doc --> The css is: Code:
body
{
color:#333333;
background-color:#FFFFFF;
margin:0px;
padding:0px;
}
hr.pagebreak
{
width:450px;
color:#550072;
}
.subHeading
{
color:#8A00B8;
font-size:18px;
}
ul.navlist
{
display:inline;
list-style-type:none;
margin:0px;
padding:0px;
}
a.navlink:link
{
color:#FFFFFF;
background-color:#550072;
display:block;
text-align:right;
text-decoration:none;
font-weight:bold;
margin:0px;
padding-right:2px;
}
a.navlink:visited
{
color:#FFFFFF;
background-color:#550072;
display:block;
text-align:right;
text-decoration:none;
font-weight:bold;
margin:0px;
padding-right:2px;
}
a.navlink:hover
{
color:#FFFFFF;
background-color:#8A00B8;
text-decoration:none;
margin:0px;
padding-right:2px;
}
tr
{
vertical-align:top;
}
table
{
margin-left:auto;
margin-right:auto;
margin-bottom:0;
margin-top:0;
}
table.main
{
background-color:#FFFFFF;
}
th.left
{
width:150px;
}
th.center
{
width:500px;
}
th.right
{
width:150px;
}
a.navhead:link
{
display:block;
text-decoration:none;
text-align:left;
color:#550072;
font-weight:bold;
border-style:groove;
margin:0px;
padding:0px;
}
a.navhead:visited
{
display:block;
text-decoration:none;
text-align:left;
color:#550072;
font-weight:bold;
border-style:groove;
margin:0px;
padding:0px;
}
div.navhead
{
display:block;
text-decoration:none;
text-align:left;
color:#550072;
font-weight:bold;
border-style:groove;
margin:0px;
padding:0px;
}
h4.heading
{
display:block;
margin:0px;
padding-right:30px;
color:#550072;
text-indent:15px;
text-align:right;
font-size:24px;
}
img
{
display:block;
margin:0;
padding:0;
}
p.cblock
{
display:block;
text-indent:15px;
padding-left:10px;
width:475px;
}
p.fblock
{
display:block;
text-indent:15px;
padding-left:10px;
width:475px;
text-align:center;
}
.footer
{
text-align:center;
}
#navMenu
{
height:300px;
}
h1.MainHeading
{
font-size:50px;
color:#550072;
text-align:left;
}
#img
{
background-image:url("../images/purple-150x150-clear.jpg");
background-repeat:no-repeat;
height:150px;
width:150px;
}
img.cssscriptimg
{
display:inline;
}
#portrait
{
width:150px;
}
p.iblock
{
display:block;
text-indent:15px;
padding-left:10px;
width:150px;
}
The navigation script is below: PHP Code: <?php // This is a simple script to insert the navigation pane into every page function echoNav () { // color changer //echo "<img class=\"cssscriptimg\" src=\"images/purple.jpg\" alt=\"purple\" onclick=\"LoadCss(\"purple\")\" />"; //echo "<img class=\"cssscriptimg\" src=\"images/red.jpg\" alt=\"red\" onclick=\"LoadCss(\"red\")\ />"; //echo "<img class=\"cssscriptimg\" src=\"images/green.jpg\" alt=\"green\" onclick=\"LoadCss(\"green\")\" />"; // navMenu devision echo "<div id=\"navMenu\">\n"; // Section List echo "<ul class=\"navlist\">\n"; // First section echo "<li>\n"; echo "<div class=\"navhead\" onclick='IsOpen(0)'>Literature</div>\n"; // First link list echo "<ul class=\"navlist\" id=\"sm0\" style=\"display:block;\">\n"; echo "<li><a href=\"\" class=\"navlink\">Guides</a></li>\n"; echo "<li><a href=\"\" class=\"navlink\">Web Reference</a></li>\n"; echo "<li><a href=\"\" class=\"navlink\">Desktop Reference</a></li>\n"; echo "<li><a href=\"\" class=\"navlink\">External Reference</a></li>\n"; echo "</ul>\n"; // End first section echo "</li>\n"; // Second Section echo "<li>\n"; echo "<div class=\"navhead\" onclick='IsOpen(1)'>Fun and Random</div>\n"; echo "<ul class=\"navlist\" id=\"sm1\" style=\"display:none;\">\n"; echo "<li><a href=\"\" class=\"navlink\">Videos</a></li>\n"; echo "<li><a href=\"\" class=\"navlink\">Images</a></li>\n"; echo "<li><a href=\"\" class=\"navlink\">Music</a></li>\n"; echo "<li><a href=\"\" class=\"navlink\">Random Page</a></li>\n"; echo "</ul>\n"; echo "</li>\n"; // End Second Section // Third Section echo "<li>\n"; echo "<div class=\"navhead\" onclick=\"IsOpen(2)\">Code Base</div>\n"; echo "<ul class=\"navlist\" id=\"sm2\" style=\"display:none;\">\n"; echo "<li><a href=\"code_base_sample2.html\" class=\"navlink\">Java</a></li>\n"; echo "<li><a href=\"code_base_sample2.html\" class=\"navlink\">C++</a></li>\n"; echo "<li><a href=\"code_base_sample2.html\" class=\"navlink\">PHP</a></li>\n"; echo "<li><a href=\"code_base_sample2.html\" class=\"navlink\">JavaScript</a></li>\n"; echo "</ul>\n"; echo "</li>\n"; // End Third Section // Fourth Section echo "<li>"; echo "<div class=\"navhead\" onclick=\"IsOpen(3)\">General</div>\n"; echo "<ul class=\"navlist\" id=\"sm3\" style=\"display:none;\">\n"; echo "<li><a href=\"\" class=\"navlink\">About Us</a></li>\n"; echo "<li><a href=\"\" class=\"navlink\">Don't Like the Look?</a></li>\n"; echo "<li><a href=\"\" class=\"navlink\">Community</a></li>\n"; echo "<li><a href=\"\" class=\"navlink\">Site Map</a></li>\n"; echo "</ul>\n"; echo "</li>\n"; // End Fourth Section // End Section List echo "</ul>\n"; // End navMenu echo "</div>\n"; // Stats echo "<div class=\"navhead\" style=\"height:150px;\"><img src=\"images/stats.jpg\" alt=\"TempStats\" /></div>\n"; // Scripts echo "<script type=\"text/javascript\" src=\"javascript/menuwork.js\"></script>\n"; // echo "<script type=\"text/javascript\" src=\"javascript/LoadCss.js\"></script>\n"; } ?> Note: I apologize for only pasting the HTML, this is the HTML as seen by IE after scripts have been run. I would have put links but I am a new user and that appears to be restricted. Removed direct URL access to the javascripts, images, and doctypes, as a result of being a new user as well, in the actual source they are accessed by a URL to ensure that it is compatible no matter which directory the functions are called within. That being said, the javascript was never a problem, even with the display issue, the javascript functioned as expected. Any help would be very appreciated 8-) example, look in middle of page (blank space) it is supposed to be in the middle, but instead there is a blank space. no, the ad is not new, over 3 months old. i changed something and forget what (a while ago), now i just noticed this. heres the code: php Code: Original - php Code $i = 0; $gamesperpage = 50; $adplaced = false; // display game boxes $a = 2; foreach ($games as $game) { display_gamebox('float='.$a.'&display=rating', $game); if($a == 2) $a = 1; else $a++; if(!$adplaced && $i >= count($games)/2 && $a == 2) { echo ' <div class="clearboth clearafter aligncenter"> <script type="text/javascript"> <!--google_ad_client = "pub-5687621631516277"; /* 468x60, created 3/18/08 */ google_ad_slot = "1797650152"; google_ad_width = 468; google_ad_height = 60; //--> </script> <script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div>'; $adplaced = true; } $i++; } // end of foreach game echo " <div class='clearboth'><hr></div> "; $i = 0; I have a div called #Nav and inside it I have created a horizontal list. The issue is unless I set the height of the Nav div to like 40px the text shows up below the div OR the entire Div gets shifted down. Its like there is a margin or padding somewhere by default that i have not unset. Code:
<div id="header">
<div id="wrapper">
<div id="navcol1"></div>
<div id="navcol2">Insert List with Links </div>
</div>
</div>
<div id="nav">
<center>
<ul class="nav">
<li class="nav"><a href="#home" class="nav">XRPpro</a></li>
<li class="nav"><a href="#home" class="nav">X-Ray Equipment</a></li>
<li class="nav"><a href="#home" class="nav">QuickSOAP Touchnotes</a></li>
<li class="nav"><a href="#home" class="nav">Online Courses</a></li>
<li class="nav"><a href="#home" class="nav">Chiro Marketing</a></li>
<li class="nav"><a href="#home" class="nav">Bohnology</a></li>
</ul>
</center>
</div>
Code:
#header {
width:100%;
height:160px;
background-image:url(Images/header_background.jpg);
margin-bottom:0px;
}
#nav {
width:100%;
background-color:#343434;
}
ul.nav {
list-style-type: none;
}
li.nav {
display: inline;
margin-right:15px;
font:"Century Gothic", Verdana, Geneva, sans-serif;
font-size:12px;
}
Hello everyone. I am working in wordpress trying to make a web site. I am pretty new to wordpress and i have basic CSS and HTML knowledge so i need some help with this. The website: Code: http://sitesuperhostdemo.com/m2/ 1. The #sidebar-1-wrap. The problem i am having is the sidebar. As you can see on the page the sidebar (#sidebar-1-wrap) is positioned under the content but i would want it to stand beside the content (#home-content). 2.The #content-sidebar-wrap. I didnt add this container it is built into wordpress but the problem is that anything i add in wordpress -> pages -> Home page is for some reason placed inside the #content-sidebar-wrap but i have no idea why. The #content-sidebar-wrap is streching my page down because it contains the sidebar but starts at the top of the default wordpress content and i am clueless as to how i can change it so it doesent include all the content i place on the page. I would like it to only contain #sidebar-1-wrap and if i am correct i assume i can then place the sidebar next to the content and stop the div from extending my page. 3. The sidebar position. I can for example set the following code to the #sidebar-1-wrap: Code: .home_page #sidebar-1-wrap {
position: relative;
top: -615px;
left: 40px;
}
but there must be a better way. Also doing this doesent change the #content-sidebar-wrap. It still extends the page down as if the sidebar is still under the content. This would maybe work if i knew how to change the content so it isnt inside #content-sidebar-wrap but i see no way of doing it. Someone help please before i blow my brains out. If anyone needs clarification on anything lmk and ill clarify. Hello, this is my first time posting here. I am having a problem with a CSS sidebar. You can view the page at this URL: http://approg.msu.edu/david/ccsac/index2.htm. For the life of me, I cannot get the sidebar to automatically extend to the length of the page. Obviously, it's not much of an issue at the URL I listed, but it makes a bigger difference when there is a lot of content on the page. I'm sure the solution is simple, I just need to be pointed in the right direction. Thanks. Here's the main site: http: // anomalyrecords . net / index . html Here's the sto http: // anomalyrecords . net / catalog I am using a Zencart embedded template to wrap the main site design around Zencart.. This is working perfectly with a small remaining issue.. I am trying to synchronize the content placement of the sidebar items between Zen Cart and the rest of the site pages.. There is an ever so slight "shift" of the sidebar elements when you toggle bewteen the site pages and the store.. I've done a lot of tweaking and I'm fairly close, but I am at a COMPLETE loss how to put this to bed once and for all. I am hoping one of the CSS gurus here will see what I am clearly missing and guide me back to the light.. i have created a new model for a 3 column layout, (left sidebar, main content, right sidebar) i used yui 3.0 index.php page as an example to float the main column right. this is designed to put the main column to static so that it is liquid, with a min width. im not working with a liquid layout however, so some adjustments are needing to be made. my site is 950 pixels wide. my sidebars are about 175 pixels each, when used. i have 2 classes that i append to the main column style depending on wether a left sidebar will be used or not. so when i set the #mainColumn for class .marginForLeftNav then it will accomodate for the left nav bar to pop up into place. if no left sidebar, then i use #mainColumn . marginForNoLeftNav class. The problem i am having is trying to accomodate the right sidebar, which will always be used. my requirements a 1) that the side bar html code falls below the main column code on the html page. so essentially i need to leave room in teh mainColumn for these columns to pop up into place. 2) that the styles used to float the left sidebar, and the main column are left in tact if possible. heres some code Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#wrapper{ /* Wraps everything. Glues header, centralContainer, and footer together */
margin: auto;
width: 950px;
text-align: left;
}
#header {
margin: 0;
position: relative;
background-color: #666;
}
#centralContainer { /* Glues left and right columns, and main area together */
zoom: 1;
}
#mainColumnWrapper {
margin-left: -195px;
overflow: hidden;
float: right;
}
#mainColumn {
margin-left: 195px;
background-color: #999;
position: relative;
width: 560px;
}
#mainColumn .marginForLeftNav {
}
#mainColumn .marginForNoLeftNav {
left: 0px;
width: 755px;
margin-right: 195px;
}
#leftColumn {
float: left;
width: 175px;
position: relative;
margin: 0;
padding: 0;
background-color: #CCC;
}
#rightColumn {
width: 175px;
margin-left: 775px;
background-color: #CCC;
position: relative;
}
#footer {
color: #666666;
font-size: 80%;
border-top: 1px solid #333333;
clear: both;
padding-top: 10px;
background-color: #FFF;
}
body {
background-color: #333;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="header">header</div><!-- end header -->
<div id="centralContainer">
<div id="mainColumnWrapper">
<div class="marginForLeftNav" id="mainColumn" >
<p>main column, with class narginForLeftNav</p>
<p> </p>
<p> </p>
<p>test</p>
</div><!--end <div id="mainColumn" class="marginForLeftNav"> -->
</div><!--end <div id="mainColumnWrapper"> -->
<div id="leftColumn">left column area</div>
<div id="rightColumn">right column area</div><!-- end rightColumn div -->
</div><!-- end centralContainer -->
<div id="footer">footer</div><!-- end footer -->
</div><!-- end wrapper -->
</body>
</html>
ive adjsuted the background colors to help see what is going on this is as close as i have gotten it so far. NOTICE, how the main column overflows behind the right sidebar, which makes the content in the right sidebar begin AFTER the bottom of the main column. this is obviously the main problem. I need the main column to obey the right sidebar, depending on wether theres a left sidebar or not. |
|||||||