5
\$\begingroup\$

This is my very first website which is going to be published online. Along the way it's gonna be a complete website.

Now, firstly, I am a very beginner in this field, and I want to be a good web designer in future. With that being kept in mind, I want to know my weak point in designing and improve that as much as possible. Here, I used HTML 5, code written in Notepad++.

Right now the problem is if I run this site in some older browsers, the page content breaks down and sits one over another. They overlap, though the recent updated browser works fine. That means currently my site isn't smartly designed. Again, with those being said, I need to ask you few question:

  1. How can I improve my overall design ( coding)?

  2. I have enclosed the whole contents (including header and footer) in a body tag, is it a good idea?

  3. I have used so many break statement? How could I avoid it?

  4. What are the few things that I have done worst in my coding so that I must change them?*

[NOTE: Even if you suggest me any changing, I want to keep the original output, as I have right now]

*{box-sizing:border-box;padding:0; margin:0}

    /*Positioning & styling header text starts*/

#wrapper{

display:-webkit-box;
display:-moz-box;
display:-ms-box;
-webkit-box-orient:vertical;

-ms-box-flex:1;

-moz-box-orient:vertical;
-moz-box-flex:1;
-webkit-box-flex:1;
-ms-box-flex:1;
box-flex:1;


width:100%;

-webkit-box-pack:center;
-moz-box-pack:center;
-ms-box-pack:center;
box-pack:center;


    }
h1{
    text-align:center;
    /*
    margin-top:55px;
    */

    color:green;

    border-bottom:2px solid Crimson ;


    box-shadow: 2px 2px 2px yellow;

    padding-bottom:40px;
    padding-top:45px;
    font-family:Prisoner SF;

}
.seven{
font-size:37px;
}

    /*Positioning & styling header text ends*/

    /*positioning the logo starts*/
    #header_area{
    background-image: url('img_akin/7seas.jpeg'), 

                     url('img_akin/7seas.jpeg');

    background-repeat: no-repeat, 

                       no-repeat;

    background-position: 220px top;
    margin-top:10px;

    }
    /*positioning the logo ends*/




    #contact_address_header{

    float:right;
    margin-right:40px;
    margin-top:-15px;
    color:#6495ED;
    font-size: small;
    font-family:Euphemia;

    }
.numbers{

font-size:11.5px;
}

    #coming_soon{
    text-align:center;
    font-family:Prisoner SF;
    font-size:30px;
    color:#C71585;

    }

#image1{

    margin-left:570px;

    }
    /*Positioning 3 boxes starts: */

    #p_box1{

    padding: 18px 2%;
    border: 3px solid gray;
    float: left;
    /*
    width: 29.333333%;
    */

    width: 25.333333%;
    /*original starts*/
    margin: auto 0.5%; 
    /*original ends*/
    margin-left:100px;

    border-radius:7px;
    -webkit-border-radius:7px;
    -moz-border-radius:7px; 
    -ms-border-radius:7px;
    -o-border-radius:7px;


    background:url("img_akin/box_img_1.jpg") no-repeat;
    background-size: 100% 50% ;
    font-family:Euphemia;
    font-size:16px;


}   



#p_box2{

padding: 18px 2%;
    border: 3px solid gray;
    float: left;
    /*
    width: 29.333333%;
    */

    width: 25.333333%;
    /*original starts*/
    margin: auto 0.5%; 
    /*original ends*/
    margin-left:100px;

    border-radius:7px;
    -webkit-border-radius:7px;
    -moz-border-radius:7px; 
    -ms-border-radius:7px;
    -o-border-radius:7px;


    background:url("img_akin/box_img_2.jpg") no-repeat;
    background-size: 100% 50% ;
    font-family:Euphemia;
    font-size:16px;


    }   
    #p_box3{

    padding: 18px 2%;
    border: 3px solid gray;
    float: left;
    /*
    width: 29.333333%;
    */

    width: 25.333333%;
    /*original margin starts*/
    margin: auto 0.5%; 
    /*original margin ends*/
    margin-left:100px;

    border-radius:7px;
    -webkit-border-radius:7px;
    -moz-border-radius:7px; 
    -ms-border-radius:7px;
    -o-border-radius:7px;


    background:url("img_akin/box_img_3.jpg") no-repeat;
    background-size: 100% 50%;
    font-family:Euphemia;
    font-size:16px;


    }
    /*Positioning 3 boxes ends*/
    #p_box4{

    padding: 18px 2%;
    border: 3px solid gray;
    float: left;
    /*
    width: 29.333333%;
    */

    width: 25.333333%;
    /*original margin starts*/
    margin: auto 0.5%; 
    /*original margin ends*/
    margin-left:100px;

    border-radius:7px;
    -webkit-border-radius:7px;
    -moz-border-radius:7px; 
    -ms-border-radius:7px;
    -o-border-radius:7px;


    background:url("img_akin/box_img_4.jpg") no-repeat;
    background-size: 100% 50% ;
    font-family:Euphemia;
    font-size:16px;
    }
    #p_box5{


    padding: 18px 2%;
    border: 3px solid gray;
    float: left;
    /*
    width: 29.333333%;
    */

    width: 25.333333%;
    /*original margin starts*/
    margin: auto 0.5%; 
    /*original margin ends*/
    margin-left:100px;

    border-radius:7px;
    -webkit-border-radius:7px;
    -moz-border-radius:7px; 
    -ms-border-radius:7px;
    -o-border-radius:7px;


    background:url("img_aki/box_img_5.jpg") no-repeat;
    background-size: 100% 50% ;
    font-family:Euphemia;
    font-size:16px;


    }

    #p_box6{

    padding: 18px 2%;
    border: 3px solid gray;
    float: left;
    /*
    width: 29.333333%;
    */

    width: 25.333333%;
    /*original margin starts*/
    margin: auto 0.5%; 
    /*original margin ends*/
    margin-left:100px;

    border-radius:7px;
    -webkit-border-radius:7px;
    -moz-border-radius:7px; 
    -ms-border-radius:7px;
    -o-border-radius:7px;


    background:url("img_akin/box_img_6.jpg") no-repeat;
    background-size: 100% 50% ;
    font-family:Euphemia;
    font-size:16px;

}

#t_box1,#t_box2,#t_box3,#t_box4,#t_box5,#t_box6{
padding-top:230px;

}



    /*Applying the fade out effect starts*/
    #image1::before{

     background-image: linear-gradient( to left, 
     rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 1 ) 100% );
     background-image: -moz-linear-gradient( to left, 
     rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 1 ) 100% );
     background-image: -ms-linear-gradient( to left, 
     rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 1 ) 100% );
     background-image: -o-linear-gradient( to left, 
     rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 1 ) 100% );
     background-image: -webkit-linear-gradient(to left, 
     rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 1 ) 100% );
     content: "\00a0";
     height: 50%;
     position: absolute;
     width: 50%;


    }
    /*Applying the fade out effect ends*/

    /*Applying mouse hover effet starts*/
    #p_box1:hover{

    border: 3px solid blue;


    }
    #p_box2:hover{

    border: 3px solid blue;


    }
    #p_box3:hover{

    border: 3px solid blue;
    }
    #p_box4:hover{

    border: 3px solid blue;
    }
    #p_box5:hover{

    border: 3px solid blue;
    }
    #p_box6:hover{

    border: 3px solid blue;
    }
    /*Applying mouse hover effet ends*/






    #body1_text{
    /*
    margin: auto 2%; 
    */
    text-align:center;
    }


    #footer_box{
    overflow:auto;
    border-top:2px solid #009933;

    margin-top:100px;
     background-color:gray;

    }



    #footer_text_middle, #footer_text_right{

    font-size:12px;
    font-family:Euphemia;
    float: left;
    width: 28%;
    margin: 0 1%;
    padding-bottom:15px;
    padding-top:5px;
    color:blue;


    }
    #footer_text_left{
    font-size:12px;
    font-family:Euphemia;
    float: left;
    width: 31%;
    margin-left: 120px;

    padding-bottom:15px;
    padding-top:5px;
    color:blue;
    }
<!DOCTYPE html>

<html lang="eng">
    <head>
        <title>7Seas world</title>
        <meta charset="utf-8"/>
        <link rel="stylesheet" type="text/css" href="index_akin_design.css">

    </head>

    <body>

        <div id="wrapper">
        <div id="header_area">

                <h1>


                     <span class="seven">7</span>Seas world
                            <span id="contact_address_header">
                        <span class="numbers">Mob: 076-0000000 <br /> Tel: 040-000000</span><br />
                            info@7seasworld.se

                            </span>
                </h1>

        </div>
                <br /><br />

                <marquee id="coming_soon" behavior="alternate">We are coming soon, please check back later.</marquee>
                <br /><br />
                <br /><br />
                <br /><br />
        <div  id="image1">
                <img src="img_aki/image_1st_body.jpg" width="650" height="333"/>
        </div>


                        <br /><br /><br /><br /><br /><br />
                        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
                        <br /><br /><br /><br /><br /><br />


                        <div id="p_box1">   
                                            <p id="t_box1"><b>Text coming soon, please check back later.</b> <br/>
                                                            Text coming soon, please check back later. <br/>

                                            </p>
                        </div>


                        <div id="p_box2">   
                                            <p id="t_box2"><b>Text coming soon, please check back later.</b> <br/>
                                                            Text coming soon, please check back later. <br/>
                                                            Text coming soon, please check back                 
                                            </p>
                        </div>


                        <div id="p_box3">   <p id="t_box3"><b>Text coming soon, please check back later.</b> <br/>
                                                            Text coming soon, please check back later. <br/>
                                                            Text coming soon, please check back 
                                            </p>

                        </div>
                        <!-- I know it's Bad coding, but I will improve later (HOW??)-->

                        <br/><br/><br/><br /><br /><br /><br /><br/><br/><br/><br /><br /><br /><br />
                        <br/><br/><br/><br /><br /><br /><br /><br/><br/><br/><br /><br /><br /><br />
                        <br/><br /><br /><br /><br />



                        <div id="p_box4">   
                                            <p id="t_box4"><b>Text coming soon, please check back later.</b> <br/>
                                                            Text coming soon, please check back later. <br/>
                                                            Text coming soon, please check back 

                                            </p>
                        </div>


                        <div id="p_box5">
                                            <p id="t_box5"><b>Text coming soon, please check back later.</b> <br/>
                                                            Text coming soon, please check back later. <br/>
                                                            Text coming soon, please check back 

                                            </p>
                        </div>  

                        <div id="p_box6">               <p id="t_box6">
                                                        <b>Text coming soon, please check back later.</b> <br/>
                                                        Text coming soon, please check back later. <br/>



                                                        </p>
                        </div>  



                    <footer>
        <div id="footer_box">

                        <p id="footer_text_left">

                        © 7 seas World <br />                                       

                        En del av 7seas Money WorldKB<br />                 
                        F-skatt registrerat  <br />                                         
                        Org, Nr: 0000000000 <br />   

                        SEB Företagskonto: 000000000<br />
                        BG: 000000

                        </p>

                        <p id="footer_text_middle">
                        Besökadress: Skohafiuf 8E<br /> 
                        218 41 HugeRoad<br /> 
                        MUami,Universe <br />  
                        Follow us on FB <!-- SMARTADDON BEGIN --><br />
                        <br />
<script type="text/javascript">
(function() {
var s=document.createElement('script');s.type='text/javascript';s.async = true;
s.src='http://s1.smartaddon.com/share_addon.js';
var j =document.getElementsByTagName('script')[0];j.parentNode.insertBefore(s,j);
})();
</script>


<a href="http://www.smartaddon.com/?share" title="Share Button" onclick="return sa_tellafriend('www.7seasredovisning.se','bookmarks')"><img alt="Share" src="http://s1.smartaddon.com/s8.png" border="0" /></a>

                        <br /><br />Design & Development: Muami

                        </p>

                    <p id="footer_text_right">


                        Tel: 000000<br />
                        Mob: 076-00000<br />
                        e-Mail: info@7seasworld.se<br/>
                        www.7seasworld.se<br/>
    <span id="webstat">
<script src="http://stats.webstat.se/assets/stat_isp2.php"></script> 
<script type="text/javascript">
<!--
document.write("<" + "script src=\"http://stats.webstat.se/statCounter.asp?id=38356&size=" + screen.width + "x" + screen.height + "&depth=" + screen.colorDepth + "&referer=" + escape(document.referrer) + "&isp=" + info2+ "\"></" + "script>"); 
-->
</script>
</span>
<!-- Slut WEBSTAT.SE kod -->

                        </p>

        </div>

                </footer>

    </div>
    </body>



</html>

\$\endgroup\$
  • 1
    \$\begingroup\$ You might attract more help if you break things in to smaller pieces and ask a more specific quesstion. Can you pick one piece of HTML/CSS that gives you challenges in older browsers and put it into a working jsFiddle so people can actually see it and iterate on it and then ask about that piece? All the non-standard CSS properties that start is - are likely a clue too. \$\endgroup\$ – jfriend00 Oct 30 '14 at 0:01
  • 1
    \$\begingroup\$ I reverted the edit because it removed the improved title and it changed the formatting in your code - which is an important aspect of code review. \$\endgroup\$ – Jeroen Vannevel Oct 30 '14 at 0:21
  • \$\begingroup\$ Unfortunately, we can't help you with broken code. You need to go to SO for that. We can only help you make working code better here on CR. \$\endgroup\$ – cimmanon Oct 30 '14 at 13:13
4
\$\begingroup\$

Prefixes

You're specifying prefixes in the incorrect order. The standard, unprefixed property should be last:

border-radius:7px;
-webkit-border-radius:7px;
-moz-border-radius:7px; 
-ms-border-radius:7px;
-o-border-radius:7px;

You're also specifying prefixes that have never been required by any browser:

-ms-border-radius:7px;
-o-border-radius:7px;

Can I use... is a great resource for seeing what prefixes are necessary. Don't just add random prefixes if you don't need them, that's unnecessary bloat.

Unnecessary IDs

When you have CSS that looks like this:

#t_box1,#t_box2,#t_box3,#t_box4,#t_box5,#t_box6{
padding-top:230px;
}

It is a pretty good indication that you shouldn't be using an id here for styling purposes at all. You should be using a class instead:

.t_box {
    padding-top:230px;
}

Shorthand

Learn to love the shorthand properties:

margin: auto 0.5%; 
/*original ends*/
margin-left:100px;

Should be:

margin: auto 0.5% auto 100px;

Note: margin-top: auto and margin-bottom: auto won't actually do anything unless the element is a flex element. You're probably getting something closer to margin: 0 0.5% 0 100px; as a result.

And...

font-family:Euphemia;
font-size:16px;

Could be...

font: 16px Euphemia;

Flexbox

This is a personal pet peeve of mine: you're using the old Flexbox properties without also using the modern properties:

display:-webkit-box;
display:-moz-box;
display:-ms-box;
-webkit-box-orient:vertical;

-ms-box-flex:1;

-moz-box-orient:vertical;
-moz-box-flex:1;
-webkit-box-flex:1;
-ms-box-flex:1;
box-flex:1;


-webkit-box-pack:center;
-moz-box-pack:center;
-ms-box-pack:center;
box-pack:center;

This will only work in Webkit and Mozilla browsers, and the Mozilla implementation of the original Flexbox properties is super buggy. The correct way to write it is like this:

  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;

Marquee?!

Didn't even spot this one until I ran your markup through the validator. It says this element is not allowed as a child element of div elements. Probably isn't allowed to be a child of any element for the doctype you are using.

<marquee id="coming_soon" behavior="alternate">We are coming soon, please check back later.</marquee>

Misc.

I have enclosed the whole contents (including header and footer) in a body tag, is it a good idea?

Not only is it a good idea, but it is required. If there is ever a doubt, try removing it and see what the validator says.

I have used so many break statement? How could I avoid it?

What are the few things that I have done worst in my coding so that I must change them?

The excessive use of the <br /> element is probably the worst thing here. As already mentioned, you use margins and/or paddings to increase the space between elements.

\$\endgroup\$
1
\$\begingroup\$

The first thing I noticed is that your CSS indentation and spacing is really awkward and odd to me. It seems to lack consistency. Take a look at this one for example:

.numbers{

font-size:11.5px;
}

    #coming_soon{
    text-align:center;
    font-family:Prisoner SF;
    font-size:30px;
    color:#C71585;

}

I would write this as:

.numbers {
    font-size: 11.5px;
}

#coming_soon {
    text-align: center; 
    font-family: Prisoner SF;
    font-size: 30px;
    color: #C71585;
}

Notice how I add a spacing between the properties and the values to increase the readability of the code.

As mentioned above, the 4 tab spacing in your HTML is ridiculous. I don't even want to read your code when I see that, change it to 1 tab indent so that it's clear what's parent elements and what's child elements.

To add further semantics to your code, make use of semantic markup elements.

Say you have an article on your page, you could structure it like this:

<article>
    <header>
        <h1>Your header</h1>
    </header>
    <p>The article's text goes here</p>
    <footer>Author's name</footer>
</article>

Here you got 3 semantic markup tags, article, header and footer. These aren't displayed as anything on your page but they are great for providing structure to your HTML. You can even style these elements in CSS, it would would like this:

header {
    //...
}

Check here for more information about the new elements in HTML5: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document

\$\endgroup\$
  • \$\begingroup\$ Linking to w3schools is frowned on (see w3fools.com). Would you mind updating your answer to link to a more reputable source? \$\endgroup\$ – cimmanon Nov 2 '14 at 22:46
  • \$\begingroup\$ Didn't know about that thanks, I updated my answer. \$\endgroup\$ – Chrillewoodz Nov 3 '14 at 6:52
0
\$\begingroup\$

For #2, you have to enclose all the content (including headers and footers) within the <body></body> tags. You put non-content like CSS and meta tags in the <head></head> section. You can also put Javascript there, although you may not want to do so.

For #3, breaks? Do you mean the <br /> tags? You can eliminate those with margins (especially margin-bottom) and/or positioning. For example, try

#image1 {
  margin-bottom: 24em;
  margin-left:570px;
}

See if that allows you to get rid of the breaks after the image1 div. If you have too much or too little space, adjust the 24 to whatever makes it fit.

You don't need a four-column indent in HTML. It makes more sense to use a two-column indent. HTML isn't code. You don't need to use a broad indent to force yourself to avoid nesting. In general, your HTML would be easier to read if you made the indent consistent and removed many of the empty lines.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.