|
CSS - Workaround For Auto Centering With Css?
I have found out that if you don't define a width for an element in CSS and you set the left and right margins to auto to accomplish centering... it doesn't work.
I would like to make this element to be easy to add to, but right now I have to resort to making sure the width is just right... And that stinks. Any way around? I kind of understand why... CSS doesn't know what to make the margins when it is declared unless the width is defined because the HTML has beenr rendered yet.. but gosh! Thanks for any advice. Similar TutorialsI'm using the "first-letter" feature with CSS which shows up fine in IE, but is totally off in Mac's Safari. Any suggestions on a workaround? The following is what I have currently: In main.css file: p.initial:first-letter { font-size: 300%; float: left} In actual page: <p class="initial">Welcome! Hello, I am trying to have make a 'facebook' style toolbar fixed to the bottom of the screen. This works on desktop browsers except Mobile Safari on the iPhone (due to the 'viewport' way of rendering the page). Is their a workaround for this? I have seen doctyper's method but can't get it to work. Thanks I believe I may have found a CSS bug in Safari, but wanted to run this by some experts for advice, and a possible workaround - I haven't been able to find one yet. What I'm trying to do is position an iframe directly to the right of a table, and have it ALWAYS be to the right, even if it causes the page to horizontally scroll. I was able to achieve this in Mozilla, Opera, and (even) IE [have not tested IE/Mac] by making the iframe absolutely positioned, but inside a relatively-positioned span element immediately after the table, like so: Code:
<html> <head>
<style>
.maintab {float: left;}
.framediv1 {position: absolute;}
</style>
</head>
<body>
<p><table border=1 class="maintab">
<tr><td>Col 1, a short column</td><td>Col 2, which is longer than Col 1</td>
<td>Col 3: an even longer column that isn't fixed-width</td></tr>
</table>
<span style="position:relative">
<iframe class=framediv1 name=framediv width=250 height=200 frameborder="0" src="http://www.yahoo.com"></iframe>
</span>
</body> </html>
As I mentioned, this has the desired effect in Moz, IE, Opera. However, in Safari, it's positioning the iframe relative to the left margin, rather than the right-edge of the table, where the <span> is expected to be. I'm about 90% confident this is a Safari bug, because the position:absolute should be using the last non-staticly positioned parent container (the span) to determine where to put it. Anyone care to confirm? Better still, anybody have a workaround (other than using a table inside a table - blech!) Thanks, Keith CSS 1, Netscape 4.x and background+width issue need workaround: I am working on a website template and converting it to CSS. I have seperated my CSS1 from my CSS 2 sheet and am currently trying to get NN 4.x to do what I have read it won't do and have no idea how to make it do what I want. BTW:Please do not advise me to drop NN 4.x, unfortunately it is not within my power to do so. What I need to do is put a background color on an H1 header that will be only as wide as the table cell (column) it is in. (3 column plus header and footer layout). BTW: I cannot drop the table either. My problem is that when I get the background to work (instead of just surrounding the text) I cannot get it to be liquid and remain inside its cell. When I set the width to %'s it just pushes the other 2 columns out of the way even when the % is not the width of the column. Unfortunately, pixels are not flexible enough for this layout. So, how do I get a background color on an H1 tag that fully expands to the width of the column (not just the text) using CSS 1 and NN 4.x while not destroying the table layout? Thank you for your help- Schach PS: This is not an issue of my code, but an issue of the NN 4.x CSS support. So I do not need to have the code debugged, but instead I need a hack or method to outsmart the browser, so I can duplicate a site in CSS. This site is currently heavily reliant on tables, something we want to change, but can't unless we can reproduce the site in NN 4.x. (You can email me if you would like to do that) Hi, I'm attempting to apply a left and right image to a tab when hovered. The images aren't simply curved corners, but rather curved inwards corners at the top and outwards at the bottom. The tabs are all of different widths and I'd like to avoid using a class for each tab obviously. here's an image depicting what I mean: So the issue is essentially that I need the a:hover class to apply two background images - one on the left, one on the right - as one image can't deal with different sized tabs. I know that won't be possible until CSS3, but I know there must be a way to do this with today's standards. The image is of the tab on hover. Without hover, it's just the plain gray background to the left and right of it. There's probably a method for these sort of issues on A List Apart or something, but I can't find one. Anybody have anything on hand, or any suggestions? Your help is appreciated. Thanks in advance! I'm creating an email template for all mail that I'll send to my users. I'm trying to make it work for as many mail clients as possible, so I'm only using inline css. Even with that, it appears that gmail doesn't support the background-image property. I have a table defined as Code:
<table style="background:#666666; background-image:url(http://{$_SERVER['SERVER_NAME']}/images/bg_grad.gif); background-repeat:repeat-x; width:100%; height:100%; margin:0px; " cellpadding="0" cellspacing="0">
...
This works fine for yahoo mail. With gmail, it will render "background", but as soon as I try and add an image, it ignores all of the styling. Has anybody run into this problem? Any suggestions on a solution would be greatly appreciated. I've been trying to make a "pop-up" window with CSS which works great for the most part, except in IE when there is a form pull-down menu behind it. For some reason in IE it just sticks right through the top z-indexed layer: I am building a custom form control that behaves more or less like a <select> menu. For the dropdown portion of the menu, I need to set a max-height. If the dropdown contains enough options to go beyond the max-height a vertical scrollbar should appear. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Custom Auto-Complete</title>
<script type="text/javascript">
<!--
function initPage()
{
}
-->
</script>
<style type="text/css">
<!--
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 76%;
}
input {
width: 200px;
background: #f4f4f4;
border: 1px solid #999;
font-size: .9em;
/*
*/
}
.clearfix {
display: inline-block;
}
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.cAutoCompleteCtl {
position: relative;
/*
border: 3px solid red;
*/
}
.cAutoCompleteCtl input {
margin: 0 5px 0 0;
display: block;
float: left;
}
.cAutoCompleteCtl a.dwnarrow {
width: 15px;
height: 15px;
border: 1px solid #999;
background: url(images/downarrow.gif)
no-repeat;
background-position: center center;
background-color: #efefef;
float: left;
display: block;
font-size: 1px;
text-decoration: none;
}
.cAutoCompleteCtl .acCtlDropdwn {
position: absolute;
top: 20px;
left: 0px;
z-index: 100;
visibility: visible;
min-width: 300px;
max-width: 600px;
height: auto;
max-height: 200px;
background: #fff;
padding: 5px;
border: 1px solid #999;
overflow: auto;
/*
width: 400px;
*/
}
* html .cAutoCompleteCtl .acCtlDropdwn {
width: expression( this.scrollWidth < 330 ? "300px" : ( this.scrollWidth > 620 ? "600px" : "auto" ) );
height: expression( this.scrollHeight < 20 ? "200px" : ( this.scrollHeight > 301 ? "300px" : "auto" ) );
}
.cAutoCompleteCtl .acCtlDropdwn a {
white-space: nowrap;
display: block;
text-decoration: none;
padding: 2px 5px;
color: #000;
border: 1px solid #fff;
}
.cAutoCompleteCtl .acCtlDropdwn a.lastOption {
}
.cAutoCompleteCtl .acCtlDropdwn a:hover {
background: #f5f5f5;
border: 1px solid #b3b3b3;
}
-->
</style>
</head>
<body onload="initPage();">
<div class="cAutoCompleteCtl clearfix">
<input type="text" /><a href="" class="dwnarrow"> </a>
<div class="acCtlDropdwn">
<!--<a href="#">options here options here options here options here options here options here options here options here options here options here options here</a>-->
<a href="#">options here</a>
<a href="">Boulder Logic</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
</div>
</div>
</body>
</html>
I'm seeing some unexpected behaviour ihn Firefox. When the page is loaded for the 1st time, the height of the dropdown portion of the menu is only large enough to see 1 option and no scrollbars are displayed. If I hit refresh (without holding the Shift key), the menu's height goes to its max-height and displays as expected. The only property I could find that has any effect on this behaviour is overflow. If I remove it all together or set it to scroll, it displays at the correct height. Unfortunately, neither of these are an option since they will not produce the desired scrolling behaviour. Can anyone see where I'm going wrong? Now while I did manage to work this out with margins and paddings, I have to ask how to do it properly. It's very basic. You have blank page. No wrappers no nothing. Then 1 div, holds, 1 ul, with 20 li. The div has specified width. How to center the ul inside the div? I need the UL to NOT have specified width since I'll be adding more items to it over time. Thanks! I was wondering how I could center a CSS div so I would have one column going thorugh the middle. I tryed using "center" in the CSS but that didn't work and then I read some where else about floats and how they will make every go to either the left or right. How would I go about centering a Div like that? Thankyou for any help. Hello, I have tried to use the auto margin to center a div within a div, but the auto margin only seems to work on the outermost div. Is there a workaround where I can center my content inside of a nested div? Take the example code: Code:
<html>
<head>
<style type="text/css">
body {
background-color: orange;
}
#container {
width: 700px;
margin: 0 auto;
background-color: red;
}
#nested {
width: 700px;
margin: 0 auto;
background-color: blue;
}
</style>
</head>
<body>
<div id="container">
<div id="nested">
Text Here
</div>
</div>
</body>
</html>
So I want the nested div to have its content centered, so "Text Here" is in the center. Hi all, this is my CSS: Code: body {
font-family:arial;
font-size:14px;
background-color:#FFFFFF;
margin: 0;
padding: 0;
}
.mainbar {
position:absolute;
height:100%;
width:600px;
display:block;
background-color:#F2F2F2;
top:0px;
bottom:0px;
z-index:0;
border-top: 0px solid #000000;
border-right: 1px solid #000000;
border-bottom: 0px solid #000000;
border-left: 1px solid #000000;
}
.contact {
position:absolute;
display:block;
height:40px;
width:600px;
background-color:#FFFFFF;
top:80%;
bottom:0px;
z-index:0;
border-top: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
}
.logo {
position:absolute;
display:block;
height:200px;
width:600px;
background-color:#CCCCCC;
top:10%;
bottom:10%;
border:1px solid #000000;
z-index:2;
}
.logoborder {
border-top: 0px solid #000000;
border-right: 1px solid #000000;
border-bottom: 0px solid #000000;
border-left: 1px solid #000000;
}
Now how do I go about centering all of this? I have put many frustrated hours into this, and have tried everything that could have a possibility of working but have come out with nothing. Any help would be appreciated! Please, I have read other forum posts and it is not clear what to do, so treat me like i'm 5 years old!!! Thanks! Jack. Hey. I'm having issues with getting my page to center in IE7 using margin: auto; It works fine in firefox. The page is at http://jbench.co.uk:81/. The CSS is at http://jbench.co.uk:81/css/css.php . The section where i think the problem is: CSS Code: Original - CSS Code #page { width: 900px; margin: 0 auto; padding: 14px 3px; min-height: 250px; font-size: 1.2em; }
#page {
Any help's appreciated. http://www.stevemedleyphotography.com/tempo/index.html What I am trying to do is make it so that the blue background is as it is already but the orange box is the full width of the window despite what resolution or window size the user has, and also is centered on the screen. -------BLUE--------- -------BLUE--------- -------BLUE--------- -----ORANGE------- -----ORANGE------- -------BLUE--------- -------BLUE--------- -------BLUE--------- Like that. I will be having some stuff within the orange div. I don't really know much CSS at all and am kinda guessing my way through it... poorly... Thanks for any help. Hey guys, I'm having trouble centering div boxes on my page, wondering if anyone can help. I have tried using {margin: 0 auto;} which works fine, but when the scrollbar appears on the page it knocks it off balance and the other content on the page becomes mis-aligned. I have also tried setting left margins to push the div to the middle, but I figured this would cause problems and wouldn't look right to people using higher than 1024x768 resolutions. Is there any other way? Hi, This is my first css only layout and I am trying to centre the navigation. But it wont. Any suggestions? http://www.wnv2.com/v9.htm <<link here CSS File: Code: /* CSS Document */
body {
background-image:url(bg.jpg); background-repeat: repeat-x;
background-color:#65B240;
margin:0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
/*---------- Divs ------------*/
#wrapper {
margin: 0px;
padding: 0px;
width: 600px;
}
#header {
margin: 0px;
padding: 0px;
width: 600px;
height: 85px;
background-image:url(top.jpg);
}
#navigation {
margin: auto;
padding-left: 30px;
padding-right: 30px;
padding-top: 0px;
padding-bottom: 0px;
width: 540px;
height: 25px;
text-align:center;
}
#navigation ul {
margin: 0px;
padding: 0px;
list-style-type: none;
background-color:#DDDDDD;
}
#navigation ul {
display: block;
float:left;
}
#navigation li, #navigation li a {
color:#59933E;
font-weight:bold;
letter-spacing:1px;
height: 25px;
display: block;
margin: 0 2 0 2;
float:left;
}
#navigation .left_nav {
width: 22px;
height: 25px;
display: block;
background-image:url(nav_left.jpg);
}
#navigation .right_nav {
width: 22px;
height: 25px;
display: block;
background-image:url(nav_right.jpg);
}
#middle{
background-image:url(middle.jpg);
background-repeat: repeat-y;
width:600px;
}
#navigation .spacer {
width: 5px;
height: 5px;
display: block;
background-image:url(nav_spacer.gif);
}
#contentswrapper {
margin: 0px;
padding: 5 55 5 55;
text-align: left;
width: 490px;
}
#bottom {
height:90px;
width:600px;
background-image:url(bottom.jpg);
}
HTML: View Cource Thanks Hey everyone, I am fairly comfortable with HTML, and even know a decent amount of PHP and Javascript. But sometimes trying to do the simplest things in CSS makes my head spin! (this is one of those times). I've got a "scrolling" header at the top of a page (stays visible even when scrolling), and am trying to center a DIV (which contains opt-in forms) inside that header. It looks good when my browser window is maximized (at 1280x1024 resolution). But when I minimize the browser or check it in other screen resolutions, the "centering" of the opt-in forms are off. Here is the page... www.wordflood.com/Test/Scrolling_Header.html And here are the CSS includes... www.wordflood.com/Test/style.css www.wordflood.com/Test/IE6_style.css This was really just a quick hack from a "scrolling header" demo I found online, so I must have overlooked something. Any ideas? Hi, i am new to CSS and want to know about how to center a div tag for example i have the following code Code: <div style=""> </div> if i want to place this div in the middle of the browser window that is from equal distance from left right top bottom what will i have to put inside the style attributes. Please recommend Regards ltoso im trying to center this div but im not to sure on how to do it Code: <style type="text/css">
div.img
{
margin:2px;
border:1px solid #0000ff;
height:auto;
width:auto;
float:left;
text-align:center;
}
div.img img
{
display:inline;
margin:3px;
border:1px solid #ffffff;
}
div.img a:hover img
{
border:1px solid #0000ff;
}
div.desc
{
text-align:center;
font-weight:normal;
width:120px;
margin:2px;
}
</style>
</head>
<body>
<div class="img">
<a target="_blank" href="klematis_big.htm">
<img src="klematis_small.jpg" alt="Klematis" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis2_big.htm">
<img src="klematis2_small.jpg" alt="Klematis" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis3_big.htm">
<img src="klematis3_small.jpg" alt="Klematis" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis4_big.htm">
<img src="klematis4_small.jpg" alt="Klematis" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
How can I, let's see how to say this. Align text to the middle of a div (up and down)... not really a center Normal: ________________________________ Text ________________________________ After: ________________________________ text ________________________________ THANKS |
|||||||