|
CSS - Footer Not Staying In Its Place
Hello. This is the first time I've tried a complete CSS layout, and I just have one bothersome problem.
I have everything inside a #container div. I have a min-height set for the container, since in Firefox if I don't have that it just wraps the border around the background image. No matter where I put the footer div, it hangs over the min-height border. However, if I put footer inside another tag called content ( #content #footer { ) it does stay in. But I don't even have a content div in the css! I'm so confused. *lol* Furthermore, by using Float for the navigation div instead of absolute positioning, it shows up with several pixels difference between IE and Firefox. If anyone could help me with this, I would be much obliged. The page is he http://frenziedsilence.com/nygiml/index.php And the CSS: http://frenziedsilence.dom/nygiml/nygiml.css thanks in advance.. -kathryn Similar TutorialsHi Everyone, I've been trying for weeks now to get my footer to sit at the bottom of my screen. I've read all of the how-to articles regarding footers and tried what seems like everything! After some investigation with Firebug I've determined that my problem seems to be some of my "wrapper" divs. My container and pagewrapper divs should be encompassing everything on the screen but they are not. If you wouldn't mind taking a look for me, I would REALLY appreciate it. Right now I have the grey footer just chillin' in the middle of the page as you can see. www.RoundtopRiders.com/v2/ THANK YOU!!! Jason Hey, I have a slight problem... http://www.thecolonyrp.net/chris/hca/ The banner is only partially uploaded, just to let you know why there is just a strip. As you can see, the div on the left aligns left, the div in the middle goes to the middle, and the right div goes right. For SOME reason, the container ignores the left div, the right div gets pushed out of the container, and the center div is just right. Goldy Lox anyone? On top of that, in order for me to make my middle div go middle, I have to cheat and use the margin. Is there any way to perfectly center this? I don't know what's wrong. My style page is : http://www.thecolonyrp.net/chris/hca/style.css I thought I closed a div tag too early or something, but I couldn't figure it out. I think I just need a second set of eyes. And this website has to be done ASAP. Can anyone help me? Thanks. This is probably a dumb question, but I have a div, with a floated image inside. When the div doesn't have enough text inside to make it taller than the image, the image will stick out the bottom of the div. I've attached a couple of images to show what's happening. I want div to stretch around the image at all times, even if there's only one line of text next to it. Code:
<html>
<head>
<style>
body {
width: 800px; /* change this value */
margin: 20px auto;
}
#container {
border: 1px solid #f00;
padding: 10px;
}
.floatright {
float: right;
margin: 10px;
background-color: #aaf;
}
</style>
</head>
<body>
<div id="container">
<h3>some latin text</h3>
<p>
<img class="floatright" src="some_image.jpg" width="100" height="150" alt="Image" />
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat. Duis autem vel eum iriure dolor in
hendrerit in vulputate velit esse molestie consequat,
vel illum dolore eu feugiat nulla facilisis at vero eros et
accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla
facilisi.
</p>
</div>
</body>
</html>
I have a two column layout. The left-hand column consists of three elements stacked on top of one another. The right-hand column is a little more complicated. I'm having a problem where when I apply float:left to the bottom item in the left-hand column, it screws everything up and all of the stuff from the right-hand column jumps down below the left-hand column stuff. When that bottom item in the left-hand column doesn't float-left, the stuff in the right-hand column stays to the up and to the right where it's supposed to be. The problem is that I need this bottom item to float:left (it's this semi-complicated thing with an extra border around it), but I also of course need the stuff in the second-column to behave correctly. Is there something I can do to make it so the stuff in the right-hand column doesn't jump down to the left no matter what? I think I might be missing something obvious here to make the two columns truly separate. Link: bitbonton [dot] com For some odd reason, the %100 height on the left column does not seem to work ... the dotted line ends after the content. Also, there is another problem where if the scroller bar appears on the right because the content is too long, it pushes everything leftward. tried to move the content a bit more to the left, but it seems to remain centered? Thank you for your help! I've been working on a CSS style for a web site, and I've got a small issue with the right hand column not staying within the bounds of the screen. When using a tool to see where the div's borders the right is about 200 px going off the right of the screen, making the screen horizontally scrolling. I am not a CSS expert. I know enough to get around, but this I don't understand. (I might have posted too much, but I figured if someone needed something more, it's already all there.) Thanks for any assistance that can be provided. HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Experience Inc. - Warren and Forest Counties Office of Aging</title>
<link href="css/grey_style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header">
<span style="float:left;">
<img src="images/logo.gif" />
</span>
<span style="float:right;">
<div style="text-align:center">
<div id="outerFirst"><a href="index.php"><span>Home</span></a></div>
<div id="outerFirst"><a href="index.php"><span>Services</span></a></div>
<div id="outerFirst"><a href="index.php"><span>Senior Centers</span></a></div>
<div id="outerFirst"><a href="index.php"><span>Calendar / Menu</span></a></div>
<div id="outerFirst"><a href="index.php"><span>Trips / Events</span></a></div>
<div id="outerFirst"><a href="index.php"><span>About / Contact</span></a></div>
</div>
</span>
</div>
<div class="CellBackGround">
<table width="100%">
<tr>
<td> </td>
</tr>
</table>
</div>
<div id="pictureContainer">
<div id="largeHomeText">
Warren and Forest Counties Area Agency on Aging
</div>
<div class="together">
<img src="images/home_image_bar/image1.jpg" />
<img src="images/home_image_bar/image2.jpg" />
<img src="images/home_image_bar/image1.jpg" />
</div>
</div>
<div class="CellBackGround">
</div>
<div id="wrapper">
<div id="content">
</div>
</div>
<div id="navigation">
<p>
</p>
</div>
<div id="extra">
</div>
<div id="footer">
<p>This is the footer area. </p>
</div>
</body>
</html>
CSS Code:
body {
font-family: "Times New Roman", Times, serif;
font-size: 12pt;
font-style: normal;
font-weight: normal;
color:#FFFFFF;
background-color:#666666;
margin-left:0;
margin-top:0;
margin-right:0;
}
#header {
width: 100%;
background-color: #666666;
overflow:auto;
vertical-align:top;
height:auto;
}
#menu {
height: 54px;
margin: 3em 0;
padding:0 1em;
border-bottom: 0px solid black;
overflow:inherit;
}
#outerFirst {
float: left;
width: 90px;
height: 130px;
margin: 0 0px 0 0;
background: url( '../images/greyFirst.gif' ) 0 -50px no-repeat;
}
#outerFirst a {
cursor: pointer;
display: block;
margin: 0; padding:0;
width:90px;
height:54px;
overflow:hidden;
font-family: Arial;
font-size:0.7em;
font-weight:normal;
color:#FFFFFF;
text-decoration: none;
background: url( '../images/greyFirst.gif' ) top left no-repeat;
}
#outerFirst span {
height: 54px;
display: block;
margin:0;
padding: 25px 0px 0px 0px;
}
#outerFirst a:hover {
width:90px;
height:54px;
background: url( '../images/greyFirstRoll.gif' ) top left no-repeat;
color: yellow;
}
#outerFirst a:active {
background: url( '../images/greyFirstRoll.gif' ) top left no-repeat;
}
.CellBackGround {
height:2px;
background: url('../images/redPixel.gif') center center;
}
.CellBack2 {
background: url('../images/redPixel.gif') center center;
}
#pictureContainer {
width:100%;
background-color:#666666;
overflow:auto;
height:95px;
}
#largeHomeText {
color:#999999;
font-size:13pt;
float:left;
padding-top:74px;
padding-left:3px;
}
.together img {
padding: 0;
margin: 0;
border: 0;
display: inline;
float: right;
overflow:hidden;
}
#mainTextContaner {
color:#660000;
margin-left:-5px;
}
#footer {
color:#666666;
}
/* This code is straight from http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners-boxes.shtml */
.bl {background: url(../images/bl.gif) 0 100% no-repeat #FFFFFF; width: 45%;}
.br {background: url(../images/br.gif) 100% 100% no-repeat}
.tl {background: url(../images/tl.gif) 0 0 no-repeat}
.tr {background: url(../images/tr.gif) 100% 0 no-repeat; padding:10px}
.clear {font-size: 1px; height: 1px}
/* This code is straight from http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners-boxes.shtml */
.bl2 {background: url(../images/bl.gif) 0 100% no-repeat #FFFFFF; width: 35%;}
.br2 {background: url(../images/br.gif) 100% 100% no-repeat}
.tl2 {background: url(../images/tl.gif) 0 0 no-repeat}
.tr2 {background: url(../images/tr.gif) 100% 0 no-repeat; padding:10px}
a:link {
font-size: 14pt;
color:#999999;
}
a:hover {
font-size: 14pt;
color:#660000;
}
a:visited {
font-size: 14pt;
color:#999999;
}
#news {
background: url(../images/news.jpg) 100% 0 no-repeat;
width:370px;
height:600;
}
div#wrapper{
float:right;
margin-right:-30%;
width:99%;
}
div#content{
margin-right:30%;
border-left:2px solid #FFFFFF;
border-left-color:#660000;
padding-left:10px;
padding-right:10px;
height:400px;
padding-top:10px;
}
div#navigation{
float:left;
width:32.9%;
padding-top:10px;
}
div#extra{
float:left;
clear:left;
width:32.9%;
padding-top:10px;
}
p{
margin:0 10px 10px
}
div#footer{
clear:both;
border-top:2px solid;
border-top-color:#660000;
border-bottom:2px solid;
border-bottom-color:#660000;
text-align:left;
color:#FFFFFF;
}
div#footer p{
margin:0;
padding:5px 10px;
width:10%;
}
Hoping that this is a no-brainer to someone here! Here is a sample of the code for my menu using suckerfish: Code:
<ul class="menu sf-menu sf-horizontal sf-js-enabled">
<li class="parent item3">
<span class="separator"><span>Dealer Info</span></span>
<ul style="display: none; visibility: hidden;">
<li class="item13">
<a href=""><span>About Us</span></a>
</li>
</ul>
</li>
</ul>
Top-level and sub-level nav are both working great, but you will notice when you hover down to the sub-level menu items, the top-level text goes back to white, making it impossible to read... Here is the css code for my menu: Code:
/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
margin: 0;
padding: 0;
list-style: none;
font-weight: bold;
}
.sf-menu {
line-height: 1;
}
.sf-menu ul {
position: absolute;
top: -999em;
width: 10em; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
width: 100%;
}
.sf-menu li:hover {
visibility: inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
float: left;
position: relative;
}
.sf-menu a {
display: block;
position: relative;
font-weight: bold;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
left: 0;
top: 24px; /* match top ul list item height */
width: 127px;
z-index: 99;
background: url(../images/subnav-bg.png) no-repeat left bottom;
padding: 2px 0 24px;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
left: 10em; /* match ul width */
top: 0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
left: 10em; /* match ul width */
top: 0;
}
/*** DEMO SKIN ***/
.sf-menu {
float: left;
margin: 5px 0 0 32px;
}
.sf-menu a {
color: #FFF;
text-decoration: none;
display: block;
}
.sf-menu .separator {
cursor: pointer;
display: block;
}
.sf-menu .separator:hover {
cursor: pointer;
color: #000;
text-decoration: none;
}
.sf-menu li:hover > li,
.sf-menu li:hover > a {
color: #000;
}
.sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/
}
.sf-menu a:hover {
color: #000;
text-decoration: none;
}
.sf-menu li {
text-align: center;
text-transform: uppercase;
background: url(../images/nav-bg.png);
height: 19px;
line-height: 19px;
width: 122px;
margin: 0 1px;
font-size: 11px;
}
.sf-menu li li {
background: none;
font-size: 11px;
}
.sf-menu li li li {
}
.sf-menu li:hover, .sf-menu li.sfHover {
background: url(../images/nav-bg-over.png);
}
/*
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
background: url(../images/nav-bg-over.png);
}
*/
.sf-menu li li:hover, .sf-menu li li:hover a {
background: none;
color: #000;
}
/*** arrows **/
.sf-menu a.sf-with-ul {
padding-right: 2.25em;
min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
position: absolute;
display: block;
right: .75em;
top: 1.05em; /* IE6 only */
width: 10px;
height: 10px;
text-indent: -999em;
overflow: hidden;
background: url('../images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
a > .sf-sub-indicator { /* give all except IE6 the correct values */
top: .8em;
background-position: 0 -100px; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
background-position: -10px -100px; /* arrow hovers for modern browsers*/
}
/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator { background-position: -10px 0; }
.sf-menu ul a > .sf-sub-indicator { background-position: 0 0; }
/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator,
.sf-menu ul a:hover > .sf-sub-indicator,
.sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li:hover > a > .sf-sub-indicator,
.sf-menu ul li.sfHover > a > .sf-sub-indicator {
background-position: -10px 0; /* arrow hovers for modern browsers*/
}
/*** shadows for all but IE6 ***/
.sf-shadow ul {
background: url('../images/shadow.png') no-repeat bottom right;
padding: 0 8px 9px 0;
-moz-border-radius-bottomleft: 17px;
-moz-border-radius-topright: 17px;
-webkit-border-top-right-radius: 17px;
-webkit-border-bottom-left-radius: 17px;
}
.sf-shadow ul.sf-shadow-off {
background: transparent;
}
Can anyone tell me what the rule is to keep that top level text black when I hover below? 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 Hi, after having the problem with the div's in IE I got a new problem. I got a clock placed in my sidebar and under it there is some text. In FF it's placed right but in IE not again :S How can I fix this? Link: www.windmolentechnologie.tk Code: index.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Windmolentechnologie</TITLE>
<LINK HREF="http://windmolentechnologie.webs.com/css/default.css" REL="stylesheet" TYPE="text/css" />
<style type="text/css">
.hiddenPic {display:none;}
</style>
<noscript></noscript><!-- --><script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script type="text/javascript" src="http://windmolentechnologie.webs.com/js/nav1.js"></script>
<script type="text/javascript" src="http://windmolentechnologie.webs.com/js/klok.js"></script>
<script src="http://static.freewebs.getclicky.com/44044479.js" type="text/javascript"></script><noscript><img alt="Clicky" src="http://in.freewebs.getclicky.com/44044479-fwdb4.gif" /></noscript>
</HEAD>
<BODY>
<div id="container">
<div id="nav">
<img src="http://windmolentechnologie.webs.com/images/Nav2.png" USEMAP="#nav" border="0" name="nav1">
<map name="nav">
<area shape="rect" coords="261,40,339,120" href="home.html" alt="Home" target="iframeinhoud" onMouseOver="imageChange('nav1','alt1')" onMouseOut="imageChange('nav1','alt0')" />
<area shape="rect" coords="341,40,419,120" href="inhoud.html" alt="Home" target="iframeinhoud" onMouseOver="imageChange('nav1','alt2')" onMouseOut="imageChange('nav1','alt0')" />
<area shape="rect" coords="421,40,499,120" href="logboek.html" alt="Home" target="iframeinhoud" onMouseOver="imageChange('nav1','alt3')" onMouseOut="imageChange('nav1','alt0')" />
<area shape="rect" coords="501,40,579,120" href="profielen.html" alt="Home" target="iframeinhoud" onMouseOver="imageChange('nav1','alt4')" onMouseOut="imageChange('nav1','alt0')" />
<area shape="rect" coords="581,40,659,120" href="bedrijven.html" alt="Home" target="iframeinhoud" onMouseOver="imageChange('nav1','alt5')" onMouseOut="imageChange('nav1','alt0')" />
</map>
</div>
<div id="banner">
</div>
<div id="content">
<div id="new">
<table id="klok">
<td id="kloktd">
<img src="dg8.gif" name="hr1"><img
src="dg8.gif" name="hr2"><img
src="dgc.gif" name="c"><img
src="dg8.gif" name="mn1"><img
src="dg8.gif" name="mn2"><img
src="dgc.gif" name="c"><img
src="dg8.gif" name="se1"><img
src="dg8.gif" name="se2">
</td></table>
<p id="new1">Dit is een testlijntje</p>
<p id="new2">lolololol</p>
<p id="new2">what happens if this line is a little bit too long for the box?</p>
<p id="new3">fredje pietje ludo</p>
</div>
<div id="inhoud">
<iframe name="iframeinhoud" src="home.html" frameborder="0" height="500" width="540" scrolling="no" allowtransparency="true"></iframe>
</div>
</div>
<div id="footer">
</div>
</div>
<img src="http://windmolentechnologie.webs.com/images/InhoudHome.png" alt="InhoudHome" title="InhoudHome" height="500" width="540" class="hiddenPic">
<img src="http://windmolentechnologie.webs.com/images/InhoudLog.png" alt="InhoudLog" title="InhoudLog" height="500" width="540" class="hiddenPic">
</BODY>
</HTML>
Code: css (will make this shorter later)
html {
margin:0;
padding:0;
height: 100%;
font-family:Tahoma,"Times New Roman",Georgia,Serif;
font-size:14px;
}
body {
background-color: #f2f3ed;
margin: 0px;
padding: 0px;
height: 100%;
z-index:0;
position:relative;
text-align: center;
}
#container {
position:relative;
height:auto !important;
min-height:100%;
width: 760px;
margin:0 auto;
}
#nav {
width:100%;
height:160px;
background: url(../images/Nav.png) no-repeat;
}
#banner {
width:100%;
height:101px;
background: url(../images/Banner.png) no-repeat;
}
#content {
width:100%;
height:500px;
background:transparent;
}
#new {
background: #e6e8dc url(../images/New.png) no-repeat;
width:220px;
height:500px;
float:left;
text-align: left;
}
#inhoudhome {
background: #e6e8dc url(../images/InhoudHome.png) no-repeat;
width:540px;
height:500px;
float:left;
text-align: left;
}
#inhoudlog {
background: #e6e8dc url(../images/InhoudLog.png) no-repeat;
width:540px;
height:500px;
float:left;
text-align: left;
}
#inhoudprof {
background: #e6e8dc url(../images/InhoudProf.png) no-repeat;
width:540px;
height:500px;
float:left;
text-align: left;
}
#footer {
background: url(../images/Footer.png) no-repeat;
height:50px;
width:100%;
position:relative;
}
p#inhoud1 {
margin:35px 5px 0px;
font-family:Tahoma,"Times New Roman",Georgia,Serif;
font-size:14px;
}
p#inhoud2 {
margin:0px 5px 0px;
font-family:Tahoma,"Times New Roman",Georgia,Serif;
font-size:14px;
}
p#inhoud3 {
margin:0px 5px 10px;
font-family:Tahoma,"Times New Roman",Georgia,Serif;
font-size:14px;
}
p#new1 {
margin:35px 5px 0px 25px;
font-family:Tahoma,"Times New Roman",Georgia,Serif;
font-size:14px;
}
p#new2 {
margin:0px 5px 0px 25px;
font-family:Tahoma,"Times New Roman",Georgia,Serif;
font-size:14px;
}
p#new3 {
margin:0px 5px 10px 25px;
font-family:Tahoma,"Times New Roman",Georgia,Serif;
font-size:14px;
}
table.tabellog {
border-collapse: collapse;
margin:37px 25px 10px 6px;
width:510px;
border-width: 1px;
border-style: solid;
}
table.tableprof1 {
border-collapse: collapse;
margin:37px 25px 5px 6px;
width:510px;
border-width: 1px;
border-style: solid;
}
table.tableprof2 {
border-collapse: collapse;
margin:5px 25px 5px 6px;
width:510px;
border-width: 1px;
border-style: solid;
}
table.tableprof3 {
border-collapse: collapse;
margin:5px 25px 10px 6px;
width:510px;
border-width: 1px;
border-style: solid;
}
td {
padding:5px;
border-width: 1px;
border-style: solid;
}
td.datlog {
text-align:center;
font-weight:bold;
width:90px;
}
td.omschlog {
font-weight:bold;
}
td.tijdlog2, td.datlog2 {
text-align:center;
}
td.tijdlog {
text-align:center;
width:100px;
font-weight:bold;
}
td.kol1 {
font-weight:bold;
width:125px;
}
td.kol1foto {
width:100px;
height:125px;
}
table {
border-color:#000;
}
table#klok {
margin:64px 5px 0px 57px;
border-width:0px;
}
td#kloktd {
height:45px;
border-width:0px;
}
Is it possible to use CSS to place one image over the top of the other? For what I mean go he celticblues dot com/test/test.html I could do the same thing via photoshop, but I want to do it with CSS as I have several to do and I am not sure of the relative sizes yet and don't want to keep redoing the photoshop thing. Ed Hi! I've got a problem thats driving me mad. i got two divs inside my Content-div. The Text-div and the Box-div at the moment they are arranged like this: data.fuskbugg.se/dipdip/thisishowitis.jpg In the Box-div i've inserted two pictures that i want vertical aligned and the Box-div should be to the right i want it to look like this data.fuskbugg.se/dipdip/howitshouldbe.jpg with the Text-div and the Box-div next to each other. NOT on top of each other PLEASE help me out / Dippah Hello, I have made playersnutrition.com As you can see, when you go to another page, the menu dosent stay at the top. How do I make it stay at the top???? does anyone know how i can place my menu on the right spot. this is the website Site the menu is supposed to be placed on this spot ( this is an older version of the layout): Old Layout but i cant get the css-menu there >.< the code for its position Quote: #navcontainer ul { margin-left: 1; padding-left: ; as u can see, margin is 1 and already its too far! if its 0, then its totally on the left-side, i cant set 0.1 or something and if margin is >1 than its too far ofcourse -_- how can i place the menu on the right spot (as shown in the second link)? (it is also supposed to be a bit lower) tats the main problem. if u want u can also comment (suggest) the new layout. i have a hard time choosing which one is better. i am still planning to make changes though. Hi I would like to know where should I go to get an easy, small script so that I can use multi-level drop down menus in my website? I googled and came up with a supposed menu framework.. it looked easy but when I tried it, it didnt work.. i have a site that if the page isn't cached, some of the content starts like, at the top of the page and then shifts in to it's positioned place. why does this happen? how can i stop it? Hey everyone, i'm having a bit of trouble with a page i'm making, it seems no matter what i do this one div one left align some text in it. It seems to center everything and i cant stop it from doing it, also the div's inside wont all be on the same line as in one after the other it's the Latest Blog section. hxxp://24.141.168.102:8080/ar/?page=blog That's my personal web server i use so if someone could have a look at this and get back to me i'd really appreciate it. Hi, I have a problem with creating a CSS banner div. I can't seem to get the .centeredbox to the absolute top of the page, while keeping it centered with auto margin: Code: <html>
<head>
<title>Untitled Document</title>
<style>
.wrapperbox {text-align: center; }
.centeredbox {width: 682px; margin: 0 auto 0 auto; text-align:left; background-color: #000000;BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 11px solid; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid;}
</style>
<div class="wrapperbox"></div>
<div class="centeredbox"></div>
</head>
<body>
</body>
</html>
With this code it keeps a little space between the div and the top of the page. I don't want that space . Does anyone have a solution? I would like to have a header on my page with my logo in the top left corner, and a cloud image going the rest of the way across the top. I set up the cloud image as a background, but wanted the logo to be clickable so it is set up in the html as an image. The problem is that I want the image to be fixed in the corner so that when the visitor scrolls, it stays at the top. It looks good in Firefox and in Chrome, but in IE it is a few pixels offset from the corner and I have no idea how to fix it. See what I mean he felixairservices.com Here is my css for the logo: Code: body
{
background:#6699BB url('sky.jpg') no-repeat top right fixed;
background-size: 90% 228px contain;
}
img.logo
{
position:fixed;
top:0px;
left:0px;
margin:0;
padding:0;
border-style:none;
}
And here is the html I am using to display it: Code: <a class="logo" href="index.html" border="0"><img class="logo" src="Logo.jpg" valign="top" align="left" border="0"></a><br> Any help would be appreciated. I'm just a simple AC contractor trying to build a decent web page for my business. I'm not sure if this is related to CSS or not, but I have a blog that gives the option of changing the background colors by submitting a hex color code. I have seen other blogs that have pictures instead of color and I know that this function is available to me at this points and time, I simply have no clue how to activate it. Is there any way to convert a picture in my harddrive to fit a code, or should I just ask the site's maintenance and my fellow bloggers? |
|||||||