|
CSS - Help With Site Layout Problem
Hi,
I run this Farsi site and yesterday, I posted a few articles and suddenly I noticed my sidebar is out of its place! It is using wordpress and I must say, I did not change any css or did anything with the theme...just did normal posting. Would you kind people tell me how I can find out where the problem is in these cases? I checked to see if there is any extra code in the text of the articles recently posted, but found nothing...pure text and few <a> and <img> html tags.... size of the pictures are also moderate as you can see... I know you can't read the text, but where do you think I should look for the problem? the site address is (oh i can't post links!!!) please use 'punez' dot 'nafice' dot 'com' (it's a subdomain) Similar TutorialsI'm working on www.wirelessguy.net and I'm trying to add something to my layout. I want to have an outer box that surrounds the content and then add left and right borders to it so I can change the outside background color. I'm currently using 10% left/right margins to get the material in the middle of the page. Here is my css for the outerbox: Code:
div#outerBox
{
margin-left:-5%;
margin-right:-5%;
border-left: 1px dotted red;
border-right: 1px dotted red;
width:100%;
height:100%;
}
When I do this I get the following result: www.wirelessguy.net/index2.php Any ideas on how to get the box to be made with negative margins? I have been working with css for a while but web design is just a hobby for me so I am not that good when it comes to advanced css. The problem that I am having is that IE is not rendering me page right and I am not sure if it also supports png transparency be cause me background images are not coming out right. Everything for this page work just right in FF but IE is a whole other story. So if somebody could check out my site and suggest changes that I could make so that it does work right in both that would be awesome. My Site and here is me css file css Code: Original - css Code /* Basic style sheet */ html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset { margin: 0px; padding: 0px; border: 0px; } body{ background-image: url(../images/thumbBG.gif); background-repeat: repeat; color: #999999; font-family: Arial, Helvetica, sans-serif; font-size: 100.01%; text-align: center; } #wrapper{ width: 800px; text-align: left; background-color: #1A1A1A; } #rightshadow{ width: 850px; margin-left: auto; margin-right: auto; background-image:url(../images/rightshadow.png); background-position: right top; background-repeat: repeat-y; /*background-attachment: inherit;*/ } #leftshadow{ padding-left: 25px; background-image: url(../images/leftshadow.png); background-position: left top; background-repeat: repeat-y; /*background-attachment: inherit;*/ } #banner{ height: 135px; background-position: center; background-repeat: no-repeat; background-image: url(../images/banner2.jpg); } #nav{ height: 10px; background-color: #000000; text-align: center; margin-bottom: 10px; } #nav ul{ padding: 0px; margin: 0px; background-color: #000000; } #nav ul li{ display: inline; padding: 0px; margin: 0px; } #nav ul li a{ font-size: 80%; color: #FFFFFF; background-color: #000000; text-decoration: none; padding: 0px 25px 0px 25px; text-align: center; width: 9em; } #nav ul li a:hover, #nav ul li a:focus{ background-color: #D0EB5A; color: #000000; } #usepic{ height: 110px; width: 104px; border: 1px solid #000000; background-color: #000000; margin-top: 5px; margin-bottom: 15px; margin-left: 5px; } #user{ float: left; width: 115px; background-color: #000000; text-align: center; margin-top: 10px; margin-left: 13px; } /* html div#user { width: 20px; top: 38px; left:20px; position:absolute; }*/ #content{ margin-top: 10px; margin-right: 23px; margin-bottom: 4px; float: right; width: 625px; } .containAll{ background: #000000; margin-bottom: 10px; } .container{ width: 100%; float: none; margin-bottom: 10px; } #content p{ font-size: 80%; margin: 20px; font-weight: bold; } #content h1{ font-size: 130%; color: #003366; padding: 0px; margin: 20px; } #content h2{ font-size: 110%; color: #D0EB6A; padding: 0px; margin: 20px; } hr{ visibility: hidden; } .leftimage{ float: left; margin: 0px 10px 20px 0px; border: 1px solid #000000; } .rightimage{ float: right; margin: 0px 0px 20px 15px; border: 1px solid #000000; width: 150px; } .container hr{ clear: both; visibility: hidden; } hr{ visibility: visible; } #footer{ border-top: 1px solid #000000; background-color: #C0DB5A; color: #000000; clear: both; } #footer p{ padding: 3px; font-size: 70%; } #navcontainer{ font-size: 12px; width: 100px; margin-left: 5px; margin-bottom: 5px; } #navcontainer ul{ margin-left: 0px; padding-left: 0px; list-style-type: none; font-family: Arial, Helvetica, sans-serif; } #navcontainer a{ display: block; padding: 1px; width: 100px; background-color: #333333; border-bottom: 1px solid #1A1A1A; } #navcontainer a:link, #navlist a:visited{ color: #EEE; text-decoration: none; } #navcontainer a:hover{ background-color: #D0EB5A; color: #000000; } /* clearing ----------------------------------------------- */ .clearfix:after { /*content: "."; */ display: block; height: 0; clear: both; visibility: hidden; } * html>body .clearfix { display: inline; width: 100%; } * html .clearfix { /* Hides from IE-mac \*/ height: 1%; /* End hide from IE-mac */ }
Hello all - I wondered if anyone can help. I have created a site using html and css and seem to have a problem with the layout - see http://www.mysimplestore.com/ I have used <div>tags to define the different sections of the website in terms of a main container, header, left hand side, main content and a footer. When I look at the site in Internet Explorer there is gap between the search bar and the start of the text and I would like to reduce this gap. I have tried an number of options without success. Can anyone help? Thanks Techmog Hi, can you take a look at my site: www vitacam com in both IE7 and Firefox and let me know if you see anything in the code that is causing the layout differences? Everything's all bunched together in Firefox but it looks right in IE. Thanks, Shane Hi. I'm making a registration and login pages with some additional information, and I'm wondering how to make them tableless? What I'd do with tables is put table in a table, because I want to do something like this: A 640px (or any other value) width box in the center of the screen, in which there is another box under some text, which is borderless login box. Same would go for the registration box. And without tables - I have no idea how to do it. Not sure if this is the right section, sorry if it isn't. Thanks. this should be simple, but i just don't seem to have the hang of css yet what i want right now is a div for the links and stuff at the top, a bar on the left with the content to the right, and then the footer for more links and stuff, basically something like this site http://www.c21homeservices.com/common/mkttrends.php?mtt=selling only using css the man problem right now is that i can't get the content box positioned so that it has a 5px border around it or something so you see its parent box as a border and as more content is put into it the page justs gets longer at the content box with its parent moving with it maybe just looking at what i have will help more the HTML Code: ...... <body> <div id="all"> <div id="head"> Head Section </div> <div id="main"> Bar <div id="content">Content Goes Here</div> </div> <div id="footer"> footer </div> </div> </body> </html> and the css Code: body {
background-color:#ff0000;
}
#head {
height:200px;
}
#all {
margin-left:3%;
margin-right:3%;
background-color:#a0a0a0;
}
#main {
background-color:#ff00ff;
}
#side_bar{
background-color:#99ff99;
}
#content{
position:relative;
float:right;
width:80%;
right:10px;
background-color:#ffffff;
padding:5px;
}
#footer {
height:200px;
}
those funky colors are so i can see the divs Ok, this is my first time creating a layout using div tags and I'm having trouble setting the footer to stay at the bottom. example From the example above, I want to footer to sit below the menu. I can't seem to get this to work. Here's my code. Code:
body {
margin:0px;
padding:0px;
font-family:verdana, arial, helvetica, sans-serif;
background-color:white;
}
#header {
height:50px;
background-color:#0755AB;
text-align: center;
}
#content {
width:100%;
height:200px;
margin:0px 0px 0px 150px;
background-color:#008080;
text-align: center;
}
#menu {
position:absolute;
top:50px;
left:0px;
width:150px;
height:300px;
background-color:#FF9F9F;
text-align: center;
}
#footer {
height:30px;
background-color:gray;
text-align: center;
position: relative;
}
I'm trying to create a fairly easy layout, making use of DIVs. The following structure is what I'm trying to accomplish: www.dvolve[PLEASE REMOVE].org/tst.jpg And here's what I currently have: www.dvolve[PLEASE REMOVE].org/tst.htm However, I'm not really convinced that this is the right solution. I am unable to scroll in the content div (IE6) for one, which is quite a problem. I'm hoping to make this look the same for most browsers. Does anyone have a better layout that achieves this or any pointers on what I'm doing wrong? I've built a site for a client using a header, middle and footer. The middle is divided into content and nav. For some reason the nav drops below the content div in IE, but positions properly in FF. Could someone please help! The next step for me is to re-code the entire site and I really don't want to have to do that. http://www.cvp.jp/about.html Thank you in advance for your time and help. I am having a layout issue where if the contents of the left and right columns change, then the middle column increases or decreases in height. See www.eyeongames.com This is how it should look, but if you increase the font or the right or left columns expand, then the middle column shifts up or down. I want the columns to be even across the top. Thanks in advance! Here is the style sheet code I am using. Code: a {
background: transparent;
color: #ff8f02;
text-decoration: none;
}
a:hover {
color: #fff;
}
body {
background: #550a04;
color: #d7cf00;
font-family: Verdana, Arial, Sans-serif;
font-size: 12px;
margin: 10px;
padding: 0;
}
form {
margin: 0;
}
h1,h2,h3,h4,h5,h6 {
margin: 0;
padding: 0;
}
hr {
background: #abc;
border: 0 none;
color: #abc;
height: 1px;
margin: 0;
padding: 0;
}
img {
border: 0 none;
}
p {
margin: 5px 0px 5px 0px;
padding: 0;
}
th,td {
padding: 2px;
}
div.leftColumn {
background: transparent;
border: 0px solid #555;
left: 10px;
padding: 5px;
position: absolute;
top: 400px;
width: 240px; /* Incorrect IE5 value */
z-index: 2;
voice-family: "\"}\"";
voice-family: inherit;
width: 218px;
}
html>body div.leftColumn {
width: 218px;
}
div.leftColumn2 {
background: transparent;
border: 0px solid #555;
left: 10px;
padding: 5px;
position: absolute;
top: 143px;
width: 240px; /*Incorrect IE5 value */
z-index: 2;
voice-family: "\"}\"";
voice-family: inherit;
width: 218px;
}
div.topColumn {
background: transparent;
border: 0px solid #555;
margin: 0px 200px 0px 130px;
min-width: 200px;
padding: 0px;
position: relative;
width: 600px;
z-index: 3;
}
div.middleColumn {
background: transparent;
border: 0px solid #555;
margin: 0px 200px 10px 240px;
min-width: 200px;
padding: 5px;
position: relative;
top: -105px;
width: 480px;
z-index: 3;
}
div.middleColumn2 {
background: transparent;
border: 0px solid #555;
top: 0px;
margin: 0px 200px 10px 240px;
min-width: 200px;
padding: 5px;
position: relative;
width: 480px;
z-index: 3;
}
div.rightColumn {
background: transparent;
border: 0px solid #555;
padding: 5px;
position: relative;
top: 43px;
margin: 0px 0px 0px 742px;
width: 240px; /* Incorrect IE5 value */
z-index: 1;
voice-family: "\"}\"";
voice-family: inherit;
width: 218px;
}
html>body div.rightColumn {
width: 218px;
}
div.logoBlock {
background: transparent;
border: 0px solid #555;
left: 10px;
margin: 0;
padding: 0;
position: absolute;
text-align: left;
top: 10px;
width: 210px; /* Incorrect IE5 value */
z-index: 2;
voice-family: "\"}\"";
voice-family: inherit;
width: 125px;
}
html>body div.logoBlock {
width: 188px;
}
div.copyrightBlock {
background: transparent;
margin: 0px 200px 0px 200px;
min-width: 200px;
padding: 0;
position: relative;
text-align: center;
width: 500px;
z-index: 3;
}
*.newItem {
color: #ff5500;
}
*.oldItem {
color: #fff;
}
Here is part of the code. There are multiple index.tpl files with similar code only the content changes, such as when browsing the games. header.tpl Code: <div class="logoBlock"><--- LOGO IMAGE ---></div>
<div class="topColumn"><--- BANNER IMAGE ---></div>
<div class="leftColumn">
<h3>{HEADER_BLOCK1_TITLE}</h3>
<hr />
<p><--- LINKS EDITED OUT ---></p>
<h3>{HEADER_BLOCK2_TITLE}</h3>
<hr />
<p><--- MORE LINKS ---></p>
<h3>{HEADER_BLOCK3_TITLE}</h3>
<hr />
<form><--- FORM CODE ---></form>
<h3>{HEADER_BLOCK4_TITLE}</h3>
<hr />
<p>{HEADER_BLOCK4_CONTENT}</p>
<!-- <hr />
<p>{BACKEND_RSS}</p>
<p>{BACKEND_TXT}</p> -->
</div>
<div class="rightColumn">
<table style="width: 100%;background: #d7cf00;">
<tr>
<td align="center"><h3><font color="#550a04">Game Updates</font></h3></td>
</tr>
</table>
<p align="center">{GAME_RSS}</p>
<!-- <p align="center">{GAME_TXT}</p> -->
</div>
footer.tpl Code: <div class="leftColumn2">
<table style="width: 100%;background: #d7cf00;">
<tr>
<td align="center"><h3><font color="#550a04">Latest News</font></h3></td>
</tr>
</table>
<p>{BACKEND_RSS}</p>
<!-- <p>{BACKEND_TXT}</p> -->
</div>
<div class="copyrightBlock">
<p><--- COPYRIGHT ---></p>
</div>
</body>
</html>
index.tpl Code: <div class="middleColumn">
<table style="width: 100%;background: #d7cf00;">
<tr>
<td align="center"><h3><font color="#550a04">News Headlines</font></h3></td>
</tr>
</table>
</div>
<!-- <div class="middleColumn">
<p>{BACKEND_RSS}</p>
<p>{BACKEND_TXT}</p>
</div> -->
<!-- BEGIN NEWS_BLOCK -->
<div class="middleColumn">
<h3>{NEWS_SUBJECT}</h3>
<h5>{NEWS_INDEX_RELEASE}</h5>
<hr />
<p><--- NEWS TEXT ---></p>
<p>{NEWS_SOURCE}</p>
<hr />
<p><--- COMMENTS ---></p>
</div>
<!-- END NEWS_BLOCK -->
<div class="middleColumn"><p>{NEWS_INDEX_PAGES}</p></div>
Hello, I'm having issues with a new layout in IE 6. The HTML is as follows: Code: <div id="gsContainer">
<div id="gsLeftBorder"></div>
<div id="gsRightBorder"></div>
<div id="gsContent">
<div id="gsHeader">Heading</div>
<div id="gsBox">
Some content
</div>
</div>
</div>
The CSS is as follows: Code: #gsContainer {
position: relative;
width: 795px;
height: 185px;
margin: 0 0 15px 0;
padding: 0px;
}
#gsLeftBorder {
float: left;
position: relative;
margin: 0px;
padding: 0px;
width: 4px;
background-image: url(/images/Left.gif);
background-repeat: no-repeat;
height:185px;
}
#gsRightBorder {
position: relative;
float: right;
margin: 0px;
padding: 0px;
width: 4px;
background-image: url(/images/GreenRight.gif);
background-repeat: no-repeat;
height:185px;
}
#gsContent {
position: relative;
height: 185px;
margin-left: 4px;
margin-right: 4px;
width:779px;
padding: 0px;
}
#gsHeader {
position: relative;
height: 25px;
margin: 0px;
padding: 6px 0 0 10px;
width:769x;
color: #fff;
font-size: 14px;
font-family: arial;
font-weight: bold;
background-image: url(/images/Header.gif);
background-repeat: repeat-x;
}
#gsBox {
position: relative;
height: 129px;
margin: 0px;
padding: 25px 5px 0px 31px;
width:743px;
color: #000;
font-size: 11px;
font-family: verdana;
background-image: url(/images/Back.gif);
background-repeat: repeat-x;
}
The display looks fine when I test in IE 7, FF2, and Safari, with the content appearing with a clean "header" on top, and some inner content with borders on the left & right side. However, when viewing in IE6, the inner content (div "gsContent") is somehow too wide, and is pushed to the live after the "gsContainer" div. When I play with the widths, if I shave 8px of width off gsContent and its inner divs, then the alignment is fixed, but there is spacing between gsLeftBorder & gsContent as well as gsContent & gsRightBorder Any ideas how I can resolve this? Hi, Since I'm a newcommer here, I'm not allowed to post proper URLs, so I'm hoping someone will have a look at the css problem in the following two images: (remove the spaces in the links) h t t p : // farm4.static.flickr.com/3192/2929163063_5b1e1d9988.jpg?v=0 and h t t p : // farm4.static.flickr.com/3188/2930025002_a7a4ed4fbe.jpg?v=0 The overlapping error in the second image occurs only in IE 8 with compatibility view turned on. The address is positioned properly in all other browsers. In the style sheet a div tag positions the address : #address {clear:both;position:relative; font-size:smaller; top: 40px; left: 0px; width: 145px; height: 80px; } I've used <!--[if lte IE 6]> <link rel="stylesheet" media="all" type="text/css" href="css/menu_ie.css" /> <![endif]--> In the page the address is written as: <div id="address"> <div align="right">The Company Name Inc.<br> 1234 Glenn View Road<br> Hilldale, OW 12345<br> 123-456-7890</div></div> ...and in menu_ie.css given the address tag top:90px or margin-top:90px instead of 40px but this does not have any effect. A few other points: The page layout is not pure css but a combo of a table + css. The menu is in an include file placed in a table column as is the address. I want to know a fix that will position the address correctly about 40px below the menu. Thanks Hi, I'm having trouble creating a top bar and below this 3 column layout. IE 5.5 takes note of the widths specified, firefox does not. In fact firefox seems to treat the center and right column divs as though have been asked to display: block as soon as content is placed within the left column, even overlapping into the header div above it when padding or a margin is added. I'm wondering if I am using the DTD tag? Or is it the fact that I am css-ing the layout wrongly? See page layout here 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" xml:lang="en" lang="en"> <head> <title>This is really beginning to annoy me!</title> <meta http-equiv="expires" content="-1" /> <meta name="robots" content="no-index" /> <link rel="stylesheet" type="text/css" href="style.css" media="screen" /> </head> <body> <div id="ContentBox"> <div class="logo"><img src="" alt="a logo here" title="" class="logo" /></div> <div id="mainmenu"><div class="blulinetop"></div>menu here<div class="blulinebot"></div></div> <div id="leftSide"> Quick Navigation <form><p></p></form> <img src="" border=0 alt="" /> <ul class="prodsnav"> <li class="prodsnav"><img src="gifs/bullet_c.gif" alt="/" title="/" class="prodNav" /> Nav LInk 1</li> <li class="prodsnav"><img src="gifs/bullet_c.gif" alt="/" title="/" class="prodNav" /> Nav Link 2</li> </ul> </div> <div id="centerSide">Center column</div> <div id="rightSide">righthand column</div> </div> </body> </html> ...the CSS Code:
body {
margin:0px 0px;
padding:0px;
text-align:center;
background-color: #fff;
font-family: arial, sans serif;
font-size: x-small;
font-style: normal;
font-weight: 400;
}
#ContentBox {
width:810px;
height: 100%;
margin:0 auto;
text-align:left;
padding:0px;
border: 1px solid #c2dacd;
background-color:#fff;
vertical-align: top;
}
#leftSide {
width: 166px;
height: 99%;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #003399;
margin: 0;
padding-top: 24px;
display: inline;
vertical-align: top;
background-color: #f00;
}
#centerSide {
width: 450px;
height: 99%;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #003399;
margin: 0px;
padding: 0px;
display: inline;
vertical-align: top;
background-color: #0f0;
}
#rightSide {
width: 177px;
height: 99%;
border: 0;
margin: 0px;
padding: 0px;
display: inline;
vertical-align: top;
background-color: #00f;
}
div.logo {
width: 100%;
height: 50px;
background-color: #c2dacd;
padding: 0;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
vertical-align: left;
display: block;
}
#mainmenu {
height: 28px;
width: auto;
vertical-align: top;
padding: 0px;
display: inline;
border: 0;
font-size: 1px;
background-color: #0f0;
}
div.blulinetop {
width: 100%;
height: 2px;
border: 0;
background-color: #003399;
margin-top: 2px;
margin-bottom: 2px;
font-size: 1px;
vertical-align: top;
}
div.blulinebot {
width: 100%;
height: 2px;
border: 0;
background-color: #003399;
margin-top: 0;
margin-bottom: 0;
font-size: 1px;
vertical-align: top;
}
/* products nav */
ul.prodsnav {
display: block;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding: 0;
list-style-type: none;
}
li.prodsnav {
padding: 4px;
margin-top: 0;
margin-right: 2px;
margin-bottom: 2px;
margin-left: 2px;
height: 18px;
width: 165px;
border-right-color: #999;
border-right-style: solid;
border-right-width: 1px;
border-bottom-color: #999;
border-bottom-style: solid;
border-bottom-width: 1px;
}
img.prodNav{
display: inline;
}
What to do? un-Wizeone today http://www.research.buffalo.edu/newsite/ If I go to the above page in Firefox the page always loads fine. However, if I go to it in IE 6 the right side div half the time loads incorrectly and is not positioned to the right. If i hit refresh then the page looks correct. This error happens the most when I'm coming from another page and click the home button to get back to the above link. I've also noticed this happening on http://www.research.buffalo.edu/newsite/proposal_library.cfm Both pages validate correctly. Is there something I'm missing? Some kind of hack to make it work in IE? Please have a look in the attached example: the layout works fine (after some testing) in Mozilla. My problem is that the navigation breaks after the fourth button in IE. If i give a width to the list than the whole navigation breaks after the content at the left side. Anyone with some advice? Hi I'm trying to layout some information on a page that would previously have been designed using a table structu Code: <table>
<tr>
<td>Item 1
<br />
Item 2
<br />
Item 3</td>
</tr>
<tr>
<td>Item 1
<br />
Item 2
<br />
Item 3</td>
</tr>
</table>
But now have tried to redesign the layout using the following CSS: Code: #boxProdDisplay
{
width:500px;
padding:0;
margin:0;
}
#boxProdDisplay p
{
width:228px;
border:1px solid #CCCCCC;
color:#333333;
background-color:#F5F5F5;
padding:5px 5px;
}
#boxProdDisplay p.p1
{
float:left;
clear:left;
width:228px;
border:1px solid #CCCCCC;
color:#333333;
background-color:#F5F5F5;
padding:5px 5px;
}
#boxProdDisplay p.p2
{
float:left;
clear:left;
width:228px;
border:1px solid #CCCCCC;
color:#333333;
background-color:#F5F5F5;
padding:5px 5px;
}
#boxProdDisplay p.p3
{
float:right;
clear:right;
width:228px;
border:1px solid #CCCCCC;
color:#333333;
background-color:#F5F5F5;
padding:5px 5px;
}
#boxProdDisplay p.p4
{
float:right;
clear:right;
width:228px;
border:1px solid #CCCCCC;
color:#333333;
background-color:#F5F5F5;
padding:5px 5px;
}
The problem is that it doesn't quite display correctly. The <P> elements are floated correctly, but they only appear after the last <P> tag which has been aligned left. With a table structure I could use valign to send everything to the top of the page. What can I do here? Many Thanks. Hi! Am new here, been doing CSS for a few months now, had a few problems here and there, but overall, is going well I have done this website homepage so far : http://www.moretonhallglass.com/cross/ It works fine on all browsers, except 1! which is IE 6. I have read into bugs for this but have been unable to fix it as yet. The problem is that the middle picture with the painting and descripton it seems to have a break at the top of it and pushes it down the page, have tried all sorts to fix it in the CSS code, but to no avail yet. Anyone know how to fix it? Thanks for your help HTML : 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=ISO-8859-1" />
<title>Daisy Cross</title>
<script type="text/javascript">
<!--
function swap(img, ref) {
if (document.images) { document[img].src = ref; }
}
-->
</script>
<!--[if IE]>
<style>
.item {
margin: 5px;
padding: 10px;
}
</style>
<![EndIf]-->
<link rel="stylesheet" type="text/css" href="css/text.css" />
<link rel="stylesheet" type="text/css" href="css/base.css" />
</head>
<body>
<div id="container">
<div id="header">
<img src="images/top.jpg" width="940" height="129" border="0" alt="Daisy Cross" />
</div>
<div id="mid" style="display: inline;"><table border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3"><img src="images/dcross_01.jpg" width="940" height="24" border="0" alt=""></td>
</tr><tr>
<td><img src="images/dcross_02.jpg" width="545" height="135" alt=""></td>
<td><a href="#" onmouseover="swap('mid1','images/dcross2_03.jpg')" onmouseout="swap('mid1','images/dcross_03.jpg')"><img name="mid1" src="images/dcross_03.jpg" width="194" height="135" border="0" alt=""></a></td>
<td><a href="#" onmouseover="swap('mid2','images/dcross2_04.jpg')" onmouseout="swap('mid2','images/dcross_04.jpg')"><img name="mid2" src="images/dcross_04.jpg" width="201" height="135" border="0" alt=""></a></td>
</tr><tr>
<td colspan="3"><img src="images/dcross_05.jpg" width="940" height="136" border="0" alt=""></td>
</tr><tr>
<td colspan="3"><img src="images/dcross_06.gif" width="940" height="10" border="0" alt=""></td>
</tr>
</table></div>
<div id="content-container">
<div id="content">
<br />
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><a href="#" onmouseover="swap('nav1','images/nav2_01.gif')" onmouseout="swap('nav1','images/nav_01.gif')"><img name="nav1" src="images/nav_01.gif" width="130" height="32" border="0" alt=""></a></td>
</tr><tr>
<td><a href="#" onmouseover="swap('nav2','images/nav2_02.gif')" onmouseout="swap('nav2','images/nav_02.gif')"><img name="nav2" src="images/nav_02.gif" width="130" height="31" border="0" alt=""></a></td>
</tr><tr>
<td><a href="#" onmouseover="swap('nav3','images/nav2_03.gif')" onmouseout="swap('nav3','images/nav_03.gif')"><img name="nav3" src="images/nav_03.gif" width="130" height="30" border="0" alt=""></a></td>
</tr><tr>
<td><a href="#" onmouseover="swap('nav4','images/nav2_04.gif')" onmouseout="swap('nav4','images/nav_04.gif')"><img name="nav4" src="images/nav_04.gif" width="130" height="29" border="0" alt=""></a></td>
</tr><tr>
<td><a href="#" onmouseover="swap('nav5','images/nav2_05.gif')" onmouseout="swap('nav5','images/nav_05.gif')"><img name="nav5" src="images/nav_05.gif" width="130" height="30" border="0" alt=""></a></td>
</tr><tr>
<td><a href="#" onmouseover="swap('nav6','images/nav2_06.gif')" onmouseout="swap('nav6','images/nav_06.gif')"><img name="nav6" src="images/nav_06.gif" width="130" height="28" border="0" alt=""></a></td>
</tr>
</table>
</div>
<div id="aside" class="text">
<img src="images/welcome.gif" width="400" height="42" border="0" alt="Welcome" />
<p>
Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. 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>
<p>
Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. 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>
<p>
Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. 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>
</div><div id="footer">
<img src="images/footer.jpg" width="888" height="60" border="0" alt="" />
</div>
</div>
</body>
</html>
CSS : Code: #container
{
margin: 0 auto;
width: 940px;
background: #fff;
}
#header
{
background: #ccc;
padding: 0px;
margin: 0 0 0 0px;
display: inline;
}
#header h1 { margin: 0px; }
#mid
{
margin: 0;
padding: 0;
background: #ffffff;
display: inline;
}
#navigation ul
{
margin: 0;
padding: 0;
}
#navigation ul li
{
list-style-type: none;
display: inline;
}
#navigation li a
{
display: block;
float: left;
padding: 5px 10px;
color: #fff;
text-decoration: none;
border-right: 1px solid #fff;
}
#navigation li a:hover { background: #383; }
#content-container
{
float: left;
width: 940px;
height:auto;
background: #fff;
}
#content
{
clear: left;
float: left;
width: 160px;
padding: 0px 0;
margin: 0 0 0 20px;
display: inline;
}
#content h2 { margin: 0; }
#aside
{
float: right;
width: 750px;
padding: 10px 0;
margin: 0 10px 0 0;
display: inline;
}
#aside h3 { margin: 0; }
#footer
{
clear: left;
background: #fff;
text-align: right;
padding: 0px;
}
Im tying to have a simple layout with a floating box in the lower right corner. As it is now the floating box is in the top right corner of the body of the box. I just can not get it to look right in the lower right section. Click here. this is a pic of how it looks now Here is the code for the layout CSS Code:
/* main box */
.faq-def-block {
position: relative;
left: 30px;
width: 500px;
background-color: #FFFFCC;
border: 1px solid #000000;
-moz-border-radius: 0px 0px 8px 8px;
color: #000000;
font-size: 12px;
}
/* top line*/
.faq-def-block-header {
border-bottom: 1px solid #000000;
background-color:#FFCC66;
padding: 0 0 0 2px;
}
/* floating box */
.faq-def-block-footer {
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
width: 60px;
float: right;
text-align: center;
background-color:#FFCC66;
-moz-border-radius: 0px 0px 0px 8px;
}
/* body text
.faq-def-block-body {
padding: 0 0 0 6px;
}
HTML Code:
div class="faq-def-block">
<div class="faq-def-block-header">Climatic Wind Data for the United States through 1996 Publication</div>
<div class="faq-def-block-body">
<div class="faq-def-block-footer">
<a href="http://www5.ncdc.noaa.gov/documentlibrary/pdf/wind1996.pdf" target="_blank">
<img src="../images/download-icon.gif"
alt="Climatic Wind Data for the United States through 1996"
width="50"
height="50"
border="0"></a><br>
Download<BR>
PDF<br>
(102KB)
</div>
Climatic wind data in this summary were extracted from the NCDC's Edited Local
Climatological Data publication, Air Force and Navy climatic briefs, and other
sources. The total period of this summary is 1930-1996, though the period of record
(POR) for which wind data is summarized varies for individual locations, and may begin
and end at any time during the 1930-1996 period. Wind summaries from a total of 321 stations
from all U.S. states are presented. The wind elements summarized by month and overall annual
values include prevailing wind directions (given in compass points), mean wind speeds, and
either peak gusts (in miles per hour), fastest-mile, or highest 5-second winds. Peak wind
types may be combined to reflect the highest reported wind. Updated wind data for many sites
can be obtained from the post 1996 Edited Local Climatological Data - Annual publications.<br>
</div>
</div>
Thanks Tekjock IE 7 has caused a problem with the layout on our website. The website worked fine with IE 6. http://www.membersequity.com/mcard/ Can anyone help determine what the problem is? Thanks. |
|||||||