Problem with removing bullets and aligning text

Discussion in 'Web Design and Development' started by bntz313, Mar 12, 2009.

  1. bntz313 macrumors 6502

    Joined:
    Jul 11, 2007
    #1
    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!!
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    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.
     
  3. bntz313 thread starter macrumors 6502

    Joined:
    Jul 11, 2007
    #3
    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!!
     
  4. miles01110 macrumors Core

    miles01110

    Joined:
    Jul 24, 2006
    Location:
    The Ivory Tower (I'm not coming down)
    #4
    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;
     } 
     
    
     
  5. bntz313 thread starter macrumors 6502

    Joined:
    Jul 11, 2007
    #5
    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
     
  6. miles01110 macrumors Core

    miles01110

    Joined:
    Jul 24, 2006
    Location:
    The Ivory Tower (I'm not coming down)
    #6
    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.
     
  7. memco macrumors 6502

    Joined:
    May 1, 2008
    #7
    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.
     

Share This Page