Help Html and CSS problem

[vien3211]

Ano po kayang diskarte para ma-achieve po ung ganito?

sa mga comments na part na lang po kasi ako kulang. Salamat!

 

[Spad3]

Anong year mo na po sa College? o tapos na po kayo

 

[Misanthropy]

grid system, I guess.

 

[vien3211]

Anong year mo na po sa College? o tapos na po kayo

2nd year pa lang po

 

[Misanthropy]

2 column layout or list grid view pwede

 

[vien3211]

grid system, I guess.

na try ko na po siya, hindi po talaga siya pumapantay katulad nung sa pic

 

[Misanthropy]

na try ko na po siya, hindi po talaga siya pumapantay katulad nung sa pic

try mo magset ng constant value/size sa bawat box.

 

[vien3211]

2 column layout or list grid view pwede

gamit ko po ngayon is 2 column layout, ang problema ko lang po is hindi po siya pantay katulad nung sa picture

 

[Spad3]

gamit ko po ngayon is 2 column layout, ang problema ko lang po is hindi po siya pantay katulad nung sa picture

send ka lang ng actual picture patingin

 

[vien3211]

send ka lang ng actual picture patingin

 

[Misanthropy]

what if gayahin niyo na lang po yung html at css niya or pag aralan yung layout via its code.

 

[vien3211]

what if gayahin niyo na lang po yung html at css niya or pag aralan yung layout via its code.

picture lang po mismo ung sinend samin sir, kaya hindi rin po ma-inspect element

 

[Spad3]

yan yung pic ng gawa mo i sinend ng sir mo? If meron actual pic ng gawa mo patingin web designing kasi major ko baka matulungan kita, gusto ko lang makita yung actual picture ng gawa mo para malaman ko kung ano mali if possible code na din

 

[vien3211]

yan yung pic ng gawa mo i sinend ng sir mo? If meron actual pic ng gawa mo patingin web designing kasi major ko baka matulungan kita, gusto ko lang makita yung actual picture ng gawa mo para malaman ko kung ano mali if possible code na din

opo, yan po ung sinend ni sir.
ito po ung akin:

 

[Misanthropy]

opo, yan po ung sinend ni sir.
ito po ung akin:
View attachment 2148888

You do not have permission to view the full content of this post. Log in or register now.

ayan po mismong reference niya.

 

[vien3211]

You do not have permission to view the full content of this post. Log in or register now.

ayan po mismong reference niya.

yan po sir, kaso mukhang updated po siya kaya medyo iba

 

[Misanthropy]

<div>
    <div class="column" id="first-column">
        <div class="review-block">
            <p class="reviewDiv"><img src="https://hiradadiamond.github.io/movieReview/images/rotten.gif" alt=""> Ditching the cheeky, self-aware wink that
                helped to excuse the
                concept's inherent corniness, the movie attempts to look polished and 'cool,' but the been-there
                animation can't compete with the then-cutting-edge puppetry of the 1990 live-action movie.
            </p>
            <p class="critic-review"><img src="https://hiradadiamond.github.io/movieReview/images/critic.gif" alt="critic">
                Peter Debruge
                <br/> Variety
            </p>
        </div>
        <div class="review-block">
            <div class="reviewDiv">
                <p><img src="https://hiradadiamond.github.io/movieReview/images/fresh.gif" alt=""> <q>TMNT is a fun, action-filled adventure that will satisfy
                    longtime fans and generate a legion of new ones.</q>
                </p>
            </div>
            <div class="critic-review">
                <p><img src="https://hiradadiamond.github.io/movieReview/images/critic.gif" alt="critic"></p>
                <p>Todd Gilchrist
                    <br/> IGN Movies
                </p>
            </div>
        </div>
        <div class="review-block">
            <div class="reviewDiv">
                <p><img src="https://hiradadiamond.github.io/movieReview/images/rotten.gif" alt=""> <q>It Stink!s</q>
                </p>
            </div>
            <div class="critic-review">
                <p><img src="https://hiradadiamond.github.io/movieReview/images/critic.gif" alt="critic"></p>
                <p>Jay Shreman
                    <br/> Unemployed
                </p>
            </div>
        </div>
        <div class="review-block">
            <div class="reviewDiv">
                <p><img src="https://hiradadiamond.github.io/movieReview/images/rotten.gif" alt=""> <q>The rubber suits are gone and they've been redone with
                    fancy computer technology, but that hasn't stopped them from becoming dull.</q>
                </p>
            </div>
            <div class="critic-review">
                <p><img src="https://hiradadiamond.github.io/movieReview/images/critic.gif" alt="critic"></p>
                <p>Joshua Tyler
                    <br/> CinemaBlend.com
                </p>
            </div>
        </div>
        <div class="review-block">
            <div class="reviewDiv">
                <p><img src="https://hiradadiamond.github.io/movieReview/images/rotten.gif" alt=""> <q>My Review: adventure movie</q>
                </p>
            </div>
            <div class="critic-review">
                <p><img src="https://hiradadiamond.github.io/movieReview/images/critic.gif" alt="critic"></p>
                <p>Km Hira Kafle
                    <br/> Software Developer
                </p>
            </div>
        </div>
    </div>
    <div class="column" id="second-column">
        <div class="review-block">
            <p class="reviewDiv"><img src="https://hiradadiamond.github.io/movieReview/images/rotten.gif" alt=""> The script feels like it was computer generated. This mechanical presentation lacks the cheesy charm of the three live action films.
            </p>
            <p class="critic-review"><img src="https://hiradadiamond.github.io/movieReview/images/critic.gif" alt="critic">
                Steve Rhodes
                <br/> Internet Reviews
            </p>
        </div>
        <div class="review-block">
            <div class="reviewDiv">
                <p><img src="https://hiradadiamond.github.io/movieReview/images/rotten.gif" alt=""> <q>The striking use of image and motion allows each sequence to leave an impression. It's an accomplished restart to this franchise.

                </q>
                </p>
            </div>
            <div class="critic-review">
                <p><img src="https://hiradadiamond.github.io/movieReview/images/critic.gif" alt="critic"></p>
                <p>Mark Palermo
                    <br/> Coast (Halifax, Nova Scotia)
                </p>
            </div>
        </div>
        <div class="review-block">
            <div class="reviewDiv">
                <p><img src="https://hiradadiamond.github.io/movieReview/images/fresh.gif" alt=""> <q>My Review: Good one!!</q>
                </p>
            </div>
            <div class="critic-review">
                <p><img src="https://hiradadiamond.github.io/movieReview/images/critic.gif" alt="critic"></p>
                <p>Km Hira Kafle
                    <br/> (Unemployed)
                </p>
            </div>
        </div>
        <div class="review-block">
            <div class="reviewDiv">
                <p><img src="https://hiradadiamond.github.io/movieReview/images/rotten.gif" alt=""> <q>Impersonally animated and arbitrarily plotted, the story appears to have been made up as the filmmakers went along.</q>
                </p>
            </div>
            <div class="critic-review">
                <p><img src="https://hiradadiamond.github.io/movieReview/images/critic.gif" alt="critic"></p>
                <p>Ed Gonzalez
                    <br/> Slant Magazine
                </p>
            </div>
        </div>
        <div class="review-block">
            <div class="reviewDiv">
                <p><img src="https://hiradadiamond.github.io/movieReview/images/fresh.gif" alt=""> <q>My Review: Good one!!</q>
                </p>
            </div>
            <div class="critic-review">
                <p><img src="https://hiradadiamond.github.io/movieReview/images/critic.gif" alt="critic"></p>
                <p>Km Hira Kafle
                    <br/> (Unemployed)
                </p>
            </div>
        </div>
    </div>
</div>

.column{
    width: 47%;
    float:left;
}
#first-column{
    margin-left:2%;
    margin-right: 1%;
}
#second-column{
    margin-left: 1%;
    margin-right:2%;
}
.review-block{
    margin-bottom: 20pt;
}
.reviewDiv{
    width: auto;
    border: 2px solid grey;
    background-color: #E8DC9B;
    font-size: 8pt;
    font-weight: bold;
    vertical-align: text-top;
    padding:8px;
}
.reviewDiv p{
    padding:1%;
}
.reviewDiv img{
    float:left;
    margin-right: 5px;
    vertical-align: middle;
}
.critic-review img{
    margin-right:5px;
    float: left;
}

JSFiddle:

konting tweaks na lang sa css.

 

[vien3211]

