Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Help with my web design

A

AllieNeko

macrumors 65816
Original poster
Sep 25, 2003
1,004
57
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
 
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.
 
Terrador said:
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.
Click to expand...

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;
}
 
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
 
Last edited:
markie said:
StefSSU,

BEAUTIFUL - thank you times a million!!!!
Click to expand...

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.
 
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...
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back