? Need help with css border, margin, display

vmars316 · August 25, 2019

Hello & Thanks:

I can't seem to get "css border, margin, display" working .

Would like all 4 of the "myDiv" to show side by side .

Pls, what am I doing wrong ?

Thanks

	<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
  <style>         
  body {
         font-family: Comic Sans MS;
         background: #D3DDEB;  //  #bcce98 ; 
         border-style: 12px solid navy;
         margin: 8px;
    }
#container {
              border-style: 12px solid navy;
}
    .mydiv {
      position: absolute;
      display: inline-block;
      left: 10px;
      z-index: 9;
      background-color: lightgrey;  //  #495C87;  //  #e9f2d7 ; 
      text-align: center;
      border-style: solid  ; 
      border-width: 1px; 
      border-color: #D9B04E ; 
    }
	    .mydivheader {
      padding: 10px;
      cursor: move;
      z-index: 10;
      background-color: #495C87;  //  darkgreen ;  
      color: #fff;
      font-size: 12px;
    }
textarea {
      background-color: #F1F1F1;  //  #D3DDEB; //  #e9f2d7 ;
      color: black ;  
}
	#myPreDiv { 
      position: absolute;
      top:350px; 
//      display: inline-block;
      }
.pasteInto{
//      display: none;
      border: dotted ;
    }
h5 {
        text-align: center:
}
#currentPage_Address {
         background: #495C87;  //  #839C4B ;   //  #808080 ;  //  #2196F3 ; //  #4DABF5; //  #B6DDFB ;  //  #BBD1E3 ;  //  #CCDCEA ;  //  #CBE6FC;  //  #BCCE98;
         font-size: 1px;
         color: #D9B04E ;  //  white ;  //  #FFFFF ;  //  #808693;
         }
  </style>
</head>
  <body >
<div id="currentPage_Address" style="text-align: center; ">myStory.html</div>
<br>
<button>Save This Page</button>
<button>Copy into PRE</button>
<button>Copy Back into textarea</button>
<br><br>
	    <div class="container" >
	    <div class="mydiv" >
      <div class="mydivheader"></div>
             <textarea  class="copyFrom"  rows="4" cols="12"> </textarea>    
    </div>
    <div class="mydiv" >
      <div class="mydivheader"></div>
             <textarea  class="copyFrom"  rows="4" cols="12"> </textarea>
             </div>
    <div class="mydiv" >
      <div class="mydivheader"></div>
             <textarea  class="copyFrom"  rows="4" cols="12"> </textarea>
     </div>
	    <div class="mydiv" >
      <div class="mydivheader"></div>
             <textarea  class="copyFrom"  rows="4" cols="12"> </textarea>    
    </div>
</div>  <!-- #container -->
	<div id="myPreDiv" >
	<pre  contenteditable="true" class="pasteInto"  >1</pre>
	<pre contenteditable="true" class="pasteInto"  >2</pre>
	<pre  contenteditable="true" class="pasteInto"  >3</pre>
	<pre  contenteditable="true" class="pasteInto"  >4</pre>
</div>
	</body>
</html>

dsonesuk · August 25, 2019

Don't use position absolute, you have to set width, height, left, top for each individual element using this. Using '//' in css is like using diesel in a petrol engine, it uses /* whatever */ for comments

vmars316 · August 25, 2019

Thanks dsonesuk ;

Got rid of // .

Still probs with " width, height, left, top " see:

https://www.w3schools.com/code/tryit.asp?filename=G7BTTE3FA589

Thanks

dsonesuk · August 25, 2019

7 hours ago, vmars316 said:

Thanks dsonesuk ;

Got rid of // .

Still probs with " width, height, left, top " see:

https://www.w3schools.com/code/tryit.asp?filename=G7BTTE3FA589

Thanks

NO! YOU didn't, still using position absolute results in same problem.

You only use position absolute for overlapping.

Edited August 25, 2019 by dsonesuk

vmars316 · August 25, 2019

Thanks ,

Oops! Forgot that one

The prob that remains is:
why does css borders for "myDiv" work fine
but the borders for body and div .container do not work ?
Thanks

https://www.w3schools.com/code/tryit.asp?filename=G7CDQO1VLUTQ

Thanks

dsonesuk · August 25, 2019

You have defined the colour, you have defined the style, but! Then you have defined as though it was border: 12px;

border-top: 12px;

border-right: 12px;

border-bottom: 12px;

border-left: 12px;

It expects the colour and styling added individually, so you require '-width' added to each to target border width only.

Edited August 25, 2019 by dsonesuk

vmars316 · August 26, 2019

Aha , Thanks dsonesuk :

"colour" are you perhaps British ?

Sign In

? Need help with css border, margin, display

Recommended Posts

vmars316

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

vmars316

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

vmars316

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

vmars316

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity