0

Hello!
Whether who will prompt css-property which certain div to be stretched on веритекали in conformity c in the size containing in first div (which sizes are defined in pixels)...
In advance I thank.))

2
Contributors
12
Replies
13
Views
7 Years
Discussion Span
Last Post by vedro-compota
Featured Replies
  • 1

    'display: inline-block' would render the content according to the size of the content inside it. Read More

  • 1

    Many absolute positions. Absolute position is not good for layout formatting. It should use for creating dynamic contents and creating HTML DOM element with browser scrptings (javascript, vbscript, etc). Absolute position moved absolutely from it's parent or document. It left no space and it parent's cannot render correctly. You should … Read More

  • 1

    I suggest you to try with the simplest layout. Below is my examples. [code] html, body { font: 13px Arial,Tahoma,Sans-serif; margin: 0; padding: 0; } h3 { font-size: 13px; text-align: center; } #wrapper { margin: 12px auto; width: 1024px; } #main-menu { background: #f0f0f0; border: 1px solid #d8d8d8; height: 60px; … Read More

  • 1

    I have no special places or things and also I have no great books for studying CSS or HTML. All of my know about HTML and CSS are mostly based on practice. I tried with googling and learned on some HTML, CSS websites. They gave me basic and foundation. I … Read More

1

'display: inline-block' would render the content according to the size of the content inside it.

Votes + Comments
+fromvedrocompota
0

Zero13,it doest work(( as i understand - it's a big problem in css. That browsers differently support properties. Offer such here decisions, but they don't work in my example -

p { min-height:100%;
height:auto !important;
height:100%;
}
0

It is a code of my page and sheet of styles)) How to make so that the block "static" contained in itself all contents (according to a page html-code), and "message" more low, than "static" ?
help me, guys )

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>  Что-то вроде страницы. </title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen">
</head>
 <body>

 <div id="content">
   <div id="static">
       <div id="main_menu">

       </div>
       <div id="main_photo">

       </div>
        <div id="main_form">

       </div>
       <div id="main_text_area">
            <div id="main_text_head">

            </div>     
       </div>

       <div id="right_block">

       </div>
       </div>

       <div id="message"> 
          <div id="message_head">   
          </div>
          <div id="user_avatar">   
          </div>
          <div id="message_text">   
          </div>           
          <div id="message_bottom">   
          </div>           
       </div>
</div>

</body>
</html>

+

html { margin:0px; 
      padding:0px;
      border: 0px; }
body  { margin-left: 50%; 
           padding:0px;
           border: 0px;
           overflow-X: hidden;         }           

#content     { position: relative ;
               margin:0px; 
               padding:0px; 
               top: 5px;
               left: -512px;
               width: 1024px; /* внешний блок сайта */
               min-height:100%;
               height:auto !important;
               height:100%; 
               border: dashed 0px;   
                 }

#static     { position: relative ;
            margin:0px; 
            padding:0px; 
               top: 0px;
               left: 0px;
               width: 1024px; /* всё , кроме стихийных сообщений */
               min-height:100%;
               height:auto !important;
               height:100%;
               border: dashed 2px;
              }
#main_menu   {position:absolute ;
              margin:0px; 
              padding:0px;
              background-image:  url('images/main_menu/fone/main_menu.jpg');
              background-repeat: no-repeat;
              width: 1024px ;  
              height: 60px ; border: dashed 1px;  }

#main_photo  {position:absolute ;
              margin:0px; 
              padding:0px;
              background-image:  url('images/main_photo/fone/main_photo.jpg');
              background-repeat: no-repeat;
              top: 80px;
              left: 20px;
              width: 287px ;  
              height: 127px ; border: dashed 1px;   }

#main_form   {position: absolute;
            margin:0px; 
            padding:0px;   
              background-image:  url('images/main_form/fone/main_form.jpg');
              background-repeat: repeat;
              top: 230px;
              left: 20px;
              width: 287px ;  
              height: 250px ;
              border: dashed 1px;   }
