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.

Image alignment with a responsive layout

Discussion in 'CSS' started by kate.rxi, Jan 30, 2014.

  1. #1
    Hello,

    I am having a bit of a problem with image alignment and making my website responsive. I have aligned the images on the site using position:absolute; but this seems to move when changed to different resolutions.

    Has anyone got a solution to fix this issue?

    Thanks,
    Kate
     
    Solved! View solution.
    kate.rxi, Jan 30, 2014 IP
  2. domainmarket.io

    domainmarket.io Well-Known Member

    Messages:
    74
    Likes Received:
    6
    Best Answers:
    1
    Trophy Points:
    100
    #2
    Try wrapping the images in <div align="center">YOUR IMAGE HERE</div>. Or you can align left or right. Is your site up? If so, put up a link and I'll check it out.
     
    domainmarket.io, Jan 30, 2014 IP
  3. HuggyStudios

    HuggyStudios Well-Known Member

    Messages:
    724
    Likes Received:
    20
    Best Answers:
    26
    Trophy Points:
    165
    #3
    You don't want to take bwagnerjr advice. This is something easily accomplished with CSS. Can you post a link to your site or some code?
     
    HuggyStudios, Jan 31, 2014 IP
    deathshadow likes this.
  4. kate.rxi

    kate.rxi Greenhorn

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #4
    Grid.css

    /* SECTIONS */
    .section {
    clear: both;
    padding: 0px;
    margin: 0px;
    background: url(img/paper.jpg);
    background-size: cover;
    }




    /* COLUMN SETUP */
    .col {
    display: block;
    float:left;
    margin: 1% 0 1% 1.6%;
    }
    .col:first-child { margin-left: 0; }


    /* GROUPING */
    .group:before,
    .group:after {
    content:"";
    display:table;
    }
    .group:after {
    clear:both;
    }

    /* GRID OF THREE */
    .span_3_of_3 {
    width: 100%;
    }
    .span_2_of_3 {
    width: 66.1%;
    }
    .span_1_of_3 {
    width: 25.2%;
    }

    /* GO FULL WIDTH AT LESS THAN 480 PIXELS */

    @media only screen and (max-width: 480px) {
    .col {
    margin: 1% 0 1% 0%;
    }
    }

    @media only screen and (max-width: 480px) {
    .span_3_of_3 {
    width: 100%;
    }
    .span_2_of_3 {
    width: 100%;
    }
    .span_1_of_3 {
    width: 100%;
    }
    }



    style.css


    @import url(http://fonts.googleapis.com/css?family=Gabriela);
    * {
    padding: 0 auto;
    margin: 0 auto;
    }

    @font-face {
    font-family: 'cabinsketchbold';
    src: url("fonts/cabinsketch-bold-webfont.eot");
    src: url("fonts/cabinsketch-bold-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/cabinsketch-bold-webfont.woff") format("woff"), url("fonts/cabinsketch-bold-webfont.ttf") format("truetype"), url("fonts/cabinsketch-bold-webfont.svg#cabinsketchbold") format("svg");
    font-weight: normal;
    font-style: normal;
    }

    @font-face {
    font-family: 'printclearlyregular';
    src: url("fonts/printclearly-webfont.eot");
    src: url("fonts/printclearly-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/printclearly-webfont.woff") format("woff"), url("fonts/printclearly-webfont.ttf") format("truetype"), url("fonts/printclearly-webfont.svg#print_clearlyregular") format("svg");
    font-weight: normal;
    font-style: normal;
    }

    @font-face {
    font-family: 'journalregular';
    src: url("fonts/journal-webfont.eot");
    src: url("fonts/journal-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/journal-webfont.woff") format("woff"), url("fonts/journal-webfont.ttf") format("truetype"), url("fonts/journal-webfont.svg#journalregular") format("svg");
    font-weight: normal;
    font-style: normal;
    }


    .section h1 {
    font-family: "cabinsketchbold" !important;
    font-size: 40px;
    font-weight: 300;
    }

    #header {
    color: #FFF;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(1, #1f1f1f), color-stop(1, #3b3b3b));
    background-size: cover;
    background-image: -o-linear-gradient(bottom, #1f1f1f 100%, #3b3b3b 100%);
    background-image: -moz-linear-gradient(bottom, #1f1f1f 100%, #3b3b3b 100%);
    background-image: -webkit-linear-gradient(bottom, #1f1f1f 100%, #3b3b3b 100%);
    background-image: -ms-linear-gradient(bottom, #1f1f1f 100%, #3b3b3b 100%);
    background-image: linear-gradient(to bottom, #1f1f1f 100%, #3b3b3b 100%);
    }

    a {
    text-decoration: none;
    }

    a:visited {
    text-decoration: none;
    }

    a:hover {
    text-decoration: none;
    }

    a:focus {
    text-decoration: none;
    }

    #header h1 {
    font-family: 'cabinsketchbold';
    font-size: 110px;
    font-weight: 100;
    text-align: center;
    }

    #header h2 {
    font-family: 'journalregular';
    font-weight: 100;
    font-size: 49px;
    }

    #section1 {
    background: url(img/paper.jpg);
    background-size: cover;
    }

    #section1 h1 {
    font-family: "cabinsketchbold" !important;
    font-size: 40px;
    font-weight: 300;
    }

    #recent {
    }

    #personal {
    }

    #contact {
    }

    #fmftw {
    }


    .oldport {
    }

    .openeyes {
    }

    .grievance {

    }

    #section2 {
    background-color: #CC99CC;
    background-size: cover;
    }

    #section2 p {
    font-family: 'Gabriela', serif;
    font-size: 20px;
    text-align: center;
    }

    #recentwork {

    }

    #footer {
    font-family: "printclearlyregular" !important;
    text-align: center;
    background-size: cover;
    color: white;
    font-size: 30px;
    background-color: #1F1F1F;
    }



    The are empty classes because I am still experimenting with the alignment and thats the classes that are wrapped round the screenshots. I know how to align the images just not how to for viewing on different resolutions.

    Thanks for your help,
    Kate
     

    Attached Files:

    kate.rxi, Jan 31, 2014 IP
  5. Hefaistos

    Hefaistos Active Member

    Messages:
    194
    Likes Received:
    14
    Best Answers:
    9
    Trophy Points:
    63
    Digital Goods:
    1
    #5
    Position absolute should be used only when you can't accomplish what you want using float. I usually use position absolute for small blocks, when I need to stick something in a specific position all the time. The floats should behave good for responsive design, while the position absolute (used too often) will break the website design for small screen sizes.
    If you want to make your actual design responsive, you have even to rewrite some of the css and HTML blocks structure, or use css media queries for each device screen size and this way make the content act the way you want.
    To see how your design looks on different screen sizes you can use Firefox browser (Pres CTRL + SHIFT + M) and choose the wanted size.
     
    Hefaistos, Jan 31, 2014 IP
  6. HuggyStudios

    HuggyStudios Well-Known Member

    Messages:
    724
    Likes Received:
    20
    Best Answers:
    26
    Trophy Points:
    165
    #6
    Can you post a link to your site or are you working locally?
     
    HuggyStudios, Jan 31, 2014 IP
  7. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #7
    Well, the moment I see "grid" I know the site's being built wrong... you're using presentational classes, which is the antithesis of responsive design and in many ways defeats the point of even having CSS. Likewise the display:table and percentage width nonsense reeks of trying to get too fancy with what appears to be a simple layout.... of course the massive PX fonts are also a bit of a head-scratcher, and probably means you're not designing elastic either; the lack of a max-width also meaning you aren't semi-fluid restricting so lines don't get too long at say... 1920+ in width.

    That you say you are absolute positioning images also seems to indicate broken thinking or methodology unless those fixed images are inside flow elements that account for them; from your saying they change position it sounds like you're not doing that either... NOT that I'm seeing aPo in either of your stylesheets...

    Of course the html5-tard garbage isn't helping matters, particularly since you aren't actually using any real HTML 5 in there, making your numbered heading orders be absolute gibberish... I mean seriously, what makes "based in Stafford" the start of a subsection of the page? Why do you have more than one H1 when you don't have the pointless SECTION tag garbage? (since a H1 is the heading under which EVERYTHING on the page is a subsection) ... What do you even need the extra "header" wrapper for?!? Also, even if the steaming pile of manure known as HTML 5 says it's ok to wrap a block level tag in a inline one, it doesn't actually work that way so that anchor around the DIV and H1 and H2? Just BEGGING for a broken page! You should also get some ALT attributes on those IMG tags.... Of course that you're using HTML 5 with ALIGN and TARGET attributes just proves what I've said about HTML 5 for a few years: The target audience is people who still write HTML 3.2 and slap either 4 tranny or 5 lip-service on it. NEITHER of those attributes belongs in ANY page written after 1997.

    Also if you are resorting to "../" in your URI's, you probably have a poorly thought out directory structure... and the page is copyright copyright??? The copyright symbol means copyright, use one or the other, not both!

    The over-use of webfonts also worries me, in a 'legibility, what's that" sort of way... much less the complete lack of fallback families, media targets for your stylesheet embeds, multiple stylesheets for nothing other than making the page load slower, etc, etc...

    I think @HuggyStudios has it right, we need to see this live WITH your images to even start to weigh in properly since you didn't include what sizes they are, making it VERY hard to figure out where the devil they are even supposed to be placed or how much room needs to be made available to them. I'm willing to toss together a rewrite with breakdown for you -- but right now I've not seen enough of the page to do anything more than a VERY generic markup rewrite.

    He's also right in regards to:
    Since there's no reason to wrap an extra div around it for nothing, and the align attribute is presentational and was deprecated as of HTML 4 STRICT, meaning like a lot of other things it has NO MALFING BUSINESS ON ANY WEBSITE WRITTEN AFTER 1997!
     
    deathshadow, Feb 1, 2014 IP
    ryan_uk likes this.
  8. mokah

    mokah Active Member

    Messages:
    88
    Likes Received:
    6
    Best Answers:
    1
    Trophy Points:
    65
    #8
    Jeeeeeeez, my advice would be to hire a proper web designer.
     
    mokah, Feb 2, 2014 IP
  9. kate.rxi

    kate.rxi Greenhorn

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #9
    What would you say is wrong with it, specifically?
     
    kate.rxi, Feb 2, 2014 IP
  10. mokah

    mokah Active Member

    Messages:
    88
    Likes Received:
    6
    Best Answers:
    1
    Trophy Points:
    65
    #10
    I don't think you need this in your code, SCSS stylesheets should be compiled into their CSS equivalents.
    <link rel="stylesheet" href="styles.scss">
    HTML:
    You may need this in your head.
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    HTML:
    The problem with the images on your homepage at the moment is that they are absolutely positioned so they're going all funny when the screen size is smaller.

    You seem to have wrapped some of your block level elements such as DIVS in anchor tags, now that is fine in HTML5 but there are better ways to do it. Your header section definitely needs some work. The text seems to be escaping the background for some reason and I suspect it has something to do with absolute position of the text and the pixel-defined height of the background DIV or whatever.

    This is how it looks on my S4. Not very responsive at the moment.
     
    Last edited: Feb 2, 2014
    mokah, Feb 2, 2014 IP
  11. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #11
    Well, whoever recommended that... *snicker* -- grids are by definition the antithesis of responsive layout. As you'll find I say a lot, "anyone telling you otherwise doesn't know enough on the topic to be flapping their gums about it."

    Which even with grids doesn't make any sense.

    Abusing the tag in a nonsensical manner is NOT good SEO, no matter how many SEO-tard scam artists will try to tell you otherwise. Numbered headings (if not using HMTL 5's section tag) along with horizontal rules create the page's semantic structure, dividing the page into subsections. An H1 is the heading under which all sections of the page are subsections -- so you're using that properly. H2 are the main subsections of the page, and since you aren't starting a new subsection abusing H2 for a tagline is just gibberish -- again, no matter how many SEO-tards try to tell you otherwise... that nonsense reeks of the same idiocy that led to HTML 5's "HGROUP" gibberish, which even they have back-pedaled on as a bad idea and gotten rid of. (You'd think somebody pointed it out to them) -- of course using numbered headings and horizontal rules properly also makes SECTION, NAV and FOOTER redundant; so much for the 'improved semantics" of HTML 5.

    The most correct semantic answer would be that it is all ONE HEADING, so put it ALL in the H1... the text would be smaller when written professionally and from a grammatical standpoint, so the correct tag for the tagline would be SMALL. Yes, SMALL has a semantic meaning, as does B and I -- don't listen to the re-re's who think those are deprecated or non-semantic, they don't know enough about HMTL or CSS to open their traps on the subject!

    Taking a look at your page most of your problems step from absolute positioning content -- at LEAST one of each of your image-pairs should be placed normally in flow, and in fact doing so makes positioning those elements across the page so simple, you can have a responsive layout without even resorting to media queries. The ONLY thing I'd use media queries for in this case would be to not load that background paper image on non-CSS3 browsers (since there's no background-size in older browsers) and to change up the font sizes since you've got MASSIVE PX metric fonts pissing all over the page's usability.

    I'd also drag it kicking and screaming into a RECOMMENDATION doctype with a proper heading, instead of dicking around with the train wreck of idiotic BULL known as HTML 5. (I'm a real fan, can't you tell?)

    Which would end up looking something like this:
    http://www.cutcodedown.com/for_others/katerxi/template.html

    As with all my examples the directory:
    http://www.cutcodedown.com/for_others/katerxi/

    is wide open for easy access to the gooey bits and pieces. Works perfect in all modern browsers and IE10, after a fashion in IE9, and is still functional/useful all the way back to IE 5.5 just losing some of the cutesy unimportant bits like rotations and shadows.

    ...that said, I'd REALLY consider swinging an axe at ALL the webfonts. By itself that 'cabin' one is larger than I'd make an entire page of HTML+CSS+FONTS+IMAGES+SCRIPTS...

    You'll notice that I remastered all the images:
    http://www.cutcodedown.com/for_others/katerxi/images/

    For a significant reduction in filesizes, and to let CSS do all the heavy lifting for fancy bits like rotations, overlaps and shadows.

    I'll start in on a section by section breakdown of the HTML, and then the CSS. Back shortly.
     
    Last edited: Feb 4, 2014
    deathshadow, Feb 4, 2014 IP
    ryan_uk and malky66 like this.
  12. #12
    HTML breakdown
    --------------

    I always use XHTML 1.0 STRICT -- Strict so that we aren't using HTML elements that have no business on any website written after 1997, XHTML because I prefer the more consistent structural rules. I don't believe that HTML 5 offers ANY legitimate advantages; in fact I think it's one of the most idiotic things I've seen of the past decade. When people call it 'forward looking' or 'the future', I say "REALLY?!? Looks like the worst of 1997 pre-strict garbage to me!"

    I included the viewport meta to tell mobile browsers we know what we are doing; otherwise they will dick with the default zoom and lie about their resolutions. We now need to say height in addition to width since some devices are lying about that too.

    You'll notice my stylesheet LINK uses a MEANINGFUL name in regards to what it's targeting as opposed to uselessly vague names like "style" or "grid". Media targets are one of the entire reasons to USE CSS -- in this case screen, projection, tv covers our primary targets while not sending CSS to thinks like print or aural where they wouldn't make any sense.

    I also put <html><head>, </head><body> and </body></html> on the same line, this is as a reminder that NOTHING should EVER go between them... a mistake a LOT of people seem to make.

    Notice my closing comments -- closing comments are nice so you can see what is being closed; I don't say "end" or "close" because that's what </div> means. I put them before the closing tag so they cannot end up between inlines or floats, which can trip rendering bugs in some versions of both IE and FF.

    The anchor fits nicely inside the h1 instead of around it... a line break moving the tagline to it's own line, the SMALL tag de-emphasizing same.

    #imageSection is for the full width paper background.

    #recentWork, #personalWork and #contact are the three subsections.

    #imageSection h2 -- headings/starts of each subsection

    Since both your anchors were pointing at the same place, why did you have two separate anchors? I give the second image a class so we can position it.

    #contentSection -- pretty obvious.

    hr -- A horizontal rule semantically means the start of a new subsection of the page, as the last subsection it's pretty clear it's the footer.

    #footer -- again, no surprises.

    #footer div -- used to keep the social icons together for responsive formatting.

    .facebook and .twitter -- instead of IMG tags I use gilder-levin image replacement with empty BOLD tags. The SPAN in .facebook is there to split it into multiple lines so it doesn't 'break out' of the anchor's fixed width.

    ... and that's the markup. I'll start in on a CSS breakdown now.
     
    deathshadow, Feb 4, 2014 IP
    ryan_uk and malky66 like this.
  13. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #13
    CSS Breakdown
    -------------

    The fonts part you're quite familiar with by now -- I did redo them with font squirrel to try and address some issues, and to make sure we have ALL the proper versions. I also changed cabinSketchBold's font-weight to bold, so that we can actually declare bold for our fallback families.

    I always start out with a reset -- there are smaller resets like the so called 'universal' one of "* { margin:0; padding:0; }", but that can make styling form elements across browsers VERY difficult due to no two browsers handling how form elements recieve padding the same way. (Not just how much, but how it's applied!)... Likewise there are larger resets like the fat bloated train wreck of Eric Meyer's "reset reloaded" -- so close to being a CSS framework it gives resets a bad name.

    The one I use (created by Dan Schulz, RIP) is a nice safe middle ground right in the Goldilocks zone.

    You'll see I hide the horizontal rules -- they are in the markup for semantics and non screen.css targets, we don't want them showing since we'll have other style to convey it.

    the text-size-adjust values also tell mobile browsers we know what we are doing, so obey what we tell it to do. It's in a media query as it's only needed on smaller screen devices, and decaring these in OSX Safari breaks zooming. (laughably pathetic since it doesn't break zooming in iOS Safari!)

    body -- I always like to set the most commonly used font on BODY. I'm kind of guessing as you're setting WAY too many different fonts all over the place. The white and dark grey backgrounds also get set here so that's what shows full height.

    h1 -- padding, font size, nothing fancy.

    h1 a -- kill the underscores and set the color

    h1 small -- display:block puts it on it's own line... padding and font. Again, nothing to write home about.

    #imageSection -- pad it, color it, align it. Background color for non-css3 browsers.

    @media (min-width:1px) #imageSection -- I only apply the background image on CSS3 capable browsers since we're using background-size. Really I'd consider finding some other way of styling this area since massive full width background images are buggy bloated trash if you give a **** about fluid elastic responsive layout.

    #imageSection h2 -- pading and font size. YAWN.

    Though, notice I'm declaring all my font sizes in % or EM, and all my paddings on text areas in EM? Makes it elastic, an important part of accessible design. It at least justifies wasting all that bandwidth on the goofy webfonts.

    #imageSection div -- Setting these to inline-block puts them all on one line if there's room for them to fit. IE7/earlier can't make block level tags (like DIV) be inline-block, but we can use the !ie selector bug to target those and set it to display:inline; which those browsers will incorrectly treat like inline-block. Setting zoom:1 trips haslayout fixing postioning bugs inside it, while the vertical alignment makes sure they all line-up from the top. (since the default of 'middle' looks goofy)

    #imageSection img -- padding them reveals the white background image, and the box-shadow... well, makes the shadow. Doing it this way makes 100% sure they're consistent and means you can use a smaller source image.

    #imageSection a -- relative positioning and zoom means absolute positioned elements inside this are ... well, relative to this instead of the page. With the anchor and first image 'in flow' we can use flow positioning. I also set up a CSS transition so that in modern browsers we can have a cute animation. Legacy browsers don't get the animation, OH WELL. The inline-block (and fake inline-block for legacy IE) means top and bottom padding will be applied. (by the specification they should be ignored for positioning on a normal inline). By padding these elements on the side, we can space them apart pretty without having to play with floats or absolute positioning of these.

    #imageSection a:pseudostates -- when keyboard or mouse navigated, spin them a bit triggering the transition animations.

    #recentWork img -- a bit of negative left margin to slide it over, just to pretty things up a bit once the other image is placed.

    #recentWork .second -- the second image gets absolute positioned over the first one, and rotated. Again with the first image not aPo (absolute positioned) the whole thing is still 'in flow'; these being aPo off the parent anchor.

    #contact a -- the contact anchor gets a bit less side padding, again just to make it pretty.

    #contact img -- while it's image gets more padding to extend that white background further. Doing this lets us use a smaller IMG file.

    Again, the rotations of all images is handled by CSS3 instead of in the image file itself, removing the need for alpha transparent images greatly reducing the file-sizes; more so since we can leverage jpeg which even at 5% lossy completely pwns PNG.

    #contentSection -- padding, color, fonts, yawn.

    #contentSection p -- I set a max width instead of width so it can shrink when the screen is too small. I also pad the bottom (while not padding-bottom) #contentSection so you can have multiple paragraphs there if desired. (I would!, VERY content-light page)... and of course the auto-margin centers it when it's narrower than that 30em.

    #footer -- padding, elastic font size... I set a px line-height so that when the DIV is inline next to it everything lines up pretty.

    #footer div -- again inline-block with fake inline-block for legacy IE. The nowrap prevents separation of the two icons when wrapped, and a bit of padding to space it off from the text. The vertical-align is again to keep everything lined up.

    #footer a -- also inline-block/IEFake, these are relative positioned, overflow and fixed size to allow us to position the empty bold tags for gilder-levin replacement. The small font size and color are for when images are disabled/unavailable/blocked.

    #footer a span -- breaks 'face' and 'book' into separate lines.

    #footer a b -- our single "incorrectly named CSS sprites" image file, absolute positioned over the anchor text hiding it. I apply the border-radius here to help shrink the image file slightly and so as to not need alpha transparency.

    #footer a.twitter b -- slide the background over on this one to show the twitter half.

    #footer a.facebook:active b,
    #footer a.facebook:focus b,
    #footer a.facebook:hover b
    -- also sliding the background, in this case to reveal the hover state.

    #footer a.twitter:active b,
    #footer a.twitter:focus b,
    #footer a.twitter:hover b
    -- same, but for twitter.

    Media Queries
    ----------------

    The breakpoints I use aren't pre-determined, they are set by the needs of the content.

    @media (max-width:60em) -- at this width I choose to shrink ALL the fonts while still keeping them within acceptable minimums.

    @media (max-width:40em) -- then shrink the header to keep it a single line... since the SMALL inherits from the H1, we enlarge it to keep it roughly the same.

    @media (max-width:22em) -- at really narrow widths we shrink the h2, play with some of our paddings and positionings, and split the footer into multiple lines (see, that DIV around the social links is useful!)

    ... and that's the CSS. Any questions fire away, and hope this helps; if not for this design, at least to get you thinking in terms of how semi-fluid elastic responsive layout should be done.
     
    deathshadow, Feb 4, 2014 IP
    ryan_uk likes this.
  14. kate.rxi

    kate.rxi Greenhorn

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #14
    Wow thankyou for all your help!

    I am really impressed with the code you have written up for my portfolio. I am still going through all of your comments as I go through the code. Evidently there is a lot I need to learn and that I have missed out.

    The reason for going with HTML5 is probably that is what we have used at uni and I thought it would be the standard in the industry now, but granted I probably don't use the features that it was created for. Although there are presets that can be used, such as header, footer and also HTML5 video elements. It's my preference to go with that at the moment.

    When you say
    Do you mean I should just use standard fonts? I feel these can look incredibly boring....

    I may post questions as I go through it but thankyou again for all your help! :)
     
    kate.rxi, Feb 4, 2014 IP