CSS - Impossible Layout?

Hello, I am using an OS Commerce layout for a client's website. On this page - www.mts-diesel.com you will see how I have the homepage laid out in anticipation of design, with 3 divs of varying colors. One div with an id of #hp_left is where I want to put a nice jquery code. But when I insert that into #hp_left it breaks the whole layout, was seen here www.mts-diesel.com/index2.php I'm not sure what in the css in the code for this script is breaking my layout but Ithought someone here might be willing to shed some light. A big thank you. Tom

I am working on the new home page which is based on a template.

The left sideColumn is working fine, however I am having a few problems with the mainColumn layout.

Here is a static image to show what I want it to look like

Here are the problems I am having:

1) The #scroll box is place where I want it in IE but in foxfire it is right up against the left side of the #sideColumn partially hidden.

There will be text that scrolls into this box and stops. I haven't started on the part yet - in case that makes a difference. Not my choice, but that is what the bosses want.

2) I want the image centered horizontal within the #mainColumn. Here is what I have for the css:

#home img {
margin: 5px auto 5px auto;
}

which I thought would do the trick, but it's not.

3) I want the p text to have a 40px margin on the right and left side like the .large does.

Here is what I have for the css:

#home p, .large {
margin: auto 40px auto 40px;
}

It works for the .large (Welcome to Vitalograph), but not for the text below it. At one point I had it working, but after addtional changes fixing other problems, now it doesn't and I can't figure out why.

Here is the xhtml starting at the 2 column part (wrapper): Code:

  	<!--begin wrapper-->
  	<div id="wrapper">
  
  	<!--begin side column -->
  	<div id="sideColumn">
        <span class="category">Products</span>
    <ul>
		<li><a href="/products/spirometers.html">Spirometers</a></li>
		<li><a href="/products/clinical_trials.html">Clinical Trials</a></li>
		<li><a href="/products/asthma_copd.html">Asthma & COPD</a></li>
		<li><a href="/products/smoking_cessation.html">Smoking Cessation</a></li>
		<li><a href="/products/resuscitaion.html">Resuscitation</a></li>
	</ul>
	
	<span class="category">Resources</span> 
    <ul>
      <li><a href="/resources/contact_us.html">Customer Support</a></li>
	  <li><a href="/resources/training_services.html">Training & Services</a></li>
      <li><a href="/resources/exhibitions.html">Exhibitions</a></li>
      <li><a href="/resources/newsletters.html">Newsletters</a></li>
      <li><a href="/resources/downloads.html">Downloads</a></li>
      <li><a href="/resources/useful_links.html">Useful Links</a></li>
      <li><a href="/resources/industry_information.html">Industry Information</a></li>
	  <li><a href="/resources/industry_information.html">Sitemap</a></li>
	</ul>
  </div>
  <!--end of side column -->
  
  <!--begin main column -->  
  <div id="mainColumn">
  
  	<!-- InstanceBeginEditable name="Main_Section" -->
  
  
  
    <div id="home">	
        <div id="scroll"><span>scrolling news will go hear and stop</span></div>
		
        <img src="/images/boys_bubbles.gif" width="485" height="333" alt="boys and bubbles" />
	
		<span class="large">Welcome to Vitalograph</span>
		
		<p>Vitalgraph offers a wide range of spirometers along with other asthma 
          management equipment with over 40 years experience. From simple hand-held 
          units to sophisticated Windows based spirometry systems, we have it 
          all. Check out our full line of respiratory equipment under the product 
          category.</p>
		
		
      <p><a href="/about_us/about_us.html">more about us...</a></p>
		
		
	</div>
  
  
  <!-- InstanceEndEditable -->
  
  </div>
  <!--end of main column -->
  
  </div> 
  <!--end of wrapper--> 

Here is the vitalograph_master.css: Code:

body {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: center;
	background-color: #ffffff;
	color: #515151;
	margin:0px;
	padding:10px;
}

/*page container settings*/

#page {
	width: 750px;
	height: 600px;
	border: 1px solid #5094F9;
	background-color: #FFFFFF;
	overflow: hidden;
	margin: auto;
	padding: 10px 10px 10px 10px;
	text-align: left;
}

/*logo header and tag settings*/
	
#header {	
	margin: 0;
	padding-bottom: 5px;
	width: 450px;
	height: 36px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	text-align: left;
}

#header img {
    vertical-align: -7px;
    }

.tagline {
	color: #5094F9;
	font-size: 16;
	font-style: italic;
	font-weight: bold;
	display: inline;
	clear: both;
	line-height: 20px;
	margin-left: 10px;
}

/*top bar settings*/

