CSS - Complex Backgrounds With Css

I'm having trouble with a table layout I'm trying to convert to a float layout

my attempt so far is as follows

Code:

--loop--
lfloat{
float:left
}
boatLeft{
width:100px;
}
#cls# gets replaced with a class that only sets the background for odd and even rows.
	<div class="lfloat boatLeft #cls#" style="border-right:1px solid black;height:150px;">
		<a href="javascript:void(0);" onclick="displayVessel(#rssearch.YSNNUM#);">View Details*<br />
			<img id="thumb#currentrow#" style="border-color:white;width:100px;" src="#getpic.thumbpicname#" alt="#boatname#" />
		</a>
	</div>   
	<div class="#cls#">
		<div class="boatLeft lfloat">
			<strong>Boatname</strong>
		</div>
		<div>
			<strong>#BOATNAME#</strong>
		</div>
		<div class="clear"></div>
		<div class="boatLeft lfloat">
			LOA 
		</div>
		<div>
			#loam#m / #loaft#' #val(loain)#"
		</div>
		<div class="clear"></div>
		<div class="boatLeft lfloat">
			Builder
		</div>
		<div>
			#MFGNAME#
		</div>
		<div class="clear"></div>
		<div class="boatLeft lfloat">
			Naval Architect
		</div>
		<div>
			#hulldsnr#
		</div>
		<div class="clear"></div>
		<div class="boatLeft lfloat">
			Designer
		</div>
		<div>
			#designer#
		</div>
		<div class="clear"></div>
		<div class="boatLeft lfloat">
			Decorator
		</div>
		<div>
			#decorator#
		</div>
		<div class="clear"></div>
		<div class="boatLeft lfloat">
			Stylist
		</div>
		<div>
			#stylist#
		</div>
		<div class="clear"></div>
	</div>
	<div class="clear"></div><!--- clear the float for the outer div --->
-end loop--

in both ie and FF this looks terrible. I'm not sure If I should just be using a table here or if I should be using floats.

Gary you should probably have somehting to say about that...

the attachment show's how its supposed to look. The black boxes represent block level elements, not borders.

Dave

I am trying to create a completely non-uniform layout for one of my clients using only CSS. I would like to accomplish this using only floats that are cross-browser supported.

The layout is split up into 9 different panels that need to be positioned correctly.

Is this achieved simply by using float and clear? I have been experimenting and have been failing. What about positioning? Would kind of positioning would I use to arrange something inside of a parent div?

See attached file for layout.

P.S. I know I can get this exact layout done using tables, but I would much rather do this with some "simple" CSS.

Does anybody know of a 3 column layout that does not use absolute positioning and uses X/HTML code like the following? I've found one where the left two columns are contained in an extra <div> (here), but I kind of need the opposite.

Code:

<div id="left">
</div>
<div id="container">
  <div id="main">
  </div>
  <div id="sidebar">
  </div>
</div>

I'm working on my personal website and needed something quick so I found a free template I liked and started changing things as needed. The way the header works is it uses a background img for the nav so it displays off both sides of the browser. This image scrolls up as the page does. To make it look more interesting I wanted to add a simple background image to visually box in the content... but I need this one to be fixed. Every solution I've tried doesn't seem to work. I'm posting separate test links with a description why its not working. (I'm a new user so you'll have to copy/paste links. Figured it'd be easier for you to see it than post 8 different code tags).

First thing's first: Images I'm moving around a
bg_boarder.jpg and bg_general.jpg

bradyoo.com/test.html
Both bg imgs in body {} - boarder img scrolls.

bradyoo.com/test02.html
Boarder img fixed in wrapper {} - boarder img displays on top of bg_general by YO logo.

bradyoo.com/tes03t.html
Boarder img fixed in body {}, general img in header{} - General image doesn't display beyond wrapper.

I even tried fixing everything (not the optimal result, but I will use it if this is the only solution)

bradyoo.com/test04.html
Both bg fixed in body {}, position: fixed in header {} - I added the fixed position in the header to keep the nav from scrolling but the embeded content displays on top of the header when scrolling.

Drumroll, almost. Scrolling image, image swap, and css image backgrounds.

This one is working almost exactly as I would like for it to in IE and FF.
http://www.mtn.ncahec.org/web/grace/bagwell/test5.asp

But, if you scroll down, why are the backgrounds not going all the way to the bottom in FF? Starts acting weird around item 29...... Works fine in IE6.

Thank you, thank you, please, please?

Janet

Hi - I'm playing with the Css Zen Garden example. I'm basically trying to do a real simple layout - semi-transparent boxes, that switch from a background image to a solid color when the mouse hovers. On firefox, its working pretty much the way I want. IE pretty much completely chokes though, and I can't figure out why - it doesn't want to apply background images or colors to the <div>'s. My example is he http://kc9ddi.poromenos.org/zen and the style sheet is at http://kc9ddi.poromenos.org/zen/sample.css

I can't figure out what IE's doing with the background colors and images. I'd appreciate any help anyone would offer.

Here's an example of css for a div

Code:

#preamble {
    border-style: groove;
    border-width: 0.2ex;
    border-color: blue;
    padding: 0px 1ex;
    background: url(grad1.png) #ADD8E6;
    opacity: .50;
    filter: alpha(opacity=50);
    zoom: 1;
}

