CSS - Problems With Embedding Page Header In <h1>

Here is the page

Things that I am having problem with:
1) I want 10px more space on the left side so it aligns on the left with the rest of the text (like h3 does).

2) On-line Customer Support Form and On-line Technical Support Form links are not aligning left with the rest of the <p> I have tried changing things to fix this with no luck.

3) How can a get a block of text to be on the right side of the Technical support block of text - sort of like a column??

The only thing I can think of is creating a layer, but I don't know if that makes good design sense - so is there another better way??

Here is my css code:
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;
}

/*text*/

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

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

h2 {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	font-size: 14px;
	font-weight: bold;
}

h3 {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

pre {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
}

/*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: transparent;
	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: transparent;
	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;
}

/*customer support*/

#csupport {
	padding: 10px auto auto auto;
	text-align: left;
}

#csupport h1, h2, h3{
	color: #000099;
	font-weight: bold;
}

#csupport h2 {
	margin-left: 20px;
}

#csupport h3 {
	display: inline;
	margin-left: 20px;
}

#csupport img {
	margin-right: 20px;
	float: right;
	clear: none;
}

#csupport ul {
	list-style: none;
	padding: 0px 0px 0px 20px;
	margin-left: 20px;
}
	
#csupport li {
	margin-left: 10px;
	display: inline;
}

#csupport a:link, #csupport a:visited {
	background-color: transparent;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

#csupport a:hover, #csupport a:active {
	background-color: transparent;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #990099;
	font-size: 12px;
	font-weight: bold;
}

.contact {
	margin-left: 195px;
	margin-right: 20px;
}

.contact a:link, .contact a:visited {
	margin-left: 195px;
}

.contact a:hover, .contact a:active {
	margin-left: 195px;
}

Here is my xhtml code:
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="customer_support.html">Customer Support</a></li>
	  <li><a href="training_services.html">Training & Services</a></li>
      <li><a href="exhibitions.html">Exhibitions</a></li>
      <li><a href="newsletters.html">Newsletters</a></li>
      <li><a href="downloads.html">Downloads</a></li>
      <li><a href="useful_links.html">Useful Links</a></li>
      <li><a href="industry_information.html">Industry Information</a></li>
	  <li><a href="industry_information.html">Sitemap</a></li>
	</ul>
  </div>
  <!--end of side column -->
  
  <!--begin main column -->  
    <div id="mainColumn"> <!-- InstanceBeginEditable name="Main_Section" -->
	<div id="csupport">
	  
	  	<h1>Vitalograph Customer Support</h1>
			
           <p class="contact">Our trained customer support staff is available for telephone support 
          on sales advice, technical queries or information requests. A team of 
          field based sales and training advisors are also on hand to provide 
          spirometry training or product demonstrations.</p>
			
		<img src="/images/uk_customer_support.jpg" width="233" height="190" alt="Customer Support Staff" /> 
        <h2>Contact Us</h2>
			
			<p class="contact">
			Vitalograph Ltd<br />
			Maids Morton, Buckingham<br />
			MK18 1SW<br />
			England<br />
			</p>
			
			<p class="contact"><h3>Phone:</h3> +44(0) 1280 827110<br />
			<h3>Fax</h3>: +44(0) 1280 823302<br />
			</p>
				
			<p class="contact"><h3>Email: </h3> <a href="mailto:sales@vitalograph.co.uk">sales@vitalograph.co.uk </a><br />
		    <a href="/enquiry_forms/customer_support_form.html">On-Line Customer Support Form</a></p>
			
			<ul>
				
          <li><a href="http://www.vitalograph.ie/domains1c922.html">Ireland</a></li>
				
          <li><a href="http://www.vitalograph.de/unternehmen/kontakt.html">Germany</a></li>
				
          <li><a href="http://www.vitalograph.com/site_files/contact.html">USA/Canada</a></li>
				
          <li><a href="http://www.vitalograph.co.uk/contact_international.html">Other</a></li>
			</ul>
          			
			<h2>Technical Support</h2>
			
				<p class="contact">
			Vitalograph Ltd<br />
			Maids Morton, Buckingham<br />
			MK18 1SW<br />
			England<br />
			</p>
			
			<p class="contact"><h3>Phone:</h3> +44(0) 1280 827110<br />
			<h3>Fax</h3>: +44(0) 1280 823302<br />
			</p>
				
			<p class="contact"><h3>Email: </h3> <a href="mailto:techsupport@vitalograph.co.uk">techsupport@vitalograph.co.uk </a><br />
		    <a href="/enquiry_forms/technical_support_form.html">On-Line Technical Support Form</a></p>
			
			<ul>
				
          	<li><a href="http://www.vitalograph.ie/domains1c922.html">Ireland</a></li>
				
          	<li><a href="http://www.vitalograph.de/unternehmen/kontakt.html">Germany</a></li>
				
          	<li><a href="http://www.vitalograph.com/site_files/contact.html">USA/Canada</a></li>
				
          	<li><a href="http://www.vitalograph.co.uk/contact_international.html">Other</a></li>
			</ul>
			
	  </div>
	
	<!-- InstanceEndEditable -->
  
  </div>
  <!--end of main column -->
  
  </div> 
  <!--end of wrapper--> 

