Website Design Project [HELP WITH POSITIONING AND DISPLAY]

Hello everyone, hope you are having a great weekend.

I am having a hard one here because I don’t have the concepts of display, positioning and box elements very clear.

I fail every single time that I want to move an element on my code.

For example in this project I need to create 3 borders with more boxes inside simple.
The problem comes when I want to use block, inline and block-inline. I don’t know when to use them neither display.

I will attach until I have come so far for the last 2 days (this makes me feel very sad and frustrating because it’s a simple exercise and I can accomplish it).

I feel like I shouldn’t move on from here until I master this part of the course.

my main questions are:

  1. The yellow box why moved a little but up more than the other ones.
  2. Why I fail moving the font boxes around.
  3. How can I set the margins of the page so everything looks proper and nice.
  4. How can I make the content of the page not shrink when I reduce the size of the browser?

FYI:

I HAD TO COPY AND PASTE THE CODE BECAUSE THE LINK TO SHARE WON’T LOAD…

I speak Spanish so this time (of many attempts) I tried setting the names in spanish to see if it was easier for me to understand what I am doing.

If I did things that are unnecessary like overcreating divs and classes or id’s… whatever I am not doing right feel free to tell me (I need this help).

Also I am doing it this exercise on Sublime Text and I just pasted everything on the CodeAcademy website to give you guys the link.

Thank you for your help and hope to hear from you VERY SOON.

HTML

<!DOCTYPE html>
<html>
<head>
	<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,900&display=swap" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,800&display=swap" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Raleway:400,400i,800&display=swap" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="styles.css">
	<title>Website Design</title>
	
</head>
<body>
	<header>
		<h1>MY WEBSITE DESIGN</h1>
	</header>
	<div class="contenedores">
		<div >
			<h2>COLOR EXAMPLES</h2>
		</div>
		<div id="colores">
			<div class= "color-azul">
				<p>COLOR AZUL</p>
				<p>#0000ff</p>
			</div>
			<div class= "color-amarillo">
				<p>COLOR AMARILLO</p>
				<p>#0000ff</p>
			</div>
			<div class= "color-rojo">
				<p>COLOR ROJO</p>
				<p>#0000ff</p>
			</div>
			<div class= "color-morado">
				<p>COLOR MORADO</p>
				<p>#0000ff</p>
			</div>
		</div>
	</div>
	<div class="contenedores">
		<h2>FONTS EXAMPLES</h2>
		<div id = "letra-roboto">
			<h3 class="titulo-roboto">ROBOTO</h3>
			<p class="letra-roboto1">El baloncesto es el mejor deporte del mundo.</p>
			<p class="letra-roboto2">El baloncesto es el mejor deporte del mundo.</p>
			<p class="letra-roboto3">El baloncesto es el mejor deporte del mundo.</p>
		</div>
		<div id ="letra-openSans">
			<h3 class="titulo-openSans">OPEN SANS</h3>
			<p class="letra-openSans1">El baloncesto es el mejor deporte del mundo.</p>
			<p class="letra-openSans2">El baloncesto es el mejor deporte del mundo.</p>
			<p class="letra-openSans3">El baloncesto es el mejor deporte del mundo.</p>
		</div>
		<div id ="letra-raleway">
			<h3 class="titulo-raleway">RALEWAY</h3>
			<p class="letra-raleway1">El baloncesto es el mejor deporte del mundo.</p>
			<p class="letra-raleway2">El baloncesto es el mejor deporte del mundo.</p>
			<p class="letra-raleway3">El baloncesto es el mejor deporte del mundo.</p>
		</div>
	</div>


</body>
</html>

============================================================================
CSS

h2 {
	color: teal;
}

h1 {
	margin-left: 200px;
}

.contenedores {
	border: 1px solid black;
	padding: 10px;
	margin: 10px;
	margin-left: 200px;
	margin-right: 300px;


}

.color-azul {
	border: 1px solid black;
	height: 100px;
	width: 150px;
	padding: 20px;
	background-color: blue;
	display: inline-block;
	margin: 0 10px;
	text-align: center;
	font-weight: bold;
}

.color-rojo {
	border: 1px solid black;
	height: 100px;
	width: 150px;
	padding: 20px;
	background-color: red;
	display: inline-block;
	margin: 0 10px;
	text-align: center;
	font-weight: bold;
}

.color-amarillo {
	border: 1px solid black;
	height: 100px;
	width: 150px;
	padding: 20px;
	background-color: yellow;
	display: inline-block;
	margin: 0px 10px;
	text-align: center;
	font-weight: bold;

}

.color-morado {
	border: 1px solid black;
	height: 100px;
	width: 150px;
	padding: 20px;
	background-color: purple;
	display: inline-block;
	margin: 0 10px;
	text-align: center;
	font-weight: bold;
}

.titulo-roboto {
	font-family: Roboto;
	text-decoration: underline;
}

