newseed

Give #operator_list a fixed height.

text-align: justify;

 

Other values are left, right, center, start, end & inherit.

Just right below your 'entry-content' div I would do it like this: <div class="entry-content"><div style="width: 960px; margin: 0 auto; position: relative; right: 0; top: 0;"><div style=" margin: 0 auto;position: absolute; right: 0; top: 13px;"><a href="http://www.facebook.com/CleanTelligent"target="_blank" ><img src="/wp-content/themes/cleantelligent/images/facebook.png" /></a><a href="http://www.linkedin.com/company/cleantelligent_software"target="_blank" ><img src="/wp-content/themes/cleantelligent/images/linkedin.png" /></a><a href="https://twitter.com/#!/CleanTelligent1"target="_blank" ><img src="/wp-content/themes/cleantelligent/images/twitter.png" /></a><a href="/news-and-events/rss.xml" ><img src='/wp-content/uploads/2012/05/Blog-button.png' ></a></div></div> And if you do want to use positioning then you can use float: <div class="entry-content"><div style="width: 960px; margin: 0 auto;"><div style=" margin: 13px auto 0; float: right;"><a href="http://www.facebook.com/CleanTelligent"target="_blank" ><img src="/wp-content/themes/cleantelligent/images/facebook.png" /></a><a href="http://www.linkedin.com/company/cleantelligent_software"target="_blank" ><img src="/wp-content/themes/cleantelligent/images/linkedin.png" /></a><a href="https://twitter.com/#!/CleanTelligent1"target="_blank" ><img src="/wp-content/themes/cleantelligent/images/twitter.png" /></a><a href="/news-and-events/rss.xml" ><img src='/wp-content/uploads/2012/05/Blog-button.png' ></a></div></div>

If you are just simply copying the icon links and images and placing it within the header class called header_img then it going to blow out your icons because the css there is set for 200px wide. You just can't move something over and expect to work. You need to determine what you are moving and where going to be place keeping in mind that the header is going to have an affect on those icons. I would wrap a div around the social stuff and apply any styles to it to make it work without interfering with the other stuff in the header. <div class="header_social_icons"><a target="_blank" href="http://www.facebook.com/CleanTelligent"><img src="/wp-content/themes/cleantelligent/images/facebook.png"></a><a target="_blank" href="http://www.linkedin.com/company/cleantelligent_software"><img src="/wp-content/themes/cleantelligent/images/linkedin.png"></a><a target="_blank" href="https://twitter.com/#!/CleanTelligent1"><img src="/wp-content/themes/cleantelligent/images/twitter.png"></a><a href="/news-and-events/rss.xml"><img src="/wp-content/uploads/2012/05/Blog-button.png"></a></div>

You will need to use some kind of scripting to make this happen. Some use a ready made php form while others build their own. Google: "save input field data to text file" and you should get a few ideas on how to achieve this.

Give this a look. I believe it will give you all the possibilities. Keep in mind though that CSS3 is not fully supported especially for IE9 or earlier.

I don't know what the html is like but this might be of help: #bottom-slider:before, #bottom-slider:after {-moz-box-shadow: 0px 0px 5px rgba(0,0,0,1);-webkit-box-shadow: 0px 5px rgba(0,0,0,1);box-shadow: 0px 0px 5px rgba(0,0,0,1);} Just zero out the 5px.

The class .topbar should be enough to style your parent and any child elements. To style parent links, just do this: .topbar {your styles here} To style 2nd level:.topbar ul {your styles here} 3rd level.topbar ul ul {your styles here} ...and so forth. So if you want to change the color of the links for the 3rd level then it would look something like this: .topbar ul ul a {color:red;} Now I reviewed your HTML and the sub list are done incorrectly. You are opening a list and the closing it before you adding your sub-list. Red indicates wrong placement and green show correct placement. <ul class="topbar"> <li><a href="">News</a> </li> <ul> <li><a href="">Blog</a></li> <li><a href="">Podcasts</a></li> </ul></li> <!-- CLOSES NEWS SUB-SECTION -->When you want to create sub menus then you open a <li> and then all <ul><li></li></ul> and the close it </li> . You do that for each and ever level. I strongly urge you look at Superfish examples to see how it's done.

