CSS - Several Issues. [positions, Dimensions]

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!

Here is the page: http://www.usdphidelts.com/alumni/map.php

There are <div> box's that need to be placed next to each other, one contains the map, the other contains the information about the icon click on the map.

It looks like with my current CSS, the two <div>'s names map and alumni are being placed on top of one another.

Any idea how I can get them to layout next to each other?

Thanks!

hey all,
hopefully someone in here will be able to help me. what I am interested in is how to tell a div to render at the base of the page, once I have it there I intend to make it float so that it is always at the base. does anyone know the x,y positions for the very bottom of the displayed window? any help would be greatly appreciated, thanks in advance.

My layout is not liquid. everything is fixed position. If the veiwer adjusts his text size in his browser then part of the content text in the div's will be pushed out of sight because {overflow:hidden;} has me covered.

How do I get the content in the div to become scrollable in this case?

I don't know if it's possible but I don't really want to have scroll bars on my div's UNLESS the user adjusts text size and forces it to happen.

Can this be done and if so any Ideas on how to do it?

The title might seem like an oxymoron, but here follows what I want to do, for a navbar I am making, where the links are divided into categories, each with their own header div, I do not want those header divs to be visible unless there is any content (text) in them, but at the same time, if there is content in them, I want them to take specific dimensions.

Is there a way to achieve this? That is, either do not appear at all, but if it is to appear, it is to be a certain specified height and width. The min- and max width/-height's do not do the trick here, however I suspect I am far from the first to want to do this so there ought to be a hack or solution of some sort.

Maybe I should add that it is only the height that is an issue here really. I want it to be 19px lest not appear at all.

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

Hi guys.

Straight to pictures:

Fig. 1: Differences in rendering between Standards compliant browsers and Internet Explorer.