#preamble:hover {
    background: #ADD8E6;
}

I've just installed a HTML Doctype declaration after having issues making my webpage work on Firefox and IE. After installing the declaration, the colour of my top nav-bar refuses to change... it stays white, and the text, unreadable. This happens on IE and Opera, but works fine with Firefox.

I've also been recieving complaints that my page is non-functioning with the font appearing "way too small".

If anyone can give me any ideas, and also point out a simple explanation of the difference between the box model and the W3 layout model, I'd be grateful...

Thanks for the advice people gave me last time; I at least managed to get the page working with Firefox...

Link to page

I am having quite a time finding out if it's possible to use the AlphaImageLoader hacks on a png to make it a background image. I need this for drop shadows on a gradient page background.

I have found a site that does have working png transparent backgrounds he http://thedesignspace.net/css/transparentPNG.htm

For some reason, even though my code is basically the same with the image location changed, it fails to work for me, while that page does.

My code can be seen at http://codymays.net/~private_ftp/theed. If you look at the source you'll see the IE specific css file. Works fine in opera/ff.

Any help would be greatly appreciated.

Hello all, Wondering if those of you who love netscape more than I do can help me,

This is a little css script to get a bg image to show in the top right hand corner of a table the table

Its called from <td class="rightnav">

Is there something that I i have done that makes netscape not display the image? I'm resonably new to Css, but I have a pretty good handle on it, just not with what netscape supports. Does it have to be called in a <p> tag?

I have tried this and a <Div> tag but it wont display, but in Explorer it is fine ... I'd apreciate any suggestions its really frustrating

.rightnav {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
background-image: url(images/continued.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top right;
height: 100%;
white-space: normal;
display: block;
overflow: hidden;
}

any help apreciated =)

- Shell.

At the moment, my BODY tag contains the following CSS:

Code:

BODY {
background: url(images/gradients/bg_top.jpg);
background-repeat: repeat-x;
}

The bg_top.jpg file is an image 200px high, and 3px wide. This displays nicely at the top of my page. It is a gradient from dark grey which fades out to a pattern of simple squares. I would then like these squares to be repeated across the whole of my background.

What I wanted to do was to set a second background image that would display underneath the gradient, but this didn't appear to work. Looking around Google, it appears that you can only set the one background for the body tag. Is this the case? If so, is it possible to set it up so that the square pattern repeats itself across the whole page, but underneath the gradient at the top?

Many thanks.

Hi,

I'm trying to do a design with: http://xlibrisclients.co.uk/flybynite/new/V1.htm in mind. I want the content to have a scrollbar if content goes off the page... basically want to achieve the look and feel of a frame base site such as: http://www.flybynite.co.uk/website/ but only using CSS and tables.

Please help!

Janusz

I'm currently customizing a theme for a Drupal site and am having a bit of an issue with background images on some content.

I have 1 class and an HTML element that I'm trying to apply the style to. I have a non-repeating background applied to the title class which is positioned to the left of the area. The second is a background I'm attempting to tile across the x-axis of the h2 element. This second background does not show while the first one is showing.

Is there a way around this? I'm assuming that because it's the same element, I won't be able to get away with this and will have to find another solution.

Here is my HTML
Code:

<h2 class="title"><a href="/drupal/node/1">Welcome to the Caustic Guild!</a></h2> 

CSS
Code:

#mcol .title {
  background: url(/drupal/themes/caustic/images/icon_post.gif) no-repeat 0px 2px;
}