#topbar {
	float: top;
	height: 20px;
	background-color: #5094f9;
	clear: both;
	padding-left: 10px;
	text-align: left;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
}

#topbar a:link, #topbar a:visited {
	background-color: inherit;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
}

#topbar a:hover, #topbar a:active {
	background-color: #FFFFFF;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

#topbar ul {
	list-style: none;
	margin: 0;
	padding-top: 2px;
}

#topbar li {
	display: inline;
	margin-right: 160px;
}

/*Main Section two columns under top section*/

#wrapper{
	padding: 10px 10px 10px 0px;
	width: 100%;
	height: 100%;
}

#sideColumn {
	float:left;
	width:155px;
	height: 78%;
	background-color: #5094F9;
	padding-top: 50px;
	padding-left:10px; 
	padding-bottom:10px;
	pading-right: 10px;
	margin-right: 10px;
	text-align: left;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-weight: bold;
	line-height: 20px;
}

.category {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 5px;
}

#sideColumn a:link, #sideColumn a:visited {
	background-color: inherit;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
}

#sideColumn a:hover, #sideColumn a:active {
	background-color: #FFFFFF;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

#sideColumn ul {
	list-style: none;
	padding: 15px 0px 15px 10px;
	margin: 0px;
}

#mainColumn {
	padding: 0px;
}

/*footer*/

.footer {
	font-family: "Times New Roman", Times, serif;
	font-size: 9px;
	color: #999999;
}

/*text*/

.large {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 15px;
}

Here is the home.css: Code:

/*home page*/

#home {
	margin: auto;
}

#home img {
	margin: 5px auto 5px auto;
}

#home p, .large {
	margin: auto 40px auto 40px;
}

#home a:link, #home a:visited {
	background-color: inherit;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

#home a:hover, #home a:active {
	background-color: inherit;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #990099;
	font-size: 12px;
	font-weight: bold;
}

#scroll {
	width: 560px;
	padding: 5px;
	background-color: inherit;
	border: 1px solid #5094F9;
	margin-bottom: 5px;
}

Any help or suggestions are greatly appreciated.

Hi there and thanks for reading & helping! I am new to this site, but here is my question:

I need to build about a 20 page website. I have been told I should do the "layout" for each page using CSS. Is it possible for each page to "link" to one CSS file for layout instructions? I have found suitable CSS layout templates but am unsure how to link each page to the external CSS file for a basic "header, 2 column, footer" layout, or if it is even possible?

Hi

I want to achieve this layout using CSS http://www.premier-resin-systems.co.uk/layout.jpg

I want it to be 3 columns, but as you can see the navigation part overlaps the red background image that I was going to put in my header div.

I would like some help if poss on how to put this design into divs before I plough staright in!!

Thanks for any help or advice!

can someone lead me to a site that either has examples or teaches me how to outlay a webpage without using many tables? I tried and got lost in confusing websites :S

thanks

Hi there.

I need help creating a certain layout. I need div borders around my layout, but without content inside them the background image is not seen. How could I resolve this without changing height:auto

Thanks in advance

I'm doing a layout with div's and I want to have my navigation a pixel size, but my content area a percentage. (and have them beside each other)

Here's what I've tried, but the 'main' div goes 100% of the window instead of 100% of the space between the left side and the 'nav' div. Is what I'm trying to do possible with div's?

HTML:
<div id="main">
stuff
</div>

<div id="nav">
navigation
</div>

CSS:
#main {
float: left;
width: 100%;
background: #efe;
}

#nav {
float: left;
width: 200px;
margin-left: 4px;
background: #999;
}

I'm using a similar template to the one located he

http://www.linux.co.uk

In Internet Explorer you'll notice a space to the right of the "sponsored links" text in the right hand portlets area. Also a space at the bottom of this same porlet on the left hand side.

It seems to be aggravated at different font sizes.

These spaces don't show up on Mozilla, it works perfectly.

Any ideas for fixing this behaviour?

Thanks..

-j.

i have a problem with my css layout for wordpress, please help me.

in this page: http://rohitkumar.org/blog/index.php?p=29#comments

1. the comment div doesnt have a 10px margin
2. the leave ur comment heading is rite aligned ( i want it to be left aligned)
3. the title of the comment input field is not aligned with the form field
4. users with a non 1024X768 resolutions see the page differently, is there anyway this can be fixed?

index.php:

Code:

