Ampulator00
12-24-2004, 01:06 AM
How does, min-height, max-height, min-width, max-width works? I tried to implement it to my web page, but it didn't work out well.
Click to See Complete Forum and Search --> : CSS: about widths and heights
David Harrison
12-24-2004, 01:20 AM
If you tested in IE then you wouldn't notice anything. Basically they work just like you'd expect them to, min and max just set limits on the dimentions, eg:myDiv{
width:40em;
min-width:500px;
max-width:98%;
}Here you set a width of 40em which depends on the users text size, then if the font-size is small the column would be very narrow so a minimum width of 500px is set, and if the font-size is very large a limit of 98% width is set to prevent there being a horizontal scroll bar.
Here's another example:myDiv{
width:80%;
min-width:480px;
max-width:800px;
}80% of the screen width with some simple pixel restrictions on the dimentions.
These min and max rules could come in very handy for some layouts, but since IE doesn't not support them at all then they are virtually useless and restrictions in dimention have to be forced by either containing or contained elements.
width:40em;
min-width:500px;
max-width:98%;
}Here you set a width of 40em which depends on the users text size, then if the font-size is small the column would be very narrow so a minimum width of 500px is set, and if the font-size is very large a limit of 98% width is set to prevent there being a horizontal scroll bar.
Here's another example:myDiv{
width:80%;
min-width:480px;
max-width:800px;
}80% of the screen width with some simple pixel restrictions on the dimentions.
These min and max rules could come in very handy for some layouts, but since IE doesn't not support them at all then they are virtually useless and restrictions in dimention have to be forced by either containing or contained elements.
Ampulator00
12-24-2004, 02:09 AM
Thank you. I was trying to mess around with it, so when a window got smaller, certain divs would resize along, but just became too hard. too deal with.
Jona
12-24-2004, 02:35 AM
Originally posted by Ampulator00
Thank you. I was trying to mess around with it, so when a window got smaller, certain divs would resize along, but just became too hard. too deal with.
That's called a liquid or fluid layout, where dimensions are defined in percentages. Run the following code.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Example</title>
<style type="text/css"><!--
#header {
text-align: center;
margin: 20px 0px;
border: solid 1px #000;
}
#content {
float: left;
width: 75%;
border: solid 1px #000;
margin-bottom: 10px;
}
#sidebar {
float: right;
width: 20%;
border: solid 1px #000;
margin-bottom: 10px;
}
#footer {
clear: both;
padding: 5px;
border: solid 1px #000;
text-align: center;
}
--></style>
</head>
<body>
<div id="header">
<h1>Your site</h1>
</div>
<div id="content">
<h2>Content</h2>
<h3>Sub heading</h3>
<p>Cid suskei kij momdac rip munjag nak pal jeh dac bue.
Cec lumzuynim heg fif pupsiq dofnel sao vis tutyiv bic
pem gig reo pal pal cuf. Yeu ziw siq fee yat jag ran
dofsusfee qio jukver pin qam beb ded bue. Yeu kokmil pem
haf sep die vuulej qopwuvlollumreo lik jag baa wouwougig
gui. Cuf. Gui. Ded lai gohnak momwit gef rip
votgohnuozoxhih woutir ziw tap yowver poofad lai quqjag
roqsusqopxuwqam quqfuh. Haf poogae xas xiu war siq huj.
Fogcec cec siq huj. Pin dug. Ver fad nim die kokgig jukqen
koktap nim baa jii vis cuf. Yiv munmaj cab yeu bic sao die
fee kulvotwuvlik tap lej qen dug. Wuvcuf. Vuupem qio yiv
wougohran jukloljii gohdie zev jukran huj. Ziw sep wit gig
qam zoxtir jeh mil qio xas rip quqgae lai rurquqrurziw gui.
Zau wes hoimomreo vis tostosbeb wit bue. Wes xas xovnonmaj
fad tosqen heg fuh. Teq fee lumnel qopkei xiu momqio yiv pem
zau lej susmil vis cid doftutcoezoxbodkokmomnuozau hih xet
cab teq kuldofpem jojpem qio fee nak ran jojyiv heg hih nak
maj vaq war mil zau beb teq pin momtir die cec gohqoppal wes
ver cid kah pem yuxlolmaj heg xas kokdac cuf. Gui. Dofwes munlai
pal haf xet baa gef baa kah qio wes tap lai kokpuplollai die kah
kokxas roqkei kij qio vaq nel xovhuj. Nak mek zau ran mek pal
vuususkij gui. Qio maj nuobic dug. Zev lai zev dac kei qio yat
yowbic ziw teq dof.</p>
<h3>Sub heading</h3>
<p>Xet vuulolver yeu ded soryeu gohdac die dofpooyiv zau munwar
qopquqxovfuh. Xuwkulpin sep sornak ded qio vaq xet poozuyxuwsep
lej wuvded gohxas gohwoucoehaf poobeb dofbeb poosorlai gohver
ran teq vuuhih pin poover wes pem reo jojvis rurjojzoxloljojfad
roqpal vuugohkulhih baa hih zuyded bic xiu xovyiv hih sao dug.
Cuf. Wit xiu maj wouran susver joj.</p>
</div>
<div id="sidebar">
<h2>Sidebar</h2>
<h3>A list</h3>
<ul>
<li>An item.</li>
<li>An item.</li>
<li>An item.</li>
<li>An item.</li>
<li>An item.</li>
<li>An item.</li>
<li>An item.</li>
<li>An item.</li>
<li>An item.</li>
<li>An item.</li>
<li>An item.</li>
</ul>
</div>
<div id="footer">
<p>The end is here!</p>
</div>
</body>
</html>
Thank you. I was trying to mess around with it, so when a window got smaller, certain divs would resize along, but just became too hard. too deal with.
That's called a liquid or fluid layout, where dimensions are defined in percentages. Run the following code.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Example</title>
<style type="text/css"><!--
#header {
text-align: center;
margin: 20px 0px;
border: solid 1px #000;
}
#content {
float: left;
width: 75%;
border: solid 1px #000;
margin-bottom: 10px;
}
#sidebar {
float: right;
width: 20%;
border: solid 1px #000;
margin-bottom: 10px;
}
#footer {
clear: both;
padding: 5px;
border: solid 1px #000;
text-align: center;
}
--></style>
</head>
<body>
<div id="header">
<h1>Your site</h1>
</div>
<div id="content">
<h2>Content</h2>
<h3>Sub heading</h3>
<p>Cid suskei kij momdac rip munjag nak pal jeh dac bue.
Cec lumzuynim heg fif pupsiq dofnel sao vis tutyiv bic
pem gig reo pal pal cuf. Yeu ziw siq fee yat jag ran
dofsusfee qio jukver pin qam beb ded bue. Yeu kokmil pem
haf sep die vuulej qopwuvlollumreo lik jag baa wouwougig
gui. Cuf. Gui. Ded lai gohnak momwit gef rip
votgohnuozoxhih woutir ziw tap yowver poofad lai quqjag
roqsusqopxuwqam quqfuh. Haf poogae xas xiu war siq huj.
Fogcec cec siq huj. Pin dug. Ver fad nim die kokgig jukqen
koktap nim baa jii vis cuf. Yiv munmaj cab yeu bic sao die
fee kulvotwuvlik tap lej qen dug. Wuvcuf. Vuupem qio yiv
wougohran jukloljii gohdie zev jukran huj. Ziw sep wit gig
qam zoxtir jeh mil qio xas rip quqgae lai rurquqrurziw gui.
Zau wes hoimomreo vis tostosbeb wit bue. Wes xas xovnonmaj
fad tosqen heg fuh. Teq fee lumnel qopkei xiu momqio yiv pem
zau lej susmil vis cid doftutcoezoxbodkokmomnuozau hih xet
cab teq kuldofpem jojpem qio fee nak ran jojyiv heg hih nak
maj vaq war mil zau beb teq pin momtir die cec gohqoppal wes
ver cid kah pem yuxlolmaj heg xas kokdac cuf. Gui. Dofwes munlai
pal haf xet baa gef baa kah qio wes tap lai kokpuplollai die kah
kokxas roqkei kij qio vaq nel xovhuj. Nak mek zau ran mek pal
vuususkij gui. Qio maj nuobic dug. Zev lai zev dac kei qio yat
yowbic ziw teq dof.</p>
<h3>Sub heading</h3>
<p>Xet vuulolver yeu ded soryeu gohdac die dofpooyiv zau munwar
qopquqxovfuh. Xuwkulpin sep sornak ded qio vaq xet poozuyxuwsep
lej wuvded gohxas gohwoucoehaf poobeb dofbeb poosorlai gohver
ran teq vuuhih pin poover wes pem reo jojvis rurjojzoxloljojfad
roqpal vuugohkulhih baa hih zuyded bic xiu xovyiv hih sao dug.
Cuf. Wit xiu maj wouran susver joj.</p>
</div>
<div id="sidebar">
<h2>Sidebar</h2>
<h3>A list</h3>
<ul>
<li>An item.</li>
<li>An item.</li>
<li>An item.</li>
<li>An item.</li>
<li>An item.</li>
<li>An item.</li>
<li>An item.</li>
<li>An item.</li>
<li>An item.</li>
<li>An item.</li>
<li>An item.</li>
</ul>
</div>
<div id="footer">
<p>The end is here!</p>
</div>
</body>
</html>
Ampulator00
12-24-2004, 02:37 AM
Thank you. I'll try it later when I have time, my site was not completely fluid, anyway, because I had absolute positioning...
Ampulator00
12-24-2004, 11:08 PM
Hey, that's cool, but I realized what the issue was; my images aren't scalable. Until I know how to make SVG's, it's not really useful to have a fluid layout....
David Harrison
12-24-2004, 11:25 PM
You can still have fluid layouts even though your images don't resize, see the attached file for a simple example.
Ampulator00
12-24-2004, 11:40 PM
That's a nice example, but it's not background images; it's actual img. It would be helpful if images were actually fluid themselves.
David Harrison
12-25-2004, 12:27 AM
Well they can be, just specify a % width for them. Unfortunately browser resizing isn't always as good as you'd like.
If the images are part of your content though, why do you need to resize them?
If the images are part of your content though, why do you need to resize them?
Ampulator00
12-25-2004, 02:07 AM
The issue is, is not when I make the browser window smaller, the images overlap certain areas. and it doesn't look nice at all.
However, like you said, I could do percentages for the image itself, but if the while I bloat everything by 200%, the image screws up.
However, like you said, I could do percentages for the image itself, but if the while I bloat everything by 200%, the image screws up.
CarolW
12-27-2004, 03:01 PM
I must be trying to do something like what Ampulator is trying. I'm in the throes of utter confusion, having managed to set up a basic web site (personal), but now I want to make it work better and look nicer. I'm planning to do the structure stuff before I worry about actual content much; for now, I just have three basic photo galleries up, and a bit of text content, and contact page (including these forums). (Also just got a comments/question page up; very crude, but it works.)
Now what I want to do before I go any further is get my .CSS stuff working. I do have two working external style sheets, but they have practically nothing in them so far. I want to learn more how to do classes and IDs; I don't yet know how to do that; just have a vague idea, so I have to try it. But first, I want to put in a header and a footer to go on all pages; I'm working on images for those, and I want them to size as the browsers viewing the pages would best size them (if you follow me!).
They can be stretched or squished a bit without really messing up the images too much.
So, how would I go about this?
Can I do it with .CSS, or do I need to use framesets? Does the Box Model get involved? I'm just barely starting to read about the Box Model. I've read through a few things about framesets, and could try those. But if it can be done with .CSS, I'd rather do that.
Can anybody give me a steer on this? For me, an un-computer person, this is a giant job, but - I *am* having fun! I'm a big photo buff, and an animal nut, and my site reflects that even now, in its very crude beginning stages.
If anybody wants to look (in case you can help me better that way), it's at:
<http://www.islandnet.com/~cwhitney/>
Thanks in advance for any suggestions and assistance!
P.S. How wide should I make the basic header or footer image? I can easily control or alter the pixel width; same with the height. Can I use "auto" for width and height? Should I? <g> I was thinking of 740px for the width of the actual image, and anywhere between 90 and 120px for the height; for the one I plan for my header, 120px provides the best view, but that might be a bit much screen real-estate?
Mon, 27 Dec 2004 13:01:20 (PST)
Now what I want to do before I go any further is get my .CSS stuff working. I do have two working external style sheets, but they have practically nothing in them so far. I want to learn more how to do classes and IDs; I don't yet know how to do that; just have a vague idea, so I have to try it. But first, I want to put in a header and a footer to go on all pages; I'm working on images for those, and I want them to size as the browsers viewing the pages would best size them (if you follow me!).
They can be stretched or squished a bit without really messing up the images too much.
So, how would I go about this?
Can I do it with .CSS, or do I need to use framesets? Does the Box Model get involved? I'm just barely starting to read about the Box Model. I've read through a few things about framesets, and could try those. But if it can be done with .CSS, I'd rather do that.
Can anybody give me a steer on this? For me, an un-computer person, this is a giant job, but - I *am* having fun! I'm a big photo buff, and an animal nut, and my site reflects that even now, in its very crude beginning stages.
If anybody wants to look (in case you can help me better that way), it's at:
<http://www.islandnet.com/~cwhitney/>
Thanks in advance for any suggestions and assistance!
P.S. How wide should I make the basic header or footer image? I can easily control or alter the pixel width; same with the height. Can I use "auto" for width and height? Should I? <g> I was thinking of 740px for the width of the actual image, and anywhere between 90 and 120px for the height; for the one I plan for my header, 120px provides the best view, but that might be a bit much screen real-estate?
Mon, 27 Dec 2004 13:01:20 (PST)
schomer
12-28-2004, 07:54 PM
Hi Carol,
Good for you, getting into this stuff!
I don't claim to know a LOT about CSS, but I have been putting some sites together and have learned a lot just by trying stuff out. I visit sites I like the look of and then try to duplicate layouts locally by reviewing their XHTML and CSS. As far as I'm concerned, it is the best way to get yourself into CSS.
I hope you don't mind... I grabbed some content from the front of your website, which you referenced (above), and converted some of it to CSS. I posted it on my server, which you can find here: http://www.schomer.com/carol
Give it a look for some ideas as to how CSS can work together to perform the layout of a page! I'll delete it from my server later, after you've had a chance to give it a look.
I should mention... my mockup was quick-n-dirty. So there are probably some errors with the CSS - even though it appears to work in the browser. Also, any links on the page don't go anywhere...
Good luck with your CSS learning!
Schomer
Good for you, getting into this stuff!
I don't claim to know a LOT about CSS, but I have been putting some sites together and have learned a lot just by trying stuff out. I visit sites I like the look of and then try to duplicate layouts locally by reviewing their XHTML and CSS. As far as I'm concerned, it is the best way to get yourself into CSS.
I hope you don't mind... I grabbed some content from the front of your website, which you referenced (above), and converted some of it to CSS. I posted it on my server, which you can find here: http://www.schomer.com/carol
Give it a look for some ideas as to how CSS can work together to perform the layout of a page! I'll delete it from my server later, after you've had a chance to give it a look.
I should mention... my mockup was quick-n-dirty. So there are probably some errors with the CSS - even though it appears to work in the browser. Also, any links on the page don't go anywhere...
Good luck with your CSS learning!
Schomer
CarolW
12-29-2004, 02:45 AM
I've been trying for hours to reply, and have the strangest experiences; such as the forum not knowing I'm logged in when I am (I reported to the webmaster). Schomer, thanks a million! I got your (our?) file. Then I went looking for your site, and found only a wonderful photo; what an eye you have! Do you have a site I could browse around?
Thanks for the encouragement! And I loved what you did with my stuff. Of course I'm not upset that you took it and did that stuff with it; I posted the URL precisely for that kind of suggestion, if anybody wanted to do it!
Now let's see if the forum knows I'm logged in (which I am), and allows me to post this. I got knocked offline (disconnected!) when I tried to quote your post!
Wed, 29 Dec 2004 00:45:28 (PST)
Thanks for the encouragement! And I loved what you did with my stuff. Of course I'm not upset that you took it and did that stuff with it; I posted the URL precisely for that kind of suggestion, if anybody wanted to do it!
Now let's see if the forum knows I'm logged in (which I am), and allows me to post this. I got knocked offline (disconnected!) when I tried to quote your post!
Wed, 29 Dec 2004 00:45:28 (PST)
schomer
12-29-2004, 10:52 AM
Sorry you had a hard time getting back to the forum with a message.
I hope the page and CSS I generated will show you a sample of what you can do with CSS and get you started testing things out.
There are a number of things implemented on that page via CSS:
1. Banner graphic at the top is a background graphic for a header DIV.
2. General font attributes are specified in the CSS, not in the XHTML.
3. The dog picture is an example of an absolutely positioned DIV.
4. The main part of the page is a DIV with a border and background assigned to it, via CSS.
5. Navigation appears in the form of tabs. The CSS specifies displaying a list of links as an incline row of boxes (which look like tabs).
Have fun.
Oh, I recommend visiting www.westciv.com for some good CSS info and tutorials. In particular, for layout learning, I liked their tutorial where you essentially build a page by editing the CSS. Here it is:
http://www.westciv.com/style_master/academy/hands_on_tutorial/01.introduction.html
Happy Holidays, and Happy New Year!
Schomer
I hope the page and CSS I generated will show you a sample of what you can do with CSS and get you started testing things out.
There are a number of things implemented on that page via CSS:
1. Banner graphic at the top is a background graphic for a header DIV.
2. General font attributes are specified in the CSS, not in the XHTML.
3. The dog picture is an example of an absolutely positioned DIV.
4. The main part of the page is a DIV with a border and background assigned to it, via CSS.
5. Navigation appears in the form of tabs. The CSS specifies displaying a list of links as an incline row of boxes (which look like tabs).
Have fun.
Oh, I recommend visiting www.westciv.com for some good CSS info and tutorials. In particular, for layout learning, I liked their tutorial where you essentially build a page by editing the CSS. Here it is:
http://www.westciv.com/style_master/academy/hands_on_tutorial/01.introduction.html
Happy Holidays, and Happy New Year!
Schomer
schomer
12-29-2004, 11:11 AM
As per the original thread topic... I wanted to ask about margin-bottom.
If I set a DIV to have margin-bottom:12px, it _doesn't_ mean it's going t be 12px off the bottom of the browser window, like margin-left:12px pushes the left side 12px off the left side of the window.
Correct?
Is there a way to have the bottom of a DIV extend down, beyond its content?
Visualize a sidebar column, with a few links at the top... if you wanted the column to extend down to tbe bottom of the page, for appearance sake, how would you do that?
If I set a DIV to have margin-bottom:12px, it _doesn't_ mean it's going t be 12px off the bottom of the browser window, like margin-left:12px pushes the left side 12px off the left side of the window.
Correct?
Is there a way to have the bottom of a DIV extend down, beyond its content?
Visualize a sidebar column, with a few links at the top... if you wanted the column to extend down to tbe bottom of the page, for appearance sake, how would you do that?
CarolW
12-29-2004, 11:12 AM
Oh, Schomer, what great leads! I'll go to those sites you showed. Thanks for the explanation, too! I got a bit of idea from the "view source" I did on the file you put up for me, but your more detailed summary here is a huge help!
I haven't begun to look at XHTML; I noted the reference to it in the source I viewed. YOu did lovely things with the material!
Ah, yes, I will have fun. I gather you're having fun too; great stuff.
Wed, 29 Dec 2004 09:12:31 (PST)
I haven't begun to look at XHTML; I noted the reference to it in the source I viewed. YOu did lovely things with the material!
Ah, yes, I will have fun. I gather you're having fun too; great stuff.
Wed, 29 Dec 2004 09:12:31 (PST)
webdeveloper.com
Copyright Internet.com Inc., All Rights Reserved.
Copyright Internet.com Inc., All Rights Reserved.