|
CSS - Unable To Centre Div In Ff, Div Does Not Extend On Overlay.
Hi All,
Been a while since I have been here, been doing other jobs in place of website design sadly! Something I enjoy a great deal! Anyway, I am in the process of making a new website and I have discovered overlays - what a great idea. They look fantastic. Now I have designed an overlay for my site: http://www.wellandpower.net/website2/index.php The bottom link on this page makes an overlay appear with a new specification sheet in it. The dotted grey background (soon to be changed to another design) is held in the #overlay div, the specification sheet is housed in the '#overlayholder' div. The overlay div has a property of text-align: center; - but the overlayholder div is not aligning to the centre. I have posted the CSS of the two elements below. It works in IE7, but not in FF. Secondly, when the overlayholder appears and content is added to it, the overlay DIV does not stretch in either browser, why not? I found this strange. CSS Code: Original - CSS Code #overlay { visibility: hidden; position: absolute; left: 0px; top: 0px; width:100%; height:100%; text-align: center; z-index: 1000; background-image:url(/images/checkerboard.png); } #overlay #overlayholder { margin-top: 50px; padding: 10px; width: 850px; text-align: center; background-color: #FFFFFF; }
#overlay {
Any help greatly appreciated. Similar TutorialsHi I have been battling with this and have tried some solutions on the net but they dont seem to work this may be simple still got my l plates on. My center column wont center in ff its fine in ie my code is as follows body <div class="bgcolumn"> </div> <div class="leftcolumn"> </div> <div class="rightcolumn"> </div> <div class="centrecolumn"> </div> styles .leftcolumn { padding: 10px; width: 20%; float:left; } .centrecolumn { padding: 10px; width: 50%; background-image:url(images/house.png); margin-right:auto; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; text-decoration: none; padding: 0px; text-align: justify; position:relative top; } .rightcolumn { padding: 30px; width: 20%; float: right; position:relative top; } .searchs { float: right; padding: 0px; width: 400px; position: relative; } .bgcolumn { width: 100%; padding: 0px; position: relative; clear: both; } I can't seem to get the search box to centre on my site. Everything else is fine but for some reason the search box isn't. I've tried to create a container for it (that didn't work) I've tried numerous different codes in my css file and still no joy. I could put the css file up here but it's over 1000 lines long. Not advertising my site just need a professional opinion: http://trisearch.co.uk You'll see the problem. Thanks for any help or advice Hi, I have a div which is centered in the area right of the menu. However, I am trying to get it so it sits absoultly center. The width of the menu is forcing its center line to be 180px right of true center. Here is the link: http://www.zombiemod.com/rm/nina2/about.html Here is the HTML: Code: <div id="main-image-container"> <h5><b>ME: SWEDE & TAURUS</b> - It must be a good combination<br /><br /> Patient, reliable, persistent & determined. They will do their jobs to perfection, or at least as close to it as possible. </h5> </div> Here is the CSS: Code: #main-image-container {
position: relative;
overflow: hidden;
width:600px;
margin-left:auto;
margin-right:auto;
}
Can anyone help me with this please? I tried to offset the main image container by -180px but that didnt work. Please see: http://www.larreamma.com/staff2.html Is there a better way to expand 'main2' then adding/increasing the 'margin-bottom' of the last (empty) paragraph? <p style="margin-bottom:150px"> </p> Without it the bottom floated image overlaps 'main2' and meets the footer. This was not an issue on the other pages of the site as the text extended beyond the floated image(s)/elements. C'mon Kravvitz... I have looked on countless web pages for help with positioning a image using CSS. I have a logo that I want to appear in the middle of the page regardless of what sized browser the person is using so basically ro replace the <center> tag. I know all about aboslute positioning etc but this means it will not ajust with the size of the browser. Can anyone help me to just position an image in the middle of a page using purely CSS? Thanks hi.. i am totaly new to this and don't know what I'm doing! can anyone help me centre my games with css not with tables? at the momment it looks fine in firefox and ok in some resolutions on internet explorer http://www.free-online-games-player.co.uk/police-chopper-game.html thanks I'm trying to use a dead centre script: Code:
div {
font-family: Arial, Helvetica, sans-serif;
position:relative;
}
#horizon
{
background-color: #0ff;
text-align: center;
position: absolute;
top: 50px;
left: 20px;
}
/* following rules are invisible to IE 5 \*/
#horizon
{
background-color: #0ff;
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
visibility: hidden;
display: block;
}
/* end IE 5 hack */
#content
{
font-family: Verdana, Geneva, Arial, sans-serif;
background-color: #ffffff;
margin-left: -400px;
position: absolute;
top: -230px;
left: 50%;
width: 800px;
height: 459px;
visibility: visible;
border:1px solid #999999; width:800px; height:459px;
}
And found a hack that is supposed to work with mac IE5 (the /* IE5 note there), but dont know what it's doing for safari. Does anyone know any workarounds for safari or know a browser detection script that can lead non-mac browsers to my dead center page and mac browsers to another page that is maybe only simply centered. Hi -- I am trying to set up a really basic css layout, and it just isn't working out for me. All I want is for the page to be split down the middle, and a footer than spans the full width of the page. Here's what I have: CSS: Code: body {
color: #FFFFFF;
background-color: #000;
}
#leftcontent{
float:left;
width:50%;
border:0px;
padding:0px;
color:#FFFFFF;
background-color:#000;
}
#rightcontent{
margin-left:50%;
margin-right:0px;
width:100%;
border:0px;
padding:0px;
color: #000;
background-color:#FFFFFF;
}
#bottomcontent{
float: bottom;
margin-bottom:0px;
width:100%;
border:none;
padding: 10px;
position:fixed;
bottom:0;
background-color:#FBBF0D;
}
HTML: Code: <html> <head> <title>Crap!</title> <link rel='stylesheet' href='css.css' type='text/css' /> </head> <body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" rightmargin="0"> <div id="leftcontent"> <h1>A logo will go here</h1> </div> <div id="rightcontent"> <h1>A navigational bar will go here</h1> <br clear ="all" /> </div> <div id="bottomcontent"> <center> <h1>Another logo will go here</h1> </center> </div> It works in IE 5.2 for Mac, but not in Safari, so I know something is very wrong, but I can't figure out what. Please help! Seems 99% of CSS questions are related to centre-aligning content, which does beg the question of why the heck it isn't easier?! Anyway, I have kind of unusual site-layout, which is essentially a set of layout images that form a pie-interface. I've laid it out fine on the left of the page, but I want it to be in the centre of the screen: The page in question is my home-site which I'm re-designing: http://haravikk.com/ Currently the interface spans a couple of HTML pages, but will use AJAX in future with the HTML pages as back-up, but that's another story entirely. So anyway, here's the basic HTML of the page, including the pie "slices": Code: <?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="content-type" content="text/html;charset=ISO-8859-1" /> <meta name="author" content="Haravikk.com" /> <title>Haravikk.com</title> <link rel="stylesheet" href="style/style.css" /> </head> <body> <div class="root"> <div class="main"> <img class="logo" src="style/images/main/logo.png" alt="" /> <a href="menu.html" title="View Menu"> <img class="logoFlame" src="style/images/main/logoFlame.png" alt="" /> </a> </div> <div class="menu"> <a href="soon.html" title="Haravikk's Links"> <img class="links" src="style/images/menu/links.png" alt="" /> </a> <a href="soon.html" title="Contact Haravikk"> <img class="contact" src="style/images/menu/contact.png" alt="" /> </a> <a href="soon.html" title="Haravikk's Gallery"> <img class="gallery" src="style/images/menu/gallery.png" alt="" /> </a> <a href="index.html" title="Close"> <img class="centre" src="style/images/menu/centre.png" alt="" /> </a> <a href="soon.html" title="Haravikk's Projects"> <img class="projects" src="style/images/menu/projects.png" alt="" /> </a> <a href="soon.html" title="About Haravikk"> <img class="about" src="style/images/menu/about.png" alt="" /> </a> <a href="soon.html" title="Read Haravikk's Blog"> <img class="blog" src="style/images/menu/blog.png" alt="" /> </a> </div> </div> </body> </html> I'm hoping people can help without me having to post the lengthy CSS as well, but if you do need it can be found here (WARNING: It's a bit messy!). To try and explain: The root div is a wrapper, with the main div being the primary structure of the site based upon the logo.png image; that image is a large square-aspect-ratio image which has a height of 100%, and automatic width. All other images are designed to layer on top of it when aligned by the top-left corner (i.e - I've trimmed away any transparency to the right or bottom of the image). Ideally I would have positioned them to right or bottom as appropriate so I could trim them more, but I can't get that to work. Can anyone help in figuring out how in the heck I would go about centring this site-layout? I'm shying away from the use of tables, but can use them if I have-to. Also, while all major browsers should work, some may look a little weird; I'll be adding browser-specific style-info later-on. I have this problem on and off in different web sites I have designed. Somehow I get around it, however, I really do not understand why I have the problem, and how I solve it. here is the link: http://mizuedesign.com/0000.html in IE7, my #mainContainer extends as I put in some other divs etc. (there is a border around it.) However in FF, Safari, and Opera the same DIV does not extend. I am trying to achive the results I see in IE7. Any help would be greatly appriciated. S. Boztepe I'm having a bit of mental block. How do I achieve the following: 100% width div LEFT SPAN (left aligned) | MIDDLE SPAN (centre aligned) | RIGHT SPAN (right aligned) I thought it was possible in one div rather than having to go the three column layout route? Hi, I like to know how to extend an existing class. .footertext50per { PADDING-RIGHT: 5px; PADDING-LEFT: 10px; PADDING-BOTTOM: 3px; WIDTH: 50%; COLOR: #c1cfe9; PADDING-TOP: 1px; } .footertext50perleft { PADDING-RIGHT: 5px; PADDING-LEFT: 10px; PADDING-BOTTOM: 3px; WIDTH: 50%; COLOR: #c1cfe9; PADDING-TOP: 1px; TEXT-ALIGN: left } As you see in the second class "footertext50perleft", the only difference with respect to the first class "footertext50per" is the 'text-align'. This lead to duplication of coded. I like to know whether it is possible to extend "footertext50per" to "footertext50perleft" and just define the additions or modifications only. Thanks. Hello everybody, I present myself, I'm Alessandro a new member from Italy. I found this forum very useful. Hope to find good answers following topics and hope to help someone when I'm able to. Ciaooooo I have this issue for the moment: I have a homepage layout with 3 columns with an images and captions inside everyone. I have a subtitle also, and I want the subtitle extends orizzontally over the div without resizing it and without rollbars. see a screenshot he http://www.alessandroboselli.it/foto/screenshot.jpg and here is the involved CSS code: Code:
/* Homepage layout --- start */
#wrapper {
text-align: left;
margin: 0px auto;
padding: 0px;
border:0;
width: 980px;
}
#side-left {
float: left;
width: 300px;
}
#center {
float: left;
width: 300px;
}
#side-right {
float: right;
width: 380px;
}
/* Homepage layout --- end */
/* Homepage images --- start */
.homepageimage {
position:relative;
float:left; /* optional */
top:40px;
-moz-box-shadow: 3px 3px 4px rgba(0,0,0,0.5);
-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,0.5);
box-shadow: 3px 3px 4px rgba(0,0,0,0.5);
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#5f5f5f')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#5f5f5f');
}
.homepageimage a {
text-decoration: none;
float: left;
}
.homepageimage a .homepageimagetitle {
display: block;
font-family: 'Molengo', Arial, serif;
font-size: 18px;
font-style: normal;
font-weight: 400;
text-shadow: none;
text-decoration: none;
letter-spacing: 0.050em;
word-spacing: 0em;
line-height: 1.2;
padding: 10px 0;
background: #111;
filter:alpha(opacity=75);
opacity:.75;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
color: #fff;
position: absolute;
top: 0px;
left: 0px;
padding: 5px;
margin: 0;
width: 190px;
/*position: absolute;
right: 20px;
bottom: 20px;
filter:alpha(opacity=65);
opacity:.65;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; /*--IE 8 Transparency--*/
}
.homepageimage a .homepageimagesub {
display: block;
font-family: 'Buda', serif;
font-size: 22px;
font-style: normal;
font-weight: 400;
text-shadow: none;
text-decoration: underline;
text-transform: none;
letter-spacing: 0.007em;
word-spacing: 0em;
line-height: 1.15;
padding: 10px 0;
background: #111;
filter:alpha(opacity=75);
opacity:.75;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
color: #fff;
position: absolute;
top: 215px;
left: 0px;
padding: 5px;
margin: 0;
}
sorry cant work out while the site will not centre have a full div id wrap with margin 0px auto. Still wont centre something so simple. all as i can think is it is the float:left; but removing sends the layout wild and ont know what to reaplce it with. Code:
<style type="text/css" media="screen">
#wrap {
width:960px;
margin:0px auto;
}
#header {
float:Left;
width:950px;
margin:5px;
height:180px;
border:#000 1px solid;
}
#off1 {
float:Left;
width:310px;
height:120px;
margin:5px;
border:#000 1px solid;
}
#off2 {
float:Left;
width:310px;
height:120px;
margin:5px;
border:#000 1px solid;
}
#off3 {
float:Left;
width:310px;
height:120px;
margin:5px;
border:#000 1px solid;
}
#main_content {
float:Left;
overflow:hidden;
width:960px;
height:auto;
margin:auto;
}
#leftcol {
float:Left;
margin:5px;
border:#000 1px solid;
width:590px;
height:auto;
}
#rightcol {
float:Left;
margin:5px;
border:#000 1px solid;
width:350px;
height:auto;
}
#footer {
float:Left;
width:950px;
height:auto;
border:#000 1px solid;
margin:5px;
}
</style>
<!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=utf-8" />
<title>Super Saver Ltd</title>
</head>
<body>
<div id="wrap">
<div id="header"></div>
<div id="off1"></div>
<div id="off2"></div>
<div id="off3"></div>
<div id="main_content">
<div id="leftcol"></div>
<div id="rightcol"></div>
</div> <!---main content end--->
<div id="footer"></div>
</div>
</div><!---main container end--->
</body>
</html>
Hi all i am just wondering exactly how you get a div to stay in the center of a page no matter what screen resolution. I have a DIV which I have set the height to 100%. I understand that height: 100% means that it will fit up to 100% of the viewable screen area. How would I define it so that it expands to fit 100% of the content area? Meaning that if the content scrolls more than 100% of the height of the screen, the background will stretch to fit the whole content height. The URL with an example of the site I'm working on is: http://hawaiihomebrew.com/os_comm/index.php?cPath=50_51 The site is not complete so please bare with some of the broken images and all that. When my products extend beyond the height of the screen the white background stops at the point before you have to start scrolling and I want it to extend the whole height of the content. My css is below. The right_col class is the one that contains the content in question. Code:
/* CSS Document */
body {
font-family:Geneva, Arial, Helvetica, sans-serif;
color: #000000;
font-size: 80%;
background-color: #ffffff;
margin: 0px 0px 0px 0px;
background-image: url(../images/hw_back.gif);
}
#left_col {
position: absolute;
top: 0px;
left: 0px;
padding: 10px 10px 10px 10px;
height: 100%;
width: 18%;
background-color: #63782B;
background-image:url(../images/hw_back.gif);
}
#right_col {
position: absolute;
top: 0px;
left: 18%;
height: 100%;
width: 82%;
background-color:#FFFFFF;
}
#cart_rt {
position: absolute;
top: 0px;
right: 0px;
padding: 10px 10px 10px 10px;
height: auto;
width: 35%;
text-align: right;
}
#cart_lt {
position: absolute;
top: 0px;
left: 0px;
padding: 10px 10px 10px 10px;
height: auto;
width: 35%;
text-align: left;
}
#content {
position: absolute;
top: 20px;
left: 0px;
padding: 10px 10px 10px 10px;
height: auto;
width: 100%;
}
is it possible? its the banner... the content spans around 1000 pixels wide so with 100% width i miss a piece when i scroll to right of page just making the body around 1000 pixels seems to get a horizontal scrollbar when its not needed for the content....either that or its just missing some pixels... cant a div be 100% of the page? Using CSS, is it possible to vertically align centrally text to an image as you can using tables? A simple example using a table would be <table border="0" width="100%"> <tr> <td><img border="0" src="image.gif" width="609"height="115"></td> <td valign="middle">Ray did this</td> </tr> </table> Using CSS so far I've got... <p><img class="imglft" border="0" src="img.jpg" width="434" height="400" alt="my image">Ray did this> The CSS for imglft is... .imglft{ float: left; margin-right: 30px; } I've tried putting the whole lot in a DIV and using text-align: middle and vertical-align: middle but that doesn't work. You can see what I mean by comparing http://brisray.com/grad.htm or http://members.lycos.co.uk/brisray/grad.htm with http://brisray.com/ray/rgrad.htm or http://members.lycos.co.uk/brisray/ray/rgrad.htm Ray |
|||||||