CSS Drive forums | Hoping for an assist

Hoping for an assist

Posted: 21 December 2010 12:01 PM

[ Ignore ]

Newbie

Total Posts: 2

Joined 2010-12-21

I’m a Navy Chief who is out to sea, and I’m trying to redesign my website while I’m gone. I’ve run into a little trouble after making a few changes. I can’t get my picture to come up to align at the top (with the sidebar). The code for the style sheet (which would be style_sheets/main.css is below:

html, body {
    margin: 0;
    padding: 0;
    border: 0;
    height: 100%;
}

body {
    background-color: #fff;
    color: #000000;
    font-size: 90%;
    font-family: Verdana, Geneva, sans-serif;
    text-align: center;
    position: relative;
}

a {
    color: #001d31;
    font-weight: bold;
}

a:hover {
    color: #001d31;
    text-decoration: none;
}

h1 {
    font-size: 1.4em;
    font-family: Georgia;
    color: #000000;
    margin: 0;
    padding-top: 3px;    
    padding-bottom: 2px;
}

h2 {
    font-size: 1.0em;
    font-family: "Trebuchet MS";
    color: #000000;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
}

h3 {
    font-size: 0.9em;
    font-family: "Trebuchet MS";
    margin: 0;
    padding-bottom: 8px;
}

h4 {
    font-size: 0.8em;
    font-family: "Trebuchet MS";
    color: #191970;
    text-transform: uppercase;
    margin: 0;
    padding-bottom: 8px;
}

p  {
    margin: 0;
    padding-bottom: 8px;
}

hr {
    clear: both;
    height: 1px;
    border-top: solid 1px #001d31;
}

img {
    border: none;
}

#wrapper {
    margin: 0 auto;
    width: 733px;
    text-align: left;
    height: 100%;
}

#head {
    background-color: #f0f8fa;
    height: 90px;
    color: #A2ADB9;
    border: 1px solid #c0c0c0;
}

#head div {
    float: left;
    clear: right;
    height: 65px;
}

#logo {
    width: 185px;
}

#logo a {
    display: block;
    color: #c0c0c0;
    padding: 30px 10px 10px 10px;
    font-size: 32px;
    letter-spacing: 0;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
}

#slogan {
    width: 474px;
    border-left: 1px solid #c0c0c0;
    text-align: center;
}

#slogan span {
    display: block;
    padding: 28px 0 0 14px;
    font-size: 38px;
    letter-spacing: -2px;
    color: #000000;
}

#side {
    padding-bottom: 0px;
    width: 165px;
    background-color: #f0f8fa;
    height: 120px;
}

#menu {
    padding: 0;
    margin: 0;
    border: 1px solid #c0c0c0;
}

#menu a {
    text-decoration: none;
    color: #ffffff;
    display:block;
}

#menu ul {
    padding: 0 0 0 0;
    margin: 0;
    list-style: none;
}

#menu li {
    margin: 0;
    padding: 0;
    font-size: 11px;
    font-family: Arial;
}

#menu ul li a {
    margin-top: 0px;
    padding: 0 15px;
    height: 21px;
    line-height: 21px;
    font-weight: bold;
    color: #000000;
    background-color: #f0f8fa;
    text-transform: uppercase;
    border-top: 1px solid #c0c0c0;
    border-bottom: 1px solid #c0c0c0;
}

#menu ul li ul li a {
    margin-top: 0;
    padding: 0 25px;
    height:19px;
    color: #ffffff;
    line-height: 19px;
    font-weight:normal;
    text-transform: capitalize;
    background-color: #f0f8fa;
    border-top: 1px solid #c0c0c0;
    border-bottom: 1px none #c0c0c0;
}

#menu ul li ul li ul li a {
    padding: 0 35px;
    background-color: #f0f8fa;
    background-image: none;
}

#menu li li li li a {
    padding-left: 50px;
}

#menu ul li ul li ul li ul li a {
    background-color: #f0f8fa;
    background-image: none;
}

#ads {
    padding: 0;
    margin: 0;
    background-color: #f0f8fa;
    font-size: 12px;
    color: #000000;
    border: 1px solid #c0c0c0;
}