<?php 
/* Don't remove this line. */
require('./wp-blog-header.php');
?>
<!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 profile="http://gmpg.org/xfn/1">
	<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
	
	<meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo('charset'); ?>" />
	<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->

	<style type="text/css" media="screen">
		@import url( <?php echo get_settings('siteurl'); ?>/wp-layout.css );
	</style>
	
	<link rel="stylesheet" type="text/css" media="print" href="<?php echo get_settings('siteurl'); ?>/print.css" />
	<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
	<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
	<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
	
	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    <?php wp_get_archives('type=monthly&format=link'); ?>
	<?php //comments_popup_script(); // off by default ?>
	<?php wp_head(); ?>
</head>

<body>
<div id="rap">
<h1 id="header"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>

<div id="content">
<?php if ($posts) : foreach ($posts as $post) : start_wp(); ?>

<?php the_date('','<h2>','</h2>'); ?>
	
<div class="post">
	 <h3 class="storytitle" id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title(); ?>"><?php the_title(); ?></a></h3>
	<div class="meta"><?php _e("Filed under:"); ?> <?php the_category() ?> — <?php the_author() ?> @ <?php the_time() ?> <?php edit_post_link(); ?></div>
	
	<div class="storycontent">
		<?php the_content(); ?>
	</div>
	
	<div class="feedback">
            <?php wp_link_pages(); ?>
            <?php comments_popup_link(__('Comments (0)'), __('Comments (1)'), __('Comments (%)')); ?>
	</div>
	
	<!--
	<?php trackback_rdf(); ?>
	-->

<?php include(ABSPATH . 'wp-comments.php'); ?>
</div>

<?php endforeach; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
</div>



<div id="menu">

<ul>
	<?php get_links_list(); ?>
 <li id="categories"><?php _e('Categories:'); ?>
	<ul>
	<?php wp_list_cats(); ?>
	</ul>
 </li>
 <li id="search">
   <label for="s"><?php _e('Search:'); ?></label>	
   <form id="searchform" method="get" action="<?php echo $PHP_SELF; ?>">
	<div>
		<input type="text" name="s" id="s" size="15" /><br />
		<input type="submit" name="submit" value="<?php _e('Search'); ?>" />
	</div>
	</form>
 </li>
 <li id="archives"><?php _e('Archives:'); ?>
 	<ul>
	 <?php wp_get_archives('type=monthly'); ?>
 	</ul>
 </li>
 <li id="calendar">
	<?php get_calendar(); ?>
 </li>
 <li id="other"><?php _e('Other:'); ?>
	<ul>
		<li><a href="<?php echo get_settings('siteurl'); ?>/wp-login.php"><?php _e('Login'); ?></a></li>
		<li><a href="<?php echo get_settings('siteurl'); ?>/wp-register.php"><?php _e('Register'); ?></a></li>
	</ul>
 </li>
 <li id="meta"><?php _e('Meta:'); ?>
 	<ul>
		<li><a href="<?php bloginfo('rss2_url'); ?>" title="<?php _e('Syndicate this site using RSS'); ?>"><?php _e('<abbr title="Really Simple Syndication">RSS</abbr> 2.0'); ?></a></li>
		<li><a href="<?php bloginfo('comments_rss2_url'); ?>" title="<?php _e('The latest comments to all posts in RSS'); ?>"><?php _e('Comments <abbr title="Really Simple Syndication">RSS</abbr> 2.0'); ?></a></li>
		<li><a href="http://validator.w3.org/check/referer" title="<?php _e('This page validates as XHTML 1.0 Transitional'); ?>"><?php _e('Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr>'); ?></a></li>
		<li><a href="http://wordpress.org/" title="<?php _e('Powered by WordPress; state-of-the-art semantic personal publishing platform.'); ?>">WP</a></li>
	</ul>
 </li>

</ul>

</div>

</div>

<p class="credit"><!--<?php echo $wpdb->num_queries; ?> queries. <?php timer_stop(1); ?> seconds. --> <cite><?php echo sprintf(__("Powered by <a href='http://wordpress.org' title='%s'><strong>WordPress</strong></a>"), __("Powered by WordPress, state-of-the-art semantic personal publishing platform")); ?></cite></p>
</body>
</html>

wp-layout.css:

Code:

/*
    VerySimple - Style for Wordpress
    by Gary Rogers (gary.rogers@dmin.net)
    
    Licensed under the Creative Commons License
    (http://creativecommons.org/licenses/by/2.0/)
    
    ** NOTE **
    Not all Styles are used here, but they all exist in Alex's sample
    page, so they remain for reference.
*/

body {
    margin: 0px;
    padding: 0px;
    font-family: 'Georgia';
    font-size: 12pt;
}

blockquote {
    margin-left: 20px;
    color: #000;
}

a img {
    border: none;
}

code {
    font-family: Monaco, 'Courier New', Courier, monospace;
    font-size: 10pt;
    color: #000;
}