#main_text_area {position: absolute;
                 margin:0px; 
                 padding:0px;
                 background-image:  url('images/main_text_area/fone/main_text_area.jpg');
                 background-repeat: repeat;
                 top: 80px;
                 left: 350px ;
                 width: 350px ;  
                 height: 400px ; 
                 border: dashed 1px;  }

#main_text_head {position: absolute;
                 margin:0px; 
                 padding:0px; 
                background-image:  url('images/main_text_area/main_text_head/fone/main_text_head.jpg');
                background-repeat: no-repeat;
                top: 20px ;
                left: 20px ;
                width: 322px ;  
                height: 44px ;border: dashed 2px; 
                margin: 0% 0% 50% 0%}
#right_block   {position: absolute;
               margin:0px; 
               padding:0px;
                background-image:  url('images/right_block/fone/right_block.jpg');
                background-repeat: repeat;
                top: 80px;
                left: 720px;
                width: 250px ;  
                height: 400px ; border: dashed 1px;  }
#message    {position: ;
           margin:0px; 
           padding:0px;
             background-image:  url('images/message/fone/message_area.jpg');
             background-repeat: repeat-x;
             background-color: #FFFFFF;
             top: px;
             left: px;
             width: 700px ;  
             height: 150px ; border: dashed 1px; 
             }
#user_avatar {position: relative;
             margin:0px; 
             padding:0px; 
             background-image:  url('images/message/user_avatar/fone/user_avatar.jpg');
             background-repeat: no-repeat;
             top: 5px;
             left: 5px;
             width: 109px ;  
             height: 51px ;  border: dashed 1px; }
#message_head {position: relative;
               margin:0px; 
               padding:0px;  
               background-image:  url('images/message/message_head/fone/message_head.jpg');
               background-repeat: no-repeat;
               top: 5px;
               left: 5px;
               width: 638px ;  
               height: 7px ; border: dashed 1px;  } 
#message_bottom {position: relative;
                 margin:0px; 
                 padding:0px;
                 background-image:  url('images/message/message_bottom/fone/message_bottom.jpg');
                 background-repeat: no-repeat;
                 top: 5px;
                 left: 5px;
                 width: 505px ;  
                 height: 4px ; border: dashed 1px;  }     

I think that a problem in properties of blocks "static" "content" and "message".
Here it is really difficult to understand - a code not so clear but if who helps - I will be very grateful))
(Can still I will be useful))

Edited by mike_2000_17: Fixed formatting

1

Many absolute positions. Absolute position is not good for layout formatting. It should use for creating dynamic contents and creating HTML DOM element with browser scrptings (javascript, vbscript, etc).

Absolute position moved absolutely from it's parent or document. It left no space and it parent's cannot render correctly.

You should use exact height instead of minimum height calculating maximum heights of absolute elements inside it.

0

Really, I have absolutely forgotten. That elements with an absolute arrangement will be excluded from a normal stream...... Thanks))

0

I have changed an arrangement type. now it's "relative", but for some reason the bottom block "message" settles down as if height of "stastic" = 200 %..... Prompt in what a problem,please, guys)) I attach an example. (File).
Now the code looks so -
css -

html { margin:0px; 
      padding:0px;
      border: 0px; }
body  { margin-left: 50%; 
           padding:0px;
		   border: 0px;
           overflow-X: hidden;		   }		   
		   
#content     { position: relative ;
               margin:0px; 
               padding:0px; 
               top: 5px;
               left: -512px;
               width: 1024px; /* внешний блок сайта */
               border: dashed 1px;	 
				 }

#static     { position: relative ;
            margin:0px; 
            padding:0px; 
               top: 0px;
               left: 0px;
               width: 1024px; /* всё , кроме стихийных сообщений */
               border: dashed 2px;
              }

#main_menu   {position:relative ;
              margin:0px; 
              padding:0px;
              background-image:  url('images/main_menu/fone/main_menu.jpg');
              background-repeat: no-repeat;
              width: 1024px ;  
              height: 60px ; border: dashed 1px;  }

