Typesetting a community school homepage assessment wanted

MDN Learn
#1

http://127.0.0.1:5500/commu.html#
how do i make it so the logos go to the right of the text and not the left.
Also in the nav, I want to make it so that the text spreads out and isn’t squished. (like with finding us)

#2 
/* General setup */
  • {
    box-sizing: border-box;
    }

body {
margin: 0 auto;
min-width: 1000px;
max-width: 1400px;
font-family: ‘Abhaya Libre’, serif;
font-size: 13px;
letter-spacing: 2px;
}

h1
{
font-family: ‘Volkhov’, serif;
text-align: center;
letter-spacing: 2px;
}
/* Layout */

section {
float: left;
width: 50%;
}

aside {
float: left;
width: 30%;
}

nav {
float: left;
width: 20%;
}

footer {
clear: both;
}

header, section, aside, nav, footer {
padding: 20px;
}

/* header and footer */

header, footer {
border-top: 5px solid #a66;
border-bottom: 5px solid #a66;
}

/* WRITE YOUR CODE BELOW HERE */
html
{
font-size: 10px;
}

h2
{
font-size: 24px;
letter-spacing: 2px;
}

p, ul, ol
{
font-size: 15px;
}

section ul, aside ul
{
list-style: georgian outside;
}

section h2 + p
{
text-indent: 20px;
}
a:link
{
color:rgba(122, 77, 9, 0.932);
font-style: italic;
}
a:hover
{
color: rgb(17, 138, 43);
text-decoration: none;
}
a:visited
{
color:rgb(76, 21, 204);
}
a:focus
{
color:rgb(204, 33, 21);
}

section h2 ~ p a:link
{
background: url(external-link-52.png) 0 0 no-repeat;
background-size: 15px 15px;
padding-left: 19px;
}

nav ul li
{
list-style-type: none;
line-height: 1.9;
border:rgba(122, 77, 9, 0.932) solid;
padding: 10px;
padding-right: 140px;
margin: 9px;
margin-right: 0;

}

nav ul li a:link
{
text-decoration: none;
font-size: 20px;
font-style: normal;
}

#3

Hi @guzzlezilla :wave:

Could you please put your code into an online editor like https://codepen.io, https://jsfiddle.net or https://glitch.com, like you did last time? It’s much easier that way for us to help you.

Thanks! :blush:
Michael

2 Likes
#4

https://roasted-fascinated-tadpole.glitch.me

im sorry, is this better?? i hope

#5

Thank you very much. This is better. :slightly_smiling_face:

External link Icons
The first 0 in your background value stands for the horizontal position (0 = left side). This should be 100% (right side). Then you can change the padding-left to padding-right. Additionally a:link selects only unvisited links. In the end, a good version for this selector would be:

a[href*="http"] {
  padding-right: 19px;
  background: url(external-link-52.png) no-repeat 100% 0;
  background-size: 16px 16px;
}

The selector means: “Add an icon to every link on the page which href attribute contains “http” (external link)”.

Squishy nav
You have padding-right: 140px; on the li element. This squishes the links to their minimum size. Just remove it. I also recommend using:

nav li a {
  display: inline-block;
  width: 100%;
  text-align: center;
}

The first two properties are used to turn the nav links into block elements that are the same width as the li elements. This is necessary when we want to center the text with the third property.

I hope that helps. Feel free to ask more questions if you like :slightly_smiling_face:

Have a nice weekend,
Michael

PS: Your email address is visible in your post. I think it somehow ended up in the optional “name” field of your profile. I recommend removing it.