...

View Full Version : Positioning Problem



NateG
10-28-2011, 07:25 AM
I am having, what I think to be a positioning problem. As I change the position of different divs, I am noticing that the bars in the background of the doc are being cut off either as the browser window is enlarged or made smaller (use the horizontal scroll bar).

http://dl.dropbox.com/u/14080718/testing/experiment4.html

I have set this document up the way it is for a reason. It is eventually going to be a responsive site and as media quires change so will the size and margin of the bars in the background. I would like to keep the bars running the full length of the screen. I would also like to keep as much of this site css as I can. So, if anyone sees a better way to set the doc up please let me know.

I am fairly new to web design and I am finding I am struggling to understand positioning. If anyone can throw a cool tutorial my way or give me a helpful tip, I would be much appreciated.

sac
10-28-2011, 12:46 PM
I can't really help you with your issue but you can always check these examples - as they use similar code:

http://www.cssplay.co.uk/menu/tree.html

and

http://www.cssplay.co.uk/menu/flag.html

Personally I think that a background image for your background would be better. Css lines are fine but is there really any good reason to use them (for the file size maybe) ?

Frankie
10-28-2011, 01:28 PM
If anyone can throw a cool tutorial my way
Ain't got much time right now, but here's a tutorial that should give you the right tools: How to Position in CSS (http://www.website-laten-maken-amsterdam-nh.nl/blog/how-to-position-divs-with-css.php).

SB65
10-28-2011, 02:03 PM
You have set most of the widths on your elements to 100% and that's the width they are - 100% of the viewport. However, some of your elements have width set to 100em, which may be wider than your viewport - so the page is wider than the viewport and scrollbars appear - consequently if you scroll right then you can see the edge of the elements which are only 100% wide.

Remove the widths at 100em and everything centres in the viewport - they're set on nav and #eraser1, #eraser2, #eraser3.

So, your page now centres, which I assume is what you want.

I haven't been all through your code, but I'd also be inclined to use background images more and cut down the number of divs you need for your header.

NateG
10-28-2011, 06:49 PM
Thanks for all of the help. Making the bars a background image seemed to to solve that problem. But I still have a div cutting into my document. It cuts into the line below the name. You can see it if you condense your browser window and use the horizontal scroll bar.

http://dl.dropbox.com/u/14080718/testing/experiment5.html

Not sure what is causing this. Any ideas? Because I am running out of them.

teedoff
10-28-2011, 07:04 PM
Well I think its your eraser3.png image thats covering the top of your h1 text, just havent seemed to solve it yet.

Seems the eraser3.png image doesnt even show in firefox, so theres not covering issue.

SB65
10-28-2011, 07:22 PM
Do you mean the dark line under your h1? From this:


.line {
background-color: #003333;
height: 0.625em;
width: 100%;
z-index: 3;
}

If not I can't see anything in FF7.

As a slight aside, do you really want your page to be that wide? Setting it at 100em means the majority of users will have to scroll to see the whole screen.

teedoff
10-29-2011, 04:56 AM
Do you mean the dark line under your h1? From this:


.line {
background-color: #003333;
height: 0.625em;
width: 100%;
z-index: 3;
}

If not I can't see anything in FF7.

As a slight aside, do you really want your page to be that wide? Setting it at 100em means the majority of users will have to scroll to see the whole screen.

When I viewed it earlier today, there is an image...eraser3.png that covers the h1 text a bit from the top in IE. FF looks ok.

rendezor
10-29-2011, 08:07 AM
hi nate..of course your bars in the background of the doc are being cut off,it because you give the eraser1,eraser2,eraser3 width:100em; , Maybe you actually want to write with 100% but wrong to 100em .

Arbitrator
10-29-2011, 09:11 AM
So, if anyone sees a better way to set the doc up please let me know.IMO, the best way to create this layout involves two background images.


Create a one-pixel-wide background image with your horizontal lines and use CSS to repeat it on the x-axis.
Create a background image with your trapezoidal shapes, and use CSS to center it over the first background image.

The above should substantially simplify your code to something like this:


<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US">
<head>
<title>Demo</title>
<style>
* { margin: 0; }
html { background: url("image_1.png") repeat-x; }
body { background: url("image_2.png") no-repeat center; }
header { text-align: center; }
img { vertical-align: bottom; }
</style>
</head>
<body>
<header>
<hgroup>
<h1><img width="135" height="178" alt="RocketDesign" src="rocketdesign.png"/></h1>
<h2>Nate Gines</h2>
</hgroup>
</header>
</body>
</html>

If you're really insistent upon avoiding images, you can use data URIs to hard code them into the document.

NateG
10-31-2011, 06:47 AM
Wow! you guys have helped me alot. Ive pretty much got everything working the way I need it. And thanks Arbitrator for the idea of multiple background images. It does make the code simpler.

I am still have problems with my .line. I simplified the elements to help you see. If you condense your browser window and use the horizontal scroll bar, you will notice that the .line div (thiner line with a background of black) gets cut off. Can anyone explain to me why this happens and how to fix it? I would like the .line div to go to the edge of the browser window.

http://dl.dropbox.com/u/14080718/testing/line.html

You guys are awesome! Thanks for all the help.

Arbitrator
11-01-2011, 07:15 AM
I am still have problems with my .line. [...] If you condense your browser window and use the horizontal scroll bar, you will notice that the .line div (thiner line with a background of black) gets cut off. Can anyone explain to me why this happens and how to fix it? I would like the .line div to go to the edge of the browser window.I am only seeing this issue in Internet Explorer 9 which also has other problems. I'm not sure what the precise issue is, but I suspect it's happening because your page is displaying in quirks mode. (If you open Internet Explorer 9 and press F12 to bring up the F12 Developer Tools pane you'll see "Document Mode: Quirks" which indicates that your document is displaying in quirks mode.)

The code I provided is for XHTML5 documents. The problem code is the following:


<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US">

Change that to the following code if you wanted to create an HTML5 document:


<!doctype html>
<html lang="en-US">

Or if you really wanted to create an XHTML document, you need to use an XHTML or XML file extension: *.xhtml, *.xht, or *.xml.

Also worth noting is that the z-index property has no effect for non-positioned elements (via the position property).

In case you're curious about Internet Explorer's other quirks:

The blue box is missing because custom elements are not stylable (without a hack) and because each tag of custom elements are rendered as their own element (i.e., <nav></nav> and </nav><//nav>) in IE quirks mode.
The red box is not centered because margin-based centering via margin-left: auto; margin-right: auto; is not supported in IE quirks mode.
The black bar's width issue probably has something to do with the fact that the min-width property is not supported in IE quirks mode.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum