FRIHOSTFORUMSSEARCHFAQTOSBLOGSCOMPETITIONS
You are invited to Log in or Register a free Frihost Account!


css





bnbrown
I want to make my <div> max height and/or max width on each screen undependently of resolution. How to do that. In table I just write width="100%" height="100"
?
Reign
Code:
<div height="100%" width="100%" style="background-color:#000000;">bla bla ...</div>


height doesn't work with firefox, didn't test with IE ...
Marston
I don't think you can have 'height: 100%'. Your best bet would be to create a javascript that switches stylesheets depending on the screen resolution, and just go 800px width, and 600px by height, and so on.
Darkarn
No he can whit the "div" class, I use that for my site and that's work perfectly Wink.
lillegrill
Hi i'm not a css expert but, have you tried this?:


html, body {
height: 100%;
}

#yourDiv{
height: 100%;
}


So try making your html and body 100%, than it should work.
bnbrown
I have got what I was looking for. The main thing I wanted to do is to center my page on the screen. So I wanted to do it like it is done with tables (a centered table in a 100% width and height table). That was a wrong way to go. The solution is margin-left: auto; margin-right: auto
if some looks for the same. Thanks for all anyway.
Marston
Darkarn wrote:
No he can whit the "div" class, I use that for my site and that's work perfectly Wink.
Ahahaha I just found out that 'height: 100%' actually works...

Never used it until today, and I guess it does work... *Is stupid*
bnbrown
I have my next problem. I have a...

<div style="min-height: 528px">This is the main div for the two
<div style="height:auto">
text content is here longer than 528px and is beautifully takes the div's end down with auto
</div>
<div style="height:auto">
left panel with images that doesn't move together with the above div because there is not so much things that would take down the auto
</div>
</div>

question: how can I make the two to move together?
misterdimiz
bnbrown wrote:
I want to make my <div> max height and/or max width on each screen undependently of resolution. How to do that. In table I just write width="100%" height="100"
?


try using inline css

Code:
<div style="height:100px">
carriage_return
Hi bnbrown, if I understood your problem correctly the situation you want to fix (or change) goes something like this:

You have a container <div>, let's call it "container". You also have two diferent <div>'s inside this one. One of them is filled with text content, and so we will call it "content"; the other one (to the left of it, according to what you said), has images (probably as background, or at least has some sort of background or border), and so we will call it "images". The "content" has its height set to auto, and will change it according to the ammount of text you have inside. But the "images" (also set to auto) doesn't change the height to match the new size of the "content" <div>.

When the height is set to automatic (if I don't remember incorrectly), the <div> will change acording to the ammount (and space) of the content inside it. For that reason, even though "content" is now bigger because of the text you have inside, "images" has no reason to change.

A better way to go at it, would be to code the "images" in order to always present the same height as the "container" (which is defined by its contents, and therefor will change size according -for example- to the height of "content"). The property height is used to set the height of a certain element. When used with a percentage value, it takes the measure (that is, the porcentage indicates a fraction of) from the height of its parent element. In this case, it's the "container" <div>. What I'm thinking is, that if you use ...

Code:
#images {height: 100%;}


(assuming you give that <div> the "images" id)

You could get the effect you're looking for. However I haven't tested it yet, it sounds good in theory, but I guess you'll have to try and set it this way to see how the browsers respond. I will try, as time permits, to look into this and give you a more confirmed response.

I hope I might have been of help (if I have made a mistake please feel free to correct me).

carriage_return
bnbrown
Theory is good but has to be edited. I have just tried before this and it did not worked all right. The problem is, as it turned to be, that the parent container has to be a certain height otherwise the inside divs cannot set themselves to anyhing to be 100% because what is that 100% if you don't now it exactly... If you set the parent conatiner's height than it again doesn't work for you don't know how long your text will be. I also tried the min-height: attribute for the parent container but it is the same as I didn't say anything about the height of the div. There are much sites that are in divs and have changing long text content, and I must know how they do it, in this case I also looked at their code and their validated css at w3c.org and indeed have tried some tips, but no solution yet. It must work somehow!!!
GTA
Code:
<div height="100%" width="100%" style="background-color:#55555;">some thing </div>


if i made corectly
i hope
can i ask you for what you need it ? Razz
Reign
I'm not sure I've got your problem right but this should work:
Code:
<html>
<head>
<style>
   html, body {   height: 100%;   }
   #main{   min-height: 528px;height:100%;   }
   #content{   height:auto;   }
   #images{   height: auto;   }
   .border{   border:1px;border-style:solid;   }
</style>
</head>
<body>
   <div id="main" class="border">This is the main div for the two
      <div id="content" class="border">
         text content is here longer than 528px and is beautifully takes the div's end down with auto<br /><br /><br /><br /><br /><br /><br /><br />
      <div id="images" class="border">
         left panel with images that doesn't move together with the above div because there is not so much things that would take down the auto
      </div>
   </div>
</body>
</html>


Main div is 100% and not smaller then 528px
content div is auto to amount of text
images div is also auto and wil resize to amount of content in content div..

Is this the way you want it to be?
bnbrown
it will not work because the auto is to take up the amount it contains so it will not be the same height...

But here is the site that you can have a look at the code yourselves:
http://bnbrowndesign.com/graviterm/

css: http://bnbrowndesign.com/graviterm/graviterm.css
Reign
just put it in one div then..... images above text?
bnbrown
it IS is 1 div
Reign
No its not

try this:
Code:
  <div class="kepgaleria">
                KÉPGALÉRIA
                <p>
                <a href="kepgaleria.html"><img src="kepgaleria01.jpg" title="képgaléria" border="0"></a>
                <a href="kepgaleria.html"><img src="kepgaleria02.jpg" title="képgaléria" border="0"></a>
                <a href="kepgaleria.html"><img src="kepgaleria03.jpg" title="képgaléria" border="0"></a>
                <a href="kepgaleria.html"><img src="kepgaleria04.jpg" title="képgaléria" border="0"></a>

                HÍREK
                <p>
                <b>Új honlap 2005/10/05 - 16:28</b>
                <br>
                Készen az Graviterm Kft. új honlapja.
                Köszöntjük kedves internetes látogatóinkat. Oldalaink böngészésével reméljük, hogy kedvet kapnak majd személyesen is megismerni minket.
                Kellemes navigációt...
                <a href="hirek.html">tovább&gt;&gt;</a>
            </div>


wouldn't this be easier?
bnbrown
I have updated the links, so pls see this now: http://bnbrowndesign.com/graviterm/problem

css: http://bnbrowndesign.com/graviterm/problem/graviterm.css

Many thanks.
riv_
What are you trying to do?
Are you trying to make the left column full length... so it goes to the bottom of the page no matter how big the right column is?
Is the grey space at the bottom of the left column supposed to be there?
riv_
Just took a bit more of a look...
I don't know if this is much help, but I wouldn't want to do anything with it until you'd decided to go with a fixed or a fluid design. One or the other. When you mix absolute and relative positioning in the same document, the results are unpredictable at best.
Either one is fine, but you have to go with one or the other.
I'd start there, and then do some troubleshooting.
Just my opinion though. Maybe somebody else would be able to make it work like this. I don't know?
stormybaka
Don't forget to use:

Quote:
padding: 0;
margin: 0;
bnbrown
riv_ wrote:
What are you trying to do?
Are you trying to make the left column full length... so it goes to the bottom of the page no matter how big the right column is?
Is the grey space at the bottom of the left column supposed to be there?


The left (grey) div must end where the right (green) div ends diregarding of the content of the left div, so these would go together.
bnbrown
riv_ wrote:
Just took a bit more of a look...
I don't know if this is much help, but I wouldn't want to do anything with it until you'd decided to go with a fixed or a fluid design. One or the other. When you mix absolute and relative positioning in the same document, the results are unpredictable at best.
Either one is fine, but you have to go with one or the other.
I'd start there, and then do some troubleshooting.
Just my opinion though. Maybe somebody else would be able to make it work like this. I don't know?


I did not know I have to decide beforehand. In this case I would say that fluid is what I want, for it is a dynamic content driven layout.
bnbrown
stormybaka wrote:
Don't forget to use:

Quote:
padding: 0;
margin: 0;


No, I don't.
riv_
Yeah, the browser won't know how to render your code if you mix "fluid" (ie: 30% or position: realtive) and "fixed" (ie: 50px, position: absolute) layouts. If you send your browser mixed messages, it will fill in the blanks for itself, and you never know what you'll get.
If you want a fluid layout you can do that, no problem.
Or a fixed layout is also easy enough to do.
I'd be more than happy to help you with either one.
First, I'd say you should go through your site and make sure that you've made it all one or the other, and see if you're still having problems. THen we can work through those.
Feel free to PM me... not that I'm even close to having all the answers!
ulruc
To do that with css is a real pain in the @ss I think. But if you really think that you need to do so, then you need to know that width can easily be done with css IF you put width to all others mark out before (not sure of that word) so they got a fixed size.

Here is an example to show you what I mean. I will use a little part of my own css code that will be udes in my new web site right here on Frihost.com as soon as I got my 5 posts Very Happy

I will just remove all the parts of the code that are useless so you don't get lost in my codes!

Code:


body
{
   width: 950px;
   height: 100%;
}

.en_tete
{
   width: 825px;
   height: 100px;
}

.centre
{
   width: 850px;
   margin: auto;
}
 
.pied
{
   width: 850px;
   margin: auto;
}



As you can see, this css code will give width to the body markout first. Then, my browser know that when I ask for an 100% width later on what is worthing it.

For the height attribute, the real fun start. The easy thing to do is either use sme <div></div> markout to get blocks around the two that you need to resize or you should move out to php codes.

I decided to go to the php in my case. You should see what you prefer to do.
Related topics
Do you use css to design a website?
<hr> stilosi con i CSS
Angoli arrotondati con i CSS (senza tabelle)
CSS tools
css + html
Tutorials
Okay, I'm done trying to use CSS for layout.
What do you use to make your page layout?
[Beginner] css rollovers
[Beginner] Classes, Applying classes in CSS
Handling Css using Javascript
CSS OR TABLES
What Is CSS and PHD?
Get more template with css style
CSS Text Wrapping
Reply to topic    Frihost Forum Index -> Webmaster and Internet -> Design Tips

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.