CSS - Full Window Semi Transparent Announcement ?

Hi guys, need some help for my layout.

What I am trying to do is set a div to:

When screen width is <1024 x 768
width should be fluid

When screen width is >1024 x 768
width should stay at within 1024 (viz. 970) to avoid the long hard-to-read paragraphs.

Any ideas? Preferbably no javascript as I want it to change as the browser resizes without refreshing, like when the width is set to 100%.

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!

Hi all,
I've made a rough mock up of how i want a site to look but not sure the best way to do it in css yet.

The idea would be that the colour would bleed all the way to on side (alternating side) between sections, the image attached should help explain.

Not so worry on exact code, but more conceptually how the best way you think to do it would be.



sorry about the size of the image not sure how to make it smaller

Dear all,
I am really stuck on this.
I cannot use an alternative, I have to use png.
I must have transparency. As you know, IE6 doesn't 'do' transparent png.

I have tried three different hacks and I cannot get any of them to work.
I am a good traditional developer, but fairly new to web development.
Terribly frustrated that I don't seem to be able to get even one of these hacks to work.

Please do you know the link to a page that has an easy to follow png hack for IE6 that you know to work? At this point, anything goes, as long as it works!
Best
Jo

Ok so I have a vertical menu, with menus that pop to the side... it looks fine in every browser except IE. For some reason, the pop up menus become transparent in IE.

Relavent CSS:
#nav, #nav ul {/* 1st level ul */
padding: 0;
margin: 0;
list-style: none;
float: left;
background-color: #000000;
width: 130px;
}

#nav li {/* 1st level li */
position: relative;
color: #ffffff;
font: bold 12px arial;
padding: .3em 0em .1em .3em;
border-top: solid 1px #ffffff;
}

#nav li ul {/* 2nd level ul */
margin: 0px;
padding: 0px;
list-style: none;
position : absolute;
left: -999em;
background-color: #CCCCCC;
}

#nav li ul ul {/* 3rd levl ul */
margin: 0px;
padding: 0px;
list-style: none;
position : absolute;
left: -999em;
background-color: #CCCCCC;
}

#nav li li {/* 2nd & 3rd level li */
position: relative;
color: #000000;
border: solid 1px #000000;
padding:3px;
font-family:arial;
font-size:10px;
text-decoration:none;
}

/* and some link styles */
#nav li li a {
display: block;
color: #000000;
text-decoration: none;
}

#nav li:hover, #nav li a:hover, #nav li.sfhover {
color: #000000;
background-color: #E5F5E9;
}

#nav li li:hover, #nav li li a:hover, #nav li li.sfhover {
background-color: #F58219;
}

#nav li:hover ul ul, #nav li.sfhover ul ul {
left: -999em;

}

#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul {/* lists nested under hovered list items */
top: 0px;
left: 9.1em;
voice-family: "\"}\"";
voice-family:inherit;
left: 10.4em;
z-index: 1;
}

referring to:
<ul id="nav">
<li><img src="contents/images/navarrow.gif" border="0" />Content For ...
<ul>
<li><a href="/community/864/Builders/23414.html">Builders</a></li>
<li><a href="/community/864/Remodelers/23415.html">Remodelers</a></li>
<li><a href="/community/864/Architects/23416.html">Architects</a></li>
<li><a href="/community/864/Suppliers/23417.html">Suppliers</a></li>

<li><a href="/community/864/Consumers/23418.html">Consumers</a></li>
<li><a href="/community/864/Manufacturers/23419.html">Manufacturers</a></li>
</ul>
</li>


example:
http://www.housingzone.com/index.asp?layout=news&industryid=23414

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.

I am trying to use the IE workaround for PNG transparency (using the alpha filter).

The trouble is it only seems to work on a fixed size image. Is there any way to successfully apply it to a repeating background? I can't seem to find any info on that so I am guessing it can't be done

yes my friend has on her site scrollable screen separate from the fixed background but in the code its listed

<style type="text/css">