Link for html page is www.sential.co.uk/releases.html (this is my example page, but it's the same problem with all pages.)

Now, apart from the fact they're different colors (which is a little strange), the positioning of the border images in IE is different than Safari/Firefox. I've tried playing with the code and positioning over and over with no luck. If I change one to look right, basically, the other ends up looking wrong.

I have 4 corner images and 4 repeating borders. They're all positioned using css in my style sheet, in the format of, basically:
Code:

.corner_topleft{
    position: absolute;
    top: 0px;
    left: 0px;
    ...
}

and so on in that respect for the 4 corners and:
Code:

.border_left{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    background-repeat: x;
    ...
}

etc. for the borders.
I have specified all the heights of the images.

Now the problems in the pictures a
#1: the left and right borders don't repeat down,
#2: the right edge border+corners seem to be out 17px (the width of the border). Although don't think you can simply specify the right border to be inwards 17px because if you do that, in Safari/Firefox, the background blue color overflows 17px outwards (because it's currently underneath that right border. Although, apparently not in IE.)

If any of you guys can offer any help, suggestions, or maybe even a fix, that would be awesome and very appreciated.

Regards,
-Luke (:

Hi all,

After being away from the forums for some while I picked up the "webdesign-bug" again (it's raining during my summer holidays) but I'm having some troubles catching up with all new techniques/syntaxes at the moment. I did have a look at some tutorial sites and searched the forum for similar problems but somehow it's a bit overwhelming and I didn't find the solution I'm looking for yet. I do hope I didn't overlook something very basic or ask a frequently asked question (sorry then )

The goal
I'm trying to make a (css-based) site with a central column with all 'normal' data. Below this central column I'd like to place some additional layers which are (partly) hidden underneath the main layer and which show themselves if you move with your mouse over the visible parts. The idea behind it is to create some 'desktop' where you have all kinds of things laying on eachother (like additional pieces of paper, some photographs, some money, ...). As an extra feature there would be another layer which makes sure there's a shadow from the 'main column' on the items below it. (Hope this is clear?)

What I did so far
To achieve this I thought I'd use different layers with different z-indexes and position them over and underneath eachother. So far I have the following code:

html4strict Code:
Original - html4strict Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Test Layers</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <link href="style.css" type="text/css" rel="stylesheet" /> <script type="text/javascript"> function show( obj ) { bla = document.getElementById( obj ); bla.style.zIndex += 10; } function hide( obj ) { bla = document.getElementById( obj ); bla.style.zIndex -= 10; } </script> </head> <body> <!-- CONTAINER --> <div id="container"> <h2 class="title">Quick Links</h2> <!-- SUBCONTENT --> <div class="subcontent1" id="subcontent1" onMouseOver="show('subcontent1');" onMouseOut="hide('subcontent1');"> Subtext1<br/><img src="/images/1pix.gif" width="400px" height="400px" alt=""/> </div> <div class="subcontent2" id="subcontent2" onMouseOver="show('subcontent2');" onMouseOut="hide('subcontent2');"> Subtext2<br/><img src="/images/1pix.gif" width="400px" height="400px" alt=""/> </div> <!-- CONTENT --> <div class="content_shadow"> <div class="content"> <h1 class="title">Site Title</h1> <div class="content_white"> <h2 class="title">Content Title</h2> Maintext1 </div> </div> </div> </div> </body> </html>

  

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


 <html xmlns="http://www.w3.org/1999/xhtml">


 <head>


     <title>Test Layers</title>


     <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />


     <link href="style.css" type="text/css" rel="stylesheet" />


     <script type="text/javascript">


         function show( obj ) {


             bla = document.getElementById( obj );


             bla.style.zIndex += 10;


         }


         function hide( obj ) {


             bla = document.getElementById( obj );


             bla.style.zIndex -= 10;


         }


     </script>


 </head>


 <body>


  


 <!-- CONTAINER -->


 <div id="container">


     <h2 class="title">Quick Links</h2>


  


     <!-- SUBCONTENT -->


     <div class="subcontent1" id="subcontent1" onMouseOver="show('subcontent1');" onMouseOut="hide('subcontent1');">


         Subtext1<br/><img src="/images/1pix.gif" width="400px" height="400px" alt=""/>


     </div>


     <div class="subcontent2" id="subcontent2" onMouseOver="show('subcontent2');" onMouseOut="hide('subcontent2');">


         Subtext2<br/><img src="/images/1pix.gif" width="400px" height="400px" alt=""/>


     </div>


  


     <!-- CONTENT -->


     <div class="content_shadow">


         <div class="content">


             <h1 class="title">Site Title</h1>


             <div class="content_white">


                 <h2 class="title">Content Title</h2>


                 Maintext1


             </div>


         </div>


     </div>


 </div>


  


 </body>


 </html> 

css Code:
Original - css Code * { margin: 0; padding: 0; } body { background-color: orange; } h1.title { display: none; } h2.title { display: none; } /******************************************************************** * CONTAINER ********************************************************************/ #container { border: solid 1px black; margin: 0 auto; width: 1000px; z-index: 1; /* background-color: lightgray;*/ /* filter: alpha(opacity=50);*/ } /******************************************************************** * SUB CONTENT ********************************************************************/ /* http://msdn2.microsoft.com/en-us/library/ms530301.aspx http://www.w3schools.com/htmldom/prop_style_clear.asp http://www.dynamicsitesolutions.com/css/layout-techniques/ */ #container .subcontent1 { background-color: lime; float: left; position: relative; top: 100px; width: 400px; z-index: 2; /* display: inline;*/ /* height: 200px;*/ /* left: 0px;*/ } #container .subcontent2 { background-color: lime; display: block; float: right; position: relative; top: 200px; width: 400px; z-index: 3; /* display: block;*/ /* height: 200px;*/ } /******************************************************************** * MAIN CONTENT ********************************************************************/ #container .content_shadow { background-color: gray; display: block; margin: 0 auto; opacity: .75; position: relative; top: 0px; width: 850px; z-index: 8; } #container .content { clear: none; margin: 0 auto; width: 800px; z-index: 9; } #container .content_white { background-color: white; display: block; height: 800px; margin: 0 auto; position: relative; top: 0px; width: 100%; z-index: 10; }

  

 * {


     margin: 0;


     padding: 0;


 }


  


 body {


     background-color: orange;


 }


  


 h1.title {


     display: none;


 }


 h2.title {


     display: none;


 }


  


 /********************************************************************


  * CONTAINER


  ********************************************************************/


  


 #container {


     border: solid 1px black;


     margin: 0 auto;


     width: 1000px;


     z-index: 1;


 /*  background-color: lightgray;*/


 /*  filter: alpha(opacity=50);*/


 }


  


 /********************************************************************


  * SUB CONTENT


  ********************************************************************/


  


 /*


 http://msdn2.microsoft.com/en-us/library/ms530301.aspx


 http://www.w3schools.com/htmldom/prop_style_clear.asp


 http://www.dynamicsitesolutions.com/css/layout-techniques/


 */


  


 #container .subcontent1 {


     background-color: lime;


     float: left;


     position: relative;


     top: 100px;


     width: 400px;


     z-index: 2;


 /*  display: inline;*/


 /*  height: 200px;*/


 /*  left: 0px;*/


 }


  


 #container .subcontent2 {


     background-color: lime;


     display: block;


     float: right;


     position: relative;


     top: 200px;


     width: 400px;


     z-index: 3;


 /*  display: block;*/


 /*  height: 200px;*/


 }


  


 /********************************************************************


  * MAIN CONTENT


  ********************************************************************/


  


 #container .content_shadow {


     background-color: gray;


     display: block;


     margin: 0 auto;


     opacity: .75;


     position: relative;


     top: 0px;


     width: 850px;


     z-index: 8;


 }


 #container .content {


     clear: none;


     margin: 0 auto;


     width: 800px;


     z-index: 9;


 }


  


 #container .content_white {


     background-color: white;


     display: block;


     height: 800px;


     margin: 0 auto;


     position: relative;


     top: 0px;


     width: 100%;


     z-index: 10;


 } 

