CSS - Problem With Css And Positions Of <div> Tags

Hey there!
I am having a problem changing my website's layout around a bit.

http://www.apollomix.com

As you can see, the main content area is wrapped in a div called "contentWrapper". This helps it maintain its shape, et cetera. It has a maximum width allotment as well, so that text (and other things) won't be stretched beyond beauty.

Basically, what I am trying to do is align #contentWrapper to the right of the screen (to the left of that dropdown menu, and other sidebars, such as the chat box). After I get that align working, I want to stick another div to the left that fills up the remaining margin, but not past it. Essentially, I am trying to make it look like this: (forgive the sloppy image doctoring)

Click me!

Basically, that big stretch of gray on the right should expand or shrink depending on the screen size... with anything bigger than contentWrapper's max-width resulting in the div stretching. Furthermore, it should be as tall as the screen, if possible, essentially touching the footer of the page.

Also, I'd like the banner to shift over as well, as you can see. Those lines should also expand. I'm assuming that could be done by adding another div to the left of the banner with the lines as its background, but I'm not entirely sure. What do you recommend?

Thanks for your help!

Hi,

I've done an English site which works but now I'm doing the language versions..in particular, Arabic, which is read from right-to-left (direction: rtl)

http://www.ntcjapan.com/languages/arabic/dindex.html

On IE, the page looks fine. On Firefox, however, the <UL> tags (see light blue and normal blue text in middle of page) are being aligned to the right, overlapping the <div id="main"> which is supposed to contain it.

Code:

	#main {

		width: 590px;
		padding-top: 115px;
		padding-left: 4px;
		padding-right: 5px;
		background: url(../../../images/0_logo.gif) no-repeat;
		float: left;
		margin: 0px 3px 0px 0px;
	}

I do want everything aligned to the right, since Arabic is apparently read that way, but I need the effect as shown on IE.

Any ideas how to make this work?

Also, if anyone has any recommendations on what I could do to fix the W3C validation errors , please let me know.

Thanks very much in advance!

Greetings,

I posted this question in the HTML forum, too, but I realize that maybe the answer to this question would better be provided by CSS2, rather than using HTML tables, as the latter may be deprecated in the future--it seems--as a layout tool.

I used to be able to position an image, or anything basically, in a table cell that is in the "absolute middle" of a web page, i.e. centered horizontally and vertically, using Dreamweaver MX. But, for some weird reason, I cannot do it anymore using Dreamweaver MX 2004. No matter what I try, the image or contents of the cell or table are always at the top of the page, centered horizontally, yes, but not vertically.

I tried nesting a table within a table, and I tried using a percentage-based 3x3 table, but nothing works. I noticed that the "height" attribute of a table is deprecated now, thus, you should not give a table a "height" of 100%. Is that the reason? And if so, then what is another way to do this now? I mean putting an image or so in the absolute middle or center of a page? Better yet...

What I really want to do is to place an image in the vertical center of a page, yet a bit to the side, but within proportion to the page of the visitor. Meaning, I'd like the center of the image, for example, to always have 50% of the page over it and 50% below it, exactly; and I'd like it to have 33% of the page to its right side, for instance, and 66% to its left side, always, regardless to the visitor's resolution. Now how can I do this, especially using Dreamweaver MX 2004?

Thanks for anyone taking the time to help. I'll try to attach an image to demonstrate what I mean visually.

http://forums.devshed.com/attachmen...tachmentid=4599

I have set up a couple vertical boxes and filled them with 'column' boxes all nested within the parent vertical boxes.
My problem is when, say, box #3 from the left has more content than the furthest left box, instead of stretching the parent to accommodate the content and push down the other parent horizontal box below, the content just flows behind the lower horizontal box.
If the content in the furthest left box is the longest, this problem doesnt occur. The parent box is stretched to fit.


Thx
Joe

#######################
html
#########################
<html>
<head>
<meta http-equiv="Content-Type" charset=windows-1252>
<link rel="stylesheet" href="test.css" type="text/css" media="screen,projection,print" title="Default" />
</head>

<body id="savor-home">

<div id="main">

<div id="abovefold">

<div id="column-a">
<div id="type2">
blah<br>
blah<br>
blah<br>
blah<br>
</div>
</div>


<div id="column-b">
<div id="type1">
blah<br>
blah<br>
blah<br>
blah<br>
</div>
</div>


<div id="column-c">
<div id="type2">
blah<br>
blah<br>
blah<br>
blah<br>
</div>
</div>


<div id="column-d">
<div id="type1">
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
</div>
</div>


</div>



<div id="maincontent">

