simona6 Posted July 28 Share Posted July 28 I've seen various methods but I can't see a good one to apply a vertically aligned line either side of text. Obviously you use a ::before and ::after, but if you do that, you can do it with a % width, and then you have to assign a width to the Text itself which varies based on width of screen. So how do you do it effectively? Quote Link to comment Share on other sites More sharing options...
requinix Posted July 28 Share Posted July 28 Describe (or draw) what you mean by "a vertically aligned line on either side of the text". Quote Link to comment Share on other sites More sharing options...
maxxd Posted July 29 Share Posted July 29 I'm also a bit confused by the percent width comment - you can use percentage as measurement, but you certainly don't have to. Quote Link to comment Share on other sites More sharing options...
Barand Posted July 29 Share Posted July 29 <style type='text/css'> .lr-border { display: inline-block; border-left: 3px solid gray; border-right: 3px solid gray; padding: 0 8px; margin: 30px 10px; } </style> <div class='lr-border'> Are you wanting something like this? </div> <br> <div class='lr-border'> ( where the width adjusts automatically with the text length ) </div> 1 Quote Link to comment Share on other sites More sharing options...
simona6 Posted August 11 Author Share Posted August 11 Apologies - I mean Horizontal. ------ like this ------- (but not dashed... and responsive). I've seen it done with some page builders, but can't see how to do it manually in CSS. Quote Link to comment Share on other sites More sharing options...
Barand Posted August 11 Share Posted August 11 You were asked... On 7/29/2024 at 12:40 AM, requinix said: Describe (or draw) what you mean by "a vertically aligned line on either side of the text". Quote Link to comment Share on other sites More sharing options...
simona6 Posted August 12 Author Share Posted August 12 Sure - I just did, as I meant Horiz. not vertical. thanks. Quote Link to comment Share on other sites More sharing options...
Barand Posted August 12 Share Posted August 12 Quote Link to comment Share on other sites More sharing options...
simona6 Posted September 3 Author Share Posted September 3 Yes, so how is that achieved? Quote Link to comment Share on other sites More sharing options...
Barand Posted September 3 Share Posted September 3 If I still have the code, I'll post it. However, as you are well aware, it can sometimes take weeks to complete the labour-intensive task of answering a post. Quote Link to comment Share on other sites More sharing options...
simona6 Posted September 3 Author Share Posted September 3 Indeed, specially when the website doesn't email you an alert to say a kind stranger has replied. Quote Link to comment Share on other sites More sharing options...
Barand Posted September 3 Share Posted September 3 My code... <!DOCTYPE html> <html lang='en'> <meta charset='utf-8'> <head> <title>Example</title> <style type="text/css"> body { font-family: verdana, sans-serif; font-size: 12pt; padding: 20px; } h2 { font-variant: small-caps; text-align: center; } .chapter { width: 100%; margin-top: 20px; margin-bottom: 20px; border-bottom: 5px solid blue; text-align: center; } .head-text { display: inline; padding: 0 10px; background-color: white; font-family: gabriola, cursive; font-size: 20pt; font-style: italic; font-weight: 600; position: relative; top: +26px; } p { text-align: justify; line-height: 22px; } </style> </head> <body> <h2>Book 3</h2> <div> <div class='chapter'> <div class='head-text'> Caput vigesimum septimum </div> </div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. </p> <p>Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy. Fusce aliquet pede non pede. Suspendisse dapibus lorem pellentesque magna. Integer nulla. Donec blandit feugiat ligula. Donec hendrerit, felis et imperdiet euismod, purus ipsum pretium metus, in lacinia nulla nisl eget sapien. Donec ut est in lectus consequat. </p> <div class='chapter'> <div class='head-text'> Epilogus </div> </div> <p>Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue. </p> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
simona6 Posted September 3 Author Share Posted September 3 What if it is on a background image? Quote Link to comment Share on other sites More sharing options...
Barand Posted September 3 Share Posted September 3 Then you should have mentioned that at the start instead of wasting our time on a different problem. Try experimenting. Quote Link to comment Share on other sites More sharing options...
simona6 Posted September 3 Author Share Posted September 3 Because I didn't know that would be a problem. I can see the white background forces the layer over the blue bar. But of course, if the background has an image, I have nowhere to go. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.