Trouble with CSS
Question:
I am trying to develop a website that looks like the graphic below. This url shows how my page is rendering: http://www.servingatthecrossroads.org/SATCv4/index.asp.
I can’t figure out what I’m doing wrong with the Follow Our Progress column. How do I get it to be next to the Meet Our Patients column rather than below it?
Code Snippet:
FROM INDEX.ASP
==============================
<body>
<div id=”bodycontentstop”>
<div id=”logo”></div> <!– end div logo –>
<div id=”menu”>
<ul>
<li>Home</li>
<li>|</li>
<li>About Us</li>
<li>|</li>
<li>Projects</li>
<li>|</li>
<li>Patient Stories</li>
<li>|</li>
<li>Photo Gallery</li>
<li>|</li>
<li>Contact Us</li>
</ul>
</div> <!– end div menu –>
<div id=”healthcare”>
<img src=”images/LaEntrada.jpg” alt=”La Entrada” width=”414″ height=”126″ align=”left” />
<h1>Bringing Healthcare to Honduras</h1>
<p>Each year <strong>Serving at the Crossroads</strong> provides medical supplies, equipment and healthcare professionals to their clinic founded in La Entrada Honduras.</p>
<h4>» learn more </h4>
</div>
<!– end div healthcare –>
<div id=”donations”>
<p>DONATIONS</p>
<div id=”donationstext”>
<p>Your contributions will make a difference in the lives of our Honduran brothers and sisters.</p>
<p> </p>
<h4>» learn more </h4>
<h4>» donate now </h4>
</div> <!– end div donationstext –>
<p>CONTACT US</p>
<p>1-800-888-8888</p>
<h4>» contact us with email</h4>
</div> <!– end div donations –>
<div id=”maincontent”>
<div id=”meetpatients”>
<h5>MEET OUR PATIENTS</h5>
<img src=”images/OurPatients.jpg” width=”150″ height=”100″ alt=”Our Patients” />
<p><strong>Patient Stories</strong></p>
<p>There are life altering stories behind some of the activities taking place at the clinic that we would like to share with you.</p>
<h4>» read more </h4>
</div> <!– end div meetpatients –>
<div></div> <!– end div clearing –>
<div id=”progress”>
<h5>FOLLOW OUR PROGRESS</h5>
<img src=”images/OurProgress.jpg” width=”183″ height=”100″ alt=”Our Progress” />
<p><strong>Our Clinic Projects</strong></p>
<p>There are life altering stories behind some of the activities taking place at the clinic that we would like to share with you.</p>
<h4>» read more </h4>
</div><!– end div progress –>
</div> <!– end div maincontent –>
</div> <!– end div bodycontentstop –>
FROM SATC.CSS
================================
@charset “utf-8″;
/* CSS Document */
/*************************************************
* HTML Formatting
**************************************************/
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #858585;
background-color: #C8C8C8;
}
hr {
padding: 0px;
}
h1 {
color: #a61f26;
font-family:Arial, Helvetica, sans-serif;
font-size:22px;
padding: 0px;
margin: 0px;
}
h4 {
color: #a61f26;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
padding: 0px;
margin: 0px;
}
h5 {
color: #858585;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding: 0px;
margin: 0px;
margin-bottom: 5px;
}
/*************************************************
* Page Formatting
**************************************************/
#bodycontentstop {
width: 800px;
margin: 0 auto;
background-color: #FFFFFF;
border: 2px solid #c8c8c8;
border-bottom: 0px solid #ffffff;
padding: 10px;
padding-bottom: 0px;
padding-top: 0px;
}
#bodycontentsbottom {
width: 800px;
margin: 0 auto;
background-color: #FFFFFF;
padding: 10px;
padding-top: 0px;
padding-bottom: 0px;
}
/* used to clear all of the header elements */
.clearing {
clear: both;
}
#healthcare {
border-top-color: #858585;
border-top-style: solid;
border-top-width: thin;
border-bottom-color: #858585;
border-bottom-style: solid;
border-bottom-width: thin;
height: 130px;
padding-top: 3px;
padding-bottom: 2px;
}
/*************************************************
* Page Header: Menu, Logo
**************************************************/
#menu {
text-align: center;
}
#menu li {
display:inline;
color: #858585;
font-size: 11px;
padding-left: 3px;
padding-right: 3px;
}
a.menuitem {
padding-top: 3px;
margin: 0 auto;
text-decoration: none;
color: c8c8c8;
}
a.menuitem:hover {
color: #EB1C22;
}
#logo {
background-image: url(“images/SATCLogo.gif”);
background-repeat: no-repeat;
margin: 0 auto;
height: 126px;
width: 265px;
margin-bottom: 10px;
}
/*************************************************
* Formatting classes
**************************************************/
.pad5 {
padding: 0;
padding-left: 5px;
padding-right: 5px;
}
.rightalign {
text-align: right;
}
.centeralign {
text-align: center;
}
.learnmore {
color: #a61f26;
}
/*************************************************
* Donations formatting
**************************************************/
#donations {
width: 146px;
height: 156px;
background-color: #b3b3b3;
float: left;
margin-top: 15px;
}
.h1donations {
font-size: 14px;
font-weight: bold;
text-align: left;
padding-left: 15px;
margin: 0px;
padding-top: 15px;
color: #5a5a5a;
}
#donationstext {
border-top-color: #FFF;
border-top-style:solid;
border-top-width:thin;
margin-left: 15px;
margin-top: 3px;
padding-top: 3px;
margin-right: 5px;
}
#donationstext p {
margin: 0px;
color: #FFF;
font-weight: bold;
font-size: 11px;
}
.contactus {
font-size: 10px;
font-weight: bold;
margin: 0px;
margin-left: 0px;
margin-top: 15px;
}
.contactusphone {
font-size: 16px;
font-weight: bold;
margin: 0px;
margin-left: 0px;
margin-bottom: 15px;
}
/*************************************************
* Main Content formatting
**************************************************/
#maincontent {
border-left-color: #dadada;
border-left-style: solid;
border-left-width: thin;
margin-left: 160px;
margin-top: 15px;
}
.maincontentcolor {
color: #858585;
}
/*************************************************
* Meet Our Patients formatting
**************************************************/
#meetpatients {
width: 150px;
margin-left: 5px;
}
/*************************************************
* Follow Our Progress formatting
**************************************************/
#progress {
width: 183px;
margin-left: 165px;
}
Solution:
There are many ways to accomplish this. In this case, I would probably absolutely position the divs to a specified layout. You could also use floats to align everything next to each other.
Without floats, you can get rid of the ‘clearing’ div. Give #maincontent a width and a position of relative.
then, let’s say the two picture blocks are 150px wide. You would have to adjust some of the numbers, but something like this:
#maincontent { position: relative; width: 640px; }
#meetpatients { positon: absolute; top: 0px; left: 0px; width: 150px; margin: 10px; }
#progress { position: absolute; top: 0px; left: 160px; width: 150px; margin: 10px 0 10px 10px; }
#newsgroup { position: absolute; top: 0px; left: 330px; width: 300px; margin: 10px 0 10px 10px; }
(No Ratings Yet)
Loading ...
Comments (0)
Trackbacks - Pingbacks (0)
Leave a Reply