This is my first ever webpage:
https://karmah24.github.io/Coursera/mod2_sol/
In each of the sections the titles pizza, burger, beverages should be on the top right of the section. I've assigned each column: relative position, and the headers: absolute position. But this takes them out of normal document flow and when I view the page with different widths, the lorem epsum content moves up for different sizes.
How can I correct this? And why does the content in the paragraph tag move up for all the sizes since the header is taken out of the document flow?
Also how can I center the entire figure(image + caption)?
body {
font-family: Arial, Helvetica, sans-serif;
background-color: azure;
}
* {
box-sizing: border-box;
}
h1 {
text-align: center;
}
.row {
width: 100%;
}
.title1, .title2, .title3 {
padding: 1%;
margin-left: 1%;
margin-bottom: 1%;
border-left: 4px solid black;
border-bottom: 4px solid black;
position: absolute;
top: 0%;
right: 0%;
}
.title1 {
background-color: rgb(223, 209, 25);
}
.title2 {
background-color: rgb(132, 214, 24);
}
.title3 {
background-color: aqua;
}
#media (min-width: 992px) {
.col_lg_4 {
position: relative;
float: left;
width: 31.33%;
padding: 1%;
margin: 1%;
border: 4px solid black;
background-color: #909090;
}
}
#media (min-width: 768px) and (max-width: 994px) {
.col_md_6 {
position: relative;
float: left;
width: 48%;
padding: 1%;
margin: 1%;
border: 4px solid black;
background-color: #909090;
}
.col_md_12 {
position: relative;
float: left;
width: 98%;
padding: 1%;
margin: 1%;
border: 4px solid black;
background-color: #909090;
}
}
#media (max-width: 767px) {
.col_sm_12 {
position: relative;
float: left;
width: 98%;
padding: 1%;
margin: 1%;
border: 4px solid black;
background-color: #909090;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MENU</title>
<link rel="stylesheet" href="../mod2_sol/css/sytles.css">
</head>
<body>
<h1>Our Menu</h1>
<div class="row">
<section class="col_lg_4 col_md_6 col_sm_12">
<header class="title1">PIZZAS</header>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br> Error cupiditate ipsa sint iusto a voluptas quas quis,
<br> ex nisi fugit placeat eius possimus impedit sed distinctio minus recusandae. Fugiat, modi.
</p>
<figure>
<img src="pizza.jpg" alt="pizza" width="50%" height="50%">
<figcaption>Try our latest Supreme Pizza</figcaption>
</figure>
</section>
<section class="col_lg_4 col_md_6 col_sm_12">
<header class="title2">BURGERS</header>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br> Error cupiditate ipsa sint iusto a voluptas quas quis,
<br> ex nisi fugit placeat eius possimus impedit sed distinctio minus recusandae. Fugiat, modi.
</p>
<figure>
<img src="burger.jpg" alt="burger" width="50%" height="50%">
<figcaption>Try our latest Supreme Burger</figcaption>
</figure>
</section>
<section class="col_lg_4 col_md_12 col_sm_12">
<header class="title3">BEVERAGES</header>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br> Error cupiditate ipsa sint iusto a voluptas quas quis,
<br> ex nisi fugit placeat eius possimus impedit sed distinctio minus recusandae. Fugiat, modi.
</p>
<figure>
<img src="beverages.jpg" alt="beverages" width="50%" height="50%">
<figcaption>Try our Latest Chillers</figcaption>
</figure>
</section>
</div>
</body>
</html>
You can use float: right instead of position: absolute; so the text inside of the paragraph will float around your header.
Setup margin and padding to your paragraph. The browser default is different from browser to browser.
Don't use width="50%" height="50%" in img, they are outdated. Set it in CSS.
Use text-align: center; in section figure to set the content to center.
body {
font-family: Arial, Helvetica, sans-serif;
background-color: azure;
}
* {
box-sizing: border-box;
}
h1 {
text-align: center;
}
.row {
width: 100%;
}
.title1,
.title2,
.title3 {
padding: 1%;
margin-left: 1%;
margin-bottom: 1%;
border-left: 4px solid black;
border-bottom: 4px solid black;
float: right;
}
.title1 {
background-color: rgb(223, 209, 25);
}
.title2 {
background-color: rgb(132, 214, 24);
}
.title3 {
background-color: aqua;
}
section p {
padding: 1%;
margin: 0;
}
section figure {
padding: 1%;
margin: 0;
text-align: center;
}
section img {
width: 50%;
height: auto;
}
#media (min-width: 992px) {
.col_lg_4 {
position: relative;
float: left;
width: 31.33%;
padding: 0%;
margin: 1%;
border: 4px solid black;
background-color: #909090;
}
}
#media (min-width: 768px) and (max-width: 994px) {
.col_md_6 {
position: relative;
float: left;
width: 48%;
padding: 0%;
margin: 1%;
border: 4px solid black;
background-color: #909090;
}
.col_md_12 {
position: relative;
float: left;
width: 98%;
padding: 0%;
margin: 1%;
border: 4px solid black;
background-color: #909090;
}
}
#media (max-width: 767px) {
.col_sm_12 {
position: relative;
float: left;
width: 98%;
padding: 0%;
margin: 1%;
border: 4px solid black;
background-color: #909090;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MENU</title>
<link rel="stylesheet" href="../mod2_sol/css/sytles.css">
</head>
<body>
<h1>Our Menu</h1>
<div class="row">
<section class="col_lg_4 col_md_6 col_sm_12">
<header class="title1">PIZZAS</header>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br> Error cupiditate ipsa sint iusto a voluptas quas quis,
<br> ex nisi fugit placeat eius possimus impedit sed distinctio minus recusandae. Fugiat, modi.
</p>
<figure>
<img src="pizza.jpg" alt="pizza">
<figcaption>Try our latest Supreme Pizza</figcaption>
</figure>
</section>
<section class="col_lg_4 col_md_6 col_sm_12">
<header class="title2">BURGERS</header>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br> Error cupiditate ipsa sint iusto a voluptas quas quis,
<br> ex nisi fugit placeat eius possimus impedit sed distinctio minus recusandae. Fugiat, modi.
</p>
<figure>
<img src="burger.jpg" alt="burger">
<figcaption>Try our latest Supreme Burger</figcaption>
</figure>
</section>
<section class="col_lg_4 col_md_12 col_sm_12">
<header class="title3">BEVERAGES</header>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br> Error cupiditate ipsa sint iusto a voluptas quas quis,
<br> ex nisi fugit placeat eius possimus impedit sed distinctio minus recusandae. Fugiat, modi.
</p>
<figure>
<img src="beverages.jpg" alt="beverages">
<figcaption>Try our Latest Chillers</figcaption>
</figure>
</section>
</div>
</body>
</html>
So first of all position: absolute removes the element out of the document flow, that means the space that the element take will be removed, so that's why other elements will move a little up.
So a way of setting the titles on the top right side and still take the space.
I will set the following for the parent element (section):
display: flex;
flex-direction: column;
And for the titles remove the position and top / left properties and add the following:
margin-left: auto;
When you set the margin-*direction*: auto it will move the element to the oposite direction.
Css flex module is a great way of creating layouts. Try learn it and it will make thing easier. source
Yes you should use CSS flex module or bootstrap 4, you can achieve this easily.
In the current code you should use px instead of % and column top padding should be similar of button height.
Related
I need help getting the header title (h2,h3,h4) region always appear in the top right corner of their respective div region, no matter what view is being displayed.
Also, the header content keeps overflowing as I shrink the web browser, how can I stop that from running over?
I tried moving the margins and the padding of the header, and the header won't move to the right past 350px.
I tried to adjust the size of the div to allow the header to move top right.
Should I have used the "section element" instead of div?
I haven't tried using absolute or relative positioning.
/********** Base styles **********/
* {
font-family: arial, sans-serif, helvetica;
font-style: normal;
font-size: 16px;
box-sizing: border-box;
margin: 0;
padding: 0;
color: rebeccapurple;
}
h1 {
text-align: center;
font-size: 175%;
margin-bottom: 40px;
color: black;
}
h2,
h3,
h4 {
font-size: 125%;
text-align: center;
font-weight: bold;
border: 1px solid black;
max-width: 30%;
margin-bottom: 5px;
position: relative;
bottom: 11px;
left: 231px;
}
h2 {
background-color: Pink;
color: black;
}
h3 {
background-color: red;
color: white;
}
h4 {
background-color: greenyellow;
color: black;
}
div {
background-color: lightgray;
padding: 10px 0px 10px 10px;
border: 1px solid black;
margin: 0 auto;
margin-bottom: 10px;
max-width: 400px;
position: relative;
}
/*Large devices*/
#media (min-width: 992px) {
.box1 {
float: left;
margin-left: 20px;
margin-right: 60px;
max-width: 30%
}
.box2 {
float: left;
max-width: 30%;
}
.box3 {
float: right;
max-width: 30%;
margin-right: 20px;
}
h2,
h3,
h4 {
position: relative;
left: 70.2%;
}
}
/*Medium devices*/
#media (min-width: 768px) and (max-width:991px) {
.box1 {
float: left;
max-width: 43%;
margin-bottom: 30px;
margin-left: 40px;
margin-right: 0px;
}
.box2 {
float: right;
max-width: 43%;
margin-bottom: 30px;
margin-right: 40px;
}
.box3 {
margin-top: 40px;
clear: both;
max-width: 100%;
margin-left: 40px;
margin-right: 40px;
}
h2,
h3,
h4 {
position: relative;
left: 70.2%;
}
}
}
/*small devices*/
#media (max-width:767px) {
div {
margin-top: 30px;
}
h2,
h3,
h4 {
position: relative;
left: 100%;
}
}
<!DOCTYPE html>
<html lang="en-CA">
<head>
<meta charset="utf-8">
<title> Our Menu </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/STYLE.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Our Menu </h1>
<div class="box1">
<h2>Meat</h2>
<p id="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit error quis ab perspiciatis eos inventore recusandae iste itaque numquam facilis, tenetur. Doloribus officiis quae facilis, nisi, ex similique. Animi, perferendis</p>
</div>
<div class="box2">
<h3>Pizza</h3>
<p id="p2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit error quis ab perspiciatis eos inventore recusandae iste itaque numquam facilis, tenetur. Doloribus officiis quae facilis, nisi, ex similique. Animi, perferendis</p>
</div>
<div class="box3">
<h4>Salads</h4>
<p id="p3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit error quis ab perspiciatis eos inventore recusandae iste itaque numquam facilis, tenetur. Doloribus officiis quae facilis, nisi, ex similique. Animi, perferendis</p>
</div>
</body>
</html>
/********** Base styles **********/
* {
font-family: arial, sans-serif, helvetica;
font-style: normal;
font-size: 16px;
box-sizing: border-box;
margin: 0;
padding: 0;
color: rebeccapurple;
}
h1 {
text-align: center;
font-size: 175%;
margin-bottom: 40px;
color: black;
}
h2,
h3,
h4 {
font-size: 125%;
text-align: center;
font-weight: bold;
border: 1px solid black;
max-width: 30%;
margin-left: 310px;
margin-bottom: 5px;
margin-top: 0px;
padding: 0px;
}
h2 {
background-color: Pink;
color: black;
}
h3 {
background-color: red;
color: white;
}
h4 {
background-color: greenyellow;
color: black;
}
div {
background-color: lightgray;
padding: 10px 0px 10px 10px;
border: 1px solid black;
margin: 0 auto;
margin-bottom: 10px;
max-width: 400px;
}
/*Large devices*/
#media (min-width: 992px) {
.box1 {
float: left;
margin-left: 20px;
margin-right: 60px;
max-width: 30%
}
.box2 {
float: left;
max-width: 30%;
}
.box3 {
float: right;
max-width: 30%;
margin-right: 20px;
}
}
/*Medium devices*/
#media (min-width: 768px) and (max-width:991px) {
.box1 {
float: left;
max-width: 43%;
margin-bottom: 30px;
margin-left: 40px;
margin-right: 0px;
}
.box2 {
float: right;
max-width: 43%;
margin-bottom: 30px;
margin-right: 40px;
}
.box3 {
margin-top: 40px;
clear: both;
max-width: 100%;
margin-left: 40px;
margin-right: 40px;
}
}
/*small devices*/
#media (max-width:767px) {
div {
margin-top: 30px;
}
}
<!DOCTYPE html>
<html lang="en-CA">
<head>
<meta charset="utf-8">
<title> Our Menu </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/STYLE.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Our Menu </h1>
<div class="box1">
<h2>Meat</h2>
<p id="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit error quis ab perspiciatis eos inventore recusandae iste itaque numquam facilis, tenetur. Doloribus officiis quae facilis, nisi, ex similique. Animi, perferendis</p>
</div>
<div class="box2">
<h3>Pizza</h3>
<p id="p2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit error quis ab perspiciatis eos inventore recusandae iste itaque numquam facilis, tenetur. Doloribus officiis quae facilis, nisi, ex similique. Animi, perferendis</p>
</div>
<div class="box3">
<h4>Salads</h4>
<p id="p3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit error quis ab perspiciatis eos inventore recusandae iste itaque numquam facilis, tenetur. Doloribus officiis quae facilis, nisi, ex similique. Animi, perferendis</p>
</div>
</body>
</html>
So, a few things to go over:
First off, you don't need to use different heading tags for the same hierarchical elements. You already have your first heading as your title, and since you don't have anything that follows you can stick with just <h2> from there.
We can use CSS specificity to target your various headings to change the colors as you prefer. You could also have done this with ids, classes, really there are several ways to approach any layout in CSS; this is just what I chose for simplicity.
floats are very outdated and have been replaced by flex-box techniques which we're going to use to position your headers on your menu items. Could we use position attributes? Sure. But if we're using flex already, we can take advantage of what it's capable of to position elements using a container element to house all of your items and then make the items themselves utilize flex as well.
We can use align-self: flex-end; to position your <h2> tags as needed and then add some margin to give them some breathing room away from the edges of the menuItems.
There's much more that can be done here, but I think this cleans it up quite nicely and you get a much simpler, more easily-responsive layout with less code and less attributes.
Hopefully, that covers everything. Let me know if you have any questions! Thanks for updating your post after my comment. Make sure to keep that in mind moving forward ;)
/********** Base styles **********/
* {
font-family: arial, sans-serif, helvetica;
font-style: normal;
font-size: 16px;
box-sizing: border-box;
margin: 0;
padding: 0;
color: rebeccapurple;
}
.container {
display: flex;
flex-direction: row;
background: transparent;
width: 100vw;
flex-wrap: wrap;
gap: 10px;
padding: 20px;
}
.menuItem {
display: flex;
flex-direction: column;
background-color: lightgray;
padding: 0px 0px 10px 10px;
border: 1px solid black;
margin: 0 auto;
flex: 1 1 32%;
min-width: 400px;
}
h1 {
text-align: center;
font-size: 175%;
margin-bottom: 40px;
color: black;
}
h2 {
font-size: 125%;
text-align: center;
font-weight: bold;
border: 1px solid black;
border-top: 0px;
border-right: 0px;
align-self: flex-end;
padding: 5px 20px;
}
.container .menuItem:nth-child(1) h2 {
background-color: Pink;
color: black;
}
.container .menuItem:nth-child(2) h2 {
background-color: red;
color: white;
}
.container .menuItem:nth-child(3) h2 {
background-color: greenyellow;
color: black;
}
<!DOCTYPE html>
<html lang="en-CA">
<head>
<meta charset="utf-8">
<title> Our Menu </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/STYLE.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Our Menu </h1>
<div class="container">
<div class="menuItem">
<h2>Meat</h2>
<p id="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit error quis ab perspiciatis eos inventore recusandae iste itaque numquam facilis, tenetur. Doloribus officiis quae facilis, nisi, ex similique. Animi, perferendis</p>
</div>
<div class="menuItem">
<h2>Pizza</h2>
<p id="p2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit error quis ab perspiciatis eos inventore recusandae iste itaque numquam facilis, tenetur. Doloribus officiis quae facilis, nisi, ex similique. Animi, perferendis</p>
</div>
<div class="menuItem">
<h2>Salads</h2>
<p id="p3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit error quis ab perspiciatis eos inventore recusandae iste itaque numquam facilis, tenetur. Doloribus officiis quae facilis, nisi, ex similique. Animi, perferendis</p>
</div>
</div>
</body>
</html>
I have a transparent navbar which always keeps overlaying the main content.
HTML:
<!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>Navbar</title>
<link rel="stylesheet" href="styles.css">
<!-- <script src="index.js"></script> -->
</head>
<body>
<header id="header_main">
<div id="d1">
<h1 id="h1_title_responsive">YASH</h1>
</div>
<ul id="ul_nav">
<li class="li_nav" id="li1"><img src="logo.png" id="logo_img"></li>
<li class="li_nav" id="li2">Home</li>
<li class="li_nav" id="li3">About</li>
<li class="li_nav" id="li4">Contact</li>
<h1 id="h1_title">YASH</h1>
<li id="search_li"><input name="search" id="search_box" placeholder="Search this website" type="text"></li>
</ul>
</header>
<div id="d2">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ipsam et quam eum placeat consequatur iure at rerum? Necessitatibus numquam facilis, fugiat non eum ipsum. Aperiam maxime provident harum quia!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa excepturi a nihil laudantium corporis fugit quisquam enim natus facilis dolor. Vitae quibusdam blanditiis atque, eligendi architecto hic repellat amet accusantium!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea fugit enim natus? Aspernatur libero alias unde veniam cumque impedit cum corrupti facere consectetur molestiae laudantium, asperiores esse quis, autem saepe
</p>
</div>
</body>
</html>
CSS:
*{
margin: 0;
padding: 0;
}
#header_main{
background-color: rgba(0, 0, 0, 0.6);
position: fixed;
width: 100%;
}
body{
background: red;
}
.li_nav{
list-style: none;
margin: 0.9vh 1vw;
font-size: large;
z-index: 1;
font-weight: bolder;
}
a{
color: white;
text-decoration: none;
padding: 2px;
border-radius: 3px;
}
.a_text:hover{
color: black;
background: white;
}
#li1{
color: white;
}
#logo_img{
height: 40px;
width: auto;
}
#ul_nav{
display: flex;
align-items: center;
justify-content: left;
}
#h1_title{
color: white;
display: flex;
justify-content: center;
position: absolute;
width: 100%;
}
#d1{
display: none;
}
#h1_title_responsive{
display: flex;
color: white;
justify-content: center;
position:relative;
width: 100vw;
}
#search_box{
border-radius: 7px;
height: 2em;
font-size: 80%;
font-weight: bolder;
width: 170%;
}
#search_li{
list-style: none;
position: absolute;
left: 75%;
width: 12.5%;
}
#d2{
height: 1000vh;
}
#media (max-width: 700px) {
#h1{
visibility: hidden;
}
#d1{
display: flex;
}
}
This is a screenshot of the issue:
[enter image description here][1]
https://i.stack.imgur.com/WgWoL.png
and in my css the #d2 is 1000vh because I want the navbar to work perfectly even when scrolling
The navbar position: fixed means that the navbar element is removed from the flow of the document.
You can find the full explanation of what position: fixed does here: https://developer.mozilla.org/en-US/docs/Web/CSS/position.
To prevent the navbar from covering the main content, you have to add either some padding or margin above the content.
#d2{
padding-top: // height of the navbar + some extra
}
The navbar has position fixed. Read more here: https://developer.mozilla.org/en-US/docs/Web/CSS/position
Fix this by adding a height to your navbar.
Example:
#header_main{
background-color: rgba(0, 0, 0, 0.6);
position: fixed;
width: 100%;
height:50px; /*set to your own*/
}
I want make a tribute page like this:
I'm having trouble adding text with a border next to my image. Im only able to add it below the caption but not next to the image (exactly like the tribute page example). I'd like to do this with only html and css
<!DOCTYPE html>
<html lang="en">
<Style>
body {
background-color: grey;
}
#img-div {
width: 100%;
max-width: 633px;
height: auto;
margin-left: auto;
margin-right: auto;
display: block;
border-style: outset;
padding: 2px 500px 2px 2px;
margin-bottom: 2em;
text-align: center;
border-image-width: auto;
}
#main {
border-style: double;
text-align: center;
}
header {
text-align: center;
}
#image {
border: groove;
}
p {
border: black;
}
</Style>
<header>Crikey, mate</header>
<head>
<title id="tittle">Steve Irwin</title>
</head>
<body>
<div id="img-div">
<img id="image" alt="steve Irwin" src="Steve-Irwin.jpg">
<caption id="img-caption">"We dont own planet earth, we belong to it. And we must share it with our wildlife"</caption>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor repellat amet illo hic doloribus dolore eius accusantium quisquam eaque repudiandae adipisci ipsam iure quaerat saepe, assumenda molestias maiores inventore rem?</p>
</div>
<main id="main">
<a id="tribute-link" target="_blank" href="https://en.wikipedia.org/wiki/Steve_Irwin">Learn More</a>
</main>
</body>
</html>
Try this. It floats the image to the left and uses clear: both on the following text to ensure it goes below the image.
body {
background-color: grey;
}
#img-div {
width: 100%;
max-width: 633px;
height: auto;
margin-left: auto;
margin-right: auto;
display: block;
border-style: outset;
padding: 2px 500px 2px 2px;
margin-bottom: 2em;
text-align: center;
border-image-width: auto;
}
#image {
border: groove;
max-width: 300px;
float: left;
}
#img-caption {
font-size: 300px;
}
.clear {
clear: both;
}
<div id="img-div">
<img id="image" alt="steve Irwin" src="https://www.abc.net.au/cm/rimage/6508936-3x2-large.jpg?v=2">
<caption id="img-caption">"We dont own planet earth, we belong to it. And we must share it with our wildlife"</caption>
<p class="clear">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor repellat amet illo hic doloribus dolore eius accusantium quisquam eaque repudiandae adipisci ipsam iure quaerat saepe, assumenda molestias maiores inventore rem?</p>
</div>
The html element to use here is the figure element - this allows for an image and related content to be shown and then a caption to be presented that is either the first or last child. All elements can be styled.
In your case - you want to have an image and text positioned horizontally and then the caption below it all. So wrap the image and desired text in a div - apply display: flex to that to get it to be aligned horizontally (no need for floats or clearning floats with flexbox);
Then the figcaption sits below and is as wide as the entire figure.
figure {
background-color: grey;
border: solid 1px black
}
#img-div {
display: flex;
padding: 8px
}
#image {
border: groove;
width: 200px;
}
#img-quote {
flex-grow: 1;
padding: 8px
}
figcaption {
background: white;
padding: 8px;
}
<figure>
<div id="img-div">
<img id="image" alt="steve Irwin" src="https://www.abc.net.au/cm/rimage/6508936-3x2-large.jpg?v=2">
<p id="img-quote">"We dont own planet earth, we belong to it. And we must share it with our wildlife"</p>
</div>
<figcaption>Lorem ipsum dolor sit amet consectetur adipisicing elit.</figcaption>
</figure>
Currently experimenting with HTML and CSS and am struggling with this issue.
I'm messing around with a responsive website, and somehow can't make my navigation bar exceed the max-width of my navbar exceed the max-width of my content.
What I'd like it to look like https://imgur.com/a/KAk9mOi
I do really hope anyone can help me.
TIA.
<nav class="navbar">
<ul class="nav-items">
<li class="nav-item nav-item--active">Home</li>
<li class="nav-item">Contact</li>
</ul>
</nav>
.main {
}
.navbar {
padding: 20px;
background-color: #1C2826;
max-width: 100%;
}
.nav-items {
display: flex;
justify-content: center;
}
.nav-items > li {
flex: 1;
text-align: center;
}
.nav-item:not(:last-of-type) {
margin-right: 20px;
}
.nav-item--active {
/* after */
}
.content {
padding: 8px;
}
.login-card {
border: 1px solid #999;
margin-bottom: 20px;
padding: 12px;
border-radius: 4px;
}
.login {
display: flex;
flex-direction: column;
}
.login-button {
background-color: #D64550;
padding: 4px;
border: none;
color: #ffffff;
font-size: 20px;
}
.login-input {
margin-bottom: 8px;
border: none;
border-bottom: 1px solid #999;
padding-top: 4px;
padding-bottom: 4px;
}
.footer {
padding: 8px;
}
.inline-block {
display: inline-block;
}
/* Alt over 460px */
#media only screen and (min-width: 460px) {
.main{
max-width: 600px;
}
.navigation-items{
flex-wrap: wrap;
}
.login-button {
font-size: inherit;
}
}
https://jsfiddle.net/m0u79e8s/
I hope this is useful
* {
padding: 0px;
margin: 0px;
}
.main {
}
.navbar {
padding: 20px;
background-color: #1C2826;
width: 100%;
}
.nav-items {
display: flex;
justify-content: center;
}
.nav-items > li {
flex: 1;
text-align: center;
}
.nav-item:not(:last-of-type) {
margin-right: 20px;
}
.nav-item--active {
/* after */
}
.content {
padding: 8px;
}
.login-card {
border: 1px solid #999;
margin-bottom: 20px;
padding: 12px;
border-radius: 4px;
}
.login {
display: flex;
flex-direction: column;
}
.login-button {
background-color: #D64550;
padding: 4px;
border: none;
color: #ffffff;
font-size: 20px;
}
.login-input {
margin-bottom: 8px;
border: none;
border-bottom: 1px solid #999;
padding-top: 4px;
padding-bottom: 4px;
}
.footer {
padding: 8px;
}
.inline-block {
display: inline-block;
}
/* Alt over 460px */
#media only screen and (min-width: 460px) {
.main {
display: flex;
flex-direction: column;
align-items: center;
}
.content {
max-width: 460px;
}
.navigation-items{
flex-wrap: wrap;
}
.login-button {
font-size: inherit;
}
}
<!doctype html>
<html>
<head>
<title>Responsive time</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Raleway:400,600,700" rel="stylesheet">
<link rel="stylesheet" href="./reset.css">
<link rel="stylesheet" href="./generic.css">
<link rel="stylesheet" href="./styles.css">
</head>
<html>
<body>
<main class="main">
<!-- Navigation elements -->
<nav class="navbar">
<ul class="nav-items">
<li class="nav-item nav-item--active">Home</li>
<li class="nav-item">Contact</li>
</ul>
</nav>
<!-- Section -->
<section class="content">
<h1 class="test">Time to get responsive</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore deleniti, quia provident!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis quas alias reiciendis velit, dolor eos temporibus culpa ex modi itaque nostrum natus doloribus sed maiores, a obcaecati quia sequi quisquam corrupti perspiciatis sit quam, qui expedita. Nemo sed dolor earum voluptate quod reiciendis rem laborum atque ex nulla sapiente ea ullam assumenda, fugiat quae incidunt dicta, cupiditate repellendus possimus aliquid! Ad veniam vero alias, rem quod atque dolores saepe possimus, tempora, eaque magnam culpa animi repellendus ratione dolorem harum quo.</p>
<!-- Form -->
<div class="login-card">
<form class="login" action="#" method="get">
<input class="login-input" type="email" placeholder="Indtast email">
<input class="login-input" type="password" placeholder="Indtast kodeord">
<button class="login-button">Send</button>
</form>
</div>
<picture>
<source media="(max-width:459px)" srcset="img/cow.jpg">
<source media="(min-width:460px)" srcset="img/dog.jpg">
<img src="/img/cow.jpg" alt="animals">
</picture>
</section>
<footer class="footer">
<div class="footer-content">
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit quas beatae voluptate.</p>
Some other link
</div>
<div class="footer-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi!</p>
<img class="logo-image" src="/rubbish" alt="">
</div>
</footer>
</main>
</body>
</html>
</html>
I'm trying to get the #bigimage and #textarea elements to sit closer together, but then still be centered when laid out as col-12 on a small screen.
Should I use a media query for this? I've tried putting them in a separate container, but strange stuff starts happening when I test that on a small screen.
The colored borders in my attempt below are for my own clarity. I'm just a beginner so if you have any other comments about my code I'd really appreciate it.
header {
border: 3px solid red;
text-align: center;
margin-top: 30px;
}
li {
display: inline;
text-align: center;
padding: 3%;
}
img {
width: 300px;
}
ul {
border: 2px solid green;
margin-bottom: 20px;
margin-top: 40px;
}
h2 {
border: 2px solid yellow;
margin-top: 30px;
}
#textarea {
border: 3px solid green;
text-align: justify;
margin-top: 30px;
width: 200px;
}
#bigimage {
border: 3px solid green;
text-align: center;
}
p {
border: 2px solid red;
position: relative;
top: 50%;
transform: translateY(-50%);
width: 300px;
margin: 0 auto;
}
#mainstuff {
width: 50% margin: 0 auto;
border: 3px solid yellow;
}
.container {
border: 5px solid blue;
}
.row {
margin-top: 30px;
position: relative;
}
img {
border: 2px solid red;
}
#textandphoto {
width: 800px;
}
#media (min-width: 1500px) {
.container {
max-width: 900px;
}
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-12">
<header>
<h1>Raphael Hetherington</h1>
<h2>11+ Tutor</h2>
<ul>
<li>About Me</li>
<li>11+ Tuition</li>
<li>Programming</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
</header>
</div>
</div>
<div class="row" id="mainstuff">
<div class="col-12 col-md-6" id="bigimage">
<img src="//lorempixel.com/400/200/abstract/5/" alt="">
</div>
<div class="col-12 col-md-6" id="textarea">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum omnis harum nesciunt repellendus laudantium quam quo ea, placeat, totam rem laboriosam vero, asperiores architecto. Dolores earum, architecto nemo molestiae quo. Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Corporis accusamus modi eaque placeat voluptates nihil quasi non et similique magnam architecto itaque nobis expedita amet, provident doloribus eveniet quis explicabo?</p>
</div>
</div>
</div>
#textarea {
border: 3px solid green;
text-align: justify;
margin-top: 0; /* 0 instead of 30px*/
width: 200px;
}