|
CSS - Css Stomping Over Text, And Footer Issue
Hi there,
I'm new to CSS, and I have stumbled myself to where I am now, but I have two issues which are causing me problems. You can see the problem he URL http://img.photobucket.com/albums/v227/Fynci/ffsargh.jpg The code I am using is: Code: <html>
<head>
<!-- TemplateBeginEditable name="doctitle" -->
<title>Rack & Ruin records</title>
<!-- TemplateEndEditable -->
<style type="text/css">
<!--
body {
margin: 0px;
padding: 0px;
background-color: #B8C0D1;
text-align: center;
width: 780px;
}
#header {
width: 100%;
}
#leftcol {
float: left;
width: 350px;
height: 500px;
}
#biographyinfo {
font-size: 80%;
text-align: justify;
padding-top: 10px;
}
#rightcol {
float: left;
width: 420px;
height: 500px;
}
#biography {
font-size: large;
color: #000000;
float: left;
width: 300px;
text-align: left;
}
#artistimage {
height: 300px;
width: 300px;
float: left;
padding-bottom: 10px;
}
#content {
float: left;
width: 30px;
height: 500px;
}
#artistname {
font-size: large;
color: #000000;
text-align: left;
padding-bottom: 10px;
}
#footer {
clear: both;
width: 100%;
}
#albumart {
float: left;
height: 100px;
width: 100px;
padding-right: 5px;
}
#artistnews {
font-size: 60%;
text-align: justify;
float: left;
width: 330px;
}
#links {
font-size: large;
color: #000000;
float: left;
width: 300px;
text-align: left;
padding-top: 10px;
}
#artistnewsheader {
font-size: large;
text-align: left;
width: 350px;
padding-top: 10px;
padding-bottom: 10px;
}
#Linksarea {
font-size: 80%;
text-align: justify;
padding-top: 10px;
}
#albmuinfo {
font-size: 60%;
height: 100px;
text-align: left;
width: 350px;
}
#otherheader {
font-size: large;
text-align: left;
width: 350px;
padding-top: 10px;
padding-bottom: 10px;
}
#othertext {
font-size: 60%;
text-align: justify;
float: left;
width: 330px;
}
-->
</style>
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
<link href="../new.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<div id="header"><a href="../index.html"><img src="../images/rackandruinlogo.gif" alt="Rack & Ruin records" width="780" height="127" border="0" /></a></div>
<div id="nav">
<ul>
<li><a href="../news.php">News</a></li>
<li><a href="../artists.php">Artists</a></li>
<li><a href="../releasesfull.php">Releases</a></li>
<li><a href="../live.php">Live</a></li>
<li><a href="../links.php">Links</a></li>
<li><a href="../about.php">About</a></li>
<li><a href="../contact.php">Contact</a></li>
<li><a href="http://www.myspace.com/rackandruinrecords" target="_blank">Myspace</a></li>
<li><a href="http://www.rackandruinrecords.com/forum/" target="_blank">Forums</a></li>
<li><a href="http://rsspect.com/rss/rackandruinrssfeed.xml" target="_blank">RSS</a></li>
</ul>
</div>
<div id="artistname"><!-- TemplateBeginEditable name="Name" -->Artist<!-- TemplateEndEditable --></div>
<div id="leftcol">
<div id="artistimage"><!-- TemplateBeginEditable name="Artistimage" --><img src="" alt="Artist" name="artistimage" width="300" height="300" class="imageborder" style="background-color: #B8C0D1"><!-- TemplateEndEditable --></div><div id="biography">Biography
<div id="biographyinfo"><!-- TemplateBeginEditable name="biography" -->Content for id "biographyinfo" Goes Here<!-- TemplateEndEditable --></div>
</div>
<div id="links">Links
<div id="Linksarea"><!-- TemplateBeginEditable name="Linksarea" -->Content for id "Linksarea" Goes Here<!-- TemplateEndEditable --></div>
</div>
</div>
<!--Left section -->
<div id="rightcol">
<div id="albumart"><!-- TemplateBeginEditable name="albumart1" --><img src="" alt="" name="albumart" width="100" height="100" style="background-color: #B8C0D1"><!-- TemplateEndEditable --> </div>
<div id="albmuinfo"><!-- TemplateBeginEditable name="albuminfo" -->Content for id "albuminfo" Goes Here <!-- TemplateEndEditable --></div>
<div id="gap"></div>
<div id="artistnewsheader"><!-- TemplateBeginEditable name="artistnewsheader" -->Artist News<!-- TemplateEndEditable -->
<div id="artistnews"><!-- TemplateBeginEditable name="artistnews" -->Content for id "artistnews" Goes Hee<!-- TemplateEndEditable --></div>
</div>
<div id="gap"></div>
<div id="otherheader"><!-- TemplateBeginEditable name="otherheader" -->Other<!-- TemplateEndEditable -->
<div id="othertext"><!-- TemplateBeginEditable name="othertext" -->Other text<!-- TemplateEndEditable --></div>
</div><!--Right section -->
<div id="gap"></div></div>
<div id="footer"><img src="../images/Base.gif" alt="Creative Commons" width="90" height="33" /><br />
<span class="footertext">(c) 2008/2009 <a href="mailto:dean@rackandruinrecords.com">D.Birkett</a></span></div>
</body>
</html>
and the new.css file is: Code: body {
background-color: #B8C0D1;
text-align: center;
width: 780px;
margin-right: auto;
margin-left: auto;
}
.dateinfotext {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: medium;
color: #000000;
}
a:link {
text-decoration: none;
color: #000000;
}
#nav {
background-color: #B8C0D1;
text-align: center;
padding: 10px;
margin-bottom: 10px;
}
#nav ul {
margin: 0px;
padding: 0px;
}
#nav li {
display: inline;
list-style-type: none;
margin-right: 10px;
margin-left: 10px;
}
#nav a {
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
font-size: 85%;
}
#nav a:hover {
color: #FFFFFF;
font-size: 85%;
text-decoration: none;
}
a:visited {
color: #000000;
}
a:hover {
color: #000000;
}
#gap2 {
text-align: center;
padding: 5px;
clear: both;
}
.albuminfo {
font-size: 60%;
}
a:active {
color: #000000;
}
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: medium;
}
.imageborder {
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: ridge;
border-right-style: ridge;
border-bottom-style: ridge;
border-left-style: ridge;
}
#gap {
text-align: center;
padding: 5px;
clear: both;
}
#footer {
text-align: right;
float: right;
margin-right: 30px;
margin-top: 30px;
margin-bottom: 150px;
vertical-align: bottom;
}
.texttop {
vertical-align: text-top;
}
a {
color: #000000;
text-decoration: none;
}
.footertext {
font-size: small;
}
.normaltext {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
text-decoration: none;
}
Any help or advice would be greatly appreciated! Similar TutorialsHey. I have coded a css layout and I got everything like I want it, EXCEPT the footer. I can't make it to follow the rest of the design. For example, I want it to be below the main content area all the time, for instance when the main content area expands, the footer stays at the same place? How can I make it follow the main content area? Html code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title><?php echo $websitetitle; ?></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <link href="lineweb.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="bg_left"> <div id="wrapper"> <?php include($path . "header.tpl.php"); ?> <table> <tr> <td> <div id="img_nav"> <a target="_blank" href="http://forum.l2web.org/"><img src="images/hq/comm_hq.png"></a> <a href="index.php?page=downloads"><img src="images/hq/client_hq.png"></a> </div> <div id="server_nav"> <a href="index.php"><img src="images/hq/home_hq.png"></a> <a href="index.php?page=howto"><img src="images/hq/connect_hq.png"></a> <a href="index.php?page=rankings"><img src="images/hq/rankings_hq.png"></a> <a href="index.php?page=statistics"><img src="images/hq/statistics_hq.png"></a> <a href="index.php?page=features"><img src="images/hq/features_hq.png"></a> <a href="index.php?page=contact-us"><img src="images/hq/contact_us_hq.png"></a> </div> <div id="page_contents"> <div id="get_page"> Footer should be below this content space </div> <div id="sidebar"> <table> <tr> <td class="user_cp_title"> <div style="side_bar_cont"> <center>User Control Panel </center></div> </td> </tr> <tr> <td class="user_cp_con"> <div class="user_cp_welcome">Welcome User!</div> <ul> <li class="user_cp_nav"> <a href="#">Control Panel </a></li> <li class="user_cp_nav"> <a href="#">Change Password </a></li> <li class="user_cp_nav"> <a href="#">Vote & Earn Points </a></li> <li class="user_cp_nav"> <a href="#">Vote Shop </a></li> <li class="user_cp_nav"> <a href="#">Change Email </a></li> <li class="user_cp_nav"> <a href="#">Delete Account </a></li> </ul> <div class="user_logout_question"><a href="index.php?page=logout">Logout?</a></div> </td> </tr> </table> </div> </div> <div id="footer"> Footer </div> </div> </div> </td> </tr> </table> <div id="footer"> FOoter </div> </body> </html> This is the css: Code: body{ background:url(images/hq/bgx2.jpg) top center no-repeat #020d1f; margin:0px; padding:0px; font-family: Arial, Helvetica, Sans-Serif; } .news_title { padding: 5px; float:left; } .news_texturing { padding: 5px; } .news_hq { padding-bottom: 8px; padding-top: 5px; } .news_by_n_time { font-weight: bold; color:#938d8d; background: #efefef; padding: 5px; min-width: 563px; max-width: 570px; border: 1px solid #d6d6d6; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .news_left { background: url(images/hq/news_left.gif) no-repeat; width: 12px; height: 33px; } .news_center { min-width: 570px; max-width: 570px; height: 33px; background: url(images/hq/news_center.gif) repeat-x; font-size: 15px; font-weight: bold; color:#FFFFFF; } .news_right { background: url(images/hq/news_right.gif) no-repeat; width: 12px; height: 33px; } img { border: 0px; } .forgot_pws_quest a:hover { color:#2e63b2; } .forgot_pws_quest a { top: 10px; color: #505050; } .forgot_pws_quest { font-size: 13px; font-family: 'Arial'; float:right; padding-left: 10px; } .user_login_btn { border: 0px; padding: 5px; height: 32px; width: 82px; background: url(images/hq/login_btn2.gif) no-repeat; font-family: 'Tahoma'; font-weight: bold; font-size: 14px; } a { color: #362c2c; } #bg_left { background: min-height: 1038px; } .user_logout_question { padding-top: 8px; padding: 5px; float:right; font-family: Arial; font-weight: bold; color:#4e4e4e; } .user_cp_title { width: 265px; height: 45px; background: url(images/hq/user_cp_title.png) top center no-repeat; padding: 8px; padding-top: 1px; font-family: Arial; font-weight: bold; font-size: 15px; color: #FFFFFF; } ul { padding: none; margin: 0; padding-left: 0; } .user_cp_nav ul { list-style: none; } #get_page { border-right: 1px dotted #cccccc; font-size: 13px; float:left; width: 593px; padding-right: 10px; padding-top: 10px; padding-left: 10px; } .user_cp_nav a { color: #362c2c; text-decoration: none; } .user_login_fields { margin-top: 4px; width: 230px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; font-family: Arial; font-size: 13px; font-weight: bold; border: 1px solid #a9a9a9; padding: 5px; } .user_cp_nav { margin-top: 4px; list-style-type: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; font-family: Arial; font-size: 13px; font-weight: bold; border: 1px solid #a9a9a9; padding: 5px; } .user_cp_welcome { padding-bottom: 5px; font-family: Arial; font-weight: bold; color:#9e9e9e; } .user_cp_con { padding: 5px; background-color:#f2f2f2; border: 1px solid #b0b0b0; } .side_bar_cont { padding: 10px; } #sidebar { padding-right: 10px; float:right; width: 260px; padding-top: 2px; } #wrapper { height: 800px; position: relative; width: 950px; margin:0 auto; } #footer { margin-bottom: 0px; position: relative; bottom:0; } #page_contents { background:url(images/hq/new_content.png) top center no-repeat #FFFFFF; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border: 5px solid #2f3e51; min-height: 478px; top: 405px; position: absolute; left: 10px; width: 895px; } #server_nav { position: absolute; left: 50px; top: 285px; } #img_nav { position: absolute; right: 50px; top: 330px; } .main_content { padding-bottom: 20px; position: absolute; width: 960px; } #main_content { margin-bottom: 20px; position: absolute; width: 960px; } #left-header a { text-decoration: none; } #left-header { position: absolute; padding-top: 8px; color: #FFFFFF; font-family: Arial; left: 35px; } #main-menu { padding-top: 5px; position:absolute; right: 50px; } #header { font-size: 13px; width: 500px; } #logo { float:left; padding-top: 50px; }
I am getting better with css but this issue is driving me mad, i have a nice simple layout, and have the footer so its always where it should be. But as soon as i try and have a two column layout in the middle it stops the footer being where it should and is only positioned in the actual window so when you scroll it does not stay at the footer. Here is the html Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Site</title> <link rel="stylesheet" type="text/css" href="../html/driving.css" /> </head> <body> <div id="container"> <!-- Header Starts Here --> <div id="header"> <img src="../html/images/logo.gif" width="480" height="180" alt="Crafty Cakes" style="vertical-align:top"/> </div> <!-- Content Holder Starts Here --> <div id="content"> <div class="left"> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> </div> <div class="right"> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> <p>Content</p> </div> </div> <!-- Footer Spacer Here --> <div id="spacer"> </div> <!-- Footer Starts Here --> <div id="footercontainer"> <div class="footer"> <ul> <li><a href="#">Link</a></li> </ul> <p><a href="#">Terms and Conditions</a></p> </div> </div> </div> </body> </html> And here is the css: Code:
/* CSS Style sheet */
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
font-family:arial,sans-serif;
font-size:small;
color:#666;
}
h1 {
font:1.5em georgia,serif;
margin:0.5em 0;
}
h2 {
font:1.25em georgia,serif;
margin:0 0 0.5em;
}
h1, h2, a {
color:orange;
}
p {
line-height:1.5;
margin:0 0 1em;
}
div#container {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:100%;
background-color: #ffffff;
background-image: url(inc/mainbackground.gif);
background-repeat: repeat-x;
background-position: center top;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
div#header {
position:relative; /* needed for footer positioning*/
width:1024px;
height: 230px;
margin:0 auto; /* center, not in IE5 */
}
div#header p {
font-style:italic;
font-size:1.1em;
margin:0;
}
div#content {
position:relative; /* needed for footer positioning*/
width:1024px;
margin:0 auto; /* center, not in IE5 */
padding:1em 1em 5em; /* bottom padding for footer */
height:100%;
}
div#content p {
text-align:justify;
padding:0 1em;
}
.left {
position:relative; /* needed for footer positioning*/
width: 200px;
float: left;
}
.right {
position:relative; /* needed for footer positioning*/
width: 700px;
float: right;
}
/* FOOTER */
div#footercontainer {
position:absolute;
width:100%;
height: 100px;
bottom:0; /* stick to bottom */
background-image: url(inc/footercontainer.gif);
background-repeat: repeat-x;
background-position: left top;
}
.footer {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:1024px;
height: 100px;
font: 12px Lucida Grande, Tahoma, sans-serif;
color: #ffffff;
background-image: url(inc/footer.gif);
background-repeat: no-repeat;
background-position: center top;
}
.footer ul {
list-style: none;
padding: 0;
margin: 0;
line-height: 40px;
}
.footer li {
display: inline;
margin: 0px;
margin: 0;
padding: 10px 10px 0px 10px;
}
.footer li a {
text-decoration: none;
color: #ffffff;
}
.footer li a:hover {
color: #000000;
}
.footer p {
padding: 0px 10px 0px 10px;
}
.footer p a {
text-decoration: none;
color: #ffffff;
}
.footer p a:hover {
color: #000000;
}
/* END footer */
I have tried all sorts, but it just will not work. The content div holds these columns as div classes. If I take the classes out and have the content div for content it works fine. Hey guys, Believe me, I did not come to these forums first thing when it didn't work. I've tried quite a bit trying to get a working sticky footer on the bottom of my page. I'm an amateur web designer, and it wasn't clear, I want to make a footer that sticks to the bottom of the page naturally, as any common footer would do. I've read through a number of different tutorials but none of them seem to work, so I figure there must be something wrong with my code. You can view my problem page he http://vivanidesign.com/testing/testz2.html Here is my CSS: Code: body {margin: 0px;height: 100%;}
.headerstyle1 {background-image: url(header_1classified.png); width: 957px; height: 191px; background-repeat: no-repeat;}
.headerstyle2 {background-image: url(header_3.png); height: 191px; background-repeat: repeat-x; margin-top: auto; margin-left: auto; margin-right: auto;}
.headerstyle3 {background-image: url(headercloud.png); width: 172px; height: 74px; position: absolute; left: 0; top: 0;}
.navwrapper {
width: 938px;
position: absolute;
right: 50%;
top: 400px;
padding-bottom: 200px;}
.navbar {background: #6cbdf0; background-repeat: no-repeat; width: 938px; height: 53px; margin-top: -170px; position: relative; left: 50%;}
.searchbarwrapper {width: 255px; position: relative; top: 0px; left: 1055px;}
.searchbar {background: #6cbdf0; background-repeat: no-repeat; width: 100%; height: 45px;}
.box1 {background: #e4f4ff; background-repeat: repeat-y; width: 220px; height: 350px; position: relative; left: 456px; top: -11px; float: left;}
.box2 {background: #aadaf9; width: 220px; height: 370px; position: relative; top: 20px; float: left; left: 487px;}
.box3 {background: #e4f4ff; width: 220px; height: 370px; position: relative; top: 20px; float: left; left: 500px;}
.box4 {background: #aadaf9; width: 248px; height: 220px; position: relative; top: 15px; float: left; left: 510px;}
.footer {position: relative;
margin-top: -150px;
height: 150px;
clear: both;}
.wrapper {min-height: 100%;}
And here is my HTML: Code:
<body>
<div class="wrapper">
<div align="center" class="headerstyle2">
<div class="headerstyle1"> </div>
</div>
<div class="headerstyle3"> </div>
<div class="navwrapper">
<div class="navbar"></div>
<div class="searchbarwrapper">
<div class="searchbar"> </div>
</div>
<div class="box1"> </div>
<div class="box2"> </div>
<div class="box3"> </div>
<div class="box4"> </div>
</div>
</div>
<div class="footer"></div>
</body>
So if someone could tell me how to get a working footer on this page I would appreciate it very much! Thank you! http://www.robertet.com/uk/contacts...ion/contact.php I am trying to emulate the footer that is in the page above. The footer works like this in three ways: 1 - It is always at the bottom regardless of the content 2 - If the page goes very long the footer will always stay a certain distance away from the body content 3 - If the content is short the footer will stay at the bottom of the screen I've spent a few days trying to break it down, but I still can't figure out what is making this work its magic. Resize your browser a bit and you'll see what I mean. You'll know what I am talking about if you are using a higher resolution. This fix must be cross browser compliant including ie6. Hi there, Was hoping somebody could help me. I've been working on a new footer for a company and have got a positioning issue with it. If the content of the page is rather long, it will go under the footer with the footer displaying over the top and the content carrying on below it rather than moving the footer down as long as it needs to. I've tried playing with the CSS of the DIV ID 'content' which the content sits in, and the DIV ID 'footertest' which is the footer and the below displays a test page that is the closed I have it to work. The long list of 'testing' at the bottom should obviously push the footer down not go underneath and beyond it down the page. The current CSS for 'content' and 'footertest' is as follows: #content { width: 512px; padding:3px; margin:5px; margin-left:18px; float: left; /*border:1px solid #000000;*/ } #footertest { background-image:url(/images/footertest.png); height:70px; width:951px; margin-left:14px; position:absolute; } I'm unable to post URLs yet so cannot provide the link to the test page I have setup. I've got a pretty basic layout: Code: <div id="wrapper"> <div id="LeftBar"></div> <div id="Header"></div> <div id="MainContentPane"> </div> <div id="Footer"></div> </div> The Footer runs the full width of the page. The Leftbar runs from the top of the page to the top of the Footer. The header runs from the right side of the Leftbar to the width of the wrapper. The MainContentPane runs from the right side of the Leftbar, bottom of the Header to the top of the Footer. The Leftbar contains a vertical graphic as a background and it does not contain any other content. I'm trying to figure out how to make the Footer sit tight to the bottom of what ever content is in the MainContentPane section and have the Leftbar not show below the Footer if the MainContentPane is vertically smaller then the background image in the Leftbar. The look of the page is pretty straight forward and common so if my explanation is confusing I apologize. TIA I'm having two issues with IE on my site. 1. IE is displaying the body background image (bg.jpg) throughout the entire page. 2. IE is pushing the sidebar way down. Neither of these issues exist in Firefox. I think the second issue may have something to do with the first issue. Here is the relevant code. Code: html,body * {
padding:0px;
margin:0px;
}
body {
background-image:url(images/bg.jpg);
background-repeat:repeat-x;
background-color:#fb7d21;
margin:0 auto;
height:100%;
}
div#container {
width:792px;
margin:0 auto;
background-image:url(images/filler.jpg);
background-repeat:repeat-y;
}
div#header {
width:792px;
height:109px;
background-image:url(images/header.jpg);
background-repeat:no-repeat;
margin-top:20px;
}
div#content {
float:left;
width:570px;
padding:0 0 0 10px;
margin-top:-40px;
}
div#sidebar {
float:right;
width:212px;
margin-top:-95px;
}
div#footer {
clear:both;
width:792px;
height:84px;
background-image:url(images/footer.jpg);
background-repeat:no-repeat;
}
You can see the issues on my site here. Any idea what is causing this? Thanks in advance. Hi, I am at a loss. I have a basic css webpage at websitehosting1.com/Tutorials.html when you go to the tutorials page that I created for my friends, the footer adds white space above it when I add text to the body. I want the left nav right nav and footer to be blue, but I can't figure this out. All help is appreciated. Thanks. E. Hey everyone, I have decided to start back designing websites and so went back to the basics of html and css. So far things are ok except for the footer that I'm trying to get to sit at the bottom of the page. What I have done: So far I've been able to set the footer as fixed so that as I scroll I'll always see the footer. I don't have a problem always seeing my footer, the problem is that it's hiding some of the text when it reaches the bottom. This is what I have so far (and the website is w3c validated and so are the css) my website code: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Home</title>
<link rel="stylesheet" href="css/shawnlynn.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/layout.css" type="text/css" media="screen">
</head>
<body>
<div class="wrapper">
<div id="header">
<img src="images/headerlynn.png" alt="header for Shawna Lynn">
</div><!-- end of header div-->
<ul id="navlist">
<li><a href="index.html" title="Home">Home</a>|</li>
<li><a href="about.html" title="About me">About Me</a>|</li>
<li><a href="blog.html" title="Blog">Blog</a>|</li>
<li><a href="services.html" title="services">Services</a>|</li>
<li><a href="clients.html" title="Clients">Clients</a>|</li>
<li><a href="contact.html" title="contact me">Contact Me</a></li>
</ul>
<hr>
<div id="maincontent">
<blockquote><h2><img src="images/celebration.png" title="Celebration Time" alt="celebration time image"></h2>
<p class="goldlinep">You have just struck gold! </p>
<p class="goldimage"><img src="images/gold-mine-icon.png" title="gold mine image" alt="gold mine image"></p>
<p class="goldlinep">A Standards-Compliant Website design like this is your personal Goldmine<br> Why not reap the benefits?!</p>
</blockquote>
</div><!--end of maincontent div-->
<div class="push"></div>
</div>
<div id="footer">
<p class="footerp">Copyright 2011- Shawna Lynn Creative Initiatives. Some images may be subject to copyright.</p> <br>
<p><a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.lynnfolio.cz.cc/original/" target="_blank"><img src="validation/valid-html401-blue.png" title="valid html" alt="valid html"> </a>
<img src="validation/vcss-blue.gif" title="valid css" alt="valid css"></p>
</div><!--end of footer div-->
</body>
</html>
The general css is: Code:
/**Layout**/
#header{
top:10px;
right: 0px;
left: 200px;
position:absolute;
background-color: #ffffff;
}
#header, #sidebar, #maincontent, #footer{
position: absolute;
}
#maincontent{
top: 245px;
left: 285px;
}
#footer {
bottom:0px;
position:fixed;
width:100%;
background-color: #0000ff;
height:50px;
padding-right:0px;
margin:0;
}
/*Layout */
.footerp{ color: #ffffff;
text-align:center;}
h2 {
font-family: "Trebuchet MS", sans-serif;
font-size: 2em;
}
.goldlinep {
font-family: "Trebuchet MS", sans-serif;
text-align:center;
font-size: 1.25em;
word-spacing: 1pt;
}
.goldimage {
padding-left: 200px;
}
p {
font-family: "Trebuchet MS",sans-serif;
color: #000000;
font-size: .9em;
text-align: justify;
}
blockquote {
text-align: center;
width: 650px;
background-color: #ffffff;
}
li {
font-family: "Trebuchet MS", sans-serif;
}
body {
background-color:#ffffff;
background-repeat: repeat;
min-width: 768px;
max-width: 1280px;
font-size: 12px;
}
#colordiff {
background-color: #9a32cd;
}
.colordiffp {
background-color: #fffacd;
}
/**Navigation**/
#navlist {
padding-top: 200px;
padding-left: 0px;
list-style-type: none;
font-size: 14px;
text-align:center;
}
#navlist li {
display: inline;
font-size: 1.25em;
}
#navlist a{
padding: 3px 15px;
}
#navlist a:link, #navlist a:visited {
color: #00ccff ;
}
#navlist a:hover {
color: #00ffff;
}
/**Navigation**/
/* About Us Page */
#centtable
{
width: 650px;
text-align: justify;
font-family: "Trebuchet MS", Arial, sans-serif;
}
/* About Us Page */
and my second css was specifically done to try and fix my footer: Code:
* {
padding: 0;
}
.wrapper {
min-height: 100%;
height: 100%;
}
.footer, .push {
height: 500px;
}
My second css is a modification of a sticky footer code: Code:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
What I would like to get: The footer across the entire bottom of the screen. (I currently have a 1-2px ugly white space to the left of it) The footer not covering any of the text. I am open to other options for putting in my footer. Sorry this is so long but since I'm new I cannot post direct links as yet Cheers PS other important information: Tested it on Firefox 3.6.x and IE 8 and got the same results/effect Hello, I've had an issue for a while where when the text on the page gets to a certain point it just overlaps the Copyright Information which I want to stay at the bottom of the page. --- (I did look at older forum posts, but with no resolve) --- In the CSS code, I have the copyright (a.k.a. .footerlinks) set with an "Absolute" Position which I know is probably "part of" or "the" problem, but if I change the Positioning the footer ends up on the top of the page or somewhere I don't want it. (** Unfortunately due to New Members not being able to post hyperlinks I am unable to give a link to the webpage or CSS page for viewing. **) But, I have included the code snippet I use for the Footer itself and the "container" and "body" code whether its needed..... body{ margin:0; text-align:center; background-color: #FFFFFF; } .container{ position: relative; width:965px; margin:0 auto 0; height: 100%; } .footerlinks{ position: absolute; top: 1140px; left: 237px; width: 551px; font-size: 75%; font-family: verdana; text-align: center; } CSS is quite new to me so be as specific as possible as to what I should be looking at changing in my code.... Your assistance is much appreciated! Thanks! Dan - Hello, I'm currently in the works of converting an old HTML site of mine into CSS and have run into what seems to be a notorious problem with the page text not pushing the footer down when the text gets to a certain length. Instead the text just covers and hides the footer. I've been trying to remedy this problem for about a week, but to no avail. I've Googled this problem and tried the suggested fixes, but once again have had no such luck. I'm left to believe that every instance is unique. If you view the Style Sheet, I have the 'footerlinks' set at an "Absolute" position because it looks fine on the other pages and I do relize this will have to be changed. As to what else has to be changed I would really appreciate some input as to what I need to do to get the footer to slide down when the text gets lengthy. ------- Here's a link to the page thats having issues with the footer... *** Note: I keep getting an error message saying I can't post URLs on this forum because I have a new user account so below this line is the link to the page I'm having trouble with without the http:// ........ infoheaven.bravepages.com/Testamonials/Testimonials.htm The URL to the STYLE SHEET is located at the top of the page between the "Head" tags of the website source code I provided above. I tried listing my CSS code here, but once again I kept getting the "New user accounts are not permitted to create posts containing URLs" error message. Sorry for the inconvenience.... Dan - I want to display text, image, videolinks in the header and footer images in my html with css.While header and footer images are displayed in the html , the intended text,image,videolinks are not displayed within the image block of header, footer.Will you please advise me the correct code in css, html to embed the text,image,videolinks inside the header and footer images. thanks I'm having trouble with my website structure... view this page for an example... css is here... The Footer (which currently consists just of the validation images) is suppossed to be at the bottom of the page... It works in IE except there is a little line between the images (it is also part of the link...), and it doesn't work at all in FF... how do I get rid of the line in IE, and what do I need to add or change in my css to get it to be viewed properly in FF? Thanks Bryan I have this header in my css. and i am trying to get the Text i put in there to position in the middle and left of the header. But nothing i do works. it even will not change size that i describe or color. here is the css for header and the text code. Code:
#topsection {
background: #EAEAEA url(images/png_logo.gif) no-repeat right center;
height: 90px;
}
span.htext {
font-color: #3300CC;
font-size: 30px;
text-decoration: none;
letter-spacing: 1px;
text-align: left middle;
}
anyone know how to fix this. I am having an issue with my text decoration for a link in a unordered list not being declared correctly. I have set the href link to text-decoration: none value, but it is still getting the declaration from the #gt_links tag. Why isn't it picking up the #gt_links li a tag. here is the code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>NONE</title>
<style>
#gt_links {
position: relative;
top: 139px;
height:auto;
width: 138px;
margin: auto;
font-size: 12px;
font-weight:bold;
color: #ffcc66;
text-decoration: underline; // believe is culprit
margin-top: 5px;
}
#gt_links li, ul {
margin: 0;
padding: 0;
list-style: none;
text-decoration:none;
}
#gt_links li a {
display: inline;
position: relative;
font-size: 10px;
font-weight: normal;
text-decoration: none;
color: #ffcc66;
}
#gt_links a {
display: inline;
position: relative;
font-size: 10px;
font-weight: normal;
text-decoration: none;
color: #ffcc66;
}
#gt_links a:hover{background:none;text-decoration:none;}
#gt_links li:hover{background:url(http:/static.grepolis.com/images/game/layout/menu_hover.png)no-repeat;}
</style>
</head>
<body>
<div id="gt_links">Grepolis Tools
<ul>
<li><a id="w_pref" href="#">Preferences</a><span style="color:#FFCC66;"> | </span><a id="w_help" href="#">Help</a></li>
<li><a id="w_toggle" href="#">Show/Hide</a></li>
</ul>
</div>
</body>
</html>
Yes I know if you pull it up it is very ugly. This is just the part of a page which is relative to my issue. Please help. Thanks I'm trying to get all the text lowercase on a page (client's wishes, not mine) I thought it was working just fine until I tried IE6 on a PC. I have a "text-transform: lowercase" in the body section of my css file. Visit this URL to see what I mean: http://matthiaslot.com/calendar On a mac, FF/Safari work great. On a PC, FF is great. IE however keeps things capitalized... Any idea? I'm pretty sure IE supports this...not sure what's going on. Thanks. Hi, I have a very odd IE6 issue occuring within my site which I hope someone can help me with. Here is my xhtml And here is my css I have commented both the relevant CSS and HTML with "TEXT PROBLEM IN IE" so you can find it quickly. Please ignore the functionality, this is very much in the development phase. The problem I have is that under the categories listed - in IE there are the letters "c" and "e" which seem to have been duplicated from the last category "executive office". If you select the "ce" in the browser you will see what I mean. This doesn't happen in FireFox etc. Cheers Good Day, I agreed to do a website for a friend and they have purchased a template that I have been working with. I am very new to CSS so I don't even understand some o the terminology. The best way to describe my problem is to show you what is happening to the text when it is added. This is what the page looks like with limited text: http://lisawesselsphotography.ca/services.html It looks ok from here This is what it looks like when a greater amount of text is inserted: http://lisawesselsphotography.ca/services-test.html Not so cool looking Here is my css: Code:
html, body {
height: 100%;
}
body {
margin: 0px;
padding: 0px;
background: #11121A url(images/bg1_01.jpg) repeat;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #5A5D6A;
}
h1, h2, h3 {
margin: 0px;
padding: 0px;
}
p, ol, ul {
margin-top: 0px;
}
ol, ul {
margin: 0px;
padding: 0px;
}
p {
line-height: 220%;
}
strong {
font-weight: normal;
color: #FFFFFF;
}
a {
color: #A40000;
outline: none;
}
a:hover {
text-decoration: none;
}
a img {
border: none;
}
img.border {
}
img.alignleft {
float: left;
padding-right: 25px;
}
img.alignright {
float: right;
}
img.aligncenter {
margin: 0px auto;
}
hr {
display: none;
}
ul.style1 {
margin: 0px;
padding: 0px 0px 0px 15px;
}
ul.style1 li {
padding: 3px 0px;
}
ul.style1 span {
color: #FFFFFF;
}
/** WRAPPER */
#wrapper-content {
background: url(images/bg1_02.jpg) repeat-x left top;
}
#wrapper {
background: url(images/bg1_05.jpg) repeat-y center top;
}
#wrapper-bgtop {
background: url(images/bg1_03.jpg) no-repeat center top;
}
#wrapper-bgbtm {
overflow: hidden;
padding-top: 132px;
background: url(images/bg1_04.jpg) repeat-y center bottom;
}
.homepage #wrapper {
background: url(images/bg3_03.jpg) repeat-y center top;
}
.homepage #wrapper-bgtop {
background: url(images/bg3_01.jpg) no-repeat center top;
}
.homepage #wrapper-bgbtm {
background: url(images/bg3_02.jpg) no-repeat center bottom;
}
.single #wrapper {
background: url(images/bg3_03.jpg) repeat-y center top;
}
.single #wrapper-bgtop {
background: url(images/bg2_01.jpg) no-repeat center top;
}
.single #wrapper-bgbtm {
overflow: hidden;
padding-top: 132px;
background: url(images/bg2_02.jpg) no-repeat center bottom;
}
.gallery #wrapper {
background: url(images/bg4_03.jpg) repeat-y center top;
}
.gallery #wrapper-bgtop {
background: url(images/bg4_01.jpg) no-repeat center top;
}
.gallery #wrapper-bgbtm {
overflow: hidden;
padding-top: 132px;
padding-bottom: 60px;
background: url(images/bg4_02.jpg) no-repeat center bottom;
}
.container {
width: 900px;
margin: 0px auto;
}
.clearfix {
clear: both;
}
/** HEADER */
#header {
}
/** LOGO */
#logo {
width: 300px;
height: 174px;
}
.homepage #logo {
width: 300px;
height: 350px;
}
#logo h1, #logo p {
margin: 0px;
line-height: normal;
text-indent: -9999em;
}
#logo h1 a {
display: block;
top: 0px;
left: 0px;
width: 950px;
height: 174px;
background: url(images/homepage02.png) no-repeat left top;
}
.homepage #logo h1 a {
display: block;
top: 0px;
left: 0px;
width: 950px;
height: 350px;
background: url(images/lisalogo1.png) no-repeat left top;
.logotext {float:right;}
}
/** MENU */
#menu {
height: 45px;
padding: 15px 0px 0px 40px;
}
#menu ul {
margin: 0px;
padding: 0px;
list-style: none;
line-height: normal;
}
#menu li {
float: left;
padding: 0px 30px;
}
#menu a {
float: left;
display: block;
height: 23px;
margin: 0px;
padding: 6px 0px 0px 0px;
line-height: 1;
letter-spacing: -1px;
text-decoration: none;
text-transform: uppercase;
text-shadow: #270000 -1px 2px 3px;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
color: #FFFFFF;
}
#menu a:hover {
text-decoration: underline;
}
#menu .active {
background: url(images/subpage1_02.jpg) repeat-x left top;
}
/** PAGE */
#page {
}
/** CONTENT */
#content {
}
.homepage #content {
height: 290px;
background: url(images/homepage022.jpg) no-repeat center top;
}
.gallery #content {
padding: 0px 45px;
}
.single #content {
padding: 100px;
}
/** SIDEBAR */
#sidebar {
}
/** FOOTER */
#footer-wrapper {
height: 200px;
background: url(images/bg1_06.jpg) no-repeat center top;
}
#footer {
padding-top: 40px;
}
#footer p {
margin: 0px;
padding: 0px 0px 0px 0px;
line-height: 220%;
color: #31343F;
}
#footer .column1 {
float: left;
width: 575px;
}
#footer .column2 {
float: left;
width: 50px;
height: 82px;
background: url(images/subpage1_03.jpg) no-repeat center top;
}
#footer .column3 {
float: right;
width: 275px;
text-align: right;
}
#footer .copyright {
padding-top: 5px;
font-size: 10px;
color: #252732;
}
#footer .copyright a {
color: #252732;
}
.box-style {
}
.box-style .title {
margin: 0px;
padding: 0px;
letter-spacing: -1px;
text-transform: uppercase;
font-size: 28px;
font-weight: bold;
color: #FFFFFF;
}
.box-style .byline {
margin: -10px 0px 30px 0px;
padding: 0px;
letter-spacing: -1px;
text-transform: uppercase;
font-size: 14px;
font-weight: bold;
color: #363945;
}
/* GALLERY */
#slideshow {
}
#gallery {
position: relative;
width: 804px;
height: 337px;
margin: 38px 0px 50px 0px;
}
#gallery .slide {
width: 634px;
height: 337px;
position: absolute;
left: 85px;
top: 0px;
background: url(images/gallery_01.jpg) no-repeat left top;
}
#gallery .output {
position: absolute;
top: 17px;
left: 17px;
}
#gallery .border {
width: 600px;
height: 300px;
position: absolute;
top: 17px;
left: 17px;
background: url(images/gallery_borders.png) no-repeat left top;
}
#gallery .captions {
width: 600px;
height: 55px;
position: absolute;
left: 17px;
top: 262px;
background: url(images/gallery_caption.png) repeat left top;
font: 12px Arial, Helvetica, sans-serif;
text-transform: uppercase;
}
#gallery .captions p {
margin: 0px;
padding: 22px 0px 0px 0px;
line-height: 1;
text-shadow: #000000 0px 2px 0px;
}
#gallery .captions .left {
float: left;
padding-left: 20px;
color: #FFFFFF;
}
#gallery .captions .right {
float: right;
padding-right: 20px;
color: #777777;
}
#gallery .prev, #gallery .next {
display: block;
width: 68px;
height: 106px;
position: absolute;
top: 116px;
text-indent: -9999em;
}
#gallery .prev {
left: 0px;
background: url(images/gallery_02.jpg) no-repeat left top;
}
#gallery .next {
right: 0px;
background: url(images/gallery_03.jpg) no-repeat left top;
}
#gallery-thumbnails {
width: 750px;
margin-left: 30px;
}
#gallery-thumbnails ul {
margin: 0px;
padding: 0px;
list-style: none;
text-align: center;
}
#gallery-thumbnails li {
float: left;
display: block;
width: 120px;
height: 60px;
padding: 15px;
position: relative;
}
#gallery-thumbnails img {
}
#gallery-thumbnails .border {
display: block;
width: 130px;
height: 70px;
position: absolute;
left: 10px;
top: 10px;
background: url(images/gallery_borders.png) no-repeat left bottom;
}
#gallery-thumbnails .active .border {
background-position: -130px 100%;
}
Alright, first post in a while, let me see if I can make this clear and simple so I can fix this issue. I am making a website for my history project. I have made the website solely by hand and using an HTML editor; I have quite a bit of knowledge in CSS and HTML, but really, this is a great learning process for me. The website design is laid out in table form. There are just two columns, a sidebar and the main content column. The text causes the table to be stretched out (you can see this by changing the border to "1" and viewing the table. However, when the main text strechtes the table, the side bar moves with it, settling in the center of the smaller column. The entire thing creates a problem like this: My History Website The source code for the site can be checked through your browser, or if you are too lazy, this is what I have written: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>History Through The Ages: 1865-1900</title>
<meta name="generator" content="TextMate http://macromates.com/">
<meta name="author" content="Ethan Mick">
<!-- Date: 2008-05-21 -->
<!-- I will eventually put this style sheet into its own external CSS file.-->
<style type="text/css">
<!--
body {
background:gray;
}
p {
color:white;
text-align:left;
position:top;
text-indent:1cm;
vertical-align:top;
}
h2 {
color:black;
text-align:center;
}
.sidebar {
position:relative;
}
.ads {
display:block;
margin-left:auto;
margin-right:auto;
}
.imageright {float:right;}
.imageleft {float:left;}
-->
</style>
</head>
<body>
<img src="file:///Volumes/FAT32DATA/OmniEthan/School/US%20&%20World/History%20Logo.jpg" title="History Through The Ages" alt="History Logo" width="800">
<table width="800" border="0">
<tr>
<td width="150" height="300">
<a class="sidebar" href="file:///Users/Ethan/Sites/History%20Website/Historysite.html">Home</a><br /><br />
<a href="file:///Users/Ethan/Sites/History%20Website/1856-1900.html">1865-1900</a><br />
<a href="file:///Users/Ethan/Sites/History%20Website/1901-1920.html">1901-1920</a><br />
<a href="file:///Users/Ethan/Sites/History%20Website/1921-1940.html">1921-1940</a><br />
<a href="file:///Users/Ethan/Sites/History%20Website/1941-1960.html">1941-1960</a><br />
<a href="file:///Users/Ethan/Sites/History%20Website/1961-1980.html">1961-1980</a><br />
<a href="file:///Users/Ethan/Sites/History%20Website/1981-2000.html">1981-2000</a><br />
<a href="file:///Users/Ethan/Sites/History%20Website/2001-Current.html">2001-Current</a><br />
<a href="file:///Users/Ethan/Sites/History%20Website/Bibliography.html">Bibliography</a><br />
<a href="file:///Users/Ethan/Sites/History%20Website/Genealogy.html">Mick Family Genealogy</a><br /><br />
<a href="http://www.mozilla.com/en-US/firefox/"><img class="" border="0" alt="Firefox 2" title="Firefox 2" src="http://sfx-images.mozilla.org/affiliates/Buttons/firefox2/firefox-spread-btn-1b.png"/></a>
</td>
<td width="*">
<h2>Emerging from the Civil War to the turn of the century<br />1865 to 1900</h2>
<img class="imageright" src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/DeadUnionsoldiercivilwar.jpg/250px-DeadUnionsoldiercivilwar.jpg" title="A dead soldier in Petersburg, Virginia 1865. Photograph by Thomas C. Roche">
<p>The United States emerged as a whole country from the Civil War, thanks to Abraham Lincoln and the union army, although not without consequences. Over half a million people were killed in the war. The United States' primary goal at this point was reconstruction from the war, and a lot of work had to be done in the south.</p>
<p>This time period set up the United States for many years to come. During the reconstruction the United States began to industrialize, creating thousands of miles of new infrastructure, and machinating a lot of jobs which had to be done by hand before. The industrialization allowed huge corporations to be formed, like Standard Oil created by John D. Rockefeller in 1870 and Carnegie Steel Company created by Andrew Carnegie in the mid 1870's, many of which gained a monopoly in the market. The industrialization allowed the United States to get back onto her feet quicker, as the new businesses could gain a lot of income by exporting their goods on the new infrastructure.</p>
<p>The South wasn't happy about losing the war, and it wasn't happy about being back in the union. During reconstruction many groups of people made clandestine acts against the government, and some others made their attacks public, such as the KKK. The reconstruction acts involved the dismantling of southern governments, and the southern states were only allowed to have their own government after the majority swore a loyalty oath to the Union, and they ratified the new amendments, the 13th, 14th, and 15th. Even then, once the southern people regained their own governments, everything that the North had been fighting for, rights of African-Americans, were largely ignored, and the African-Americans had to suffer even more discrimination. To make matters worse, the courts ruled in Plessy vs. Ferguson that segregation was legal on the premises of "separate but equal."</p>
<img class="imageleft" src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/14/USS_Maine_h60255a.jpg/300px-USS_Maine_h60255a.jpg" title="USS Maine - Wikimedia Commons">
<p>To heal the scars which had been formed in the Civil War, the United States decided to jump aboard the imperialistic boat, and attacked the weakened Spanish empire, fighting Spain for Peurto Rico, the Philippines, Guam, and Cuba. The war was extremely single sided, with the United States decimating the Spanish fighters on almost all fronts. The only interesting points of the war was the Philippines and Cuba. In the Philippines, native freedom fighters had been fighting the Spanish for a long time, and they viewed the Americans as saviors coming to help their cause. However, when it became apparent that the American's weren't going to leave, they became angry and fought us as well. In Cuba, Roosevelt would lead the "Rough Riders" to fight the against the spanish with some Cuban help.</p>
<p>My family on both sides was in the United States at this point, but I am not positive where they were. My family was not seriously affected by the segregation and racism partaking in the south during this time; indeed, my ancestors who moved to the United States in 1730 opposed slavery. Seeing the cruelly and imbalance in South Carolina, where they landed, they moved to Illinois. This affected Grandma Lori, my mother's mom, and her attitude on life.</p>
</td>
</table>
<img class="ads" src="file:///Users/Ethan/image_1.png">
</body>
</html>
I recently added the "sidebar" class, trying to bring the links up, as you can see with the one I tested it on. Didn't work. I have tried other ideas, but I nothing worked. Also, if you have some advice (that doesn't require me completely rewrite the site) feel free to ring it by me. So my question is, without doing anything repetitive or stupid, and preferably with CSS, how can I cause the text (the links) in the sidebar to align to the top of the page, and make it look nice. If you need more information, lemme know. I'm new with this image sprite method, at least with the type of image I have copied. I have it mostly working, but for some reason it word wraps the two word text that appears over the image. Here is a link to the example: ... EDIT: It seems I can't post a URL. I'll try on the second post. It is located in the Test Data tab on this product page. The button that says View More. View on one line, More on the other. I'm thinking it is an issue with my HTML more than the CSS. I've tried many different variations with not much like. I can break it more, but can't seem to fix it. Any help or guidance is appreciated. |
|||||||