|
HTML - Percentages And Pixels
I have a website with two side boarders inside a table and a content cell in the middle
The left and right boarders are 100px each, and the middle I want to be the rest of the page. I tried to define the tables widths as 100 each and then add the middle to be 100% (to make it the remaining space) but it just filled the whole page with the content cell. Could anyone help me out? Thanks, Chuckles Similar TutorialsHere is the code I'm adding to my website to feature a Google Ad text link. <script type="text/javascript"> <!-- google_ad_client = "ca-pub-548569347568435"; /* google ad link1 */ google_ad_slot = "6594051295"; google_ad_width = 160; google_ad_height = 90; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> Everything is aligned to the left and the google ad appears tight against the left hand side of my column and I need to move it 5 pixels to the right to appear inline with everything else, I have tried putting left:5px; in various different places in the html code, but it either does nothing to the position or the google ad disapears altogether. So where do I put the positioning code? and is left:5px; the correct code for the job? Thank-you James Is there a way (HTML, CSS or Java) to make an index page open automatically 150 pixels down from the actual top of page? Reason: I have a lot of cheap hosted sites with banners at top and it would be great if I could get the page to automatically open with the top banner scrolled off the top of the screen. OK, I'm cheap...... I admit it but I was thinking that it would be nice if this could work..... How wide should you make your page/site? Since most have different size monitors and settings, how wide should your page be so it's not tiny on one user's monitor, and not too big on another? Hello, okay, so i was thinking about redesigning my site because i never really have done so before. but as i was thinking, i was thinking it would be nice to be able to fit more stuff across the screen width wise.... right now my website has like 750px width... and i was wondering if i increased it some, would the majority of the people not have a problem viewing it? and if so, how many pixels wide do u think i could go before its too wide... i have my screen resolution said at 1280x1024... does anybody know what the majority of people set their screen resolutions to? any help would be great..thanks.. Hi, I just got back into HTML and CSS and stuff for a new project after a lengthy absence. I'm also trying out PHP for the first time and having a lot of fun with it, but I'm having problems as usual. This doesn't have to do with PHP per se, but if PHP is involved in the solution that'd be just fine. By contrast, I'd like to avoid Javascript, since a lot of people have it disabled by default. One of the things that's always irked me about CSS is how it seems to be completely impossible to define an element's width/height based on its container's width/height without using percentages or without weird things happening when you use padding. Say I want to do one of the simplest things imagineable -- define a rectangular area within the page, with 25 pixels both to the left and right of it, and 12 pixels above and below it, no matter what the browser window's size is. While it's no task to set the rectangle's position relative to the body of the page (using left and top, or whatever), deciding its width or, particularly, height seems to be impossible. 100% - 25px is, sadly, not allowed, even if I incorporate PHP, since PHP has no way of telling what the 100% actually represents. I've been puzzling over this for the last couple hours, and after a great deal of fiddling with alignments, margins, padding, and such, these two pieces of really simple HTML are the best I could do, and they're both flawed: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
<!--
body
{
margin: 0px;
padding: 12px 25px 12px 25px;
background-color: darkblue;
}
#inner_box
{
position: relative;
width: 100%;
height: 100%;
background-color: lightblue;
}
-->
</style>
</head>
<body>
<div id="inner_box">
Text
</div>
</body>
</html>
Paste that into a HTML file to see what I'm talking about graphically. The problem here is clearly that, for whatever reason, the 100% height in inner_box doesn't activate and inner_box ends up only as high as a single line of text allows. I don't know why. But in this next example... Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
<!--
body
{
margin: 0px;
padding: 0px;
background-color: darkblue;
}
#outer_box
{
position: absolute;
margin: 0px;
padding: 12px 25px 12px 25px;
width: 100%;
height: 100%;
background-color: lightblue;
}
#inner_box
{
position: relative;
width: 100%;
height: 100%;
background-color: white;
}
-->
</style>
</head>
<body>
<div id="outer_box">
<div id="inner_box">
Text
</div>
</div>
</body>
</html>
Here I've fixed the problems with the first snippet by adding a new container (outer_box) with absolute positioning that covers the entire body area. inner_box goes inside it and tries to act like it did in the first example. Unfortunately, for some reason, outer_box doesn't act like the body tag did in the first example -- when padding is added to it in order to position the elements within it, outer_box expands itself instead of just resizing inner_box, like the body tag did. I've done a lot of experimenting and I simply can't find the solution. All I want is a page with a few pixels of blank space to all sides of a floating rectangle. I uploaded a couple of doctored image samples of what the page should look like, but doesn't: here and here. Anyway, in summation, this is driving me nuts. I know I could probably use Javascript to get the container (body or outer_box)'s width, and go from there, but like I said, I'd rather avoid Javascript. There has to be a better way to do this. Any help would be very welcome. EDIT: After some more experimenting, I've discovered something interesting. If I declare example 1's doctype to be: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> then it works properly. The same cannot be said for example 2. And I really can't tell why. I guess HTML forgives something that XHTML doesn't. Also, example 1 doesn't work if I include the HTML doctype's URL: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Strange. Anyway though, it's important to make example 2 work since I would usually be working with containers within containers, not just within the body tag. So I still haven't solved my problem. I believe in thread titles that get to the point. I have a basic page, when the page loads I want people to see the top of the page for a few seconds while a flash starts to load but then I want the page to scroll down a bit so the visitor can see the flash load progress status. I just want code that I can copy into my page. I don't have access to the flash code. Greg (the page under design) www.mytcanada.com/designer.html I have a programmer in the US who starts pages for me and then I much around with them until it's looks like I want. He helps me when I get stuck but he's on holidays. Any help would be great. |
|||||||