Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Oct 2011
    Location
    Utah
    Posts
    37
    Thanks
    19
    Thanked 0 Times in 0 Posts

    Positioning Problem

    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/tes...periment4.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.

  • #2
    sac
    sac is offline
    New Coder
    Join Date
    Oct 2011
    Location
    London, UK
    Posts
    12
    Thanks
    2
    Thanked 2 Times in 2 Posts
    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) ?

  • Users who have thanked sac for this post:

    NateG (10-28-2011)

  • #3
    Regular Coder
    Join Date
    Sep 2011
    Posts
    341
    Thanks
    3
    Thanked 36 Times in 36 Posts
    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.
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  • Users who have thanked Frankie for this post:

    NateG (10-28-2011)

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    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.

  • Users who have thanked SB65 for this post:

    NateG (10-28-2011)

  • #5
    New Coder
    Join Date
    Oct 2011
    Location
    Utah
    Posts
    37
    Thanks
    19
    Thanked 0 Times in 0 Posts
    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/tes...periment5.html

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

  • #6
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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.
    Teed

  • Users who have thanked teedoff for this post:

    NateG (10-31-2011)

  • #7
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Do you mean the dark line under your h1? From this:

    Code:
    .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.

  • Users who have thanked SB65 for this post:

    NateG (10-31-2011)

  • #8
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by SB65 View Post
    Do you mean the dark line under your h1? From this:

    Code:
    .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.
    Teed

  • Users who have thanked teedoff for this post:

    NateG (10-31-2011)

  • #9
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    6
    Thanks
    0
    Thanked 2 Times in 2 Posts
    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 .

  • Users who have thanked rendezor for this post:

    NateG (10-31-2011)

  • #10
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by NateG View Post
    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.

    1. Create a one-pixel-wide background image with your horizontal lines and use CSS to repeat it on the x-axis.
    2. 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:

    Code:
    <?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.
    Last edited by Arbitrator; 10-29-2011 at 09:16 AM. Reason: I fixed some typos.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    NateG (10-31-2011)

  • #11
    New Coder
    Join Date
    Oct 2011
    Location
    Utah
    Posts
    37
    Thanks
    19
    Thanked 0 Times in 0 Posts

    .line

    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.

  • #12
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by NateG View Post
    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:

    Code:
    <?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:

    Code:
    <!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.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •