|
CSS - Ie6 Problem - Making Window Narrow Drops Down Content
I'm having a problem in IE6 when I make the browser window narrow so that all the images cannot fit horizontally.
The page is at: URL In other browsers Firefox win/mac, Safari, things work ok if I make the browser window narrow so that some of the images in the right section (#section1) will not fit. The images get clipped and a horizontal scroller appears. But in IE6/Win, the whole table of images gets dropped down. I thought the issue was related to: Internet Explorer and the Expanding Box Problem URL But trying overflow:hidden; in #section1 did not help. Any help would be greatly appreciated. Thanks- YamaMon Similar TutorialsThere are two things I dont like in this world: 1. Internet Explorer 2. 1024x768 Anyway, I have a problem in IE. The problem is that a div is falling down below the other divs. It looks like this: http://files.upl.silentwhisper.net/...8/ieproblem.JPG Works in FF (of course, hehe). Any idea what this might be or any solution? Code:
#box1
{
border-right: 1px solid #a0a0a5;
border-bottom: 1px solid #a0a0a5;
background-color: white;
width: 680px;
height: 440px;
text-align: left;
color: #5b626e;
padding: 15px;
margin-left: 182px;
overflow: auto;
position: absolute;
}
#box1 a:link, #box1 a:visited
{
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #0b1a48;
text-decoration: underline;
}
* html #box1 {
float:left;
}
Thats the CSS for the div falling down. This is what I would like to accomplish (though, vertical scrolling..) http://www.csszengarden.com/?cssfile=037%2F037%2Ecss Must look at it with mozilla, btw.. doesn't work in IE. I can't figure out how the hell that person did that. Here is what I have so far... Forgive all the extra tags I don't need. I've been trying everything I can think of... h1{ position: absolute; top: 0px; left: 0px; z-index: 99; background-image: url(top.png); background-repeat: no-repeat; background-attachment: fixed; background-color: transparent; height: 358px; width: 800px; visibility: visible; background-position: top left;} h2{ position: fixed; top: 0px; background-image: url(sidestar.png); background-repeat: repeat-y; background-attachment: scroll; height: 6000px; width: 40px; z-index:1;} H1 is the code for the image I want to be on top, H2 is the "body" I want to disappear behind the image. When that is loaded, the image stays fixed in location, but the body scrolls on top of it, eating the image from the bottom. Any ideas what is wrong? If you have firefox, you can check out what is happening he http://www.fatboyraceworks.com/webnik/ Hi. I'm having a funny problem where using 100% height makes the content div scrollable, even when there's no actual content in it. I am trying to make my content div be 100% height of the window size, so I have the following css: Code:
html, body
{
background: #FFFFFF;
margin: 0px;
padding: 0px;
height: 100%;
font-family: Trebuchet MS, Helvetica, sans-serif;
}
#wrapper
{
background: #FFFFFF;
position: relative;
width: 100%;
height: 100%;
margin: 0px auto;
}
#header
{
background-image: url("images/h-bg.png");
background-repeat: repeat-x;
margin: 0px auto;
padding: 0px;
width: 960px;
height: 107px;
}
#header .logo
{
margin-left: 10px;
}
#header .bg_l
{
float: left;
}
#header .bg_r
{
float: right;
}
#nav
{
background-image: url("images/n-bg.png");
position: relative;
margin: 0px;
width: 100%;
height: 143px;
text-align: center;
}
#nav a
{
float: left;
outline-style: none;
width: 240px;
height: 156px;
}
#nav_btn_wrapper
{
width: 960px;
margin: 0px auto;
}
#content
{
position: relative;
background-image: url("images/c-bg.png");
background-repeat: repeat-y;
width: 930px;
height: 100%;
margin: 10px auto 0px auto;
padding: 10px 15px 0px 15px;
font-size: 12pt;
}
As you can see I have height: 100% in every parent element from container up. Without the height set to 100%, the container div just cuts off, which is bad because I'm using a glowy background on it, and it just cuts off abruptly. I have used this method before on another design, but it worked only cos the wrapper and the container were both white, so when the container chopped off, the wrapper would continue, and it would look seemless. See www.landmarkmeds.com to see the problem in action. I have tried to remove the margin on the content div, but that only moved it up a bit. Also, looking at it in firebug, it reports the height as the correct value, and even shows the ruler down to the bottom of the browser window. Why then it allows me to scroll I don't know! I'm sure it's something stupid I've missed, but please help! In the html below I want to make the text more narrow (to gert the letters cloer to each other). I read about Css-property font-strech but I cannot get it more narrow. Could someone help? Or is there another way to achieve this? This is the 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">
<style type="text/css"><!--
h1 { color: #D16700; font-weight: 700; font-size: 56px; font face: Arial; text-align: left; text-decoration: none; line-height: 66px;}
h2 { color: #D16700; font-weight: 700; font-size: 56px; font face: Arial-black; text-align: left; text-decoration: none; line-height: 66px; }
h3 { color: #D16700; font-weight: 700; font-size: 56px; font face: Arial-black; text-align: left; font-stretch: ultra-condensed; text-decoration: none; line-height: 66px; }
-->
</style>
</head>
<body>
<H1>Communication Training</H1>
<H2>Communication Training</H2>
<H3>Communication Training</H3>
</body>
</html>
Here's how the footer looks now: And here's the desired result: Any ideas? It'll have to be cross-browser friendly (even IE6, god help me). Thanks! Good day, I'm hoping to have this content right up against the top of the browser window. I've played around with padding values, but they don't seem to do anything and I'm unsure of what to try next. Any advice appreciated. Code: #sectionHeader {
width: 800px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
}
Code: <body> <div id="sectionHeader"> <img src="images/header.jpg" alt="Welecome to Doctor Martin's Site" width="800" height="321" border="1" /> </div> </body> I have some very simple code that has a <div> underneath a <table>. I want the DIV to be up against the bottom of the table with no space. It works fine until I add a <p> tag into the DIV. After doing this, the DIV moves down away from the table. The DIV will contain all the page's content and will automatically adjust it's height to the content. Here's the HTML code (The DIV in question is the "main" DIV): 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>Page Title</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="header">
<center>
<img src="images/header/header1.jpg" alt="Header" width="795" height="170" />
<br />
<table class="headertable" width="795" cellspacing="0" cellpadding="5">
<tr>
<td class="headertd"><a href="1">Link 1</a></td>
<td class="headertd"><a href="2">Link 2</a></td>
<td class="headertd"><a href="3">Link 3</a></td>
<td class="headertd"><a href="4">Link 4</a></td>
<td class="headertd"><a href="5">Link 5</a></td>
<td><a href="6">Link 6</a></td>
</tr>
</table>
</center></div>
<center>
<div class="main">
<p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<h1>Main Content</h1>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</p>
</div>
</center>
<center>
<div class="footer">
<span style="float:left;margin-left:5px">Footer Text 1</span>
<span style="float:right;margin-right:5px">Footer Text 2</span></div>
</center>
</body>
</html>
Here's the CSS: Code: @charset "utf-8";
/* CSS Document */
body{
background-color:#E0A766;
}
/* Header Styles */
.header{
width:795px;
margin-left:auto;
margin-right:auto;
}
.headertable{
text-align:center;
border-right:solid 2px black;
border-left:solid 2px black;
border-bottom:solid 2px black;
background-color:#006600;
}
.headertable a:link{color:#FFFFFF; font-weight:bold; text-decoration:none;}
.headertable a:visited{color:#FFFFFF; font-weight:bold; text-decoration:none;}
.headertable a:hover{color:#FFFFFF; font-weight:bold; text-decoration:none; background-color:#048E04}
.headertd{
border-right:solid 2px black;
}
/* Main Content Styles */
.main{
width:791px;
padding-bottom:20px;
border-right:solid 2px black;
border-left:solid 2px black;
border-bottom:solid 2px black;
background-color:#FFFFFF;
margin-left:auto;
margin-right:auto;
}
/* Footer Styles */
.footer{
width:791px;
height:18px;
padding-top:2px;
padding-bottom:2px;
border-right:solid 2px black;
border-left:solid 2px black;
border-bottom:solid 2px black;
background-color:#006600;
margin-left:auto;
margin-right:auto;
color:#FFFFFF;
font-family:"Times New Roman", Times, serif;
font-size:12px;
}
.footer a:link{color:#FFFFFF; font-weight:bold; text-decoration:underline;}
.footer a:visited{color:#FFFFFF; font-weight:bold; text-decoration:underline;}
.footer a:hover{color:#FFFFFF; font-weight:bold; text-decoration:underline; background-color:#048E04}
I know my code isn't up to current standards/trends (such as using a table for a navbar), but this was the easiest, fastest way to create the layout I wanted, so I would like to keep the current code. I just need to know if it's possible to have the DIV not drop down when it contains a <p> tag. If I take the <p> tag out of the "main" DIV, everything looks fine. Here are a couple screenshots: Here's what it's supposed to look like: http://img193.imageshack.us/img193/617/screen1d.jpg Here's what happens after adding the <p> tag: http://img193.imageshack.us/img193/8934/screen2a.jpg Hello, While testing a site in different browsers/systems, I've found the need to have a suitable replacement for Arial Narrow. Since font-stretch doesn't work (not implemented?), I need a widely available substitute. I've thought about font embedding, but all those articles out there with demos, I can't get them to work with Firefox. So I'm guessing Firefox simply doesn't support font embedding? Is there a way to make font embedding work? The other issue I'm having trouble with, how to make the link outlines disappear in IE? I've added :active, :focus { outline: 0 } to my stylesheet, and it works great in Firefox, however, IE insists on displaying an outline on the links. Any advice on these issues? Hello all I have a page that uses css for the layout. The issue that I can not figure out how to fix is when someone re-sizes their browser the page content is all resized. How would I lock th positions of each span on the page so even if they resize (smaller) the browser the span's will stay where they are when the page is fully maximized on the users screen? I hope it is clear what I am asking. I tried puttin like a float tag but that does not work at all. Thanks all Jason Hi Folks [I don't think my last attempt went through - I made a mistake], I have a page here with a problem that's occupied me for over a day. I can't get my non-floated 'DIV#left' to sit beside my floated 'DIV#right'. The DIV#left containing the subnav slips, or is forced down the page; http://johniwhite.com/tests/ireland/level_2.html I'd love to hear the easy answer! Here's the CSS: div#left_level2 { width: 130px; height: 50px; vertical-align: top; padding: 0; margin: 0px; /* display: inline;*/ /* border: 1px solid #0F0;*/ } div#right_level2 { float: right; width: 594px; height: 50px; padding: 0 0 0 0; margin-top: 0px; margin-right: 0px; vertical-align: top; } ---- The code for a more simple version at http://johniwhite.com/tests/ireland/2_col_test.htm <div id="middle"> <div id="right_level2"><!--the floated div for content--></div> <div id="left_level2"><!--the non-floated div for subnav--></div> </div> ---------- Love to hear thoughts, thanks John Image example here. Text different behavior Why is is that the text drops down in different area of the div. The div is set a specific size but the text drops down where ever it wants. I have not added ant <br> tags just srtaight text and it still drops down where ever. Why does the text not go all the way to the end of the div anyway? When content exceeds the window size, the fixed footer covers it. The center div has a min-width, the right div covers it when the window is resized to smaller than the min. (Also, center div drops in IE). I have googled these issues and searched the archives. I've tried many different techniques for getting these things in order, and this is the closest I've gotten so far. What I want: 1.A footer that sticks to the bottom of the viewport if there is not enough content AND stays below the container when the container is longer than the viewport. 2. The center div to be liquid with a min-fixed width and the right div to move along the edge of the center div and not cover it when viewport is sized smaller than the center div's min width. Here is a simplified version of the HTML (none of the extra divs that are used to make rounded corners) 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>Troubleshooting</title> <link rel="stylesheet" href="layout8.css" type="text/css" /> <link rel="stylesheet" href="round.css" type="text/css" /> </head> <body> <div id="header"> <div id="masthead"></div> <div id="topnav"><div class="searchbar">Search</div> <div class="homebar"><span>Home </span></div></div> </div> <div id="container"> <div id="left"></div> <div id="right"></div> <div id="content"></div> </div> <div class="clear"> </div> </div> <div id="footer"></div> </body> </html> I think there's too much CSS to post here, but everything can be found at: www. observera. com/troubleshootingpage/index. htm CSS @ layout.css and round.css I appreciate any help you can offer Em Hey all, I have been working on a site in CSS which looks pretty much how we want it to look in FF, however IE is giving me all sorts of problems. If you look at the following page http://www.mobileshop.com/3phones.com/viewphone.php in firefox you can see that the middle (white) column rests nicely between the two side columns, however, if you change to IE and look at the very same page then the middle column drops below the left side column. This is my first time at a css design and i cant work out why it is doing it, also the main logo is supposed to be centered, in IE it is left aligned. If you are viewing the source, you will see a tag soup of tables in the middle of the nice CSS, this is due to the fact that we pick up a feed and it dumps the data into our page. This will change to be pure CSS but i am running out of time to get the site launched first. One final question, i downloaded the Tidy HTML validator for firefox. I managed to get my pages passed the W3c online checker, but tidy claimed there was still errors. I went through and fixed all them to get a happy green tick but then when going back to W3C validation some things failed. I was under the impression that Tidy was developed by W3C, so why do they give varying results regarding validation? Thank you for your time. Hello. I am new to website making and I am trying to create a wrapper that is centered, and 2 <divs> in it. One that will align to the right of the wrapper, one to the left. Heres what I did CSS: Code: #Wrapper {
z-index: 3;
position: absolute;
width:800px;
height:600px;
top:40px;
margin-left: auto;
margin-right: auto;
border: 4px solid red;
background-color: transparent;
}
#Left {
z-index: 2;
position: relative;
width:80px;
height:100px;
top:20px;
left:10px;
border: 1px solid #FFF;
background-color: rgb(255,255,0);
}
#Right {
z-index: 1;
position: relative;
width:100px;
height:80px;
right:10px;
border: 1px solid #FFF;
background-color: rgb(0,255,0);
}
HTML Code: <!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="author" content="Adzu Kiyako">
<meta name="copyright" content="Copyright Stuff here">
<meta name="robots" content="noindex">
<title>Title of my page</title>
</head>
<body>
<body id="htmlsource">
<body style="background-color:#292929;">
<div id="Wrapper"></div>
<div id="Left">This should be on the left side of the centered wrapper</div>
<div id="Right">This should be on the Right side of the centered wrapper</div>
</div>
</body>
</html>
My problem is 1-The wrapper does NOT align in the center of the page, and 2- The 2 other <div> dont seem to care about my wrapper, the position themself relatively to the viewport, not my wrapper... Any clue of what I can do? Please go easy on me, this is so new to me! Thanks a million times! I'm creating a site that works fine in FF. However, in IE, if I resize the window, the content doesn't move until I refresh the page. When I refresh the page, everything is centered again, but dragging IE to a new size, keeps everything in the same spot. Is there a fix for this? Unfortunately, I don't have the site posted, but may be able to throw it up somewhere if needed. Thanks. Edit: Nevermind. Had the body set to a certain width. Took that out and it works. hey all i have a prob....when the browser window is maximised it is fine...however...when i make it a bit smaller the content div shoots off halfway down the page Go Here To See What I Mean the css can be found here any ideas...cus im stumped thanks very much RF The spry tabs works fine if the page is directly accessed, however, when the page is accessed through the pop-up window (image below) the spry tabs are not click-able and all the contents are displayed all at once. URL I am using a local server so I do not have a url link. CSS Code Code: @charset "UTF-8";
/* SpryTabbedPanels.css - Revision: Spry Preview Release 1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/* Horizontal Tabbed Panels
*
* The default style for a TabbedPanels widget places all tab buttons
* (left aligned) above the content panel.
*/
/* This is the selector for the main TabbedPanels container. For our
* default style, this container does not contribute anything visually,
* but it is floated left to make sure that any floating or clearing done
* with any of its child elements are contained completely within the
* TabbedPanels container, to minimize any impact or undesireable
* interaction with other floated elements on the page that may be used
* for layout.
*
* If you want to constrain the width of the TabbedPanels widget, set a
* width on the TabbedPanels container. By default, the TabbedPanels widget
* expands horizontally to fill up available space.
*
* The name of the class ("TabbedPanels") used in this selector is not
* necessary to make the widget function. You can use any class name you
* want to style the TabbedPanels container.
*/
.TabbedPanels {
margin: 0px;
padding: 0px;
float: left;
clear: none;
width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
}
/* This is the selector for the TabGroup. The TabGroup container houses
* all of the tab buttons for each tabbed panel in the widget. This container
* does not contribute anything visually to the look of the widget for our
* default style.
*
* The name of the class ("TabbedPanelsTabGroup") used in this selector is not
* necessary to make the widget function. You can use any class name you
* want to style the TabGroup container.
*/
.TabbedPanelsTabGroup {
margin: 0px;
padding: 0px;
}
/* This is the selector for the TabbedPanelsTab. This container houses
* the title for the panel. This is also the tab "button" that the user clicks
* on to activate the corresponding content panel so that it appears on top
* of the other tabbed panels contained in the widget.
*
* For our default style, each tab is positioned relatively 1 pixel down from
* where it wold normally render. This allows each tab to overlap the content
* panel that renders below it. Each tab is rendered with a 1 pixel bottom
* border that has a color that matches the top border of the current content
* panel. This gives the appearance that the tab is being drawn behind the
* content panel.
*
* The name of the class ("TabbedPanelsTab") used in this selector is not
* necessary to make the widget function. You can use any class name you want
* to style this tab container.
*/
.TabbedPanelsTab {
position: relative;
top: 1px;
float: left;
padding: 4px 10px;
margin: 0px 1px 0px 0px;
font: bold 0.7em sans-serif;
background-color: #DDD;
list-style: none;
border-left: solid 1px #CCC;
border-bottom: solid 1px #999;
border-top: solid 1px #999;
border-right: solid 1px #999;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
}
/* This selector is an example of how to change the appearnce of a tab button
* container as the mouse enters it. The class "TabbedPanelsTabHover" is
* programatically added and removed from the tab element as the mouse enters
* and exits the container.
*/
.TabbedPanelsTabHover {
background-color: #CCC;
}
/* This selector is an example of how to change the appearance of a tab button
* container after the user has clicked on it to activate a content panel.
* The class "TabbedPanelsTabSelected" is programatically added and removed
* from the tab element as the user clicks on the tab button containers in
* the widget.
*
* As mentioned above, for our default style, tab buttons are positioned
* 1 pixel down from where it would normally render. When the tab button is
* selected, we change its bottom border to match the background color of the
* content panel so that it looks like the tab is part of the content panel.
*/
.TabbedPanelsTabSelected {
background-color: #EEE;
border-bottom: 1px solid #EEE;
}
/* This selector is an example of how to make a link inside of a tab button
* look like normal text. Users may want to use links inside of a tab button
* so that when it gets focus, the text *inside* the tab button gets a focus
* ring around it, instead of the focus ring around the entire tab.
*/
.TabbedPanelsTab a {
color: black;
text-decoration: none;
}
/* This is the selector for the ContentGroup. The ContentGroup container houses
* all of the content panels for each tabbed panel in the widget. For our
* default style, this container provides the background color and borders that
* surround the content.
*
* The name of the class ("TabbedPanelsContentGroup") used in this selector is
* not necessary to make the widget function. You can use any class name you
* want to style the ContentGroup container.
*/
.TabbedPanelsContentGroup {
clear: both;
border-left: solid 1px #CCC;
border-bottom: solid 1px #CCC;
border-top: solid 1px #999;
border-right: solid 1px #999;
background-color: #EEE;
}
/* This is the selector for the Content panel. The Content panel holds the
* content for a single tabbed panel. For our default style, this container
* provides some padding, so that the content is not pushed up against the
* widget borders.
*
* The name of the class ("TabbedPanelsContent") used in this selector is
* not necessary to make the widget function. You can use any class name you
* want to style the Content container.
*/
.TabbedPanelsContent {
padding: 4px;
}
/* This selector is an example of how to change the appearnce of the currently
* active container panel. The class "TabbedPanelsContentVisible" is
* programatically added and removed from the content element as the panel
* is activated/deactivated.
*/
.TabbedPanelsContentVisible {
}
/* Vertical Tabbed Panels
*
* The following rules override some of the default rules above so that the
* TabbedPanels widget renders with its tab buttons along the left side of
* the currently active content panel.
*
* With the rules defined below, the only change that will have to be made
* to switch a horizontal tabbed panels widget to a vertical tabbed panels
* widget, is to use the "VTabbedPanels" class on the top-level widget
* container element, instead of "TabbedPanels".
*/
/* This selector floats the TabGroup so that the tab buttons it contains
* render to the left of the active content panel. A border is drawn around
* the group container to make it look like a list container.
*/
.VTabbedPanels .TabbedPanelsTabGroup {
float: left;
width: 10em;
height: 20em;
background-color: #EEE;
position: relative;
border-top: solid 1px #999;
border-right: solid 1px #999;
border-left: solid 1px #CCC;
border-bottom: solid 1px #CCC;
}
/* This selector disables the float property that is placed on each tab button
* by the default TabbedPanelsTab selector rule above. It also draws a bottom
* border for the tab. The tab button will get its left and right border from
* the TabGroup, and its top border from the TabGroup or tab button above it.
*/
.VTabbedPanels .TabbedPanelsTab {
float: none;
margin: 0px;
border-top: none;
border-left: none;
border-right: none;
}
/* This selector disables the float property that is placed on each tab button
* by the default TabbedPanelsTab selector rule above. It also draws a bottom
* border for the tab. The tab button will get its left and right border from
* the TabGroup, and its top border from the TabGroup or tab button above it.
*/
.VTabbedPanels .TabbedPanelsTabSelected {
background-color: #EEE;
border-bottom: solid 1px #999;
}
/* This selector floats the content panels for the widget so that they
* render to the right of the tabbed buttons.
*/
.VTabbedPanels .TabbedPanelsContentGroup {
clear: none;
float: left;
padding: 0px;
width: 30em;
height: 20em;
}
Hi, I am generating what should be a simple css layout. I have a header, some left content (which is comprised of layers that hold an image and some over the top to form a kind of navigation tablet), some content to the right of that for text, and finally a footer. Bog standard design... The problem I have is that the content to the right of the left content is sat below both the left content and the footer currently. What it should be doing is sitting to the right of the left content and where the text 'grows' push the footer down the page: 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 name="generator" content="HTML Tidy for Linux (vers 1 September 2005), see www.w3.org" />
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/* mac hide \*/
html, body {height:100%}
/* end hide*/
body {
padding:0;
margin:0;
color: #000000;
}
#wrapper {
position: relative;
min-height: 100%;
height: auto !important;
height: 100%;
}
#header{
position:absolute;
top:0;
left:0;
width:100%;
height:224px;
border-top:0px solid #feffff;
border-bottom:0px solid #feffff;
overflow:hidden;
color: #000000;
}
#content {
background-color: #ccc;
padding-bottom: 50px;
}
* html #footer {/*only ie gets this style*/
\height:40px;/* for ie5 */
he\ight:38px;/* for ie6 */
}
#navlist li
{
list-style: none;
margin: 0;
padding: 0.25em;
border-top: 0px white;
}
#navlist li a {
color: #4E261B;
text-decoration: none;
font-family: palatino linotype, helvetica, sans-serif;
font-size: .90em;
line-height: 200%;
}
a{
font-family: Tempus Sans ITC;
color: #4E261B;
font-weight: bold;
font-size: 14pt;
}
#content {
background-color: white;
padding-bottom: 50px;
padding-left: 200px;
padding-top: 0px;
}
#footer {
background-color: #ff0;
width: 100%;
height: 50px;
line-height: 50px;
position: absolute;
bottom: 0 !important;
bottom: -1px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<img border="0" src="images/Banner_flat.jpg" alt="Banner" width="100%" height="224" align="left" />
</div>
<div style="position: absolute; width: 169px; height: 243px; z-index: 1; left: 4px; top: 229px" id="layer1">
<img border="0" src="images/bridetablet1.bmp" alt="Menu" width="190" height="302" /></div>
</div>
<div style="position: absolute; width: 169px; height: 243px; z-index: 2; left: 14px; top: 257px" id="layer2">
<div id="navcontainer"></div>
<ul id="navlist">
<li><a href="hello" class="c2">Home</a></li>
<li><a href="About%20Us" class="c2">About Us</a></li>
<li><a href="User%20Register" class="c2">User Register</a></li>
<li><a href="User%20Log-In" class="c2">User Log-In</a></li>
<li><a href="Supplier%20Log-In" class="c2">Supplier Log-In</a></li>
<li><a href="Join" class="c2">Join</a></li>
</ul>
</div>
<div id="content">
<p>Stuff.</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p><p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>
Thanks, G Hello All, I'm currently trying to finish the main design for my church's website - and I'm having a problem with the #mainbody height. LINK TO SITE :: http:// update.gcmpg.com/ If I don't specify a height for #mainbody, it looks like this :: http:// img522.imageshack.us/img522/7663/noheight.png If I do specify a height for #mainbody (350px in this case), it looks like this :: http:// img716.imageshack.us/img716/5158/height350px.png Basically I'm trying to avoid having to specify a height for #mainbody on every page, it seems like a ridiculous notion to have to do so. I've tried the clearfix, but it doesn't work. and I'm having a brain fart. Thanks in advance for all the replies! Cheers! PS -don't mind the ugly graphics - they're just placeholders I'm working on my first website. Its a simple portfolio site. I have it mostly completed, but i would like to center all the content in the browser. I found several soulutions to this and I can not seem to get any of them to work. I think it might be stemming from my use of absolute posistioning, but idk, just a newbie here. here is the 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>Rot</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">
</style>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" >
</head>
<body>
<div id="wrapper">
<div id="logo"><a href="index.html"><img border="no" src="text/logo.png" alt="logo"></a></div>
<div id="rot"><a href="index.html"><img border="no" src="text/rot.png" alt="rot"></a></div>
<a href="info.html" class="info" title="info"><span class="displace">info</span></a>
<div id="work"><a href="index.html"><img border="no" src="text/worksolid.png" alt="work"></a></div>
<a href="projects/dreaming_again.html" class="thumb1" title="thumb1"><span class="displace">project1</span></a>
<a href="projects/futility.html" class="thumb2" title="thumb2"><span class="displace">project2</span></a>
<a href="projects/grid_dreams.html" class="thumb3" title="thumb3"><span class="displace">project3</span></a>
<a href="projects/transgress.html" class="thumb4" title="thumb4"><span class="displace">project4</span></a>
<a href="projects/curls.html" class="thumb5" title="thumb5"><span class="displace">project5</span></a>
<a href="projects/city_sleeps.html" class="thumb6" title="thumb6"><span class="displace">project6</span></a>
<a href="projects/inner_turmoil.html" class="thumb7" title="thumb7"><span class="displace">project7</span></a>
<a href="projects/transitions.html" class="thumb8" title="thumb8"><span class="displace">project8</span></a>
<a href="projects/detritus.html" class="thumb9" title="thumb9"><span class="displace">project9</span></a>
<a href="projects/emerald_city.html" class="thumb10" title="thumb10"><span class="displace">project10</span></a>
</div>
</body>
</html>
and here is the CSS Code:
#wrapper {
text-align: left;
width:990px;
margin:0px auto; /* Right and left margin widths set to "auto" */
text-align:left; /* Counteract to IE5/Win Hack */
padding:0px;
border:1px dashed #333;
background-color:#eee;
}
a {
outline: none;
}
#logo{
position:absolute;
top:15px;
left:645px;
}
#rot{
position:absolute;
top:30px;
left:733px;
}
#work{
position:absolute;
top:375px;
left:15px;
}
#info{
position:absolute;
top:285px;
left:15px;
}
a.info {
position: absolute;
top:285px;
left:15px;
display: block;
width: 75px;
height: 75px;
text-decoration: none;
background: url("text/info.png");
}
a.info:hover {
background-position: 0 -75px;
}
.displace {
position: absolute;
left: -5000px;
}
a.work {
position: absolute;
top:375px;
left:15px;
display: block;
width: 75px;
height: 75px;
text-decoration: none;
background: url("text/work.png");
}
a.work:hover {
background-position: 0 -75px;
}
.displace {
position: absolute;
left: -5000px;
}
/*
* thumb1+++++++++++++++++++++++++++++++++++
*/
a.thumb1 {
position: absolute;
top:105px;
left:105px;
display: block;
width: 615px;
height: 75px;
text-decoration: none;
background: url("images/thumbs/dreaming_again.jpg");
}
a.thumb1:hover {
background-position: 0 -75px;
}
.displace {
position: absolute;
left: -5000px;
}
/*
* thumb2+++++++++++++++++++++++++++++++++++
*/
a.thumb2{
position: absolute;
top:195px;
left:105px;
display: block;
width: 615px;
height: 75px;
text-decoration: none;
background: url("images/thumbs/futility.jpg");
}
a.thumb2:hover {
background-position: 0 -75px;
}
.displace {
position: absolute;
left: -5000px;
}
/*
* thumb3+++++++++++++++++++++++++++++++++++
*/
a.thumb3{
position: absolute;
top:285px;
left:105px;
display: block;
width: 615px;
height: 75px;
text-decoration: none;
background: url("images/thumbs/grid_dreams.jpg");
}
a.thumb3:hover {
background-position: 0 -75px;
}
.displace {
position: absolute;
left: -5000px;
}
/*
* thumb4+++++++++++++++++++++++++++++++++++
*/
a.thumb4{
position: absolute;
top:375px;
left:105px;
display: block;
width: 615px;
height: 75px;
text-decoration: none;
background: url("images/thumbs/transgress.jpg");
}
a.thumb4:hover {
background-position: 0 -75px;
}
.displace {
position: absolute;
left: -5000px;
}
/*
* thumb5+++++++++++++++++++++++++++++++++++
*/
a.thumb5{
position: absolute;
top:465px;
left:105px;
display: block;
width: 615px;
height: 75px;
text-decoration: none;
background: url("images/thumbs/curls.jpg");
}
a.thumb5:hover {
background-position: 0 -75px;
}
.displace {
position: absolute;
left: -5000px;
}
/*
* thumb6+++++++++++++++++++++++++++++++++++
*/
a.thumb6{
position: absolute;
top:555px;
left:105px;
display: block;
width: 615px;
height: 75px;
text-decoration: none;
background: url("images/thumbs/city_sleeps.jpg");
}
a.thumb6:hover {
background-position: 0 -75px;
}
.displace {
position: absolute;
left: -5000px;
}
/*
* thumb7+++++++++++++++++++++++++++++++++++
*/
a.thumb7{
position: absolute;
top:645px;
left:105px;
display: block;
width: 615px;
height: 75px;
text-decoration: none;
background: url("images/thumbs/inner_turmoil.jpg");
}
a.thumb7:hover {
background-position: 0 -75px;
}
.displace {
position: absolute;
left: -5000px;
}
/*
* thumb8+++++++++++++++++++++++++++++++++++
*/
a.thumb8{
position: absolute;
top:735px;
left:105px;
display: block;
width: 615px;
height: 75px;
text-decoration: none;
background: url("images/thumbs/transitions.jpg");
}
a.thumb8:hover {
background-position: 0 -75px;
}
.displace {
position: absolute;
left: -5000px;
}
/*
* thumb9+++++++++++++++++++++++++++++++++++
*/
a.thumb9{
position: absolute;
top:825px;
left:105px;
display: block;
width: 615px;
height: 75px;
text-decoration: none;
background: url("images/thumbs/detritus.jpg");
}
a.thumb9:hover {
background-position: 0 -75px;
}
.displace {
position: absolute;
left: -5000px;
}
/*
* thumb10+++++++++++++++++++++++++++++++++++
*/
a.thumb10{
position: absolute;
top:915px;
left:105px;
display: block;
width: 615px;
height: 75px;
text-decoration: none;
background: url("images/thumbs/emerald_city.jpg");
}
a.thumb10:hover {
background-position: 0 -75px;
}
.displace {
position: absolute;
left: -5000px;
}
|
|||||||