#main_photo  {position:relative ;
              margin:0px; 
              padding:0px;
              background-image:  url('images/main_photo/fone/main_photo.jpg');
              background-repeat: no-repeat;
              top: 25px;
              left: 20px;
              width: 287px ;  
              height: 127px ; border: dashed 1px;   }

#main_form   {position: relative;
            margin:0px; 
            padding:0px;   
              background-image:  url('images/main_form/fone/main_form.jpg');
              background-repeat: repeat;
              top: 50px;
              left: 20px;
              width: 287px ;  
              height: 250px ;
			  border: dashed 1px;   }
#main_text_area {position: relative;
                 margin:0px; 
                 padding:0px;
                 background-image:  url('images/main_text_area/fone/main_text_area.jpg');
                 background-repeat: repeat;
                 top: -350px;
                 left: 350px ;
                 width: 350px ;  
                 height: 400px ; 
				 border: dashed 1px;  }

#main_text_head {position: absolute;
                 margin:0px; 
                 padding:0px; 
                background-image:  url('images/main_text_area/main_text_head/fone/main_text_head.jpg');
                background-repeat: no-repeat;
                top: 20px ;
                left: 20px ;
                width: 322px ;  
                height: 20px ;border: dashed 1px; 
				margin: 0% 0% 50% 0%}
#right_block   {position: relative;
               margin: 0px; 
               padding: 0px;
                background-image:  url('images/right_block/fone/right_block.jpg');
                background-repeat: repeat;
                top: -750px;
                left: 720px;
                width: 250px ;  
                height: 400px ; border: dashed 1px;  }
#message    {position: relative;
           margin:0px; 
           padding:0px;
             background-image:  url('images/message/fone/message_area.jpg');
             background-repeat: repeat-x;
             background-color: #FFFFFF;
             top: 0px;
             left: 0px;
             width: 700px ;  
             height: 150px ; 
			 border: dashed 1px; 
			 }
#user_avatar {position: relative;
             margin:0px; 
             padding:0px; 
             background-image:  url('images/message/user_avatar/fone/user_avatar.jpg');
             background-repeat: no-repeat;
             top: 5px;
             left: 5px;
             width: 109px ;  
             height: 51px ;  border: dashed 1px; }
#message_head {position: relative;
               margin:0px; 
               padding:0px;  
               background-image:  url('images/message/message_head/fone/message_head.jpg');
               background-repeat: no-repeat;
               top: 5px;
               left: 5px;
               width: 638px ;  
               height: 7px ; border: dashed 1px;  } 
#message_bottom {position: relative;
                 margin:0px; 
                 padding:0px;
                 background-image:  url('images/message/message_bottom/fone/message_bottom.jpg');
                 background-repeat: no-repeat;
                 top: 5px;
                 left: 5px;
                 width: 505px ;  
                 height: 4px ; border: dashed 1px;  }

+
html -

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>  Что-то вроде страницы. </title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen">
</head>
 <body>

 <div id="content">
  <div id="static">
       <div id="main_menu">
                 
       </div>
	   <div id="main_photo">
                 
       </div>
	    <div id="main_form">
                 
       </div>
	   <div id="main_text_area">
	        <div id="main_text_head">
                 
            </div>     
       </div>
	   
	   <div id="right_block">
                
       </div>
	</div>  

       <div id="message"> 
          <div id="message_head">   
          </div>
          <div id="user_avatar">   
          </div>
		  <div id="message_text">   
          </div> 		  
		  <div id="message_bottom">   
          </div> 		  
       </div>
</div>

</body>
</html>

Zero13 -All hope of you)

1

I suggest you to try with the simplest layout. Below is my examples.

