Member Avatar for vedro-compota

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
  • 164 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by vedro-compota
Member Avatar for ko ko

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

commented: +fromvedrocompota +1
Member Avatar for vedro-compota

Thanks , Zero13- I will try))

Member Avatar for vedro-compota

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%;
}
Member Avatar for vedro-compota

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 because: Fixed formatting
Member Avatar for ko ko

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.

Member Avatar for vedro-compota

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

Member Avatar for vedro-compota

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)

parts.zip (71.01 KB)
Member Avatar for ko ko

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.

commented: Who else so helped me?)) +1
Member Avatar for vedro-compota

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 because: n/a
Member Avatar for ko ko

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...

commented: ++++++++++ +1
Member Avatar for vedro-compota

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)

Member Avatar for vedro-compota

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

Edited by vedro-compota because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.