Programming Forums > Web Development and Design > HTML / XHTML / CSS

dmorales · Apr 8th, 2005, 4:16 PM

How would I make a window a fixed size with css?

oh and maybe someone could take the time to explain how to use relative positioning. Thanks!

Cerulean · Apr 8th, 2005, 6:12 PM

Quote:

How would I make a window a fixed size with css?

CSS can't do this kind of thing, so you don't; you use JavaScript. It can resize the browser window. I'm not sure if you can make the current window non-resizeable - I think you can with popups. Hope someone can clarify.

Quote:

oh and maybe someone could take the time to explain how to use relative positioning. Thanks!

Sure. Relative position in CSS places the object relative to where it would appear.
Say i've got a paragraph that appears 200px down the page (because there is other content above or whatever). I can set the position property to relative and then specify it's relative distance using the top, left, bottom, and right properties.
Lets say I set the positioning to relative and then specify top as 20px:

(Toggle Plain Text)

<p style="position: relative; top: 20px">

The paragraph will now appear with the top 20px away from where it should appear, so in our case 220px down the page.
Understand?

dmorales · Apr 9th, 2005, 11:57 AM

thanks, makes sense. So if I had a page like this:
11122222222111
11122222222111
11155333333
11155333333
11155333333
11155333333
5=nav bar
2=header
1=whitespace
3=content

I want to position the navigation bar right where it is in relation to the header, which is inthe center of the page I see how I could set the top position f it to be constant,but how would I specify the horizntal position?

Cerulean · Apr 9th, 2005, 1:04 PM

Well you don't want relative positioning if you know exactly where you want your div or other element to be, in relation to the top-left corner (or bottom-right, or whatever) of the screen. You just use absolute positioning. To position a div 10px from the top of the screen and 20px from the left, no matter of it's placement in the HTML file, just use:

(Toggle Plain Text)

position: absolute;
left: 20px;
top: 10px;

But there are better ways to go about a 2-column layout with a header and footer. Google for "2 column CSS layout" and you'll get tonnes of examples.
Have fun

dmorales · Apr 10th, 2005, 12:38 PM

cool! Thanks, at least I know what to search uder now.

MonkeyRevolution · Apr 25th, 2005, 10:14 AM

Dunno if you've figured this out yourself, but this is one of the few things I can answer! WHEE!!

This goes up in the header section:

(Toggle Plain Text)

<SCRIPT LANGUAGE="JavaScript">

        function myvoid()
        {}
function CreateChild(CoverLocation)
        {
                window.open (CoverLocation, 'newWin', 'scrollbars=yes,status=yes,width=600,height=500,resizable=yes');
                return false;
        }

</SCRIPT>

And this is what your link to your new window should look like:

(Toggle Plain Text)

<a href="javascript:myvoid()" onClick="CreateChild('gallery/fullcircle.html');" onMouseOver= 
   "window.status='Full Circle'; return true"><img src="gallery/thumbnails/fc-tn.jpg"></a>

(I'm just copying/pasting from my website, so I hope it's legible...if not, I'll be happy to clarify)

I think that's all you need...

Apr 8th, 2005, 4:16 PM	#1
dmorales Programmer Join Date: Feb 2005 Posts: 74 Rep Power: 4	How do I make a fixed window? How would I make a window a fixed size with css? oh and maybe someone could take the time to explain how to use relative positioning. Thanks!

Apr 9th, 2005, 1:04 PM	#4
Cerulean Professional Programmer Join Date: Apr 2005 Location: London, England Posts: 459 Rep Power: 4	Well you don't want relative positioning if you know exactly where you want your div or other element to be, in relation to the top-left corner (or bottom-right, or whatever) of the screen. You just use absolute positioning. To position a div 10px from the top of the screen and 20px from the left, no matter of it's placement in the HTML file, just use: (Toggle Plain Text) position: absolute; left: 20px; top: 10px; position: absolute; left: 20px; top: 10px; But there are better ways to go about a 2-column layout with a header and footer. Google for "2 column CSS layout" and you'll get tonnes of examples. Have fun

Apr 25th, 2005, 10:14 AM	#6
MonkeyRevolution Programmer Join Date: Apr 2005 Location: In the toaster. Shh! Posts: 57 Rep Power: 4	Dunno if you've figured this out yourself, but this is one of the few things I can answer! WHEE!! This goes up in the header section: (Toggle Plain Text) <SCRIPT LANGUAGE="JavaScript"> function myvoid() {} function CreateChild(CoverLocation) { window.open (CoverLocation, 'newWin', 'scrollbars=yes,status=yes,width=600,height=500,resizable=yes'); return false; } </SCRIPT> <SCRIPT LANGUAGE="JavaScript"> function myvoid() {} function CreateChild(CoverLocation) { window.open (CoverLocation, 'newWin', 'scrollbars=yes,status=yes,width=600,height=500,resizable=yes'); return false; } </SCRIPT> And this is what your link to your new window should look like: (Toggle Plain Text) <a href="javascript:myvoid()" onClick="CreateChild('gallery/fullcircle.html');" onMouseOver= "window.status='Full Circle'; return true"><img src="gallery/thumbnails/fc-tn.jpg"></a> <a href="javascript<b></b>:myvoid()" onClick="CreateChild('gallery/fullcircle.html');" onMouseOver= "window.status='Full Circle'; return true"><img src="gallery/thumbnails/fc-tn.jpg"></a> (I'm just copying/pasting from my website, so I hope it's legible...if not, I'll be happy to clarify) I think that's all you need... __________________ I had a dream that Triumph the Insult Dog owned Microsoft... How...appropriate. Last edited by MonkeyRevolution; Apr 25th, 2005 at 10:18 AM.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Apr 9th, 2005, 11:57 AM	#3
dmorales Programmer Join Date: Feb 2005 Posts: 74 Rep Power: 4	thanks, makes sense. So if I had a page like this: 11122222222111 11122222222111 11155333333 11155333333 11155333333 11155333333 5=nav bar 2=header 1=whitespace 3=content I want to position the navigation bar right where it is in relation to the header, which is inthe center of the page I see how I could set the top position f it to be constant,but how would I specify the horizntal position?

Apr 10th, 2005, 12:38 PM	#5
dmorales Programmer Join Date: Feb 2005 Posts: 74 Rep Power: 4	cool! Thanks, at least I know what to search uder now.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Programming Forums > Web Development and Design > HTML / XHTML / CSS

How do I make a fixed window?