<div>
    <div class="column" id="first-column">
        <div class="review-block">
            <p class="reviewDiv"><img src="https://hiradadiamond.github.io/movieReview/images/rotten.gif" alt=""> Ditching the cheeky, self-aware wink that
                helped to excuse the
                concept's inherent corniness, the movie attempts to look polished and 'cool,' but the been-there
                animation can't compete with the then-cutting-edge puppetry of the 1990 live-action movie.
            </p>
            <p class="critic-review"><img src="https://hiradadiamond.github.io/movieReview/images/critic.gif" alt="critic">
                Peter Debruge
                <br/> Variety
            </p>
        </div>
        <div class="review-block">
            <div class="reviewDiv">
                <p><img src="https://hiradadiamond.github.io/movieReview/images/fresh.gif" alt=""> <q>TMNT is a fun, action-filled adventure that will satisfy
                    longtime fans and generate a legion of new ones.</q>
                </p>
            </div>
            <div class="critic-review">
                <p><img src="https://hiradadiamond.github.io/movieReview/images/critic.gif" alt="critic"></p>
                <p>Todd Gilchrist
                    <br/> IGN Movies
                </p>
            </div>
        </div>
        <div class="review-block">
            <div class="reviewDiv">
                <p><img src="https://hiradadiamond.github.io/movieReview/images/rotten.gif" alt=""> <q>It Stink!s</q>
                </p>
            </div>
            <div class="critic-review">
                <p><img src="https://hiradadiamond.github.io/movieReview/images/critic.gif" alt="critic"></p>
                <p>Jay Shreman
                    <br/> Unemployed
                </p>
            </div>
        </div>
        <div class="review-block">
            <div class="reviewDiv">
                <p><img src="https://hiradadiamond.github.io/movieReview/images/rotten.gif" alt=""> <q>The rubber suits are gone and they've been redone with
                    fancy computer technology, but that hasn't stopped them from becoming dull.</q>
                </p>
            </div>
            <div class="critic-review">
                <p><img src="https://hiradadiamond.github.io/movieReview/images/critic.gif" alt="critic"></p>
                <p>Joshua Tyler
                    <br/> CinemaBlend.com
                </p>
            </div>
        </div>
        <div class="review-block">
            <div class="reviewDiv">
                <p><img src="https://hiradadiamond.github.io/movieReview/images/rotten.gif" alt=""> <q>My Review: adventure movie</q>
                </p>
            </div>
            <div class="critic-review">
                <p><img src="https://hiradadiamond.github.io/movieReview/images/critic.gif" alt="critic"></p>
                <p>Km Hira Kafle
                    <br/> Software Developer
                </p>
            </div>
        </div>
    </div>
    <div class="column" id="second-column">
        <div class="review-block">
            <p class="reviewDiv"><img src="https://hiradadiamond.github.io/movieReview/images/rotten.gif" alt=""> The script feels like it was computer generated. This mechanical presentation lacks the cheesy charm of the three live action films.
            </p>
            <p class="critic-review"><img src="https://hiradadiamond.github.io/movieReview/images/critic.gif" alt="critic">
                Steve Rhodes
                <br/> Internet Reviews
            </p>
        </div>
        <div class="review-block">
            <div class="reviewDiv">
                <p><img src="https://hiradadiamond.github.io/movieReview/images/rotten.gif" alt=""> <q>The striking use of image and motion allows each sequence to leave an impression. It's an accomplished restart to this franchise.

                </q>
                </p>
            </div>
            <div class="critic-review">
                <p><img src="https://hiradadiamond.github.io/movieReview/images/critic.gif" alt="critic"></p>
                <p>Mark Palermo
                    <br/> Coast (Halifax, Nova Scotia)
                </p>
            </div>
        </div>
        <div class="review-block">
            <div class="reviewDiv">
                <p><img src="https://hiradadiamond.github.io/movieReview/images/fresh.gif" alt=""> <q>My Review: Good one!!</q>
                </p>
            </div>
            <div class="critic-review">
                <p><img src="https://hiradadiamond.github.io/movieReview/images/critic.gif" alt="critic"></p>
                <p>Km Hira Kafle
                    <br/> (Unemployed)
                </p>
            </div>
        </div>
        <div class="review-block">
            <div class="reviewDiv">
                <p><img src="https://hiradadiamond.github.io/movieReview/images/rotten.gif" alt=""> <q>Impersonally animated and arbitrarily plotted, the story appears to have been made up as the filmmakers went along.</q>
                </p>
            </div>
            <div class="critic-review">
                <p><img src="https://hiradadiamond.github.io/movieReview/images/critic.gif" alt="critic"></p>
                <p>Ed Gonzalez
                    <br/> Slant Magazine
                </p>
            </div>
        </div>
        <div class="review-block">
            <div class="reviewDiv">
                <p><img src="https://hiradadiamond.github.io/movieReview/images/fresh.gif" alt=""> <q>My Review: Good one!!</q>
                </p>
            </div>
            <div class="critic-review">
                <p><img src="https://hiradadiamond.github.io/movieReview/images/critic.gif" alt="critic"></p>
                <p>Km Hira Kafle
                    <br/> (Unemployed)
                </p>
            </div>
        </div>
    </div>
</div>

.column{
    width: 47%;
    float:left;
}
#first-column{
    margin-left:2%;
    margin-right: 1%;
}
#second-column{
    margin-left: 1%;
    margin-right:2%;
}
.review-block{
    margin-bottom: 20pt;
}
.reviewDiv{
    width: auto;
    border: 2px solid grey;
    background-color: #E8DC9B;
    font-size: 8pt;
    font-weight: bold;
    vertical-align: text-top;
    padding:8px;
}
.reviewDiv p{
    padding:1%;
}
.reviewDiv img{
    float:left;
    margin-right: 5px;
    vertical-align: middle;
}
.critic-review img{
    margin-right:5px;
    float: left;
}

JSFiddle:

konting tweaks na lang sa css.

thank you po!