CSS - Placing Content Into A Colored Box

I know the user can enable printing of bg grcs and colour,
this is an administrative thing so I can put in the manual that they need to do that in their browser if they want to print a certain page. I have certain rectangles on the page that align perfectly with areas on the background graphic on the screen. However, when I print preview in Firefox this synch is lost and the rects don't line up with the bg graphic. Kravvitz will hate this page cuz it has a few xhtml errors. I don't know how to make those errors go away without ruining something else. For example,
"no system id specified."

Quote:
Your document includes a DOCTYPE declaration with a public identifier (e.g. "-//W3C//DTD XHTML 1.0 Strict//EN") but no system identifier (e.g. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"). This is authorized in HTML (based on SGML), but not in XML-based languages.



so if I put that system identifier in it then
the page fails to lock if I render a secure version of it because http://www.w3.org is insecure content, and erodes consumer confidence.


The "name" attribute well if you don't have it when you post, I don't think the posts will register it, will they?

I have proprietery attributes also and they are kinda necessary.
The rest of the errors I could probably clear, but 21 is not so bad compared to 2,874.....


Anyway here is an example
http://demo.tixrus.us/98

How can I get this page to print correctly???

How does one go about placing an image in a paragraph in CSS? I cannot seem to complete this.

doug

i want to place images:
top right,
middle right,
bottom left,
these images should float above any other images or content that is on the page, the must also stay in there positions when the browser is resized.

I'm still new to css so can any body help me pls

I know this is probably the most asked question here, but I've been playing with it for a while and ...

Anyway, this is my page

This is my CSS

Code:

body {font-family: Arial, Helvetica, sans-serif}
td {font-family: Arial, Helvetica, sans-serif}
th {font-family: Arial, Helvetica, sans-serif}

div.container {
  width:750px;
  margin:auto;
  }
	
div.logo {
  float:left;
  text-align:center;
  width:138px;
  height:138px;
  }

div.header {
  height:65px;
  border:1px solid blue;
  line-height:50%
  }

div.picbar {
  height:65px;
  border:1px solid red;
  line-height:50%;
  }
	
/* The following code creates the navigation items */
#navbar {
  clear:left;
  float:left;
  width:auto;
  padding:0;
  vertical-align:middle;
  }
		
#navbar li{
  margin:2px; /*dictates the space between navbar items */
  padding-right:0.5em;
  width:120px;
  float:left;
  text-align:center;
  }
	
#navcol {
  clear:left;
  float:left;
  width: 125px;
  padding: 0;
  margin: 10px 0 0 0;
  font-family: 'Trebuchet MS', 'Lucida Grande',
  Verdana, Lucida, Geneva, Helvetica, 
  Arial, sans-serif;
  color: #99CCFF;
  }
	
#navcol ul, #navbar ul{
  list-style:none;
  margin:0; /* removes indent in IE and Opera */
  padding:0; /* removes indent in Mozilla and Netscape 7 */
  border:none;
  list-style-type:none; /*turns off display of bullet */
  }

#navcol li {
  border-bottom:1px solid #003366;
  margin:0; /*dictates the space between navbar items */
  }

#navcol li a, #navbar li a {
  display: block; /* enables the entire link box to be clickable */
  padding: 5px 0 5px 5px;
  border-left: 10px solid #003366;
  border-right: 0px solid #508fc4;
  background-color: #2175bc;
  color: #fff;
  text-decoration: none;
  width: 100%
  }
	
#navcol li a:hover, #navbar li a:hover {
  border-left: 10px solid #99CCFF;
  border-right: 0px solid #5ba3e0;
  background-color: #2586d7;
  color: #fff;
  }
	
div.intro{
  margin-left:145px;
  position:relative;
  padding-top:1px;
  font-family:Verdana,Lucida;
  font-size:12px;
  line-height:150%;
  }

div.google{
  float:right;
  margin-top:10px;
  width:305px;
  height:255px;
  padding:0 0 5px 10px
  }
	
div.footer {
  margin-top:50px;
  width:750px;
  word-spacing:100px;
  text-align:center;
  float:center;
  height:20px;
  background-color:#1c64d1
  }

div.copyright {
  width:750px;
  text-align:center;
  float:center;
  height:20px;
  }	


a.ft:link { color: white; text-decoration: none }
a.ft:active { color: red; text-decoration: none }
a.ft:visited { color: white; text-decoration: none }
a.ft:hover { color: yellow; text-decoration: underline }

h1.logo{padding:20px;margin:10px}
h2.header{color:blue;font-size:1.2em;padding:20px;margin:10px}
h3.title{font-family:arial;color:green;font:courier}
h4.ftlinks{padding:10px;font-size:12px;color:"dark blue"}
b.subtitle{font-variant:small-caps;font-size:12px;font-weight:bold;after-content:" - "}

What I want to do is have the navbar div be positioned in the center of the red box that I have defined as the picbar div...it should be under the "Funkyfoof - Smarter Spending..."

Thanks for your time

I have a scrolling DIV and a button which when clicked gives the user the option to insert another such DIV below the existing one. How can I position a new DIV directly below another regardless of the length or height of the first DIV. How would margins play a role?

