CSS - Thoughs On Best Way To Do A Semi-colour Bleed

I'm a designer first and foremost who is now working on learning CSS based layouts. In the past, I've always handed my PSD file off to a coder who generates the HTML/CSS. I'd like to learn how to do that portion myself.

I know my way around the basics of CSS based layouts in setting up a standard 2 column layouts using floats and also 3 column layouts using absolute positioning for the left and right columns. The video tutorials from Chris at CSS-Tricks dot com were fantastic in getting me jump started by the way. Highly recommended.

I'm now looking at how to draw up the framework for a more complicated layout in CSS rather than reverting back to old table based HTML but I'm stumped.

Here is an image of the layout in question sans logo and content:

codedpreview dot com/?view=5361

As you can see, in the body there are three columns, one spanning 50%, two spanning 25% and each column has 1 or 2 rows of section containers. This layout would be a no brainer using nested HTML tables. I'm confused on how to set up these rows within the columns using CSS. Would you essentially do the same and nest div tags within the three columns?

Does anyone have any good tutorials or resources I could review in regards to setting up the body portion of this layout in particular?

Thanks so much for your time and help!

Hey All!

Hope i didnt scare tooo many people off with the title!

Im new to playing around with transparency and am having trouble with getting the affect i want!

What i want:
1. Page background as a large picture (1280 x 1024) non repeating etc. (The picture is of a grassey field)
2. a semi transparent rounded white box that sits in the middle (dimensions 735x 550)
3. on top of the semi transparent box i want my content.


The reason i want it semi transparent is because i want the main background to come through and be visible through the content. and if the page is resized etc that the semi transparent box can move over the background and show the background whereever it is!

Problems:
1. My first attempt i could get 90% of the look i wanted. I got the semi transparent box floating in the middle of the page and showing the background through perfectly. as soon as i add content the content is also transparent.
i tried adjusting the trnasparency for the content but that didnt work.

e.g.
Code:

<div id="semiTransBox">
   <div id="content">blah blah blah</div>
</div>

note i dont have my actual code in front of me so please try and work with this!

The wording "blah blah blah came out as transparent as its parent semiTransBox. Not what i wanted!

I understand this is something to do with the parent child relationship with transparency so i tried something different for my second attempt:

2. i created the semi Transparent box and then added a second fully transparent div below which was positioned using css to move up 500px to fit over the semi transparent box. using top:-500px; position:relative

e.g.
Code:

<div id="semiTransBox"></div>
<div id="transBox">
   <div id="content">blah blah blah</div>
</div>

The content is not transparent now but there is still a problem

The problem is now because i have created the second div below the first it has caused the browser to add scroll bars to the window and shows white are where the main picture doesnt fill.

is there a way to get rid of the space where the second div used to be?


i really hope that essay made sense!


thanks

Anyone has a code for a good way to show a semi transparent announcement on a full browser window that can be dismissed by the user to show the content ?


something that works like this:
http://jquery.com/demo/thickbox/#sectiond-2 scroll up a little and click on the demo and then show....

I tried to figure out how they did it but it's too complicated (so it seems)

I'm looking for a simple dedicated solution.

Is there a way to position something inside another block relative to the coordinates of its parent block? I mean something analogous to the way position: absolute puts a block relative to the coordinates of the body. So I could say have a block with a width and a height, and then have something "right: 20px" inside that block.

In CSS, is it possible to define certain colours for a certain piece of text?

For example, in the site I'm doing at the moment, the paragraph font-colour is black, but when the text ''CrudeSep'' comes up, I would like The 'sep' piece of the text to be in orange. This would save me having to make an image to do this!

Any help appreciated.

Is it possible to set the colour of the padding in a table cell?

I'm having trouble with my list on a site im working on.

When you hover over the link, I want it to display a background colour the full width of the box, not just the length of the text.

You can see the menu, on the left hand side - HERE.

