Text overflow outside of <aside> |
Text overflow outside of <aside> |
JUI43555 |
Mar 14 2023, 12:48 AM
Post
#1
|
Member Group: Members Posts: 44 Joined: 6-March 23 From: Perth Member No.: 28,833 |
Hi, sorry for noob question but not sure what I'm doing wrong and hit a brick wall.
The text is overflowing out of the <aside> section, (screenshot below) especially when reducing the size of the screen with inspector. How do i adjust the CSS to ensure the text stays inside at all times and remains responsive when reducing the screensize? I also need to center the site in the browser. ) I'd like to have a bit of space on the left and right sides. (For this project i must use semantic HTML only and no divs) Hoping someone can help. thanks. CODE <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Practice | Makes Perfect</title> <link rel="stylesheet" href="blind.css"> </head> <body> <header><h1>Website name</h1></header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Pricing</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <aside> <h1>Toy Pictures</h1> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Et earum odio sed at culpa quis, pariatur debitis a quidem unde similique consequuntur optio reprehenderit aperiam obcaecati quod soluta placeat nisi.</p> <h1>Toy pricing</h1> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Et earum odio sed at culpa quis, pariatur debitis a quidem unde similique consequuntur optio reprehenderit aperiam obcaecati quod soluta placeat nisi.</p> <h1>Toy Options</h1> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Et earum odio sed at culpa quis, pariatur debitis a quidem unde similique consequuntur optio reprehenderit aperiam obcaecati quod soluta placeat nisi.</p> <h1>Toy news article</article></h1> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Et earum odio sed at culpa quis, pariatur debitis a quidem unde similique consequuntur optio reprehenderit aperiam obcaecati quod soluta placeat nisi.</p> </aside> <main> <article> <img src="Images/teddy_fence.jpg" alt="Teddy infront of fence"> <h1>Toy options</h1> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Et earum odio sed at culpa quis, pariatur debitis a quidem unde similique consequuntur optio reprehenderit aperiam obcaecati quod soluta placeat nisi.</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis saepe corrupti at nam quod suscipit adipisci voluptate officia beatae hic, assumenda, veritatis iste aliquid molestiae amet. Amet consequuntur incidunt quisquam.</p> </article> </main> <footer>Footer</footer> </body> </html> CODE body { font-family: 'Courier New', Courier, monospace; height: 100vh; display: grid; grid-template-areas: 'header header header' 'nav nav nav' 'aside main main' 'aside main main' 'footer footer footer'; grid-template-columns: 40% 70%; grid-template-rows: 100px 50px 600px 100px; } header, aside, main, footer { background-color: antiquewhite; margin: 5px; border: solid; } header { grid-area: header; } nav { grid-area: nav; background-color: rgb(183, 183, 150); margin-left: 5px; margin-right: 5px; border: solid; } nav ul { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-evenly; list-style: none; } nav li a { text-decoration: none; padding: 20px; } aside { grid-area: aside; } aside div { display: flex; flex-direction: column; } main { grid-area: main; } main img { width: 100%; padding: 10px; border-radius: 1em; } footer { grid-area: footer; } |
coothead |
Mar 14 2023, 04:35 AM
Post
#2
|
Advanced Member Group: Members Posts: 206 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
Hi, sorry for noob question but not sure what I'm doing wrong and hit a brick wall. You appear to be doing two things wrong.
Need help making page responsive ...but to no avail. coothead |
JUI43555 |
Mar 14 2023, 06:06 PM
Post
#3
|
Member Group: Members Posts: 44 Joined: 6-March 23 From: Perth Member No.: 28,833 |
Hi, sorry for noob question but not sure what I'm doing wrong and hit a brick wall. You appear to be doing two things wrong.
Need help making page responsive ...but to no avail. coothead Thanks coothead, i'll have a look. I have seen the other threads and very thankful, i made this one from scratch separate to the other site as a practice site and couldn't see where i was going wrong using the code from the original examples. |
coothead |
Mar 14 2023, 06:36 PM
Post
#4
|
Advanced Member Group: Members Posts: 206 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
Hi there JUI43555,
are you saying that you have not opened the... JUI43555_slight_reworking.zip ...and seen the result? coothead |
JUI43555 |
Mar 14 2023, 07:54 PM
Post
#5
|
Member Group: Members Posts: 44 Joined: 6-March 23 From: Perth Member No.: 28,833 |
Hi there JUI43555, are you saying that you have not opened the... JUI43555_slight_reworking.zip ...and seen the result? coothead Yes I've def opened this one, it was fantastic. I was just unsure which code to use from that one to fix the errors i was having with this new practice layout. So I started a new post to tackle a brick wall I came across when starting from scratch. |
coothead |
Mar 14 2023, 09:12 PM
Post
#6
|
Advanced Member Group: Members Posts: 206 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
Hi there JUI43555.
have a look at this... another_test.zip ( 161.03k ) Number of downloads: 83 coothead This post has been edited by coothead: Mar 14 2023, 09:18 PM |
Christian J |
Mar 14 2023, 09:15 PM
Post
#7
|
. Group: WDG Moderators Posts: 9,665 Joined: 10-August 06 Member No.: 7 |
|
JUI43555 |
Mar 14 2023, 09:19 PM
Post
#8
|
Member Group: Members Posts: 44 Joined: 6-March 23 From: Perth Member No.: 28,833 |
Hi there JUI43555. have a look at this... another_test.zip ( 161.03k ) Number of downloads: 83 coothead Thanks Coothead this is wonderful. I can see some parts where i went wrong. |
Christian J |
Mar 14 2023, 09:27 PM
Post
#9
|
. Group: WDG Moderators Posts: 9,665 Joined: 10-August 06 Member No.: 7 |
The text is overflowing out of the <aside> section, (screenshot below) especially when reducing the size of the screen with inspector. How do i adjust the CSS to ensure the text stays inside at all times and remains responsive when reducing the screensize? What would you want to happen if there's not enough room for the text? To get a scrollbar for the overflowing text you might use: CODE aside {overflow: auto;} Another perhaps better idea might be to make the ASIDE and MAIN elements resize like table cells, but I don't know how to do that using grid. QUOTE I also need to center the site in the browser. ) I'd like to have a bit of space on the left and right sides. That could be done with some BODY margin. QUOTE CODE grid-template-columns: 40% 70%; This seems to make the page 110% wide (40+70), forcing a horizontal scrollbar. Try using 40+60 instead (or less). |
coothead |
Mar 14 2023, 09:29 PM
Post
#10
|
Advanced Member Group: Members Posts: 206 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
|
Christian J |
Mar 15 2023, 07:43 AM
Post
#11
|
. Group: WDG Moderators Posts: 9,665 Joined: 10-August 06 Member No.: 7 |
|
Christian J |
Mar 15 2023, 10:04 AM
Post
#12
|
. Group: WDG Moderators Posts: 9,665 Joined: 10-August 06 Member No.: 7 |
I tried to draw you attention to this in this thread... Need help making page responsive ...but to no avail. I get the impression that the OP is studying webdesign, and is in part looking for feedback on various coding solutions in his separate threads. "Teach a man to fish" and all that... |
coothead |
Mar 15 2023, 10:15 AM
Post
#13
|
Advanced Member Group: Members Posts: 206 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
. In what way? From my quick glance at the CSS spec, Grid . appears to made for grid layouts just like the OP's. Bearing in mind that this is just my personal opinion, "flex" seems to me to be a less involved method for novice coders to grasp and use than "grid". Once "flex methodology has been mastered then it would, of course, be appropriate to study "grid". By choice, though, I would always have used "flex" over "grid" for the O.P.'s layout. coothead This post has been edited by coothead: Mar 15 2023, 10:21 AM |
Lo-Fi Version | Time is now: 11th May 2024 - 05:25 AM |