www.webdeveloper.com
Results 1 to 15 of 15

Thread: This code stopped working

  1. #1
    Join Date
    Mar 2004
    Location
    Nevada, USA
    Posts
    210

    This code stopped working

    This code was working for a few days and when I made an image larger on the page, this link no longer opens a new page.

    I don't see anything wrong with it.

    This "X" is placed on top of a box with a gray background and should take the viewer back to the page they came from to view the larger image on this page when it is clicked on.

    Code:
    <div id="return">
          <a href="http://lawrence-nv.us/xxx/"><p>X</p></a>
    </div>
    Edit:

    I must be missing something obvious.
    Here is all the body code for this page:
    Code:
    <body>
    <div id="page">
        <div id="return">
          <a href="http://lawrence-nv.us/xxx/"><p>X</p></a>
        </div>
    
        <div id="painting">
           <img src="spring-810x540.jpg" alt="painting">
            <div class="title">Spring</div>
        </div>
    </div>
    </body>
    Last edited by lkeeney; 05-14-2014 at 06:10 PM.

  2. #2
    I'd wonder if it's a CSS depth sorting issue - you might have something overlapping it that you can't see. This can happen a LOT if you are using too much relative or absolute positioning instead of letting things sit in flow properly... or if you aren't getting proper float clearing.

    THOUGH, even if HTML 5 says you can do it, in practice it's still broken garbage to put block-level tags (like P) inside inline-level ones (like A) -- there's a reason it was invalid markup prior to HTML 5, and to be frank they're full of **** for changing that out as it doesn't even make sense. NOT that I'm seeing a legitimate reason for those to even BE paragraphs since a single "X" is NOT flow text! Also doesn't look like you need to lip-service it so I'm wondering about the DIV around that anchor too -- but that could just be that I'm not seeing the CSS... or the image.

    Really to diagnose it properly, I'd need to see the whole page, not a snippet. Have you tried using an element inspector like firebug or dragonfly?

  3. #3
    Join Date
    Mar 2004
    Location
    Nevada, USA
    Posts
    210
    OK, I got rid of the <p>X</p> and made a graphic element instead, but the link still does not work. I copied the address shown and entered in into a browser and it opened the correct page. The xxx shown is replacing other text because I am not allowed to show any parts of this actual website until it is completed.

    This is the complete code for this page. Nothing happens when I click on the new image.

    If it would help to see a working example of what doesn't work, I will be happy to build this up as a separate on-line two page website to demonstrate the problem.

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title>Large Image</title>
    <style type="text/css">
    html {
        margin : 0;
        padding : 0;
    }
    #page{
        background-color: #e6e6e6;
        height: 600px;
    }
    #painting{
      position: relative;
      top: 10px;
      left: 90px;
    }
    .title{
      position: relative;
      top: 5px;
      left: 395px;
    }
    #return{
      position: absolute;
      top: 20px;
      left: 910px;
    }
    a:link {text-decoration:none;}
    </style>
    </head>
    <body>
    <div id="page">
        <div id="return">
          <a href="http://www.lawrence-nv.us/xxx"><img src="return.jpg" alt="Link"></a>
        </div>
        <div id="painting">
           <img src="spring-810x540.jpg" alt="painting">
            <div class="title">Spring</div>
        </div>
    </div>
    </body>
    </html>
    Last edited by lkeeney; 05-14-2014 at 10:51 PM.

  4. #4
    Join Date
    Oct 2013
    Posts
    595
    Code:
    #painting{
      position: relative;
      top: 10px;
      left: 90px;
      z-index:1000;
    }
    #return{
      position: absolute;
      top: 20px;
      left: 910px;
      z-index:5000;
    }

  5. #5
    Join Date
    Mar 2004
    Location
    Nevada, USA
    Posts
    210
    Quote Originally Posted by Kevin2 View Post
    Code:
    #painting{
      position: relative;
      top: 10px;
      left: 90px;
      z-index:1000;
    }
    #return{
      position: absolute;
      top: 20px;
      left: 910px;
      z-index:5000;
    }
    Can you explain what this code is supposed to do? I have used z-index before, but only to bring things forward on the screen.

    This change does not make any difference in the operation of the code I supplied.

  6. #6
    Join Date
    Oct 2013
    Posts
    595
    Or
    Code:
    #painting{
      position: relative;
      top: 10px;
      left: 90px;
      width:810px; /*adjust to fit image*/
    }
    #return{
      position: absolute;
      top: 20px;
      left: 910px;
    }
    Or:
    HTML Code:
    <div id="page">
        <div id="painting">
           <img src="spring-810x540.jpg" alt="painting">
            <div class="title">Spring</div>
        </div>
        <div id="return">
          <a href="http://www.lawrence-nv.us/xxx"><img src="return.jpg" alt="Link"></a>
        </div>
    </div>
    The point is that a <div> can automatically grow/shrink vertically to fit the contained content, but it is always the width of the container unless specified otherwise (height may be specified also). Additionally HTML is rendered top to bottom. So <div id="return"> was being overlayed by the right margin of <div id="painting"> since that right margin is essentially the right edge of the <div id="page">.

    Not the best explanation, but it's late.
    Last edited by Kevin2; 05-15-2014 at 12:11 AM.

  7. #7
    Join Date
    Oct 2013
    Posts
    595
    Quote Originally Posted by lkeeney View Post
    Can you explain what this code is supposed to do? I have used z-index before, but only to bring things forward on the screen.

    This change does not make any difference in the operation of the code I supplied.
    Huh???? This works perfectly in latest versions of Chrome, FF, and IE in Win8.1. It is your exact code as you posted above with the addition of the z-indexes I posted. The link you say doesn't work with your original code absolutely does with this. When I click on it I get your 404 page.
    HTML Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title>Large Image</title>
    <style type="text/css">
    html {
        margin : 0;
        padding : 0;
    }
    #page{
        background-color: #e6e6e6;
        height: 600px;
    }
    #painting{
      position: relative;
      top: 10px;
      left: 90px;
      z-index:1000;
    }
    .title{
      position: relative;
      top: 5px;
      left: 395px;
    }
    #return{
      position: absolute;
      top: 20px;
      left: 910px;
      z-index:5000;
    }
    a:link {text-decoration:none;}
    </style>
    </head>
    <body>
    <div id="page">
        <div id="return">
          <a href="http://www.lawrence-nv.us/xxx"><img src="return.jpg" alt="Link"></a>
        </div>
        <div id="painting">
           <img src="spring-810x540.jpg" alt="painting">
            <div class="title">Spring</div>
        </div>
    </div>
    </body>
    </html>
    If it doesn't work for you try one of my other ideas I posted above.

  8. #8
    Join Date
    Mar 2004
    Location
    Nevada, USA
    Posts
    210
    Quote Originally Posted by Kevin2 View Post
    Huh???? This works perfectly in latest versions of Chrome, FF, and IE in Win8.1. It is your exact code as you posted above with the addition of the z-indexes I posted. The link you say doesn't work with your original code absolutely does with this. When I click on it I get your 404 page.
    HTML Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title>Large Image</title>
    <style type="text/css">
    html {
        margin : 0;
        padding : 0;
    }
    #page{
        background-color: #e6e6e6;
        height: 600px;
    }
    #painting{
      position: relative;
      top: 10px;
      left: 90px;
      z-index:1000;
    }
    .title{
      position: relative;
      top: 5px;
      left: 395px;
    }
    #return{
      position: absolute;
      top: 20px;
      left: 910px;
      z-index:5000;
    }
    a:link {text-decoration:none;}
    </style>
    </head>
    <body>
    <div id="page">
        <div id="return">
          <a href="http://www.lawrence-nv.us/xxx"><img src="return.jpg" alt="Link"></a>
        </div>
        <div id="painting">
           <img src="spring-810x540.jpg" alt="painting">
            <div class="title">Spring</div>
        </div>
    </div>
    </body>
    </html>
    If it doesn't work for you try one of my other ideas I posted above.
    Thank you. Thank you.

    The addition of width: solved the problem, and it makes sense to me.

    I don't know why the z-index code didn't work. As far as I know, I am running the latest version of Firefox, and I didn't even think of testing it in another browser. I usually wait until I get a page working perfectly before I test in other browsers.

  9. #9
    Join Date
    Oct 2013
    Posts
    595
    Whew!! Glad to help. The only thing I can suggest on the z-index version is to do a hard refresh. Sometimes I get old page versions on "normal" refreshes (clicking the browser refresh/reload button).

  10. #10
    Join Date
    Mar 2004
    Location
    Nevada, USA
    Posts
    210
    Quote Originally Posted by Kevin2 View Post
    Whew!! Glad to help. The only thing I can suggest on the z-index version is to do a hard refresh. Sometimes I get old page versions on "normal" refreshes (clicking the browser refresh/reload button).
    Thanks again. I learned a lesson on this one. I knew that the <div> would extend beyond the image, and normally I put in a width. What I didn't realize that this extended <div> would hide something that you could actually see on the screen from being clicked on.

    At age 77, I still learn something new every day.

    You are probably correct that a refresh may have solved the problem with the z-index fix.

  11. #11
    Question: Why the devil are you using top/left to leave the element's flow in place on things? OF COURSE you're going to have positioning hell on that when you're using relative + left + top to do padding or margin's job! I don't quite think you are grasping what position:relative does or how/when to use it. (which 99% of the time is just so apo's inside it are based off it instead of the window, or to fix depth-sorting)

    Is there some tutorial out there right now telling people to do that?!? I've been seeing a LOT of that recently and it's just a gibberish broken way to build a layout.

    Of course, fixing the height is also bad practice... or is that for testing (in which case I'd use min-height)

    Also, you really might want a real reset....

    ... and left 910px? Are you using a fixed width layout or just not designing for actual displays other than desktop?

    ... not sure what you're trying to accomplish for layout, but I'm 99.99% sure that's not how you build a layout with CSS.

    I'm guessing wildly, but suspect you should have something more like this:
    Code:
    <!DOCTYPE HTML>
    <html><head>
    
    <title>
    	Large Image
    </title>
    
    <style type="text/css">
    
    /* null margins and padding to give good cross-browser baseline */
    
    html,body,address,blockquote,div,
    form,fieldset,caption,
    h1,h2,h3,h4,h5,h6,
    hr,ul,li,ol,ul,dd,dt,
    table,tr,td,th,p,img {
    	margin:0;
    	padding:0;
    }
    
    img,fieldset {
    	border:none;
    }
    
    hr {
    	display:none;
    	/*
    		HR in my code are for semantic breaks in topic/section, NOT
    		style/presenation, so hide them from screen.css users
    	*/
    }
    
    #page {
    	position:relative;
    	zoom:1; /* trip haslayout, fix positioning legacy IE */
    	background:#E6E6E6;
    }
    
    #return {
    	position:absolute;
    	top:1em;
    	right:1em;
    	text-decoration:none;
    }
    
    #return img {
    	display:block;
    }
    
    #painting {
    	padding:0.5em;
    	text-align:center;
    }
    
    #painting img {
    	max-width:95%; /* make it shrink for narrow displays */
    }
    
    #painting div {
    	padding-top:0.25em;
    }
    
    </style>
    
    </head><body>
    
    <div id="page">
    	<a href="http://www.lawrence-nv.us/xxx" id="return">
    		<img src="return.jpg" alt="Link">
    	</a>
    	<div id="painting">
    		<img src="spring-810x540.jpg" alt="painting" />
    		<div>Spring</div>
    	</div>
    </div>
    
    </body></html>
    don't take elements out of flow or worse, leave them in flow but reposition them for no good reason. If you don't have to -- not everything needs a DIV around it, and you can often leverage inheritance to avoid extra classes.

    Lemme break down that CSS for you.

    I always start my layouts with a reset. Simple fact is cross-browser there are no standard default paddings, margins or border-widths on elements, so a reset just makes sense; more sense than saying margin:0; padding:0; border:0; every blasted time you try to use any of the elements listed.

    There are smaller resets, like the so called "universal reset" of "* { margin:0; padding:0; border:0; }" -- but that can wreak havoc with trying to style form elements in legacy browsers (pretty much IE 8/lower and Gecko 10/earlier). There are larger resets, like the Eric Meyer's monstrous "reset reloaded" -- but resets like that waste time setting values that have nothing to do with being a 'reset' and are so large (2k or more) they end up being more of a framework than a reset. Really large resets are what gives resets a bad name.

    At a quarter K the one I use (developed by Dan Schulz) has never failed me, isn't too large, and is a nice happy middle-ground.

    I relative position #page so that absolute positioning inside it is based on this element, and NOT body. 'zoom' is an IE specific property I use here to trip what's called "haslayout" -- a browser quirk that actually FIXES positioning bugs. Without this absolute positioning your 'return' element won't appear in the right spot in legacy versions of IE.

    The laugh being some developers will kvetch about using zoom, but have no problem with vendor specific browser prefixes :/

    #return is absolute positioned -- we don't need no steenkin wrapping DIV around it, just target the anchor. Using right-positioning instead of the massive left lets the layout be fluid, so people on smaller screens than what you were designing on aren't shtupped on using the page.

    "#return img" I set to display:block so that any oddball vertical alignment issues inherent to the IMG tag's normal display state don't crop up. This can include unwanted top margin, unwanted bottom margin or padding, or strange alignment issues. You apo a image's container, do this. TRUST me on this.

    #painting -- I pad it all around 0.5em -- I use EM's instead of pixels so that it dynamically scales to the user's preferences. Using text-align is probably going to look nicer than that oddball 'perfect positioning' thing you were trying to do. Note I use padding, NOT top or left on this because the element is 'in flow' -- if you use relative positioning the element will depth-sort over anything before it in the markup unless you add z-index. Rather than z-index, just don't relpo this element!

    #painting img - the image I set a max-width of 95% on, which will make the image shrink in size when the window is too small to show it.

    #painting div - rather than throw a class at the text below it, we can target the tag off it's parent ID. Padding just pushes the text inside the DIV down to where you wanted. Again I'm using EM's so the gap dynamically scales based on the default browser text size.

    I think that's what you're trying for, yes?

    -- edit -- I'd probably also axe that HTML 5 doctype garbage and use an actually RECOMMENDATION document.

  12. #12
    Oh, thought maybe I should explain what's wrong with using relative positioning the way you were.

    I like to say there are actually TWO boxes a browser uses per element - the "flow" box which says how other elements "flow" or interact with it, and the "render" box which is where it's drawn -- generally speaking the two do behave as separate entities.

    Margins for example enlarge the flow box, but don't change the size the element is drawn -- negative margins can actually shrink the flow box, again not changing how it's drawn... This oversimplifies and it ain't quite right, but for purposes here it will have to do, as I ain't got the time to explain it to you...

    Relative positioning does something even wilder -- if you use top/left/right/bottom on a relative positioned element, it moves the render box, but not the flow box. For example:

    <div id="test"><div></div></div>

    Code:
    #test {
    	background:#F44;
    }
    
    #test div {
    	position:relative;
    	top:32px;
    	left:32px;
    	width:64px;
    	height:64px;
    	background:#0F0;
    }
    The green box is moved down and left 32 pixels, but notice the parent #test is in the same spot it was, BUT is correctly sized at 64px square. The part of the inner DIV that says how big it is remains in it's original location, even if it's drawn someplace completely different.

    So unless that was the desired effect, it's something to be avoided. REALLY it looked to me like you were using top and left with position:relative to be doing margin and paddings job -- and the deeper you get into a page and the more stuff you have on the page, the harder and harder and harder that's going to make styling things.

    Hope that helps clarify thigns a bit...

  13. #13
    Join Date
    Mar 2012
    Posts
    1,811
    @deathshadow

    Just a query about position:relative, do you find it useful? I use it in a parent element (which itself is "in the flow") to place a position:absolute child element w.r.t. it. Other than that, it does not make sense to me.

  14. #14
    Quote Originally Posted by jedaisoul View Post
    Just a query about position:relative, do you find it useful? I use it in a parent element (which itself is "in the flow") to place a position:absolute child element w.r.t. it. Other than that, it does not make sense to me.
    I have found a handful of cases where it was handy -- but that was before we had CSS3.

    Check this out...

    Code:
    <div id="test">
    	<div class="content">
    		Test content here
    	</div>
    </div>
    Code:
    #test {
    	margin:2em 2em 0 0;
    	background:rgba(0,0,0,0.2);
    }
    
    .content {
    	position:relative;
    	top:-1em;
    	left:-1em;
    	padding:1em;
    	background:#EEE;
    }
    Instant drop-shadow... PRE CSS3. Not fuzzy at the edges, but it's still a transparent drop-shadow.

    It can also be useful if you want generated content slightly offset or adjusted from the contents of the element you put it inside. There are uses, but they're rare. Really the major uses for it remain letting you absolute position child elements off it instead of whatever parent has positioning (usually BODY) or letting you set z-index when there's overlap -- either with a sibling-element that's positioned, or when negative margins are in play.

    See the semi-fluid content-first column method -- which is all of the above in play at once; PARTICULARLY if going for three columns.

    Code:
    <div id="contentWrapper"><div id="content">
    	Content Here
    <!-- #content, #contentWrapper --></div></div>
    
    <div id="extras">
    	<div class="firstSection">
    		Left side column
    	<!-- .firstSection --></div>
    	<div class="secondSection">
    		Right side column
    	<!-- .secondSection --></div>
    <!-- #extras --></div>
    #extras is there for when you make it responsive, to make the two columns into one at intermediate widths. The three column version would read:

    Code:
    #contentWrapper {
    	float:left;
    	width:100%;
    }
    
    #content {
    	margin:0 17em;
    	/*
    		side margins == sideBar width plus any extra
    		desired space between columns
    	*/
    }
    
    .firstSection,
    .secondSection {
    	position:relative;
    	/*
    		Since #contentWrapper is NOT positioned, setting
    		relative positioning here results in this sorting
    		OVER elements before it... 
    		
    		like #content and #contentWrapper
    	*/
    	float:left;
    	width:16em;
    }
    
    .firstSection {
    	left:-100%;
    	margin-right:-16em; /* == column width */
    }
    
    .secondSection {
    	margin-left:-16em; /* == column width */
    }
    Dunno if you've ever seen that little trick, it's the core of a decent "pre-CSS 3 flexbox" content-first three column layout, with the outer columns elastic and center column fluid. There used to be a version floating around the web that doesn't need the extra #contentWrapper, but I distrust it as it relies on hacks that I've seen not work -- extra hacks that may or may not work, or just suck it up and add one measly DIV? I'm a minimalist, but even I think that's an easy choice. There's also a version that uses padding on the container wrapping all three columns, but I've found that implementation to also be a bit too fragile.

    The big trick of how it works being that see how #contentWrapper is full available width, leaving 0px free for elements to float next to it? The negative margins on the columns equal to their width set their 'flow box' (as I described above) to 0 width in flow -- meaning they will pop up floating next to #content -- but their 'render box' is still full size, so the one that's got margin-left will render over the left side margin on #content. The one with margin-right is set off next to it on the right, which we can then use left:-100% to slide it into place over #content's left margin.

    The big 'feature' of this being that thanks to using relative positioning and 'left' to slide over the column 100%, and using negative margins to make them 0 width, they are still in flow height-wise, so any 'footer' after will be pushed down (assuming it's clearing floats) regardless of which column is tallest -- something absolute positioning these columns would be incapable of. It also means their code order is more compatible with logical document structure, since if one is thinking "content first" you need that center column... well... first in the code order after any page heading and main navigation.

    ... and the kicker is, it works all the way back to IE 5.5 Windows or IE 5.2 Mac. It's also handy when making useless garbage fixed width layouts, as you can just use this in the middle so you don't have to calculate the perfect width of every element in use.

    Even when the client is a total ignorant dumbass and wants a crappy fixed width layout, I code it fluid, then just fix the width of the outermost container -- it's actually EASIER that way.

    I use this method on pretty much every site I make when columns are involved -- it's one of the best ways to get multi-column that's easy to get elastic side columns, that you can strip down to one column, two columns with the side-bars one over the other, content full width with the two side-columns moved next to each-other below the content, or going to three columns or more! I am increasingly playing with flex-box, it's just not real-world ready for columns; GREAT for min-height layouts though!

    So yeah, there are uses for position:relative;
    Last edited by deathshadow; 05-16-2014 at 06:00 PM.

  15. #15
    Join Date
    Mar 2012
    Posts
    1,811
    Thanks,I'll add these code snippets to my collection of useful tips.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles