webtrickshome

The first issue with your site even on larger screen view is the divs with id #banner-container and content-container. Remove the width value from their css. The html div tag automatically possesses a property display:block which means 100% width inclusive of paddings and margins. 

Why on earth are you using HTML tables. That's the worst thing to do. It's such a pain to even look into the matter.

use <input type="checkbox" name="ynDiscussed<?=CStr(i)?>"> instead and you are good to go.

The only way you can improve your portfolio is by improving the volume of your work experience. So, keep on working on the projects and keep updating your portfolio.

You are forcing the id dots to be  inline at any case.

if dot's style is none make it inline else change it to display none. What does that mean? It's again forcing the div to go inline.

Workout on this if else condition and all will work fine. 

The best option to give equal width to your buttons is to give the width itself in pixel value with text-align center property. You can add little padding on each side for vertical spacing.

.your-button{

      width: 100px;

     text-align: center;

     padding: 5px 10px;

}

You can also add hover effects to make them look more appealing.

Greetings to all the users and administrators of w3scools invisionzone forum.

I would love to get some constructive criticism on this web development tutorial site namely webtrickshome. It's been around for slightly more than a year but I redesigned it recently.

Any feedback regarding the design and contents would be highly appreciated.

Thankyou

seems like you are planning a large container in the middle leaving equal spaces on each side. Do this.

<div class="main-container">

</div>

<style>

     .main-container{

             width: 80%;

             margin: auto;

}

</style>

This will give you a div with 80% width of the screen size automatically placed in the middle. Now, you can create three separate divs inside that main-container to place contents on different sides which looks like:

<div class="main-container">

       <div class="box"></div>

       <div class="box box-middle"></div>

       <div class="box box-last"></div>

</div>

Now, add some styles to these divs.

<style>

.box{

     width: 30%; //this will make all three boxes of equal width

     float: left; // this will make all three boxes float to the left leaving the rest 10% space empty on the right end

}

.box-last{

      float: right; // this will make the last box float to the right overriding the earlier float property and shift the 10% empty space between the second and last box.

}

.box-middle{

     margin-left: 5%; // this will shift the middle box to the right leaving 5% of the empty space on the left which will make the other 5% empty space remain on the right and give a view of                                            equal spacing among those boxes.

    text-align: center; I added this as it seems like you want the objects in the middle div to be centered.

}

</style>

That's not exactly possible with css. The only thing you can do is make the background a bit transparent with background: rgba(0,0,0,0.1) which defines the background color and opacity of the body. The screenshot you've posted is an image file in png format not the screenshot of a page loaded in browser.

Generally, the header section is wrapped inside a html tag named <header></header>. If it's the parent div use it in your css file as

header{

    background: your-color;

}

If the header tag is wrapped inside some div then find the top level div and use it's id or class name to add the same.

.divname or #idname{

    background: your-color;

}

You are overriding you media query css with your own blocks of css.

Here's a list of screen sizes from webtrickshome you can use there.

Generally, I'd use one as:

@media(max-width:767px){} which would cover all smaller screens and another as

@media(min-width:768px){} which would cover all larger screens.

In case of complicated layouts, i'd use something like

@media(max-width: 420px){}

@media(min-width: 421px) and (max-width: 767px){}

and go on to break down the screen sizes and restrict their impact on other screen sizes.

You can use bootstrap accordion for convenience. It's responsive and easy to integrate as well.

You are missing the # symbol in ahead of the id name followed by the data-toggle attribute.

it should be <a href="#myModal" data-toggle="modal>Your Link Text Here</a>.

data-toggle="modal" opens the modal window.

data-target or href="#myModal" points to the id of the modal i.e. the id of the parent <div> of the model.

Within the paragraph, its only line height that works. In case its between multiple maragraphs then  you can use either margin or padding. The best value for line-height is 1.6 em which means the height of the line is 1.6 times larger than the font size. So, you change the font size then the line height also adjusts itself.

p.your-class{

line-height: 1.6em;

}

Use html tag <center></center> as shown below to get it  done easily or you can redefine its css property as display block and then margin auto.

<center><a class="button" href="#"><span>GO! </span></a></center>

First of all, create the div on the top. 

<div class="red-div"></div>

It'll take up the entire width automatically so you only need to add the background and height.

.red-div{

background: red;

height: 200px;

}

Then,you can divide the remaining blocks into two main sections. One on the left and one on the right.

<div class="left-section"></div>

<div class="right-section"></div>

Add css property width around 30% and float left for the left div as shown below.

.left-div{

width: 30%;

float: left;

height: 600px;

border: 1px solid grey;

}

Add the remaining width 70% and float property for the right div as shown below. Here, you can use either float left or right as both will produce the same result as there's no spacing between them.

.right-div{

width: 70%;

float: left;

background: blue;

height: 600px;

border: 1px solid grey;

}

Now, create multiple divs inside the left div with height, background and border defined and you'll get the desired result.

<div class="left-div">

     <div class="content"></div>

     <div class="content"></div>

     <div class="content"></div>

     <div class="content"></div>

     <div class="content"></div>

</div>

.content{

height: 100px;

background: green;

border-bottom: 1px solid grey;

}

First of all you need to know where exactly is the image located on your server. 

Generally, it's placed in public_html/images and in your case it's public_html/img.

So, you can use the image path as http://you-domain-name/img/your-file-name.

It's always better to use the full path while embedding objects or files.

You can create your own custom javascript for collapsibles that appear on the right with a bit of css or modify the css of the existing one to display it on the right. Here's a tutorial on jquery basics from webtrickshome from where you can copy the code for slideToggle which hides the collapsible divs by default. Then you can add your own css to diplay them on the right.