|
CSS - Overlapping Sections In Ie
Hi...
I am not a coder, Im new at this. Im not even really sure how to explain my problem either, so bear with me, please. I am working on a theme for a site that allows you to edit the css style applied to the page, like myspace.com. Unfortunately there are limitations to this, like how many section IDs there are and such. In order to make a custom page, I am using ordered lists in BBcode. In forefox, I was able to move the ordered lists outside of their section by using positioning, but unfortunately in IE, it would not allow this. Basically the lists would be hidden/invisible outside of the section element parameters. So, again in order to work around this, I made the section the ordered lists were in cover the entire page. Firefox handled this fine, and the elements on the page worked together so long as text was not right on top of links etc. IE, no such luck. The links in another section do not activate even though they are not visually overlapping. This creates a problem for me, as I will now need to make another ordered list to create links which will activate. Is there a way I can get around this? Because I have a section which covers the entire page in IE, and overlaps onto other sections, I'm looking for code which will allow the sections in IE to overlap without causing one section or the other to behave incorectly. Anyway, here is the link to my page so you can see what I mean. The links in question are the little glowy circles. They work in firefox, but they only appear in IE and will not act as links. Any help would be appreciated. I dont mind re-doing the code and the lists in order to avoid adding more code to create links which work. http://www.gaiaonline.com/profile/index.php?view=profile.ShowProfile&item=305091 Thanks Kim Similar TutorialsHello, I'm still playing around with CSS and I put together this test, to see if I could create tabs on a page.... Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test Site</title>
<style type="text/css">
/* ----- ALL ----- */
* {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
/* ----- TABS ----- */
#tabs {
float:left;
}
#tabs, #tabs ul, #tabs li {
margin:0;
padding:0;
list-style:none;
}
#tabs a {
background-color:#AE5700;
color:#FFFFFF;
margin-left:1px;
margin-right:1px;
margin-bottom:1px;
padding:5px 5px 5px 5px;
text-decoration:none;
cursor:pointer;
float: left;
}
#tabs a:hover {
color:#000000;
background-color:#FFCC99;
}
#tabs .active a {
color:#000000;
background-color:#FF9900;
padding-bottom: 1px;
margin-bottom:0;
}
/* ----- SECTIONS ----- */
#section1 {
background-color:#FF9933;
padding: 20px 20px 20px 20px;
}
</style>
</head>
<body>
<div id="tabs">
<ul>
<li class="active"><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
</ul>
</div>
<br /> <!-- If I remove this, the section overlaps the tabs! -->
<div id="section1">
Hello
</div>
</body>
</html>
I know I know, it's very basic! The problems im trying to figure out are as follows.... 1. This code displayed in Firefox, works as i'd expect. But under the dreaded IE, it displays the tabs diagonally down the page. I know that IE doesn't work as it should, but how do I get the tabs to look the same in IE as they do in Firefox (ie... display them correctly!) 2. The tabs are meant to sit right on top of the section of orange. Using the BR tag (commented in script), I can get it to move down a little bit - but how do I achieve positioning the section box right underneath the tabs using CSS? All help is appreciated! JT p.s. Attached a screenie of the browser output for reference! Hi Guys! Most of the links in my document are set to #ffffff, because they have a dark background. I have 'content' section that I want to show blue links. I tried adding the following code into my style sheet: PHP Code: a.content:link { color: #0000FF; text-decoration: underline; } a.content:visited { color: #0000FF; text-decoration: underline; } a.content:hover { background-color: #6666FF; text-decoration: underline; } And nothing!? (apart from the layout crapped up!!!!) Could someone point me in a better direction? Full CSS below! Thanks Charlie PHP Code: html {height:100%;} body { margin:0; padding:0; height:100%; background-image:url(images/newback.jpg); background-position:top right; background-repeat:repeat-y; background-color:#ffffff; font-family: sans-serif; font-size: .7em; } #wrap { background-image:url(images/newback150px.jpg); background-position:top left; background-repeat:repeat-y; min-height:100%; } * html #wrap {height:100%} div#navbar {padding: 0%; text-align: center; background-image:url(images/newback.jpg); background-repeat: repeat; background-color: #000044; color: #ffffff; margin-bottom: 0px; border-bottom: solid #000000 1px} div#formbox { color: #000000; padding: 2%; border: #000044 solid 1px; } div#userbar {padding: 0%; text-align: center; background-image:url(images/newback.jpg); background-repeat: repeat; background-color: #000044; color: #ffffff; margin-bottom: 0px; border-bottom: solid #000000 1px} #header { background-color: #000044; background-image:url(images/wel.jpg); width 100%; background-repeat: repeat; border-bottom: 2px #000000 solid; color: #ffffff; margin:0; padding:0; height:100px; } } #left { float:left; width:149px; background-image:url(images/newback.jpg); background-repeat: repeat; color: #ffffff; text-align:center; background-color: #000044; border-right: 1px #000000 solid; } #main { position:relative; margin-left:200px; } #content { text-align:center; padding:4px; margin-right:200px; margin-bottom:150px; text-align:left; } #clearfooter { clear:both; height:80px; overflow:hidden; } #footer { height:40px; background-color: #000044; border-top: 2px #000000 solid; margin:0; padding:0; background-image:url(images/newback.jpg); background-repeat: repeat; margin-top:-0px; color: #ffffff; text-align:center; } div#newsbar {padding: 0%; text-align: center; height:140px; background-image:url(images/newback.jpg); background-repeat: repeat; background-color: #000044; color: #ffffff; margin-left: +150px; margin-right: +10px; margin-top: -180px; border: 2px #000000 solid; width: auto;} code { font-size:0.8em; border:1px solid navy; background-color:white; color:#333333; padding:10px; display:block; width:80%; margin:10px auto; overflow:auto; } h1 {font-size: 1.4em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} h2 {font-size: 1.3em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} h3 {font-size: 1.2em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} h4 {font-size: 1.1em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} h5 {font-size: 1em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} a:link {color: #ffffff; text-decoration: underline;} a:visited { color: #ffffff; text-decoration: underline;} a:hover {color: #dedbcb; background-color: #0000FF; text-decoration: underline;} Hi all, I have a 2-column layout for my web pages plus a header and footer section. The left column contains a navigation menu (which grows and shrinks depending on the current menu selection), and the right column contains the main text and other information. I float the nav menu left. No problem. But when the footer is displayed (and I have set "clear: both" on the footer element to try and keep it at the bottom), it will appear somewhere in the middle of the menu in cases where the menu is long (vertically) and the main content area contains only a few lines of text. My current method to drop the footer below the menu is very klunky, and probably what most people do (unless they know of a better way). Yes, the series of <br /> tags before printing the footer. Is there a better way of ensuring that the footer is placed where it should (below all other content) so I don't have to insert all those <br /> tags? My CSS for the page layout is: Code: #doc { /* Main document area */
margin-left: 5%;
margin-right: 5%;
margin-top: 5px;
border: solid 1px #900;
}
#logo {
text-align: center;
background: #c30000;
}
#main {
margin-left: 150px;
margin-right: 0%;
padding: 10px;
border-left: solid 1px #c00;
background: #fff;
color: #000;
}
#nav {
position: absolute;
margin-left: 0%;
float: left;
padding: 0px;
border: 0px;
top: 110px;
width: 150px; /* Same as margin-left setting in #main */
color: #000;
}
#footer {
clear: both;
margin-left: 0%;
margin-right: 0%;
border-bottom: 2px solid #906;
background-color: #c00;
color: #ddd;
font-weight: bold;
text-align: center;
line-height: 1.5;
}
And a typical html page would be structured thusly: Code: <!-- USUAL HTML BEGINNING STUFF HERE -->
<body>
<div id="doc">
<!-- Logo image -->
<div id="logo">
<!-- LOGO GOES HERE -->
</div>
<!-- Main content window -->
<div id="main">
<!-- MAIN CONTENT GOES HERE -->
</div>
<!-- Navigation menu -->
<div id="nav">
<!-- NAV MENU CODE HERE -->
</div>
<!-- footer -->
<div id="footer">
<!-- FOOTER CODE HERE -->
</div>
</div>
</body></html>
Is my CSS coding incorrect, or is this a universal problem? Any help/suggestions will be much appreciated. Hi, my css drop down menu seems to be working fine in firefox, but there are a few problems in IE. It didn't even work in IE7 until I added Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 1. In IE7, if you first hover over the link to get the drop down menu to show, move away, then hover over the menu again, it will show the blank sub menus of the one you last have opened. This is hard to explain. Please see my webpage for what I mean. http://ling.twinner.com.tw/uselink/index.php Move your mouse to the Products link at the top. 2. My menu seems to load slow. Is it because I have many sub menus or is my css not efficient? 3. How do I set the sub menu height to auto? Here is my css: http://ling.twinner.com.tw/uselink/menu_style.css Any suggestion is greatly appreciated. i have just finished making a site for a collective of illustrators I belong to, and now I'm hearing back that some people are having trouble with it. It's at www.illustratorselbow.com (I'm not allowed to post a url without spaces!) & i'm hoping people might be able to have a look at it & view the source and help me out. If you click on somebody's name, you see the thumbnails on the right and the image on the left. When you compress the window, the thumbnails jump about and shrink. I want to make it so this can't happen- I'd rather that the section with the main image in it compressed a bit, or would side-scroll. Any idea how to do this? I'm pretty new to CSS too so I don't really know how to fix this. It's just a drag because on computers with smaller screens/resolutions, the thumbnails look really messy. (Bear in mind that I have extremely basic knowledge of html/css/php, i hand code rather than use dreamweaver etc, and I've never used php or css before this site. I started using it because I keep hearing that frames are bad news nowadays, but it's been sooo much trouble with my limited abilities... alas) Hello, I can't seem to figure out how to make my CSS drop down menu work the way I want it to. I am using an id in the body tag and a class in the navigatin links so the style sheet will mark what section of the site you are in by making the background change color. This works. The problem is, now that I have the sections being marked, the highlight no longer works. How can I get the highlight to work in the section you are in? I have been experimenting for hours but I can't make it work. http://www.tpxdesign.com/test/Valliant/alpha/index7.php My nav menu code and nav style sheet: Code: <!--[if !IE]><!-- start nav --><![endif]-->
<div id="side_nav_bar" class="floater">
<div id="nav_menu">
<ul id="nav">
<li><a href="demoreel.php" class="port">Portfolio</a>
<ul>
<li><a href="demoreel.php" class="port">Demo Reel/s</a></li>
<li><a href="shorts.php" class="port">Shorts</a></li>
<li><a href="musicvid.php" class="port">Music Video</a></li>
<li><a href="comvid.php" class="port">Commercial</a></li>
<li><a href="miscvid.php" class="port">Misc. Video/Film</a></li>
<li><a href="gallery.php" class="port">Photo. Gallery</a></li>
</ul>
</li>
<li><a href="services.php" class="serv">Services</a>
</li>
<li><a href="newupdate.php" class="newe">News & Events</a>
<ul>
<li><a href="newupdate.php" class="newe">News/Updates</a></li>
<li><a href="eventblog.php" class="newe">Event Calendar</a></li>
</ul>
</li>
<li><a href="bio.php" class="about">About Valliant</a>
<ul>
<li><a href="resume.php" class="about">Resume</a></li>
<li><a href="bio.php" class="about">Biography</a></li>
<li><a href="contact.php" class="about">Contact</a></li>
</ul>
</li>
<li><a href="links.php" class="link">Links</a></li>
<li><a href="index7.php" class="home">Home</a></li>
</ul>
</div>
</div>
<!--[if !IE]><!-- end nav --><![endif]-->
Code: ul {
margin: 0;
padding: 0;
list-style: none;
width: 199px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 198px; /* Set 1px less than menu width */
top: 0;
display: none;
}
/* Styles for Menu Items */
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
li:hover ul, li.over ul { display: block; } /* The magic */
#home .home, #about .about, #link .link, #newe .newe, #serv .serv, #port .port
{
color: #000;
background-color: #eee;
}
New construction of a website. I've had no issue with any css. As soon as I started to put in my blog (Wordpress), I realized that changing a would effect other tags that were no encased in this . I dismissed as a flaw in my code that wasn't working correctly with the Wordpress theme. However, now I'm have the same issue with an RSS reader. The code works perfectly in IE9 and Chrome v7. But, it doesn't work in Firefox. http://www.imzac.com/truf.php http://www.imzac.com/common/master.css In the recent post section, you see my heading is larger and has a different weight. This is the only tag that code has allotted for these properties. However, it effects the "Continue Reading" and the link at the footer of my page. Again, no issues in IE9 and Chrome v7. Here's the RSS feed script. What's you're looking for is about halfway down and then near the end. It's the <title> lines. Code:
<?php
<?php
require_once("rsslib.php");
echo RSS_Display("http://www.xul.fr/rss.xml", 15);
? >
*/
$RSS_Content = array();
function RSS_Tags($item, $type)
{
$y = array();
$tnl = $item->getElementsByTagName("title");
$tnl = $tnl->item(0);
$title = $tnl->firstChild->textContent;
$tnl = $item->getElementsByTagName("link");
$tnl = $tnl->item(0);
$link = $tnl->firstChild->textContent;
$tnl = $item->getElementsByTagName("pubDate");
$tnl = $tnl->item(0);
$date = $tnl->firstChild->textContent;
$tnl = $item->getElementsByTagName("description");
$tnl = $tnl->item(0);
$description = $tnl->firstChild->textContent;
$y["title"] = $title;
$y["link"] = $link;
$y["date"] = $date;
$y["description"] = $description;
$y["type"] = $type;
return $y;
}
function RSS_Channel($channel)
{
global $RSS_Content;
$items = $channel->getElementsByTagName("item");
// Processing channel
$y = RSS_Tags($channel, 0); // get description of channel, type 0
array_push($RSS_Content, $y);
// Processing articles
foreach($items as $item)
{
$y = RSS_Tags($item, 1); // get description of article, type 1
array_push($RSS_Content, $y);
}
}
function RSS_Retrieve($url)
{
global $RSS_Content;
$doc = new DOMDocument();
$doc->load($url);
$channels = $doc->getElementsByTagName("channel");
$RSS_Content = array();
foreach($channels as $channel)
{
RSS_Channel($channel);
}
}
function RSS_RetrieveLinks($url)
{
global $RSS_Content;
$doc = new DOMDocument();
$doc->load($url);
$channels = $doc->getElementsByTagName("channel");
$RSS_Content = array();
foreach($channels as $channel)
{
$items = $channel->getElementsByTagName("item");
foreach($items as $item)
{
$y = RSS_Tags($item, 1); // get description of article, type 1
array_push($RSS_Content, $y);
}
}
}
function RSS_Links($url, $size = 15)
{
global $RSS_Content;
$page = "<ul>";
RSS_RetrieveLinks($url);
if($size > 0)
$recents = array_slice($RSS_Content, 0, $size + 1);
foreach($recents as $article)
{
$type = $article["type"];
if($type == <img src="http://csscreator.com/sites/all/modules/smileys/packs/Roving/innocent.png" title="Innocent" alt="Innocent" class="smiley-content" /> continue;
$title = $article["title"];
$link = $article["link"];
$page .= "<span class=\"title\" style=\"font-color:469EB5;\"><a href=\"$link\">$title</a></span>\n";
}
$page .="</ul>\n";
return $page;
}
function RSS_Display($url, $size = 15, $site = 0, $withdate = 0)
{
global $RSS_Content;
$opened = false;
$page = "";
$site = (intval($site) == <img src="http://csscreator.com/sites/all/modules/smileys/packs/Roving/innocent.png" title="Innocent" alt="Innocent" class="smiley-content" /> ? 1 : 0;
RSS_Retrieve($url);
if($size > 0)
$recents = array_slice($RSS_Content, $site, $size + 1 - $site);
foreach($recents as $article)
{
$type = $article["type"];
if($type == 0)
{
if($opened == true)
{
$page .="</ul>\n";
$opened = false;
}
$page .="<b>";
}
else
{
if($opened == false)
{
$page .= "<ul>\n";
$opened = true;
}
}
$title = $article["title"];
$link = $article["link"];
$page .= "<span class=\"title\" style=\"font-color:469EB5;\"><a href=\"$link\">$title</a></span>\n";
if($withdate)
{
$date = $article["date"];
$page .=' <span class="rssdate">'.$date.'</span>';
}
$description = $article["description"];
if($description != false)
{
$page .= "<br><span class='rssdesc'>$description</span>";
}
$page .= "</li>\n";
if($type==0)
{
$page .="</b><br />";
}
}
if($opened == true)
{
$page .="</ul>\n";
}
return $page."\n";
}
?>
Any help will be greatly appreciated. Thanks. Hi folks, Can anyone possibly help me with this layout, the blue slideshow box is overlapping the login box ? ~url removed~ Also, I am viewing this at 1440x900 screen res. Is anyone having probs with the view / layout? http://www.mrossana.com/eesdvr/ The main thing that I am worried about here is in the header. The header looks exactly the way I want it to in Firefox (Mac and PC) and Safari (Mac), but, in Internet Explorer, the "headerborder" div overlaps the ul menu in the "header" div. The "header" ul comes before the "headerborder" div in the code, so, with the negative top marging, the "headerborder" div should be behind the ul menu. Any ideas on how to fix this in IE? Do I have to add some z-index values? Or is there a better way to do this layout? Any suggestions greatly appreciated. My problem can be viewed here http://emediastudios.com.au/emma/photography/babies.html My problem is i want the image on mouse over to be on top of the stack. CSS Code: #imgmenu {position:relative; top:0px; left:0px; width: auto; background-color: #FFFFFF; border:solid 1px #FFFFFF}
#imgmenu .p1 {display:block; width: auto; height: auto; text-decoration:none; background: #FFFFFF; top:0; left:0; border:0;}
#imgmenu .p1:hover {text-decoration:none; background-color: #FFFFFF; color:#000;}
#imgmenu .large {
display:block;
position:absolute;
width:0;
height:0;
border:0;
top:0;
left:0;
z-index: 601;
visibility: visible;
}
#imgmenu .p1:hover .large {display:block; position:absolute; top:-85px; left:50px; width: auto; height: auto; border:3px solid #FFFFFF;}
#info {z-index:500; height:22em;}
HTML Code: <td><div id="imgmenu"> <a class="p1" href="#nogo" title="thumbnail image"><img src="/emma/photography/babies/Ralph3.jpg" alt="Thumbnail image" border="0" title="Thumbnail image" / ><img src="babies/big/Ralph3.jpg" alt="Enlarged view of image" name="info" class="large" id="info" title="Enlarged view of image" /></a> </div> </td> Please Help I am building a mail account (Inbox) which is using css.now there is a specific mail which contains some css elements like [code] <div>Dear all,</div> <div> </div> <div>wish u happy and safe diwali</div> <div> </div> <div>luv</div> <div>Vinoth<BR><BR><B><I>Palanivel_J@Dell.com</I></B> wrote:</div> <BLOCKQUOTE class=replbq style="PADDING-LEFT: 5px; MARGIN-LEFT: 5px; BORDER-LEFT: #1010ff 2px solid"> <META content="MSHTML 6.00.2900.2963" name=GENERATOR> <STYLE>v\:* { BEHAVIOR: url(#default#VML) } o\:* { BEHAVIOR: url(#default#VML) } w\:* { BEHAVIOR: url(#default#VML) } .shape { BEHAVIOR: url(#default#VML) } </STYLE> <STYLE>@page Section1 {size: 8.5in 11.0in; margin: 1.0in 1.25in 1.0in 1.25in; } P.MsoNormal { FONT-SIZE: 12pt; MARGIN: 0in 0in 0pt; FONT-FAMILY: "Times New Roman" } LI.MsoNormal { FONT-SIZE: 12pt; MARGIN: 0in 0in 0pt; FONT-FAMILY: "Times New Roman" } DIV.MsoNormal { FONT-SIZE: 12pt; MARGIN: 0in 0in 0pt; FONT-FAMILY: "Times New Roman" } A:link { COLOR: blue; TEXT-DECORATION: underline } SPAN.MsoHyperlink { COLOR: blue; TEXT-DECORATION: underline } A:visited { COLOR: purple; TEXT-DECORATION: underline } SPAN.MsoHyperlinkFollowed { when this mail is opened, its css interferes with the css of the page. as a result links all over the page are colored in blue. what is the method to avoid or ignore any css of the mail. Regards Rupam been trying to get this to work for a while now , but have had no luck, this works fine in IE but firefox seems to overlap my footer div. http://www.urbandream.net/mms/common/layout/site.html if anyone could help or point me in the right direction I owuld be greatful. Also if anyone is on a mac, I owuld be greatful of a screen shot to see how it looks. scott I'm trying to overlap two divs -- currently works fine in FF, but not IE 6 or 7. I need the left column to overlap the right column. Here's a sample of what I have: CSS Code: body {
background-color:#e4ebf7;
height:100%;
}
#outer {
position:relative;
margin:0 auto;
width:1000px;
padding:0px;
overflow:visible;
height:100%;
z-index:1;
}
#header {
position:relative;
height:28px;
border:1px solid #5e5e5e;
margin-bottom:5px;
z-index:2;
}
#left_column {
position:relative;
height:100%;
float:left;
width:277px;
overflow:visible;
z-index:4;
}
html #right_column {
height:768px;
}
#right_column {
position:relative;
background-color:#FFFFFF;
border:1px solid #5e5e5e;
border-left:none;
margin-left:5px;
min-height:768px;
height:auto;
z-index:3;
}
#footer {
clear:both;
height:35px;
background-color:#FFFFFF;
border:1px solid #5e5e5e;
margin:0;
margin-top:15px;
z-index:2;
}
HTML Code: <body> <div id="outer"> <div id="header">stuff here</div> <div id="left_column">bunch of other divs here</div> <div id="right_column">bunch of other divs here</div> <div id="footer">footer stuff here</div> </div> </body> I'm attempting to create three layers, each containing a selection list form item, only one of which will be visible at any one time, based on the selection of another selection list (not shown in the code below). The layers must be centered within a Table cell: Code:
<table style="width:90%">
<tr>
<td style="text-align:center;">
<div id="layer1" style="width:100%;">
<select id="select1">
<option selected>Option 1</option>
<option>Option 2</option>
</select>
</div>
<div id="layer2" style="width:100%;">
<select id="select2">
<option selected>Option A</option>
<option>Option B</option>
</select>
</div>
<div id="layer3" style="width:100%;">
<select id="select3">
<option selected>Option 1A</option>
<option>Option 2B</option>
</select>
</div>
</td>
</tr>
</table>
.
.
This alone renders each layer sequentially, one on top of the other, vertically on the page, which is not what I want. I have tried using z-index values, but I think the problem stems more from the position value. I have tried using: Code: position:relative; left:0px; top:0px; on each layer, but nothing changes. I then tried using: Code: position:absolute; left:0px; top:0px; on each layer, and the layers *did* overlap each other, but were placed at the top of the page. So before I tear out all of my hair, does anyone have a suggestion for how to place these layers within a table cell so that they are a) centered horizontally within the cell, and b) overlap each other? Any help would be greatly appreciated. Thanks! - coredumped. I am new to css, and i have a div that is overlapping another div if the page gets too long. It looks fine in IE, but not in Firefox.. here is what I have: style.css Code:
body
{
font-family: Verdana, Arial, Helvetica, sans-serif;
background-attachment: fixed;
font-size: 11px;
color: #FFFFFF;
background-color: #000000;
background-image: url(images/page_bg.jpg);
margin-top: 10px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;
padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;
background-repeat: repeat-x;
}
td
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFCC00;
}
#mainarea
{
background-color: #000000;
width: 756px;
align: center;
text-align: center
}
#logo
{
float: right;
width: 221px;
border: #CCCCCC; border-style:solid;
border-top-width: 2px; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 2px;
}
#quote
{
padding-top: 5px;
padding-left: 5px;
text-align: left;
border: #CCCCCC; border-style:solid;
border-top-width: 2px; border-bottom-width: 0px; border-left-width: 2px; border-right-width: 0px;
}
#mainimage
{
float: left;
width: 756px
}
#footer
{
background-color: #000066;
padding-bottom: 5px;
text-align: left;
padding-left: 5px;
vertical-align: top;
border: #CCCCCC; border-style:solid;
border-bottom-width: 2px; border-top-width: 0px; border-left-width: 2px; border-right-width: 2px;
}
#middlearea
{
background-color: #000000;
background-image: url(images/bg-mainarea.jpg);
text-align: left;
height: 415px;
vertical-align: top;
background-repeat: no-repeat;
background-align: left;
border: #CCCCCC; border-style:solid;
border-bottom-width: 2px; border-top-width: 0px; border-left-width: 2px; border-right-width: 2px;
}
#leftnav
{
float: left;
width: 198px;
vertical-align: top
}
#content
{
color: #999999;
float: right;
width: 527px;
padding-left: 7px;
padding-right: 7px;
padding-bottom: 7px;
padding-top: 15px;
line-height: 18px;
vertical-align: top
}
a
{
color: #FFFFFF;
text-decoration: none
}
a:hover
{
color: #6699CC;
text-decoration: underline
}
main.html Code: <html> <head> <title>Title Here</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <div align="center"> <div id="mainarea"> <div class="style1" id="logo"> <img src="images/logo.gif"> </div> <div id="quote"> Put some kind of a quote/saying/slogan here?<br><br><br> </div> <div id="mainimage"> <img src="images/image-home.jpg"> </div> <div style="clear:both"> </div> <div id="middlearea"> <div id="content"> blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br> blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br> blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br> </div> <div id="leftnav"> Navigation Links Here </div> </div> <div id="footer"> Footer text here </div> </div> </div> </body> </html> Hey, I'm new both here, and to CSS, but I hope to learn. I just dove into it headfirst today, and I'm having some trouble. Here's the whole source code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>WFSE- American College Radio</title>
<style type="text/css">
img{border:none;}
#ban{height:160px; background-image: url(bg13.jpg); margin:0px; padding:0px;}
#menu{height:40px; background-color:#462529; margin-left: auto; margin-right: auto; text-align: center; padding:0px;margin:0px;}
#main{height:100%; background-image: url(bg14.png); margin:0px; padding:0px;}
#break{height:13px; width: 21%; background-color:#462529; text-align: center; padding: 0px; filter:alpha(opacity=70);-moz-opacity:.70;opacity:.70;font-family:Verdana, Arial, Helvetica;font-size: 13px; line-height:13px; font-style:bold; font-color:#000000; float: right; clear: right;}
#content{width:69%; height:100%; margin-left: 25px;padding: 0px; background:white; float:left; filter:alpha(opacity=50);-moz-opacity:.50;opacity:.50;font-family:Verdana, Arial, Helvetica;font-size: 14px;line-height:26px;text-align:center;}
#sidebar {width:21%;margin-right:0px;padding:0px;background:white;filter:alpha(opacity=50);-moz-opacity:.50;opacity:.50;font-family:Verdana, Arial, Helvetica;font-size: 14px;line-height:26px;text-align:right;float: right; clear: right;}
</style>
</head>
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">
<div id="banner">
<p id="ban">
<img src="ban1.jpg" border="0" alt="WFSE American College Radio" align="left">
</p>
</div>
<div id="menuuu">
<p id="menu">
<img src="mainbutton.jpg" style="opacity:0.7;filter:alpha(opacity=70)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.7;this.filters.alpha.opacity=70" />
<img src="djprofiles2.jpg" style="opacity:0.7;filter:alpha(opacity=70)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.7;this.filters.alpha.opacity=70" />
<img src="music2.jpg" style="opacity:0.7;filter:alpha(opacity=70)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.7;this.filters.alpha.opacity=70" />
<img src="sports2.jpg" style="opacity:0.7;filter:alpha(opacity=70)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.7;this.filters.alpha.opacity=70" />
<img src="links2.jpg" style="opacity:0.7;filter:alpha(opacity=70)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.7;this.filters.alpha.opacity=70" />
</p>
</div>
<div id="main">
<div id="sidebar">
<b>request line</b>:<br>
814-732-2889
</div>
<div id="break">
<b>weather:</b>
</div>
<div id="content">
hey
</div>
</div>
</body>
</html>
Is my website, and I want the content section, floating to the left, to not be interferred with by the content floating on the right. The div should be lined up with the menu at the top. And I'm not entirely sure why there's that blank space where the page ends. Can anyone help me? I know the source is a mess. EDIT: Fixed this problem with a "position:absolute", but I'm not sure if this was the best way to solve it or not, or if I'll run into this problem again soon I'm new with CSS and have been trying to find an answer to an issue with overlapping divs in my layout. It's a two-column type layout -- the left side should stay static width and the right should resize with the window. Right now, if you close the window enough, the two divs overlap. What am I doing wrong here? I prefer that they not overlap and that the right side (#maincontent) just resize vertically/scroll. Any help would be greatly appreciated. Here's some of the CSS: Code: #content { margin-top: 24px; position: relative; width: 100%; overflow: auto }
#maincontent { position: relative; right: 8%; width: 56%; float: right }
#sidebar { position: absolute; width: 404px; float: left }
Hi, I'm a bit confused with the relative/absolute positioning issue. I thought that relative would carry the normal flow of things, but as you can see with the code below, all of the DIV items that should follow each other are overlapping even though positioning is set to relative. Can anyone help me out as to what I am doing wrong? Thanx <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style> body { padding : 0; margin-top:10px; margin-bottom:0px; background:#FFF; height: 0px; width: 0px; margin-right: 0px; margin-left: 0px; } .titleBlue{ font-family: Arial; font-size:18px; color : #003896; } .darkBlue{ font-family: Verdena; font-size:11px; color : #003896; font-weight : bold; } .smallStyle{ font-family: verdana; font-size:10px; color : #000000; text-decoration : none; } #content{ position : relative; left:50%; width:730px; margin-left:-365px; } #hrColumn{ position : absolute; top : 0; left : 0; width : 149px; border-right: 1px dotted #5D89D1; margin-right : 5px; } #hrLogo{ position : relative; top : 0; margin-bottom:5px; } #linkSection{ position : relative; margin-bottom:10px; } #columnLink{ position : relative; } #linkArrowItem{ position : absolute; top : 3px; } #linkItem{ position : absolute; left : 12px; } </style> </head> <body> <div id="content"> <div id="hrColumn"> <div id="hrLogo" class="titleBlue">Blablabla</div> <div id="linkSection" class="smallStyle"> <div id="columnLink"> <div id="linkArrowItem"><img src="arrowLogo.jpg" width="8" height="7" border="0" /></div> <div id="linkItem"><a href="#">Programs and Forms</a></div> </div> <div id="columnLink"> <div id="linkArrowItem"><img src="arrowLogo.jpg" width="8" height="7" border="0" /></div> <div id="linkItem"><a href="#">Development and Training</a></div> </div> <div id="columnLink" class="smallStyle"> <div id="linkArrowItem"><img src="arrowLogo.jpg" width="8" height="7" border="0" /></div> <div id="linkItem"><a href="#">Careers</a></div> </div> <div id="columnLink" class="smallStyle"> <div id="linkArrowItem"><img src="arrowLogo.jpg" width="8" height="7" border="0" /></div> <div id="linkItem"><a href="#">More...</a></div> </div> </div> </div> </div> </body> </html> I am having trouble overlapping these two layers, they need to be relative. here is the code Code: <div id="layer1" style="position: relative; width: 99%; height: 100px; z-index: 1; border: 0px solid gray; color: #CC0066;"> <table width="80%" cellspacing="2" cellpadding="2" border="0" align="center"> <tr> <td style="filter: Alpha (Opacity=50); -moz-opacity: .5;" bgcolor="#EBAAA5" width="50%" height="40"></td> <td style="filter: Alpha (Opacity=50); -moz-opacity: .5;" bgcolor="#EBAAA5"></td> </tr> </table> </div> <div id="layer2" style="position: relative; width: 99%; height: 100px; z-index: 2; border: 0px solid black;"> <table width="80%" cellspacing="2" cellpadding="2" border="0" align="center"> <tr> <td width="50%" height="40"><font face="verdana" size="2"><b>Oh, this is fantastic!</b></font></td> <td><center><font face="verdana" size="2"><b>This works for Firefox and IE.</b></font></center></td> </tr> </table> </div> any ideas? thanks! |
|||||||