#mcol h2{
  background: url(/drupal/themes/caustic/images/mcol_head.jpg) repeat-x;
  margin: 0px 0px 0px 0px;
  padding:  2px 0px 6px 35px;
  font-size: 180%;
  letter-spacing: -1px;
  text-align: left;
  border: 3px solid #78788a;
}

Hi,

I have a design that uses "rounded tabs", however each tab is a different size, so I cannot just use a standard-sized tab background image. Is there a way I can use a left rounded image and right rounded image with the middle a solid colour as a background instead of inline images?

Thanks!

I am creating my layout using div's but they are not showing up in my browser. Can you see anything in my code that looks wrong? Thanks for your help!

HERE'S MY HTML FILE......

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/strict.dtd">
 
<HTML>
<HEAD>
<title>PDV TV</title>
<LINK REL="stylesheet" TYPE="text/css" HREF="styles/style.css">
</HEAD>
<BODY>
 
<!-- TOP -->	
 
<DIV CLASS="layout_top">
</DIV>
 
<!-- MAIN -->
<DIV CLASS="layout_main">
</DIV>	
 
<!-- BOTTOM -->
 
<DIV CLASS="layout_bottom">
</DIV>
 
<!-- FOOTER -->
<DIV CLASS="layout_footer">
</DIV>
 
</BODY>
 
</HTML>

HERE'S MY CSS FILE......

Code:

/* GENERAL
-----------------------------------*/
 
body						{
							margin: 0px;
							padding: 0px;
							height: 100%;
							width: 100%;
							font-family: Arial;
							font-size: 14px;
							color: #000000;
							}
 
 
img							{
							border: 0px;
							}
 
p							{
							padding: 0px;
							margin: 0px;
							}
 
a							{
							color: #2f2613;
							text-decoration: none;
							}
 
a:hover						{
							color: #2f2613;
							text-decoration: underline;
							}
 
.eventDate					{
							padding-bottom: 10px;
							}
 
 
 
.textElement ul				{
							list-style-type: disc;
							}
 
.textElement li				{
							padding-bottom: 5px;
							margin: 0px;
							list-style: normal;
							}
 
.eventsList .eventDate		{
							display: normal;
							}
 
h1, h2, h3, h4, h5, h6		{
							padding: 0px;
							margin: 0px;
							font-size: 16px;
							}
 
.iframe						{
							background: transparent;
							}
 
.clear						{
							clear: both;
							}
 
.tab .element				{
							margin-bottom: 15px;
							}
 
.fieldSelected 				{
							border: 0px solid #111111 !important;
							background-color: #d1cdb1 !important;
							}
 
.textElement				{
							margin-bottom: 20px;
							}
 
 
 
.title						{
							margin-bottom: 5px;
							}
 
/* LAYOUT
-----------------------------------*/
 
.layout_top					{
							width: 100%;
							height: 41px;
							margin: 0px auto;
							background-image: url(images/top_bg.jpg);
							background-position: top;
							background-repeat: repeat-x;
							}
 
layout_main					{
							width: 100%;
							height: 500px;
							margin: 0px auto;
							background-image: url(images/main_bg.jpg);
							background-position: top;
							background-repeat: repeat-x;
							}
 
layout_bottom					{
							width: 100%;
							height: 264px;
							margin: 0px auto;
							background-image: url(images/bottom_bg.jpg);
							background-position: top;
							background-repeat: repeat-x;
							}
 
layout_footer					{
							width: 100%;
							height: 30px;
							margin: 0px auto;
							background-image: url(images/footer_bg.jpg);
							background-position: top;
							background-repeat: repeat-x;
							}

Hey all
I'm a web programmer and a moderately skilled web designer, and I've got a bit of a problem. I assist in running a forum at midnafanforum.com and I was asked quite a while ago to set it up so a border ran down either side - this down the left side and this down the right. The images should repeat for as long as the page goes on for (it has a varying height, depending on the main content).

The temporary solution we've used is this -one image containing both sides of the background, and whilst on one fairly uncommon resolution of 1400x3200 this looks fine, obviously on all others it looks stupid.

Any help would be much appreciated - considering I'm not very experienced in CSS it'd be helpful if the code itself could be given, or I could at least be walked through fixing this.

Thanks in advance
Cheeseweasel

EDIT: How annoying, URLs are blocked. midna fan forum dot com is the address. I swear I'm not spamming for more traffic, honestly.