.letra-roboto1{
	font-family: 'Roboto', sans-serif;

}

.letra-roboto2{
	font-family: 'Roboto', sans-serif;
	font-weight: 900;
}

.letra-roboto3{
	font-family: 'Roboto', sans-serif;
	font-weight: 400i;
	font-style: italic;
}

.titulo-openSans {
	font-family: "Open Sans", sans-serif;
	text-decoration: underline;
}

.letra-openSans1{
	font-family: 'Open Sans', sans-serif;

}

.letra-openSans2{
	font-family: 'Open Sans', sans-serif;
	font-weight: 800;

}

.letra-openSans3{
	font-family: 'Open Sans', sans-serif;
	font-style: italic;
	
	
}
#letra-roboto {
	width: 100px
	display: inline-block;
}

#letra-openSans {
	width: 100px
	display: inline-block;
}

#letra-raleway {
	width: 100px
	display: inline-block;
}

.titulo-raleway {
	font-family: 'Raleway', sans-serif;
	text-decoration: underline;
}

.letra-raleway1{
	font-family: 'Raleway', sans-serif;

}

.letra-raleway2{
	font-family: 'Raleway', sans-serif;
	font-weight: 800;

}

.letra-raleway3{
	font-family: 'Raleway', sans-serif;
	font-style: italic;



}

