SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Question Where Could I Put This Image?

    emailbox.gifI made an image which I wish to put tucked under the #rightside div of the page at http://www.productreviewsbytyler.com. This email submit box will need to have a field over it which the user can enter an email address.

    Again, Positioning:
    Tucked right below the right side window.


    My guess is to give rightside a higher z-index. Let me know if that's correct.
    Should there be a new div with id, say "emailsubmit", containing the <field> element?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    If you mean you want it placed beneath that rightside block then you could place it there absolutely from within the righstide div. It's not a very stable way to build a site with absolute elements like that though but seeing as you started.

    e.g Very Roughly:

    Code:
    .emailbox{
    position:absolute;
    left:0;
    bottom:-200px;/* height of image - adjust to suit*/
    background:url(email.gif) no-repeat 0 0;/* this is the image*/
    width:150px;/* width of image*/
    padding:100px 10px 0;/* padding top to make room for the input */
    height:50px;/* addittonal height as required*/
    }
    Code:
    <div id="rightside">
    		<h2 class="sideWindowHeaderText">The 'Bad' List</h2>
    		<ul class="sideWindowLinks">
    				<li><a href="#">This Site Sucked</a></li>
    				<li><a href="#">Another Terrible Product</a></li>
    				<li><a href="#">What a Dumb Idea this Was!</a></li>
    		</ul>
    		<form class="emailbox" name="form1" method="post" action="">
    				<div>
    						<label for="email">Email</label><br>
    						<input type="text" name="email" id="email"><br>
    						<input type="submit" name="go" id="go" value="Go">
    				</div>
    		</form>
    </div>
    That's a very rough approximation but should give you the idea.

  3. #3
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hmm.. let's backtrack a bit.

    If you think, with all of your CSS knowledge and web design expertise, that my site is unstable with absolute elements, shouldn't that be addressed before moving forward? I want a stable site, though I don't know the significance of the stability, if you would educate me on the importance of having non-absolute elements.

  4. #4
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hmm, I placed this code in:

    Code:
    <div id="rightside"><!-- begin rightside div -->
        <h2 class="sideWindowHeaderText">The 'Bad' List</h2>
        <ul class="sideWindowLinks">
            <li><a href="#">This Site Sucked</a></li>
            <li><a href="#">Another Terrible Product</a></li>
            <li><a href="#">What a Dumb Idea this Was!</a></li>
        </ul>
        <form id="emailbox" name="form1" method="post" action="">
        	<div>
                <input type="text" name="go" id="go" value="your email" />
                <input type="submit" value="Join" />
            </div>
        </form>
        </div><!-- end rightside div -->
    styles
    Code:
    #emailbox{
    	position:absolute;
    	left:360px;
    	bottom:100px;
    	background:url("emailbox.gif")
    	width:150px;
    	padding:900px 10px 0;
    	height:700px;
    }
    That image is still hiding back behind something, cuz I sure am having trouble finding it with all the guesswork with the padding, height, and left.

    I have updated the files at http://www.productreviewsbytyler.com

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    If you used the code I gave you would see the element.

    You have placed it outside the main wrapper and is thus invisible because the overflow is hidden.

    Comment out these rules and then you can see the element and then you can decide where you want it and move it accordingly.
    Code:
    #emailbox {
        bottom: 100px;
       /*  height: 700px*/
       /* left 360px;*/  
       left: 0;
      /*  padding: 900px 10px 0;*/
        position: absolute;
    }

    I want a stable site, though I don't know the significance of the stability, if you would educate me on the importance of having non-absolute elements.
    Your left and right panels are simply a fixed height image onto which you have absolutely placed content. What happens when you have 20 lines of content or what happens when a user enlarges the text?

    The content will spill out and overlap other elements because they are not in the flow and because your panels have not been made flexible. You would need to ensure that the content in those panels is contained within a div that has a height set and overflow auto applied so that a scrollbar appears if any of the above happens.

    It's all about making a usable design rather than a picture.

    When content is in the flow it lives and breathes with the page and moves other content out of the way as required. Absolute elements are removed from the flow and live in islands on their own and care not a jot about anything else which means that you have to be careful how you use them and control everything about them. They are ok for small snippets of content where the flow of the page is not jeopardised and indeed if your side panels only contained a few words then this would not be an issue.

    Just be careful

  6. #6
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the explanation.

    I just copy/pasted that exact code into my stylesheet, but I still don't see that image.

  7. #7
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    In fact, I'm finding that the content inside those left and right windows have position: relative already set. So how do you know that the content is absolutely positioned??

    examples of relatively positioned stuff inside the side windows:
    Code:
    .sideWindowHeaderText{
    	font-size:16px;
    	font-family:Verdana, Geneva, sans-serif;
    	color:#090;
    	font-weight:bold;
    	text-shadow:0px 0px 6px #06F, 2px 0px 12px #006;
    	padding-top:.8em;
    	/*position the text*/
    	position:relative;
    	top:50px;
    	left:36px;
    }
    Code:
    .sideWindowLinks li{
    	list-style:none;
    	position:relative;
    	top:50px;
    	padding-top:4px;
    }

  8. #8
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Unhappy

    So here's where I'm at ,

    With the emailbox code like this after trying a bunch of different ways:
    Code:
    #emailbox{
    	background-image:url("emailbox.gif") no-repeat scroll 50% 350px transparent;
    	bottom:100px;
    	height:700px;
    	left:0;
    	padding:200px 10px 0;
    	position:relative;
    }
    ...It's still not showing.... or the image is hiding behind everything or something

    ...and because having the left and right windows like this:
    Code:
    #rightside{
    	overflow:auto;
    	position:relative;
    	top:500px;
    	right:14px;
    	background:url("rightsidehomepage.gif") no-repeat scroll 50% 5px transparent;
    	float:right;
    	height:380px;
    	width:220px;
    }
    ...and that is causing there to be a scroll bar at the bottom of the windows on both sides that shouldn't be there because everything is well contained right now on my browsers. A user could easily confuse themselves with those scroll bars.

    You can see what I mean at http://www.productreviewsbytyler.com

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by etidd View Post
    Thanks for the explanation.

    I just copy/pasted that exact code into my stylesheet, but I still don't see that image.
    Yes but did you remove your existing rules? I edited your live page so I know the code was working and indeed it is showing for me with the same changes.

    You have now jumped out of the frying pan into the fire and started to use relative positioning for moving structural things around. Position:relative is not to be used for moving things around unless you know why you are using it. A relatively positioned element is only moved visually it is not moved physically as the space it previously occupied always maintains its position in the flow so you get holes in the page where the element should have been.

    Position:relative is used for more subtle overlapping effects and indeed 99% of the time you won't need to use it at all (apart from setting a stacking context for positioned elements or z-index).

    Removing your code and adding the code I gave above will still work as long as you remove the properties I showed above.

    For your rightside element use margins and not relative positioning. I would probably also use a min-height if you want to push this email box below.

    Code:
    #rightside {
        background: url("rightsidehomepage.gif") no-repeat scroll 50% 5px transparent;
        float: right;
        margin-top: 500px;
        min-height: 380px;
        overflow: auto;
        position: relative;
        right: 14px;
        width: 220px;
    }
    * html #rightside {height:380px}

    Yes scrolbars are ugly and the fact that you are seeing them means that your content is already overflowing to some extent. Make sure your inner content fits inside the width and then the horizontal scrollbar will disappear. However if you use min-height then the content should extend downwards if resized and you culd therefore lose the overflow setting and just let content poke downwards.

    I'd really need to see a picture of what you are trying to do as I thought you wanted the email below that right panel. To be honest those side panels should only have been used for limited content as they are not really built for real content. If you want more stuff at the side then perhaps you should have gone for full length columns instead.

  10. #10
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Well, now that I have figured out why there was a scroll bar (setting the width of #sideWindowHeaderText solved it), but I still can't see the email submit graphic, and my rightside window has been pushed down at the bottom of the page. I have updated my files on the site (http://www.productreviewsbytyler.com)

  11. #11
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Actually, it has not updated yet on the server. The code I have is:

    Code:
    #wrapAroundAll{
    	width:1066px;
    	margin:0 auto;
    	overflow:hidden;
    }
    #leftside{
    	overflow:auto;
    	position:absolute;
    	top:500px;
    	left:19px;
    	background:url("leftsidehomepage.gif") no-repeat scroll 50% 5px transparent;
    	float:left;
    	height:380px;
    	width:220px;
    }
    #middle{
    	width:626px; 
    	margin:0 auto;
    }
    #rightside{
        background:url("rightsidehomepage.gif") no-repeat scroll 50% 5px transparent;
        float:right;
        margin-top:500px;
        min-height:380px;
        overflow:auto;
        position:absolute;
        right:5px;
        width:220px;
    }

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    You don't seem to be using the code I have given you and now it's all gone to pot You seem to have broken it all again and changed things around so the code won't work now anyway.

    This won't work:
    [code
    #rightside{
    background:url("rightsidehomepage.gif") no-repeat scroll 50% 5px transparent;
    float:right;
    margin-top:500px;
    min-height:380px;
    overflow:auto;
    position:absolute;
    right:5px;
    width:220px;
    [/code]

    It can't be floated if its absolutely positioned as absolute positioning wins out. Therefore your element has no top position and will start at where it is in the flow which is the bottom of the middle column and then you have placed it down by another 500px sending it far below the fold.

    Your email box won't show because you ignored the code I gave you in post #5. None of your code for these elements are logical so think carefully about what you are telling them to do.

    Your side panels can remain absolutely positioned and not floated because they are only limited height because of the fixed height image you are using. You still haven't said where you want the email box but if you had followed my instructions the email box would be visible in the side panel and then all you had to do was move it into position.

  13. #13
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Angry

    Yes, I agree completely. I got impatient and started changing everything like I knew what I was doing. I'm frustrated by this - I could have had this figured 3-4 days ago, but here I am still. I just feel terrible about this.

    Now that I have the window back into the right spot... the problem now with my code is that the image now appears at the bottom of the rightside window, expanding the right side into a scroll bar. I have updated my files once again at http://www.productreviewsbytyler.com.

    The code I have associated with the window is:

    Code:
    #rightside{
        background:url("rightsidehomepage.gif") no-repeat scroll 50% 5px transparent;
        min-height:380px;
    	width:220px;
        overflow:auto;
        right:20px;
    	position:absolute;
    	top:500px;
    }
    
    #emailbox {
    	background:url("emailbox.gif") no-repeat scroll 50% 0 transparent;
        bottom:100px;
        top:300px;
        position:absolute;
    	height:300px;
    }
    #go{width:100px; margin-top:300px;}

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    If you want the sidepanels attached to the middle column then add this code:

    Code:
    #leftside{left:auto}
    
    #rightside{
    right:auto;
    margin-left:845px;
    overflow:visible;/* allow emailbox to be seen*/
    }
    #emailbox{top:380px}/* move below panel*/


Tags for this Thread

Bookmarks

Posting Permissions

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