Go Back  HTML Forums - Free Webmaster Forums and Help Forums > WEBSITE DEVELOPMENT > CSS
User Name:
Password:
 

Reply
Thread Tools   Display Modes
  View First Unread
 
Old 07-04-2009, 03:18 PM
  #1
wkid87
Novice (Level 1)
 
Join Date: Jul 2009
Posts: 2
iTrader: (0)
wkid87 is an unknown quantity at this point
Right Border not Aligning up and Whitespace

This is my first time to the forum. I'm working on a project for my class and I'm having two problems.

The first problem, the right border is not aligning up with the rest of the border. I also want the end points around the border to be rounded but we will worry on fixing the first issue first.

The second problem, I don't want any white space inside/around my two columns. I want the background of my columns to start right next to the border. This is a bigger issue in Firefox. How can I correct that?

Here is a link

https://umdrive.memphis.edu/jmgillum...pdate/hmm.html


CSS-style sheet


Code:
/* CSS Document */

body{
margin:0;
padding:0;

line-height: 1.5em;
}

b{font-size: 110%;}
em{color: red;}

#maincontainer{
width: 840px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}

#topsection{

background-image: url(img001.jpg);
	background-repeat: no-repeat;
   background-position: center;
  height:150px;
	 display: block;
    margin-left: auto;
    margin-right: auto;
}

#topsection h1{
margin: 0;
padding-top: 15px;
}

#contentwrapper{
float: left;
width: 100%;
border-right:4px solid blue;

border-left:4px solid blue;


}

#contentcolumn{

margin: 0 0 0 285px; 
background:#330000;




/*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
}

#leftcolumn{
float: left;
width: 280px; /*Width of left column in pixel*/

margin-left: -840px; /*Set margin to that of -(MainContainerWidth)*/
background: #C8FC98;

}



#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
border-top:4px solid blue;
}

#footer a{
color: #FFFF80;
}

.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;


}

Menu Style Sheet

Code:
/******   H3    */
ul#menu{
	margin:0;
	padding:0;
	list-style-type:none;
	width:auto;
	position:relative;
	display:block;
	height:36px;
	text-transform:uppercase;
	font-size:12px;
	font-weight:bold;
	background:transparent url("images/OFF.gif") repeat-x top left;
	font-family:Helvetica,Arial,Verdana,sans-serif;
	border-bottom:4px solid blue;
	border-top:1px solid blue;
}
ul#menu li{
	display:block;
	float:left;
	margin:0;
	pading:0;}
ul#menu li a{
	display:block;
	float:left;
	color:#6d7078;
	text-decoration:none;
	font-weight:bold;
	padding:12px 20px 0 20px;
	height:24px;
	
	}
ul#menu li a:hover{

	}

HTML


Code:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Univeristy of Memphis Mighty Sound of the Sound</title>
<link href="test.css" rel="stylesheet" type="text/css" />
<link  href="menu_style.css" rel="stylesheet" type="text/css" />


</head>
<body>
<div id="maincontainer">

  <div id="topsection"></div>
  <ul id="menu">
	<li><a href="home.html" target="_self" title="Home">Home</a></li>
	<li><a href="news.html" target="_self" title="News">News</a></li>
	<li><a href="bios.html" target="_self" title="Bios">Bios</a></li>
	<li><a href="members.html" target="_self" title="Members Only">Members Only</a></li>
	<li><a href="alumni.html" target="_self" title="Alumni">Alumni</a></li>
	<li><a href="links.html" target="_self" title="Other LInks">Other LInks</a></li>
</ul>

  <div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube">
  <p><b>Content Column: <em>Fixed</em></b>  </p>
  

Welcome to the Mighty Sound of the South's home page! The mission of the Mighty Sound of the South Marching Band is perform entertaining halftime and pre-game shows, and to provide energy and spirit at all events at which we perform. 

 




</div>
</div>
</div>

<div id="leftcolumn">
<div class="innertube"><b>Left Column 54443434443: <em>180px</em></b> </div>

</div>



<div id="footer">JMG Productionism</div>

</div>
</body>
</html>
wkid87 is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 07-06-2009, 12:45 PM
  #2
wkid87
Novice (Level 1)
 
Join Date: Jul 2009
Posts: 2
iTrader: (0)
wkid87 is an unknown quantity at this point
Tried to work on this over the weekend and still can't figure out what the problem maybe. I like the current design but are there any alternative methods that I can use.
wkid87 is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 07-06-2009, 03:06 PM
  #3
coothead
~ bald headed old fart ~
 
coothead's Avatar
 