I truely hate IE!

Firefox renders all my coding correctly and makes the website look great!! However, when I try to view it in IE, something always goes wrong. There is only one problem with firefox which I shall highlight below

IE 7.0+ = The footer is NOT being placed at the bottom NOR is it being capped at 1000 pixels. It is going 100% across the full screen. The footer displays at the center of the screen rather than the bottom!

IE 4.0 - 6+ = Everything goes wrong here. The header displays the red all the way down the left column and right column . The background color of the .png is no longer transparent. The footer displays 100% rather than capped at the 1000px and the main top navigation does not react as fast as it should because there is an error somewhere. The top navigation adds additional padding and doesn't load the hoover button as fast!

Firefox = The footer doesn't display 1000px and it does not follow the format of the main top navigation which it is meant to, however, it goes 100% across the enter browser.

The domain link is: www.gc69.com

Can anyone PLEASE help me with these CSS errors and provide me with ANY solutions that may help my delicate situtation ASAP!!!

Problem page: http://www.ilumos.co.uk/site/?page=events
Working page: http://www.ilumos.co.uk/site/
Style: http://www.ilumos.co.uk/site/style/styleDefault.css
Hi all,

I'm trying to make the glowyness (inside div#wrap) on the right side of the page extend to the bottom of the viewport/window, even if there isnt enough content (see problem page above) but the trouble is that when I apply height: 100% (with the same in a parent element) IE refuses to scroll the longer pages.

Is there anoter way to make div#wrap fill the window?

Thanks

I have my site centred in the browser window, yet if you resize the window (as if emulating 800 x 600 or smaller) then the scroll bar appears on the right as it should.

But the web page has the top section cut off and is not accessible, is this my code? or is this because of the size of the web site?

The page can be viewed he

http://www.spanishguitar.co.uk

If you make your height of your browser window smaller, you will see that the top of the site gets cut off. How can I fix this?

My css for this is:
Code:

#PageDiv {
	position:absolute;
	left: 50%; 
	top: 50%;
	width: 770px;
	height: 600px;
	margin-top: -300px; /* half of the height */
	margin-left: -385px; /* half of the width */
	border: 1px solid #000;
}

I have a simple page layout using div's and CSS, but the alignment becomes screwed up when printing the page. My CSS for the layout is:

#OneColumn {
width:575px;
background:#fff;
}

#LeftColumn {
float:left;
width:458px;
background:#fff;
padding-top: 15px;

}

#RightColumn {

float: right;
width:113px;
background:#fff;
text-align:center;
padding-top: 38px;
font-family: Arial;
font-size: 10px;
color: #000;
}

My code is formatted in the same order so, on the actual page OneColumn is on top of the left and right columns. If the page is short (less than on page) it prints and looks fine in print preview.

Problem 1: In IE 6
If the page is longer than one page when printed the information that is in OneColumn is on the first page of the printout and the rest of the information (from the left and right column) is on the next pages.

Problem 2: In IE 6 and Mozilla Firefox 0.8
Also, the right column is used to display thumbnail-pics that correlate to the text in the left column. At times I used styles to space the pictures. Here is one of them:

.spacePic {
margin-top: 95px
}

This works fine except for when printing the images, they generally are printed lower than they apprear on the screen.

Any suggestions or tips would be appreciated. Thanks for your help!

Casey

I don't mind telling yall, I'm a bit hesitant to post here, only because I'm very new to html and css, just learning. Folks here are far above my ability, I've got many of the pages on site bookmarked for reference.

I'm taking this plunge because I'm ready to rip hairs one by one on a problem.

I have a friend who originally made a site in a builder program *shudders* and he has asked me to convert it to more conventional pages (he's determined to keep this theme and I'm not good enough to remake the entire site by hand yet). This program created every thing on the pages as a Div with css styling embedded in the document.

Ive got everything working perfectly except that I can not for the life of me get the Div.banner to stretch the width of pages in order for it to span the width of any resolution.
What I'm trying to do is simply (or should be) make a 93px by 3 or 4 px bar repeat the length of the div. Here is the code its using at this time.

Code:

<STYLE TYPE="text/css">
DIV.banner { position:absolute; top:0px; left:0px; z-index:0; }
....</STYLE>

<DIV class="banner"><IMG SRC="images/vbar.PNG"  WIDTH=900 HEIGHT=93 BORDER=0></DIV>

The above works but its a fixed width and I would like it to be full width no matter what resolution ones using.

