|
CSS - Space Out Widgets On Sidebar
Hi,
I have a sidebar that's getting a little cramped and I would like to space them out by about 5-10px. Am using wordpress widgets for most of them so am unsure about where to find them in the code.. www.leehughes.co.uk #content #sidebar { float: right; width: 25%; } #content #sidebar p { font-size: 15px; /* dontate button) */ line-height: 22px; color: #FFFFFF; } #content #sidebar p a { color: #FFFFFF; /* dontate button) */ text-decoration: none; } #content #sidebar p a:link { color: #FFFFFF; text-decoration: none; } #content #sidebar p a:hover { color: #003366; text-decoration: none; } #content #sidebar h2 { color: #FFFFFF; /* categories button) */ font-size: 15px; } #content #sidebar h3 { font-size: 15px; color: #FFFFFF; } #content #sidebar h3 a { color: #FFFFFF; font-size: 17px; text-decoration: none; } #content #sidebar h3 a:hover { color: #003366; text-decoration: none; } #content #sidebar h2 a { color: #FFFFFF; font-size: 15px; /* Subscribe button) */ text-decoration: none; } #content #sidebar h2 a:hover { color: #003366; font-size: 15px; text-decoration: none; } #content #sidebar li { color: #0000FF; /* Bullet point of posts button) */ line-height: 20px; } #content #sidebar li a { color: #FFFFFF; /* posts button) */ font-size: 15px; text-decoration: none; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; } #content #sidebar li a:link { font-size: 15px; color: #FFFFFF; /* seconds posts button) */ text-decoration: none; } #content #sidebar li a:hover { color: #003366; text-decoration: underline; } #content #sidebar a { color: #000000; } Similar TutorialsArgh. Tried a number of variations on this probably simple task. Nonetheless: In this example how do I get the 'sidebar' to fill the vertical space of the container, and ensure the 'footer' remains positioned at the bottom (which it currently does) http://www.mandgweb.net/css_test/css_test.html Thank you Hello everyone. Im back again with yet another problem about css. Site link: Code: http://peaknutritionlabs.com/ My problem is that i had to set the width for #ez-fat-footer-container to 1316px because of the background image but now the problem is that all the widgets in that container got out of place and moved to the left. margin: auto; doesent work. I can move it to the center with position: relative; left: 200px; but when someone has a smaller screen the widgets get pushed to the right by 200px and i would like it to stay in the center. Anyone know a way to pull this off ? EDIT: I have used relative position to move it in place and it seems ok for those with resolutions 1366x768 or higher. But i would still like to know how to center it for lower resolutions if anyone knows.. Hi guys.. Av messed up my code trying to sort something out www.leehughes.co.uk as you can see the subfooter widgets are now on the left.. how do I move then center? Also you see the recent comments.. how can I space that out to make it look like the other two? Many thanks Hi, I am pretty new to the whole CSS thing and have had a look around for an answer to no avail. I am trying to align all the widgets for my wordpress theme to the left because my screen resolution is set to 2560 x 1440, they seem to wrap when my browser window is maximised. is there any way to stop this so that they stay underneath one another even when the screen is maximised? my website is at grandfunghi.com thanks in advance, J I'm making a page in which three elements are embedded: The first is a weather.com "current weather" widget, which is as follows: Code: <script type="text/javascript" src="http://voap.weather.com/weather/oap/USVA0023?template=TRVLV&par=3000000007&unit=0&key=twciweatherwidget"></script> It always aligns left, despite the div it's in having text-align: right set. How can I get it to center? The other two are iframes, like so: Code: <iframe src="http://www.g4ilo.com/wwv/webprop.php?format=small" width="180px" height="268px" frameborder="0"></iframe> They work fine, but don't validate (using 4.01 Strict). What is a way to get the same content in a valid block that I can style and place as I wish? EDIT: Now that I look at it, this probably would fit better in the HTML forums. My apologies. 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 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. 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. I'm a bit of a CSS newbie but I try. How do you get the sidebars' height to synchronize with the height of your content? I tried height=100% but it doesn't seem to work. If I put a lot of text in my content, it stretches down but the sidebars remain the same height, making the layout looking ugly. I don't want to have to press enter in my sidebars to match the content's height all the time! Here's my code: <style type="text/css"> #container { width: 100%; border: 1px solid gray; margin: 0px auto; } #banner { padding: 0px; background-color: #CDC8F1; } #content { padding: 5px; background-color: #FFFFFF; } #sidebar-a { float: left; margin: 0; padding: 0px; background-color: rgb(235, 235, 235); height: 100%; } #sidebar-b { float: right; margin: 0; padding: 0px; background-color: rgb(235, 235, 235); height: 100%; } #footer { clear: both; padding: 5px; background-color: rgb(213, 219, 225); } body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } </style> Hi all, At http://www.bartlett-family.net/chrisbartlett/blog2/ I have recently changed the entire layout and replaced it all with new images, BG, etc. In IE... On the right, the sidebar and BLOG searchform are all a little too far to the right. I've been playing with it all for a while, but can't seem to move it to the left. I basically just need to shift the entire righthand contents about 10 or 20 px to the left, but I need to avoid that also changing the righthanded content on all the other pages. Actually, in FF it is correct, except that the BLOG searchform bar needs to com over about 10-20px to the left. Other than that, it's perfect. I need to make IE look like that! CSS file is at http://www.bartlett-family.net/chrisbartlett/main.css I'd appreciate any help. Thank you! Chris 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 know this probably has a really simple answer but how do I make it so the sidebar is on the right side of the content box on a WordPress theme? Here is what it looks like right now: http://reptilenewsstation.1sthoster.com/ The sidebar is below the content box and I want it to be on the right side of the content box. I know the theme sucks right now but this is my first WordPress theme and I want to set everything up in the correct places before I start getting into really styling it. 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. Greetings! This is my first time with using css and I'm going out of my mind trying to fix a floating sidebar. As you can see from the included jpeg, I want the sidebar and main content areas to float flush with the navigation bar. But for some reason, my right sidebar keeps getting pushed down. Any thoughts would be appreciated. Thanks! Devon picture of what it should look like:themorphememan.com/personalstuff/website-design.jpg code:themorphememan.com/personalstuff/index.html I 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! This is a first I've seen my problem and I'm hoping it's something silly stupid. check out the site, code is listed below as well: http://bigoak.kjellandrew.com Ultimately I'm trying to float the sidebar to the left of the main content. First thing I notice is that the banner image has excess margin that is anywhere in the CSS. I've tried everything to eliminate that spacing and am starting to think it's related to my other problem. Second is that when I try to float the side bar (float: left on content and float: left on sidebar) it kills the div #body prematurely. You can tell cause the background color disappears and using firebug proves it showing that the body div is shortened. I've tried specifying heights (min height does extend it, but ultimately not a fix). I've made sure all of my divs are closed in proper order. And I've checked for random ", ', }, or / in my CSS and html and it's totally clean. It validates just fine too. HELP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Big Oak - Home</title>
<style type="text/css">
* { margin: 0; padding: 0;}
a img {
border: none;
}
.clear {
clear: both;
}
body {
background: url('_img/outside_bg.png') no-repeat top center #59858b;
}
#body {
margin: 0 auto;
margin-top: 50px;
background-color: #fff;
width: 950px;
height: 100%;
}
#header {
background: url('_img/header_wood.jpg') no-repeat top;
width: 950px;
height: 75px;
}
#header h1 {
text-indent: -9000px;
font-size: 0;
}
#header img.logo {
float: left;
position: relative;
top: -50px;
}
#header img.banner {
margin: 0px auto;
}
#header ul {
float: left;
list-style: none;
padding-top: 40px;
width: 480px;
}
#header li {
display: inline;
margin: 10px;
font-family: helvetica;
font-weight: normal;
font-size: 1em;
}
#header li a:link,
#header li a:active {
text-decoration: none;
color: #231f20;
}
#header li a:hover,
#header li a:active {
border-bottom: 2px solid #444;
}
#header form {
float: left;
margin: 30px 5px 0 0;
display: inline;
}
.searchbox {
height: 1.5em;
font-size: 1em;
padding: 2px 2px 2px 5px;
width: 140px;
vertical-align: middle;
border: 1px solid #ccc;
}
.searchsubmit {
vertical-align: middle;
}
#social_links img {
float: left;
padding: 30px 5px 0 0;
}
#container {
width: 890px;
margin: 0px auto;
}
#content {
width: 560px;
float: left;
}
#sidebar {
width: 270px;
margin-left: 25px;
}
</style>
</head>
<body>
<div id="body">
<div id="header">
<h1>Big Oak</h1>
<a href="/"><img src="_img/bigoak_logo.png" alt="big oak logo" class="logo" height="119" width="142"></a>
<ul class="nav">
<li><a href="#">about</a></li>
<li><a href="#">speaking</a></li>
<li><a href="#">a:life</a></li>
<li><a href="#">go events</a></li>
<li><a href="#">contact</a></li>
</ul> <!-- ends main navigation list -->
<form method="get" action="">
<p><input type="text" class="searchbox">
<input type="image" src="_img/go.png" class="searchsubmit"></p>
</form>
<div id="social_links">
<a href="#"><img src="_img/facebook.png" alt="facebook"></a>
<a href="#"><img src="_img/twitter.png" alt="twitter"></a>
<a href="#"><img src="_img/rss.png" alt="rss"></a>
</div> <!-- ends social links div -->
</div> <!-- ends header div -->
<div id="container">
<img src="_img/header_img.jpg" alt="banner" class="banner" width="890" height="270">
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam adipiscing ultrices scelerisque. Fusce suscipit nulla eu sem placerat imperdiet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris laoreet suscipit risus id elementum. Sed massa ante, ornare nec rutrum sit amet, fringilla ac quam. Donec sed rutrum sem. Aenean vulputate molestie quam, eget vehicula justo pellentesque quis. Aliquam consequat est vitae purus pellentesque aliquam. In sagittis dolor et dolor fermentum mattis. Sed sed purus urna, feugiat suscipit tellus. Etiam sollicitudin metus in ante consectetur pretium vulputate ligula fringilla. Sed condimentum dignissim ipsum ut consectetur. Curabitur pellentesque placerat neque. Nam ante sem, condimentum eget aliquet eget, auctor vitae nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacinia odio in ante consectetur condimentum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam adipiscing ultrices scelerisque. Fusce suscipit nulla eu sem placerat imperdiet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris laoreet suscipit risus id elementum. Sed massa ante, ornare nec rutrum sit amet, fringilla ac quam. Donec sed rutrum sem. Aenean vulputate molestie quam, eget vehicula justo pellentesque quis. Aliquam consequat est vitae purus pellentesque aliquam. In sagittis dolor et dolor fermentum mattis. Sed sed purus urna, feugiat suscipit tellus. Etiam sollicitudin metus in ante consectetur pretium vulputate ligula fringilla. Sed condimentum dignissim ipsum ut consectetur. Curabitur pellentesque placerat neque. Nam ante sem, condimentum eget aliquet eget, auctor vitae nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacinia odio in ante consectetur condimentum.</p>
</div> <!-- ends content area -->
<div id="sidebar">
<h3>Cool Sidebar</h3>
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
</div><!-- ends sidebar div -->
</div> <!-- ends container div for main area of content -->
</div>
</body>
</html>
***RESOLVED: Had to switch to relative positioning*** Okay. I'm sure this is extremely simple, but I can't seem to get this to work for some reason. I'm basically trying to put a right sidebar in, but it keeps to the left. Concept: http://i472.photobucket.com/albums/rr82/rhoover84/concept.jpg Reality: http://i472.photobucket.com/albums/rr82/rhoover84/reality.jpg Here's my css: Code: body {
background-color: #5D5D5D;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
/* Layout Specs */
#container {
width: 950px;
margin: 0 auto;
text-align: left;
}
h1, h2, h3, p {
margin: 10px 255px 10px 15px;
}
div.content {
position: absolute;
background-color: #FFFFFF;
color: #504E52;
width: 950px;
margin: 0px 255px 0px 0px;
z-index: 1;
}
div.header {
background-image: url('images/header.png');
background-position: top;
background-repeat: no-repeat;
margin: 0px 0px 0px 0px;
padding: 0px;
width: 950px;
height: 200px;
z-index: 2;
}
div.rtcol {
position: absolute;
float: right;
width: 240px;
background-color: #E7EEF9;
color: #504E52;
border-left: 2px solid 7BD5EA;
z-index: 2;
}
p.rtcol {
margin: 0px;
padding: 0px;
}
/* Text: Headings, etc. */
h1, h2, h3 {
text-transform: uppercase;
color: #6083BB;
}
h1.rtcol, h2.rtcol, h3.rtcol {
color: #E36A07;
}
And finally, the HTML: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="container"> <img src="images/logopng.png" float="left"> <div class="header"> </div> <div class="content"> <h2>Test Title</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum mattis nisi id convallis. Nullam aliquam pellentesque lectus, eu hendrerit lectus dapibus et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Aliquam scelerisque, metus in euismod lacinia, augue tellus tempus urna, lacinia vulputate lectus quam nec ipsum. Integer iaculis nulla eu turpis fermentum quis dapibus enim consectetur.</p> <p>Nunc pulvinar cursus dolor id ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum aliquet ornare lacinia. Integer sed ante leo, eu dictum enim. Ut risus purus, convallis eu rhoncus at, ultricies ut diam. Ut vel mi ut nibh tincidunt pretium sit amet quis urna. Donec sed auctor eros. Vestibulum nec odio ante.</p> </div> <div class="rtcol"> <h2 class="rtcol">Computer Training Courses</h2> <p class="rtcol">Tired of condescending looks from your kids?<br>Call us for more info!<br>1-888-QIK-STOP<br>(440) 392-2700</p> </div> </div> </body> </html> Any suggestions are welcome, so thanks ahead of time!! |
|||||||