<div id="column-a">
<div id="type1">
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
</div>

<div id="column-b">
<div id="type1">
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
</div>
</div>

<div id="column-c">
<div id="type2">
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
</div>
</div>


</div>



</div>


</body>
</html>

#######################################
css
#######################################
body {
margin: 0px;
background: #fff;
}

#main {
width: 780px;
min-height: 1500px;
}

#savor-home #abovefold {
position: relative; top:0px; left:0px;
width: 100%;
width: 780px;
clear: both;
}

#savor-home #abovefold #column-a {
background: #eee;
width: 185px;
position: relative; top:10px; left:10px;
display: inline;
}

#savor-home #abovefold #column-b {
background: #ddd;
width: 185px;
position: absolute; top:10px; left: 205px;
display: inline;
}

#savor-home #abovefold #column-c {
background: #ccc;
width: 185px;
position: absolute; top:10px; left: 400px;
display: inline;
}

#savor-home #abovefold #column-d {
background: #bbb;
width: 185px;
position: absolute; top:10px; left: 595px;
display: inline;
}

#savor-home #abovefold #type1 {
background: url("/img/savor/featcontent1.jpg") no-repeat;
width: 100%;
/* hide from IEMac\*/
width: 185px;
\width: 185px;
w\idth: 165px;
*width: 185px;
/* end hiding */
padding: 10px;
font: 12px verdana,arial,helvetica,sans-serif;
color: #000;
}

#savor-home #abovefold #type1 h2 {
color: #000;
}
#savor-home #abovefold #type1 h4 {
color: #B5390F;
padding: 1px;
}
#savor-home #abovefold #type1 a:link, #savor-home #abovefold #type1 a:visited {
color: #000;
font: bold 10px verdana,arial,helvetica,sans-serif;
}
#savor-home #abovefold #type1 a:hover {
text-decoration: underline;
color: #B5390F;
font: bold 10px verdana,arial,helvetica,sans-serif;
}

#savor-home #abovefold #type2 {
background: url("/img/savor/featcontent2.jpg") no-repeat;
width: 100%;
/* hide from IEMac\*/
width: 185px;
\width: 185px;
w\idth: 165px;
*width: 185px;
/* end hiding */
padding: 10px;
font: 12px verdana,arial,helvetica,sans-serif;
color: #000;
}

#savor-home #abovefold #type2 h2 {
color: #000;
}
#savor-home #abovefold #type2 h4 {
color: #B5390F;
padding: 1px;
}
#savor-home #abovefold #type2 a:link, #savor-home #abovefold #type2 a:visited {
color: #000;
font: bold 10px verdana,arial,helvetica,sans-serif;
}
#savor-home #abovefold #type2 a:hover {
text-decoration: underline;
color: #B5390F;
font: bold 10px verdana,arial,helvetica,sans-serif;
}

#savor-home #maincontent {
position: relative; top:0px; left:10px;
background: #0f0 url("/img/savor/maincontent.jpg") no-repeat;
width: 770px;
}

#savor-home #maincontent #column-a {
width: 256px;
position: relative; top:10px; left:0px;
}

#savor-home #maincontent #column-b {
width: 256px;
position: absolute; top:0px; left: 256px;
}

#savor-home #maincontent #column-c {
width: 256px;
position: absolute; top:0px; left: 512px;
}

#savor-home #maincontent #type1 {
width: 100%;
/* hide from IEMac\*/
width: 256px;
\width: 256px;
w\idth: 236px;
*width: 256px;
/* end hiding */
padding: 0 10px 0 10px;
font: 12px verdana,arial,helvetica,sans-serif;
color: #000;
border-right: 1px dotted;
}

#savor-home #maincontent #type1 h2 {
color: #000;
}
#savor-home #maincontent #type1 h4 {
color: #B5390F;
padding: 1px;
}
#savor-home #maincontent #type1 a:link, #maincontent #type1 a:visited {
color: #000;
font: bold 10px verdana,arial,helvetica,sans-serif;
}
#savor-home #maincontent #type1 a:hover {
text-decoration: underline;
color: #B5390F;
font: bold 10px verdana,arial,helvetica,sans-serif;
}

#savor-home #maincontent #type2 {
width: 100%;
/* hide from IEMac\*/
width: 256px;
\width: 256px;
w\idth: 236px;
*width: 256px;
/* end hiding */
padding: 0 10px 0 10px;
font: 12px verdana,arial,helvetica,sans-serif;
color: #000;
}