I have tried making the Div class="banner" use a width=100%.
This causes the image to be shown at top=0 and left=0 once only. I tried adding background-repeat repeat-x to the css code. Any other changes I make like removing the Width from the Div class all together causes it to just go away.

I've been able to manipulate everything else from this horrible theme fine except this. I'm sure there is something simple I'm missing and if you need to see more of the index page code just let me know (its not online at this time). I didn't want to put in too much stuff and being such a n00b at all this, I'm learning so be gentle with me..

Thanks in Advance
Me

http://www.chequedelarealidad.org/

There seems to be a problem with this site when loaded into the Mozilla broswer. When you initially click on the 'Projecten' page, the bottom bar contents are placed about two inches too high up the page. However, when I click the refresh button, this problems corrects itself.

Once corrected, the page loads fine every time, but if I clear my web cache and try again, the first time I click on the link the problem appears again.

Is there are mistake in my css, or does anyone know how I can correct this? I will appreciate any input.

Thank you in advance,

Toria

Hey,
I use div's to create my page structure (you can see it on the screenshot) http://img144.imageshack.us/img144/...tructurege3.jpg

The green part is the navigation and the blue part the contents of the page. But as you see the colors both dont fill up till the bottom of the document. And if i set: height: 100%; then it will fill up to the bottom, but when the contents gets to big and a scrollbar is needed, then the part that you scroll down is not filled up with the colors anymore.

Does anybody know how to fix this?

Thanks in advance.

Hi,

I have a new template, and a new separate menu; the code has been validated on both. I'm having trouble adding the new menu to the new template, replacing the menu that came with the template.

What I would like to do is embed it if possible so when I add content I won't have to change the menu on 400 different pages; also this is a nice menu with lots of code in the html.

Is it possible to embed a menu from a root file with a small code?

If not how do I add the huge code to my template? I have tried putting it on the top but the drop down doesn't work and parts of it are obscured by the content on my page. If I put the menu about half way down my page it works alright, but I need it on the top.

(I tried to post the urls below but the forum rules prevent new members from doing so.)

I know this is a lot of info, but I hope you can help me, if so I really appreciate it. Thanks,

Dave

Hi,

I wrote a code that would import some mysql data into my website. Now I want to format that data into a nice table. Table is probably the wrong term since I am trying to avoid HTML. Anyway I was wondering how you can embed CSS into a PHP script. here is my website: dicebaseball dot org

The 4/27Bruins0Dragons0 is the data I am trying to make tabular


Here is the code that I am trying to embed CSS into:

Code:

<?php
mysql_connect("localhost", "....", "....") or
    die("Could not connect: " . mysql_error());
mysql_select_db("...");

$result = mysql_query("SELECT * FROM scores")
or die(mysql_error());  
$row = mysql_fetch_array( $result );

echo $row['game_date'];
echo $row['away_team'];
echo $row['away_score'];
echo $row['home_team'];
echo $row['home_score'];
?>

I'm relatively ignorant about css and html, but I've faked my way along so far. But I've encountered a problem. I designed a style for a blog on LiveJournal, and it looks OK there. (http://www.livejournal.com/users/javajed/). I've also put a small bit of JavaScript in my website to embed my blog there. (http://www.jaredvoss.com/). On my website, the embedded blog is all screwy. All three DIVs should be contained within the scrolling layer, but only two of them are. Originally the sidebar DIV was even hidden behind the layer it's embedded in (I brought it forward using a z-index code). It seems like the sidebar DIV is taking it's position cues from the main body of my site, while the other DIVs are taking their position cues from the layer they're embedded in. I want all three DIVs to be aligned as they are on LiveJournal, and contained within the scrolling layer on my website. Any ideas? I've tried using wrapper divs and container divs (maybe not correctly) without success. Thanks for any help!

Hello,

I'm brand new to this CSS business, so please be gentle!

I'm trying to place my AP Div objects inside a table so that their positions are relative to the edges of the table, rather than relative to the edges of the browser window.

I'm guessing I need to somehow put the code for the table around the code for the AP Div objects, but I can't work out how it's supposed to look. Any guidance would be much appreciated.

Thanks!

Issue resolved using forum search.

Thanks for having such great resources - I just had to search for a while.

I've been making ok progress with CSS (thanks to your help ) but have come up with a problem when wanting to embed a flash movie into my webpage. How do i do it using CSS?

the follwing Html code works fine but fails upon validation.

Code:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="300" height="300>
        <param name="movie" value="flash/home.swf">
        <param name="quality" value="high"><param name="BGCOLOR" value="#A1D7FD">

        <embed src="fighter.swf" width="250" height="250" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" bgcolor="#A1D7FD"></embed></object>

Any help is appreciated. Also - is it a bad idea including small intro flash movies for webpages?

any help is appreciated