html, body {
	font: 13px Arial,Tahoma,Sans-serif;
	margin: 0;
	padding: 0;
}
h3 {
	font-size: 13px;
	text-align: center;
}
#wrapper {
	margin: 12px auto;
	width: 1024px;
}
#main-menu {
	background: #f0f0f0;
	border: 1px solid #d8d8d8;
	height: 60px;
	line-height: 60px; /* Set line-height same with height will give the equal vertical alignment */
	text-align: center;
}
#content {
	padding: 12px 0;
}
#columns {
	overflow: hidden;
}
#left {
	float: left;
	width: 287px;
}
#main_photo, #main_form {
	border: 1px solid #ddd;
	font-weight: bold;
	margin-bottom: 12px;
	padding: 87px 10px;
	text-align: center;
}
#middle {
	border: 1px solid #ddd;
	float: left;
	margin-left: 22px;
	padding: 13px 8px 87px;
	width: 432px;
}
#right {
	float: right;
	width: 250px;
	border: 1px solid #ddd;
}
#main_text_head {
	background: #e8e8e8;
	border: 1px solid #d7d7d7;
	margin: 0 0 9px;
	padding: 8px 3px;
}
#message {
	overflow: hidden;
	position: relative;
}
#avatar {
	background: #f7f7f7;
	border: 1px solid #d8d8d8;
	float: left;
	font-weight: bold;
	height: 111px;
	line-height: 111px;
	width: 117px;
	text-align: center;
}
#message_text {
	margin-left: 124px;
	padding: 8px 13px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Что-то вроде страницы.</title>
</head>
<body>
	<div id="wrapper">
		<div id="main-menu">
			Main Menu
		</div>
		<div id="content">
			<div id="columns">
				<div id="left">
					<div id="main_photo">Main Photo</div>
					<div id="main_form">Main Form</div>
				</div>
				<div id="middle">
					<h3 id="main_text_head">Main Text Head</h3>
				</div>
				<div id="right">
					<h3>Right Side</h3>
				</div>
			</div>
			<div id="message">
				<div id="avatar">Avatar</div>
				<div id="message_text">Message</div>		  
			</div>
		</div>
		<div id="footer">
		</div>
	</div>
</body>
</html>

'top,left,right,bottom' with 'position: relative' left the spaces make the gap between the elements. Using float simple and flexible. Anyway 'margin-auto' will help you center the wrapper. DTD always must include in the document.

Hope this help.

Votes + Comments
Who else so helped me?))
0

Zero13, you have really helped me! Hasn't simply helped, and has resulted a beautiful example)) but all the same I still has many questions. For example, it would be desirable to understand - why -

'top,left,right,bottom' with 'position: relative' left the spaces make the gap between the elements.

(After all for all blocks that there were no intervals I used

margin: 0px;

)
-----------------------------------

Don't answer))(It will help, but not on long))) and if you can - advise textbooks or sites on which you studied css, html and something about DTD(if it probably - place here links).
Huge to you thanks - I have again understood that I know nothing)

Edited by vedro-compota: n/a

1

I have no special places or things and also I have no great books for studying CSS or HTML. All of my know about HTML and CSS are mostly based on practice.

I tried with googling and learned on some HTML, CSS websites. They gave me basic and foundation. I learned these sites and spent many times infront of my PC and wrote many codes and run on my PC.w3schools is greate place for beginners and HTML.net is also a good site for HTML and CSS.

You should start with trying to know about CSS properties and references and their structure. How their properties work and cross browser compatibilities and common errors that you will face with coding CSS.

You should know about the box model related with CSS http://css-tricks.com/the-css-box-model/. You should also know the CSS float property and how they cause the cross browser issues and how to fix that http://www.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/, http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

You can find about DTD at here http://www.w3.org/QA/2002/04/valid-dtd-list.html.

One of the important thing is testing and practice what you found.

Hope that help...

Votes + Comments
++++++++++
0

Yes, probably it is necessary also to me -

learn these sites and spent many times infront of my PC and wrte many codes and run on my PC

(A phrase worthy citing!))) to learn)) Thanks Zero13 - your councils will precisely help me! (And you have already helped)

0

Zero13 , I think that you should have at least some sites - give references - interesting to look))

Edited by vedro-compota: n/a

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.