You need to dynamically show those post. You can use WP's RSS feed to do this. Here's one option: Google API This one seems easy enough. If you are comfortable with PHP then you can dig into this one: WP Recent Post

Not uncommon. Chrome and Safari seems to be a tad different from Firefox and the same for IE vs. the rest of the browsers. You can adjust your font size to be 22px or less to see if that gives you the desired results. If your intention is to have that line of text to expand the width of the div then change your text alignment to be text-align:justify.

IE9 or earlier does not support gradient without this following sample: filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */ You can check out this gradient editor to help you get the correct code for your site.

<p style="text-align: center;"><input type="submit" name="Submit" value="Submit"></p>

A few weeks ago I ran into a problem about how I can specifically style IE10 and then I found out that Conditional Comment (CC) no longer supported. So I thought, 'Wow...it would be nice to not use them at all. So I googled the alternatives and I came across this article. So far I have used this and it works like a charm. No more CC for me!

Oh wow, I never even thought of smart phones and tablets! It's enough of a challenge for me, to just consider different computer screens. So you're saying that it can be written in the code, that the browser should look to see what size the screen is, and present the page accordingly? Interesting to see on the same page you linked, a poll asking for opinions on whose resposibility it should be, to see that a webpage looks good on mobile devices -- the page's designer or the mobile device. (I'm not quite sure how the device could do that, but this (mobile devices) is FAR outside my understanding. ) That would indicate to me, that perhaps the issue is debatable, even among the pros.....yes?

It's like the browser wars a few years ago forcing IE and other browsers to start using W3C compliant. Even today there still some differences between IE10 and Firefox but not much.

Because this will not be a stand alone webpage, I think I can put aside the issue of mobile devices, at least for now. I have no idea how the site, for which this article is destined, handles mobile devices. And while occassionally I may have members using a mobile device, perhaps to check messages, I don't think it's likely they would be reading my article from a mobile device....at least not presently. But that's definitely something I'll want to consider in the near future!

Don't be surprise by how many people use their mobile devices to view websites. I don't have any statistic but the demand is increasing.

Ok, for now..... The page doesn't have to look exactly the same on all screens. I can live with little spacing issues here and there. But if an image gets shifted, or say 3 images which are supposed to be side by side, get stacked on top of each other when the window is made smaller -- that wouldn't be ok with me (.....unless every single other option has been eliminated, for whatever reason). Well, I used % as much as I thought was possible. I don't remember seeing anything about using % for padding and margins. But I'll try it. What about images, where you have to put the width and height in pixels, in the img tag? Are images the only exception to the "all percent" requirement? Or is there some way to code so that the image stays put? Ohh....maybe using float?

Remove the width and height from your image tag and apply the css to have only width: 100% (no need for height but you can use either one or both). The image file itself has to be sized to fit the maximum screen size for it to be visually of good quality. The drawback is the for those using mobile devices will require to download the same size (in KBs) file but it will shrink down visually to fit. The solution is to use media query to download a smaller file specifically for the device's screen size. See that link I gave you about media query.

How do you write the font size in percent? Oh wait, I already know something about that. In the Font Styling tutorial, it showed how to use percent and em together, so it will work in all browsers. Is that what you mean?

font-size: 100%;

Are you saying that using a min-width will prevent the layout from breaking down when the window is smaller?

Yes. Keep in mind that some mobile devices (including tablets) have a setting to display desktop view which will allow your site to fit a smaller screen. The drawback for the user's point is that it can be either too small to read or have to deal with left/right scroll. There are also a meta tag that might help some:<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">You might google this since I don't have any in depth details about this but I know there are many other parameters you can add to it.

Mobile Emulator

It's been my understanding that % should be used as much as possible, to allow the page to look ok across all different kinds of screen sizes and resolutions. So that's why I'm using %.

Using % can be challenging when you are trying to cater to all types of screen sizes from smartphone to tablets to desktops. If you want your site to look exactly the same then you have to use % for everything including font sizes, padding, margins, line-heights, etc.

