I want to float my nav-bar to the right of my screen, but I can't figure out how to make it. I tried to play with the margin property, but that just breaks. I know it's a mess, but I haven't removed any unnecessary code trying to resolve my problem.
Below the code.
#import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght#300;400;700&display=swap");
/* font-family: 'Open Sans', sans-serif; */
* {
box-sizing: border-box;
font-family: "Open Sans", sans-serif;
}
body {
overflow-x: hidden;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
img {
max-width: 100%;
height: auto;
}
.button {
display: inline-block;
font-size: 1.15rem;
text-decoration: none;
padding: 0.5em 1.3em;
border-width: 2px;
border-style: solid;
}
.container {
width: 95%;
margin: 0 auto;
}
/*Home Section*/
header {
text-align: center;
position: absolute;
margin: 1em;
}
.logo {
max-width: 180px;
max-height: 180px;
}
#nav-ul {
margin: 2em;
padding-top: 0.7em;
padding-bottom: 0.7em;
list-style-type: none;
}
.nav-item {
display: inline-block;
margin: 0em;
}
.nav-links {
font-weight: 900;
text-decoration: none;
font-size: 1rem;
padding: 0.3em;
color: white;
}
.nav-links:hover,
.nav-links:focus {
color: lightgray;
}
#home-section {
text-align: center;
width: 100vw;
background-image: url(imgs/home-section-background.jpg);
background-size: cover;
background-position: center;
padding: 10em 0;
}
.title {
color: white;
font-size: 2.5rem;
}
.button-green {
margin-top: 1.8em;
color: rgb(3, 204, 30);
border-color: rgb(12, 255, 45);
}
.button-green:hover,
.button-green:focus {
background-color: rgb(8, 163, 26);
}
/* About section */
#about-examples {
text-align: center;
}
.description-text {
background-color: rgb(68, 68, 68);
color: white;
padding: 3em;
width: 100vw;
margin-left: -2.5%;
outline: 2px solid rgb(12, 255, 45);
outline-offset: -2.1em;
position: relative;
}
.description-text p {
text-align: justify;
}
.description-text h1 {
font-size: 1.3em;
text-align: center;
margin-top: 0;
position: absolute;
top: 0.8em;
background-color: rgb(68, 68, 68);
color: rgb(12, 255, 45);
padding: 0 0.5em;
left: 50%;
transform: translateX(-50%);
}
/*Media quiries*/
#media (min-width: 60rem) {
.title {
font-size: 4rem;
}
.nav-links {
font-size: 2rem;
float: right;
}
.nav-item {
}
.button {
font-size: 2rem;
}
.logo {
float: left;
margin: 1em;
}
#nav-ul {
float: right;
}
.description-text {
font-size: 3em;
}
.description-text p {
font-size: 0.5em;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>About Me</title>
<link href="ResponsiveWeb.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<img src="imgs/logo.jpg" alt="company logo" class="logo" />
<ul id="nav-ul">
<li class="nav-item">
Home
</li>
<li class="nav-item">
About
</li>
<li class="nav-item">
Contact
</li>
</ul>
</header>
<!--Company name goes here-->
<section class="home" id="home-section">
<div class="containter">
<h1 class="title">Making proffesional design and development</h1>
See our work
</div>
</section>
<!--Company description goes here-->
<div class="container">
<section class="about-company" id="about-examples">
<div class="description-text">
<h1>What we do</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh sit
amet commodo nulla facilisi.
</p>
<p>
Nam eget sem sed sem rutrum efficitur. Nullam lorem nunc, porta et
faucibus semper, suscipit id mauris. Sed nisi eros, mollis at mollis
a, porta et sapien. Fusce blandit tempus justo. Aenean erat magna,
semper nec commodo quis, feugiat sit amet lacus. Vestibulum tempor
ornare fermentum. Vestibulum egestas imperdiet libero, sed egestas
purus varius a. Mauris consequat ligula ipsum, at faucibus lectus
blandit quis. Donec congue eros sed est sollicitudin, in ultricies
lorem consectetur. Maecenas suscipit tortor orci, id pellentesque
nisi maximus at. In laoreet turpis id tempor dapibus. Nunc facilisis
egestas ex et ullamcorper. Mauris nunc felis, porttitor nec porta
cursus, egestas vitae tellus. Ut commodo in metus eget blandit.
Maecenas vestibulum dictum neque, at dictum arcu lobortis nec. Donec
quis augue arcu.
</p>
</div>
</section>
</div>
<!--Work Example-->
<section class="work-example">
<h1>Example of our work</h1>
<figure class="port-example">
<img
src="imgs/Portfolio-pic-01 Jeremy Bishop.jpg"
alt="Beautiful tree"
/>
<figcaption class="port-description">
<p>Photo by Jeremy Bishop</p>
<a href="#" class="button button-green button-small"
>See project details</a
>
</figcaption>
</figure>
<figure class="port-example">
<img src="imgs/Portfolio-pic-02 Jay Mantri.jpg" alt="Fog over forest" />
<figcaption class="port-description">
<p>Photo by Jay Mantri</p>
<a href="#" class="button button-green button-small"
>See project details</a
>
</figcaption>
</figure>
<figure class="port-example">
<img
src="imgs/Portfolio-pic-03 Riccardo Chiarini.jpg"
alt="Beautiful lake"
/>
<figcaption class="port-description">
<p>Photo by Riccardo Chiarini</p>
<a href="#" class="button button-green button-small"
>See project details</a
>
</figcaption>
</figure>
<figure class="port-example">
<img
src="imgs/Portfolio-pic-04 redcharlie.jpg"
alt="Beautiful tree in forest"
/>
<figcaption class="port-description">
<p>Photo by redcharlie</p>
<a href="#" class="button button-green button-small"
>See project details</a
>
</figcaption>
</figure>
<figure class="port-example">
<img
src="imgs/Portfolio-pic-05 Vincent van Zalinge.jpg"
alt="Bird on brnanch"
/>
<figcaption class="port-description">
<p>Photo by Vincent van Zalinge</p>
<a href="#" class="button button-green button-small"
>See project details</a
>
</figcaption>
</figure>
<figure class="port-example">
<img
src="imgs/Portfolio-pic-06 eberhard grossgasteiger.jpg"
alt="Fog over mountains"
/>
<figcaption class="port-description">
<p>Photo by eberhard grossgasteiger</p>
<a href="#" class="button button-green button-small"
>See project details</a
>
</figcaption>
</figure>
</section>
<footer id="contacts">
<p>Work hours: Mon-Fri 8:00 AM - 16:00 PM</p>
<br />
<p>You can contact us here:</p>
<br />
<ul class="contact-links">
<li class="contact-link"><a class="contact" href="#">A</a></li>
<li class="contact-link"><a class="contact" href="#">B</a></li>
<li class="contact-link"><a class="contact" href="#">C</a></li>
</ul>
</footer>
</body>
</html>
Maybe the header is not wide enough. In your CSS you can set the width of the header to 100%.
header {
text-align: center;
position: absolute;
margin: 1em;
width: 100%;
}
It worked for me after removing position: absolute from the header in the CSS.
The Problem is your header isn't big enough.
So add to the header "width: 100%;"
header {
text-align: center;
position: absolute;
margin: 1em;
width: 100%
}
Then add "float: right;" to your #nav-ul:
#nav-ul {
margin: 2em;
padding-top: 0.7em;
padding-bottom: 0.7em;
list-style-type: none;
float: right;
}
Related
I'm fairly new to software engineering! I'm having quite some trouble horizontally aligning my navigation bar to the center for my desktop view? I'm currently learning how to utilize bootstrap! I'm sure I have to include a container div somewhere, just not sure! Any help is help! Thanks! Here is my website preview: https://frontendfoundations.marlenebarr.repl.co/
body {
font-family: "Lato", sans-serif;
}
h2 {
font-size: clamp(14px, -1rem + 8.333vw, 26px);
color: #fff;
font-weight: 400;
margin: 0 10px 10px 10px;
text-align: center;
}
h3 {
font-size: 18px;
font-weight: 500;
}
p {
line-height: 1.5em;
margin: 0;
}
section {
padding: 20px;
}
section.alternate-background {
background-color: #00a699;
color: #fff;
}
main img {
width: 100%;
}
.dark {
color: black;
}
/* --- Groups & Items --- */
.group {
display: flex;
flex-direction: column;
}
.item {
flex: 1;
margin: 10px;
}
.item-double {
flex: 2;
}
/* ------- Navigation ------- */
header {
background-color: #ff385c;
padding: 20px 20px 0 20px;
text-align: center;
}
.logo {
font-family: "Pangolin", cursive;
font-size: clamp(24px, -1rem + 8.333vw, 72px);
color: #fff;
}
header nav {
display: flex;
justify-content: center;
}
header nav ul {
display: flex;
flex-wrap: wrap;
}
header nav ul li {
list-style-type: none;
}
header nav ul li a {
color: #fff;
text-decoration: none;
padding: 0 20px 0 0;
}
header nav ul li a:hover {
color: #bdbdbd;
text-decoration: none;
}
/* ------- Search Form ------- */
form {
border: 2px solid #ff385c;
padding: 10px;
}
form label {
font-weight: bold;
}
form select,
form input {
margin-bottom: 20px;
width: 180px;
}
form button {
background-color: #ff385c;
border: none;
color: #fff;
font-size: 24px;
padding: 15px;
width: 100%;
}
form div {
display: flex;
justify-content: space-between;
}
/* ------- Footer ------- */
footer {
background-color: #ff385c;
}
footer p {
color: #fff;
text-align: center;
padding: 20px;
}
/* ------- Media Query ------- */
#media all and (min-width: 480px) {
/* ------ General ------ */
p {
padding: 10px;
}
.group-lg {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
/* ------ Navigation ------ */
header {
display: flex;
justify-content: space-between;
}
header div {
display: flex;
align-items: center;
}
/* ------ Form -----*/
form {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
form div {
display: flex;
flex-direction: column;
padding: 10px;
}
form button {
margin: 10px;
width: 100%;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet" type="text/css" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Pangolin&family=Lato&display=swap" rel="stylesheet" />
<header>
<div class="logo">Thinkfulbnb</div>
<nav>
<ul id="menu">
<li>Stay</li>
<li>About</li>
<li>Ideas</li>
<li>Host</li>
</ul>
</nav>
</header>
<main>
<!-- Stay -->
<section id="stay">
<h2>Find the perfect vacation rental</h2>
<!-- Create a form here -->
<form>
<div class="form-lg">
<label for="location">Location</label>
<input id="location" ; type="text" placeholder="Search Destination" required />
</div>
<div class="form-lg">
<label for="arrive">Arrive</label>
<input id="arrive" ; type="date" required />
</div>
<div class="form-lg">
<label for="depart">Depart</label>
<input id="depart" ; type="date" required />
</div>
<div class="form-lg">
<label for="type">Type</label>
<select name="type" id="type" size="1">
<option value="apartment">Apartment</option>
<option value="barn">Barn</option>
<option value="castle">Castle</option>
<option value="houseboat">Houseboat</option>
<option value="tiny-house">Tiny House</option>
<option value="yacht">Yacht</option>
<option value="yurt">Yurt</option>
</select>
</div>
<div>
<button type="submit" class="form-lg">Search</button>
</div>
</form>
</section>
<!-- About -->
<section id="about" class="alternate-background">
<h2>About</h2>
<div class="group-lg">
<div class="item">
<img src="vacation-rental-pool.png" alt="Thinkfulbnb - Vacation rental pool" />
</div>
<div class="item">
<img src="vacation-rental-inside-stone.png" alt="Thinkfulbnb - Vacation rental inside stone" />
</div>
<div class="item-double">
<p>
Fusce porta odio nunc, eget pretium massa rutrum sit amet. Etiam fringilla aliquam dapibus. Maecenas quis nisi sed turpis aliquam porttitor eget ut quam. Sed vel scelerisque ex. Duis in pharetra neque, at tempus lorem. Aenean mi magna, posuere at quam
sed, euismod gravida neque.
</p>
</div>
</div>
</section>
<!-- Ideas -->
<section id="ideas">
<h2 class="dark">Ideas</h2>
<div class="group-lg">
<div class="item">
<h3>Forest retreats</h3>
<img src="forest-retreat.png" alt="Thinkfulbnb - Forest retreat" />
</div>
<div class="item">
<h3>Beaches</h3>
<img src="beach-house.png" alt="Thinkfulbnb - Beach house" />
</div>
</div>
<div class="group-lg">
<div class="item">
<h3>Rustic cabins</h3>
<img src="cabin.png" alt="Thinkfulbnb - Cabin" />
</div>
<div class="item">
<h3>Pet-friendly</h3>
<img src="pet-friendly.png" alt="Thinkfulbnb - Pet-friendly" />
</div>
</div>
</section>
<!-- Host -->
<section id="host" class=" group-lg alternate-background">
<div class="item">
<h2>Want to Become a Thinkfulbnb Host?</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus molestie in est id efficitur. Sed hendrerit ut turpis quis dapibus. Nam sit amet iaculis lectus. Aliquam erat volutpat. Praesent rhoncus pellentesque eros in aliquet. Sed accumsan elit
lacus, id ultrices libero rutrum vitae.
</p>
<ul>
<li>Mauris in pellentesque ligula.</li>
<li>Sed accumsan elit lacus, id ultrices libero rutrum vitae.</li>
<li>Nunc vitae ex eget neque pellentesque porttitor.</li>
<li>Cras mollis lorem sagittis sapien imperdiet blandit. Vivamus.</li>
<li>
Donec vehicula ipsum nisi, eu consectetur leo feugiat et. Fusce eget hendrerit mauris.
</li>
</ul>
</div>
<div class="item">
<img src="become-a-host.png" alt="Thinkfulbnb - Become a host" />
</div>
</section>
</main>
<footer>
<p>© Thinkful</p>
</footer>
add this simple CSS code, and will hopefully solve that issue in desktop version.
form {
display: flex;
justify-content: center;
}
if you want, you can also add also this code on the mobile version, outside #media, which is also a good design on mobile!
justify-content docs link: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
body {
font-family: "Lato", sans-serif;
}
h2 {
font-size: clamp(14px, -1rem + 8.333vw, 26px);
color: #fff;
font-weight: 400;
margin: 0 10px 10px 10px;
text-align: center;
}
h3 {
font-size: 18px;
font-weight: 500;
}
p {
line-height: 1.5em;
margin: 0;
}
section {
padding: 20px;
}
section.alternate-background {
background-color: #00a699;
color: #fff;
}
main img {
width: 100%;
}
.dark {
color: black;
}
/* --- Groups & Items --- */
.group {
display: flex;
flex-direction: column;
}
.item {
flex: 1;
margin: 10px;
}
.item-double {
flex: 2;
}
/* ------- Navigation ------- */
header {
background-color: #ff385c;
padding: 20px 20px 0 20px;
text-align: center;
}
.logo {
font-family: "Pangolin", cursive;
font-size: clamp(24px, -1rem + 8.333vw, 72px);
color: #fff;
}
header nav {
display: flex;
justify-content: center;
}
header nav ul {
display: flex;
flex-wrap: wrap;
}
header nav ul li {
list-style-type: none;
}
header nav ul li a {
color: #fff;
text-decoration: none;
padding: 0 20px 0 0;
}
header nav ul li a:hover {
color: #bdbdbd;
text-decoration: none;
}
/* ------- Search Form ------- */
form {
border: 2px solid #ff385c;
padding: 10px;
/* what I added to center it */
display: flex;
justify-content: center;
}
form label {
font-weight: bold;
}
form select,
form input {
margin-bottom: 20px;
width: 180px;
}
form button {
background-color: #ff385c;
border: none;
color: #fff;
font-size: 24px;
padding: 15px;
width: 100%;
}
form div {
display: flex;
justify-content: space-between;
}
/* ------- Footer ------- */
footer {
background-color: #ff385c;
}
footer p {
color: #fff;
text-align: center;
padding: 20px;
}
/* ------- Media Query ------- */
#media all and (min-width: 480px) {
/* ------ General ------ */
p {
padding: 10px;
}
.group-lg {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
/* ------ Navigation ------ */
header {
display: flex;
justify-content: space-between;
}
header div {
display: flex;
align-items: center;
}
/* ------ Form -----*/
form {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
form div {
display: flex;
flex-direction: column;
padding: 10px;
}
form button {
margin: 10px;
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width initital-scale=1" />
<title>Vacation Rentals & Unique Homes</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet" type="text/css" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Pangolin&family=Lato&display=swap" rel="stylesheet" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<div class="logo">Thinkfulbnb</div>
<nav>
<ul id="menu">
<li>Stay</li>
<li>About</li>
<li>Ideas</li>
<li>Host</li>
</ul>
</nav>
</header>
<main>
<!-- Stay -->
<section id="stay">
<h2>Find the perfect vacation rental</h2>
<!-- Create a form here -->
<form>
<div class="form-lg">
<label for="location">Location</label>
<input id="location" ; type="text" placeholder="Search Destination" required />
</div>
<div class="form-lg">
<label for="arrive">Arrive</label>
<input id="arrive" ; type="date" required />
</div>
<div class="form-lg">
<label for="depart">Depart</label>
<input id="depart" ; type="date" required />
</div>
<div class="form-lg">
<label for="type">Type</label>
<select name="type" id="type" size="1">
<option value="apartment">Apartment</option>
<option value="barn">Barn</option>
<option value="castle">Castle</option>
<option value="houseboat">Houseboat</option>
<option value="tiny-house">Tiny House</option>
<option value="yacht">Yacht</option>
<option value="yurt">Yurt</option>
</select>
</div>
<div>
<button type="submit" class="form-lg">Search</button>
</div>
</form>
</section>
<!-- About -->
<section id="about" class="alternate-background">
<h2>About</h2>
<div class="group-lg">
<div class="item">
<img src="vacation-rental-pool.png" alt="Thinkfulbnb - Vacation rental pool" />
</div>
<div class="item">
<img src="vacation-rental-inside-stone.png" alt="Thinkfulbnb - Vacation rental inside stone" />
</div>
<div class="item-double">
<p>
Fusce porta odio nunc, eget pretium massa rutrum sit amet. Etiam fringilla aliquam dapibus. Maecenas quis nisi sed turpis aliquam porttitor eget ut quam. Sed vel scelerisque ex. Duis in pharetra neque, at tempus lorem. Aenean mi magna, posuere at quam
sed, euismod gravida neque.
</p>
</div>
</div>
</section>
<!-- Ideas -->
<section id="ideas">
<h2 class="dark">Ideas</h2>
<div class="group-lg">
<div class="item">
<h3>Forest retreats</h3>
<img src="forest-retreat.png" alt="Thinkfulbnb - Forest retreat" />
</div>
<div class="item">
<h3>Beaches</h3>
<img src="beach-house.png" alt="Thinkfulbnb - Beach house" />
</div>
</div>
<div class="group-lg">
<div class="item">
<h3>Rustic cabins</h3>
<img src="cabin.png" alt="Thinkfulbnb - Cabin" />
</div>
<div class="item">
<h3>Pet-friendly</h3>
<img src="pet-friendly.png" alt="Thinkfulbnb - Pet-friendly" />
</div>
</div>
</section>
<!-- Host -->
<section id="host" class="group-lg alternate-background">
<div class="item">
<h2>Want to Become a Thinkfulbnb Host?</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus molestie in est id efficitur. Sed hendrerit ut turpis quis dapibus. Nam sit amet iaculis lectus. Aliquam erat volutpat. Praesent rhoncus pellentesque eros in aliquet. Sed accumsan elit
lacus, id ultrices libero rutrum vitae.
</p>
<ul>
<li>Mauris in pellentesque ligula.</li>
<li>Sed accumsan elit lacus, id ultrices libero rutrum vitae.</li>
<li>Nunc vitae ex eget neque pellentesque porttitor.</li>
<li>
Cras mollis lorem sagittis sapien imperdiet blandit. Vivamus.
</li>
<li>
Donec vehicula ipsum nisi, eu consectetur leo feugiat et. Fusce eget hendrerit mauris.
</li>
</ul>
</div>
<div class="item">
<img src="become-a-host.png" alt="Thinkfulbnb - Become a host" />
</div>
</section>
</main>
<footer>
<p>© Thinkful</p>
</footer>
</body>
</html>
Basically, I am trying to centre the Contact Form and its Submit button. I've tried a couple CSS suggestions but they do not change it's placement, still being stuck to the left as the button is oddly to the far right of the form. All advice and tips will be appreciated. Just know I am still new to coding so my skills are quite limited as I'm still learning.
Here's a picture of the Contact Us page:
#font-face {
Src: url(customfont/Futuristic.ttf);
font-family: Future;
}
.Contact-box {
position: static;
transform: none;
}
h1 {
margin-bottom: 1rem;
color: red;
text-align: center;
font-size: 40px;
font-family: Future;
}
form {
display: inline-block;
flex-direction: column;
width: 24rem;
gap: 1rem;
margin-left: auto;
margin-right: auto;
}
input,
textarea {
padding: 1.5rem;
background: transparent;
border: 2px solid white;
border-radius: 15px;
width: 400px;
}
textarea {
height: 7rem;
}
button {
width: 8rem;
padding: 1rem;
cursor: pointer;
background: blue;
color: black;
}
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="logo">
<img src="https://via.placeholder.com/95" width="95" />
</div>
<div class="coolname">
<img src="https://via.placeholder.com/105" width="105" />
</div>
<nav>
<ul>
<li class="current-page">Home</li>
<li>About Us</li>
<li>Services</li>
<li>Consultation & Quotes</li>
<li>Contact Us</li>
<li>Client Referrals</li>
<li>Blog</li>
</ul>
</nav>
<br><br>
<h1>Contact Us!</h1>
<div class="Contact-box">
<br><br>
<form style="align:center;">
<input type="text" name="Name" placeholder="First and Last Name" required>
<input type="text" name="Email" placeholder="example#email.com" required>
<input type="text" name="Subject" placeholder="Subject Line" required>
<textarea name="Message" placeholder="Message" required></textarea>
<br><br>
<button type="submit">Send</button>
<br><br>
</form>
</div>
<footer>
<div class="bottom-content">
<h3>Geek Yourself Out</h3>
<p>To get some behind-the-scenes action to staying updated on the latest projects, check out these social media links! All follows, likes, comments, and shares are appreciated. </p>
<div class="socials">
<li>
<img src="facebook-box-fill.png" alt="Facebook" </li>
<li>
<img src="instagram-fill.png" alt="Instagram" </li>
</div>
</div>
<div class="bottom-page">
<p>copyright ©2022 Geek Yourself Out. Designed by Kimmy Vo</p>
</div>
</footer>
</body>
Just update your Contact-box class like this:
.Contact-box {
position: static;
transform: none;
display: flex;
justify-content: center;
align-items: center;
}
You had set the form to inline-block. I simply removed that and added center text alignment to center the button.
#font-face {
Src: url(customfont/Futuristic.ttf);
font-family: Future;
}
.Contact-box {
position: static;
transform: none;
}
h1 {
margin-bottom: 1rem;
color: red;
text-align: center;
font-size: 40px;
font-family: Future;
}
form {
/* display: inline-block; <--------------------------------------- HERE */
flex-direction: column;
width: 24rem;
gap: 1rem;
margin-left: auto;
margin-right: auto;
text-align: center; /* <----------------------------------------HERE */
}
input,
textarea {
padding: 1.5rem;
background: transparent;
border: 2px solid white;
border-radius: 15px;
width: 400px;
}
textarea {
height: 7rem;
}
button {
width: 8rem;
padding: 1rem;
cursor: pointer;
background: blue;
color: black;
}
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="logo">
<img src="https://via.placeholder.com/95" width="95" />
</div>
<div class="coolname">
<img src="https://via.placeholder.com/105" width="105" />
</div>
<nav>
<ul>
<li class="current-page">Home</li>
<li>About Us</li>
<li>Services</li>
<li>Consultation & Quotes</li>
<li>Contact Us</li>
<li>Client Referrals</li>
<li>Blog</li>
</ul>
</nav>
<br><br>
<h1>Contact Us!</h1>
<div class="Contact-box">
<br><br>
<form style="align:center;">
<input type="text" name="Name" placeholder="First and Last Name" required>
<input type="text" name="Email" placeholder="example#email.com" required>
<input type="text" name="Subject" placeholder="Subject Line" required>
<textarea name="Message" placeholder="Message" required></textarea>
<br><br>
<button type="submit">Send</button>
<br><br>
</form>
</div>
<footer>
<div class="bottom-content">
<h3>Geek Yourself Out</h3>
<p>To get some behind-the-scenes action to staying updated on the latest projects, check out these social media links! All follows, likes, comments, and shares are appreciated. </p>
<div class="socials">
<li>
<img src="facebook-box-fill.png" alt="Facebook" </li>
<li>
<img src="instagram-fill.png" alt="Instagram" </li>
</div>
</div>
<div class="bottom-page">
<p>copyright ©2022 Geek Yourself Out. Designed by Kimmy Vo</p>
</div>
</footer>
</body>
text-align: center; only has an effect on text, but it won't center blocks:
div {
max-width: 50%;
text-align: center;
background: yellow;
padding: 10px;
}
p {
text-align: center;
}
<div>Lorem ipsum dolor.</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.</p>
If you want to center blocks, you could use flexbox (see this guide) in combination with justify-content:
div {
width: 100%;
display: flex;
justify-content: center;
}
span {
width: 100px;
background: aqua;
display: block;
}
<div><span> center this </span></div>
So I think it's best to wrap the form in a full-width <div> and setting a maximal width on the form:
div.form-container {
display: flex;
justify-content: center;
}
form {
max-width: 50%
}
/* For smaller devices, 50% is too small. Doing this prevents the form from being "crushed": */
#media (max-width: 800px) {
form {
max-width: 90%;
}
}
And to center the button, you can simply do text-align: center;.
The last four images at the end of the page, I would like to display them horizontally. Without the caption, the images can be displayed horizontally with the display:flex property, but when I add a caption, the images will be displayed vertically. Sorry for the long code, but the last four images is what I need to be fixed.
body {
margin: 0;
box-sizing: border-box;
}
.header {
background-color: #696969;
padding-top: 2rem;
/* padding-top and margin (in body tag) were used to eliminate the white spaces around the background color */
padding-bottom: 1rem;
text-align: center;
}
.profile-image {
height: 8rem;
width: 8rem;
border-radius: 20rem;
border: 0.3rem solid white;
transition: transform 1s;
}
.profile-image:hover {
transform: rotate(360deg);
transition: transform 1s;
}
.header-links {
padding-top: 2rem;
}
.header-links a {
color: white;
text-decoration: none;
padding: 1.9rem;
text-transform: uppercase;
font-family: 'Bebas Neue', cursive;
font-size: 2rem;
}
.header-links a:hover {
color: orange;
}
.name-title {
color: white;
font-family: 'Lexend Zetta', sans-serif;
}
.wallpaper {
width: 100%;
}
main {
background-color: azure;
margin-left: 1rem;
}
.about {
border-left: 0.2rem solid red;
border-right: 0.2rem solid red;
border-radius: 0.4rem;
padding: 0 0.3rem;
display: inline;
/* h1 is a block elements, so this was added so that the border is only wrapped around the word, not the entire page length */
text-transform: uppercase;
font-family: 'Bebas Neue', cursive;
font-size: 2rem;
letter-spacing: 0.2rem;
}
.projects {
border-left: 0.2rem solid red;
border-right: 0.2rem solid red;
border-radius: 0.4rem;
padding: 0 0.3rem;
display: inline;
/* h1 is a block elements, so this was added so that the border is only wrapped around the word, not the entire page length */
text-transform: uppercase;
font-family: 'Bebas Neue', cursive;
font-size: 2rem;
letter-spacing: 0.2rem;
display: flex;
justify-content: center;
}
.margin-top {
margin-top: 8rem;
}
.align-center {
justify-content: space-evenly;
/*justify-content: space-evenly and display-flex were added to center everything and stop skill elements from overlapping. It was originally text-align: center - although it centered everything, skill elements overlapped */
display: flex;
}
.align-center-1 ul {
/* a new align-center-1 was created just for the purpose of adjusting margin-right */
justify-content: space-evenly;
display: flex;
margin-right: 4rem;
}
.boxes img {
height: 14rem;
width: 14rem;
border: 2px solid red;
}
.boxes {
justify-content: space-evenly;
display: flex;
margin: 1rem;
}
.center {
text-align: center;
}
<section>
<header>
<div class="header">
<figure class="name-title">
<img class="profile-image" src="https://gamerheadquarters.com/hub/avatar/fallout76tshirt.jpg" alt="profile photo">
<figcaption>
<h1>John Johnson</h1>
<h2>Front End Developer</h2>
</figcaption>
</figure>
<div class="header-links">
About
Projects
Contact
</div>
</div>
</header>
</section>
<section>
<img class="wallpaper" src="https://images.pexels.com/photos/691668/pexels-photo-691668.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="mountains">
</section>
<section>
<main>
<div class="align-center">
<h1 id="about" class="about">About</h1>
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Maecenas
tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales,
augue velit cursus nunc</p>
<div class="align-center">
<h2>Skills</h2>
</div>
<div class="align-center-1">
<ul>
<li>HTML & CSS</li>
<li>Javascript</li>
<li>React</li>
</ul>
</div>
<section>
<div class="margin-top">
</div>
<div class="align-center">
<h1 id="projects" class="projects">Projects</h1>
</div>
<div class="boxes">
<figure>
<img class="project1" src="https://www.woodstockvt.com/sites/default/files/styles/hero_x_large/public/media-images/snowmobiletrail.jpg?itok=8mrgv-Vw">
<figcaption class="center">Winter</figcaption>
<img class="project2" src="https://www.rd.com/wp-content/uploads/2017/07/01-birth-month-If-You-Were-Born-In-Summer-This-Is-What-We-Know-About-You_644740429-icemanphotos.jpg">
<figcaption class="center">Summer</figcaption>
<img class="project3" src="https://wdh01.azureedge.net/-/media/hidden-hearing/uk/shared/images/blog/xsounds-of-spring-banner.jpg,qrev=37A8,ala=en-GB.pagespeed.ic.mC7e7D9h5P.jpg">
<figcaption class="center">Spring</figcaption>
<img class="project4" src="https://www.wallpaperup.com/uploads/wallpapers/2016/05/07/945313/0094f0d5744c9910789d20dd3baebf18-700.jpg">
<figcaption class="center">Fall</figcaption>
</figure>
</div>
</main>
I think it's best practice to wrap <img> and <figcaption> both with individual <figure> tag. It also solves your issue without any CSS changes.
Updated Html code block
<div class="boxes">
<figure>
<img class="project1" src="https://www.woodstockvt.com/sites/default/files/styles/hero_x_large/public/media-images/snowmobiletrail.jpg?itok=8mrgv-Vw">
<figcaption class="center">Winter</figcaption>
</figure>
<figure>
<img class="project2" src="https://www.rd.com/wp-content/uploads/2017/07/01-birth-month-If-You-Were-Born-In-Summer-This-Is-What-We-Know-About-You_644740429-icemanphotos.jpg">
<figcaption class="center">Summer</figcaption>
</figure>
<figure>
<img class="project3" src="https://wdh01.azureedge.net/-/media/hidden-hearing/uk/shared/images/blog/xsounds-of-spring-banner.jpg,qrev=37A8,ala=en-GB.pagespeed.ic.mC7e7D9h5P.jpg">
<figcaption class="center">Spring</figcaption>
</figure>
<figure>
<img class="project4" src="https://www.wallpaperup.com/uploads/wallpapers/2016/05/07/945313/0094f0d5744c9910789d20dd3baebf18-700.jpg">
<figcaption class="center">Fall</figcaption>
</figure>
</div>
Try this. I hope this is your desired output.
final output snip
Try wrapping each <img> and <figcaption> element in another element (such as a <div>) and give the parent element (here <figure>) the display: flex; style.
From MDN - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure
A caption can be associated with the <figure> element by inserting a <figcaption> inside it (as the first or the last child). The first <figcaption> element found in the figure is presented as the figure's caption.
This implies that there should be a max of one <figcaption> per <figure>. So each <img> and <figcaption> should be in a separate <figure>.
I am trying to write a responsive footer. The footer items are separated by vertical bar (|). When we decrease the screen size, the footer items are wrapping to second line. Vertical bar (|) needs to be only between the footer items. Also facebook logo needs to be on the same line with the footer items for bigger screen sizes and on the center for smaller screen sizes. I used float:right but now they wrap from the beginning. How can I make them wrap from the end and hide vertical bar (|) if it is not between the footer items?
Here is my source code: https://jsfiddle.net/6kcdvteo/
body {
font-family: 'Calibri';
}
.text {
font-size: 1rem;
padding: 1rem 1rem 2rem 2rem;
color: #666666;
background-color: #f4f4f4;
}
.footer {
font-size: 0.85rem;
padding: 2rem 1rem 2rem 2rem;
background-color: #303741;
color: white;
}
.footer_company {
float: right;
padding-right: 2rem;
}
.footer_links {
font-size: 0.85rem;
background-color: #303741;
color: white;
padding-bottom: 2rem;
padding-right: 2.5rem;
}
.footer_links_span span {
background-color: #303741;
padding-right: 0.5rem;
float: right;
}
img {
height: 3rem;
width: 3rem;
}
.img {
padding-left: 1rem;
display: inline-block;
}
<div class="text">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac cursus felis, ut egestas lacus. Sed nec elementum ipsum. Morbi metus est, venenatis at libero pharetra, suscipit posuere dolor. Proin a auctor nulla, sed tincidunt tellus. Nullam bibendum
luctus elit, sed porttitor lectus varius in. Cras venenatis rutrum urna at ultrices. Sed in luctus ligula.
</p>
</div>
<div class="footer">
<span class="footer_company">© My Company Name</span>
</div>
<div class="footer_links">
<div class="img">
<img src="https://image.flaticon.com/icons/png/512/124/124010.png">
</div>
<div class="footer_links_span">
<span>Sed metus</span>
<span>|</span>
<span>Aenean ultricies</span>
<span>|</span>
<span>Praesent vitae</span>
<span>|</span>
<span>Donec auctor</span>
<span>|</span>
<span>Vestibulum lobortis</span>
</div>
</div>
As part of your question you can use this
<div class="footer_links">
<div class="img">
<img src="https://image.flaticon.com/icons/png/512/124/124010.png" alt="">
</div>
<div class="footer_links_span">
<span><b>|</b> Sed metus</span>
<span><b>|</b> Aenean ultricies</span>
<span><b>|</b> Praesent vitae</span>
<span><b>|</b> Donec auctor</span>
<span><b>|</b> Vestibulum lobortis <b>|</b></span>
</div>
</div>
with this css
/* container */
.footer_links {
padding: 0.75rem 1.5rem;
font-size: 0.85rem;
background-color: #303741;
color: white;
}
/* clearfix floats */
.footer_links::after {
display: block;
clear: both;
content: "";
}
/* facebook img */
.img {
float: left;
}
.img img {
width: 3rem;
height: auto;
border: 0;
}
/* links */
.footer_links_span {
float: right;
width: calc(100% - 3.5rem);
text-align: right;
}
.footer_links_span span {
display: inline-block;
white-space: nowrap;
background-color: #303741;
}
.footer_links b {
padding: 0 0.2rem;
font-weight: inherit;
}
.footer_links_span span:first-child b {
padding-left: 0;
}
.footer_links_span span:last-child b {
padding-right: 0;
}
Maybe it will help you in the right direction.
This will solve your problem, but it's Bootstrap :) All your responsive screenshotes are implemented in this code. No extra css for the layout required.
EDIT: The included style is for the width of the links block and for hiding the pipe symbool on small screens.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Page</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style type="text/css">
#footerSocial img { width: 3rem; margin-bottom: 0.5rem; }
#footerLinks > div { max-width: 350px; margin: auto; }
#footerLinks .dv { font-weight: inherit; display: none; }
#media (min-width: 576px) {
#footerSocial img { margin-bottom: 0; }
#footerLinks > div { max-width: none; padding-left: 100px; }
}
#media (min-width: 768px) {
#footerLinks > div { padding-left: 0; }
#footerLinks .dv { display: inline; }
}
</style>
</head>
<body>
<div class="container-fluid bg-secondary text-white">
<div class="row py-3">
<div class="col-12 text-center">
<h1 class="mb-2">Company Name</h1>
</div>
</div>
</div>
<div class="container">
<div class="row py-3">
<div class="col-12 ">
<h2>Article</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac cursus felis, ut egestas lacus.
Sed nec elementum ipsum. Morbi metus est, venenatis at libero pharetra, suscipit posuere dolor.
Proin a auctor nulla, sed tincidunt tellus. Nullam bibendum luctus elit, sed porttitor lectus
varius in. Cras venenatis rutrum urna at ultrices. Sed in luctus ligula.</p>
</div>
</div>
</div>
<div class="container-fluid bg-dark text-white">
<div class="row px-2 py-3">
<div id="footerSocial" class="col-12 col-sm-2 text-center text-sm-left">
<img class="img-fluid bg-white" src="https://image.flaticon.com/icons/png/512/124/124010.png" alt="FB">
</div>
<div id="footerLinks" class="col-12 col-sm-10 text-center text-sm-right">
<div>
© Company Name<br>
<span class="text-nowrap">Sed metus</span>
<span class="text-nowrap">| Aenean ultricies</span>
<span class="text-nowrap">| Praesent vitae</span>
<span class="text-nowrap"><b class="dv">| </b>Donec auctor</span>
<span class="text-nowrap">| Vestibulum lobortis</span>
</div>
</div>
</div>
</div>
</body>
</html>
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 4 years ago.
I am trying to create a space above "Affordable Professional Web Design" in the image below, so that it creates a space which is occupied by the image
However when I do so, it only seems to push the image down and leaves white space (indicated in red). I am trying to do this by applying margin-top although cannot find a resolution. Any ideas how to resolve?
Web Page Image
/* Global */
.container {
width: 80%;
margin: auto;
overflow;
hidden;
}
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
ul {
margin: 0;
padding: 0;
}
/* Header */
header {
background-color: #35424a;
border-bottom: orange solid;
min-height: 70px;
padding-top: 30px;
color: #ffffff;
}
header #branding {
float: left;
}
header #branding h1 {
margin: 0;
}
header li {
float: left;
list-style: none;
padding: 0 10px 0 10px;
}
header nav {
float: right;
text-transform: uppercase;
}
header a {
text-decoration: none;
color: #ffffff;
}
#highlight,
#current a {
color: #e8491d;
}
nav a:hover {
color: orange;
}
/* Showcase */
#showcase {
min-height: 400px;
background: url('../countryside.jpg') no-repeat;
background-size: cover;
text-align: center;
color: #ffffff;
}
#showcase h1 {
margin-top: 100px;
padding: 30px;
text-align: center;
color: #ffffff;
font-size: 50px;
}
#showcase p {
text-align: center;
color: #ffffff;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>My Website</title>
<link rel="stylesheet" href="styles.css" />
<meta name="viewport" width="device-width" />
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1><span id="highlight">Test</span> Web Design</h1>
</div>
<nav>
<ul>
<li id="current">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<h1>Affordable Professional Web Design</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget nulla molestie, dictum purus vel, dapibus turpis. Aliquam malesuada laoreet ante. Integer dictum ipsum sed arcu commodo laoreet ultrices ac est. Nullam sagittis eget arcu nec
mollis.
</p>
</div>
</section>
<section id="newsletter">
<div class="container">
<form>
<h2>Subscribe to our newsletter</h2>
<input type="email" placeholder="Enter email..." />
<button type="submit">Submit</button>
</form>
</div>
</section>
<section class="boxes">
<div class="container">
<div class="box">
<img src="HTML.png" alt="" />
<h3>HTML Markup</h3>
<p>In a orci nec nunc posuere placerat. Etiam imperdiet libero ac enim faucibus, ac commodo lacus mollis.</p>
</div>
<div class="box">
<img src="css.png" height="200px" alt="" />
<h3>CSS3 Styling</h3>
<p>In a orci nec nunc posuere placerat. Etiam imperdiet libero ac enim faucibus, ac commodo lacus mollis.</p>
</div>
<div class="box">
<img src="graphic_design.svg" height="300px" alt="" />
<h3>Graphic Design</h3>
<p>In a orci nec nunc posuere placerat. Etiam imperdiet libero ac enim faucibus, ac commodo lacus mollis.</p>
</div>
</div>
</section>
</body>
Instead of margin try using padding:
#showcase h1{
padding:100px 30px 30px 30px;
text-align:center;
color:#ffffff;
font-size:50px;
}