|
CSS - How To Make This Without Tables So That It Fills The Screen
hello everyone,
i've been pulling my hairs on this one. i have a layout designed and i want to produce the html and CSS. what i wish is that the layout fills the screen by stretching towards the right and bottom, according to what's inside the "content" area. my problem is having the left side stretch vertically as needed to display the content , so that it joins the footer. the structure of the page blocks would be: (see attached img) any idea how to do this ? please help, it's urgent !! thanks a great lot, alx Similar TutorialsPlease take a look at the following site. website How can I make the white part touch the bottom of the browser? i've seen this done many times with other sites. Here's how the footer looks now: And here's the desired result: Any ideas? It'll have to be cross-browser friendly (even IE6, god help me). Thanks! hi, im not sure if im posting in the right page but after viewing the page source, i think its the best way to post it right here i just want to know what should i learn to make such beautiful block/tables whatever call it just like at kathymarks dot com? any suggestion what should i learn from? links? thanks! on the side note, how about the tables/blocks on deviant art? thanks for the replies! Have a look at the menu at the top of this page. While it does use some CSS, it doesn't appear to use it for spacing. (In point of fact, this page uses tables quite a bit, though not for that menu). Anyway, if I want to create a top menu (rather than a side menu, perhaps), then how do I evenly space the menu choices across the div (area) that I create for it? Something like: Home Directions Photos Login FAQs About Us but nice and even-spaced across the area designated for it. Naturally, I could do the math and use {position:absolute; left:16%} for each item, but this is a bad substitution for a quick, effective, and not so dirty table. Is there a way to set something up once in CSS that applies to all words or <a>'s or something, within a <div>? Thanks. Hi, I am a wannabe css compiler... Have the following problem. wrote css for a square screen monitor and placed css box in an area to the right of center, my partner called and told me it sat to the left over the side menu onher wide screen. I cannot figure out how to compensate the (top/left) position to cover both type screens... Anyone help me? Hey guys! Usually if you make a table and then make another table, the other table will be located below the table before. I want them to be side by side. So I tried this CSS value : table { display : inline; } then it worked, but the problem is, that if the tables have different sizes, the smaller one is not aligned to the top and looks smaller than the table before it. I want them all to be aligned to the top. I tried vertical-align:top and valign="top", but they still don't work... Is there any other way to make tables have no line breaks before and after the table? Is there any other property that controls the line breaks of the table? I tried display:table-cell , but the problem is still the same. thanks I'm not confident enough with CSS to just use it, so I'm mixing it with some tables too. I want a layout with two tables next to each at the top and then another below. The two at the top are working fine, but the one below keeps jumping back up to the top. I've managed to get an ugly fix by putting in a load of <br> but this doesn't work in IE7 (unless I add a lot more, pushing the content way down in other browsers) and isn't much of a solution. The other problem I have is that I want to have the majority of my page with a white background, but to get a surrounding border I've set the body background to be a colour and then placed a div around all the content. I want this div to be the size of the page and so set it's height to 100%, but this makes it too small. Not sure why. Here is my code for my page and CSS. If anyone can help I'd be most grateful. 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=utf-8" />
<title></title>
<link href="incl/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function navon(num) {
document.getElementById("nav" + num).style.backgroundColor = '#CDEB8B';
document.getElementById("nav" + num).style.paddingTop = '0px'
document.getElementById("nav" + num).style.paddingBottom = '0px';
document.getElementById("nav" + num).style.borderTopWidth = '10px';
document.getElementById("nav" + num).style.borderBottomWidth = '10px';
}
function navoff(num) {
document.getElementById("nav" + num).style.backgroundColor = '#C3D9FF';
document.getElementById("nav" + num).style.paddingTop = '8px'
document.getElementById("nav" + num).style.paddingBottom = '8px';
document.getElementById("nav" + num).style.borderTopWidth = '2px';
document.getElementById("nav" + num).style.borderBottomWidth = '2px';
}
//-->
</script>
</head>
<body>
<div class="main">
<table width="29%" border="0" cellpadding="2" cellspacing="5" align="left">
<tr>
<td><img src="" alt="" width="230" height="80" border="0" /></td>
</tr>
</table>
<table width="70%" height="60px" border="0" cellpadding="2" cellspacing="5" align="right">
<tr>
<td width="180px" class="nav" id="nav1" onmouseover="navon('1')" onmouseout="navoff('1')">link</td>
<td width="180px" class="nav" id="nav2" onmouseover="navon('2')" onmouseout="navoff('2')">link</td>
<td width="180px" class="nav" id="nav3" onmouseover="navon('3')" onmouseout="navoff('3')">link</td>
<td width="180px" class="nav" id="nav4" onmouseover="navon('4')" onmouseout="navoff('4')">link</td>
<td width="180px" class="nav" id="nav5" onmouseover="navon('5')" onmouseout="navoff('5')">link</td>
</tr>
</table>
<br /><br /><br /><br /><br /><br />
<table width="100%" border="0" cellpadding="2" cellspacing="5" align="center">
<tr>
<td width="70%">
some content
</td>
<td width="30%">
some more content
</td>
</tr>
</table>
</div>
</body>
</html>
Code:
@charset "utf-8";
/* CSS Document */
body {
padding-right: 4%;
padding-left: 4%;
padding-top: 30px;
padding-bottom: 30px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
letter-spacing: 0.1em;
color: #000000;
background-color: #EEEEEE;
}
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
color: #000000;
text-decoration: none;
}
a:active {
color: #000000;
text-decoration: none;
}
a:hover {
color: #000000;
text-decoration: underline;
}
.main {
background:#FFFFFF;
border: 10px solid #36393D;
width: 89%;
padding: 5%;
}
.nav {
padding: 8px;
background-color: #C3D9FF;
vertical-align: middle;
text-align: center;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 24px;
color: #36393D;
cursor:pointer;
border: 2px solid #36393D;
}
how can i get a div in the middle of the y-axis of the browser window? <html> 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>All Fore U Golf Clinic</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript" src="drop_down.js"></script>
<style type="text/css">
@import "nav.css";
</style>
<style type="text/css" media="screen">
</style>
</head>
<body>
<div id="header">header thing</div>
<div id="wrapper">
<div id="container">
<div id="content">
<h1>content</h1>
<p>Sum Stuff goes here...</p>
<p class="last">...and here</p>
</div>
</div>
<div id="sidebar">
<h1>navigation</h1>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Offices</a></li>
</ul>
</li>
<li><a href="#">Golf Stuff</a>
<ul>
<li><a href="#">Clubs stuff</a></li>
<li><a href="http://www.google.com">accessories stufff</a></li>
<li><a href="#">Hosting</a></li>
<li><a href="#">Domain Names</a></li>
<li><a href="#">Broadband</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a>
<ul>
<li><a href="#">United Kingdom</a></li>
<li><a href="#">France</a></li>
<li><a href="#">USA</a></li>
<li><a href="#">Australia</a></li>
</ul>
</li>
</ul>
<br>
</div>
<div class="clearing"> </div>
</div>
<div id="footer">footer thing</div>
</body>
</html>
CSS: Code:
body {
font: normal 11px verdana;
}
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 149px; /* Set 1px less than menu width */
top: 0;
display: none;
}
/* Styles for Menu Items */
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
li:hover ul, li.over ul { display: block; } /* The magic */
/*<![CDATA[*/
#wrapper {
background: #f1f2ea;
}
#header {
background: #d7dabd;
}
#container {
width: 100%;
background: #f1f2ea;
float: right;
margin-right: -200px;
}
#content {
background: #f1f2ea;
margin-right: 200px;
}
#sidebar {
width: 200px;
float: left;
}
#footer {
background: #d7dabd;
}
h1 {
margin-top: 0;
}
.last {
margin-bottom: 0;
}
.clearing {
height: 0;
clear: both;
}
/*]]>*/
Works fine in IE, but when displayed in firefox the id=content extends off the screen. Hi All, This is my first post in CSS forums. I want to display a DIV in the center of screen. I am using this DIV for the showing the progress image in my search page (So it is is visible only in some cases.) How can I make it visible in the center of the visible screen (above all other elements). Note: User may have scrolled down the screen. I hope this is possible with CSS I've run into yet another IE "feature" that i'd like to ask you, dear colleagues, how to solve. I have a relatively positioned div and i need to absolute position another div inside of it to fill almost all width and height of the parent. I need it to have a 20px margin from top and bottom. Here's what works in real browsers: Code:
.somediv{
position: absolute;
left: 0;
top: 20px;
bottom: 20px;
right: 0;
}
Now how do i make it work in a developer's nightmare IE? There are 2 more divs in top and bottom both 20px high so the new div shouldn't overlap with them. I couldn't figure out why people were telling me they couldn't see my page but i could see it just fine in two different locations. Come to find out I use firefox and IE is showing a blank page. Can someone help me with this? In IE 7.0 Why is the text displaying the way it is in this screen shot: http://www.larreamma.com/screens/lmma.png It should display like this: http://www.larreamma.com/screens/lmma_ie8.png (I do not have access to IE 7 to readly test various options). Thank you in advance. I have a page dien all in css that is all set for 800x600 resolution. Does any one know how I can detect larger screen size/resolutions and center the entire page for these instances thanks JT Hi, thanks for your time. My problem is with screen resolution, I am currently building a website using 1280 x 1044 pixels. At this resolution the website looks fine. I have used CSS styles and the size page I have used is 80% so there is a blue background around the page. The problem is I have 2 images sized 990 width pixels, at the current resolution they look fine, but when I drop the resolution they will stay the same size (which is now way too big) while the page size will remain a constant 80% so I am left with an image nearly twice as wide as my content. I have thought of splitting one of the images and used a float left and right for it, but the other image is not possible to do that with, I have seen sites with big banners on so how do those images remain constant size even when you change resolution? All help will be greatly appreciated. Many thanks. Craig Hi All, I have a fixed div which I am using as a footer in my application. here is the screen shot of my page please have a look first so u will understand what i am talking about. http://img192.yfrog.com/img192/5572/1280x768.gif Problem is that if I browse the application on 1024 x 768 pixels it works great but when i change the resolution up to 1280 x 800 pixels the image inside the div change its position. I want this to appear same on every resolution...any suggestions or workaround. the CSS code is below Code:
#footer
{
position: fixed;
top: auto;
left: auto;
width: auto;
}
here is the HTML Code:
<html>
<head id="Head1" runat="server">
<link href="../App_Themes/style.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/jquery-1.3.2.min.js" type="text/javascript"> </script>
<title></title>
<style type="text/css">
.style1
{
width: 800px; background-color:White
}
.style2
{
height: 391px;
}
.style3
{
text-align: right;
}
</style>
</head>
<body bgcolor="#d7d7d7">
<form runat="server">
<div id="content" style="margin: auto; border: thin solid #C0C0C0; padding: 0px 0px 0px 0px; width: 820px; height: 595px"
align="center">
<table align="center" class="style1">
<tr>
<td style="font-family: 'Times New Roman', Times, serif; font-size: small; color: #FF0000;"
class="style3">
<asp:ContentPlaceHolder ID="StatusBar" runat="server">
</asp:ContentPlaceHolder>
<asp:Image ID="Image1" runat="server" ImageUrl="~/images/appHeader.png" />
</td>
</tr>
<tr>
<td class="style2" align="left" valign="top">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
<tr>
<%--<td style="background-color: #FF9933; height: 15px;">
</td>--%>
</tr>
</table>
<div id="footer">
</div>
<%-- <table align="center" class="style1">
<tr>
<td>
<div id="footer">
<img src="../images/footer.png" alt=""/>
</div>
</td>
</tr>
</table>
--%> </div>
</form>
</body>
</html>
I want a table below the container div and want to place my footer div inside that table and on every resolution it should come up the same...i did try but its not working...help need I could use some help testing out a css box that's been breaking on large screen res's. Its a sliding door effect as the page gets wider made with 800px wide images. I added max-width: 1600px to my container I'm hoping that fixed it. Quote: #container{ width: 100%; margin-left: auto; margin-right: auto; margin-top: 100px; max-width: 1600px; } I have been looking for this all over the place but cant find the right solution. I want a div aligned like it's on this website. Code: http://www.captaincrawl.com/ 1. It's aligned in the center/middle of the screen 2. It's relative so it moves according to the window size 3. It should work on major browsers such as IE Can anyone help me please? Ok so I got a big one here... At least it is to me. I know absolutely NOTHING about CSS. I use GoDaddy.com and their program WebSite Tonight to build my website. http://www.thebdsmith.com My problem is this. I build the site using a Macbook Pro 15 inch. I always felt I was rather limited with space. I was on my brother in laws computer, he has a PC with a widescreen monitor. When viewing the site on HIS computer there was so much empty space on the right hand side. So I got excited and redesigned the site (after redesigning just 2 a week earlier). The outcome was so much better than before. NOW, this is the problem. When I go back to my Macbook area is missing again and I have to scroll right to see it. I do NOT like that. I emailed GoDaddy support one guy gave me the dumbest reply I've ever heard that was the OPPOSITE of what I had stated. Another said my template design is a fixed width and I'd have to edit the CSS coding to fix it. I don't know where in the CSS code to edit. This is GoDaddy default CSS that I am just wanting to edit and reuse. I know nothing of CSS so I don't see why not. Code: /**
* @file
* @project 675
* @package sftheme
* @site app1
*/
/**
* ------------------------------------------------------------------
* @section RESETS
* ------------------------------------------------------------------
*/
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
font-family: Verdana, Geneva, Kalimati, sans-serif;
font-size: 11px;
color: #ffffff;
background-color: #051417;
background-image: url(images/675_background.jpg);
background-position: center top;
background-repeat: no-repeat;
}
a:link{color: #ffffff;}
a:visited{color: #ffffff;}
a:hover {color: #ffffff;}
.sf_navigation ul li a {color: #ffffff;}
.sf_navigation ul li a:visited {color: #ffffff;}
.sf_navigation ul li a:hover {color: #ffffff;}
.sf_navigation .subnav li a {color: #ffffff;}
.sf_navigation .subnav li a:visited {color: #ffffff;}
.sf_navigation .subnav li a:hover {color: #ffffff;}
.sf_footer {color: #ffffff;}
.sf_pagetitle {color: #ffffff;} /*(WST Only)*/
.sf_outer_wrapper {
}
.sf_main_header {
color: #ffffff;
font-size: 32px;
font-family: Verdana, Geneva, Kalimati, sans-serif;
padding-left: 29px;
}
.sf_pagetitle {
font-family: Verdana, Geneva, Kalimati, sans-serif;
font-size: 24px;
font-weight: normal;
margin: 0;
padding-top: 0px;
}
.sf_pagetitle h1{
font-family: Verdana, Geneva, Kalimati, sans-serif;
font-size: 24px;
font-weight: normal;
margin: 0;
padding-top: 0px;
}
/**
* ------------------------------------------------------------------
* @section HEADER
* ------------------------------------------------------------------
*/
.sf_outer_wrapper {
border-left:1px solid #2D4461;
border-right:1px solid #2D4461;
}
* html .sf_outer_wrapper {
width: 1200px;
}
.sf_main_wrapper{
width: 600px;
float: left;
margin-left: 67px;
}
* html .sf_main_wrapper{
margin-left: 0px;
}
.sf_wrapper {
margin:0 0;
padding:0px 10px;
width: 1000px;
}
* html .sf_wrapper {
width: 1200px;
}
.sf_wrapper:after {
clear:both;
content:".";
display:block;
font-size:1px;
height:0pt;
visibility:hidden;
}
.sf_region3 {
height: 150px;
}
.sf_main_header {
padding-top: 33px;
margin: 0px 33px;
color: #FFFFFF;
}
/**
* ------------------------------------------------------------------
* @section NAVIGATION
* ------------------------------------------------------------------
*/
.sf_region4 {
float: left;
font-size: 14px;
width: 200px;
overflow: visible;
float: left;
padding-bottom: 50px;
padding-right: 50px;
text-decoration: none;
margin-top: 53px;
margin-left: -24px;
.margin-left:-14px;
}
.sf_navigation .nav a {
width: 139px;
padding: 10px;
font-size: 18px;
}
.sf_navigation .sf_first_nav_item {
background-repeat: no-repeat;
background-position: 0px 0;
padding-top: 12px;
border: 0;
}
.sf_navigation {
float: left;
padding-bottom: 50px;
padding-right: 50px;
text-decoration: none;
margin-top: 0px;
width: 159px;
margin-left: 77px;
z-index: 1000;
position: relative;
}
* html .sf_navigation {
margin-left: 33px;
}
.sf_navigation .nav .subnav a {
background-image: none;
font-size: 12px;
padding-bottom: 12px;
padding-top: 12px;
background-color: #051417;
background-repeat: no-repeat;
background-position: top right;
border: none;
z-index: 1000;
}
.sf_navigation .nav .subnav a{
background-color: #051417;
color: #ffffff;
}
.sf_navigation .nav .subnav a:link{
background-color: #051417;
color: #ffffff;
}
.sf_navigation .nav .subnav a:visited{
background-color: #051417;
color: #ffffff;
}
.sf_navigation .nav .subnav a:hover {
background-color: #051417;
color: #ffffff;
}
.sf_navigation ul {
padding: 0 0 12px 0;
margin: 0;
list-style: none;
float: left;
background-position:0 bottom;
background-repeat:no-repeat;
}
.sf_navigation:after {
content: ".";
display: block;
visibility: hidden;
height: 0;
font-size: 1px;
clear: both;
}
.widget {
margin-left: 24px;
}
* html .widget {
margin-left: 24px;
}
.sf_region4 .sf_navigation .nav a:hover {
text-decoration: none;
}
.sf_navigation ul li {
float: left;
}
.sf_navigation ul li a {
width: 214px;
display: block;
text-decoration: none;
padding: 0;
padding-bottom: 12px;
width: 200px
}
.sf_navigation li ul.subnav {
padding: 0;
margin: 0;
list-style: none;
float: left;
width: 160px;
position: absolute;
left: -999em;
margin-left: 158px;
margin-top: -43px;
z-index: 1000;
padding:5px 5px 0;
background-image: none !important;
background-color:#051417;
}
.sf_navigation .subnav li {
float: left;
margin-bottom: -1px;
width: 176px;
}
.sf_navigation .subnav li a {
width: 11em;
display: block;
color: #000000;
text-decoration: none;
padding: 0;
margin-bottom: 0px;
}
.sf_navigation .subnav li a:visited {
color: #000000;
}
.sf_navigation .subnav li a:hover {
color: #000000;
text-decoration: none;
}
#Nav1 li:hover,
#Nav1 li.hover {
position: relative;
}
/* lists nested under hovered list items */
#Nav1 li:hover ul,
#Nav1 li.sfhover ul {
left: auto;
}
#Nav1 iframe{
position: absolute;
left: 0;
top: 0;
z-index: 0;
display: none;
}
* html #Nav1 iframe {
display: inline;
filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);
}
.sf_navigation .widget_header{
display: none;
}
.sf_navigation ul.subnav a {
color: #FFFFFF;
}
.sf_navigation ul.subnav a:hover {
color: #a4bedf;
}
.sf_navigation ul.subnav a:visited {
color: #FFFFFF;
}
/**
* ------------------------------------------------------------------
* @section MAINCONTENT
* ------------------------------------------------------------------
*/
.sf_pagetitle {
margin-left: 316px;
width: 600px;
margin-bottom: 20px;
padding-bottom: 10px;
}
* html .sf_pagetitle {
margin-left: 5px;
}
.sf_pagetitle h1 {
padding-right: 22px;
}
.sf_main_wrapper {
margin-top:-25px;
padding-bottom: 50px;
}
.sf_content {
padding-left:27px;
padding-top:21px;
float: left;
width: 600px;
}
* html .sf_content {
padding-left:0px;
width: 700px;
}
/**
* ------------------------------------------------------------------
* @section FOOTER
* ------------------------------------------------------------------
*/
.sf_footer{
width: 425px;
margin: 0px auto;
padding-top: 60px;
padding-bottom: 20px;
}
a:hover {
text-decoration: none;
}
* html a {position:realtive}
Sorry for the huge post and thanks for taking the time to read and any help you may offer! B.D.Smith |
|||||||