#ads a {
    color: #ff69b4;
}

#ads dt {
    padding: 0;
    margin: 6px;
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
}

#ads dd {
    margin: 0;
    padding: 6px 12px;
    border-bottom: 1px solid #ffffff;
    font-size: .8em #000;
    border-bottom: 1px solid #c0c0c0;
    line-height: 1.2em;
}

#body {
    float: right;
    margin-top: 3px;
    width: 548px;
    clear: both;
    position: relative;
}

#visual {
    position: relative;
    margin: 0;
    height: 425px;
    background-image: url(../images/visual.jpg);
    background-repeat: no-repeat;
}

#visual span {
    padding-left: 10px;
    color: #ffffff;
}

#content {
    position: relative;
    float: left;
    padding-right: 14px;
}

#content ul {
    padding: 0;
    margin: 1;
    list-style: none;
}

#content li {
    margin: 0;
    padding: 0;
    font-size: 12px;
    font-family: "Trebuchet MS";
}

#fourcells {
    clear: both;
}

#fourcells div {
    float: left;
    font-size: .9em;
    font-weight: normal;
    clear: right;
}

#fourcells a {
    display: block;
    width: 162px;
    height: 95px;
    margin-bottom: 10px;
    
}

#fourcells span {
    display: none;
}

#cell_1 {
    width: 162px;
    padding-right: 15px;
    padding-left: 5px;
}

#cell_1 a {
    background-image: url(../images/justyce.jpg);
}

#cell_1 a:hover, #menu li a.active {
    background-image: url(../images/babyjustyce.jpg);
}


#cell_2 {
    width: 162px;
    padding: 0 15px 0 15px;
    border-left: 1px solid #001d31;
    border-right: 1px solid #001d31;
}

#cell_2 a {
    background-image: url(../images/devin.jpg);
}

#cell_2 a:hover, #menu li a.active {
    background-image: url(../images/babydevin.jpg);
}

#cell_3 {
    width: 162px;
    padding-left: 15px;
    border-right: 1px solid #001d31;
}

#cell_3 a {
    background-image: url(../images/boy.jpg);
}

#cell_3 a:hover, #menu li a.active {
    background-image: url(../images/babyboy.jpg);
}

#cell_4 {
    width: 162px;
    padding-left: 15px;
}

#cell_4 a {
    background-image: url(../images/colbilyn.jpg);
}

#cell_4 a:hover, #menu li a.active {
    background-image: url(../images/babycolbilyn.jpg);
}

#foot {
    clear: both;
    padding: 1em;
    background-color: #f0f8fa;
    font-size: .8em;
    line-height: 1.4em;
    text-align: center;
    position: relative;
    border: 1px solid #c0c0c0;
}

#foot2 a:link {
    color: #ffffff;
} 

I will have to post the HTML file in a reply so that someone can help.

Profile

NavyChief

Posted: 21 December 2010 12:11 PM