@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xIIzI.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: local('Roboto Black'), local('Roboto-Black'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmYUtfBBc4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(https://fonts.gstatic.com/s/opensans/v17/mem6YaGs126MiZpBA-UFUK0Zdc0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFVZ0b.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'), url(https://fonts.gstatic.com/s/opensans/v17/mem5YaGs126MiZpBA-UN8rsOUuhp.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local('Raleway Italic'), local('Raleway-Italic'), url(https://fonts.gstatic.com/s/raleway/v14/1Ptsg8zYS_SKggPNyCg4TYFq.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Raleway'), local('Raleway-Regular'), url(https://fonts.gstatic.com/s/raleway/v14/1Ptug8zYS_SKggPNyC0ITw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: local('Raleway ExtraBold'), local('Raleway-ExtraBold'), url(https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwIouWqZPAA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

The last one, inline-block is only ever used when we wish to override the default display property of an element. For instance, DIVs stack up on one another and take the full width of the viewport, by default. When we declare them as inline blocks then they line up side-by-side , with a slight margin between (~2px)See [1] below. Inline elements on the other hand have no left and right margins, so if we wish to give them margins, we can alter their display property so that they inherit some of the block level properties they didn’t previously have.

The nice thing about inline-block is that it has no default width, and takes that from its content. Being block elements, though, we can define a set width for all the blocks in a row, or give them all common padding, centering, etc. with a single selector rule.

Play around with this to confirm the above information.

<div>block</div>
<div>block .</div>
<div>block . .</div>
<div>block . . .</div>
<div>block . . . .</div>

Give these a border property, and nothing else. View in the browser.

Now give them a text-align property set to center. View in the browser.

Next give them a width property set to say, 5em. View in the browser.

Next, give them a line-height property set to 2em, and view in the browser.

Finally, give them a display property set to inline-block, and view in the browser.

See any difference between the steps? You can move the display property up the list in these steps to see it play out differently. Definitely play with it.

Let’s do the same with some inline elements, we’ll use SPAN

<span>inline</span>
<span>inline .</span>
<span>inline . .</span>
<span>inline . . .</span>
<span>inline . . . .</span>

This time, instead of a border, let’s give them a background-color property set to say, gold. View in the browser.

Try giving them a width property, then view in the browser.

Next try giving them a line-height property, and view in the browser.

Go ahead and given them a text-align property, and view in the browser.

Anything happen yet?

Now give them a display property set to inline-block. Should be some change, now.

Please give us a screenshot of what you see in the final steps of the above. I’m not visualizing this, at present, only suggesting some tests to run. Let us know how it goes and if you are getting more comfortable with inline-block.

HTML elements reference (MDN)

Follow-up

span {
  background: gold;
}
div {
  border: 1px solid rgb(61, 53, 7);
}

inline_block_default
[1]

span {
  background: gold;
  width: 5em;
}
div {
  border: 1px solid rgb(61, 53, 7);
  width: 5em;
}

inline_block_width

span {
  background: gold;
  text-align: center;
  width: 5em;
}
div {
  border: 1px solid rgb(61, 53, 7);
  text-align: center;
  width: 5em;
}

inline_block_text-align_width

span {
  background: gold;
  text-align: center;
  line-height: 2em;
  width: 5em;
}
div {
  border: 1px solid rgb(61, 53, 7);
  text-align: center;
  line-height: 2em;
  width: 5em;
}

inline_block_line-height

span {
  background: gold;
  text-align: center;
  line-height: 2em;
  width: 5em;
  display: inline-block;
}
div {
  border: 1px solid rgb(61, 53, 7);
  text-align: center;
  line-height: 2em;
  width: 5em;
  display: inline-block;
}

inline-block


Grouping

    <section>
      <span>inline</span>
      <span>inline .</span>
      <span>inline . .</span>
      <span>inline . . .</span>
      <span>inline . . . .</span>
    </section>
    <section>
      <div>block</div>
      <div>block .</div>
      <div>block . .</div>
      <div>block . . .</div>
      <div>block . . . .</div>
    </section>

inline-block_grouping



1. We should note that the spaces between the spans in the visualization are there because the browser inserted them as a result of the hard return in the source listing.

    <section>
      <span>inline</span><span>inline .</span><span>inline . .</span><span>inline . . .</span><span>inline . . . .</span>
    </section>

inline_block_noreturn

Not just the spans…

    <section>
      <div>block</div><div>block .</div><div>block . .</div><div>block . . .</div><div>block . . . .</div>
    </section>

inline_block_no_returns

https://repl.it/@mtf/inline-block-property

These questions were set aside momentarily so that your first concern could be addressed. Hopefully we hit the mark, and you have had enough time to explore inline-block, especially in the documentation.

The first two questions will need a working example. Can you create a repl that we can fork so we don’t have to create one with your code? I’d rather fork your code than start a new repl with it. That way it stays your code. repl.it is free to sign up and use. I like it because it is simple and straight forward. I’m not one for bells and whistles.

Number 3 is accomplished with a page wrapper being one approach.

<body>
<div id="wrapper">
  <!-- all sectioning elements in here -->
</div>
</body>

If we consider the document as a sheet of A5 paper, we can assign the margins, background, and other generic properties to this selector.

#wrapper {
  width: 95%;
  margin: 0 auto;
  color: #151404;
  background-color: #f0eaaf;
}

Now that we have a left and right edge, we can hug the borders with our content containers. A lot of the time we can use inline-block as above, with the grouping container given a text-align: center property. [2]

There are simple ways to create the bare rendering that will contain the document. The simpler, the better, imho.

The last question is actually quite complex. What content is shrinking?

An adaptive page allows for various viewport and device widths without a horizontal scrollbar until very narrow. The font size should not be affected.

A responsive page should still have an underlying adaptive layout, then additionally, media queries that conditionally set things like font size, image size, and other display properties.

Perhaps I am not totally clear on the specifics of this question, so the above ramble is a basic response more than an answer.



2.
Witness this subtle change to our sample repl…

section:nth-child(1),
section:nth-child(2) {
  text-align: center;
}

center_grouping_element

line and inline-block elements examples

HELLO!!! I am so so happy to start a monday like this.

Yes the I understood the concepts but this examples are helping me a lot. I attached what I am doing on repl.it.

The inline elements width and height didn’t change until I changed the way they displayed to inline-block.

The second example

1 Like

Again MTF thank you so much for answering like you always do, you are amazing. That being said, I am attaching the same code that I used for this question but on repl.it

https://repl.it/@Georgesgj/Website-Design-Example

The last two questions I think will be answered in the next chapter that I just started called Responsive web design.

1 Like

Looking at the CSS in repl example from this post reveals some redundancy (repetition). The only difference between the four boxes is their background color.

.color-azul {
	border: 1px solid black;
	height: 100px;
	width: 150px;
	padding: 20px;
	background-color: blue;
	display: inline-block;
	margin: 0 10px;
	text-align: center;
	font-weight: bold;
}

.color-rojo {
	border: 1px solid black;
	height: 100px;
	width: 150px;
	padding: 20px;
	background-color: red;
	display: inline-block;
	margin: 0 10px;
	text-align: center;
	font-weight: bold;
}

.color-amarillo {
	border: 1px solid black;
	height: 100px;
	width: 150px;
	padding: 20px;
	background-color: yellow;
	display: inline-block;
	margin: 0px 10px;
	text-align: center;
	font-weight: bold;

}

.color-morado {
	border: 1px solid black;
	height: 100px;
	width: 150px;
	padding: 20px;
	background-color: purple;
	display: inline-block;
	margin: 0 10px;
	text-align: center;
	font-weight: bold;
}

may be reduced to,

#colores div {
	border: 1px solid black;
	height: 100px;
	width: 150px;
	padding: 20px;
	display: inline-block;
	margin: 0 10px;
	text-align: center;
	font-weight: bold;
}
.color-azul {
	background-color: blue;
}
.color-rojo {
	background-color: red;
}
.color-amarillo {
	background-color: yellow;
}
.color-morado {
	background-color: purple;
}

Over to the second example. Will reply if I have more to add.

As for the question about the yellow box, it has to do with the text wrapping to a second line. The fix is,

width: 190px;
padding: 20px 0;

The padding is removed from left and right and the 40px added to the width. It’s worth noting that the box height is set to 100px, but the actual height due to padding is 140px.