Need advice of expert on finished job ( PSD to HTML/CSS)

HTML & CSS
1

after a long adventure with JAVASCRIPT and JQUERY i return to web design , and like to share with you one of my template converted from PSD to HTML/CSS (i would like to add some JAVASCRIPT after your validation ) :
this the page

1000×1594 266 KB

and this is my code : https://codepen.io/ekka94/pen/QrqQxZ

and this is the project : https://github.com/ekkatharisi/utopicflower

the problem is that i’m not satisfied with this work , because there are some error where i can’t fix like :

  1. when you resize the page the vertical menu don’t become in the center ( no exactely in the center )
  2. when you resize the page the three box with background white become verticaly aligned but not in the center.
    and other that you gonna notice after taking a look on the code , so please share with me your view and advice
    thank you in advance
2

Add {padding-left:0} to .navbartop and see if that centers the menu in single column mode. (around line 148)

3

thank you for the quick response , that work for me , thank you

4

The reason that worked is because a list (ordered or unordered) is normally displayed as an indented vertical column of items. To this end, it has padding-left and margin-top and margin-bottom values assigned by default. The padding left indents the list items. To display the list items in a row across the page, OR to center the column of list items in the very center of the page (as you requested here) one must delete the default padding-left, otherwise the padding-left offsets the column.

3 Likes
5

Hi ekka,

You have a math conflict in one of your media queries.

.mediadiv is a child of .wrappermedia and you have set min-width;340px on the child and width:30% on the parent. But when the viewport gets to the point that 340px is larger than 30% it causes the child to overflow on the right side.

That is what’s causing it to look un-centered, you could fix that by removing the min-width.

@media (max-width: 1159px)
{
    .mediadiv
    {
        min-width : 340px; /*at times the exceeds it's parent width of 30% and overflows*/
        min-height: 325px;
        background-color : white;
        vertical-align: middle;
        display : block;
    }
    .wrappermedia
    {
        text-align: center;
        width: 30%; /*causes min-width child to overflow*/
        margin : 50px auto;
    }
}

I would take a much more fluid approach and back off on the number of media queries and width/ min-width changes along the way.

With a fluid approach to begin with I would take the footer out of your .bigmediawrapper and then you can more than likely just need one query for those three boxes. And that would be to change them to display:block; and increase the width when they stack.

Take that fixed height off your image and set it to auto. Also, the only things you need in your queries are the things that change, no need to keep restating background colors etc.

Run this page in your browser and you will see the fluid design.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>
<style>
html {
 box-sizing: border-box;
}
*, *:before, *:after {
 box-sizing: inherit;
}
.bigmediawrapper {
  display: table;
  width: 100%;
  background: #ebebea;
  text-align: center;
}
.wrappermedia {
  display: inline-block;
  vertical-align: top;
  width: 30%;
  margin: 50px 1%;
  text-align: center;
}
.mediadiv {
  /*no width*/
  min-height: 325px;
  background: white;
  display: block; /*move inline-block on the parent, this is block by default so it's not really needed*/
}
.mediadiv img {
  display: block;
  padding: 15px;
  width: 100%;
  /*height: 180px;*/
  height: auto;
}
@media (max-width: 700px) {
  .wrappermedia {
    width: 80%;
    margin: 30px auto;
  }
}
</style>

</head>
<body>

<div class="bigmediawrapper">
    <div class="wrappermedia">
        <div class="mediadiv">
            <img src="http://www.revuemag.com/wp-content/uploads/2014/04/orchid-3.jpg" alt="">
            <span>Lorem ipsum dolor</span>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias at cum delectus dolor eaque id
                magnam, magni minima obcaecati.</p>
        </div>
    </div>

    <div class="wrappermedia">
        <div class="mediadiv middle">
            <img src="http://www.revuemag.com/wp-content/uploads/2014/04/orchid-3.jpg" alt="">
            <span>Lorem ipsum dolor</span>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias at cum delectus dolor eaque id
                magnam,
                magni minima obcaecati, consectetur adipisicing.</p>
        </div>
    </div>

    <div class="wrappermedia">
        <div class="mediadiv last">
            <img src="http://www.revuemag.com/wp-content/uploads/2014/04/orchid-3.jpg" alt="">
            <span>Lorem ipsum dolor</span>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias at cum delectus dolor eaque id
                magnam,
                magni minima obcaecati, consectetur adipisicing.</p>
        </div>
    </div>
</div>

<div class="footerWrapper">
Footer stuff in its' own wrapper
</div>

</body>
</html>
3 Likes
6

thank you @Ray.H, is there any other good practice I can learn to take my skills to the next level, … any other comment

7

Hi ekka,

There is actually a lot of things that can be cleaned up in both the HTML and CSS. Several rulesets in the CSS have styles that are not doing anything because they are in conflict with CSS specs. And as mentioned earlier, a lot of repetitious styles can be removed.

Starting from the top of you stylesheet, I may not get everything and I’ll add comments in the CSS at times.

No need to declare width/height on the body again, it was already done when it was grouped with the html.

body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

body {
    height: 100%; /*repeated*/
    width: 100%; /*repeated*/
    background-color: #d0d0d0;
    padding: 0 20px;
    box-sizing: border-box;
}

.formwrapper {
    float: right;
    margin: 0 30px auto auto; /*auto margins are ignored on floats*/
    /*overflow: hidden; /*not really needed here*/
}

Don’t use spans for what should be heading tags, this heading in your header would be the <h1> tag on that page. You can use a span for further styling inside the <h1>

        <div class="titlewrapper">
        <span class="utopic-flowers"><!-- This should be an H1 tag -->
            <span>u</span>topic <span>f</span>lowers
        </span>
            <span class="utopic-flowers2">free PSD webSite template</span>
        </div>

An element can’t be a float and an inline-block at the same time, float wins in this case.
Add clear:both so the floated menu drops below the form and heading. That way it won’t jump around.

@media (min-width : 730px) {
    .navbartop {
        display: inline-block; /*this rule does nothing*/
        float: right;  /*float trumps inline-block*/
        /*margin-top: 52px;  /*remove top margin  and add clear:both*/
        margin-bottom: 0;
        clear:both; /*clear the form and title floats so the menu doesn't jump around on page resize*/
    }


.headerText p {
    width: 70%;
    font-style: italic;
    font-size: 18px;
    text-align: center;
    vertical-align: center; /*no such animal in css specs, v-align does not apply to display:block, which a p-tag is*/
/*vertical-align accepts top, middle ,bottom, baseline is default, see specs for more info and values*/
    margin: auto auto;
    padding: 25px 0;
}

I’ll continue later with other parts of the page. :slight_smile:

2 Likes
8

Hi ekka,

I have forked your codepen and cleaned up the html/css. You may find it easier to look through my version and see how I’ve eliminated redundant styles and unnecessary divs.

As mentioned earlier, the page now takes a fluid approach from the start and introduces media queries on sections that need it, when they need it. So not all sections have the same breakpoints, but they only needed one media query.

The jumpiness is taken out of the menu now and likewise is doesn’t jump when the border comes into view on the hovered anchors.

I’ll work on the footer later if I get a chance but the page is fairly well complete up to that point.

2 Likes
9

thank you very much @Ray.H, this very helpful.

1 Like
10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.