1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Need help positioning images

Discussion in 'HTML & Website Design' started by Glitcher, Dec 25, 2013.

0
  1. #1
    First of all, Merry Christmas to everyone! What would make my Christmas perfect is if someone helped me out with a niggling problem I have trying to figure out how to position images inside a CSS box/container/whatever. Here's a sample pic below.

    [​IMG]

    The second pic is supposed to be on the right side of the red container, but for some reason it just stays underneath the first pic. Here's the code:



    See where it says:

    img.cave{
    position: absolute;
    align:right;
    }

    So if I specified that the "cave" image should align to the right of the division it's in, then.... why the hell does it stay on the left? I don't get it. :(
     
    Glitcher, Dec 25, 2013 IP
  2. wiicker95

    wiicker95 Well-Known Member

    Messages:
    438
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    100
    #2
    The property "align" doesn't even exist in CSS. Lose the absolute position, and that P will go below the images.
     
    wiicker95, Dec 25, 2013 IP
  3. jk.deff

    jk.deff Active Member

    Messages:
    59
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    55
    #3
    Try this:
    <!DOCTYPE html>
<html>
<head>
<style>
.container{
    width:60%;
    height:50%;
    margin: 0 auto;
    border:2px solid red;
}

img.right{
    float:right;
}

img.left{
    float:left;
}

p.textbox{
    background-color:blue;
    margin:0 auto;
    width:300px;
    background-color:#b0e0e6;
    clear:both;
}
</style>
</head>

<body>
<div class="container">
<img class="left" src="../Pic Pages/krystalpowersample.jpg" width="176" height="238" alt="krystalpower">
<img class="right" src="../Pic Pages/cavestorysample.jpg" width="182" height="231" alt="cavestorysample">

<p class="textbox">This text box should be underneath both pictures.</p>
</div>
</body>
</html>
    Code (markup):
     
    jk.deff, Dec 25, 2013 IP
  4. Glitcher

    Glitcher Peon

    Messages:
    15
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #4
    Thanks to jk.deff above! That solved the problem I was having. However, I tried applying that example to a site header I'm working on and the results don't seem to be turning out the same. Here's the problem:

    [​IMG]

    And here's what the header is supposed to look like (more or less):

    [​IMG]

    Ignoring the gradient on the text (is that even possible with CSS?), I just want the name in the centre and the dots on the bottom-right corner of the header. Here's the relevant code:

    
h1  {
   margin: 0px 0px 0px 0px;
   padding: 15px 0px 0px 0px;
   text-align: center;
   font-size: 50pt;
   text-shadow: 0px 0px 10px #3559c0;
   color: #FFF;
   font-style: italic;
   z-index: 1;
}

.header {
   background: #000000;
   background: -moz-linear-gradient(top,  #000000 18%, #1c2e4a 52%, #091526 53%, #19357e 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(18%,#000000), color-stop(52%,#1c2e4a), color-stop(53%,#091526), color-stop(100%,#19357e));
   background: -webkit-linear-gradient(top,  #000000 18%,#1c2e4a 52%,#091526 53%,#19357e 100%);
   background: -o-linear-gradient(top,  #000000 18%,#1c2e4a 52%,#091526 53%,#19357e 100%);
   background: -ms-linear-gradient(top,  #000000 18%,#1c2e4a 52%,#091526 53%,#19357e 100%);
   background: linear-gradient(to bottom,  #000000 18%,#1c2e4a 52%,#091526 53%,#19357e 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#19357e',GradientType=0 );
   font-family: Arial, Helvetica, sans-serif;
   font-size: 50%;
   border-bottom: 3px solid #8b8dd4;
}

img.dots {
   float: right;
   right: 5%;
   top: 20px;
}


  <div class="header">
  <img class="dots" src="../Pic Pages/halftoneheader.png" alt="halftoneheader" />
  <h1>Chris Reavey</h1>
  </div>
    Code (markup):
    So you can see I specified "text-align: center" for the h1 title.... but the text isn't centered. Why? Also, it doesn't matter what values I add to the 'right' and 'top' margins for the image, the damn thing won't move. What am I doing wrong?
     
    Glitcher, Dec 25, 2013 IP
  5. profoundDmd

    profoundDmd Greenhorn

    Messages:
    18
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    8
    #5
    Apply the text-align to the div.
    Of course, this will also align your image. So position your image absolute, and set bottom and right to 0.
    Also, make sure to give your header a relative position.

    .header{
    position: relative;
    text-align: center;
}

.dots{
    position: absolute;
    bottom: 0;
    right: 0;
}
    HTML:

    Why do you have a class called header btw? You should only have 1 header, so it doesn't make sense to call it a class.
     
    Last edited: Dec 25, 2013
    profoundDmd, Dec 25, 2013 IP
  6. wiicker95

    wiicker95 Well-Known Member

    Messages:
    438
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    100
    #6
    Good question. I suppose that he is learning HTML right now, and so far he's told that classes are the only styling hooks available. What's really sad in this story, and that's almost always true, is that teachers aren't qualified enough to even open their mouths about the subject, let alone teach somebody HTML. That screenshot he posted really makes one go yuck, 1997... Seriously, gradient on text? I guess the guy never mentioned WCAG.

    And of course, that html5 lip-service isn't forgotten.
     
    wiicker95, Dec 25, 2013 IP
  7. Glitcher

    Glitcher Peon

    Messages:
    15
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #7
    Hey, what have you got against 1997? Hong Kong was returned to China, GoldenEye 007 was in every gamer's home, and Air Force One was rockin' the box office. It was a great year!

    I didn't type that. I just used one of Dreamweaver's templates, which has the header as a class. Go figure.

    Anyway, I tried using the code you wrote and this is what happened:

    [​IMG]

    So the text is in the centre, but the image is right on top of it. Incidentally, shouldn't the class be "img.dots" and not just ".dots"? I want the image in the same division as the title after all. The strange thing is that the image appears on top of the h1 title, not behind, even though I gave the h1 style a high z-index. What's going on?
     
    Glitcher, Dec 25, 2013 IP
  8. wiicker95

    wiicker95 Well-Known Member

    Messages:
    438
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    100
    #8
    ...and HTML 3.2, as well as Adobe Dreamweaver, happened.

    ...which can make you realize, even though you're brand-new to this, that nothing even resembling good can come out of Dreamweaver.

    No reason to specify "img", since it's the only element that has the class .dots applied is that image. NOT that it should even be IMG in the first place -- it's a presentational, and not a content, image. It should be a background image of your H1.
    On the other hand, z-index doesn't work if you give a value to the property POSITION other that STATIC.

    The reason why these dots don't behave as they should is that you didn't give your .dots a display:block and you didn't apply the rPo to the header.
     
    wiicker95, Dec 25, 2013 IP
  9. profoundDmd

    profoundDmd Greenhorn

    Messages:
    18
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    8
    #9
    Setting the position to absolute should automatically set its display to block though.

    Also, about your z-index remark;
    It does work, but not as you might expect. It gets in front or behind elements sharing the same stacking context.
     
    profoundDmd, Dec 26, 2013 IP
  10. wiicker95

    wiicker95 Well-Known Member

    Messages:
    438
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    100
    #10
    Now that doesn't make any sense. Where did you get that??

    No. See here: http://www.w3.org/wiki/CSS/Properties/z-index
    "Only works on positioned elements(position: absolute;, position: relative; or position: fixed; )."

    --edit--

    I do know that the user agents sometimes cover up the developers' incompetence and still render it as it's supposed to. They are like, yeah, let's render it as if the rPo were applied. But that negligent behavior on their behalf does more harm than good, to the point that they never even see they made a mistake, let alone correct it.
     
    Last edited: Dec 26, 2013
    wiicker95, Dec 26, 2013 IP
  11. profoundDmd

    profoundDmd Greenhorn

    Messages:
    18
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    8
    #11
    Let me rephrase that; they aren't actually set as block, but are treated as such, since that's the only logical display mode for absolute positioning.

    Eum, i'm confused, first you say;
    "z-index doesn't work if you give a value to the property POSITION other that STATIC."
    and then;
    "Only works on positioned elements(position: absolute;, position: relative; or position: fixed; )."
     
    profoundDmd, Dec 26, 2013 IP
  12. jk.deff

    jk.deff Active Member

    Messages:
    59
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    55
    #12
    Glitcher, try this:
    <!DOCTYPE html>
<html>
<head>
<style>
h1  {
    margin: 0px 0px 0px 0px;
    padding: 15px 0px 0px 0px;
    text-align: center;
    font-size: 50pt;
    text-shadow: 0px 0px 10px #3559c0;
    color: #FFF;
    font-style: italic;
}

.header {
    background: #000000;
    background: -moz-linear-gradient(top,  #000000 18%, #1c2e4a 52%, #091526 53%, #19357e 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(18%,#000000), color-stop(52%,#1c2e4a), color-stop(53%,#091526), color-stop(100%,#19357e));
    background: -webkit-linear-gradient(top,  #000000 18%,#1c2e4a 52%,#091526 53%,#19357e 100%);
    background: -o-linear-gradient(top,  #000000 18%,#1c2e4a 52%,#091526 53%,#19357e 100%);
    background: -ms-linear-gradient(top,  #000000 18%,#1c2e4a 52%,#091526 53%,#19357e 100%);
    background: linear-gradient(to bottom,  #000000 18%,#1c2e4a 52%,#091526 53%,#19357e 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#19357e',GradientType=0 );
    font-family: Arial, Helvetica, sans-serif;
    font-size: 50%;
    border-bottom: 3px solid #8b8dd4;
}

.header div{
    background-image: url('../Pic Pages/halftoneheader.png');
    background-repeat: no-repeat;
    background-position: right top;
}

</style>
</head>

<body>
    <div class="header"><div>
    <h1>Chris Reavey</h1>
</div></div>
</body>
</html>
    Code (markup):
     
    jk.deff, Dec 26, 2013 IP
  13. wiicker95

    wiicker95 Well-Known Member

    Messages:
    438
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    100
    #13
    Oh, I meant to z-index doesn't work if the position is STATIC. Sorry for that.
     
    wiicker95, Dec 26, 2013 IP
  14. Glitcher

    Glitcher Peon

    Messages:
    15
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #14
    But if I do that, I'd need to save the entire header background as an image, which is probably larger and less flexible for fluid grid layouts, amirite? Isn't it better to work with CSS style gradients?

    Okaaaaaay, so what do real men use to design websites?

    I tried copying and pasting your code into a blank document and this is what I get:

    [​IMG]

    No dots. I didn't think it was possible to use a background image and a background gradient at the same time. Looks that way.
     
    Last edited: Dec 26, 2013
    Glitcher, Dec 26, 2013 IP
  15. wiicker95

    wiicker95 Well-Known Member

    Messages:
    438
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    100
    #15
    You can keep your CSS3 gradients, and you won't have to save it as an image.
    All you have to do is this for every vendor prefix you've got:

    
background:url(pathTo/dots.png) no-repeat bottom right,-moz-linear-gradient(top, #000000 18%,#1c2e4a 52%,#091526 53%,#19357e 100%);
    Code (markup):
    Though you should really avoid PNG images with alpha-transparency in the first place.

    Start off with a semantic markup, which you can basically write with any half-decent plain-text editor, like notepad++. Enhance it progressively with style sheets and, if needed, client-side scripting. Those can also be written with plain text editors. Note that progressive does not imply "attach a 100k js library right from the start".
    And that's it. In a nutshell, stay away from WYSIWYG editors.
     
    wiicker95, Dec 26, 2013 IP
  16. jk.deff

    jk.deff Active Member

    Messages:
    59
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    55
    #16
    Write the correct path
    background-image: url('../Pic Pages/halftoneheader.png');
    Code (markup):
    and will appear dots.

    Background image and a background gradient here are possible because they applied to different elements.
     
    Last edited: Dec 26, 2013
    jk.deff, Dec 26, 2013 IP
  17. Glitcher

    Glitcher Peon

    Messages:
    15
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #17
    I don't see why. They're practical for including non-rectangular images on web pages. Other tutorials I've seen use them.


    I can't possibly agree with this. That's like telling an artist to forgo using brushes and simply paint with his fingers. If you've got the tools designed for the task, you might as well use them.


    Aaaaaanyway, I managed to get the layout sorted out okay. Thanks for your help everyone! It seems I still have a lot to learn when it comes to coding.
     
    Glitcher, Dec 29, 2013 IP
  18. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,714
    Likes Received:
    1,995
    Best Answers:
    252
    Trophy Points:
    515
    #18
    They are also quite often excessively large, they have issues in legacy browsers (though we can pretty much go "oh well" on that one now), and most times you can sneak by using 'close enough anti-aliasing' with palette transparency instead.

    Problem is that in building a website you are NOT just an artist, as the screen media appearance is just one of MANY targets you need to keep in mind. That's why semantic markup with logical document structure should come BEFORE layout. Build your layout in CSS, THEN drag out the goofy paint program to make the graphics you hang on the layout.

    Since if you have content of value that's all the PSD-jockey bullshit is, goofy graphics hung on the layout that normal visitors to the site aren't going to give a flying purple fish about. Just look at the giant success stories of the Internet like Google, Amazon, E-Bay, facebook, twitter, etc, etc... not exactly a visual tour-de-force -- do ANY of those look like they have some 'artist' spanking it on the screen and having the giant brass monkey balls to call themselves a 'designer' involved? Of course not.

    ... because at the end of the day it doesn't matter how 'pretty' it is, if it's useless to even a fraction of potential users, it's useless.

    I'm ok with your using the image -- I don't trust linear gradient due to it's performance issues (it actually sucks more battery, CPU and RAM than loading an image!) -- My issue is with your needlessly complex markup... the presentational image has no business in the markup, since you should only have one H1 you don't need any classes, so on and so forth.

    I'm not seeing any real reason for the markup to be much more than:
    <h1><span>Chris Reavy</span></h1>
    Code (markup):
    h1 {
	text-align:center;
	font:bold 300%/120% arial,helvetica,sans-serif;
	color: #FFF;
	border-bottom: 3px solid #8b8dd4;
	text-shadow:0 0 0.5em #3559c0;
	background:#000000 0 0 repeat-x;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(18%,#000000), color-stop(52%,#1c2e4a), color-stop(53%,#091526), color-stop(100%,#19357e));
	background:-webkit-linear-gradient(top, #000000 18%, #1c2e4a 52%, #091526 53%, #19357e 100%);
	background:-moz-linear-gradient(top, #000000 18%, #1c2e4a 52%, #091526 53%, #19357e 100%);
	background:-ms-linear-gradient(top, #000000 18%, #1c2e4a 52%, #091526 53%, #19357e 100%);
	background:linear-gradient(top, #000000 18%, #1c2e4a 52%, #091526 53%, #19357e 100%);
	background-size:1px 100%; /* alleviates memory/cpu overhead */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#19357e',GradientType=0 );
}

h1 span {
	display:block;
	padding:0.5em;
	background:url(images/dots.png) bottom right no-repeat;
	background-size:auto 100%; /* scale to fit dynamic fonts */
}
    Code (markup):
    I'd probably just use a 1px wide image as the background instead of the linear-gradient, align it center for legacy and use background-size for modern... The 'issues' with 'filter' and linear-gradient just aren't worth the headaches. I like the idea, but I've soured on the implementation.
     
    deathshadow, Jan 3, 2014 IP
  19. Strider64

    Strider64 Member

    Messages:
    40
    Likes Received:
    13
    Best Answers:
    1
    Trophy Points:
    25
    #19
    First, I want to state that I agree with what you wrote on the semantic markup....so that another WW3 doesn't breakout.:oops:
    Second to say Facebook, Amazon or the like don't take time in designing their websites is wrong in my opinon, I actually think Facebook's design is elegant yet simple. The nuts and bolts are probably done by the developer but the design isn't. For a small company or an freelancer a person has to wear two hats. An even if you don't realize it that is what you are basically saying to people, but trying to get them to create solid code first then cough cough "Design" ;) An I'll just leave it at that.
     
    Strider64, Jan 4, 2014 IP
  20. Glitcher

    Glitcher Peon

    Messages:
    15
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #20
    A little late to the party, deathshadow. I already scrapped that site and built a new one from scratch. No gradients in it this time. ;)

    BTW, I read that "What's wrong with your website?" tutorial in your sig. Very useful info you've got there. Ta muchly.
     
    Glitcher, Jan 4, 2014 IP