HTML FACEBOOK COVER PIC

David Smith

Review Profile Pic Attachement.

I am trying to coming up with a sample HTML code for the bottom Left hand corner Profile pic on the main cover page div like facebook.

I don't know how to incorporate that rectangle profile on top of the cover photo. Can someone assist me???

11 Replies

Know the answer? Post it — somebody with the same question will find it here.

Iftikar Hussain13y ago
Accepted answer
Here it is

<style type="text/css">

       .profilePic

       {

            border: 1px solid slategray;

            color: rgb(59, 89, 152);

            display: block;

            height: 168px;

            left: 15px;

            margin-top: 0px;

            position: absolute;

            text-align: left;

            top: -143px;

            width: 168px;

       }

       .profilePic img {

            background-color: #FFFFFF;

            border:4px solid #FFFFFF;

}

style>

Regards,
Iftikar
0
Iftikar Hussain13y ago
set virtual path instead of actual physical path. Copy all the image in your html file location. For ex-
Create a folder in your desktop named - TestImage
under this folder create one image folder named Image
under TestImage folder create your html file and define the path as src="Image/Sunset.jpg"

After that it will work in all browser.

Regards,
Iftikar
0
David Smith13y ago
In firefox why the images wont show. the other browsers work. view screenshot.

Also in your html code, what does the display block mean, and also the position absolute. I see those to properties alot.

How do I get the radius circle to work in the IE browser
0
Iftikar Hussain13y ago
check this link. but it will not work in IE8 or lower version of IE.

http://stackoverflow.com/questions/3815732/how-do-i-create-a-circle-or-square-with-just-css-with-a-hollow-center

Regards,
Iftikar
0
David Smith13y ago
Yes I can put a screen shot. also how to make the profile pic a circle instead of a rectangle?
below is test code. I dont see the images in the firefox browser, but i see the images in the other browsers

0
Iftikar Hussain13y ago
I don't have firefox browser. But I have checked choorme and Internet Expoler. It is working fine. What is happing in FireFox? Can you put the screen shot
Here is the HTML code

Regards,
Iftikar
0
David Smith13y ago
Thanks sir. But I do have a few questions if you don't mind. Also the html code does not work in the firefox browser, however it works perfect in the google chrome browser. Do you know why it does not work in firefox browser???? I also notice you did not give any of your divs an id.

.profilePic
{
border: 1px solid slategray;
color: rgb(59, 89, 152);
display: block; Can you explain the display block
height: 168px;
left: 15px;
margin-top: 0px;
position: absolute; Can you explain the position absolute
text-align: left; I am not for sure why you threw the text-align in there. I know what it does.
top: -140px;
width: 168px; The width is not doing anying when I remove it. I think I can go with out the width.
}
0
David Smith13y ago
Can you give me the bare minimal that I need to accomplish this. That way i can understand the style aspect of it also. I havent tried it yet. i am getting ready to try the example right now.
0
Iftikar Hussain13y ago
this is a just a style...you can modify (like border, color etc) it if you want

Regards,
Ifitkar
0
David Smith13y ago
im getting ready to test out now. I will let you know the status. Do I really have to do all this below to make this happen? I know its something simple. Brb.

  border: 1px solid slategray;
                border-top-left-radius: 3px;
                border-top-right-radius: 3px;
                box-shadow: none;
                color: rgb(59, 89, 152);
                cursor: pointer;
                direction: ltr;
                display: block;
                font-family: 'lucida grande', tahoma, verdana, arial,sans-serif;
                font-size: 11px;
                height: 168px;
                left: 15px;
                line-height: 14px;
                margin-top: 0px;
                position: absolute;
                text-align: left;
                text-decoration: underline;
                top: -143px;
                width: 168px;
                zoom: 1;
0
Iftikar Hussain13y ago
Hi,
You can do as shown below
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title>title>

        <style type="text/css">

            .profilePic

            {

                border: 1px solid slategray;

                border-top-left-radius: 3px;

                border-top-right-radius: 3px;

                box-shadow: none;

                color: rgb(59, 89, 152);

                cursor: pointer;

                direction: ltr;

                display: block;

                font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;

                font-size: 11px;

                height: 168px;

                left: 15px;

                line-height: 14px;

                margin-top: 0px;

                position: absolute;

                text-align: left;

                text-decoration: underline;

                top: -143px;

                width: 168px;

                zoom: 1;

            }

            .profilePic img {

                background-color: rgb(255, 255, 255);

                border-bottom-color: rgb(255, 255, 255);

                border-bottom-left-radius: 2px;

                border-bottom-right-radius: 2px;

                border-bottom-style: solid;

                border-bottom-width: 4px;

                border-image-outset: 0px;

                border-image-repeat: stretch;

                border-image-slice: 100%;

                border-image-source: none;

                border-image-width: 1;

                border-left-color: rgb(255, 255, 255);

                border-left-style: solid;

                border-left-width: 4px;

                border-right-color: rgb(255, 255, 255);

                border-right-style: solid;

                border-right-width: 4px;

                border-top-color: rgb(255, 255, 255);

                border-top-left-radius: 2px;

                border-top-right-radius: 2px;

                border-top-style: solid;

                border-top-width: 4px;

            }

        style>

    head>

    <body style="background-color: ghostwhite;">

        <div style="margin: 10px;border:1px solid lightgray; background-color: #ffffff; height:390px;width: 750px">

            <div style=" height:350px;width:750px;">

                <img src="Image/Sunset.jpg" alt="" style="height: 350px;width: 750px"/>

            div>

            <div style="position: relative;float:left;">

                <a class="profilePic">

                <img src="Image/Water lilies.jpg" alt="" style="height: 160px;width: 160px"/>

            a>

            div>



        div>

    body>

html>

Regards,
Iftikar
0