HTML FACEBOOK COVER PIC

Question

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???

Attachment: profilepic.zip

Iftikar Hussain · 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

Iftikar Hussain · Answer

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

Iftikar Hussain · Answer

this is a just a style...you can modify (like border color etc) it if you want Regards Ifitkar

David Smith · Answer

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

Iftikar Hussain · Answer

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

David Smith · Answer

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 .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; }

Iftikar Hussain · Answer

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

David Smith · Answer

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. }

David Smith · Answer

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.

David Smith · Answer

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 ;

Iftikar Hussain · Answer

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