Here's the CSS of the list.

Code:

div #leftcontent {
	padding-left: 0px;
	padding-top: 0px;
	display: block;
	font-size:90%;
	font-family:Arial, Helvetica, sans-serif;
}

#leftcontent a {
	text-decoration:none;
	padding:0px;
	color:#000066;
}

#leftcontent a:hover {
	text-decoration:none;
	background-color:#66CCFF;
	background-color-width:30px;
}


#leftcontent ul{
	margin: -10px 10px 2px 5px;
	padding: 0;
	list-style: none;
}


#leftcontent li a{
	margin: 0 0 .5em 0;
	padding: 2px 5px 5px 0px;
	line-height: 1.4em;
	font-size:100%;
	color:#FFFFFF;
}

Any help is appreciated.

Cheers.

__________________
ULTRASUK

Hi.

Is there any way to:

a) Change background color of the title box that appears when you hover over an image AND

b) Reduce the delay it takes to appear?

Thanks.

Hi, im trying to create a block of colour of various width. Im trying to do it with <span> like so

<span style="background-color:#336699; width:100px"></span>

Now why wouldnt that work and is there a better way to do what im trying to achieve?

i currently have the following code for links..

Code:

a {
	color:#666666;
	font-size:11px;
	text-decoration:none;
	font-weight:600;
	font-family: arial, helvetica, sans-serif;
	}
a:link {color:#666666;}
a:visited {color:#333333;}
a:hover {background-color:#eee;}

is there a way of having another set so that some have the colour settings as above and another set have the colour settings that are blue or something???

any suggestions would be great....

thanks

RF

Hi,

I have found this code in a php thing of mine and I would like to change it, and this bit off css is what makes it "happen". As it stands, when you mouse over a row nothing happens. What I would like it to do is change colour of the whole row (rows 1-4) (Like in phpMyAdmin browse section). This is the code I think I should change:

Code:

/* Common elements */
.row1 { background-color: #F5F9FD }
.row2 { background-color: #DFE6EF }
.row3 { background-color: #EEF2F7 }
.row4 { background-color: #E4EAF2 }

I also have this bit of CSS that can change ONE row's colour, but not all of them at the same time. If it helps, this is the code. I have edited the code into the main php file I have, in all the rows, but it only changes one "cell" when you hover over it, and not the whole row.
Code:

<td class="row4" onmouseover='window.status="{$info['name']}"; 
this.style.backgroundColor=iOver;' onmouseout='window.status="Done"; 
this.style.backgroundColor=iOut;' onclick="javascript:window.location.href='{$ibforums->base_url}showforum={$info['id']}';">;
</td>
</span></td>

Thanks,

Prism128

PS: The iOver and iOut (in the second code) are colour references in a php file

At http://jordanmeeter.com/contact/form you'll see that I have a form. After you submit the form, it will display "Success! Your Email has been sent." in green text. Now why is it displaying green when in the HTML, I have <strong style="color:rgb(84, 172, 219);">Success! Your Email has been sent.</strong> (That RGB equals a blueish colour) But if you highlight the text, and use Firefox's "View selection source" it will appear as style="color:green;" . What the heck is overriding my CSS?

Hi,

How do i change the colour of the background hover colour of a drop down menu? I can only seem to change the background of the normal state. Any ideas?

Hi. I think this is probably a simple question for you guys. I have a web page with lots of input text boxes. What I would like is when the cursor is in the text box, the background changes to yellow from white. And as an added bounus. Some are originaly grey to indicate required input and maybe even a difrent active colour. Lots of websites do this so must be simple.

TIA

Desmond.

Is it possible to include (in this instance) a white border, INSIDE an orange background colour on a h1. The background colour of the page is white and the background colour of the h1 is orange, so I need the border inside rather than around the h1 bg colour for it to work otherwise you wouldn't see it for the white page background.

Can this be done?

If so can anyone help..

Thanks.