1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Any idea how to keep this text static

Discussion in 'HTML & Website Design' started by ketting00, Aug 23, 2020.

  1. #1
    Hi guys,

    Do you have any idea how to keep the text above the textarea static when you resize the textarea. It expands by the size of the parent div. My intention is to keep everything centered.

    The link: https://test-c3848.web.app/
    SEMrush
    The HTML:
    
    <div id=div1>
        <div id=div2>
            <p>Paste link in the textarea.</p>
            <textarea type="text" id="txt"></textarea>
        </div>
    </div>
    
    Code (markup):
    The CSS:
    
    #div1 {min-height: 10em; position: relative}
    #div1 #div2 {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
    }
    .div3 {
    margin: 1em auto;
    text-align: center;
    }
    
    Code (markup):
    Thanks in advanced,
     
    ketting00, Aug 23, 2020 IP
    SEMrush
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,463
    Likes Received:
    1,917
    Best Answers:
    246
    Trophy Points:
    515
    #2
    Yeah, don't use absolute positioning for centering like it's still 2009. This is not a "No Flex Zone".

    Also remember that quotes around attribute values in the markup aren't optional, classes being unique shouldn't need to be prefixed by their parent element, if it's the only tag of that type inside the content it probably doesn't need an ID or class, etc, etc, etc. Also, paragraph is not a label.

    <fieldset class="textareaSet">
    	<label>
    		Paste link in the textarea.<br>
    		<textarea type="text"></textarea>
    	</label>
    </fieldset>
    Code (markup):
    .textareaSet {
    	display:flex;
    	align-items:center;
    	justify-content:center;
    	min-height:10em;
    	border:none;
    }
    Code (markup):
    You may also want to look at HTML 5's "pattern" attribute so you can kill off the scripttardery.

    ... and yes, it will enlarge the parent, that's the POINT of being able to resize a textarea.
     
    Last edited: Aug 23, 2020
    deathshadow, Aug 23, 2020 IP
    Efetobor Agbontaen likes this.
  3. ketting00

    ketting00 Well-Known Member

    Messages:
    751
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #3
    It works,

    Thank you, and also for the tips.
     
    ketting00, Aug 23, 2020 IP
  4. Helen Tashot

    Helen Tashot Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #4
    Thank you for the explanation. Very useful
     
    Helen Tashot, Aug 25, 2020 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,463
    Likes Received:
    1,917
    Best Answers:
    246
    Trophy Points:
    515
    #5
    deathshadow, Aug 25, 2020 IP
  6. ketting00

    ketting00 Well-Known Member

    Messages:
    751
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #6
    Thanks big time.

    HTML and CSS is what I'm avoiding all my career. It's haunted me every time );
     
    ketting00, Aug 28, 2020 IP