|
CSS - Ie And "position: Fixed;"
Okay, I've been working really hard on getting myself set up with a static header on my website (one that doesn't move) using "position: fixed;" in CSS, though it recently came to my attention that Internet Explorer refuses to recognize a fixed position unlike most other browsers.
Is there an alternative I can use in Internet Explorer to ensure that the div I create never moves when the page scrolls? Any help would be greatly appreciated, as I'm about to rip my last strand of hair out of my head over this. Similar TutorialsI'm taking over a departmental web page that has a whole bunch of Code: <body topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0"> in the web pages. Does anyone know how to put this in a stylesheet so that I don't have to put this code in every <body> tag when I create a new page? I've searched all over and can't find a reasonable resolution. Thanks http://cheers-sendai.com/fluidframe.htm has a great and simple example of 3 cols (OK, 2 cols in the middle section makes "4 cols"), header and sticky footer, where the middle col has overflow:auto so it can be scrolled. GREAT example, I think (due to the use of bg colors, etc.). The left/right/width values of the divs are manipulated so that the middle section runs from 10% to 90% and the left/right divs fill in accordingly. I'd like to be able to set, for example, the left and right divs to be 150 px wide (NO percentages!) and have the middle section stretch between them (regardless of viewport width) and be able to be scrolled, too. The problem I see is that most examples use percentages. I can set the left div to be a fixed width, then set the middle section left coord. to be, say, 150px, but then I need to set its width to stretch to "150 to the left of the right side of the viewport" and I don't know how to do this. Thanks. I've been trying to find a "solution" that allows me to have a parent <div> (with a fixed position-centered) on a browser page, and have it contain multiple nested <div> tags. I want to be able to do this so it works on both IE and FF, as well MAC. Through several attempts I've utilized a background-image--but don't believe that is compliant with "all" recent platforms, etc. I've also been able to place the nested <div> tags but then shove the parent div's image down ... Does anyone have thoughts, links, suggestions or a quick example to toss my way? Thanks Much and Happy New Year! Des Hi everybody, This may actually be a very easy thing to do with CSS, but with me being a newbie who learned what CSS stands for 2 days ago, it's become a huge headache. I've tried googling and looking at some sample code but all my attempts have failed. This is pretty much my last hope. Please help! Basically, I've been trying to place two different background images at two different specific locations, one of them at left-center, and the other one at right-center. I also need them to be able to move/slide as the user scrolls up and down so that they remain visible at all times. What I have at the moment is a single background image positioned at left-center, and it does not slide. My current code looks like this: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>The Website</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<META name="description" content="Welcome to my personal website.">
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" bgcolor="#000000" text="333366" scroll="yes" style="background-image: url('devbg-left.jpg'); background-repeat: no-repeat; background-position: left center">
<div align="center"></div>
</body>
</html>
What I desperately need is one more image placed on the right side, and both of them to be able to slide. I would appreciate all kinds of help. Thank you so much. All the best, Yucel ok at Rodoslovlje I have an issue. The menu on the left is most of the times longer then the right content part. Is there a way to fix that when this occurs I can make the right part move along without editing every page and hitting enter 20 times? Thnx what is the equivilant to <table border="1" cellpadding="2" cellspacing="0"> in css? i've tried PHP Code: table { border-spacing: 0px; padding: 0px; border-colapse: colapse; border-style: solid; border-width: 1px; } td { border-style: solid; border-width: 1px; padding: 2px; } That makes the width 2px wide though. I want it to only be one. And the padding seems to be messed up as well. I am working with a dynamic page of search results where a link that should reveal a hidden layer could occur multiple times. My problem is that I need the popup layer to position relative to the link that called it, NOT to the whole page. Right now, now matter which link is clicked it shows up in the same place on the page. I have found many examples where this is the desired effect, multiple links affecting a single result area, but I can't find an example for what I need. It's similar to a sub-menu being relative to a drop-down parent, but those all seem to use lists. This shouldn't be that complicated! Thanks for any help! Here is what I've got: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1"> <title>Popup Test</title> <style type="text/css" media="screen"><!-- div#outer { position: relative; display: none; margin: 0; } .inner { padding-bottom: 4px; background-color: #ccc; text-align: center; position: absolute; left: 0px; top: 30px; width: 256px; border: solid 1px #333; } .inner img { border: 1px solid #333; } --></style> <script type="text/javascript"> function toggleLayer(whichLayer) { if (document.getElementById) { // this is the way the standards work var style2 = document.getElementById(whichLayer).style; style2.display = style2.display? "":"block"; } else if (document.all) { // this is the way old msie versions work var style2 = document.all[whichLayer].style; style2.display = style2.display? "":"block"; } else if (document.layers) { // this is the way nn4 works var style2 = document.layers[whichLayer].style; style2.display = style2.display? "":"block"; } } </script> </head> <body> <table width="740" border="0" cellspacing="0" cellpadding="0"> <tr valign="top" height="100"> <td class="searchresult" colspan="2" valign="top" width="740" height="120"> <div id="outer"> <div class="inner"> <a href="javascript:toggleLayer('outer');" title="Click to Close"><img src="http://www.google.com/images/logo_sm.gif" alt="Google" height="55" width="150" border="0" vspace="3"><br> Close</a> </div> </div> <a href="javascript:toggleLayer('outer');">popup link 1</a> </td> </tr> </table> <table width="740" border="0" cellspacing="0" cellpadding="0"> <tr valign="top" height="100"> <td class="searchresult" colspan="2" valign="top" width="740" height="100"> <div id="outer"> <div class="inner"> <a href="javascript:toggleLayer('outer');" title="Click to Close"><img src="http://www.google.com/images/logo_sm.gif" alt="Google" height="55" width="150" border="0" vspace="3"><br> Close</a> </div> </div> <a href="javascript:toggleLayer('outer');">popup link 2</a> </td> </tr> </table> </body> </html> Hello, Here's my Page: www.imagesandwords.org.uk/andrewjamesrp/ Inside the < div> #main is a line of text styled like this: Code: #opener
{
clear: both;
position: relative;
bottom: 1em;
width: 718px;
height: 25px;
text-align: center;
color: #484848;
}
Without position: relative the layout breaks down and I am not sure why. Surely a child/descendent element is relative to it's parent anyway? Also, can anyone tell me what the clear:both does in this context? I have an idea that you use it after a float and in my mind I understand it as a chance to clear the slate of any float inlfluence on future elements? Many thanks Martin First post here by the way, so go easy on me! Is posting a link forbidden? I'm using the CakePHP framework to build my site. I hope I'm not asking an impossible question and being since I'm new an all.. Anyways I finished a simple design well I thought it was simple anyway until I tried to make the content box to be a fluid width. Here's what it's supposed to look like. http://planet-rpg(dot)com/PR_style.png // yes I know I'm a new user.. Here's what I currently have. http://planet-rpg(dot)com Here's my coding. html Code:
<?php echo $html->docType('xhtml-trans'); ?>
<html>
<head>
<title>Planet RPG::. Imagine a creative universe : <?php echo $title_for_layout; ?></title>
<?php echo $html->css('styles'); ?>
</head>
<body>
<div id="top_bar">
<p>top bar</p>
</div>
<div id="body">
<div id="header">
<p>Header</p>
</div>
<div id="page-wrap">
<ul id="navigation">
<li class="first"><a href="/games/">Games</a></li>
</ul>
<div id="frame">
<div id="container">
<div id="main_content">
<p>Content area</p>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<p>footer coding</p>
</div>
</body>
</html>
css Code:
html {
background: #2b435d;
}
html, body {
margin: 0;
}
body, table {
color: #303030;
}
img { border: 0; }
#body {
background: #d8dde8;
padding: 0 0 16px;
}
#page-wrap {
min-width: auto;
margin: 10px auto;
}
#frame {
margin: 0 auto;
padding: 0px 1170px 0px 220px;
margin-top: -17px;
}
#main_content {
background-color: #fff;
}
#header {
background: url("../img/header.png") repeat-x bottom left;
height: 64px;
margin-top: 36px;
}
#navigation {
background: url("../img/navigation.png") repeat-x bottom left;
height: 31px;
margin-top: -20px;
font-family: "Arial", sans-serif !important;
font-size: 14px;
color: #fff;
text-shadow:-1px -1px 0 black;
list-style-type: none;
padding:1px 5px 1px 220px;
}
#navigation li {
float: left;
}
#navigation li a {
border-left: 2px solid #303030;
text-shadow:-1px -1px 0 black;
color: #D0D0D0;
font-size: 14px;
font-weight: bold;
text-decoration: none;
display: block;
height: 21px;
padding: 6px 12px 1px;
}
#navigation li a:hover {
color: white;
text-shadow:-1px -1px 0 black;
}
#navigation li.first {
padding-left: 236px;
margin-left: -236px;
text-shadow:-1px -1px 0 black;
}
#navigation li.first a {
background: url("../img/cursor.png")bottom center no-repeat; height:24px;
color: #6193c7;
border: 0;
text-shadow:-1px -1px 0 black;
}
#logo {
width: 166px;
height: 50px;
margin-top: -32px;
margin-left: 20px;
position: absolute;
z-index: 2;
}
#footer {
background: #607080 url("../img/footer.png") repeat-x;
height: 60px;
padding: 30px 0;
clear: both;
}
#top_bar {
background: url("../img/top_bar.png") repeat-x bottom left;
height: 36px;
font-family: "Arial", sans-serif !important;
font-size: 12px !important;
font-weight: normal !important;
height: 36px;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 5;
}
I haven't used CSS/html in awhile but if anyone can help me either "fix" the content box so it appears like mockup which would be centered on my screen as my resolution is 2560X1600(30") and just repeat the <div's> when needed. Hope someone can help me with my question. http://stuweb.cms.gre.ac.uk/~as234/full/full.htm some problems: in IE the menu at the top is "block" level but i want it to be in a line? whereas in ff its ok! in ff, one of the menu image (called "main" on the left of review) doesnt appear but if u hover over it, u will see the rollover image! the background colour should be grayish however that DOESNT happen! (I originally posted this at the end of another of my topics but I don't think it was seen). I have just noticed this problem in firefox (may happen in other browsers) but I couldnt make it happen in IE6. After the first load of the page or after a "hard refresh" (ctrl + F5) the middle and right column do not "shift up" and leave a gap. (see attached picture). But if I refresh (just F5) firefox shifts them up to display the page as it should be seen. Example Picture The site itself. Any ideas? Hi, I'm trying to build a nav using css, I need to style each <li> within the nav becuase they need to be different lengths on the page. I have had it working fine on IE but I can'#t get it working for for any other browser. Does soneone know how I can style each of my list items accordingly, notice the different block lengths for each one which is very important. I have tried both id="Style" and class="Style" and no joy, I have also tried #nav ul li li li li li a:hover in my style without id or class in my HTML Here is my Html PHP Code: <DIV id="nav"> <ul> <li id="1"><a href="Home">Home</a></li> <li id="2"><a href="About-us">About us</a></li> <li id="3"><a href="FlexNews">FlexNews</A></li> <li id="4"><a href="Careers">Careers</A></li> <li id="5"><a href="Contact">Contact</A></li> </ul> </div> Pretty straight forward, now my css PHP Code: #nav { width:1005px; vertical-align: middle; text-align: left; } #nav ul { list-style: none; padding: 0; margin: 0; } #nav li { float: left; text-align: left; } #1 a{ line-height: 20px; float: left; width: 215px; display: block; color: #000000; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #1 a:hover { line-height: 20px; float: left; width: 215px; display: block; color: #FFFFFF; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; background-color: #33A02C; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #2 a{ line-height: 20px; float: left; width: 211px; display: block; color: #000000; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #2 a:hover { line-height: 20px; float: left; width: 211px; display: block; color: #FFFFFF; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; background-color: #33A02C; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #3 a { line-height: 20px; float: left; width: 211px; display: block; color: #000000; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #3 a:hover { line-height: 20px; float: left; width: 211px; display: block; color: #FFFFFF; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; background-color: #33A02C; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #4 a { line-height: 20px; float: left; width: 184px; display: block; color: #000000; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #4 a:hover { line-height: 20px; float: left; width: 184px; display: block; color: #FFFFFF; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; background-color: #33A02C; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #5 a { line-height: 20px; float: left; width: 183px; display: block; color: #000000; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-indent: 17px; } #5 a:hover { line-height: 20px; float: left; width: 183px; display: block; color: #FFFFFF; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; background-color: #33A02C; text-indent: 17px; } Here is an exmple link http://dev.121design.co.uk/flextrade2/ Works fine in IE but not in Firefox, heres hopling someone can help. Thanks in Advance, tried so many different methods and none seem to work. Cheers, Stuart Hi guys, For a pure CSS site, is it still necessary to have height="82" and width="82" in <img ... /> ? Moreover, is it depreciated to have a size="25" tag in <input elements? (I know it could ba handled in CSS but nice to have directly in the html). Thank you that is basically the question. I have a main div, where content will dynamically be placed, so it will change height frequently. However, It has rounded corners, so either side of it I have 3 images, 2 of which are the corners, and one is a repeating y image. If i set a fixed size for the containing div's height(<div id="submaincontainer">), everything will jump to that.(everything else is set to inherit) However, if it's height is set to auto (which is really what I want) everything will be 1px tall. (URL address blocked: See forum rules)/cv/cv.html This is my first project with trying to strictly use div tags and CSS rather than a table. A table seems like it would be incredibly easier. Anyone know how to make this work? I have a very simple question: I have this html code: Code: <div id="text"> <p><a>text</a></p> <p><a class="red">text</a></p> <p><a>text</a></p> </div> And this CSS style: Code: .red { color: red; }
#text a{ color: blue; }
I would like to apply the .red class, but it does not work, because the #text a overrides it. How can I solve that? It is just an example because it is a cause of a problem generated by a CMS, and I can only play with the CSS, not with the HTML side. Hi guys! Let's say I have this IN BODY directly: Code: <div id="top_section"> ... </div> <ul id="menu"> ... </ul> Or should I do it like this: Code: <div id="top_section"> ... </div> <div id="menu"> <ul> ... </ul> </div> UL and DIV are both block elements so I think the first is acceptable (combining block elements whatever their sort is logical or am I completely wrong here??) Thank you Is there by chance a feature of MS Front Page that helps us out by changing height and width attributes to upper case, which CSS does not recognize? If so, is there a way to disable this feature? What is the popular alternative (among those in the know) to MS FP? The "normal-html-preview" screen format in FP is great. Or, can we simply get rid of the height and width calls in "img src=" links? Thank you for any attention to this. Ed What i want to do is have a block set to the exact width and height that i want. I am trying to find it on w3schools and cant seem to get anywhere. When i use the code below it works great, untill i enter text to it. i want the height of the block to be 15 pixels, the text is set at 12 in the external stylesheet. When i add the text it makes it about 25px or something... does this have something to do with clip? Line-height also makes no differences. This is my attempt at getting rid of my smaller tables Code: <div style="position: absolute; left: 0px; top: 200px; background-color: #ECDC74; width: 140px; height: 15px; padding: 0px;"> <h5 class="left">s</h5> </div> stylesheet Code:
h5
{
padding: 0px;
FONT-WEIGHT: bold;
text-align: center;
font-size: 12px }
.right {text-align: right }
.center {text-align: center }
.left {text-align: left }
here is the basic idea of the site Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>3 Kingdoms-Tester</title>
<link rel="stylesheet" type="text/css"
href="stylesheet1.css" />
<title></title>
</head>
<body>
<div style="position: absolute; left: 0px; top: 0px; background-color: TRANSPARENT; padding: 0px;">
<!--A very large mess of tables in here for my navigation bar at the top-->
</div>
<!--I want to have a lot of blocks (such as below) in here i was hoping to do with absolute positions and place them where i want. Its basically a multi columned theme with a bunch of sections-->
<div style="position: absolute; left: 0px; top: 200px; background-color: #ECDC74; width: 140px; height: 15px; padding: 0px;">
<h5 class="left">s</h5>
</div>
<div style="position: absolute; top; 2px; left: 617px; width: 147px; height: 30px; background-color: transperant; padding: 0px;">
<h5 style="padding:0px;margin:3px;">Click here to join the community!</h6>
</div>
</body>
</html>
thanks for any help! How can I fix a Div a set distance below another Div without a set height? |
|||||||