I have a larger 22" in screen when I designthe layout of my site. When I viewed it on a small 15" screen the back ground image is making the page scroll horizontially.

Here are some sites that fit well on a small screen. What can I do to fix this?

http://www.beakable.com/


http://www.gazelletouch.com/

http://www.gummisig.com/

My web site: http://markallen.us

Hey everyone

I'm a beginner at CSS. I'm trying to place divisions exactly where I want, but when I attempt to overlap them it doesn't render the way I intend it to (inconsistent in different browsers as well.) Does anyone have any tips?
Code:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<?php 
//variables

//title
$title_ = "Title";
?>
<style type="text/css">
*{
  padding: 0;
  margin: 0;
}
#myhr {
width: 90%;
}


body {
  padding: 15px 0px 15px 0px;
  margin-left:auto;
  margin-right:auto;
  margin-top:auto;
  margin-bottom:auto;
  width: 904px;
  background-color:#CCCC66;
}
#container {
  padding:
  float: left;
  width: 898px;
  height: 900px;
  background-color:#999999;
  border: solid rgb(250,0,255);
  border-width: 2px 2px 2px 2px

}  
#link1{
margin: 0px 0px 0px 0px; 
float: left;
width: 222px;
background-color:#CCCC66;
height: 25px;
border: solid rgb(250,0,255);
border-width: 2px 1px 2px 1px;
z-index:1;
}
#link2{
float: left;
height: 25px;
margin: 0px 0px 0px 0px;
width: 223px;
background-color:#CCCC66;
border: solid rgb(250,0,250);
border-width: 2px 1px 2px 1px;
z-index:1;
}
#link3{
float: left;
margin: 0px 0px 0px 0px;
height: 25px;
width: 223px;
background-color:#CCCC66;
border: solid rgb(250,0,250);
border-width: 2px 1px 2px 1px;
}
#link4{
float: left;
height: 25px;
width: 222px;
margin: 0px 0px 0px 0px;
background-color:#CCCC66;
border: solid rgb(250,0,250);
border-width: 2px 1px 2px 1px;
z-index:2;
}
#innerbox{
  width:136px;
  height:177px;
  margin: 0px 0px 0px 68px;
  z-index:0;
  background: #CCCC66;
  border: solid rgb(250,0,250);
  border-width: 2px 2px 2px 2px;

}
#innerbox2{
  width:136px;
  height:177px;
  margin: -182px 0px 0px 275px;
  z-index:0;
  background: #CCCC66;
  border: solid rgb(250,0,250);
  border-width: 2px 2px 2px 2px;

}
#innerbox3{
  width:136px;
  height:177px;
  margin: -182px 0px 0px 482px;
  z-index:0;
  background: #CCCC66;
  border: solid rgb(250,0,250);
  border-width: 2px 2px 2px 2px;

}
#innerbox4{
  width:136px;
  height:177px;
  margin: -260px 0px 0px 689px;
  z-index:1;
  background: #CCCC66;
  border: solid rgb(250,0,250);
  border-width: 2px 2px 2px 2px;

}


</style>
<title><? echo $title_; ?></title>
</head>

<body>
<div id="container"><br />
<h1 id="myh1" class="h1color_" align="center"><? echo $title_; ?></h1>
<div align="center">
<hr align="center" id="myhr" />
</div>
<br />
<div id="link1" style="background-color:#CCCC66"><p>link1</p></div>
<div id="link2">link2</div>
<div id="link3">link3</div>
<div id="link4">link4</div>
<!--<button onclick="positioning_width_other()">pos other</button>-->
<br />
<br />
<br />
<br />
<div id="innerbox"><p align="center">Box</p></div>
<div id="innerbox2"><p align="center">Box2</p></div>
<div id="innerbox3"><p align="center">Box3</p></div>
<div id="innerbox4"><p align="center">Box4</p></div>
</div>
</body>
</html>

Sorry folks, css novice here.

But i'm trying to get this div into the center of my browser. It works vertically, but each time I try to sort it out horizontally it goes all over the place - any thoughts on this?

Code:

<html>
<head>
  <title></title>
  <style>
    .greenBorder {border: 1px solid green;} 
	 .redBorder {border: 1px solid red;} 
  </style>
</head>

<body>
 
    <div class="redBorder " style=" #position: absolute; _top: 50%;display: table-cell; vertical-align: middle; text-align:center;">
      <div class="greenBorder" style=" #position: relative; #top: -50%; " >
       stuff
      </div>
    </div>

</body>
</html>

what am I doing wrong? recommend any good css books?

Well, it's been an extremely long night. I've been trying to get this bottom bar element working for at least a couple nights now, and I feel so very close.

I've been trying to use footerStickAlt, which would allow me to put this baby down on the bottom of my page and would not overlap or screw up the scrolling when installed.

However, as you might be able to tell from my website, http://www.brianmooremedia.com, it's not working too well.

Here is my CSS: http://www.brianmooremedia.com/style.css

If anybody can help me make this red bar stop and stay down once the window size has gotten smaller than it, please let me know!

Thanks a ton,

Brian

