|
CSS - Trying To Use Ssi Files For Header/buttons, Positioned Relative To A Div In The Index
Okay I learned html/css about two years ago, and haven't really used it much since. but I'm trying to get back into it and have run into a problem with my design.
Basically what I have is a DIV tag in the index that is used to center everything on the page, and provide a border. Basically what I wanted to do was add buttons that I made in photo shop and a banner to every page I'm making, so I put them in a SSI file. That works just fine, but what I'm trying to do is make them positioned relatively positioned to the DIV in the index but still have them in the SSI file, but every time I try to add the styles to either my SSI file, style sheet for the index page, or right to the main index it wont position them inside the div. Sorry if that really didn't make sense. If you need an example take a look at the texts from last night home page (sorry it wont let me include a url) and I'm trying to get it kinda like that but with the buttons along the top of that centered outlined portion, and the banner above that. I'm really stumped here, ladies and gentlemen, so if anyone has any idea how I can get this working that would be amazingly helpful. And if I missed anything you need to know just let me know, its pretty late and I can't really think straight right now, haha Thanks in advance. Similar TutorialsI'm using a relative-positioned div as a container for an image, which is absolute-positioned. I'm doing this so that the image will automatically scale down to fit inside the containing div (nothing else I've tried has done this for me- so if there is another way to achieve this, please fill me in). This part works fine, but the image isn't as wide as the containing div, so I would like to center the image inside the div- but I can't seem to get it to work. I tried the obvious text-align:center in the div. That actually worked... kinda. The image's left-side was in the center of the div, but obviously isn't the 'centering' that I'm looking for. I then tried setting margin-left and margin-right on the image to auto, and that did nothing. I suspect that the fact that I have my image absolute-positioned is the culprit here, but I don't know how to get around it- or IF I can get around it without drastically changing my approach. Admittedly, the container div resides inside a table cell. I know that isn't the best practice, but I spent so much time trying a div-only approach only to waste time and become frustrated that I went back to what I know works- at least for now. I tried removing the container div from the table and inserting the image directly to the table cell- but encountered more issues with the sizing of the image. Essentially, my code is something like this: CSS: Code:
td#CONTENTDISPLAY
{
width: 100%;
height: 100%;
text-align: left;
vertical-align: top;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
div#CONTENTBANNER
{
position: relative;
height: 100%;
padding: 0 0 0 0;
}
img.CONTENTIMG
{
position: absolute;
height: 100%;
}
HTML: Code:
...
<td id="CONTENTDISPLAY">
<div id="CONTENTBANNER">
<img class="CONTENTIMG" />
</div>
</td>
...
Nothing flashy, I know. One thing I should mention, however, is that the image is ALWAYS placed inside the container div using a Javascript function (it's a dynamic image). I doubt that makes a difference, but I figure it's worth mentioning. Can anyone help point me in the right direction? Thanks! - skubik Hello I'm running into a very simple CSS problem (IMHO). I'm hoping that someone will be able to help out. The problem is related to a div layer that I'm positioning. The layer is positioned fine, but there is a gap at the bottom of the page where the div was created, eventhough it's positioned else where. This gap only happens in IE, FireFox looks great (no gap). Basically the code is this: Code: <div id="right-footer"> <img src="images/logo_small.gif" border=0><br /> </div> This is at the bottom of the page, above the </body></html>. I have content on the page, so scrolling is necessary. The gap is approximately 40px tall. Here is the relevant section of the stylesheet: Code: #right-footer {
position: relative;
top: -100px;
left: 550px;
width: 100px;
height: 10px;
overflow: none;
z-index: 100;
padding: 0px;
margin: 0px;
}
As you can see, the layer will be positioned above where div is in the code and pushed to the left, it's height is 10px. I added the z-index, overflow, padding, margin in a desperate attempt to fix it. Commenting out the div block or setting position to absolute removes the gap, but my position is blown. Any ideas? Please let me know if you need any more information or code. Thanks! hanji hello, i have a centered element and i would like to create an absolutely positioned div that attaches to the left side of the centered div. ive been following this resource which states: Quote: #wrapper {position: relative; width: 760px; margin: 0 auto; text-align: left; } This will make an inner element that you absolutely position at, for example, top: 0; left: 0; appear at the top left corner of the wrapper, and not of the the top left of the entire window. and so my css is: Code:
body {
background-image: url(../images/bg.jpg);
background-repeat: repeat-x;
margin: 0 auto;
text-align: center;}
#container {
position:relative;
border: 4px #99968F solid;
width:587px;
margin: 20px auto;}
#left_block {
position:absolute ; top: 0px; left: 0px;
width: 299px;
height: 209px;
background-image: url(../images/mediaplayer_bg.png);}
what is happening though is that the left block is in the top left of the window and not the top left of the centred div. does anyone know how i can get this in the top left of the centred div and then ultimately to the left of the centred div (is a negative value possible?) thank you! Code: <div class="container"> <div>Booya</div> </div> Code:
.container {
position: relative;
}
.container div {
position: absolute;
bottom: 0;
right: 0;
}
Is there any way to position the nested div relative to its grandparent vs. its parent without losing the relative positioning, or is JS the only option? The goal of the following code is to have a search box with several tabs above it to narrow down the search. The issue is that the design calls for a little upside down triangle to appear below the tab and bleed into the text box. The code works great in Firefox and even in IE6 where the Doctype was switched to HTML 3.2. I'm using 4.01 Transitional and noticing that the arrow doesn't center itself below the tab, rather it centers itself in the entire page. If I take out the width: 100% from .searchbox li.active .downarrow, then both browsers behave the same, although the downarrow now appears in the left bottom corner of the tab rather than the center. Note that I've stripped most of the code away to narrow down the issue. Code:
<style>
.searchbox ul { float: left; padding-left: 10px; list-style: none; padding: 0; margin: 10px 0 0 0; }
.searchbox li { float: left; }
.searchbox li .downarrow { display: none; }
.searchbox li a { display: block; float: left; font-size: 12px; padding: 3px; color: #213327; }
.searchbox li.active { position: relative; }
.searchbox li.active a { color: #fff; border: 1px solid #b3b2b0; background: #266d1e url('/c2footsearchbg.jpg') repeat-x scroll top left; }
.searchbox li.active a:hover { text-decoration: none; }
.searchbox li.active .downarrow { display: block; position: absolute; bottom: -9px; width: 100%; height: 10px; text-align: center; margin: auto; }
.searchbox div { clear: both; display: inline-block; }
.searchbox input.txt { border: 2px solid #999; padding: 5px 0 0 3px; width: 305px; height: 30px; }
.searchbox input.submit { font-weight: bold; font-size: 12px; color: #fff; width: 71px; height: 30px; border: 0; background: transparent url('/c2searchbutton.jpg') no-repeat scroll top left; vertical-align: top; cursor: pointer; }
.searchbox input.submit:hover { background-position: 0 -30px; }
</style>
<div class="searchbox">
<h3>Search</h3>
<ul id="c2FootSearch">
<li class="active"><a href="/index.php">Main</a><div class="downarrow">↓</div></li>
<li><a href="/groups/">Groups</a><div class="downarrow">↓</div></li>
<li><a href="/people/">People</a><div class="downarrow">↓</div></li>
<li><a href="/petitions/">Petitions</a><div class="downarrow">↓</div></li>
<li><a href="/news/">News</a><div class="downarrow">↓</div></li>
<li><a href="http://www.google.com">Google</a><div class="downarrow">↓</div></li>
</ul>
<div>
<form action="/searchall.html" method="post">
<input type="hidden" name="search" value="main" />
<input type="text" name="q" class="txt" />
<input type="submit" value="Search" class="submit" />
</form>
</div>
</div>
I'm make a simple display:hidden , display:visiable "pop up" div box. The popup works wonderful in FF but IE, the button does not display. Here is my full page (short and simple) 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" xml:lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function DIVshow(div_id)
{
var popUp = document.getElementById(div_id);
popUp.style.visibility = "visible";
}
function DIVhide(div_id)
{
var popUp = document.getElementById(div_id);
popUp.style.visibility = "hidden";
}
</script>
<style type="text/css">
#popupcontent {
position: absolute; top: 50%; left: 50%;
width: 300px;
height: 200px;
margin-left: -150px;
margin-top: -100px;
visibility: hidden;
overflow: hidden;
background-color: #F6F6BB;
border: 1px solid #333;
padding: 5px;
}
</style>
</head>
<body>
<p><a href="#" onClick="DIVshow('popupcontent');">Click here</a> to open the popup.</p>
<div id="popupcontent">
<p>This is a popup window!</p>
<input type="button" value="close" onClick="DIVhide('popupcontent');" />
</div>
</body>
</html>
Working sample can be seen he Click Here It works in both IE and FF if I write my hidden div tag like this: Code: <div id="popupcontent">
<div>
<p>This is a popup window!</p>
<input type="button" value="close"
onClick="DIVhide('popupcontent');" />
</div>
</div>
Obviously I want to avoid the extra div tags if possible. Anybody know what happening here and how to fix it? Thanks! Can someone tell me how z-index calculated on two elements that are both absolute position hey, anyone know a fix for this? http://members.shaw.ca/suffeks/dropdown2.html when the box is showing i dont want the text under it to flow down, meaning i want the box to hover above everything, but it doesnt work with relative positioning and i need it to be relative to that image, is there another way? thanks First this seems like a common problem but I couldn't find an answer. I did look, maybe I didn't use the right search terms but I did look. So I have always wanted to do this but could never figure out a way to do it. I'd like to have relative positioned divs overlap each other and not push the rest of the layout around. Pretty much the exact same way absolute works, but just position relatively. Hi I am trying evenly space a header menu and for some reason when it needs to word wrap it shoots the text to the bottom (even if I adjust the width on #header li a). Thanks so much. 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>
<style type="text/css">
body{
color: #fff;
font: 10pt Arial, Helvetica, sans-serif;
}
* {
margin: 0;
padding: 0;
}
#header{
width:760px;
margin: 0 auto;
}
#header ul{
height: 44px;
line-height: 44px;
display: block;
list-style: none;
background: #1F2C56;
}
#header li{
display: inline;
background: #395A8D;
float: right;
}
#header li a{
height: 44px;
line-height: 44px;
display: block;
width: 94px;
text-align: center;
border-left: 1px solid Black;
float: left;
}
#header li a:hover{
background: #1F2C56;
text-decoration: none;
}
#header .visual{
height:263px;
background: #1F2C56;
border-top: 3px solid Black;
}
a{ color: #FFFFFF; text-decoration: none; }
</style>
</head>
<body>
<div id="header">
<h1>Welcome</h1>
<ul>
<li><a href="link8.html">Link 8 Link 8 Link 8</a></li>
<li><a href="link7.html">Link 7</a></li>
<li><a href="link6.html">Link 6</a></li>
<li><a href="link5.html">Link 5</a></li>
<li><a href="link4.html">Link 4</a></li>
<li><a href="link3.html">Link 3</a></li>
<li><a href="link2.html">Link 2</a></li>
<li><a href="link1.html">Link 1</a></li>
</ul>
<div class="visual"> </div>
</div>
</body>
</html>
I've mocked up a page using 960.gs that has has several elements fixed in a div under which the content of the of the page is to flow. The background of this div is a CSS gradient, and has a height of 100% (if the gradient is applied to to the actual body of the page it doesn't actually extend the whole width of the page). As the user scrolls up, the content is to be viewable behind an opaque menu. bit.ly/f2a4rC The layout works as I want in FF and Chrome, but the content of the page scrolls over the fixed upper area in IE7. I understand that a new stacking context is being created, but I've been unable to resolve this by fiddling with the z-index of the elements in question, or their parents. I know I can consolidate some of the extra divs used by the grid, but I've been unable to do so in a way that keeps the gradient and transparency effects. How can I achieve this look in IE7? My vertical CSS navigation menu buttons overflow when adding 10 or more buttons. The new buttons end up to the right side of the top buttons. If I change the html format for paragraph format it stops this, but in IE there becomes big space between the buttons. Here is the site: http:// bradleyrose . net / WaterStreetRestaurant I have a Calendar of Events that I actually made quite a while ago, and it works great, but now I'm incorporating it into a different site... I used to handle the events on the calendar with absolutely positioned spans, but I'm going to try and do something a little different (being able to have tooltip like hovers with the possibility of using lists in the hover), and you can't do that with spans... but my css doesn't seem to be behaving properly. I've got some example data, the event(bitcalevent) is supposed to sit on the bottom of the day(bitweek div), but it doesn't... when it was a span it did (though I had to add border:0 and width:100%)... maybe there is another rule that I'm not seeing that isn't letting this happen??? [edit]Note that I made the bottom -10px just so it looks ok for now... but it's like it's not separating the bottom from the top... [/edit] Hello all, I dont understand why the image placed inside the right column appears incorrect here. Please check the attachment or the following website and you will understand what I am refering. http://www.refinethetaste.com/yk/clients.asp Code:
#content { float:left; width: 956px; min-height:800px; background:url(images/bg_content.gif) 0px 0px #e2eceb no-repeat; }
#content #lcolumn { float:left; width:401px; }
#content #lcolumn .logo { float:left; width:100%; }
#content #lcolumn img.logo { float:left; width:401px; height:104px; border:0px }
#content #lcolumn .head { float:left; width:100%; height:20px; background:#99adcc; }
#content #lcolumn .head .text { float:left; width:100%; text-align:center; font-size: 13px; font-weight:bold; line-height:20px; color:#083684; }
#content #lcolumn .main { float:left; width:361px; padding:20px; }
#content #lcolumn p { font-size:15px; }
#content #rcolumn { float:left; width:555px; height:505px; }
#content #rcolumn img { float:left; border:0px; }
hey guys JonnoWalmsley.com is giving me grief. I have a nav bar which is position:absolute; bottom:0px (so stuk to the bottom of the screen at all times, with the appropriate z-index etc). It works fine on FF, but IE seems to be starting from the center of the page, which effectively pushes the nav bar over to the right, and partially off the screen on smaller screens. Code: <div style="position:fixed; bottom:0px; background-color:#0a2a1a; width:899px;">...nav links...</div> I need IE to render the same as FF, and start the nav panel from the left. Any ideas? IE Screenshot FF Screenshot We don't use position absolute for anything else on our site, but it seems that our drop down still goes under some content. Here is the css: Code:
#nav {
background-image: url('../images/nav-full-bg.jpg');
background-repeat: repeat-x;
width: 967px;
height: 69px;
padding: 0;
margin: 0;
overflow: hidden;
}
#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}
#nav a {
display:block;
padding: 11px 12px 13px 12px;
font-weight:bold;
font-size: 13px;
font-family: "Trebuchet MS", Bitstream Vera Sans, Verdana;
color: #626262;
margin: 0;
text-decoration: none;
}
#nav li { /* all list items */
float: left;
}
#nav li ul { /* second-level lists */
position:absolute;
width: 200px;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
border-bottom: 2px solid #808080;
background-image: url(../images/davidpng2.png);
z-index: 900;
}
#nav ul li {
float: left;
width: 10em; /* width needed or else Opera goes nuts */
}
#nav li ul li a{
padding:5px;
display: block;
width: 190px;
color: #000;
font-weight:normal;
font-family:verdana;
font-size:11px;
}
#nav li ul li a:hover{
background-color:#a2c9f4;
}
#nav li ul ul { /* third-and-above-level lists */
margin: -23px 0 0 200px;
;
}
#nav li ul li ul li a{
display: block;
}
#nav li:hover ul ul, #nav li.sfhover ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}
Hey all, I am creating a site which sells Three 3G Mobile Phones and at the bottom of the pages i have a footer which is included into each page, see here. If you view the site in Firefox then the footer is in the correct place and rests just where the main content finishes. However in IE the footer is miles down the page creating a box effect arround the content which to be honest looks crap. If anyone would be so kind as to give me an idea why this is happening then i would be very grateful. Also, there are many sites around which give tutorials etc about text decoration and such with CSS, but i am yet to find a really good begginers tutorial on how to layout a page with CSS and Divs, does anyone know of one? Thanx for reading. CSS Code (siteInfo is the footer in question: Code:
#masthead{
padding: 0px 0px 0px 0px;
border-bottom: 1px solid #cccccc;
width: 100%;
}
#navBar{
float: left;
width: 15%;
margin: 0px;
padding-right: 2px;
height: 100%;
}
#headlines{
float:right;
width: 45%;
padding-right: 2px;
}
#content{
float: left;
width: 70%;
padding: 0px 0px 0px 0px;
background-color: #FFFFFF;
position: inherit;
}
#siteInfo{
clear: both;
font-size: 75%;
color: #FFFFFF;
padding: 10px 10px 10px 10px;
text-align: center;
background-color: #CCCCCC;
border-top: 1px solid #107FA4;
position: relative;
font-weight: bold;
}
Edited to add CSS. Hi I've come up on the old <select> elements showing through <div>s that are made visible on top of them. What I want to do is find out the id's of the select elements under my <div> so that i can hide them using CSS / Javascript. The basic layout of my page is a grid of <select> elements, each one of these would have a hidden <div> layer associated with it containing extra information etc. By the side of each of the <select> elements is a little image / button that the user will click and the layer with the extra stuff in is made visible. The layer will overlap a number of <select> elements (not the parent <select> element). Each <div> pops up in a different position (calculated dynamically as an x,y offset from the parent) can I find the Ids of the elements it overlaps? Hope this is clear, and thanks in advance. flipflops. I'm getting a strange interaction between a CSS-positioned image and a widget placed farther down the page. I've tested it in FF3.5.7 and IE8, and everything works fine until I test it in Compatibility View in IE. The widget takes a few seconds to load; once it's loaded the image at the top of the page disappears. The layout is basically this: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head></head>
<body>
<table>
<tr>
<td><div style="position:relative;margin:50px 0 0 0">
<table>
<tr>
<td>Some content</td>
<td rowspan="2"><img style="position:relative;margin:-50px 0 0 0" src="#" width="250" height="375" /></td>
</tr>
<tr>
<td>Some content</td>
</tr>
</table>
<table>
<tr>
<td>Some content</td>
<td><img style="visibility:hidden;width:0px;height:0px;" border="0" width="0" height="0" src="http://counters.gigya.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEyNzY2NTc4MzAyNzAmcHQ9MTI3NjY1ODUyNzM1MiZwPTEwODQwMDEmZD*mZz*yJm89MDQ2ZDg3MzBjNDc4NDExZTkw /YTVmZDcxNzhiYmQ1MGYmb2Y9MA==.gif" /><object width="394" height="350" id="W4afb54b3f6d091a24b057108737c9fbe" data="http://www.5lovelanguages.com/widget/5LL-assesment-widget.swf" type="application/x-shockwave-flash">
<param value="http://www.5lovelanguages.com/widget/5LL-assesment-widget.swf" name="movie"/>
<param value="transparent" name="wmode"/>
<param value="all" name="allowNetworking"/>
<param value="always" name="allowScriptAccess"/>
</object></td>
</tr>
</table>
<table style="position:absolute;left:0;top:-50px">
<tr>
<td>Some content</td>
</tr>
</table>
</div></td>
</tr>
</table>
</body>
</html>
I don't know anything about how the widget works. Can anyone help me fix this problem? |
|||||||