|
CSS - Dynamic Width W/o Percentages [ie Problem]
Hi all,
I've got a problem with CSS, and while I usually can fix them myself, I can't seem to find a solution to this one. I want to create a centered block with a dynamic width using almost nothing but CSS (except for the div in the HTML code). Not specified by percentages, but instead specified by the distance from both the left and the right border of the block to the body. So what I want is to specify the left and right properties of the DIV, so my first attempt was: Code: #block {
position: absolute;
top: 40px;
right: 40px;
left: 40px;
height: 40px;
}
In Opera and FireFox it worked fine, but in Internet Explorer the block had no width. Does anyone know of a way to accomplish this? Similar Tutorialsi want to fit in my 'Did you know?' panel beside my ad, but i'm having a lot of trouble... the ad is 468x60. here is the panel: Code: <div class='ocontentsection panelmargins floatleft' style='margin-left:8px; height:101px; width:167px;'>
<h2 class='aligncenter' style='text-indent:0;'>
Did you know?
</h2>
<div class='contenttext' style='font-size:9px;'>
<p class='nomargins'>
<?php
$tips = array(
"The formula generating your VIPortals Score is:
<strong>Games Played * 2 + Votes Casted * 3 + Comments Added * 4 + (Games Played + Votes Casted + Comments Added) * 5</strong>",
"The money awarded to the winners of every contest comes from the <strong>advertisers</strong> who are paying us to place their ads here."
);
$rand_index = round(rand(0, count($tips) - 1));
echo $tips[$rand_index];
?>
</p>
</div>
</div>
look here in the middle of the page i want the text to fit inside the box too :S is there a better way of doing this? as you can see, i had to set a bunch of widths and stuff... thanks. Here's the code: Code: <table class="tab_thin_table"> <tr> <td class="tab_start_off" rowspan="2"></td><td class="tab_bg_off" rowspan="2">Example 1</td><td class="tab_end_off" rowspan="2"></td> <td class="tab_start_on" rowspan="2"></td><td class="tab_bg_on" rowspan="2">Example 1 ON</td><td class="tab_end_on" rowspan="2"></td> <td class="tab_start_off" rowspan="2"></td><td class="tab_bg_off" rowspan="2">Example 3</td><td class="tab_end_off" rowspan="2"></td> <td class="tab_thin_spacer"></td> </tr> <tr> <td class="tab_thin_top"></td> </tr> </table> Here's the CSS: Code:
tab_thin_table
{
width: 578px;
vertical-align: top;
}
.tab_thin_top
{
height: 1px;
background-color: #6E7073;
}
.tab_thin_spacer
{
height: 19px;
}
.tab_start_on
{
width: 6px;
height: 20px;
background: url(../container/tab_start_on.gif);
background-repeat: no-repeat;
}
.tab_bg_on
{
background: url(../container/tab_bg_on.gif);
}
.tab_end_on
{
width: 10px;
height: 20px;
background: url(../container/tab_end_on.gif);
background-repeat: no-repeat;
}
NOTE: tabs with "off" are same as tabs with "on" just different image Here's the problems As you can see the tab_thin_spacer and tab_thin_top sit on top of each other. The cells with are using the tab ons and offs are of dynamic widh determined by each page. However, the tab_thin_table is a set width. I need tab_spacer and tab_top to always stretch the rest of the existing width of the table; whatever width is not taken up by the tab ons and offs Thanks I've run into a problem with a 3-column layout I'm making. The problem is to get the columns equally high. Previously I've just made the "illusion" of equally high columns by making a background image and repeating it in the y-direction (like this). This works fine as long as the page has a fixed with - in this case the left and right column have a fixed width but the center column is dynamic. So, how can I make all the columns look equally high? (without using tables, obviously) Btw, I can't show you an example of the page, but hopefully you'll get the picture and could point me to an article or something about the subject. EDIT: Never mind! I found an example and it worked! http://www.pixy.cz/blogg/clanky/css-3col-layout/ <-- thats the one. I'm trying to piece together a sliced image using CSS, but I need it in percentages so it stays together when the window is resized! Does anybody know if this is possible or a better way to go about it? Thanks! Can someone please explain this to me, because I'm apparently missing something. I have a div that I am using as an overlay to my site. I want this div to be 50% wide, and 50% high, and be properly centered on the screen. I was able to get horizontal centering working almost perfectly, but when it comes to vertical centering- things just don't make sense. To center, I'm setting top & left to 50% and then using margin-top and margin-left with negative values to compensate. What I assume should work (and seems to work with horizontal centering) is that if I set the margin-left to -25%, the leftmost side of my div should end up half-way between the beginning of the browser window and the center of the browser window. But if I set margin-top to -25%, by the same logic, it should move the topmost side of the div up to between the top of the browser view area and the center. But that doesn't seem to happen- at least in FF3: Code:
<html>
<head>
<style>
div#dialog
{
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 50%;
height: 50%;
margin-top: -50%;
margin-left: -25%;
background-color: #FFFFFF;
border-top: #FF0000 3px solid;
border-left: #FF0000 3px solid;
border-right: #FF0000 3px solid;
border-bottom: #FF0000 3px solid;
z-index: 202;
}
</style>
</head>
<body>
<div id="dialog"></div>
</body>
</html>
Instead what happens is the top of my div ends up at the very top of the viewing area of the browser- and actually a little bit ABOVE it (outside of the view area). WHY!? If I set the margin-top to -50%, which I would expect to place the topmost edge of the div at the very top of the browser viewing area, the div disappears entirely! Yet if I set margin-left to -50%, it appears along the left side of the browser window where I'd expect it to be. Why might this be happening? Again, obviously I'm missing something. Can someone please explain? Is there another/better way of doing this? Thanks, - skubik How do I make "content" <div class="content"> to go all the way to the right side of the "profile"? Code:
<style type="text/css">
#container { width: 800px;
background-color:#666;
padding: 20px;
}
#profiles_container {
background-color:#33CC66;
}
#profiles_container .profile { background-color:#CCFFFF;
margin: 20px 0px 20px 0px;
padding: 10px;
}
#profiles_container .profile .foto { background-color:#CCCC33;
float: left;
width: 200px;
padding: 10px;
}
#profiles_container .profile .content { background-color:#FF0000;
float: left;
margin-left: 10px;
padding: 10px 10px 10px 10px;
}
#profiles_container .profile .content .col1 { background-color:#CCFFCC;
float: left;
}
#profiles_container .profile .content .col2 {
float: left;
}
#profiles_container .profile .btm{
background-color:#999999;
}
.clear {clear:both;}
</style>
</head><body>
<div id="container">
<div id="profiles_container">
<div class="profile">
<div class="foto"><img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="Photo_1" border="0" align="top" />
</div><!-- END foto -->
<div class="content">
<div class="col1"><p>COLUMN_1</p></div><!-- END col1 -->
<div class="col2"><p>COLUMN_2</p></div><!-- END col2 -->
</div><!-- END content -->
<div class="clear"></div>
<div class="btm"><p>BOTTOM</p></div>
</div><!-- END profile -->
</div><!-- END profiles_container -->
</div><!-- END container -->
hi, wonder if someone can help me. I'm trying to create a css layout for a site, which has a header then two vertical columns (pretty standard). i want the first column to be a set size and the second content column to be variable to use up the rest of the page space. i can get the first column and header to work fine but not the second content column. any help would be good. here my code: Code: #header {
margin: 20px 20px 0px 20px;
padding: 10px;
border: 1px solid #666;
background: #ccc;
height: 100px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
height: 70px;
}
html>body #header {
height: 70px; /* ie5win fudge ends */
}
#menu_v {
position: absolute;
top: 120px;
left: 0px;
margin: 20px;
padding: 10px;
border: 1px solid #666;
background: #ccc;
width: 150px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 120px;
}
html>body #menu_v {
width: 120px; /* ie5win fudge ends */
}
#content {
position: absolute;
top: 120px;
right: 0px; /* Opera5.02 will show a space at right when there is no scroll bar */
margin: 20px 20px 20px 190px;
padding: 10px;
border: 1px solid #666;
background: #ccc;
}
I'm having a problem with a width attribute in IE7. The main content div on the page http://www.mckr.ie/test.html looks fine in Opera but in IE7 it makes the page scroll horizontally. Basically I didn't put a width on the #contentdiv styled <div>, its supposed to just occupy the width of the page automatically. When I put width 100% on it it messed up in IE6. Now I'm looking at it in IE7 and its similarly messed up. Does anyone know a way of solving this? Any help would be much appreciated. Here's my HTML code: Code: <div id="bannerdiv"></div> <div id="contentdiv"> Content here</div> <div id="leftnavdiv"><div id="leftnavouterdiv"><div id="leftnavinnerdiv">Nav here</div></div> <div id="searchdiv"><div id="innersearchdiv"><p><b>Site Web en Francais</b></p> <form action="http://search.atomz.com/search/" method="get" target="main"> <b>Search the Site<br /> </b> <input name="sp-q" size="15" /> <input name="submit" type="submit" value="Go" /> <input name="sp-a" type="hidden" value="sp10023119" /> <input name="sp-f" type="hidden" value="ISO-8859-1" /> </form> </div> </div> </div> <div id="topnavdiv"> <ul> <li><a href="/" id="buttonhome"><b>Home</b></a></li> <li><a href="about.html" id="buttonabout"><b>About Us</b></a></li> <li><a href="location.html" id="buttonlocation"><b>Location</b></a></li> <li><a href="contact.html" id="buttoncontact"><b>Contact Us</b></a></li> <li><a href="news.html" id="buttonnews"><b>News</b></a></li> <li><a href="people.html" id="buttonpeople"><b>People</b></a></li> <li><a href="recruitment.html" id="buttonrecruitment"><b>Recruitment</b></a></li> </ul> </div> Here is the relevant CSS code: Code: #bannerdiv { background-image: url(images/logo_banner.gif); height: 120px; width: 100%; background-color: #3366CC; background-repeat: no-repeat; background-position: left top; display: block; top: 0px; position: absolute; z-index: 9; left: 0px; } body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; margin: 0px; padding: 0px; }
#leftnavdiv { position:absolute; left:0px; top:146px; width:237px; z-index:2; font-size: 11px; } #contentdiv { position:absolute; left:250px; top:146px; z-index:1 }
#leftnavinnerdiv { width: 210px; margin-top: 0px; margin-bottom: 0px; margin-left: 10px; padding-bottom: 30px; padding-top: 0px; }
#leftnavouterdiv {
background-color: #EEF3F9;
background-image: url(images/bg.newsbottom.jpg);
background-repeat: no-repeat;
background-position: right bottom;
}
#searchdiv {
background-color: #EEF3F9;
width: 234px;
margin-top: 15px;
margin-bottom: 15px;
}
#innersearchdiv {
margin: 0px 15px;
padding-top: 15px;
padding-bottom: 15px;
}
#topnavdiv {
position:absolute;
left:0px;
top:120px;
width:100%;
z-index:3;
background-color: #3366CC;
border-top-width: 1px;
border-right-width: 0px;
border-bottom-width: 1px;
border-left-width: 0px;
border-top-color: #f8c015;
border-bottom-color: #f8c015;
border-right-color: #f8c015;
border-left-color: #f8c015;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
height: 24px;
}
When i view rockitdesign.co.uk/portfolio in IE6, one of the columns seems too wide so the right one is getting squeezed underneath. This seems to happen on many of the sites i do so must be the same thing causing it? Any ideas? Thanks. me again, i fixed my last problem just to run into another i messed a little with my code, so that i have 2 elements on the page 'fixed' (in FF and IE) and the main body part is scrollable. the complete site is here i cannot seem to set a minimum width for the browser window. try to resize the window and you will see, that the main bodywindow will maintain at least 500px width in Firefox (not in IE < thats prob no.1) -- but also does the main body window slip underneath the navigation to the left. i tried to change the z-value, but even if i give them both the same z-value it slips underneath it. it would be great, if someone could help me with this problem, i know i have to correct it somewhere in the css, but cannot find it EDIT solved problem.... okay, so i just positioned (absolute) the bodybox element a fix amount away from the left border of the screen -- before it was 10% away from the right border of the screen .... it doesn't seem that liquid anymore, but i can live with it .... now i just need to convince IE to maintain a minimum width .... which topic has been discussed before EDIT2 i added the line Code: width: expression(document.body.clientWidth < 781 ? "780px" : "100%" ); to my fixed4ie.css file .... this messes on my old IBM ('95) around a little and i am not sure if you can see the graphic delay on newer computers. this is the only thing that worked for me so far .... interesting enough there are no more scrollbars, once i go under that certain width .... if - by now - someone has an idea how to fix this, i would appreciate other solutions to this problem Hi all - ive discovered a css problem when using 100% width areas on a website. take the following site for example.. offmymakeupbox.com if you open a browser that is not maximized there is a scrollbar that allows you to scroll to the right, but if you scroll to the right you can see that the footer has been cut off. ie. it is the width of the resized browser and not 100% width of the actual template. is there a way to fix this? thanks http://www.turboconceptsllc.com/main.php in IE 6. how do i get the top banner stretch to span across the entire width of the browser? i think its stopping at the scroll bar, from what ive read.. how is this fixed? Code:
.main_table_top_banner
{
background-image:url('');
background-repeat: no-repeat;
background-color: #3A3A3E;
width: 100%;
height: 50px;
position:absolute;
left:0px;
top:0px;
overflow: none;
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
border:0px solid;
z-index:1;
}
http://www.veracon.net/qwaffle/ If you look closely in Firefox, the content holder (left and right) is one pixel too small - it's meant to be the same size as the header. I don't see why this is happening, as it looks fine in IE. I could use some help. I have a container, header,left-side vertical navbar, content, and a footer. Everything works fine except when the content div is very wide. When this happens the header and footer are only as wide as the screen and not as wide as the content div. Here's my CSS. Code:
#container {
width:100%;
background: #fffce0 url(images/narrowtrick.gif) repeat-y;/*this colour will be left column colour */
margin:0px;
padding:0px;
text-align:left;
}
#header {
height:145px;
width:100%;
background-image: url(images/topbackground2.jpg);
text-align:center;
margin:0px;
padding:0px;}
#navbar{
float:left;
width:122px;
margin:0px;
padding:0px;}
#content {
background:#fffce0;/* background colour of right column */
margin-left:122px;/*this is the space for the left column */
padding:0px;
}
#footer {
clear: both;
border-top:1px solid red;
border-bottom:1px solid red;
background-image: url(images/gradientsmaller2.gif);
font: 10pt;
background-color: #ccffcc;
width: 100%;
text-align: right;
margin:0px;
padding:0px;
}
I can't figure this one out! Code: <div id=container> <div id=header> </div> <div id=navbar> </div> <div id=content> </div> <div id=footer> </div> </div> the content div is dynamic so it could be very wide. Hi, I have the following css: Code: #container { background: url(../images/page.gif) repeat-y center;
position:relative;
width:100%;
height:100%;
}
#banner {background:url(../images/banner.gif) no-repeat center;
height:108px;
width:100%;
position:relative;
}
#menu {background:url(../images/menu.gif) no-repeat top center;
height:124px;
width:100%;
position:relative;
}
#content {
margin-left: 240px;
font-family:'Helv', Arial, Helvetica, Geneva, sans-serif;
font-size:14px;
letter-spacing:1px;
color:#000;
text-align:justify;
width:580px;
position:relative;
}
#footer {background:url(../images/pgfooter.gif) bottom center no-repeat;
height:46px;
width:100%;
position:relative;
}
all background are fixed width for 1024x768 and i have the following html <div id="container"> <div id="banner"></div> <div id="menu"></div> <div id="content"> All text goes here </div> <div id="footer"></div> </div> now the problem is that if i set the #container width to let say 1000px; it works fine (only resizeing the browser instantly ihave the horizontal scroller). So i want to set thethe container width to 100%. As soon as i set that and resize the browser the page flows well But the text in the #content div remains static and doesn't move along with the bkgrounds, thus flowing "out" of the text area. the links is here Code: http://ocdmonline.org/michael/ username: ocdmonline pass:4yGx3fM Any ideas? 10x Hi All, I have CSS-sheet= .thumbs { border: 2px solid #524b2f; position: static; height: 80px; width: auto; } body { background-color: #f5f0ec; font-family: Verdana, Arial, Helvetica, sans-serif; scrollbar-face-color : #f5f0ec; scrollbar-highlight-color : #aca899; scrollbar-3dlight-color : #f5f0ec; scrollbar-shadow-color : #aca899; scrollbar-darkshadow-color :#f5f0ec; scrollbar-track-color : #f5f0ec; scrollbar-arrow-color : #524b2f; } The thumbs part resizes some pictures to a fixed height of =80px and calculates the width so everyting is resized correctly. But IE6 gives problems with the width=auto , some times it's sets the widt correctly other times it doesn't. In other brouwsers its fine. Any suggestions on fixing this in IE6? here's the page link : http://www.sleuyter.be/04/lay04-1.htm thx, ROY I am currently workin on a new design for my site and have decided to go tabless (the way it should be). I have gotten pretty much as far as I can apart from adding the content. I have been testing my design in both IE6 and FireFox 1.0.4. I have noticed some problems in width in both browsers. Here is the link to my site: Panik Design's New Layout In IE6 the main div does not stretch out to 700px, It only lines up with the header div when i change the width to 704px. But when I do that , Firefox is then out of line because Firefox measured it correctly the first time. As for Firefox problem. FF is not measuring the module widths correctly. They are set to 150px and would like them to display like they do in IE6. I will now post my code: Code:
<html>
<head>
<title>Panik Designs</title>
<style type="text/css">
body {
margin: 0px;
background: #fff;
color: #000;
font-size: 10pt;
font-family: verdana;
}
h1 {
font-family: verdana;
color: #000;
font-weight: bold;
font-size: 24pt;
}
#header {
border-left: 2px solid #000;
border-right: 2px solid #000;
background: #FBF2D9;
width: 700px;
margin: 0;
}
#main {
position: relative;
width: 700px;
border-left: 2px solid #000;
border-right: 2px solid #000;
height: 100%;
background: #FBF2D9;
}
#leftcontent {
position: absolute;
padding-top: 10px;
left: 0px;
background: #FBF2D9;
width: 150px;
text-align: center;
}
#rightcontent {
position: absolute;
padding-top: 10px;
right: 0px;
background: #FBF2D9;
width: 150px;
}
#centercontent {
position: absolute;
left: 150px;
padding: 10px;
background: #FBF2D9;
width: 400px;
text-align: left;
}
#moduletop {
position: relative;
width: 140px;
padding: 5px;
color: #fff;
font-weight: bold;
text-align: center;
border: 1px solid #000;
background: #26476C;
}
#modulebottom {
position: relative;
width: 140px;
padding: 5px;
color: #fff;
font-weight: bold;
text-align: left;
font-size: 10pt;
border: 1px solid #000;
border-top: 0px;
background: #4184B4;
background-image: url("images/modulefill.jpg");
background-position: 0% 100%;
background-repeat: repeat-x;
}
</style>
</head>
<body>
<center>
<div id="header"><img src='images/header.jpg'></div>
<div id="main">
<div id="leftcontent">
<div id="moduletop">: Navigation :</div>
<div id="modulebottom">
Item one<br>
Item two<br>
Item 3<br>
</div>
This is the left content
</div>
<div id="centercontent"><h1>Heello</h1><br>Thisis where the center content will go. blah blah blabh blah all of this is fun fun fun i like cheese.</div><div id="rightcontent"><div id="moduletop">: Statistics :</div>This is the right Content</div>
</div>
</body>
</html>
I have not added a doctype because it adds even more problems to the page. As shown on this page: Doctype problems: Doctype problems This code results in a DIV box with 1 pixle borders, with tabs at the top. Code: <html>
<head>
<title>Untitled</title>
<style type="text/css" media="screen">
/* Top Tab Menu */
#navlist
{
border-bottom: 1px solid #ccc;
margin: 0;
padding-bottom: 19px;
padding-left: 10px;
}
#navlist ul, #navlist li
{
display: inline;
list-style-type: none;
margin: 0;
padding: 0;
}
#navlist a:link, #navlist a:visited
{
background: #E8EBF0;
border: 1px solid #ccc;
color: #666;
float: left;
font-weight: normal;
line-height: 14px;
margin-right: 8px;
padding: 2px 10px 2px 10px;
text-decoration: none;
}
#navlist a:link#current, #navlist a:visited#current
{
background: #fff;
border-bottom: 1px solid #fff;
color: #000;
}
#navlist a:hover
{
color: #666;
background: #fff;
}
/* Big Box Below Tabs */
#content_box {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
body {
margin: 10px;
}
</style>
<title>Test</title>
</head>
<body>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Test One</a></li>
<li><a href="#">Test two</a></li>
<li><a href="#">Test three</a></li>
<li><a href="#">Test four</a></li>
<li><a href="#">Test five</a></li>
</ul>
</div>
<div id="content_box">
<table width="100%" border="0" cellpadding="5">
<tr>
<td>
Test<br />Test<br />Test
</td>
</tr>
</table>
</div>
</body>
</html>
In it, is a table with 100% width which will hold row data from a database. It works very well if Firefox. But in IE, the right edge of the DIV box is pushed to the right by two pixles. I believe it is the table doing this. I'm not understading how to have the non fixed width DIV contain a non fixed width table. See the real thing at Siliconsatan.com/example.php See a close up image below. ok here i am again with a width problem ,, http://www.bekirhoca.com/index.asp < here's the problematic page. the index looks fine but inner pages like http://www.bekirhoca.com/ogretmen/uzmanortmen.asp (this is one of the pages cleared from tables) , content width is smaller and not like as i want it to be or you want it to be ,, in my css when i gave width it looks fine on my computer but on another computers not because i adjust the width for my computer. when i give width, if you have a tight browser the content overflows and puts itself to the downwards of the page. And also when theres no width, the site sux in ff. where the the problem starts in my css #contentColumn { float: left; background:white; //if width: a number; } |
|||||||