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;
Related
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/
I have a grid layout. I'm trying to apply an image to the box on the left. It only fills 3 quarters of the box and leaves space at the bottom. Is there any way I can get the image to fill the entire div and be responsive as it should. I initially wanted to add a slideshow which was the same problem. Also, my other issue is the 4 smaller boxes. The text falls outside of the boxes when making the screen smaller. Hoping someone has positive feedback for me :)
I tried to extend the height of the image but obviously distorts the image
<!-- run local host
1) cd and drag drop file
2) type: python -m SimpleHTTPServer 8080
3) browser type: http://localhost8080
-->
<!-- to make a comment: cmd and / -->
<!-- to shift a section cmd + ] on mac or CTRL + ] on wondows -->
.grid {
display: grid;
grid-template-columns: 6fr 2fr 2fr;
grid-template-rows: 200px 200px 400px;
grid-gap: 20px;
grid-template-areas:
"one two three"
"one four five"
}
.grid > article {
border: 1px solid #ccc;
box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.3);
}
.grid > article img {
max-width: 100%;
}
.text {
padding: 0 20px 20px;
}
.text > button {
background: gray;
border: 0;
color: white;
padding: 10px;
width: 100%;
}
.text > h3 > {
text-align: center;
}
<!-- wrapper start -->
<!-- header start -->
<div class="wrapper">
<div class="header">
<!-- nav bar -->
<ul class="nav-container">
<li>Home</li>
<li>About</li>
<li>Articles</li>
<li>Contact</li>
<li>Login</li>
</ul>
<!-- nav bar -->
<header id="top" class="top-image">
<h1 style="color: white">Code To Program</h1>
<p style="color: white">Web Design | SEO | Tutorials</p>
Contact Us
</header>
</div>
<!-- header finish -->
<!-- header 2 start -->
<div class="header-2">
<h2 style="color: lightslategrey; font-size: 3rem; text-align: center">Our Services</h2>
</div>
<!-- header 2 finish -->
</style>
<div class="container">
<main class="grid">
<article class="one" style="height: 420px">
<img class="imgs" src="img/pdx.jpg">
</article>
<article class="two">
<div class="text">
<h3>2 Web Design</h3>
<figure>
<img src="img/seo.png" alt="Smiley face" height="72" width="72">
</figure>
</div>
</article>
<article class="three">
<div class="text">
<h3>3 SEO</h3>
<p>Dramatically engage seamlessly visualize quality intellectual capital.</p>
<button>Read more</button>
</div>
</article>
</br>
<article class="four">
<div class="text">
<h3>4 Blog</h3>
<p>Dramatically engage seamlessly visualize quality intellectual capital.</p>
<button>Just do it...</button>
</div>
</article>
<article class="five">
<div class="text">
<h3>Tutoring</h3>
<p>Dramatically engage seamlessly visualize quality intellectual capital.</p>
<button>Here's why</button>
</div>
</article>
</main>
</div>
Back to top »
<script src="accordian.js"></script>
<footer style="background-color: brown">
<p>This is the footer</p>
<p>© 2019 Desmond Dallas</p>
</footer>
You are looking for object-fit.
This will solve your problem:
.grid > article img {
height: 100%;
width: 100%;
object-fit: cover;
display: block;
}
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>
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>
Here are my CSS and HTML codes respectively :
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #55AAFF;
}
li {
float: left;
}
li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #1D72C7;
}
.indextext
{
font-family: roboto, arial, calibri, sans-serif;
text-align: center;
padding: 50px 150px 0px 150px;
}
<html>
<head>
<title>Welcome - Bookmark Designs - Web Design Solutions</title>
<link href="C:\Users\Raj\Desktop\New folder\homepage_css.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="logoimg">
<img src="" </img>
</div>
<div class="nav"
<ul>
<li id=1>Home</li>
<li id=2>Portfolio</li>
<li id=3>Prices</li>
<li id=4>Contact Us</li>
<li id=5>About Us</li>
</ul>
</div>
<div class="mainimg">
<img src="" />
</div>
<div class="indextext">
<p>TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText</p>
</div>
I've provided a link to the output below. Also, how do I stop those bullet points from appearing?
I've tried long and hard and racked my limited knowledge to what may be causing this and did a lot of trial and error but most things I tried kept worsening things.
Thank you very much.
<div class="logoimg">
<img src="">
</div>
<div class="nav">
<ul>
<li id=1>Home</li>
<li id=2>Portfolio</li>
<li id=3>Prices</li>
<li id=4>Contact Us</li>
<li id=5>About Us</li>
</ul>
</div>
<div class="mainimg">
<img src="">
</div>
<div class="indextext">
<p>TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText</p>
</div>
img tags don't have closing </img>
You were missing a closing > on a div
Put your id attribute values inside quotes
Fiddle: https://jsfiddle.net/zhtq9jn9/1/