I need help with my contentbox. It was placed right below my header before but then I replaced the font of the title for my webpage in the header and for some reason this caused the content to fall down far below my header although this new font actually takes up even less space than the previous one and I have used the inspect-element on the webpage and nothing is in the way of content other than the box-<div>.
That content is inside of in my HTML so it wouldn’t make sense for the box-<div> to push content down, I think.
#content {
font-size: 16px;
display: inline-block;
margin-left: 30px;
font-family: "Times New Roman", Times;
text-align: center;
background-color: #1A1A1A;
margin: 30px;
width: 730px;
color: #F1F1F1;
float: right;
}
header {
margin: 0 auto;
color: #F1F1F1;
}
#titel {
float: right;
font-size: 70px;
font-family: 'Stalemate', cursive;
padding: 48px;
}
.box {
width: 1000px;
margin: auto;
}
<!DOCTYPE html>
<html>
<head>
<title> Page </title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href="https://fonts.googleapis.com/css?family=Stalemate" rel="stylesheet">
<meta charset="utf-8">
</head>
<body>
<div class="box">
<header>
<img src="#/#.png" alt="#">
<div id="titel">Page</div>
</header>
<aside>
<nav>
<ul>
<li>
#</li>
<li>
#</li>
<li>
#</li>
<li>
#</li>
<li>
#</li>
<li>
#</li>
</ul>
</nav>
</aside>
<div id="content">
<h1>Title</h1>
<p>Text.</p>
<h2>Title</h2>
<div id="img-wrapper">
<div class="img-box">
<img src="#/#.jpg" alt="#">
<p> <b>Text</b> </p>
</div>
<div class="img-box">
<img src="#/#.jpg" alt="#">
<p> <b>Text</b> </p>
</div>
<div class="img-box">
<img src="#/#.jpg" alt="#">
<p> <b>Text</b> </p>
<div>
</div>
</div>
</div>
</div>
</div>
<footer>©Text</footer>
</body>
</html>
Related
THIS IS A CAFE MENU PAGE
trying to make the "Est. 2020" text italicized by creating an established class selector and giving it the font-style property with the value italic.
THIS is the html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cafe Menu</title>
<link href="styles.css" rel="stylesheet"/>
</head>
<body>
<div class="menu">
<main>
<h1>CAMPER CAFE</h1>
<p>Est. 2020</p>
<section>
<h2>Coffee</h2>
<article class="item">
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
</article>
<article class="item">
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
</article>
<article class="item">
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
</article>
<article class="item">
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
</article>
<article class="item">
<p class="flavor">Mocha</p><p class="price">4.50</p>
</article>
</section>
<section>
<h2>Desserts</h2>
<article class="item">
<p class="dessert">Donut</p><p class="price">1.50</p>
</article>
<article class="item">
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
</article>
<article class="item">
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
</article>
<article class="item">
<p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
</article>
</section>
</main>
</div>
</body>
</html>
THIS IS THE CSS CODE
body {
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
font-family: sans-serif;
}
.p-established {
font-style: italic;
}
h1, h2, p {
text-align: center;
}
.menu {
width: 80%;
background-color: burlywood;
margin-left: auto;
margin-right: auto;
padding: 20px;
max-width: 500px;
}
h1, h2 {
font-family: Impact, serif;
}
.item p {
display: inline-block;
}
.flavor, .dessert {
text-align: left;
width: 75%;
}
.price {
text-align: right;
width: 25%
}
trying to make the "Est. 2020" text italicized by creating an established class selector and giving it the font-style property with the value italic.
You need to edit your HTML to add a class to <p>Est. 2020</p> element.
It needs to be <p class="established">Est. 2020</p> for you to be able to customize it with CSS. The moment it has the .established class then you can add
.established {
font-style: italic;
}
If you are working only with CSS and can't change the HTML code then let me know.
//////////////////////////
body {
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
font-family: sans-serif;
}
h1,
h2,
p {
text-align: center;
}
.menu {
width: 80%;
background-color: burlywood;
margin-left: auto;
margin-right: auto;
padding: 20px;
max-width: 500px;
}
h1,
h2 {
font-family: Impact, serif;
}
.item p {
display: inline-block;
}
.flavor,
.dessert {
text-align: left;
width: 75%;
}
.price {
text-align: right;
width: 25%
}
.established {
font-style: italic;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cafe Menu</title>
<link href="styles.css" rel="stylesheet" />
</head>
<body>
<div class="menu">
<main>
<h1>CAMPER CAFE</h1>
<p class="established">Est. 2020</p>
<section>
<h2>Coffee</h2>
<article class="item">
<p class="flavor">French Vanilla</p>
<p class="price">3.00</p>
</article>
<article class="item">
<p class="flavor">Caramel Macchiato</p>
<p class="price">3.75</p>
</article>
<article class="item">
<p class="flavor">Pumpkin Spice</p>
<p class="price">3.50</p>
</article>
<article class="item">
<p class="flavor">Hazelnut</p>
<p class="price">4.00</p>
</article>
<article class="item">
<p class="flavor">Mocha</p>
<p class="price">4.50</p>
</article>
</section>
<section>
<h2>Desserts</h2>
<article class="item">
<p class="dessert">Donut</p>
<p class="price">1.50</p>
</article>
<article class="item">
<p class="dessert">Cherry Pie</p>
<p class="price">2.75</p>
</article>
<article class="item">
<p class="dessert">Cheesecake</p>
<p class="price">3.00</p>
</article>
<article class="item">
<p class="dessert">Cinnamon Roll</p>
<p class="price">2.50</p>
</article>
</section>
</main>
</div>
</body>
</html>
Hello I'm completely new to HTML and I was trying to make a little project for myself so that I can learn a little bit more, but I wanted to ask something about how I can change the height of this text I'm trying to make it like Twitter and so that the tweets are separate from the others.
So that the "tweets" are separate like this
<!DOCTYPE html>
<html>
<head>
<title>My first web page!</title>
<style>
img {
width: 66px;
border-radius: 50px;
float: left;
margin-right: 10px;
}
.username {
font-weight: bold;
margin-top: 30px;
}
</style>
</head>
<body>
<img src="images/reyna.png" />
<p class="username">#Reyna</p>
<p>Yeni profil fotom nasıl?</p>
<img src="images/killjoy.jpg" />
<p class="username">#Killjoy</p>
<p>Profil foton çok tatlı!</p>
<img src="images/reyna.png" />
<p class="username">#Reyna</p>
<p>Teşşekür ederim seninkiside öyle!</p>
<img src="images/reyna.png" />
<p class="username">#Reyna</p>
<p>Merhabaa! Jett bu gün çok üzgün :(</p>
</body>
</html>
<html>
<head>
<title>My first web page!</title>
<style>
img {
width: 66px;
border-radius: 50px;
float: left;
margin-right: 10px;
}
.chat {
margin: 100px 0;
}
.username {
font-weight: bold;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="chat">
<img src="images/reyna.png" />
<p class="username">#Reyna</p>
<p>Yeni profil fotom nasıl?</p>
</div>
<div class="chat">
<img src="images/killjoy.jpg" />
<p class="username">#Killjoy</p>
<p>Profil foton çok tatlı!</p>
</div>
<div class="chat">
<img src="images/reyna.png" />
<p class="username">#Reyna</p>
<p>Teşşekür ederim seninkiside öyle!</p>
</div>
<div class="chat">
<img src="images/reyna.png" />
<p class="username">#Reyna</p>
<p>Merhabaa! Jett bu gün çok üzgün :(</p>
</div>
</body>
</html> ```
create a div that contain image and text and
give some margin or you want the last message to take all the remaining space?
I need to use absolute positioning to get these images, along with the text under them in rows of three. I am new to HTML/CSS and this requires me to use absolute or some other simple positioning method i cant use grid etc. I also need to make sure the news section stays where it is.
This is my HTML code -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Walton Hall Museum of Odds & Ends</title>
<link rel="stylesheet" href="styles.css"/>
<meta name="Tempany Johnson" content="zx813679"/>
</head>
<body>
<nav class="navigation">
<p>
Museum of Odds & Ends
Visit Us
Shop
Our History
</p>
</nav>
<div class="heading"><h1>Museum of Odds & Ends</h1>
<div class="subheading"><h2>Walton Hall, Milton Keynes</h2>
<div id="museumimages">
<a href="https://www.europeana.eu/en/item/440/item_UBMLSJFMKZCDOGRRMBW2UY5RDAL3V4IP">
<img src="1.jpeg" alt="Budapest Chainbridge 1907"/>
<p>Budapest Chainbridge 1907</p>
</a>
<a href="https://www.europeana.eu/en/item/369/_129030">
<img src="3.jpeg" alt="Three red-figure attic vases 5th centruy AD"/>
<p>Three red-figure attic vases</p>
</a>
<a href="https://www.europeana.eu/en/item/325/MG061">
<img src="4.jpeg" alt="Bronze Enamel Ring Pin Early Medieval"/>
<p>Bronze Enamel Ring Pin</p>
</a>
<a href="https://www.europeana.eu/en/item/9200271/BibliographicResource_3000058904600">
<img src="7.jpeg" alt="Glass-plate Slide by Erica Wagner"/>
<p>Glass-plate Slide</p>
</a>
<a href="https://www.europeana.eu/en/item/2058611/_kimbl_3cd913c5_b586_4dd7_813b_14708e134f5e">
<img src="10.jpeg" alt="Oilpainting of Ettingen Village by Alois Kron"/>
<p>Oilpainting of Ettingen Village</p>
</a>
<a href="https://www.europeana.eu/en/item/2058611/_kimbl_8a7b633f_8dfa_4bdb_ab43_5c7acb1d06ca">
<img src="11.jpeg" alt="Painting by Soja Feldmaier"/>
<p>Painting by Soja Feldmaier</p>
</a>
</div>
<article id=news>
<h2>News</h2>
<article>
<h2>News Entry Title</h2>
<h3>News Entry Date</h3>
<p>News Entry Text</p>
</article>
<article>
<h2>News Entry Title</h2>
<h3>News Entry Date</h3>
<p>News Entry Text</p>
</article>
</article>
</body>
</html>
This is my CSS file
body {
margin: 0;
padding: 0;
font-family: Times, "Times New Roman", Georgia, serif;
font-size: 14px;
color: #333333;
width: 1024px
}
.navigation {
background-color: #333333;
color: #fefefe;
width: 1024px;
font-size: 120%;
border-bottom: 3px solid #ff0000;
}
img {
width:200px;
height:100px;
}
#news {
position: absolute; right: 25px; top: 220px;
text-align: left;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
}
#museumimages {
position: absolute; left: 24px; top: 200px;
}
The easiest technique to have a grid-like display is using display: inline-block.
You can adapt it your case, but the fundamentals are here: https://jsfiddle.net/y6hgnv4f/1/
so as you can see I have used a background image for my Container but it isn't filling up the container fully, I have tried the object-fit property but it isn't working, the image is still sticking on the left side of the container, what should I do.
here is the screenshot for the image (1st problem): https://imgur.com/puw3bDN
now about the second problem, the image inside (.feature2::before) is exceeding the container, I have tried using width but it is not working.
here is the link to screenshot: https://imgur.com/YPTelhD
#import url("https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght#400;600&display=swap");
* {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
body {
height: 100vh;
font-family: "Bai Jamjuree", sans-serif;
display: flex;
font-size: 18px;
}
.primary {
color: #4a4f53;
}
.neutral {
color: #b3b7b8;
}
.container {
background: url(./media/bg-header-mobile.png) no-repeat top;
object-fit: cover;
width: 23.438rem;
height: 325.313rem;
border: 1px red solid;
margin: 0 auto;
padding: 9.375rem 2rem;
}
.main_logo {
opacity: 85%;
width: 8.5rem;
margin-top: 1.59rem;
}
.main_heading {
font-size: 1.9rem;
line-height: 1.35;
margin-top: 3.5rem;
width: 100%;
margin-bottom: 1.8rem;
}
.main_content {
margin-bottom: 3.5rem;
}
.button {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
text-align: center;
}
.ios {
background: #26bba5;
color: white;
font-size: 700;
padding: 15px 10px;
border-radius: 50px;
border-bottom: 3px #219f8a solid;
box-shadow: 0 2px 10px #26bba5;
margin-bottom: 1.5rem;
}
.mac {
background: #6174ff;
color: white;
font-size: 700;
padding: 15px 10px;
border-radius: 50px;
border-bottom: 3px #4f62da solid;
box-shadow: 0 2px 5px #6174ff;
}
.feature1 {
margin-top: 12rem;
}
.feature1_dis {
margin-top: 1.8rem;
}
.feature2::before {
content: url(./media/image-computer.png);
border: 1px red solid;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=default-width, initial-scale=1">
<meta charset="UTF-8">
<meta lang="en">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<header>
<img src="media/logo.svg" class="main_logo"/>
<h1 class="main_heading primary">
A history of everything you copy
</h1>
<article class="main_content neutral">Clipbord allows you to track and organize everything you copy instantly access your clipboard on all your devices.</article>
<div class="button">
<botton class="ios">
Download for iOS
</botton>
<botton class="mac">
Download for Mac
</botton>
</div>
</header>
<main>
<div></div>
<section class="features">
<h1 class="feature1 primary">Keep track of your snippets</h1>
<article class="feature1_dis neutral">Clipboard instantly stores any items you copy in the cloud, meaning you can access your snippets immediately on all your devices. Our Mac and iOS apps will help you organize everything.</article>
<h1 class="feature2 primary">
Quick Search
</h1>
<article class="feature2_dis neutral">
Easily search your snippets by content, category, web address, application, and more.
</article>
<h1 class="feature3 primary">
iCloud Sync
</h1>
<article class="feature3_dis neutral">
Instantly saves and syncs snippets across all your devices.
</article>
<h1 class="feature4 primary">
Complete History
</h1>
<article class="feature4_dis neutral">
Retrieve any snippets from the first moment you started using the app.
</article>
<h1 class="feature5 primary">
Access Clipboard Anywhere
</h1>
<aritical class="feature5_dis neutral">
Whether you're on the go, or at your computer, you can access all your Clipboard snippets in a few simple clicks.
</aritical>
<h1 class="feature6 primary">
Supercharge your workflow
</h1>
<article class="feature6_dis neutral">
We've got the tools to boost your produtivity.
</article>
<h1 class="feature7 primary">
Create blacklists
</h1>
<article class="feature7_dis neutral">
Ensure sensitive information never makes its way to your clipboard by excluding certain sources.
</article>
<h1 class="feature8 primary">
Plain text snippets
</h1>
<article class="feature8_dis neutral">
Remove unwanted formatting from copied text for a consistent look.
</article>
<h1 class="feature9 primary">
Sneak preview
</h1>
<article class="feature9_dis neutral">
Quick preview of all snippets on your Clipboard for easy access.
</article>
</section>
<div class="companies">
<ul class="comp">
<li class="com">
<a href="google.com">
<img class="white"src="./media/logo-google.png" alt="google.com">
</a>
</li>
<li class="com">
<a href="IBM.com">
<img class="white"src="./media/logo-ibm.png" alt="IBM.com">
</a>
</li>
<li class="com">
<a href="Microsoft.com">
<img class="white"src="./media/logo-microsoft.png" alt="Microsoft.com">
</a>
</li>
<li class="com">
<a href="https://www.hpe.com/us/en/home.html">
<img class="white"src="./media/logo-hp.png" alt="https://www.hpe.com/us/en/home.html">
</a>
</li>
<li class"com">
<a href="https://en.wikipedia.org/wiki/Vector_graphics">
<img class="white" src="./media/logo-vector-graphics.png" alt="vector graphics">
</a>
</li>
</ul>
</div>
<div class="lower_section">
<section class="lower_section">
<h1 class="lower_heading primary">Clipboard for iOS and Mac OS</h1>
<article class="lower_content neutral">
Available for free on the App Store Download for Mac or iOS, sync with iCloud and you're ready to start adding to your clipboard.
</article>
<div class="button">
<botton class="ios">
Download for iOS
</botton>
<botton class="mac">
Download for Mac
</botton>
</div>
</section>
</div>
</main>
<footer>
<div class="foot">
<img src="media/logo.svg"
alt="logo">
<nav class="navigation_bar">
<ul class="nav_list">
<li class="items">FAQs</li>
<li class="items">Contact Us</li>
<li class="items">Privacy Policy</li>
<li class="items">Press Kit</li>
<li class="items">Install Guide </li>
</ul>
</nav>
</div>
<div class="media">
<ul class="media-list">
<li class="media_items primary">
<a href="facebook.com">
<img src="./media/icon-facebook.svg" alt="facebook_icon">
</a>
</li>
<li class="media_items primary">
<a href="twitter.com">
<img src="./media/icon-twitter.svg" alt="twitter-icon">
</a>
</li>
<li class="media_items primary">
<a href="instagram.com">
<img src="./media/icon-instagram.svg" alt="instagram-icon">
</a>
</li>
</ul>
</div>
</footer>
</div>
</body>
</html>
in your .container you can use background-size: cover to fill
#import url("https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght#400;600&display=swap");
* {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
body {
height: 100vh;
font-family: "Bai Jamjuree", sans-serif;
display: flex;
font-size: 18px;
}
.primary {
color: #4a4f53;
}
.neutral {
color: #b3b7b8;
}
.container {
background: url(https://images.unsplash.com/photo-1508138221679-760a23a2285b?ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8cmFuZG9tfGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&w=1000&q=80) no-repeat top;
object-fit: cover;
width: 23.438rem;
height: 325.313rem;
border: 1px red solid;
margin: 0 auto;
padding: 9.375rem 2rem;
background-size: cover;
}
.main_logo {
opacity: 85%;
width: 8.5rem;
margin-top: 1.59rem;
}
.main_heading {
font-size: 1.9rem;
line-height: 1.35;
margin-top: 3.5rem;
width: 100%;
margin-bottom: 1.8rem;
}
.main_content {
margin-bottom: 3.5rem;
}
.button {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
text-align: center;
}
.ios {
background: #26bba5;
color: white;
font-size: 700;
padding: 15px 10px;
border-radius: 50px;
border-bottom: 3px #219f8a solid;
box-shadow: 0 2px 10px #26bba5;
margin-bottom: 1.5rem;
}
.mac {
background: #6174ff;
color: white;
font-size: 700;
padding: 15px 10px;
border-radius: 50px;
border-bottom: 3px #4f62da solid;
box-shadow: 0 2px 5px #6174ff;
}
.feature1 {
margin-top: 12rem;
}
.feature1_dis {
margin-top: 1.8rem;
}
.feature2::before {
content: url(./media/image-computer.png);
border: 1px red solid;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=default-width, initial-scale=1">
<meta charset="UTF-8">
<meta lang="en">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<header>
<img src="media/logo.svg" class="main_logo" />
<h1 class="main_heading primary">
A history of everything you copy
</h1>
<article class="main_content neutral">Clipbord allows you to track and organize everything you copy instantly access your clipboard on all your devices.</article>
<div class="button">
<botton class="ios">
Download for iOS
</botton>
<botton class="mac">
Download for Mac
</botton>
</div>
</header>
<main>
<div></div>
<section class="features">
<h1 class="feature1 primary">Keep track of your snippets</h1>
<article class="feature1_dis neutral">Clipboard instantly stores any items you copy in the cloud, meaning you can access your snippets immediately on all your devices. Our Mac and iOS apps will help you organize everything.</article>
<h1 class="feature2 primary">
Quick Search
</h1>
<article class="feature2_dis neutral">
Easily search your snippets by content, category, web address, application, and more.
</article>
<h1 class="feature3 primary">
iCloud Sync
</h1>
<article class="feature3_dis neutral">
Instantly saves and syncs snippets across all your devices.
</article>
<h1 class="feature4 primary">
Complete History
</h1>
<article class="feature4_dis neutral">
Retrieve any snippets from the first moment you started using the app.
</article>
<h1 class="feature5 primary">
Access Clipboard Anywhere
</h1>
<aritical class="feature5_dis neutral">
Whether you're on the go, or at your computer, you can access all your Clipboard snippets in a few simple clicks.
</aritical>
<h1 class="feature6 primary">
Supercharge your workflow
</h1>
<article class="feature6_dis neutral">
We've got the tools to boost your produtivity.
</article>
<h1 class="feature7 primary">
Create blacklists
</h1>
<article class="feature7_dis neutral">
Ensure sensitive information never makes its way to your clipboard by excluding certain sources.
</article>
<h1 class="feature8 primary">
Plain text snippets
</h1>
<article class="feature8_dis neutral">
Remove unwanted formatting from copied text for a consistent look.
</article>
<h1 class="feature9 primary">
Sneak preview
</h1>
<article class="feature9_dis neutral">
Quick preview of all snippets on your Clipboard for easy access.
</article>
</section>
<div class="companies">
<ul class="comp">
<li class="com">
<a href="google.com">
<img class="white" src="./media/logo-google.png" alt="google.com">
</a>
</li>
<li class="com">
<a href="IBM.com">
<img class="white" src="./media/logo-ibm.png" alt="IBM.com">
</a>
</li>
<li class="com">
<a href="Microsoft.com">
<img class="white" src="./media/logo-microsoft.png" alt="Microsoft.com">
</a>
</li>
<li class="com">
<a href="https://www.hpe.com/us/en/home.html">
<img class="white" src="./media/logo-hp.png" alt="https://www.hpe.com/us/en/home.html">
</a>
</li>
<li class "com">
<a href="https://en.wikipedia.org/wiki/Vector_graphics">
<img class="white" src="./media/logo-vector-graphics.png" alt="vector graphics">
</a>
</li>
</ul>
</div>
<div class="lower_section">
<section class="lower_section">
<h1 class="lower_heading primary">Clipboard for iOS and Mac OS</h1>
<article class="lower_content neutral">
Available for free on the App Store Download for Mac or iOS, sync with iCloud and you're ready to start adding to your clipboard.
</article>
<div class="button">
<botton class="ios">
Download for iOS
</botton>
<botton class="mac">
Download for Mac
</botton>
</div>
</section>
</div>
</main>
<footer>
<div class="foot">
<img src="media/logo.svg" alt="logo">
<nav class="navigation_bar">
<ul class="nav_list">
<li class="items">FAQs</li>
<li class="items">Contact Us</li>
<li class="items">Privacy Policy</li>
<li class="items">Press Kit</li>
<li class="items">Install Guide </li>
</ul>
</nav>
</div>
<div class="media">
<ul class="media-list">
<li class="media_items primary">
<a href="facebook.com">
<img src="./media/icon-facebook.svg" alt="facebook_icon">
</a>
</li>
<li class="media_items primary">
<a href="twitter.com">
<img src="./media/icon-twitter.svg" alt="twitter-icon">
</a>
</li>
<li class="media_items primary">
<a href="instagram.com">
<img src="./media/icon-instagram.svg" alt="instagram-icon">
</a>
</li>
</ul>
</div>
</footer>
</div>
</body>
</html>
background-size:cover; background-repeat:no-repeat;
I'm trying to learn responsive CSS but having difficulty with some basic css design. I've created a fixed navbar as you may be able to see in the code below. But the problem i'm facing is that i'm not able to properly align content below it. The content is getting overlapped by the navbar. Can you suggest an appropriate CSS fix and not a workaround like adding empty divs with fixed heights? Here is the code:
*{
box-sizing: border-box;
}
body{
margin:0px;
padding: 0px;
background-color: darkgrey;
}
.title-bar{
position:fixed;
margin-top:0px;
z-index: 100;
opacity: 1;
background-color:white;
width: 100%;
height: 100px;
border-bottom: solid 4px dodgerblue;
}
.page-container{
padding: 0px;
}
.menu-options{
list-style-type:none;
}
.menu-options li{
display: inline;
padding: 10px;
}
.menu-options li:hover{
background-color: deepskyblue;
}
.menu-options li a{
color: black;
text-decoration:none;
}
.clear20{
height: 40px;
clear: both;
}
.clear10{
height: 20px;
clear: both;
}
.display-bar-1{
background-color: deepskyblue;
height: 200px;
padding:40px;
position: relative;
}
html {
font-family: "Lucida Sans", sans-serif;
}
.caps {
text-transform: uppercase;
}
.register_button{
text-align:center;
padding-top:20px;
padding-bottom:10px;
width: 200px;
height: 70px;
border: solid 3px white;
font-style:bold;
font-size:14pt;
}
.register_button:hover{
background-color:navajowhite;
color: white;
cursor:pointer;
border-color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="responsive.css" rel="stylesheet">
</head>
<body>
<div class="page-container">
<div class="title-bar">
<table width="100%">
<tr>
<td><h1> Multirater Surveys </h1></td>
<td>
<ul class="menu-options">
<li> Home </li>
<li> How It Works </li>
<li> Features </li>
<li> Surveys </li>
<li> Plans and Pricings </li>
<li> Webinars </li>
<li> Blog </li>
</ul>
</td>
</tr>
</table>
</div>
<div class="display-bar-1">
<div class="row">
<div class="" style="width:60%;float:left;font-style:bold;font-size:22pt;color:white;padding:10px;">
World Class Service <br>
More Than 100 Clients
</div>
<div class="" style="padding:15px;float:left;width:40%;">
<div class="register_button" id="register"> <a style="text-decoration:none;color:black;" href="#"> Register Now </a> </div>
</div>
</div>
</div>
<div class="display-bar-2">
<div>
<h1> Some random block of texts </h1>
<p> Hello world how are you ? what is going on? </p>
</div>
</div>
<div class="display-bar-1">
<div class="row">
<div class="" style="width:60%;float:left;font-style:bold;font-size:22pt;color:white;padding:10px;">
World Class Service <br>
More Than 100 Clients
</div>
<div class="" style="padding:15px;float:left;width:40%;">
<div class="register_button" id="register"> <a style="text-decoration:none;color:black;" href="#"> Register Now </a> </div>
</div>
</div>
</div>
<div class="display-bar-2">
<div>
<h1> Some random block of texts </h1>
<p> Hello world how are you ? what is going on? </p>
</div>
</div>
<div class="display-bar-1">
<div class="row">
<div class="" style="width:60%;float:left;font-style:bold;font-size:22pt;color:white;padding:10px;">
World Class Service <br>
More Than 100 Clients
</div>
<div class="" style="padding:15px;float:left;width:40%;">
<div class="register_button" id="register"> <a style="text-decoration:none;color:black;" href="#"> Register Now </a> </div>
</div>
</div>
</div>
<div class="display-bar-2">
<div>
<h1> Some random block of texts </h1>
<p> Hello world how are you ? what is going on? </p>
</div>
</div>
<div class="display-bar-2">
<div>
<h1> Some random block of texts </h1>
<p> Hello world how are you ? what is going on? </p>
</div>
</div>
</div>
<input type="text" class="caps"/>
<script>
window.onload = function(){
document.getElementById("register").onclick = function(){
window.location = "https://www.google.com";
}
}
</script>
</body>
</html>
`responsive.html`
The appropriate way is to add padding-top in your div, the same padding as the height of your fixed header.
I made a few changes to your responsive.css file and it worked out for me.
Here are the changes that I made:
in title-bar class
.title-bar{
position:fixed;
top: 0;
z-index: 100;
opacity: 1;
background-color:white;
width: 100%;
height: 100px;
border-bottom: solid 4px dodgerblue;
}
I changed margin-top:0px; to top: 0;
Why? To Set the top edge of the fixed positioned navbar to 0 below the top edge of its nearest positioned ancestor as told here
and in the display-bar-1
.display-bar-1{
background-color: deepskyblue;
height: 200px;
margin-top: 100px;
padding:40px;
position: relative;
}
I added margin-top: 100px;
Why? Your navbar had a height of 100px. So i gave a margin top of 100px to your display-bar-1 class.
Hope this resolves your issue.
Your navbar has a height of 100px. So you need to start with your divs 100px below.
Add to the first div after the navbar this:
style="top:100px;"
Then it should work. It would look like this:
<div class="display-bar-1" style="top:100px;">
<div class="row">
<div class="" style="width:60%;float:left;font-style:bold;font-size:22pt;color:white;padding:10px;">
World Class Service <br>
More Than 100 Clients
</div>
<div class="" style="padding:15px;float:left;width:40%;">
<div class="register_button" id="register"> <a style="text-decoration:none;color:black;" href="#"> Register Now </a> </div>
</div>
</div>
</div>
Other ways would be to create an own css class for the first div after the navbar. Then you could also work with
padding-top:100px;
or
margin-top:100px;
*{
box-sizing: border-box;
}
body{
margin:0px;
padding: 0px;
background-color: darkgrey;
}
.title-bar{
position:fixed;
margin-top:0px;
z-index: 100;
opacity: 1;
background-color:white;
width: 100%;
height: 100px;
border-bottom: solid 4px dodgerblue;
}
.page-container{
padding: 0px;
}
.menu-options{
list-style-type:none;
}
.menu-options li{
display: inline;
padding: 10px;
}
.menu-options li:hover{
background-color: deepskyblue;
}
.menu-options li a{
color: black;
text-decoration:none;
}
.clear20{
height: 40px;
clear: both;
}
.clear10{
height: 20px;
clear: both;
}
.display-bar-1{
background-color: deepskyblue;
height: 200px;
padding:40px;
position: relative;
}
html {
font-family: "Lucida Sans", sans-serif;
}
.caps {
text-transform: uppercase;
}
.register_button{
text-align:center;
padding-top:20px;
padding-bottom:10px;
width: 200px;
height: 70px;
border: solid 3px white;
font-style:bold;
font-size:14pt;
}
.register_button:hover{
background-color:navajowhite;
color: white;
cursor:pointer;
border-color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="responsive.css" rel="stylesheet">
</head>
<body>
<div class="page-container">
<div class="title-bar">
<table width="100%">
<tr>
<td><h1> Multirater Surveys </h1></td>
<td>
<ul class="menu-options">
<li> Home </li>
<li> How It Works </li>
<li> Features </li>
<li> Surveys </li>
<li> Plans and Pricings </li>
<li> Webinars </li>
<li> Blog </li>
</ul>
</td>
</tr>
</table>
</div>
<div class="display-bar-1" style="top:100px;">
<div class="row">
<div class="" style="width:60%;float:left;font-style:bold;font-size:22pt;color:white;padding:10px;">
World Class Service <br>
More Than 100 Clients
</div>
<div class="" style="padding:15px;float:left;width:40%;">
<div class="register_button" id="register"> <a style="text-decoration:none;color:black;" href="#"> Register Now </a> </div>
</div>
</div>
</div>
<div class="display-bar-2">
<div>
<h1> Some random block of texts </h1>
<p> Hello world how are you ? what is going on? </p>
</div>
</div>
<div class="display-bar-1">
<div class="row">
<div class="" style="width:60%;float:left;font-style:bold;font-size:22pt;color:white;padding:10px;">
World Class Service <br>
More Than 100 Clients
</div>
<div class="" style="padding:15px;float:left;width:40%;">
<div class="register_button" id="register"> <a style="text-decoration:none;color:black;" href="#"> Register Now </a> </div>
</div>
</div>
</div>
<div class="display-bar-2">
<div>
<h1> Some random block of texts </h1>
<p> Hello world how are you ? what is going on? </p>
</div>
</div>
<div class="display-bar-1">
<div class="row">
<div class="" style="width:60%;float:left;font-style:bold;font-size:22pt;color:white;padding:10px;">
World Class Service <br>
More Than 100 Clients
</div>
<div class="" style="padding:15px;float:left;width:40%;">
<div class="register_button" id="register"> <a style="text-decoration:none;color:black;" href="#"> Register Now </a> </div>
</div>
</div>
</div>
<div class="display-bar-2">
<div>
<h1> Some random block of texts </h1>
<p> Hello world how are you ? what is going on? </p>
</div>
</div>
<div class="display-bar-2">
<div>
<h1> Some random block of texts </h1>
<p> Hello world how are you ? what is going on? </p>
</div>
</div>
</div>
<input type="text" class="caps"/>
<script>
window.onload = function(){
document.getElementById("register").onclick = function(){
window.location = "https://www.google.com";
}
}
</script>
</body>
</html>