I would need your help to solve this issue.
I am developing a personal project and I created a classic index.html file linked with an external index.css.
I used the css grid to create different inner sections, each page having a different inner grid structure.
So here it is how my index page structure is like:
-top left: div with a logo. The logo is itself an anchor link which redirects to the homepage/landing page;
-top right, next to the logo: div with a navbar, with 3/4 links (about, contact, etc.)
-main page (center): below the two upper divs, I have a main area, covering the whole screen size with some text;
-second page (below center): below the main page, with images and text (you need to scroll down the page);
-bottom: footer.
Now my intention would be to put a background-image which covers only the first 3 sections (logo, navbar and main area), leaving the other areas on their own. They will have a different color and content.
Important is that the background-image should scroll down along with the page and should not remain sticky and fixed in its own position. It is supposed to look like as if it were the background-image of the main page in the center, but it is not.
If I put the background-image only in the main page, then the top divs are imageless and I want the background-image to cover the two upper divs too. If i put the same image into these 3 main divs individually, then I risk the images to overlay and it is quite ugly to see and hard to manage when resizing and with media queries.
Now I am using the css-grid to make it responsive and just plain css. Is there a way to create this type of effect with just css or do I need mandatorily a css framework (bootstrap, etc) or to change the structure differently?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="grid-container">
<!-- LOGO AREA-->
<div class="logo">
<div class="logo">
<img id="logo" src="pic/white_logo.png" alt="logo">
</div>
</div>
<!-- NAVBAR AREA-->
<div class="navbar">
<ul class="nav-list">
<a class="list" href="about.html"><li>about</li></a>
<a class="list" href=""><li>skills</li></a>
<a class="list" href=""><li>contact</li></a>
</ul>
</div>
<!-- MAIN PAGE AREA-->
<div class="main-page">
<h2>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem IpsumLorem Ipsum</h2>
<a id="learn-more-button" href="">LEARN MORE</a>
</div>
<!-- SECOND PAGE -->
<div class="second-page"></div>
<!-- FOOTER -->
<div class="footer"></div>
</div>
</body>
</html>
CSS
* {
margin:0;
padding:0;
}
body {
font-family: Montserrat;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
color:white;
background-image: url(pic/background1.jpg);
}
.grid-container {
display: grid;
grid-template-columns: 0.6fr 1.9fr;
height:150vh;
grid-template-rows: 0.5fr 2.5fr 1.3fr 0.4fr;
gap: 0px 0px;
grid-template-areas:
"logo navbar"
"main-page main-page"
"second-page second-page"
"footer footer";
}
/* LOGO AREA*/
.logo {
grid-area: logo;
}
#logo {
padding:2rem 0 0 2rem;
}
/* NAVBAR AREA*/
.navbar {
grid-area: navbar;
padding-left: 25rem;
padding-top:2.5rem;
}
li {
margin-right: 2.5rem;
display: inline;
list-style-type: none;
}
a {
font-size: 1.2rem;
color:white;
text-decoration: none;
}
/* MAIN-PAGE AREA*/
.main-page {
grid-area: main-page;
}
h2 {
width:50rem;
margin-top:15rem;
padding-bottom: 3.5rem;
margin-left:1.25rem;
}
#learn-more-button {
border:0.063rem solid white;
color:white;
padding:0.938rem;
margin-left:20rem;
}
#learn-more-button:hover{
background-color: white;
color:black;
transition: 0.6s;
}
/* SECOND AREA */
.second-page {
grid-area: second-page;
}
/* FOOTER AREA*/
.footer {
grid-area: footer;
}
I totally appreciate any kind of help and thanks a lot in advance.
i think you have to take that 3 dives in one more div
and to that parent div give the background image and remove background attachment fixed..
try this ..
css (add this style in your code):
.one {
background: url(background1.jpg) no-repeat;
background-size: cover;
}
HTML :
<div class="grid-container">
<div class="one">
<!-- LOGO AREA-->
<div class="logo">
<div class="logo">
<img id="logo" src="pic/white_logo.png" alt="logo">
</div>
</div>
<!-- NAVBAR AREA-->
<div class="navbar">
<ul class="nav-list">
<a class="list" href="about.html">
<li>about</li>
</a>
<a class="list" href="">
<li>skills</li>
</a>
<a class="list" href="">
<li>contact</li>
</a>
</ul>
</div>
<!-- MAIN PAGE AREA-->
<div class="main-page">
<h2>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem IpsumLorem Ipsum</h2>
<a id="learn-more-button" href="">LEARN MORE</a>
</div>
</div>
<!-- SECOND PAGE -->
<div class="second-page"></div>
<!-- FOOTER -->
<div class="footer"></div>
</div>
OUTPUT :
change width of parent and child divs
Related
I am trying to create a footer for my simple webpage and am having some trouble with an element, which is over extending over the edge of the container. I assume this is a problem with the width.
I am trying to get the <hr> tag to extend the entirety of the width of the column. For reference I am using the MaterializeCSS framework for the containers, rows and columns.
Code
HTML:
<div class="container">
<div class="row"><!-- Other Content --></div>
<div class="row"><!-- Other Content --></div>
<div class="row"><!-- Other Content --></div>
<div class="footer-message">
<hr>
Made with <span style="color: #e25555;">♥</span> by Adam
</div>
</div>
CSS:
.footer-message{
position:absolute;
width: 100%;
padding:5px;
bottom:0px;
}
I am using a position of absolute to enable to align it to the bottom of the screen and I set the width to be 100% as I understand that it would inherit the width of the parent which in this case, is a div with a class of container.
What am I doing wrong? Thank you in advance!
Edit: Old screenshot
Add position: relative to the Container, then add left: 0; right: 0 to footer-message class.
Hope it help
I would use CSS Grid for this, see the following snippet:
html,
body {
width: 100%;
height: 100%;
text-align: center;
font-family: Helvetica, Arial, sans-serif;
}
article {
min-height: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 100%;
}
header {
background: #5170a9;
color: white;
padding: 1rem;
}
main {
color: #444;
padding: 1rem;
}
footer {
background: #182f58;
color: white;
padding: 1rem;
}
<article>
<header>
Page Header
</header>
<main>
Hi, there's not much content, yet. You can write in here to expand the container.
</main>
<footer>
All rights reversed.
<br>
I am always at the bottom of the page
</footer>
</article>
make your footer like in the materialize documentation example: https://materializecss.com/footer.html
<footer class="page-footer">
<div class="footer-copyright">
<div class="container">
© 2014 Copyright Text
</div>
</div>
</footer>
I tried to reproduce it, but your code without the CSS works fine for me. I am not sure if you want the <hr> to fill the whole width of just the container width.
<!DOCTYPE html>
<html>
<head>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<main>
<div class="container">
<div class="row">
<!-- Other Content -->
</div>
<div class="row">
<!-- Other Content -->
</div>
<div class="row">
<!-- Other Content -->
</div>
<div class="footer-message">
<hr>
Made with <span style="color: #e25555;">♥</span> by Adam
</div>
</div>
</main>
<footer>
</footer>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
My h1 only aligns to the center of the screen if it has enough text underneath it. Otherwise, it will align wrong/not at all. How do I fix this?
.content {
margin-top: 60px;
text-align: center;
}
body {
background-color: #a8a8a8;
}
.textbox {
background-color: white;
padding: 20px 100px 100px 100px;
}
<div class="container textbox">
<div class="row">
<div class="col-xs-12 content">
<h1>Contact</h1>
</div>
</div>
</div>
Here are my screenshots of what happens in each situation I mentioned:
No text underneath the h1
A bit of text underneath the h1
Enough text underneath the h1 (the h1 finally aligns properly)
There's absolutely no need for any custom css for simple things of this nature in Bootstrap 4. The text-center class is what you want for your h1.
Also, the col-xs-* class doesn't exist in Bootstrap 4 anymore. It's just col-* now.
Here's a working example:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col">
<h1 class="text-center">Contact</h1>
<p>Lorem ipsum dolor sit amet, consectetur.</p>
</div>
</div>
</div>
I can't get the .center class to apply to the following HTML. It gets applied to the ul element for some reason, but nothing else. Am I applying it wrong? Does it have something to do with IDs? I thought adding a class to a div would apply it to all elements within.
.center {
text-align: center;
}
ul {
list-style: none; /* getting rid of bullet pts */
padding: 0; /* practice to remove padding so we can set it later */
}
img {
display: inline;
width: 200px; /* we set in % or vh(view height) for responsive */
height: 100px; /* design - changes with page size (phones tablets etc) */
}
#footer {
width: 100%;
border-top: solid 2px black;
background-color: white;
position: fixed;
bottom: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Guessing Game</title>
<link rel="stylesheet" type="text/css" href="style.css">
<!-- Bootstrap and CSS here-->
</head>
<body>
<div id='app' class='center'>
<div id='headers'>
<!-- Title and subtitles! -->
<h1 id='title' class='center'> Rav's Cheesy Guessing Game! </h1>
<h2 id='subtitle'> Guess A Number Between 1-100, You Won't </h2>
</div>
<div id='main'>
<div id='input-parent'>
<!-- Player's guess input, and submit button -->
<input id='player-input' class='center' placeholder="#" autofocus maxlength=2>
<button id='submit-button' type=submit>Go!</button>
</div>
<div id='guesses'>
<ul id='guess-list'>
<li class='guess'>_</li>
<li class='guess'>_</li>
<li class='guess'>_</li>
<li class='guess'>_</li>
<li class='guess'>_</li>
</ul>
<!-- unordered list of guesses -->
</div>
<div id="menu-btns">
<!-- reset and hint buttons -->
<button id='reset'>Reset</button>
<button id='hint'>Hint</button>
</div>
</div>
</div>
<div id='footer' class='center'>
<div>
<div class=''>
<img src='fa-logo#2x.png' alt="image">
</div>
<div class=''>
<h4>Project by Ravish Rawal</h4>
</div>
<div class=''>
<img src='grace_hopper_academy.png' alt="image">
</div>
</div>
</div>
</body>
</html>
I am trying to change the background image of a jumbotron I have on one of my views and it just isnt working. I have looked at numerous posts on stack, and tried all of the suggested solutions but none of them are working for me.
HTML
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link href="dist3/css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<ul>
<li>About</li>
<li>Me</li>
</ul>
</div>
</nav>
<div class="content">
<div class="jumbotron">
<div class="container">
<h1>Allan Araujo</h1>
<p>Example paragraph</p>
</div>
</div>
<section class="pink">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12"><h3>.container-fluid</h3></div>
</div>
<div class="row">
<div class="col-xs-6">Column one</div>
<div class="col-xs-6">Column one</div>
</div>
</div>
</section>
<section class="green">
<div class="container">
<div class="row">
<div class="col-xs-12"><h3>.container</h3></div>
</div>
<div class="row">
<div class="col-xs-6">Column one</div>
<div class="col-xs-6">Column one</div>
</div>
</div>
</section>
</div> <!--END CONTENT-->
</body>
</html>
CSS:
/* ============================================= JUMBOTRON ============================================= */
.jumbotron {
background: url('/img/congruent_pentagon.png') no-repeat center center !important;
background-size: cover;
}
.nav {
text-align: center;
padding: 0;
margin: 0;
background-color: red;
height: 10%;
}
.nav li {
display: inline-block;
margin-right: 5%;
margin-left: 5%;
}
.pink {
background-color: #f99;
}
.green {
background-color: #9f9;
}
section {
padding-bottom: 20px;
}
My folders are structured as follows:
FOLDER
--css
--style.css
--dist
--img
--congruent_pentagon.png
--header.php
--index.php
I have tried to change the url to go see if that was the issue, but that did not fix the problem either. The weird part is the the background right now is grey, but not displaying the image that I want it to.
EDIT: now displaying entire html/css doc. I am using php to load in nav bars but I just combined them here to make it easier to look at.
The issue is related to the url to your image, change it to /img/congruent_pentagon.png
Online example: http://jsfiddle.net/tthLjchm/1/
Css:
.jumbotron {
background: url('http://getbootstrap.com/assets/img/sass-less.png') no-repeat center center !important;
height: 50%;
margin-top: 10px;
color: black;
}
.jumbotron p, h1 {
text-align: center;
}
The issue was that the image had to be placed within my css folder.
I made this website (http://aghicks.co.uk/) using Dreamweaver and tables and I'm now learning Bootstrap. I have a few things I can't quite sort out.
So far I have this
<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/stylesheet.css" rel"stylesheet" type="text/css">
<style type="text/css">
body {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
max-width: 1000px;
border: 1px solid black;
background:#EAEAEA;
margin: auto;
padding-top: 66px;
}
.redtext {
color: #b83535;
}
a {
color: #333;
}
a:hover {
color: #b83535;
text-decoration: none;
}
.align_right {
text-align: right;
}
.logo {
min-width: 286px;
}
span {
font-weight: 300;
}
.navbar {
padding-top: 34px;
}
.centered {
float: none !important;
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
}
h4 {
font-size: 16px;
}
/* Homepage */
/* Footer */
.footer_wrapper {
max-height: 70px;
}
.footer {
background-color: #999999;
}
.footer_text {
color: #FFF;
font-size: 10px;
padding-top: 8px;
padding-left: 8px;
padding-right: 8px;
}
</style>
<link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AGHicks Homepage</title>
</head>
<body>
<div class="container-fluid">
<!-- Header -->
<div class="row-fluid">
<div class="span5 logo">
<img src="images/Logo.png" class="logo">
</div>
<div class="span4 offset3">
<img src="images/Phone_icon.png" class="pull-left">
<h4 class="pull-right align_right">Northampton <span>01604786464</span><br><br>Mobile <span>07710537685</span></h4>
</div>
</div>
<!-- Navbar -->
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>Home</li>
<li>Gallery</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Content -->
<div class="row-fluid">
<div class="span6">
<img src="images/Homepage/Small_one_off_jobs.png" >
</div>
<div class="span6">
<div class="row-fluid">
<div class="span12">
<h5>Welcome to AGHicks Building Services website! We are a Northampton based, family run company with over 20 years experience. Hardwork, efficiency and reliability are instilled throughout the workforce and we have gained a strong reputation through word of mouth.</h5>
</div>
</div>
<div class"row-fluid">
<div class="span12">
<img src="images/Homepage/Map_pin.png" >
<h5 class="redtext">Northampton Based</h5>
<img src="images/Homepage/Quote.png" >
<h5 class="redtext">Free Quotes</h5>
<img src="images/Homepage/Tools.png" >
<h5 class="redtext">No Job Too Small</h5>
<img src="images/Homepage/Piggybank.png" >
<h5 class="redtext">Competitive Prices</h5>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<h5 class="redtext centered">OUR SERVICES INCLUDE</h5>
</div>
</div>
<div class="row-fluid">
<div class="span5">
<ul>
<li><strong>Conservatories</strong></li>
<li><strong>Extensions</strong></li>
<li><strong>Window & Door Refits</strong></li>
<li><strong>Bricklaying</strong></li>
<li><strong>Driveways</strong></li>
<li><strong>Carpentry</strong></li>
<li><strong>Patios</strong></li>
<li><strong>Stonework</strong></li>
</ul>
</div>
<div class="span6 offset1">
<ul>
<li><strong>Plastering</strong></li>
<li><strong>Kitchen & Bathroom Refits</strong></li>
<li><strong>Tiling</strong></li>
<li><strong>Fencing</strong></li>
<li><strong>Fascias</strong></li>
<li><strong>Garages & Carports</strong></li>
<li><strong>Guttering</strong></li>
</ul>
</div>
</div>
</div>
<!-- Footer -->
<div class="row-fluid footer_wrapper">
<div class="span12">
<div class="row-fluid footer">
<div class="span5">
<p class="footer_text"><strong>Copyright © AGHicks Building Services 2012 - All rights reserved.<br>Registered Address - 19 Bentley Close, Rectory Farm, Northampton, NN3 5JS.</strong></p>
</div>
<div class="span4 offset3 align_right">
<p class="footer_text"><strong>Web Design Services and SEO from Ben Mildren</strong></p>
</div>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
The issues I'm having can be seen is in these pictures http://imgur.com/jdSAKEk,CbbVrv7#0
(The border around the body will be removed and the styling of the navbar will be changed)
In the first image (desktop size),you'll see that the phone numbers icon doesn't line up next to the actual numbers and both the icon and the text aren't aligned with the bottom of the logo. I can achieve this by using padding, but then when you reduce the width of the browser the padding remains and causes huge gaps in the page.
Second issue in the first image is that I cannot get those icons and red text in the middle right area to appear in a 'grid' formation like on www.aghicks.co.uk is currently.
Lastly, On the second image, when the browser width is reduced the two lists down appear in line with each other when there is clearly enough space.
Any help with any of the problems would be appreciated.
How do you want to align your huge phone icon and the 2 lines of text and numbers? First on desktop and then on tablet?
Vertical aligning is a job for display: table-something; vertical-align: bottom;.
Grid formation: I'd go with a list of 4 items, items would be fixed width (50% or 49%), displayed as inline-block (or floating into a .clearfix container).
Second image and lists not side by side: well, which CSS are applied at this width? Check rules into relevant media query. Maybe they're displayed as inline-block with a width of 50%? Then there's STILL a whitespace of approx. 4px. A width of 45% would automagically solve the problem (don't forget to add a .clearfix container otherwise content would spill into the remaining (10%-4px) left space...)