Problem with removing bullets and aligning text

bntz313 · Mar 12, 2009

OK, I'm designing my portfolio with html/css and this is my first time. So far it's coming out nice, the contact links doesn't work yet. And I need to shrink the thumb nails in my portfolio section.

Here's my question: When I use the list-style-type option it doesn't take out the bullets. What should I do?

HTML:

<div id="about_me">
		<div class="post">
			<h1 class="title">About<strong>Me</strong></h1>
			<div class="entry">
            	<ul>
           	  		<li><strong>Name:</strong> Anthony Betancourt</li>
              		<li><strong>What:</strong> Graphic/Web Designer, Student</li>
              		<li><strong>Edu:</strong>  Herny Ford Community College, Specs Howard School of Broadcast Arts</li>
                    <p>Hello, I’m Anthony Betancourt and I currently attend Henry Ford Community College for graphic design. After HFCC I plan on attending Wayne State University for my BFA degree. I love to design! Researching different designers, typefaces, and art is something I enjoy to do with my free time. Currently, I’m a freelance graphic designer, student. I enjoy reading National Geographic and get a lot of inspiration from there. I’ve been into global change, nature, and world religions lately, so I’ve made a couple environmental posters that I’m going post around town and campus, so look out!.</p>
      			</ul>
			</div>

CSS

HTML:

#about_me {
	float: right;
	width: 900px;
}

.post {
	margin: 0px 0px 30px 0px;
}

.post .title {
	margin: 0px;
	background: #444444 url(images/img02.jpg) no-repeat left 50%;
	padding: 7px 25px;
	font-size: 1.4em;
}

.post .title h1 {
}

.post .entry {
	padding: 0 20px;
	list-style-type: none;

	
}

.post .byline {
	margin: 0px;
	padding-left: 20px;
}

My other question was how to align text(description) with the pictures on the home page with a vertical line between?

Thanks a lot!!

angelwatt · Mar 12, 2009

For the 1st question:

Code:

.post .entry [B][COLOR="Red"]li[/COLOR][/B] {
	padding: 0 20px;
	list-style-type: none;
}

The 2nd question I'm not quite sure what you're asking. Do you happen to have a link or a screen shot you can show? It may help clear it up.

bntz313 · Mar 12, 2009

yeah sorry.

Portfolio

The homepage, the pictures are links setup to open in a light box. I wanted to have a description on the right of the thumb nails.

Thanks!!

miles01110 · Mar 12, 2009

Try this; you might not need the "wrapper" div. There are no vertical lines in HTML, so I find the best way to do it is just to put a div of width 1px (or whatever) in between the other 2 divs. You can modify pretty much any pure-CSS 3-col layout to do this.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>test</title>
	<meta name="generator" content="BBEdit 9.1" />
	<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>

<body>

<div id="wrapper">

	<div id="left">
	left
	</div>
	
	<div id="center">
	
	</div>

	<div id="right">
	right
	</div>


</div>

</body>
</html>

CSS:

Code:

#wrapper {
    width:800px;
    height: auto;
    padding:10px 0;
    border:1px solid #000;
    margin:auto;
    background-color: #eeeeee;
 }
 
#wrapper:after {
    content:'';
    display:block;
    clear:both;
 }
 
#left {
	background-color: #aaaaaa;
    float:left;
    display:inline; /*required by IE6*/
    width:384px;
    height: 205px;
    margin:0 5px 0 10px;
    text-align: center;
 }
 
 #center{
 	float: left;
 	background-color: #000000;
 	width: 1px;
 	height: 205px;
 }
 
#right {
	background-color: #aaaaaa;
    float:right;
    display:inline; /*required by IE6*/
    width:384px;
    height: 205px;  /* Can be set to anything */
    margin:0 10px 0 5px;
    text-align: center;
 }

bntz313 · Mar 12, 2009

Ok, so that worked to get the line but when I try to type text it doesn't align to the right between the line and thumbnail to the left

miles01110 · Mar 12, 2009

Could you post a screen shot?

Since they are separate divs if you were to order your thumbnails in the column on the left you would have to manually determine how far apart you want to pad each paragraph in the right column.

memco · Mar 12, 2009

I suggest this:

HTML:

<div class="thumbnail">
<a href="images/the_most.gif" rel="lightbox[most_beautiful]" title="The Most Beautiful Women Ever!"><img src="images/the_most_thumb.gif" height="211" width="243" alt="The Most Beauitul" /></a>
<p class="img_description">This image is...</p>
</div>

CSS:

Code:

.thumbnail a {float:left;margin:.5em;}
.thumbnail p {margin:.5em;border-left:1px solid rgb(68,68,68);}

This will give you a border between the image and the paragraph. You can adjust the distance by adjusting the margins, you can adjust the width of the line by adjusting the "1px" of the border to any width, and the color by changing the rgb(). Also, if you want the line to span the full height of the image, move the border into the style on the a rather than the p.

Search

Search

Problem with removing bullets and aligning text

bntz313

macrumors 6502

angelwatt

Moderator emeritus

bntz313

macrumors 6502

miles01110

macrumors Core

bntz313

macrumors 6502

miles01110

macrumors Core

memco

macrumors 6502

Our Staff