I 'think' style sheets are the answer to my problem. Now I cannot webdesign and so everything is a mishmash but I saw this accordion image viewer made in AJAX for free and wanted to put it on my site, but I need to position it in an exact position on my webpage.

How do I do this please?

Accordion: http://www [dot] ajaxcrawler [dot] com/2008/01/image-menu-using-moo-tools [dot] html

My webpage: http [colon] // lovelago.googlepages [dot] com/test7a.html

CSS: http [colon] // lovelago.googlepages [dot] com/main.css


Also, I only need a really trim version of this CSS, as it came with the webpage that had the accordion and has all of its 'own style' that I do not need.

Thanks to anybody!

note to admin: I'm not a spammer, thanks.

I have a page that I am generating that I would like to have the images (in a box) placed in 3 columns. I generate the code via a simple php script but it only creates a single column. I have a #pagePane selector around a #bodyPane selector and have a number of selectors of the form #appDivXY where X and Y are the column and row I want to put them in.

#pagePane {
width : 800px;
position : relative;
table-layout : fixed;
text-align : center;
margin-left : auto;
margin-right : auto;
}

#bodyPane {
width : 800px;
position : inherit;
margin : 5% auto;
}

and a series like the following:
#apDiv00 {
position : absolute;
width : 250px;
height : 250px;
top : 100px;
left : 25px;
border : thin;
border-color : #000000;
border-style : solid;
}

#apDiv10 {
position : absolute;
width : 250px;
height : 250px;
top : 100px;
left : 275px;
border : thin;
border-color : #000000;
border-style : solid;
}

I have validated the code and only get some minor warnings about colors.

The full page can be generated at mandp dot lamster dot org slash french40sx.php

I am sure (or I hope anyway) that I am doing something trivialy wrong but I have no idea what it could be. I have been playing with this for hours.

Thanks for any help.
Hal

I am having trouble with placing an image on my page and having that image repeat itself all the way down the page.

Code:

<div id=left> ........ content ...</div>

<div id="image">this is where i want the image</div>

<div id="content">content here</div>

Where the id=image tag is placed i want the image to appear and roll all the way down the screen. I have the following css code

Code:

#left {
	position: absolute;
	left: 0px;
	width: 215px;
	background-color: #efefef;
	border: 1px dotted #ccc;
	}
#image1 {
    background-image: url("http://mydomain.com/image.jpg") 
    background-repeat: repeat-y;
    width: 15px;
    margin-left: 215px;
}
#center {
	
	margin-left: 260px;
             margin-right: 0px;
	overflow: hidden;
	}

The image does not show on the page at all, i need to know if i am doing this correctly or if there is another way without hardcoding the image into the page

Cheers

OK here is my setup. I have a 3rd party search on my page, the script produces results and the only edit I have access to is the css...(and the actual script ) not the <div> layout of the results page.

The script generates a block and then an alt block for the search results with an image floating beside the text (if there is one available) My first problem was the amount of output text varies but does have a maximum.....I have fixed this by specifying the height of the result block to contain it.

My real problem is the sizes of my thumbnail images vary and this allows my text to flow all around it if the image height doesn't fill the area as you can see in my screenshot.

edit: apparently I can't post images but here is a link to the image

http://img.photobucket.com/albums/v288/schmooot/various%20posted/sample.gif

here is my css pertaining to the section
Code:

		.result_image { float: left; display: block; }
		.result_image img { margin-top: 5px; border: 1px solid #EF3013; max-height: 75px; max-width: 75px; }

		.result_block { margin-top: 0px; margin-bottom: 0px; background: #BBBBBB; border: 1px solid #000000; height: 100px;}
		.result_altblock { margin-top: 0px; margin-bottom: 0px; background: #DDDDDD; border: 1px solid #000000; height: 100px;}

I would like the text to stay 80px from the left of the box always.....regardless of what size the image is.

I attempted to force it by specifying the image width to be 75px and it did work but then it force resized my images to fit and some of them need to retain the aspect.
I made them retain their aspect ratio by using the max-width and max-height attributes but now some images don't have the height to fill the space

So really how do I make the 'block' containing the image to always be the same height of the text beside it (or just to always be 100px)...or force the text 'block' to stay with an 80px left margin.

The image is within the text block as you can see in the output source below so I can't just add a margin to the block...also I cannot edit the actual <div> output as I do not have access to the place it is defined...

but here it is for reference

Code:

<div class="result_altblock"><div class="result_image"><a href="item link"><img src="image" alt="" class="result_image" /></a></div><div class="result_title"><b>4.</b>&nbsp;<a href="link">Title</a></div>
<div class="description">Description</div>
<div class="infoline"></div>
</div>
<div class="result_block"><div class="result_image"><a href="item link"><img src="image" alt="" class="result_image" /></a></div><div class="result_title"><b>4.</b>&nbsp;<a href="link">Title</a></div>
<div class="description">Description</div>
<div class="infoline"></div>
</div>

Is there a way to define a text style where a dash and a space is automatically inserted after the text?

If I want this:

Subtitle and then content

To look like this:

Subtitle - and then content

How can I do that?

Thanks