Hello everyone I am pretty new to HTML and CSS is there any way for me to make the background of this footer be over the whole footer and not that one bit. I tried a few things but is will over lap the contact forum for a small part but it is pretty annoying that I cant find out how to solve this problem
.footer,
.push {
height: 50px;
}
.footer {
background: #000f14 !important;
padding: 20px !important;
text-align: center !important;
position: absolute !important;
bottom: 0 !important;
margin-top: 50px;
width: 100% !important;
}
.column {
display: inline-block;
width: 25%;
vertical-align: top;
text-align: left;
margin: 0 2.5%;
margin-top: 15px;
background: #000f14;
}
.column h3 {
margin-top: 0;
margin-bottom: 10px;
background: #000f14;
font-size: 25px;
}
.column ul {
list-style: none;
margin: 0;
padding: 0;
background: #000f14;
}
.column ul li {
padding: 5px 0;
background: #000f14;
font-size: 15px;
}
.column p {
margin: 0;
background: #000f14;
font-size: 15px;
}
<!DOCTYPE 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.0">
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght#400;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="footer-placeholder">
<div class="footer">
<div class="column">
<h3>Contact Information</h3>
<ul>
<li>1234 Example Street</li>
<li>Example City, XX 12345</li>
<li>Phone: (555) 555-5555</li>
<li>Email: info#example.com</li>
</ul>
</div>
<div class="column">
<h3>Services</h3>
<ul>
<li>Web Design</li>
<li>Graphic Design</li>
<li>Marketing</li>
<li>SEO</li>
</ul>
</div>
<div class="column">
<h3>Trademark</h3>
<p>© 2023 AquaTech. All rights reserved.</p>
</div>
</div>
</div>
</body>
</html>
.footer,
.push {
height: 100%;
}
With this basically you tell your element with footer class that take the full height of its child elements.
You need to add the height in the class
.footer { height: auto }
And to make the content of footer visible add color in the class
.column{color: white}
The final look of your both CSS classes will be as below;
.footer { background: #000f14 !important; padding: 20px !important; text-align: center !important; position: absolute !important; bottom: 0 !important; margin-top: 50px; width: 100% !important;height:auto; }
.column { display: inline-block; width: 25%; vertical-align: top; text-align: left; margin: 0 2.5%; margin-top: 15px; background: #000f14; color:white;}
Besides, you can also have a look at the link below to see the solution visually: TestWise Replay| fixed the footer height
Simply add height: auto; to the .footer CSS selector.
Improvements suggestions:
Use the <footer> HTML element instead of <div class='footer'> for semantic markup.
Learn flexbox to layout the columns using display: flex.
Read about better ways to place the footer at the bottom
Related
I am currently working on an image gallery where I have different sections that have multiple images. I am currently trying to set up each section of images to be a single row and scoll horizontally similar to what netflix does. Right now I've been unable to get the container to overflow in the x to work and instead goes to a second row.
I've tried using
white-space: nowrap
overflow-x: auto;
overflow-y:hidden;
display: inline-block;
I've also tried taking a containing div for the list and rotating it 90 deg and allow vertical scrolling and then rotating a child div back.
The best I've been able to get for the effect I'm trying to acheive is the second example but I've been unable to get the width correct on the containing wrapper. I'm trying to get the row all the way across.
First example.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>list testing</title>
<style>
body {
background-color: #2e2e2e;
margin: 0px;
padding: 0px;
color: white;
}
.galleryContainer {
width: 100%;
margin: 0px;
text-align: center;
}
.gallery {
width: 90%;
text-align: center;
margin: 0% 5% 0% 5%;
}
.sectionWrapper {
width: 100;
height: 100%;
overflow-y: auto;
overflow-x: auto;
}
.section {
height: 100%;
width: 100%;
display: inline-block;
text-align: center;
margin: 0px;
padding: 0.75% 0 0.75% 0;
}
ul > .gallery {
float: left;
white-space: nowrap;
overflow-x: auto;
}
ul > li {
list-style-type: none;
display: inline;
}
li {
float: left;
width: 250px;
height: 200px;
margin-left: 1%;
margin-top: 1%;
border: 1px solid #999999;
background-color: #203d68;
display: inline;
}
li:hover {
filter: grayscale(100%);
transform: scale(1.1);
box-shadow: 4px 4px 4px #222222;
transition: 0.5s ease;
}
h2 {
display: inline-block;
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<div class="galleryContainer">
<div class="gallery">
<div class="sectionWrapper">
<div class="section">
<h2>section 1</h2>
<ul>
<li>test_1</li>
<li>test_2</li>
<li>test_3</li>
<li>test_4</li>
<li>test_5</li>
<li>test_6</li>
<li>test_1A</li>
<li>test_2A</li>
</ul>
</div>
</div>
<div class="sectionWrapper">
<div class="section">
<h2>section 2</h2>
<ul>
<li>test_7</li>
<li>test_8</li>
<li>test_9</li>
<li>test_10</li>
<li>test_11</li>
<li>test_12</li>
</ul>
</div>
</div>
<div class="sectionWrapper">
<div class="section">
<h2>section 3</h2>
<ul>
<li>test_13</li>
<li>test_14</li>
<li>test_15</li>
<li>test_16</li>
<li>test_17</li>
<li>test_18</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Second Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>list testing</title>
<style>
body {
background-color: #2e2e2e;
margin: 0px;
padding: 0px;
color: white;
}
.galleryContainer {
width: 100%;
margin: 0px;
text-align: center;
}
.gallery {
width: 90%;
text-align: center;
margin: 0% 5% 0% 5%;
}
.sectionWrapper {
width: 100;
height: 100%;
overflow-y: auto;
overflow-x: auto;
transform: rotate(-90deg);
/* transform-origin: right top; */
}
.section {
height: 100%;
width: 100%;
display: inline-block;
text-align: center;
margin: 0px;
padding: 0.75% 0 0.75% 0;
transform: rotate(90deg);
/* transform-origin: right top; */
}
ul > .gallery {
width: 100%;
height: 100%;
float: left;
display: inline;
}
ul > li {
list-style-type: none;
display: inline;
}
li {
float: left;
width: 250px;
height: 200px;
margin-left: 1%;
margin-top: 1%;
border: 1px solid #999999;
background-color: #203d68;
display: inline;
}
li:hover {
filter: grayscale(100%);
transform: scale(1.1);
box-shadow: 4px 4px 4px #222222;
transition: 0.5s ease;
}
h2 {
display: inline-block;
font-family: Arial, Helvetica, sans-serif;
width: 100%;
margin-top: 0;
margin-bottom: 0;
}
</style>
</head>
<body>
<div class="galleryContainer">
<div class="gallery">
<div class="sectionWrapper">
<div class="section">
<h2>section 1</h2>
<ul>
<li>test_1</li>
<li>test_2</li>
<li>test_3</li>
<li>test_4</li>
<li>test_5</li>
<li>test_6</li>
<li>test_1A</li>
<li>test_2A</li>
</ul>
</div>
</div>
<!-- <div class="section">
<h2>section 2</h2>
<ul>
<li>test_7</li>
<li>test_8</li>
<li>test_9</li>
<li>test_10</li>
<li>test_11</li>
<li>test_12</li>
</ul>
</div>
<div class="section">
<h2>section 3</h2>
<ul>
<li>test_13</li>
<li>test_14</li>
<li>test_15</li>
<li>test_16</li>
<li>test_17</li>
<li>test_18</li>
</ul>
</div> -->
</div>
</div>
</body>
</html>
In the second exampe I'm getting the scolling I'm looking to get but not the width. Any help would be much appreciated.
You can add a fixed width to your .section wrapper instead of 100%
example: 1000px
Both display:inline-block and float:left will detect if there are spaces beside them so you should set a fixed width container.
I have a fixed header that I've set up with a higher z-index than the body content so the content slips underneath it. In order to position the content div right below the fixed header, I set its position:relative and gave it a top value
This seemed to work fine, until I started to add items to the content div. First I added an h1 and as I attempted to give it a little margin-top the entire page (header and all) shifted down the value I specified for my margin-top.
I've run into this before (collapsing divs yes?) and I've usually been able to fix it with a set width or a float or a display block, but none of these seem to be doing the trick.
Can someone tell me what I am missing?
*
{
padding: 0;
margin: 0;
}
header
{
background-color: white;
color: #724444;
width: 100%;
height: 90px;
border-bottom: 1px solid rgba(140, 140, 140, .2);
position: fixed;
font-family: 'Lato', sans-serif;
font-weight: bold;
font-size: 15px;
text-align: center;
line-height: 1.3;
z-index: 1000;
}
#header-fixedWidth
{
width: 1000px;
height: 90px;
margin: 0 auto;
display:flex;
align-items: center;
justify-content: space-between;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
}
nav ul
{
list-style: none;
display: flex;
}
nav ul li
{
margin: 0 10px;
}
#main-content
{
width: 100%;
min-height: 100px;
position: relative;
top: 89px;
}
#main-content-fixedWidth
{
width: 1000px;
min-height: 100px;
margin: 0 auto;
position: relative;
}
.headers
{
font-family: 'Lato', sans-serif;
font-weight: bold;
font-size: 30px;
line-height: 1.3;
margin-top: 20px;
}
#image-deck
{
width: 1000px;
border: 1px solid #ccc;
position: relative;
display: block;
}
/*Media Queries*/
#media (max-width: 1000px)
{
header
{
width: 100%;
}
#header-fixedWidth
{
width: 100%;
}
}
<html>
<head>
<title>Pic Monkey Recreation</title>
<link rel="stylesheet" href="style.css" />
<meta name="viewport" content="width=device-width">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" />
</head>
<body>
<header>
<div id="header-fixedWidth"
<img src="Images/logo.png" alt="randomLogo" id="randomLogo" />
<nav>
<ul>
<li>
<img src="Images/iconMenu/edit.png" alt="">
<br>
<p>Edit</p>
</li>
<li>
<img src="Images/iconMenu/touchUps.png" alt="">
<br>
<p>Touch Up</p>
</li>
<li>
<img src="Images/iconMenu/design.png" alt="">
<br>
<p>Design</p>
</li>
<li>
<img src="Images/iconMenu/collage.png" alt="">
<br>
<p>Collage</p>
</li>
</ul>
</nav>
<div id="user-help">
<img src="Images/signIn.png" alt="signIn" id="signIn" />
</div>
</div>
</header>
<div id="main-content">
<div id="main-content-fixedWidth">
<div id="test">
<p class="headers">Here is a header for you to look at</p>
</div>
<div id="image-deck"></div>
</div>
</div>
</body>
</html>
You will need a counter minus margin to offset the amount you have moved it. So if your box has a top value 50px and your inner h1 have a margin-top value 100px you'd need to reset your box top value to -50px to counter.
i just started playing around with HTML and CSS a few weeks ago and would appreciate some help. I am looking for an elegant way to align several elements in a header.
I am unfamiliar with using grids. I tried using display: inline-block and display: table but i didnt get it to work the way Id like to. So I had to use floats, which works, but i feel like its forced.
Id also like to have the content appear in the same range as .nav-content, but I guess 55% of the container will be different than 55% of the header?
Anyways, heres the code:
* {
box-sizing: border-box;
}
.container {
max-width: 100%;
height: 100%;
}
/******************************************
Header / Navbar
*******************************************/
.navigation {
width: 100%;
border-bottom: solid 1px #eee;
position: fixed;
Z-Index: 500;
font-size: 14px;
box-sizing: border-box;
font-weight: 400;
font-style: normal;
line-height: 1.6;
min-height: 65px;
padding-top: 10px;
}
.nav-content {
width: 55%;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.nav-logo,
.navigation li {
float: left;
}
.nav-right,
.nav-btn {
float: right;
}
.nav-left {
font-size: 26;
padding-left: 1%;
padding-top: 0.5%;
}
.nav-left li {
margin-right: 1%;
margin-left: 1%;
}
.navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
.nav-right {
padding-right: 1%;
margin-top: -25px;
}
<head>
<meta charset="UTF-8">
<meta name="description" content="We are medium. We write about startups.">
<meta name="keywords" content="Medium, blogging, startups, entrepreneurship, Unternehmer, Gründung, Unternehmensgründung, gründen, Venture Capital, Business Angel, Investor, Wagniskapital, Risikokapital">
<meta name="author" content="William Middendorf">
<meta name="robots" content="index, follow">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>Medium</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic|Montserrat:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
</head>
<body>
<div class="container">
<div class="navigation">
<!--Navigation-->
<div class="nav-left">
<ul>
<li><i class="fa fa-bars"></i>
</li>
<li><i class="fa fa-search"></i>
</li>
</ul>
</div>
<div class="nav-content">
<div class="nav-logo">Blogger</div>
<div class="nav-btn">
<button class="wrt-btn">Schreib' einen Artikel</button>
</div>
</div>
<div class="nav-right">
<ul>
<li>Log In
</li>
<li>Register
</li>
</ul>
</div>
</div>
<!--End of Navigation / Header-->
</div>
<!--End of Container-->
</body>
Float is bad way to go here. You will not be able to center them later in mobile view, if needed.
Use display: inline-block; and don't leave spaces or new lines is html code between the buttons, to avoid gap between them.
using inline-block and width percentages and text-align, you can avoid using floats and margins. here's a demo: http://jsfiddle.net/swm53ran/349/
.section, li, .nav-logo, .nav-btn {
display:inline-block;
}
.nav-left, .nav-right, .nav-content {
width: 32%;
}
.nav-right {
text-align: right;
}
.nav-logo, .nav-btn {
width: 49%;
}
I just started using bootstrap and am having a problem with my image shifting out of place when I resize my browser. The background image that is holding my image and text doesn't seem to be scaling either. when I maximise my browser everything is in place and perfect. As you can see in the first image that is where my problem is. The second image is how it looks maximised and how it should look with all screen sizes. Any help appreciated!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"
rel="stylesheet">
<link href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"
rel="stylesheet">
<link href="style.css" rel="stylesheet" type="text/css">
<link href="images/theater.ico" rel="shortcut icon" type="image/x-icon">
</head>
<body>
<div class="container">
<header>
<div id="rainbow"><img alt="rainbow gradient" src=
"images/rainbow.png"></div>
<div id="header">
<!--home-->
<p id="logo"><img alt="Bethan Rainforth a comedic dancer" src=
"images/logo.png" class="img-responsive"></p>
</div>
<div id="nav-bar">
<nav class="nav">
<ul class="list-inline">
<li>
Home
</li>
<li>
<a class="gray" href="work.html">Work</a>
</li>
<li>
<a class="gray" href="gallery.html">Gallery</a>
</li>
<li>
<a class="gray" href="hireme.html">Hire!</a>
</li>
</ul>
</nav>
</div>
</header>
<div class="row">
<div class="about-me row">
<div class="col-md-12">
<img alt="Bethan Rainforth" class="img-responsive" id="pic" src=
"images/pic.png">
<p class="about-text">I am a physical comedian, continuously
being inspired by comical characters and exaggerated
movement. I fuse elements of dance and theatre to create
performances that are somewhat over-the-top, and
outrageous. I use locking technique as a foundation build
and produce uproarious performances suitable for an
eclectic audience. I aim to leave audience members feeling
uplifted, swimming in their own tears of laughter,
momentarily forgetting any worries or woes.</p>
</div><!--End of col-md-12 about me-->
</div><!--End of about me row-->
</div><!--End of about me wrapper-->
/********************************
Body of page
*********************************/
html,
body {
background-image: url(images/background.png);
margin: 0 auto;
}
#container{
width: 960px;
margin: 0 auto;
}
/********************************
Header
*********************************/
#rainbow img{
margin-bottom: 15px;
}
#logo img {
width: 320px;
}
/********************************
Navigation
*********************************/
nav a {
font-family: Hobo Std;
padding: 50px;
}
ul {
list-style-type: none;
}
nav {
text-align: center;
margin-left: 20px;
}
a {
text-decoration: none;
}
nav li {
display: inline;
width: 150px;
}
.gray,
a:hover,
a:visited,
a:active {
color: #a5a5a5;
text-decoration: none;
}
#home {
background-image: url(images/pinkpaint.png);
background-repeat: no-repeat;
background-size: 100% 100%;
width: 30px;
margin: 0 auto;
color: #000;
}
ul.list-inline{
margin-top: 25px;
}
/********************************
About Me
*********************************/
img#pic {
width: 260px;
float: left;
margin-left: 54px;
margin-top: 74px;
}
.about-me {
background-image: url(images/border.png);
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center center;
width: 730px;
height: 490px;
display: block;
margin: 0 auto;
}
p.about-text{
color: #7ca5d2;
font-family: hobo std;
font-size: 1.2em;
line-height: 35px;
margin: 75px;
}
It seems this is adding 74px to the top of the image:
img#pic {
width: 260px;
float: left;
margin-left: 54px;
margin-top: 74px;
}
Try removing the margin-top code and see what happens. If needed for desktop, you can add a media query so that it is removed when resized. For example:
#media and (max-width:700px) {
img#pic {
margin-top: 0;
}
}
Let me know if that doesn't work.
I have a website that works fine, looks okay, etc. The problem is I am not the best with positioning, float, etc. Instead of elements just lining up one under another, I have to manually set increasingly large margins for each additional paragraph I add.
My navbar is composed of a ul inside a fixed div. The ul is not floating, but the "li"s are. I need a way to position this and the other elements such that everything is below the navbar. I have tried using clear: both; to no avail. I know my positioning is all over the place, I don't really understand how/if positioning and float are inherited.
Here is a link to the website.
HTML:
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,500,400italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link rel="stylesheet" type="text/css" href="webfonts/stylesheet.css">
<title>
Artwork
</title>
</head>
<body>
<div class="navbar">
<img src="images/navbar/title.png" class="navbar">
<ul>
<li>Home</li>
<li>Art</li>
<li>About Me</li>
</ul>
</div>
<h1 id="header">Welcome to my Website!</h1>
<p>
The purpose of this website is to showcase my artwork, and, in a way, my HTML skills. Click on
one of the links up top, and you can see some of my <b>artwork</b> or maybe learn <b>about me</b>!
</p>
</body>
</html>
CSS:
html{
height: 100vh;
width: 100vw;
margin: 0px;
}
body{
height: 100vh;
width: 100vw;
margin: 0px;
background-color: #009900;
}
div.navbar{
height: 50px;
width: 100vw;
position: fixed;
background-image:url('images/navbar/navbar.png');
background-repeat:repeat-x;
}
#header{
position: relative;
float: left;
margin: 40px 0px 0px 5px;
font-family: 'League Gothic', sans-serif;
}
p {
position: absolute;
margin: 100px 0px 0px 5px;
font-family: 'Ubuntu', sans-serif;
}
img.navbar{
float: left;
}
ul{
list-style-type: none;
margin: 4px 0px 0px 0px;
padding: 0;
overflow: hidden;
}
a:link,a:visited
{
display: block;
width: 120px;
font-weight: 500;
font-family: 'Ubuntu', sans-serif;
color: #FFFFFF;
text-align: center;
padding: 4px;
margin: 0px;
text-decoration: none;
}
li{
float: left;
{
yeah instead of giving margin manually for everything why don't you use margin for whole wrapper the contents that follows fixed nav-bar check this fiddle
.nav-bar{
height:50px;
overflow:hidden;
background-color:#000;
width:100%;
position:fixed;
top:0px;
left:0px;
}
.content{
margin-top:75px;
}
and the html
<div class="nav-bar">
<h1>
topbar
</h1>
<ul>
<li>one</li>
<li>tow</li>
<li>three</li>
</ul>
</div>
<div class="content">
<h2>content</h2>
<p>hi hello ouyasd asdasda dasdasd</p>
<p>hi hello ouyasd asdasda dasdasd</p>
<p>hi hello ouyasd asdasda dasdasd</p>
<p>hi hello ouyasd asdasda dasdasd</p>
</div>