The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Text overflow outside of <aside>
JUI43555
post 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;
}




IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post 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
QUOTE(JUI43555 @ Mar 14 2023, 05:48 AM) *

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. IPB Image
  1. using grid instead of flex. IPB Image
  2. ignoring replies to your other numerous threads. IPB Image
I tried to draw you attention to this in this thread...

Need help making page responsive

...but to no avail. IPB Image

coothead
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
JUI43555
post Mar 14 2023, 06:06 PM
Post #3


Member
***

Group: Members
Posts: 44
Joined: 6-March 23
From: Perth
Member No.: 28,833
QUOTE(coothead @ Mar 14 2023, 05:35 PM) *

QUOTE(JUI43555 @ Mar 14 2023, 05:48 AM) *

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. IPB Image
  1. using grid instead of flex. IPB Image
  2. ignoring replies to your other numerous threads. IPB Image
I tried to draw you attention to this in this thread...

Need help making page responsive

...but to no avail. IPB Image

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
JUI43555
post Mar 14 2023, 07:54 PM
Post #5


Member
***

Group: Members
Posts: 44
Joined: 6-March 23
From: Perth
Member No.: 28,833
QUOTE(coothead @ Mar 15 2023, 07:36 AM) *

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post 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...


Attached File  another_test.zip ( 161.03k ) Number of downloads: 81


coothead

This post has been edited by coothead: Mar 14 2023, 09:18 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 14 2023, 09:15 PM
Post #7


.
********

Group: WDG Moderators
Posts: 9,653
Joined: 10-August 06
Member No.: 7
QUOTE(coothead @ Mar 14 2023, 10:35 AM) *

You appear to be doing two things wrong. IPB Image[list=1]
[*]using grid instead of flex. IPB Image

What's wrong with grid? I'm not very familiar with either.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
JUI43555
post Mar 14 2023, 09:19 PM
Post #8


Member
***

Group: Members
Posts: 44
Joined: 6-March 23
From: Perth
Member No.: 28,833
QUOTE(coothead @ Mar 15 2023, 10:12 AM) *

Hi there JUI43555.

have a look at this...


Attached File  another_test.zip ( 161.03k ) Number of downloads: 81


coothead


Thanks Coothead this is wonderful. I can see some parts where i went wrong.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 14 2023, 09:27 PM
Post #9


.
********

Group: WDG Moderators
Posts: 9,653
Joined: 10-August 06
Member No.: 7
QUOTE(JUI43555 @ Mar 14 2023, 06:48 AM) *

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).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post 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
QUOTE(Christian J @ Mar 15 2023, 02:15 AM) *

. What's wrong with grid?
. I'm not very familiar with either.




There's nothing at all wrong with grid per se. IPB Image

It's just that it's not really apppropriate for the O.P.'s current project. IPB Image

coothead

This post has been edited by coothead: Mar 14 2023, 09:30 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 15 2023, 07:43 AM
Post #11


.
********

Group: WDG Moderators
Posts: 9,653
Joined: 10-August 06
Member No.: 7
QUOTE(coothead @ Mar 15 2023, 03:29 AM) *

It's just that it's not really apppropriate for the O.P.'s current project. IPB Image

In what way? From my quick glance at the CSS spec, Grid appears to made for grid layouts just like the OP's. unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 15 2023, 10:04 AM
Post #12


.
********

Group: WDG Moderators
Posts: 9,653
Joined: 10-August 06
Member No.: 7
QUOTE(coothead @ Mar 14 2023, 10:35 AM) *

I tried to draw you attention to this in this thread...

Need help making page responsive

...but to no avail. IPB Image

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...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post 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
QUOTE(Christian J @ Mar 15 2023, 12:43 PM) *

. In what way? From my quick glance at the CSS spec, Grid
. appears to made for grid layouts just like the OP's. unsure.gif


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". IPB Image

Once "flex methodology has been mastered then
it would, of course, be appropriate to study "grid". IPB Image

By choice, though, I would always have used "flex"
over "grid" for the O.P.'s layout.IPB Image

coothead

This post has been edited by coothead: Mar 15 2023, 10:21 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 19th April 2024 - 07:57 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC