Report, edit, etc...Posted by Syphon on 2006-11-02 at 18:01:34
Alrighty, what I'm currently trying to do is have a page have 10px margins, no problem, but then I get to the actual layout of the page.
I want it to be something like this;
[10px][ 150px ][10px][ Rest ][10px]
So far I'm completely stumped on it, suggestions?
I want it to be something like this;
[10px][ 150px ][10px][ Rest ][10px]
So far I'm completely stumped on it, suggestions?
Report, edit, etc...Posted by Centreri on 2006-11-02 at 19:21:33
<whatever style="width: 10px;"> <whatever style="width: 150px;"> <whatever style="width: 10px;"> <whatever> <whatever style="width: 10px;">
Report, edit, etc...Posted by fatimid08 on 2006-11-02 at 19:31:31
I think you could do that:
This should give you the margin you want, just give the appropriate elements the id of nav or content, or whatever you choose for them.
If you want the content to span the rest of the window, well, I don't know how to do that without fixed width or JavaScript. It might be possible with css, haven't looked at all the properties of widths yet.
CODE
/* Let's call the 150px nav and rest content */
/* Set the outer margins to 10px, and the ones between the two elements to 5px each */
#nav {margin: 0 5px 0 10px;}
#content {margin: 0 10px 0 5px;}
/* Set the outer margins to 10px, and the ones between the two elements to 5px each */
#nav {margin: 0 5px 0 10px;}
#content {margin: 0 10px 0 5px;}
This should give you the margin you want, just give the appropriate elements the id of nav or content, or whatever you choose for them.
If you want the content to span the rest of the window, well, I don't know how to do that without fixed width or JavaScript. It might be possible with css, haven't looked at all the properties of widths yet.
Report, edit, etc...Posted by Syphon on 2006-11-02 at 19:44:55
QUOTE(Centreri @ Nov 2 2006, 07:21 PM)
<whatever style="width: 10px;"> <whatever style="width: 150px;"> <whatever style="width: 10px;"> <whatever> <whatever style="width: 10px;">
[right][snapback]582345[/snapback][/right]
[right][snapback]582345[/snapback][/right]
Uh... I don't think that'll work. When I don't specify widths for DIVs they don't stretch to 100%...
Report, edit, etc...Posted by Centreri on 2006-11-03 at 16:08:54
Then set the middle one, the everything else, to <whatever style="width: 100%;">
Report, edit, etc...Posted by fatimid08 on 2006-11-03 at 20:58:36
The only problem is that 100% puts it to a width equal to the browser drawing surface width, which gives a layout of 100% + 180px.
The only I can see right now is getting the browser window width, a technique which differs in most browsers, so you have to worry about that (this means 3 different techniques for IE, Firefox, and Netscape), and then set the width like this (or something similar, haven't done JavaScript in 2 years or so):
width = windowWidth - 180
document.getElementByID("The ID").width = width + "px"
You'll have to call such a script near the end of your code, for the browsers to define the element first, so you might as well put some width to it at first for whatever browsers not supporting JavaScript, or a specific implementation of HTML DOM.
The only I can see right now is getting the browser window width, a technique which differs in most browsers, so you have to worry about that (this means 3 different techniques for IE, Firefox, and Netscape), and then set the width like this (or something similar, haven't done JavaScript in 2 years or so):
width = windowWidth - 180
document.getElementByID("The ID").width = width + "px"
You'll have to call such a script near the end of your code, for the browsers to define the element first, so you might as well put some width to it at first for whatever browsers not supporting JavaScript, or a specific implementation of HTML DOM.
Report, edit, etc...Posted by Syphon on 2006-11-03 at 22:44:52
QUOTE(fatimid08 @ Nov 3 2006, 08:58 PM)
The only problem is that 100% puts it to a width equal to the browser drawing surface width, which gives a layout of 100% + 180px.
The only I can see right now is getting the browser window width, a technique which differs in most browsers, so you have to worry about that (this means 3 different techniques for IE, Firefox, and Netscape), and then set the width like this (or something similar, haven't done JavaScript in 2 years or so):
width = windowWidth - 180
document.getElementByID("The ID").width = width + "px"
You'll have to call such a script near the end of your code, for the browsers to define the element first, so you might as well put some width to it at first for whatever browsers not supporting JavaScript, or a specific implementation of HTML DOM.
[right][snapback]582817[/snapback][/right]
The only I can see right now is getting the browser window width, a technique which differs in most browsers, so you have to worry about that (this means 3 different techniques for IE, Firefox, and Netscape), and then set the width like this (or something similar, haven't done JavaScript in 2 years or so):
width = windowWidth - 180
document.getElementByID("The ID").width = width + "px"
You'll have to call such a script near the end of your code, for the browsers to define the element first, so you might as well put some width to it at first for whatever browsers not supporting JavaScript, or a specific implementation of HTML DOM.
[right][snapback]582817[/snapback][/right]
Getting the browsers width in Javascript at the bottom would be completely pointless, as the page would've already rendered. I guess I'll just have to wait for CSS3 and it's sexy mathematical operations.
Report, edit, etc...Posted by Pie_Sniper on 2006-11-04 at 00:09:46
In the future, people will be saying, "How did people live before calc()?!" 
Report, edit, etc...Posted by fatimid08 on 2006-11-04 at 09:55:28
The page will be rendered before, but your changes will be rendered too. Soo you can put 100% as default (or some lesser percentage, which is preferable), and for JavaScript enabled browsers, you can change it.
Report, edit, etc...Posted by Syphon on 2006-11-04 at 12:57:50
QUOTE(Pie_Sniper @ Nov 4 2006, 12:09 AM)
In the future, people will be saying, "How did people live before calc()?!"
[right][snapback]582904[/snapback][/right]
[right][snapback]582904[/snapback][/right]
Web standards 3.0 are going to give me an orgasm, in other news, expect PDP, comingto a server near you
Report, edit, etc...Posted by scwizard on 2006-11-06 at 08:54:51
(it's been a while since I've done CSS)
You say:
"[10px][ 150px ][10px][ Rest ][10px]"
Are the 10px things on the left and right blank margins... because then you can do:
<html>
<style type="text/css">
.foobaba {position: absolute}
#divider {
left: 150px;
width: 10px;
background-color: red;
}
#rest {
left: 160px;
width: auto;
background-color: #ABCDEF;
}
#first {
left: 0px;
width: 150px;
background-color: yellow;
}
</style>
<body>
<div style="margin:0 10px; position: relative;}">
<div class="foobaba" id="first">THIS IS THE 150px SECTION</div><div class="foobaba"
id="divider">.</div><div id="rest" class="foobaba">THIS SECTION COVERS THE REST OF THE PAGE</div>
</div>
</body>
</html>
ADDITION:
The main problem with this method is that the text will fill up the rest of the page, but the background color will only go as far as the text does.
If anyone knows a better way please post it.
You say:
"[10px][ 150px ][10px][ Rest ][10px]"
Are the 10px things on the left and right blank margins... because then you can do:
<html>
<style type="text/css">
.foobaba {position: absolute}
#divider {
left: 150px;
width: 10px;
background-color: red;
}
#rest {
left: 160px;
width: auto;
background-color: #ABCDEF;
}
#first {
left: 0px;
width: 150px;
background-color: yellow;
}
</style>
<body>
<div style="margin:0 10px; position: relative;}">
<div class="foobaba" id="first">THIS IS THE 150px SECTION</div><div class="foobaba"
id="divider">.</div><div id="rest" class="foobaba">THIS SECTION COVERS THE REST OF THE PAGE</div>
</div>
</body>
</html>
ADDITION:
The main problem with this method is that the text will fill up the rest of the page, but the background color will only go as far as the text does.
If anyone knows a better way please post it.
Report, edit, etc...Posted by fatimid08 on 2006-11-06 at 10:10:29
you could add height: 100%;
width: auto; is the default behavior which is used and it sets the width to the length of the text. The problem is still the same, and the only solution that is viable is using JavaScript, because CSS implementations don't support span the rest of window feature.
width: auto; is the default behavior which is used and it sets the width to the length of the text. The problem is still the same, and the only solution that is viable is using JavaScript, because CSS implementations don't support span the rest of window feature.
Report, edit, etc...Posted by Syphon on 2006-11-06 at 15:30:39
QUOTE(scwizard @ Nov 6 2006, 08:54 AM)
(it's been a while since I've done CSS)
You say:
"[10px][ 150px ][10px][ Rest ][10px]"
Are the 10px things on the left and right blank margins... because then you can do:
<html>
<style type="text/css">
.foobaba {position: absolute}
#divider {
left: 150px;
width: 10px;
background-color: red;
}
#rest {
left: 160px;
width: auto;
background-color: #ABCDEF;
}
#first {
left: 0px;
width: 150px;
background-color: yellow;
}
</style>
<body>
<div style="margin:0 10px; position: relative;}">
<div class="foobaba" id="first">THIS IS THE 150px SECTION</div><div class="foobaba"
id="divider">.</div><div id="rest" class="foobaba">THIS SECTION COVERS THE REST OF THE PAGE</div>
</div>
</body>
</html>
ADDITION:
The main problem with this method is that the text will fill up the rest of the page, but the background color will only go as far as the text does.
If anyone knows a better way please post it.
[right][snapback]584377[/snapback][/right]
You say:
"[10px][ 150px ][10px][ Rest ][10px]"
Are the 10px things on the left and right blank margins... because then you can do:
<html>
<style type="text/css">
.foobaba {position: absolute}
#divider {
left: 150px;
width: 10px;
background-color: red;
}
#rest {
left: 160px;
width: auto;
background-color: #ABCDEF;
}
#first {
left: 0px;
width: 150px;
background-color: yellow;
}
</style>
<body>
<div style="margin:0 10px; position: relative;}">
<div class="foobaba" id="first">THIS IS THE 150px SECTION</div><div class="foobaba"
id="divider">.</div><div id="rest" class="foobaba">THIS SECTION COVERS THE REST OF THE PAGE</div>
</div>
</body>
</html>
ADDITION:
The main problem with this method is that the text will fill up the rest of the page, but the background color will only go as far as the text does.
If anyone knows a better way please post it.
[right][snapback]584377[/snapback][/right]
That won't work, auto has it wrap the content that's in it, and my content will in no way fill the rest of the page. I just want the background to.
QUOTE(fatimid08 @ Nov 6 2006, 10:10 AM)
you could add height: 100%;
width: auto; is the default behavior which is used and it sets the width to the length of the text. The problem is still the same, and the only solution that is viable is using JavaScript, because CSS implementations don't support span the rest of window feature.
[right][snapback]584397[/snapback][/right]
width: auto; is the default behavior which is used and it sets the width to the length of the text. The problem is still the same, and the only solution that is viable is using JavaScript, because CSS implementations don't support span the rest of window feature.
[right][snapback]584397[/snapback][/right]
I don't think you can use Javascript variables as CSS attributes... But you CAN use php...
Should I make a compliant code for every resolution?
Report, edit, etc...Posted by Centreri on 2006-11-06 at 18:08:41
Can someone please tell what's wrong with
Did I misunderstand the problem?
QUOTE
<whatever style="width: 10px;"> <whatever style="width: 150px;"> <whatever style="width: 10px;"> <whatever style="width: 100%;"> <whatever style="width: 10px;">
?Did I misunderstand the problem?
Report, edit, etc...Posted by Pie_Sniper on 2006-11-06 at 18:25:58
With a little playing around with document.getElementById( 'maindiv' ).style.width = ( document.documentElement.innerWidth - 180 ) + 'px' in the onload and onresize events for the body element, I think you could get something to work. You'd need to set up some PHP to change document.documentElement.innerWidth based on browser, however. http://www.howtocreate.co.uk/tutorials/jav...t/browserwindow This site has information on what browsers have what set to what. () Then you just set html padding to 0 and body to 10, make a 150px div that is floated to the left (not sure if this is required), with another div that has its width set by Javascript, and this one (I believe) must be floated to the left.
This is sort of theoretical, as I believe it should work, but I don't have a page to test it right now and I don't feel like making one.
:: Edit
Centreri, if you set the width to 100%, it will go down below the 150px div and fill that entire line.
) Then you just set html padding to 0 and body to 10, make a 150px div that is floated to the left (not sure if this is required), with another div that has its width set by Javascript, and this one (I believe) must be floated to the left.This is sort of theoretical, as I believe it should work, but I don't have a page to test it right now and I don't feel like making one.
:: Edit
Centreri, if you set the width to 100%, it will go down below the 150px div and fill that entire line.
Report, edit, etc...Posted by Centreri on 2006-11-06 at 18:56:51
Ahem.. you're right. CSS could be so stupid. You could mix it with PHP, detect the browser resolution using Javascript and transfer it to PHP (not sure how, but there are some tutorials about how to do it at Google, if I remember), then have the width of the [rest] be resolution minus 180.
Report, edit, etc...Posted by Pie_Sniper on 2006-11-06 at 18:59:55
I'm not sure of the exact syntax, but I think you can use Javascript to dynamically add $_GET variables and then grab them with PHP. (I remember this from a long time ago, I may be incorrect.)
Report, edit, etc...Posted by fatimid08 on 2006-11-07 at 06:07:47
QUOTE
I don't think you can use Javascript variables as CSS attributes... But you CAN use php...
IE, in it's standard non-compliancy, can, but I meant to execute a script after your element is loaded, and every time the window it's resized.
You do NOT need php to change the stuff for browser compliancy, you just check if a particular object exists, or you can use conditional comments for IE detection.
Report, edit, etc...Posted by Centreri on 2006-11-07 at 16:31:29
I know you don't have to and I think someone already said something that would work, but PHP would work as well.
Report, edit, etc...Posted by Pie_Sniper on 2006-11-07 at 18:59:57
Well, actually, fatamid08, you do need to check the browser in PHP (or Javascript if it supports it), because it's not just whether the object exists, but whether a given object is the window size or the document size.
:: Edit
I may have figured out a way... Give me a little time and I'll post it if it works.
:: Edit
I may have figured out a way... Give me a little time and I'll post it if it works.
Report, edit, etc...Posted by Pie_Sniper on 2006-11-22 at 19:23:51
So, uh, I forgot about that, and I'm not quite sure what I meant to do, but I made it work.
Anyways, I gave the body padding: 10px. Then I put one div with a size of 150px. (Actually, I did 146px with padding: 2px.) with position: absolute and placed another div with a margin-left of 170px.
It apparently doesn't work in IE7 (not sure about others), so I might go work on that now.
:: Edit
Okay, to make it work in IE, either:
Anyways, I gave the body padding: 10px. Then I put one div with a size of 150px. (Actually, I did 146px with padding: 2px.
) with position: absolute and placed another div with a margin-left of 170px.It apparently doesn't work in IE7 (not sure about others), so I might go work on that now.
:: Edit
Okay, to make it work in IE, either:
- Give the left div the attributes top: 10px and left: 10px.
- Give the right div the attribute float: right.