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.

Ugh! Ladies & Gentlemen I need help.

Discussion in 'HTML & Website Design' started by MaxTitan, Aug 18, 2016.

0
  1. #1
    Dear all,

    I have been trying to sort this out all day. Messing with the code, looking through the interwebs. The goal is to align the images with space between them and to look the same at 960px width and up. Any clue?

    Much Gratitude,
    Max
     
    Solved! View solution.
    MaxTitan, Aug 18, 2016 IP
  2. MaxTitan

    MaxTitan Member

    Messages:
    29
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    31
    #2
    The problem! haha
     

    Attached Files:

    MaxTitan, Aug 18, 2016 IP
  3. #3
    Hi there MaxTitan,

    here is one possible solution...

    
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen,projection,tv">

<style media="screen,projection,tv">
body {
    background: #f0f0f0;
    font: 1em/1.6em verdana,arial,helvetica,sans-serif;
 }
 
#navigation {
    padding:0;
    margin: 0;
    border: 1px solid #999;
    list-style: none;
    overflow: hidden;
    background: #fff;
 }

#navigation li {
    float:left;
    width: 19.5%;
    margin: 0.25%;
    padding: 0.25em 0.25em 1.4em;
    border: 1px solid #999;
    box-sizing: border-box;
    background: #fcfcff;
 }

#navigation a {
    display: block;
    font-size: 0.8em;
    color: #666;
    text-align: center;
    text-decoration: none;
 }

#navigation img {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 0.4em;
    border: 1px solid #666;
    box-sizing: border-box;
    
 }

@media screen and (max-width:31em) {
#navigation li {
    width: 24.5%;
  }
 }

@media screen and (max-width:21em) {
#navigation li  {
    width: 32.5%;
  }
 }

@media screen and (max-width:17em) {
#navigation li  {
    width: 49.5%;
  }
 }
</style>

</head>
<body> 
<ul id="navigation">
 <li><a href="#"><img src="http://placehold.it/300x300" alt="">description</a></li>
 <li><a href="#"><img src="http://placehold.it/300x300" alt="">description</a></li>
 <li><a href="#"><img src="http://placehold.it/300x300" alt="">description</a></li>
 <li><a href="#"><img src="http://placehold.it/300x300" alt="">description</a></li>
 <li><a href="#"><img src="http://placehold.it/300x300" alt="">description</a></li>
</ul>

</body>
</html>
    Code (markup):

    coothead
     
    denis bayly, Aug 18, 2016 IP
  4. MaxTitan

    MaxTitan Member

    Messages:
    29
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    31
    #4
    thanks, this helped a good bit :)
     
    MaxTitan, Aug 19, 2016 IP
  5. denis bayly

    denis bayly Well-Known Member

    Messages:
    104
    Likes Received:
    28
    Best Answers:
    6
    Trophy Points:
    105
    #5

    No problem, you're very welcome. ;)
    ​

    coothead
     
    denis bayly, Aug 19, 2016 IP
  6. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #6
    If you don't care about legacy browsers, have a look at display: flex; - it is made for what you're asking about, combined with percentage size images.
     
    PoPSiCLe, Aug 19, 2016 IP
  7. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #7
    If by legacy you mean Firefox and Safari... since gecko and webkit still have major functionality and implementation flaws compared to Edge and Blink...

    Which is why for columns, flex is still buggy trash not ready for prime time. Hell it's BARELY usable for min-height layouts.
     
    deathshadow, Aug 19, 2016 IP
    Puntocom81 likes this.
  8. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #8
    While I don't doubt what you're saying, what bugs does gecko display with display: flex? I've used some very limited versions of flex-box on a couple pages, and haven't encountered any bugs (but then, not very complicated setups either).
     
    PoPSiCLe, Aug 20, 2016 IP
  9. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #9
    Flex inside a flex falls apart miserably... this can be annoying when trying to use it for an outer min-height layout where the header is full width,footer is full width, and multiple columns of content/sidebars in the middle.

    I forget the exact circumstance that I had the problems, but the differences between Chrome, Safari, and Firefox have left me using Flex with an eyedroppers instead of the grand paintbrushes I had hoped for.

    Shame it's not as simple, elegant, or usable as the CSS Grid Layout module -- which right now is only fully supported in the latest builds of Safari, and has partial -ms- prefixed support in EDGE.

    https://www.w3.org/TR/css-grid-1/

    Cannot be implemented across all browsers fast enough for me... the handful of cases I have used it (like a win10 crapplet) it was bloody brilliant and SO much simpler than the implementation disaster that is flex-box.

    It's so ridiculously superior to flex on most every count... but since Microsoft are the ones who proposed it don't plan on seeing the FLOSS fanboys implement it in Firefux any time soon since "rawrs microshafts rz teh evils, fite da man!"

    See the decade and a half it took for other browsers makers to admit that word-wrap:break-word; and @font-face were worth implementing and adding to the spec. Gotta love it when bleeding edge CSS3 stuff works 100% identical in IE 5.01... and as always see bugzilla 915 for just how fast that open sores code fixes bugs.
     
    deathshadow, Aug 21, 2016 IP
  10. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #10
    Ah, I haven't used flex-box within flex-box - I basically just use it for simple even spacing for horisontal lists and such currently, and for some easy adjusted columns (three-column layouts with not much else). Fallback is simple, so it doesn't really matter if it doesn't work, even, as it will just mean that things gets a bit less good-looking.

    Haven't had a look at the CSS grid as of yet, simply because it's really not supported (I hate Safari with a vengeance :)) - maybe I'll test it for a bit and see if it might be useful in about 2-3 years time when it might be fully supported ;)
     
    PoPSiCLe, Aug 22, 2016 IP
  11. MaxTitan

    MaxTitan Member

    Messages:
    29
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    31
    #11
    Interesting conversation, thanks for taking the time to respond and chat. I actually saw a back end web developer using the command flex because I asked him about it. I am a Graphic Designer, but am trying to up my arsenal of skills for the job market. Any how, I am still having minor problems... Haven't even began debugging for phones. http://lichen.csd.sc.edu/sce/ this is how it looks. I'll look into flex.
     
    MaxTitan, Aug 22, 2016 IP