CSS - General Css Site Design Questions

I know its a bit vague but if someone can actually HINT on what is wrong with the design as it looks ok in FF and IE7 and major other browsers however in IE6.0 the divs (basket and best seller and donate) have moved to the right a bit more.
In Opera9.0 it looks very messy.

IE: http://browsershots.org/screenshots...1b07da5ea24003/

Opera: http://browsershots.org/screenshots...e171bac56fbf14/

Original:
http://www.zahra-zahra.com/aboutus.php

look at my site. it is very boxy and almost TOO structured. is there a design trick i can use to mix it up a little? specific examples would be greatly appreciated.

Hi

I am currently trying to self teach myself CSS, harder than I thought, lol. Anyway I have a page that uses CSS but there are certain areas that don't display correctly/I can't get to work. I'm hoping someone can help

Page:

jinx-inc.co.uk/development

Problem Areas are highlighted in this picture (to make things easier)

jinx-inc.co.uk/development/problems.jpg

1: This area should have the blue colour all the way down.

2: Pretty much same problem as 1 but this is a repeating background instead of a background colour.

3: There is a Footer but it's gone walk about. The only way I can get it to show is through absolute position as this css file will be used as the master for all pages, so absolute won't work.

4: Table border problem but not too fused about that at the moment.

Code available:

jinx-inc.co.uk/development/css.txt

jinx-inc.co.uk/development/html.txt





Many thanks

Okay, I'm trying to create dynamically sized blocks that can be pretty much and width and height, while maintaining these fancy corners I'm using. If you look closely, each of the corners have a little inner curve in them... Here is how I did it in HTML/CSS....

1. I spliced it up so there is an image for each of the four corners (10x10), two background images for the top and bottom bars (1x10) and two background images for the left and right bars (10x1).

2. Created the structu
[html]
<div class="block-top">
<div class="block-tl"></div>
<div class="block-tr"></div>
</div>
<div class="block-content">
<div class="block-ml">
<div class="block-mr">
<div class="block-center">
<p>this is some content</p>
</div>
</div>
</div>
</div>
<div class="block-bottom">
<div class="block-bl"></div>
<div class="block-br"></div>
</div>
[/html]

3. Created the CSS
[css]
.block-top, .block-bottom {
height:10px;
line-height:0;
font-size:0;
}
.block-tl, .block-bl {
float:left;
height:10px;
width:10px;
line-height:0;
font-size:0;
}
.block-tr, .block-br {
float:right;
height:10px;
width:10px;
line-height:0;
font-size:0;
}
.block-center {
padding:0 10px;
background-color:red;
}
.block-content {
clear:both;
}

.block-top {
background-image:url(../images/block-light-TM.jpg);
}
.block-tl {
background-image:url(../images/block-light-TL.jpg);
}
.block-tr {
background-image:url(../images/block-light-TR.jpg);
}
.block-ml {
background-image:url(../images/block-light-ML.jpg);
background-repeat:repeat-y;
background-position:left;
}
.block-mr {
background-image:url(../images/block-light-MR.jpg);
background-repeat:repeat-y;
background-position:right;
}
.block-bottom {
background-image:url(../images/block-light-BM.jpg);
}
.block-bl {
background-image:url(../images/block-light-BL.jpg);
}
.block-br {
background-image:url(../images/block-light-BR.jpg);
}
[/css]

In all browsers except IE6 it displays fine, except for one little problem. If I put anything in the content area that has a margin, the margin puts spacing above and below the whole block-content area for some reason. I don't understand that at all, because the margin'ed element is within all those nested divs. I thought it should then just expand that inside div to fit?? Nope...

In IE6 the ML and MR backgrounds don't appear at all.

What am I dong wrong here? Hope this wasn't too complicated to understand.

NOTE: I have zero padding and margin on all the elements as well.

I've said this before, on he I'm old and trying to ween myself off tables. I'm re-doing a site for a mattress store (I did one for the owner a number of years ago) and I absolutely want to ditch the archaic code.... But, I've got a very basic question about laying things out with CSS - and I'm going to post a picture because - I think - it may explain my question best. In short, I have a DIV that's centered in the middle of the page called "container". It has a javascript slider at the top, that kinda fills the area in terms of width, and below it I want two columns. I have no idea - using strict CSS and no tables - how this would be done. I mean, I suppose you could use DIVs and absolute positioning but it seems like that might cause problems - I mean, heck...I don't know - maybe not. I just want to know what the best approach would be. Here's a graphic:



I don't think it matters, but you can see the whole page (and examine the code), here (just a parking spot on my own server):

http://www.guymerritt.net/xdog2/

Any help - as always - would be greatly appreciated.