Join Date: Aug 2003
Location: chertsey, a small town 25 miles south west of london, england.
Posts: 7,922
iTrader: (0)
coothead is a splendid one to beholdcoothead is a splendid one to beholdcoothead is a splendid one to beholdcoothead is a splendid one to beholdcoothead is a splendid one to beholdcoothead is a splendid one to beholdcoothead is a splendid one to behold
Hi there wkid87,

and a warm welcome to these forums.

Here is your page reworked and simplified somewhat...
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>Univeristy of Memphis Mighty Sound of the Sound</title>

<style type="text/css">
* {
    margin:0;
    padding:0;
 }
#maincontainer {
    width: 840px; 
    padding-top:150px;
    margin:auto; 
    background-image:url();
    background-repeat: no-repeat;
    background-position:center;
 }
#menu {
    height:36px;
    border-top:1px solid #00f;
    list-style-type:none;
    background-image:url();	
 }
#menu li {
    float:left;
 }
#menu a {
    display:block;
    line-height:36px;
    padding:0 20px;
    font-family:helvetica,arial,verdana,sans-serif;
    font-size:12px;
    font-weight:bold;
    color:#6d7078;
    text-transform:uppercase;
    text-decoration:none;
 }
#content {
    border:4px solid #00f;
    overflow:auto;
 }
#leftcolumn {
    float:left;
    width:260px; 
    padding:20px 10px; 
    background: #c8fc98;
 }
#rightcolumn {
    float:left;
    width:532px;
    padding:20px 10px;  
    background:#300;
 }
#rightcolumn p {
    line-height:1.5em;
    color:#f93;
    text-align:justify;
 }
#footer {
    padding:4px 0;
    background-color:#000;
    color:#fff;
    text-align:center;
 }
</style>

</head>
<body>

<div id="maincontainer">
<ul id="menu">
 <li><a href="home.html" title="Home">Home</a></li>
 <li><a href="news.html" title="News">News</a></li>
 <li><a href="bios.html" title="Bios">Bios</a></li>
 <li><a href="members.html" title="Members Only">Members Only</a></li>
 <li><a href="alumni.html" title="Alumni">Alumni</a></li>
 <li><a href="links.html" title="Other LInks">Other Links</a></li>
</ul>

<div id="content">

<div id="leftcolumn">
Left Column
</div><!-- end #rightcolumn -->

<div id="rightcolumn">
<p>
Welcome to the Mighty Sound of the South's home page! The mission of the 
Mighty Sound of the South Marching Band is perform entertaining halftime 
and pre-game shows, and to provide energy and spirit at all events at which 
we perform. The MSS, under the direction of Dr. Albert Nguyen, performs more 
than any other student ensemble on campus, and for approximately 350,000 
fans each fall.  The MSS is a frequent guest at community and corporate 
events, and performs for football, men's and women's basketball, select 
women's volleyball, and select men's soccer games. The MSS is featured at 
nearly every campus-wide event, ranging from Freshman Convocation to the 
Homecoming Parade and Pep Rally.  The band has been featured at the 2008 
NCAA Final Four - winning the "Battle of the Bands", on the nationally 
syndicated "Mike & Mandy" Radio Show, and is a star attraction at the 
Bandmaster's Championship, a high school marching band contest administered 
by The University of Memphis Band Alumni Chapter.  Members of the MSS 
represent all academic disciplines across campus, and is open to all students 
via audition - scholarships are available.  Come join the largest and loudest 
student organization on campus! For more information on becoming a part of the 
Mighty Sound of the South, contact Mrs. Carol Rakestraw at clrkstrw@memphis.edu 
or at 901.678.2263!
</p>
</div><!-- end #rightcolumn -->

</div><!-- end #content -->

<div id="footer">JMG Productionism</div>

</div><!-- end #maincontainer -->

</body>
</html>
Notes:-
1. I could not find your background-images, so have left the url empty.
2. You can, of course, pop the CSS into an external file.
__________________
coothead is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote

Reply
KEEP TABS
SPONSORS
 
Boxedart
 
 


 
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
  
 
 
 



 
  POSTING RULES
 
 
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Thread Tools
Display Modes

Forum Jump

 

All times are GMT -5. The time now is 01:36 AM.

   

Mascot team created by Drawshop.com

Powered by vBulletin® Version 3.6.7
Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.

Server Monitoring by ENIACmonitor 0.01
HTMLforums.com © Big Resources, Inc. Web Design by BoxedArt.com
vRewrite 1.5 beta SEOed URLs completed by Tech Help Forum and Chalo Na.