Jump to content
vmars316

? Need help with css border, margin, display

Recommended Posts

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>
	

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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 by dsonesuk

Share this post


Link to post
Share on other sites

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 by dsonesuk

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...