CSS - Wordpress Sidebar Call Issues In Markup

Curious, what is regarded as the standard CSS markup method?

Displaying your attrbutes horizontally:
#wrapper{selector:attribute; selector:attribute; selector:attribute; selector:attribute;}


Or Vertically:
#wrapper{
selector:attribute;
selector:attribute;
selector:attribute;
}

Personally, horizontal seems the best. I like it because I can see the #id's and .classes all together and can follow the structure abit better. Makes it easier for me to find a certain stlye element. The argument someone presented in favor of vertical display is you won't miss a selector:attribute and the horizontal display it is hard to see the selectors:attributes. My counter arguement, in my head, was I can glance at a set of selectors:attributes and can easily identify what is / isn't there. I think I've read and written so much css that I can quickly identify pattens for certain elements and can spot rather quickly what is missing, if that is the problem, sometimes there is a large issue at hand. Eitherway, I'm in support of the horizontal display. Especially when there is a vertical style sheet that is 1152 lines long and the find option in dreamweaver is my best way of locating the style element.

Thoughts on the matter?

Let's start off with the code:
Code:

<div class="tuts_900">
	<h1>Recent Tutorials</h1>
	<img src="tutorial_avatars/vendetta.gif" width="60" height="60" alt="Vendetta Upper Deck" title="Vendetta Upper Deck" align=
"left" border="0" />
	<h2>Vendetta Upper Deck</h2>
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi ornare. Nam tincidunt ultrices libero.
	<p>Submitted Oct. 20, 2006 | <a href="">View Tutorial</a><img src="sitegfx/tuts_orange_arrow.gif" width="13" height="7" alt=
"" title="" border="0" /></p>
	</div>

What I'm trying to do is specifically target the <img> tag withint the <p> tag that's within the tuts_900 div.

I tried this: div.tuts_900 p img { asdfgasdgfgasdasd }; with no success.

How can I do this? Thanks.

I'm in the middle of doing a site conversion to xHTML and CSS using semantic markup,

Lets say I have something which needs a rating displayed in stars...

E.g. if the current html is :

Code:

<h1>Book Name</h1>
<img src="star.gif"><img src="star.gif"><img src="star.gif"><img src="star.gif">

I'd like...

Code:

<h1>Book Name</h1>
<h2>4 Stars</h2>

And do some image replacement on this when skinning the site... what do you think?

-D

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

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 cannot figure this out. I've tried adding clear: both in several places, I've tried overflow: hidden and I've tried cursing. Nothing works! How can this be fixed so that in IE6 the divs are not staggered vertically??

Code:

<div style="height: 38px; margin: 0px; padding: 0px; width: 140px;">

<div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="38" border="0"></div>
<div style="float: right; height: 38px; width: 102px;">copy</a><br>copy</a></div>

</div>


<div style="height: 38px; margin: 0px; padding: 0px; width: 140px;">

<div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="19" border="0"></div>
<div style="float: right; height: 38px; width: 102px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="8" border="0"></div>

</div>

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>&nbsp;</p>
               	    <p>&nbsp;</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.

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'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>

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.

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

How's it going,

If you look at this link below, you'll see how one of the images below is larger than the content area and thus goes over into the sidebar...which looks really wack.

http://www.sustainablelivingrealest...-home-for-sale/

Is there a way to confine all images so they don't spew over, without actually resizing each image in Photoshop?

Thanks in advance.

Hi all, noob here. I am trying something pretty simple but just cant get it to work. For my site, I have a main content area and two right sidebars. I am trying to decrease the width of the the content area and widen the sidebars to fill the extra space created, say 50px. I have come unstuck trying to get it done though.

Below is the relevant part of the css:

Code:

/* CONTENT layout */

#content {
  float: left;
  width: 100%;
  padding-bottom: 2em;
}

.sidebar-double #content, .sidebar-left #content {
  margin-left: -221px;
}

.sidebar-double #content, .sidebar-right #content {
  margin-right: -271px;
}

.sidebar-right-double #content {
  margin-right: -448px;
}

/* Add blanks left and right for the sidebars to fill */

.sidebar-double #squeeze, .sidebar-left #squeeze {
  margin-left: 221px;
}

.sidebar-double #squeeze, .sidebar-right #squeeze {
  margin-right: 271px;
}

.sidebar-right-double #squeeze {
  margin-right: 448px;
}

/* Add whitespace to content area */

#squeeze {
  padding: 1em 0 1.5em;
  overflow: hidden;
}

.sidebar-double #squeeze, .sidebar-left #squeeze {
  padding-left: 2em;
}

.rightbar #squeeze {
  padding-right: 2em;
}

/* SIDEBAR layout */

#sidebar-wrapper .sidebar {
  float: left;
  z-index: 2;
  position: relative;
}

#sidebar-left {
  width: 221px;
}

#sidebar-right-sec {
  width: 200px;
  padding: 1.2em 0;
  
  
}

#sidebar-right {
  width: 248px;
  padding: 1.2em 0;
  
  
}

.rightbar .top-corners {
  right: -8px;
  top: -3px;
  padding-right: 8px;
  position: relative;
  min-height: 12px;
}

.rightbar .bottom-corners {
  right: 0;
  bottom: -4px;
  position: relative;
  min-height: 7px;
}

I have tried changing the content or 'squeeze' margins as its called and then just widening the sidebars but it just doesnt work. If anyone can help it would be great, thanks!