I tweaked a style sheet (changed some margins, colors, etc.) and uploaded it to my server, but sometimes they just don't show up. I've deleted the old style sheet first, cleared my cache and tried different browsers - even restarted my computer. When I download the style sheet and look at it, it's the correct one but it just won't display my changes. It's almost like the server is referring to my old one.

Anyone else have this problem or know how I can fix it? I'm going a little crazy...

Hello,

I tried to make a page with a header, left column and right column, as shown in the screenshot. http://img292.imageshack.us/my.php?image=screengr2.jpg
You can see the code at the bottom. I used the faux-column technique to make the column colors extend to the bottom of the page.

Is this a good way to do it? and does this method give problems with different resolutions on different computer-monitors.

I used floats in this example to position the divs, is this a common solution or is absolute or relative positioning better?

My goal is to teach myself a way to easily and effectively divide a webpage, so that I have a basic method, also in larger and more complex websites.

I like to hear any tips/techniques to improve this.

I used the folowing code:
Code:

<html>
<body>
<div class="wrapper">
	<div class="header">
    		<br /><br /><br /><br /><br />
    	</div>
   	<div class="left">
		<img src="homer.jpg" />
	</div>
   	<div class="right">
    		<div class="nav">
			<a href="home.htm">home</a> <!-- menubar -->
		</div>
    		<div class="contents">
			This is the contents of the page
		</div>
     </div>
</div>
</body>
</html>

and the css code
Code:

body{
	background: url(fauxcolumn.jpg) 15% 0;
	margin: 0;
	padding: 0;
}

.header{
	background-color: green;
	float: left;
	width: 100%;
	margin: 0%;
	padding: 0%;
}

.left{
	background-color: purple;
	width: 15%;
	float: left;
	margin: 0%;
	padding: 0%;
	height: 100%;
}

.nav{
	background-color: blue;
	width: 85%;
	float: left;
	margin: 0%;
	padding: 0%;
}

.contents{
	float: left;
	width: 85%;
	margin: 0%;
	padding: 0%;
	background-color: red;
}

Thanks in advance.

It looks alright in IE, but looks really messed up in Mozilla, Firefox and Netscape. I wanted vertical UL tabs down the left side.

http://www.members.shaw.ca/welcomehere/test.htm


please help.

I'm designing a company website. I'm relatively new to CSS and I'm having trouble creating what seems to me a very simple design: body background: fixed full page image banner: fixed, 100 pixels high, full-width, transparent background nav bar: fixed, 200 px wide, auto-height, opaque nav icons, semi-transparent tiled image background content box: scrolling, auto height, auto width, opaque text, semi-transparent tiled image background footer: fixed, 30 px high, full width, transparent background mockup:

Here is as far as I could get in the actual design:
web page attemp

Hi sorry if this is the wrong place for this thread, I have been given a project to take a fully flash website and convert it into xhtml and css. There are roughly 30 pages or so but Im am really unsure of how much I should be asking as a fixed price for the work.

What does everyone else usually do?

Hi everyone

I'm very new to CSS and I'm having some trouble getting a layout to work as I want it to. I have attached the file as a .txt as HTML files are not allowed. Just change the extension to .html.

The problem, in Opera, none at all. Firefox doesn't display it properly. IE does to an extent but it has horizontal scrolling. Being new to CSS, I have absolutely no idea what needs changing. If anyone could tell me where I'm going wrong, preferably with an explanation why it has gone wrong, it'd be much appreciated.

Thanks very much

Help?

I have designed a look for one of my buddies companies. However, it is quite complicated.

I have attached the .GIF file for you to reference.

The design needs to be cross-browser friendly.

The navigation is going to be dynamically built using a backend application built in PHP. The nav_links will be text not images, as well as the text next to the "did you know" items. I imagine that the placement of some of the "did you know" items can be arranged to ease the slicing process. Also, the left main image (the guy) needs to be dynamic in that it rotates through images on refresh or a revisit (probably some javascript).

On top of all that, I need the "featured" or "did you know" items i.e. the round images and text to dynamically change also. These will be likes into specific sections of the site. My major concern is getting the main header pieced together correctly while meeting cross-browser compatibility. I have some CSS knowledge but as i mentioned the design is quite advanced.

Any ideas on how to correctly structure it to work?

TIA

BA

okay, so what i want to achieve is a result similar to:

www.simplebits.com

anyways, first thing is that using divs when the browser is resized everything gets screwed up, however not on the above site.

thanks, any help would be great.


Chris

Ok, this may be asking too much, but I have this design idea - http://tmh.netdbs.com/turnkey2.jpg But insofar as laying it out with CSS, I just am not sure where to begin breaking it apart and creating various divs so to speak, the main white area is where I will lay out various <P> tags and won't have a problem with that, but it is getting started that challenges me. I'd appreciate some feedback on how to approach this. TOm