|
CSS - 100% Height With Flexible Centre Image
I'm trying to do something that probably isn't as difficult as it's becoming for me. I want to have a 100% height page, which I've managed okay with so far. I want the header and menu to be a fixed height, and a footer of fixed height too, with the middle section being what expands to fit the whole design. This middle section, however, is a div containing an image that needs to get its height somehow.
I've reverted back to my old fixed code, which loaded a stylesheet depending on the users screen resolution, but it's too limited and I'd like to know how to go about incorporating the 100% height idea. http://www.ryanbuckley.ca/BRIT/drawings.php Similar TutorialsHi Guys, I have been recently playing with some HTML/CSS and I cannot figure out a way to make my website to be flexible. I have attached a link to the screenshot to show what happens when I reach out of height. I am using min-height but I doesn't seem to responde. http://screencast.com/t/NNx4fxkFAc I will also upload my CSS and HTML code. I tried to keep it clear and easy to read. I really appreciate any help as I have been trying to fix it whole day, getting sort of desperate. Code:
/*---------- Header Start ---------- */
#header {
background:url(images/topbar_slice.png) repeat-x;
height: 268px;
}
#logo { background:url(images/logo.png) no-repeat;
position: absolute;
padding-bottom: 30px;
top: 7%;
left: 3%;
width:320px;
height:90px;
}
#logo h1, #logo small {
display:block;
text-indent:-9999px;
}
ul#menu {
margin:0px; padding:0px;
position:relative;
left:0px;
top: 10px;
}
ul#menu li {
display:inline;
margin-left:50px;
margin-bottom: 10px;
}
ul#menu li a {
text-decoration:none;
color:#ffffff;
font-family:Helvetica, Verdana, Arial, sans-serif;
font-size:10px;
font-weight:bold;
text-transform:uppercase;
}
ul#menu li a.active, ul#menu li a:hover {
color:#D8D8D8 ;
}
#search {
background: url(images/search_field.png) top no-repeat;
width:178px;
height: 30px;
position: absolute;
right: 5%;
top: 1%;
}
#search_button {
background-image: url(images/search_icon.png);
background-repeat: no-repeat;
width:20px;
height: 20px;
position: absolute;
right: 10%;
top: 6px;
}
/*--------- Header End -----------*/
/*--------- Body Start ---------- */
body {
font-family:Helvetica, Arial, sans-serif;
color:#7f7d78;
font-size:16px;
line-height:23px;
}
.block_inside {
display:block;
border:10px solid #ffffff;
background: #ffffff url(images/backgroud_slice.jpg) repeat-x;
padding:30px;
overflow:auto;
}
#main {
background:#c4c0be;
}
#main .container {
background:url(images/background_slice.png) repeat-y;
min-height: 700px;
position: relative;
margin: -0.8% 15% 0% 15%;
border:1px solid #a3a09e;
}
.text_block {
float: left;
padding-right: 40%;
margin-left: 40px;
width: 230 px;
height: 400px;
text-align: justify;
font-family: Helvetica, sans-serif, Arial;
}
h2 {
margin:60px 0px 10px 0px;
line-height:23px;
font-size:36px;
font-family:Helvetica, Arial, Sans-serif;
color:#000000;
}
small {
color:#595856;
font-weight:bold;
font-size:11px;
display:block;
margin-bottom:15px;
}
a {
color:#007de2;
text-decoration:none;
}
a {
color:#007de2;
text-decoration:none;
}
a:hover { text-decoration:underline; }
p { margin: 0px 0px 15px 0px; }
a.button {
background:#32312f url(images/button_bg.jpg) repeat-x;
padding:5px 10px 5px 10px;
color: #ffffff;
text-decoration: none;
border:1px solid #32312f;
text-transform:uppercase;
font-size:9px;
line-height:25px;
}
a.button:hover {
background:#007de2 url(images/button_bg_o.jpg) repeat-x;
border-color:#007de2;
}
/*--------- Body End ------------ */
/*--------- Sidebar Start -------- */
#sidebar {
background-image: url(images/sidebar_slice.png);
background-repeat: repeat-y;
position: absolute;
width: 285px;
margin: -18.3% 0 50% 0;
height: 80%;
right: 30px;
}
#sponsor {
background: url(images/edit.png) no-repeat;
width: 200px;
height: 200px;
position: absolute;
top: 30px;
left: 10px;
}
#sidebar_text {
color:#595856;
font-weight:bold;
font-size:11px;
display:block;
margin-bottom:15px;
margin-left: 40 px;
}
/*--------- Sidebar End ------- */
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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Almost Student</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="images/favicon.ico" />
</head>
<body>
<div id="main">
<!------------MAIN------------>
<div class="container">
<!------------Header---------------------------->
<div id="header">
<ul id="menu">
<li><a href="">Home</a></li>
<li><a href="">Articles</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Contact</a></li>
</ul>
<div id="search">
<div id="search_button">
</div><!--search button end-->
</div> <!--search end-->
<div id="logo">
<h1>Almost Student</h1>
</div> <!--logo end-->
</div> <!--header end-->
<!------------Header End----------------------------->
<!------------Content----------------------------->
<div id="post_block">
<span>
<div class="text_block">
<!--<img src="images/sample_mini_portfolio.jpg" class="thumbnail" alt="PSDTUTS" /> -->
<h2>Post</h2>
<small>test</small>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<br />
<a href="a" class="button">Continue reading...</a>
<!--<img src="images/sample_mini_portfolio.jpg" class="thumbnail" alt="PSDTUTS" /> -->
<h2>Post</h2>
<small>test</small>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<br />
<a href="a" class="button">Continue reading...</a>
</div>
</span>
</div>
<!------------Content End----------------------------->
<!------------SIDEBAR--------------------------------->
<div id="sidebar">
<div id="sponsor">
</div><!--sponsor end-->
</div><!--sidebar end-->
<!------------SIDEBAR END-------------------------------->
</div> <!--container end-->
</div> <!--main end-->
<!------------MAIN END------------>
<div id="footer">
<div class="container">
All rights reserved. Almoststudent.com
</div> <!-- container-->
</div> <!-- footer -->
</body>
</html>
Hi, I have hit the "wall" in my knowledge of CSS while trying to implement a "flex-width-equal-height-sidebar-layout" style of layout as a skin/theme for a message board system and need some help. My trouble occurs when a direct link to the post is used (instead of following the menu navigation system) where the top menu information/links area (the area between the banner and the post) is chopped off... The relevant portion of the CSS seems to be the .col_wrap {margin-top: 10px; border: 0; overflow: hidden; float: left; width: 100%; position: relative; z-index: 10; clear: both;} portion of my CSS because if I take out the overflow:hidden declaration then the menu portion of the skin/theme/layout shows correctly but the sidebar the shows the part which should be hidden at the bottom and the footer completely vanishes from view! My apologies but this is the best I can do without having the ability to post pics or urls which could better explain what is wrong and frankly speaking I don't know how anyone here can help given my inability to show the problem but hopefully someone knows or has run into this problem before or can offer some resources that may be of assistance.... 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 Hi 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; } Hi all, I am trying to automate everything on my test website and I have one more angle to cover. In effect, I want to adjust the line-height property (which I can do) based on the number of files within a specific folder (PHP and already done). The more files in the folder, the lower the line-height value must be. This is to ensure if I copy additional files into the folder, then the navigation menu (which is PHP reading files in this particular folder) will alter the CSS line-height property accordingly to ensure it can never exceed a certain height. Sounds wierd? go to www.re3.org.uk (next to the RE3 image, I have a list of hyperlinks which are obtained from files within the folder) My problem, when adjusting the CSS property (which is set as cm in *.css file) in javascript, it doesn't correspond correctly, the line-height property in javascript doesn't appear to be work in cm but some other measurement. Does anyone know how to change what unit of measurement Javascript works in? Or does anyone know what unit of measurement javascript uses when adjusting line-height / line-width values? I want to create a mini-algorithm that works out the appropriate line-height based on the image height (got that already) and the number of files in the folder (got that too) so the menu automatically adjusts to fit. Whew! It seem that everytime I added the image tag, the div'x area get bigger in IE but not in Mozilla/Firefox browser. So, I thought by added the "margin-bottom:-360px;" to the div would fix it but it had an opposite effect. Meaning it worked in IE but Mozilla show a vertical scrollbar. So, does anyone know how can I make the <img> overlap one another without being stacked on one after another in height for IE if I take out the "margin-bottom: -360px;"? Thanks... Code:
div.divBox1
{
width: 286px;
height: 359px;
float: left;
}
div.divClearFloat
{
clear: both;
height: 0px; /* For IE Stupidity (it added some spaces after clearing the float) */
font-size: 1pt; /* For IE Stupidity (minimum height only work with current font-size somewhere) */
}
div.divDottedLineAdvertisementSeperator1
{
width: 575px;
height: 3px;
background-color: #ff0000;
font-size: 1pt; /* For IE Stupidity (minimum height only work with current font-size somewhere) */
}
Code: <div class="divBox1"> <div style="margin-bottom:-360px;"> <img src="images/doctor.jpg" style="position:relative;top:0px;left:0px;z-index:2;"> <img src="images/we_help.jpg" style="position:relative;top:-360px;left:0px;z-index:1;"> </div> </div> <div class="divClearFloat"></div> <div class="divDottedLineAdvertisementSeperator1"></div> Okay, so I want to get an image (left) and a div container (right) positioned on the same line. The image is 225x225, and I want 15px of space between the image and div container; the div container should also fill in the rest of the width on that page. HTML = <img id="logo" src="logo.gif" width="225" height="225"><!- insert 15px spacing --><div id="navbox"><!-- 100% width? --></div> and, CSS = ? Thanks! problems with positions divs and images within them ... when I have a positioned div, and I insert an image, or another div with image inside, it makes the div too high, and not sure how to get it straight. Code: ?>
<div id="cmp" style="position: absolute; left: <?=$cmp_left*$x_scale+$offx+$leftcolwidth+$xspace ?>px; top: <?=(($startrow*$y_scale)+($cmp_y)*$y_scale)-$offy ?>px; width: <?=($cmp_right-$cmp_left)*$x_scale+$leftcolwidth+$xspace ?>; height: <?=$y_scale+1 ?>; background-color: <? if( $cmp_row[ $j ] != null ) echo $cmp_row[ $j ]->type->getcolour( -1, $connect ); ?>; border: solid black 1px; z-index:<?=$i ?> " >
<div style="position: absolute; left: <?=$cmp_left*$x_scale+$offx+$leftcolwidth+$xspace ?>px; width: <?=($cmp_right-$cmp_left)*$x_scale+$leftcolwidth+$xspace-20 ?>; height: <?=$y_scale ?>;" align="left" width="20px" height="<?=$y_scale ?>px">
<? if( $cmp_row[ $j ] != null ) echo substr( rtrim( $cmp_row[ $j ]->getName() ), 0, $maxchars ); ?>
</div>
<div style="position: absolute; left: <?=$cmp_right*$x_scale+$offx+$leftcolwidth-20 ?>px; width: <?=20 ?>; height: <?=$y_scale ?>; align: right" >
<img src="images/<?=$icon ?>" alt=<?=$alt ?> border="0" <?=$mousey ?>>
</div>
</div>
<?
the code above has got a bit messy with trying to fix the problem... Cheers Adam Hi, Does anyone have any ideas or fixes to get an image to be 100% height of a table cell in IE. (XHTML Transitional) Here is an example http://www.degs.co.uk/test/css/height.htm Works fine in Mozilla/Firefox & Opera Code: html {
height: 100%;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
background-color: #FFFFFF;
height: 96%;
}
table {
padding: 0px;
height: 100%;
width: 700px;
border: 1px solid #000000;
}
.vdivider {
width: 5px;
height: 100%;
}
Cheers, Degs 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 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 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 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 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. Below is what I have. Displays fine in FF. In IE, there is approximatly a 13px white space under the image. Can't find an answer to this. Any insight is appreciated. --Sean HTML: <p id="dot"></p> CSS: #dot { position:relative; left: 0px; top: 0px; width:200px; height:6px; background-image: url(dot.jpg); background-repeat: repeat-x; line-height:0pt; margin: 0px; } Hey guys, how are you? So, I got two questions. Right now, on my main pages I have a fixed height, and wondering the best way to change it to a liquid one, so no matter how long the page is, I get a white background that's consistent with my 'main' <div>. And the second one, is how do I get a second background image on the body? I'm probably going to use almost almost a mirror type gradient of the top gradient, but not sure how to add it. You can view the two problems here http://thecheckoutplace.com/ home page). Thanks for your time, cheers. Hi I have a div where I want to use two vertical images as border. I also want the images to stretch vertically in relation to the height of div. Works in IE6, IE8, Firefox, and Chrome (have not tested other browsers yet), but not in IE7. IE 7 make the border images in example below, stretch all the way towards the bottom of the outer idv, far below the div in question. Does anyone know how I prevent IE7 to stretch the two border images below their parent container? Here is code used: Please use attached images if you want to test this. Nice way to test this in multiple browsers are he https://browserlab.adobe.com/en-us/index.html Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
.quoteStretch {
height:100%;
}
/* next is hack to make it work in IE6 */
* html .quoteStretch {
height:expression(
this.parentElement.offsetHeight+'px'
);
}
</style>
</head>
<body>
<div style="width:300px; height: 400px; margin: 50px auto 0 auto; border: 1px solid red;">
<div style="position:relative; width:100%; border-bottom:1px solid gray;">
<img src="path-to-image/siteborder-left.jpg" width="1px" height="1px" class="quoteStretch" style="position:absolute; top:0px; left:-22px; z-index:auto; width:22px;" />
<img src="path-to-image/siteborder-right.jpg" width="1px" height="1px" class="quoteStretch" style="position:absolute; top:0px; right:-23px; z-index:auto; width:23px;" />
<div style="display:block; padding:15px;">
Text comes here
<br />
Text comes here
</div>
</div>
</div>
</body>
</html>
|
|||||||