The problem(s)
Besides the (css)code probably being sloppy (and redundant at points?!?) since I experimented a lot with adding and removing of position-tags, floating-tags, etc etc.. it still fails to do what I'm aiming for. As can be seen on the attached screenshot most of it seems to be working (at least in FF2) (I had my mouse over the 2nd subcontent-layer btw) but the maintext1 won't start at the left of it's layer but instead starts on a x-coordinate where the 1st subcontent-layer finishes Can somebody point me to what I'm doing wrong? Also, if somebody has a relevant tutorial I'd appreciate it as well since I obviously need some extra exercise with this stuff (working on it already btw but you never know if there's another good one)

Thanks for any help and if something isn't clear I'll try to explain it further!

Hi,

Im interested in finding an app to create the layouts of my web in a visual way, you know creating the divs with the mouse dragging and droping the corners and the laterals of the divs.

I have found Kompozer, but the position, the margins, etc, of the divs that you dimension, go directly to the HTML code (inline styles).

Do you know any visual css editor that writes the dimensions, margins and position of the divs in a .css file?

Ciao

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 cannot figure this out. I've tried adding clear: both in several places, I've tried overflow: hidden and I've tried cursing. Nothing works! How can this be fixed so that in IE6 the divs are not staggered vertically??

Code:

<div style="height: 38px; margin: 0px; padding: 0px; width: 140px;">

<div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="38" border="0"></div>
<div style="float: right; height: 38px; width: 102px;">copy</a><br>copy</a></div>

</div>


<div style="height: 38px; margin: 0px; padding: 0px; width: 140px;">

<div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="19" border="0"></div>
<div style="float: right; height: 38px; width: 102px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="8" border="0"></div>

</div>

Hey,

I came across this forum and hopefully somebody can help me.

Here is my website: http://www.jmuelectricmotorcycle.tk

When the page is in firefox, If you page zoom out, the navbar goes under the content instead of staying on the right. I think it has something to do with padding and the sidebar not having enough room so it drops down. When I set the content to 1005 instead of 1000, it works, but there's a giant 5 pixel gap between my side bar and my content container.

Also, does anybody know how to style called data from ssi.php in SMF forums? I want my login boxes to look like my main page.

Thanks. Here is my css:

Code:

html {
	font: normal 12px verdana, arial;
        background-color: #000
}

body {
text-align: center
}

#fw-container {
margin: 0 auto;
width: 1000px;
text-align: left
}

.hasSidebar #fw-container {
	width: 1000px;
}

a, 
a:visited {
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

/* --- Header --- */

#fw-head {
	position: relative;
	height: 196px;
	background: #242424;
}