h2 {
    font-size: 12pt;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
    color: #000;
    text-align: right;
}

#rap {
    width: 900px;
    margin-left: 25px;
    margin-right: 25px;
}

#header {
    font-size: 36pt;
    font-weight: bold;
    text-align: center;
    margin-bottom: 40px;
}

#header a {
    text-decoration: none;
    color: #000;
}

#header a:hover {
 text-decoration: underline;
}

#content {
    width: 725px;
}

.post {
    border: 1px solid #000;
    margin: 25px;

}

.storytitle {
    font-size: normal;
    font-weight: bold;
    margin-left: 10px;
    margin-bottom: 2px;
}

.storytitle a {
    text-decoration: none;
    color: #000;
}

.meta {
    font-size: x-small;
    margin: 0px;
    padding-left: 10px;
    margin-bottom: 2px;
}

.meta ul {
    display: inline;
    list-style: none;
    margin: 0px;
    padding: 0px;
}

.meta li {
    display: inline;
}

.post-categories {
    font-style: normal;
}

.storycontent {
    margin: 10px

}

.storycontent img {
    margin-right: 15px;
}

.feedback {
    font-size: normal;
    text-align: right;
    padding-right: 10px;
    margin-bottom: 20px;
}

#commentform input, #commentform textarea {
 background: #fff; 
 border: 1px solid #000; 
 margin: 10px;
}

.postcomment {
 text-align: left;
 margin: 10px;
}

<h2 id="postcomment" style="text-align: left">Leave a comment</h2>

#commentform textarea {
 width: 90%; 
 margin: 10px;
}
 
ol#comments li p {
 font-size: 100%;
 margin: 10px;
}

.credit {
    width: 700px;
    margin-left: auto;
    margin-right: auto;
    font-size: x-small;
    text-align: center;
    padding-top: 10px;
}

#menu {
    position: absolute;
    top: 121px;
    margin-left: 765px;   
    font-size: normal; 
    width: 180px;
}

#menu a img {
    padding: 3px;
}

#menu ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

#menu ul li {
    font-weight: bold;
    margin-top: 10px;
}

#menu ul li p {
    font-weight: normal;
}

#menu ul li ul {
    font-weight: normal;
    margin-top: 4px;
    margin-left: 0px;
    padding-left: 10px;
}

#menu ul li ul li {
    text-indent: 0px;
    font-weight: normal;
    padding: 0px;
    margin: 0px;
    margin-top: 0px;
}

#wordpress {
    font-style: normal;
}

#categories {

}

#search {

}

#archives {

}

#calendar {
    font-weight: bold;
    text-align: left;
}

#wp-calendar {
    font-weight: normal;
    padding-left: 10px;
}

#wp-calendar caption {
 color: #000;
 font-size: normal;
 font-weight: bold;
 text-align: left;

}

#prev {

}

#pad {

}

#today {
    background: #CCC;
}

#other {

}

#style {

}

phew, lotta code i say (i just copied and pasted btw)

thanks

thanks

This is my mockup: http://beta.investchallenge.com/

The corresponding CSS for the page: http://beta.investchallenge.com/styles/layout.css

The left and right columns are not lining up like they should be, I can't figure what is causing this is the CSS.

Any ideas?

I'm trying to get this layout to work, but just can't seem to. I'd like to be able to do this in tableless fashion but if I have to use tables I'll do so.

Basically, the header and the main content areas need to be centered and a fixed width at all times. however, there are 2 bars that need to be fluid and positioned in relation to the header and content areas.

I couldn't think of a way to explain it that it would make sense, so I've attached an image that represents what I'm talking about.

I'm anxious to hear whether this can be acheived or not.

Thanks!

-B

Hi,
How do I position "new.gif" on the same line as text
"some subject here" ?
Right now "new.gif" appears on right side as intended but underneath text.
Code:

<td><a href="">some subject here<span style="float:right"><img src="new.gif" alt="New" width="30" height="10" align="middle" /></span></a></td>

Thank you.

Hello,

I am creating the base design of a web site that consists in two
horizontal bars: Navigation and Intro.

"Navigation" will contain the menu.

"Intro" will contain two items: a logo (image) on the left and a
banner (flash) on the right.

In this moment I have the following:
http://www.27lamps.com/Beta/Bar/Bar.html

I am not sure if using a background image is the best way to do
this ...
... it seems to me that since the two bars are two different sections
then I should use two divs.

So the questions I have:

1. Should I use two divs, one for each bar, and setting the line-
height in em instead of using the background image?
2. How to place side by side the logo and the banner and centered them
vertically?
3. I would like the Navigation and the Intro bars to have a minimum
height.

Thanks,
Miguel