collbrankid Posted October 12, 2007 Share Posted October 12, 2007 I am creating a staff information page on my website that I have created using CSS. I want small profile pictures by each profile paragragh for all of the officers in my club: http://people.brandeis.edu/~nwkaplan/staff.html So, I want the pictures to align perfectly with the profile paragraphs, and I thought a table might do the job... Can I do this without using a table? Is there some CSS trick to align the pictures with the paragraphs? Thanks in advance, Noah Quote Link to comment Share on other sites More sharing options...
SuperBlue Posted October 15, 2007 Share Posted October 15, 2007 I am creating a staff information page on my website that I have created using CSS. I want small profile pictures by each profile paragragh for all of the officers in my club: http://people.brandeis.edu/~nwkaplan/staff.html So, I want the pictures to align perfectly with the profile paragraphs, and I thought a table might do the job... Can I do this without using a table? Is there some CSS trick to align the pictures with the paragraphs? Thanks in advance, Noah Dont use tables, its easy. Just make the images float to the left. Examble: <img src="ProfilePicture.png" alt="Profile Picture" name="Profile Picture" style="Float: left;"> I havent had a in-depth look at your code, but you might need to display your paragraphs as a block, and give them a fixed width. Examble: <p style="display:block;width:250px;"></p> Ofcause it will make things easier to keep the things in a stylesheet, but this is just some off-hand code. Quote Link to comment Share on other sites More sharing options...
bronzemonkey Posted October 15, 2007 Share Posted October 15, 2007 Don't do that and don't use inline styles either. HTML <div class="item_staff"> <img class="photo_staff" src="the/link/to/photo.jpg" alt="Photo Description"> <p><strong>Name and position of staff memeber.</strong> Staff paragraph about.</p> </div> Stylesheet .item_staff { position:relative; padding-left: 120px; } /*either*/ .photo_staff { position:absolute; top:0; left:20px; } /*or*/ .photo_staff { float:left; margin-left:-100px; } I prefer absolute position because of some problems that IE6 can throw up with negative margins. Quote Link to comment Share on other sites More sharing options...
SuperBlue Posted October 15, 2007 Share Posted October 15, 2007 Edit:Sorry, replayed to the wrong post. Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted October 15, 2007 Share Posted October 15, 2007 Whoa! Um, you should actually create an html document before attempting to debug any css layout elements. This, is no way to go about in web life, son: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <link type="text/css" rel="stylesheet" href="parastyle1.css"> <title>Brandeis University : Business Club</title> <style type="text/css"> body {background-color: #213AB5;} </style> <div class="container2"> <div class="container"> PROPER HTML document structure. DOCTYPE, html tag, head tag, title tag, meta tags, link to css, close head tag, body tag, web content HERE, close body tag, close html tag. Without a proper structure, your page is something that every browser will have to assume as html (and display as it can best guess). Here is what that page needs (at minimum): <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <link type="text/css" rel="stylesheet" href="parastyle1.css"> <title>Brandeis University : Business Club</title> <style type="text/css"> <!-- body {background-color: #213AB5;} --> </style> </head> <body> <div class="container2"> <div class="container"> etc. etc. Blah, blah blah. </body> </html> Once you fix your HTML structure, we can help work on your css. Dave Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.