When you suggested 990 px and 800 px, are those the best sizes for fixed widths, that will still look ok on all different kinds of screens?

The 990 is my default standard width because it's the most common and easiest to read. Think of it as a 8.5 x 11 paper. It's far easier to read than if you were to use the entire wide screen. However, it doesn't mean you can't use % but instead it means you have to become more aware of how easy or difficult for the user to read the content. The min-width can be anything you want. I mentioned this because you may want your design to be fluid but then the layout breaks when it's sized down to a certain point.

Unless I'm misunderstanding you, I don't think I would want to center the .icbg div, because the background graphic is a pattern type of border along the left side of the page. That's why there's a 15% left margin, so it won't cover up the graphic pattern border. The reason I decided to use a left side border, rather than something like a frame, or border around the whole page, is for the same reason I used % -- so it would still look ok on any kind of screen. If I use a graphic background that is a fixed width, it's the same problem.

How about small screens like smartphones? Already you are consuming 15% of it's screen size leaving the rest to be crunched in. You best option is to define css for each type of screen size using media query so that it lays out nicely for all types of devices.

You still have one css rule that need adjust for the overall width of the page: #inner { clear: both; margin: 20px auto; width: 900px; /*this is what you have now...adjust to suit your new width*/} Take or zero out the right and top margins as shown below: span.socialwiggle { margin-right: 0; margin-top: 0;} Adjust the width for the header widget area to be... #header .widget-area { width: 280px;} If you want to move the social icons up then the top padding here: #header .widget-area { float: right; padding: 40px 0 0; width: 480px;} I do not know if any of these setting can be set in your theme's setting but you might check the themes folder to apply these changes.

No offensive to you but I think you are biting off more than you can do. Whatever your theme name is you can add your own html source to the header.php. Of course you have to have a good understanding of html/php or else it will break. The other way is to add just the logo to the header via WP theme admin and do some rework of the theme itseltto allow you to position the theme's menu to where you want it. Again, you have to be a bit savvy with html/css/php to do that. Out of the box Wordpress is great but if you plan on making number of obvious customization then you either need to learn the basic as well as some advanced coding or find someone that is willing to give you the time to do it for you. Otherwise, hire someone to get it done for you.

There are several elements (too many to name) that require changes if you are trying make something fit in an area that is too small width wise. The overall width of your framework is 775px. You have to calculate your content area, sidebar, header, widget(s), etc to make sure it all fits. Otherwise, it just blows up.

Are you trying to make the site a fixed width or fluid? You can adjust the css for the class .icbg by adding width: 990px; /*adjust to suit*/ . Also, instead of using width you can use min-width: 800px; /*adjust to suit*/ to tell it to keep a minimum width. If you are going to use fixed width then you can use margin: 0 auto; for class .icbg to center your page.

MarkT's suggestion might work but it's unknown what tag you are using for the word 'Archive'. If you have none then it won't work. You might provide the hmtl as well to help you a little better.

Here's small example that might work for you. http://jsfiddle.net/BN4Ny/

You can reset all your margins and padding default values and then apply what you need for each element.

 body, address, blockquote, dl, ol, ul, li, form, fieldset, h1, h2, h3, h4, h5, h6, p, pre { margin: 0; padding: 0;}

p.class only styles that paragraph tag. The means for each paragraph tag that needs that same style you will have to apply the class name for each. Since you already have a div wrapped around the whole contents, using .class p will tell it to style all the paragraphs within that div that has that class name.

Since you do not have any known width for #profile-banner you can do the following to your .logo css:

#profile-banner .logo {	  top: 125px;	  background: #333;  	  border: 1px solid #666;  	  width: 250px;  	  height: 250px;  	  position: absolute;  	  /*delete this*/margin: 0 auto;  	  padding: 0px;	  /*added*/  left:50%;  	  /*added*/ margin-left: -125px;}

The left: 50%; is telling it to move the left side of the image to the center of the page. The margin-left: -125px; is calculated based on half of the width of the image. In your case your image is 250px wide. Dived that in half and you have 125px. Since the left side of the image is centered you want to subtract it back to the left by 125px which is why you see a negative sign in that style.