#fw-title {
	font: bold 26px verdana;
	letter-spacing: -1px;
	position: absolute;
	top: 20px;
	left: 20px;
	padding: 0;
	margin: 0;
	z-index: 10;
}

#fw-title a, 
#fw-title a:visited, 
#fw-title a:hover {
	color: #fff;
}

.fw-logo {
	width: 760px;
	height: 196px;
	position: absolute;
}

.hasSidebar .fw-logo {
	width: 1000px;
}

/* --- Navigation --- */

#fw-mainnavwrap {
	background: #242424;
	padding: 10px 20px;
	font-family: arial;
	font-weight: normal;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
}

#fw-mainnavwrap ul {
	margin: 0;
	padding: 0;
	background: transparent;
	list-style-type: none;
}

#fw-mainnavwrap li {
	margin: 0px 15px 0px 0px;
	display: inline;
}

/* --- Content --- */


#fw-bigcontain {
	width: 760px;
	float: left;
}

.fw-paragraph {
	background: #242424 url('../Waveform/img/bg-p.gif') repeat-x top left;
	border-bottom: 1px solid #000;
	padding: 15px 20px 10px;
	overflow: hidden;
}

.fw-title {
	margin: 0px 0px 10px;
	font: 18px verdana;
	color: #fff;
}

.fw-text {
	margin-bottom: 10px;
}

/* --- Sidebar stuff --- */

.hasSidebar #fw-sidebar {
	width: 239px;
	float: right;
	font-size: 12px;
	clear: right;
	border-left: 1px solid #000;
}

#fw-sidebar .fw-title a,
#fw-sidebar .fw-title a:visited,
#fw-sidebar .fw-title a:hover {
	color: #fff;
	text-decoration: none;
}

#fw-sidebar .fw-title {
	font-size: 1.3em;
	font-weight: normal;
}

/* --- Footer --- */


#fw-footer {	
	font: normal 10px verdana, sans-serif;
	background: #242424;
	margin: 0px;
	padding: 11px 0px 1px;
	color: #999;
	clear: both;
	width: 760px;
}

.fw-footertext {
	background: #161616;
	border-bottom: 1px solid #000;
	border-top: 1px solid #000;
	margin: 0px;
	padding: 6px 0px 6px 20px;
}

I am curious to know if IE8 as released is what I should be designing for? I have noticed that sites I have developed that look good in IE7 and FF look as they should, but open them up in IE8 and they do not look good at all. Tom

I'm doing the CSS for IE7 and 8 for my site right now. And I'm having issues with borders for some of my div's.

http://www.netgamegurus.com/

The middle and right columns have a blue line in the middle. Those are borders that should be at the bottom if the "title" div's.

the left column is fine and the css is almost identical.

here's the css for the News div

Code:

//wrap for the div's
.sn_box { 
height:343px; 
width:572px; 
} 

//CSS for the title div
.sn_title { 
background-image:url(../images/bar_bg_003.jpg); 
height:25px; 
text-align:center; 
border-top:#4575D4 solid 1px; 
border-bottom:#4575D4 solid 1px; 
} 

//div for the content
.sn_title_txt { 
font-family:TROGLO; 
padding-top:2px; 
font-size:20px; 
color:#000000; 
}

here's what I got for the IE fix

Code:

.sn_title { 
background-repeat:repeat-x; 
}

Hello guys, my name's Ben, how y'all doing?

I recently took over a website for my uni canoe club and am trying to design a new, better looking version of the site at present. I am getting there, but I am having a few issues with CSS that I can't seem to fix. Note that I have been testing the site on Firefox, and plan to come back to any IE issues once it looks good with standards.

A static mockup (php will come later) of the site as it stands now can be found here (URL www DOT uhcc DOT co DOT uk/v3_mockup/) (excuse the dodgy slogon, that's just a placeholder from one of our old t-shirts) the two problems I am having are as follows:
I can't seem to remove the white spaces between the images in the right hand column. margin and padding are set to 0 for the images, so I can't see what is causing it I need the left and right column to extend right down to the footer. They are both set at "height:100%" but that doesn't seem to work. Also the #main div doesn't seem to extend down as far as the footer, either! ARGH!
Any help will be much appreciated!