[ Ignore ] [ # 1 ]

Newbie

Total Posts: 2

Joined 2010-12-21

Here’s the HTML file:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<link rel="stylesheet" href="style_sheets/main.css" type="text/css" media="screen" />
</head><body>
<div id="wrapper">
<div id="head">
<div id="logo">
<a href="#" title="Company name"><span>2011</span></a>
</div><div id="slogan">
<span>Luke and Mary's World</span>
</div>
</div>
<div id="side">
<div id="menu">
<ul>
<li>
<a href="#">Home</a>
<li>
<a href="galleries.html">Photo Galleries</a>
<li>
<a href="#">Family Pages</a>
<li>
<a href="#">Memory Pages</a>
<li><a href="http://www.lukeandmarysworld.com/guestbook/index.php">Our Guestbook</a></li>
<li><a href="http://del.icio.us/lucas.himebaugh">Luke's Links</a></li>
</ul>
</li>
</ul>
</div><dl id="ads">
<dt>
<a href="http://stayanchoredinhope.com" target="_blank"><img src="images/anchor_pink.jpg" target="_blank" alt="Luke's Blog" /><br /></a>
</dt><dd>
<p>Read Luke's Blog about his 60-Mile adventures and everything in life.</p>
</dd><dt><a href="http://stayanchoredinhope.org" target="_blank"><img src="images/anchor_gold.jpg" 

alt="Stay Anchored in Hope Design" /><br /></a>
</dt><dd>
<p>Visit Stay Anchored in Hope Design.
</p>
</dd><dt>
<img src="images/3-day_logo.gif" alt="Support Luke's 3-Day Adventures" /><br />
</dt><dd>
<p>Although Luke was deployed, he walked the 2010 San Diego 3-Day for the Cure&trade; on the 

Treadmill on his ship.  You can donate to <a href="http://www.the3day.org/goto/stayanchoredinhope" target="_blank">Luke's</a> participation in 

the 2011 series.  <br>
</p>
</dl>
</div><div></div>
<div id="body">
<div id="visual">
<span>Family Picture (Wedding Photo), April 2010</span>
</div><div id="content">
<h1>The Story of the Himebaugh Family</h1>
<hr noshade="noshade" size="1" />
<p>Luke and Mary met at Luke's best friends' wedding in 2004 and have been close friends ever since. 

They kept in contact and grew incredibly close throughout the years.</p>
<p>In 2009, when Luke and the girls went back to Michigan, Luke and Mary hit it off so well in person that they decided to throw caution into the 

wind, with Mary and Devin moving out to California to join Luke and the girls as family.</p>
<p>In November, after Mary had been at every Cheering Station during Luke's quest to walk 120 miles for Breast Cancer over a two-week span, Luke 

got down on one knee at the last Cheering Station and proposed to Mary.  Mary said "yes" and they got married in April, back in their homestate 

of Michigan.</p>
<p>In May, following their wedding, they found out that Mary was pregnant and they are now expecting another son in January, 2011.  In July 2010, 

Luke adopted Devin as his own son, making their family complete under one surname.</p>
<p>Please be a gracious guest and sign our guest book since you stopped by, we'd love to know your thoughts.
</div></div>
<hr noshade="noshade" size="1" />
<div id="fourcells">
<div id="cell_1">
<a href="#" title="Justyce">
<span>Justyce</span>
</a><p>Justyce is in Middle School and is on the Honor Roll. She plays drums in school band and 

the keyboards at the School of Rock. She is also in Girl Scouts.<br></p>
</div><div id="cell_2">
<a href="#" title="Devin">
<span>Devin</span>
</a><p>
Devin is two years old old and is enjoying life in California.  He loves dinosaurs, airplanes and his sissies.<br><br></p></div>
<div id="cell_3"><a href="#" title="Baby Boy">
<span>Baby Boy</span>
</a><p>Baby boy is due on  January 27th, 2011.  <br><br><br><br> <br></p></div>
<div id="cell_4"><a href="#" title="Colbi Lyn">
<span>Colbi Lyn</span></a><p>Colbi Lyn is in Elementary School and in the Gifted and Talented Education program at 

school.  She loves puzzles, enjoys music and plays softball. <br></p></div>
</div>
<div id="foot"> Copyright &copy; 2010-2011 <a href="http://stayanchoredinhope.org/">Stay Anchored in Hope Design</a> 
<br><em>Stay Anchored in Hope Images</em> by <a href="mailto:falconartdesign@att.net">Falcon Art and Design</a>; Family photo by <a 

href="http://www.facebook.com/?ref=home#!/pages/Photos-By-Michelle/280012880515?ref=ts" target="_blank">Photos by Michelle</a>
<br><em>Last Updated January 1<sup>st</sup>, 2011</div>
</div>
</body>
</html> 

Thank you for any help you can provide!!!

Profile

mansontome

Posted: 23 December 2010 03:05 PM

[ Ignore ] [ # 2 ]

Newbie

Total Posts: 2

Joined 2010-12-23

I am Ms Jeneva. I have a little shop in our area. Day by day it is elaborated and I can not maintain it alone. At this case I need a assist. I will give the well payment for this job.

SEO Services

Profile

‹‹ come and have a look css question... links and hover ››