#savor-home #maincontent #type2 h2 {
color: #000;
}
#savor-home #maincontent #type2 h4 {
color: #B5390F;
padding: 1px;
}
#savor-home #maincontent #type2 a:link, #savor-home #maincontent #type2 a:visited {
color: #000;
font: bold 10px verdana,arial,helvetica,sans-serif;
}
#savor-home #maincontent #type2 a:hover {
text-decoration: underline;
color: #B5390F;
font: bold 10px verdana,arial,helvetica,sans-serif;
}

Hi,

I am trying to get a hover to work with my links. The problem is when i have a list-style-type in css. When that exists, the link text for each link goes behind the bullets instead staying to the right of them. What do i need to do to have a list-style and the hover effect hovering over the links?

Hi All-

For some reason when I use a bunch of DIV tags to position elements on my page, the page keeps getting longer and longer with white space. Does anyone know what will remedy this extra whitespace?

Thanks,
infinity003

Hi guys!

Ok here's the thing, I've tried everything I know and hunted the net trying to find an answer, and just when I think I have, another issue crops up. Sorry about the title but I just don't know what to call what it is I'm trying to do. But it SHOULD be possible, and it SHOULD be really simple, which is frustrating the heck out of me because I cannot get this to work!

Here is what I'm trying to do, complete with pictures to help visualize things.

Example
This shows how I want my site layout to appear. A regular width site so it can be displayed on low res desktops, BUT with extra artwork on the left and right, complete with a couple of flash animations to the sides.

Code:

http://img708.imageshack.us/img708/2458/layoutstyle.jpg

The red outline shows a typical 800x600 display, as you can see, they should only be able to see what's in the center of the page.

The dark blue outline shows a much higher resolution display

The light blue color shows the extra artwork only revealed to higher resolutions

The flash boxes contain flash elements which should remain fixed in those locations regardless of the resolution the user is using (they'd be setup to match the background image, so must not move)

The dark blue outline shows how the same site would look on a much higher resolution. Instead of black space to the left or right, or the actual site stretching to fit (not looking for a liquid layout in this case), they get to see the rest of the artwork, plus the flash elements.

The purpose of this is so it will look fine on low resolution displays, but also, when viewed on higher resolution displays, will then show the extra artwork instead of blackness.


Problems
Just when it looks like it might work, I find that each browser displays things incorrectly, pixels, picas, ems, etc. and so on. How do I get it to work across the board? I don't want to be unprofessional and do the "This site should only be viewed in X browser".

The flash enabled parts always wrap and refuse to appear off screen, how do I fix this? When I place them, I want them to stay exactly where they are (which is offscreen on a low resolution, but visible on a higher resolution), not bunch up and move out of place.

I can get the actual background to appear correctly, so when resizing the browser, it remains fixed in the center and reveals the rest of the artwork both left and right. But other elements simply refuse to behave correctly (see first problem, this happens especially with browsers not rendering the same things the same, such as pixels etc. being done differently in each browser).


If you want a real world example of what I'm trying to achieve, please view the following website:

Code:

http://us.blizzard.com/diablo3/?rhtml=y

unfortunately I have no idea what language they used and it looks unreadable to me, so borrowing from view source isn't an option for me in this case (I use Dreamweaver, css and php, and have no understanding of xml or whatever it is they're using, neither do I have the time to learn another language).

Is there anyone who can help me here, cause this is REALLY frustrating me now, it should be incredibly simple but it's not, and I feel as if I'm being forced to abandon everyone who doesn't have X display and X browser. Which I don't want to do.


P.S. Sorry about the weird links, seems new accounts can't use url's *shrugs*.

I've used css to change my alt tag text to be consistent in size and font to the rest of the site, however, a couple of my images are relatively thin, but are tall.

It seems that the alt tags get centered to the image, so you only see the middle of the tag, not the beginning and the end. Is there a way to wrap the text within the confines of the image.

Thanks.

Hi,

I have some code that looks like this .
#nav,#nav ul
which puts all the listed elements in a vertical list.
Now if I do ths
#nav ul..
this changes all the elemnts to a horizontal list.

What does the ',' do for the id css tags exactly as i thought it refered to nested <ul> lists but is doesn't.

I'm sorta new to CSS-positioning so some of the code looks jumbly. But I'm trying to make the page work in mozilla's firefox and in the process of doing that I broke it in IE. Anyways, here is the link to the buggy page that the div containers hop all over the place. If you hit refreash enough you will see the lower section that displays the extra news articles will lose its left-margin setting and hop around. Plus it drops the archive container down below the extended news section as if they widths are clashing when they appear fine in firefox.
I'm assuming there is probably some type of ie bug and I'm curious if someone has a link to a hack for it? Could use any help

