Help with my web design

Discussion in 'Web Design and Development' started by AllieNeko, Mar 9, 2011.

  1. AllieNeko macrumors 6502a

    Joined:
    Sep 25, 2003
    #1
    Hey, everybody, I'm making a simple sight for my newly-rebranded face painting business. I JUST started making the site about an hour ago, so I know it's not good yet - anyways, I need help with the border. I want to create a 3px black border around the top, right, and bottom sides of the magenta area:

    http://mangokitteh.com/

    This was created on Dreamweaver CS3 for Mac using one of it's templates, and I can't for the life of me figure out how to put a border around that area... if you look at site you'll get a good idea what I'm trying to accomplish. Maybe someone who knows HTML/CSS can even tell me what to do?

    Thanks a zilliion!

    Mark
     
  2. Terrador macrumors regular

    Joined:
    Aug 22, 2008
    #2
    Find what that div or table cell is called and then look for that name in the CSS file (or CSS section of code if you don't have a separate file). Then inside the brackets for that name put:

    border-top: 3px solid black;
    border-right: 3px solid black;
    border-bottom: 3px solid black;


    I could explain it better if I could see the code for the page.
     
  3. harpster macrumors regular

    Joined:
    Jan 26, 2010
    #3
    You can see that page, just go to his page it and look at the source, all the css is there, it's not on an external stylesheet. Actually I did that and it's not a simple matter of adding those borders. The pink area where he wants the borders is made in part by the header and sidebars. There is a lot of relative positioning & margins that make it more complex.

    Here is the css for the container div. You can change the pink color #EB008B to another with no problem but if you add borders they will not line up at the edges. I'm sure there is a way to do it but it's' going to take more time or css knowledge than I have.


    Code:
    twoColHybRtHdr #container {
    	width: 735px;  /* this will create a container 80% of the browser width */
    	background: #EB008B; /* the auto margins (in conjunction with a width) center the page */
    	border: 3px solid #000000;
    	text-align: left; /* this overrides the text-align: center on the body element. */
    	margin-top: 0;
    	margin-right: auto;
    	margin-bottom: 0;
    	margin-left: auto;
    } 
     
  4. StefSSU, Mar 9, 2011
    Last edited: Mar 9, 2011

    StefSSU macrumors regular

    Joined:
    Jul 18, 2009
    Location:
    London
    #4
    As was said, the problem is that the pink area isn't defined.
    To do this, create a div around the mainContent in the html code, called container2.

    Near the bottom of the html code, between the <body> and </body> tags you should find the div for "mainContent". So where you see this:

    Code:
    <div id="mainContent"> 
        	<h1>Face Painting & More!</h1> 
        	<p>MangoKitteh Face Art & Temporary Tattoos is fun, safe, and affordable entertainment for your next birthday party, company picnic, fundraiser, auction, charity event, kids’ day, or other event. We use only safe, non-toxic, hypo-allergenic makeup and we not only paint, we entertain. A crowd usually develops around face painting and temporary tattoos, making these activities a highlight of your event not only for kids - but for teens, families, and everyone else!</p> 
        	<p>I have been face painting in the Kalispell, Montana area since 2007, and I also serve Missoula, Polson, Whitefish, Columbia Falls, Bigfork, Eureka, West Glacier, and the surrounding area. Please call or email me today for a price quote for your event! You can reach me at 406-314-0362 or <a href="mailto:mark@mangokitteh.com">mark@mangokitteh.com</a>. I look forward to working with you to make your next event a success!</p> 
        	<p>Fun Faces,<br /> 
         	 Mark Uhde</p>
        	<!-- end #mainContent --> 
      	</div> 
    Write the new div container2 around it, like so:

    Code:
    <div id="container2">
      	<div id="mainContent"> 
        	<h1>Face Painting & More!</h1> 
        	<p>MangoKitteh Face Art & Temporary Tattoos is fun, safe, and affordable entertainment for your next birthday party, company picnic, fundraiser, auction, charity event, kids’ day, or other event. We use only safe, non-toxic, hypo-allergenic makeup and we not only paint, we entertain. A crowd usually develops around face painting and temporary tattoos, making these activities a highlight of your event not only for kids - but for teens, families, and everyone else!</p> 
        	<p>I have been face painting in the Kalispell, Montana area since 2007, and I also serve Missoula, Polson, Whitefish, Columbia Falls, Bigfork, Eureka, West Glacier, and the surrounding area. Please call or email me today for a price quote for your event! You can reach me at 406-314-0362 or <a href="mailto:mark@mangokitteh.com">mark@mangokitteh.com</a>. I look forward to working with you to make your next event a success!</p> 
        	<p>Fun Faces,<br /> 
         	 Mark Uhde</p>
        	<!-- end #mainContent --> 
      	</div> 
      </div>
    Now, up in the code, between the <style type="text/css"> and </style> tags, you should make this:

    Code:
    #container2 {
    	position: relative;
    	border-top: 3px solid #000000;
    	border-right: 3px solid #000000;
    	border-bottom: 3px solid #000000;
    	width: 532px;
    	height: 704px;
    	margin-right: 0px;
    	margin-bottom: -22px;
    }
    Finally, also between the <style type="text/css"> and </style> tags, where you see this:

    Code:
    .twoColHybRtHdr #mainContent {
      margin: 0 13em 0 10px; /* the left margin's value is equal to the header and footer which creates alignment down the left side of the document. */
    } 
    add a new line between the braces, to make this:

    Code:
    .twoColHybRtHdr #mainContent {
      margin: 0 13em 0 10px; /* the left margin's value is equal to the header and footer which creates alignment down the left side of the document. */
      margin-right: 10px;
    } 
    It is a bit of a work around, but that should do the trick. Let me know if you have any problems. I've uploaded the entire new html/css code to my cloud.app, here's the link if you want to see it, or just copy-paste it. newCode.html
     
  5. AllieNeko thread starter macrumors 6502a

    Joined:
    Sep 25, 2003
    #5
    StefSSU,

    BEAUTIFUL - thank you times a million!!!!
     
  6. StefSSU macrumors regular

    Joined:
    Jul 18, 2009
    Location:
    London
    #6
    No problem. I have to say, I much prefer the site now that you've got rid of that old background! A word of warning though, I can't test it at the moment but I'm concerned about how my border solution may look like in Internet Explorer... Give it a try yourself, if you can. IE always seems to play funny.
     
  7. AllieNeko thread starter macrumors 6502a

    Joined:
    Sep 25, 2003
    #7
    Thanks, I will test it next time I have access to a Windows computer. Yeah, the first background was too busy. It's still just a placeholder site until I have time to design something that took more than an hour LOL...
     

Share This Page