table, tr, td { background-color:transparent; border:none; border-width:0;}
body {
background-color:91A4F3;


now what would the optional choice of turning the transparent off?
opaque?

Hello all! My first post here. I have recently started working with wordpress with the catalyst dynamik child theme.

I am trying to "copy" some theme i found on the internet just to see if i can and maybe learn something on the way. I know some basic CSS and HTML but nothing fancy im learning as i go.

My problem is that i have used custom widget area hook to create a widget area after header (catalyst_hook_after_after_header) named it selected a layout (homepage so it shows on the home page) and i have named or assigned "sshook" class to it.

The widget are appeared under the header and i added php text widget to it so i can use shortcode like [easingslider] for my slideshow plugin. So ok all that worked out and now i have a slideshow hooked in the widget area under the header.

The problem is as follows. The container (?) that is behind the slideshow (.sshook) should be as wide as the page but it isnt. If i set the width to 100% it looks like it ignores it (nothing happens) i have also tried adding !important to it just to make sure it didnt inherit the width from some other element but it didnt work.

This is the code i made:

.sshook {
width: 100% !important;
margin: 0px 0px 0px -500px;
padding: 0px 0px 0px 500px;
background: rgb(226, 227, 227);
}

Margin goes -500 so that it pulls the background behind the slideshow all the way to the left border of the page and the padding 500 places the slideshow back at the center of the page but the only way i can get the background to show on the right side of the slideshow is to change width from % to px like 1400px but then it is not always spaning the whole page for people with higher resolution and if someone has lower resolution it adds a scroll bar at the bottom of the page because it goes more to the right.

I hope someone understands what i am trying to ask here. If anyone needs clarification on any of this let me know and ill clarify.

Ok, I am going to try to describe the best way I can my problem. Hopefully I can be pointed into the right direction. Here is my CSS:

div.background
{
width:850px;
height:1100px;
background:url(images/Sunrise.png) repeat;
border:2px solid black;
margin-bottom: 15px;
margin-left: 0px;
margin-right: 0px;
margin-top: 35px;
padding-left:15px;
padding-right: 6px;
/* for IE */
filter:alpha(opacity=45);
/* CSS3 standard */
opacity:0.4;
}

div.transbox p
{
margin:30px 40px;
font-weight:bold;
color:#000000;
}

I have a div.background box with an image and I want it to have a transparentency or opacity of 45. The text that is in my div.transbox p needs to be just like normal but my problem is is that when I view my page in the browser my text is also has a transparentency of 45. Not sure what is going wrong. Would someone be so kind to point me into the right direction?

Thank you,

Diana

Hi,
I'm trying to create a transparent background for the main text part of a site. I have the following code in the .css file:

Code:

.dataContainer {
	background-image:url('/images/transluscentbg.png');
	*background: none:
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/transluscentbg.png',sizingMethod='scale');
	padding:10px;
}

and call it he
Code:

<html><head>
<link rel="stylesheet" type="text/css" href="styles/kr.css" />

<meta name="description" content="">
	<meta name="keywords" content="">
<script src="rollover.js" type="text/javascript"></script>

</head>
<body id={$styleName|lower}>
	<!-- BEGIN OUTER WRAP -->
	<div id="bodywrap">
		<div id="logoSpace">
		</div>
		<!-- BEGIN MAIN CONTAINER -->	
		<div id="content">
	        <div id="contentBorders">
			<div id="mainContent" class="clearfix map{$mapNum}">
				<div id="navBar">

			<div id="innerContent" class="clearfix">
				{include file="nav.tpl"}
				<div class="goContent">
                                <div class="dataContainer">
               lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem 
ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
lorem ipsum 
</div>
</body></html>

This works fine in Firefox, but .dataContainer has no transparent background in IE. HOWEVER! It does work in both IE and Firefox if, instead of using <div> tags, I put the content in a table (<table><tr><td class="dataContainer">).

Anyone have any idea why this might be happening and how i might be able to get the <div> to work?

Hey all, i'm trying to create pop up note box capabilities. My test example is using digg (dot) com's login box. If you go to the site click on login box will pop up.

And you will see the border around the box has a transparency to it. I've tried emulating it but to no avail.

PHP Code:
<a href='#' onclick="document.getElementById('notepad').style.display = 'block';">Open Notepad</a>

<div id='notepad' style='display:none; top:150px; opacity: 1;'>
    <div class='notepad_body'>
        <div class='notepad_content'>
            Post a Note<br>
            Post a Note<br>
            Post a Note<br>
            Post a Note<br>
            Post a Note<br>
            Post a Note<br>
        </div>
    </div>
    <div class='notepad_footer'>
    </div>
</div> 





That is the html to generate the box which works fine... the only problem is the border is solid, then if I change the opacity it turns the entire div box with opacity.

Here is my css

PHP Code:
<style type='text/css'>
#notepad {
    left:50%;
    margin-left:-315px;
    position:absolute;
    width:673px;
    z-index: 100001;
}

.notepad_body {
    background:transparent url(testbg.jpg) repeat scroll 0 0;
    padding: 40px 13px 10px 40px;
}

.notepad_footer {
    background:transparent url(footer.jpg) repeat scroll 0 100%;
    height:23px;
}

.notepad_content {
    background-color:#FFFFFF;
    max-height:900px;
    width:550px;
}

</style> 





Does anyone have a clue on what I am doing wrong or what I can do to make the transparency work just on the border?

Thanks in advance

I've run into yet another IE "feature" that i'd like to ask you, dear colleagues, how to solve.

I have a relatively positioned div and i need to absolute position another div inside of it to fill almost all width and height of the parent. I need it to have a 20px margin from top and bottom. Here's what works in real browsers:

Code:

.somediv{
position: absolute;
left: 0;
top: 20px;
bottom: 20px;
right: 0;
}

Now how do i make it work in a developer's nightmare IE?

There are 2 more divs in top and bottom both 20px high so the new div shouldn't overlap with them.