I am currently setting the body id of my pages to highlight what item I am on...
Such as:
body#news #news_tab a,
{
border-bottom: 1px solid #fff;
background: #fff;
color: #000;
}

But I was wondering if it was also possible to somehow make a div appear (changing display from hidden to block) by putting an id in the body tag....But since the div isn't a link, for some reason I can't make it work.

I tried:

Adding this div:
<div id="news" style="display:none">Testing Me</div>

Adding this body tag:
<body id="news">

And then adding this style definition:
body#news #news
{
display: block;
}

but it still doesn't display. Is this just not possible? Is there anyway around it?

Thanks!

Hi there,

this is concerning 'id' tags...i've got a style set for my <a> tags, and i wish to create a second <a> style, to be applied to a small set of the <a>'s in my site.

I know the #blah should be used to set an id for it, but here's my concern;
1. where do i state the id for the <a>? (ie. <div id="blah"> or <a href="http:///////" id="blah">).
2. do i need to define an id for the existing style? or can i just leave it the way it is and apply the id to the one i want different?

thanks in advance.

Hi, i have to display a list of links horizontally, wrapped in a <ul> tag. For seo reasons now these links have to be wrapped in <h2> tags. In IE6 + IE7 this causes a linebreak and the links are displayed in a vertical list.
sth like

#myId LI {
display:inline-block;
}
#myId LI H2{
display:inline-block;
}

solves the problem for Firefox but not for IEs. Do you know a solution? Would be highly appreciated!

here the html

<ul id='myId'>
<li><h2><a htref=...>somewhere</a></h2></li>
<li><h2><a htref=...>somewhere</a></h2></li>
</ul>


OK Found out a
float:left in the li
was missing

hey guys, I got a interesting situation here.

I'm building this site...

http://www.peelautoradio.com/source/start.php

The problem is, I've attempted to pickup the style sheets from an external file (site.css). Everything works fine, however, if you click on a link (that isn't complete) or refresh the page too many times - the styles are lost.

here's the css tags. (I'm using include "site.css" in my php now).

Code:

<style>
body {	margin: 0px; 
		font-family: Verdana,sans-serif;
		color: #333333;
		line-height: 1.166;	
		margin: 0px;
		padding: 0px;
		background: #FFFFFF;
}

#topcell {
	position: relative;
	top: 0px;
	left: 0px;
	margin: 10px;
	width: 750px;
	height: 250px;
	background-color: transparent;
	overflow: auto;
	vertical-align: justify;
}

#botcell {
	position: relative;
	margin: 10px;
	top: 0px;
	left: 0px;
	width: 700px;
	height: 250px;
	background-color: transparent;
	overflow: auto;
	vertical-align: justify;
}

#topMenuLinks {
	position: relative;
	top: 2px;
	left: 5px;
	width: 548px;
	height: 20px;
	margin: 0px;
	padding: 3px 9px 2px 2px;
	
}

#topMenuLinks a:link, #menuLinks a:visited {
	display: inline;
	color: #DCE8FF;
	border-left: 4px solid #97163D;
	border-right: 1px solid #CB8A9E;
	font-size: 10pt;
	font-weight: bold;
	padding: 3px 20px 3px 10px;
	background-color: transparent;
	text-decoration: none;
}

#topMenuLinks a:hover {
	display: inline;
	color: #DCE8FF;
	border-left: 4px solid #FFDBE7;
	border-right: 1px solid #FFFFFF;
	font-size: 10pt;
	font-weight: bold;
	padding: 3px 20px 3px 10px;
	background-color: #EC7A9D;
	text-decoration: none;
}

#botMenuLinks {
	position: relative;
	top: 2px;
	left: 170px;
	width: 548px;
	height: 20px;
	margin: 0px;
	padding: 3px 9px 2px 2px;
	
}

#botMenuLinks a:link, #menuLinks a:visited {
	display: inline;
	color: #DCE8FF;
	border-left: 4px solid #97163D;
	border-right: 1px solid #CB8A9E;
	font-size: 10pt;
	font-weight: bold;
	padding: 3px 20px 3px 10px;
	background-color: transparent;
	text-decoration: none;
}

#botMenuLinks a:hover {
	display: inline;
	color: #DCE8FF;
	border-left: 4px solid #FFDBE7;
	border-right: 1px solid #FFFFFF;
	font-size: 10pt;
	font-weight: bold;
	padding: 3px 20px 3px 10px;
	background-color: #EC7A9D;
	text-decoration: none;
}

</style>

Any ideas?