I'm trying to make a Google first page copy and i have a problem with the footer.
My copy footer look like this:
And i'm trying to achieve this:
That part with privacy, terms and settings, i want to make it stay in the same position
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Google</title>
<!-- font awesome -->
<script
src="https://kit.fontawesome.com/8370b7a799.js"
crossorigin="anonymous"
></script>
<!-- custom css -->
<link rel="stylesheet" href="styles.css" />
<!-- Bootstrap -->
</head>
<body>
<nav class="nav-bar">
Gmail
Images
<i class="fab fa-buromobelexperte fa-lg"></i>
S
</nav>
<main class="main-google">
<div class="content">
<div class="img-div">
<img src="google.png" />
</div>
<div class="search-box">
<i class="fas fa-search"></i>
<input type="text" />
<i class="fas fa-microphone"></i>
</div>
<div class="search-buttons">
<button class="changed-button">Google Search</button>
<button class="changed-button">I'm Felling Lucky</button>
</div>
<div class="lang-div">
<span>Google offered in:</span>
Romana
magyar
Deutsch
</div>
</div>
</main>
<footer class="footer">
<div>
<p class="location">Romania</p>
</div>
<div class="footer-link-bar">
Advertising
Business
About
How Search works
<span class="footer-links-right">
Privacy
Terms
Settings
</span>
</div>
</footer>
</body>
</html>
is it better to move that span outside the footer?
CSS
.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
.footer div {
background: #f2f2f2;
border: 1px solid #e4e4e4;
line-height: 40px;
font-family: arial, sans-serif;
font-size: 15px;
}
.location {
color: rgba(0, 0, 0, 0.54);
padding-left: 25px;
}
.footer div a {
margin-left: 25px;
text-decoration: none;
color: #5f6368;
}
.footer div a:hover {
border-bottom: 1px solid #5f6368;
}
.footer-links-right {
right: 0;
position: fixed;
}
.footer span a {
margin-right: 27px;
margin-left: 0;
}
And for the text decoration, i've tried to modify text-decoration-thickness but it doesn't work so i've used border bottom, but is there another posibility for me to use tect-decoration?
for the footer add a fixed minimum width, not a percentage.
.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
min-width: 750px; /* footer doesn't shrink less than 750px */
}
rather you should add it to the container of the whole page for your desired situation.
body {
width: 100vw; /* maintain width of 100 view width(users viewpoint)** */
min-width: 750px; /* body doesn't shrink less than 750px */
}
** Relative Lengths => https://www.w3schools.com/cssref/css_units.asp
Related
There is a white space gap at the bottom of mine webs
Header and CSS#
This is mine header i using bootstrap and there got a white space in
the bottom of mine website
This is mine header i using bootstrap and there got a white space in
the bottom of mine website
This is mine header i using bootstrap and there got a white space in
the bottom of mine website
This is mine header i using bootstrap and there got a white space in
the bottom of mine website
This is mine header i using bootstrap and there got a white space in
the bottom of mine website
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>We CARE for your health</title>
<link rel="icon" href="<?= base_url('img/icon.png')?>" type="image/icon type">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<title>Online Clinic</title>
<link rel="stylesheet" href="<?= base_url('bootstrap/dist/css/bootstrap.min.css')?>">
<!--For home page's below slider's content-->
<!--For home page's below slider's content-->
<style>
/*The control button to black color*/
.carousel-control-next,
.carousel-control-prev /*, .carousel-indicators */ {
filter: invert(100%);
}
/*For home page's below slider's content*/
.how-section1{
margin-top:-15%;
padding: 10%;
}
.how-section1 h4{
color: #ffa500;
font-weight: bold;
font-size: 30px;
}
.how-section1 p{
text-align: justify;
text-justify: inter-word;
}
.how-section1 .subheading{
color: #3931af;
font-size: 20px;
}
.how-section1 .row
{
margin-top: 10%;
}
.how-img
{
text-align: center;
}
.how-img img{
width: 70%;
}
.lastImg img{
width: 80%;
}
/*For home page's below slider's content*/
.foot {
position: fixed;
bottom: 0;
width: 100%;
height: 70px; /* Height of the footer */
background: white;
}
</style>
# Body#
<body style="background-repeat: no-repeat; background-color:white;" class="d-flex flex-column min-vh-100">
<div class="m-0">
<nav class="navbar navbar-expand-lg navbar-light bg-light" >
<img src="<?= base_url('img/logoClinic.jpg') ?>" height="70" alt="Mediklinik Menglembu 18 Jam" >
<div class="container-fluid">
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav ">
<b>Home</b>
<b>Profile</b>
<b>Messages</b>
<b>Reports</b>
</div>
<div class="navbar-nav ms-auto">
<b>Login</b>
</div>
</div>
</div>
</nav>
</div>
Footer#
<div class="foot">
<footer class="text-center text-black position-relative" style="background-color:white">
<div class="social">
<i class="icon ion-social-instagram px-5"></i>
<i class="icon ion-social-snapchat px-5"></i>
<i class="icon ion-social-twitter px-5"></i>
<i class="icon ion-social-facebook px-5"></i></div>
<br>
<ul class="list-inline">
<li class="list-inline-item px-3">Home</li>
<li class="list-inline-item px-3">Services</li>
<li class="list-inline-item px-3">About</li>
<li class="list-inline-item px-3">Terms</li>
<li class="list-inline-item px-3">Privacy Policy</li>
</ul>
<p class="copyright text-center">Mediklinik Kampar © 2022</p>
</footer>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>
</body>
</html>
You can solve your problem like this way,
<body>
<main></main>
<footer>
<span>This is a footer</span>
</footer>
</body>
Step 1: Set your body min-height: 100vh; and position: relative;
Step 2: Set your footer width: 100%;, position: absolute; and bottom: 0;
Here is the css,
body {
margin: 0;
min-height: 100vh;
position: relative;
}
footer {
width: 100%;
background: lightgray;
text-align: center;
padding: 1rem 0;
position: absolute;
bottom: 0;
}
you can fix the issue by yourself by right clicking on the page and select Inspect option.
I have a responsive website I am working on. When it switches to the mobile layout, the topbar scrolls down a bit before it sticks to the top of the screen where it should be, misaligning everything. This works fine on the desktop layout.
#topbar {
font-weight: 300;
background-color: white;
z-index: 999;
position: fixed;
width: 100%;
height: 15%;
box-shadow: 0 5px 10px rgba(124, 124, 124, 0.3);
}
#media (min-width: 35em) {
#topbar {
height: 60px;
}
}
<html>
<head>
<link href='stylesheet.css' rel='stylesheet' />
<script defer src='main.js'></script>
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
</head>
<body>
<section id='topbar'>
<nav>
<h1 id='logo'>Logo</h1>
<ul id='links'>
<li>
<a href='#home'>
<h1>Home</h1>
</a>
</li>
<li>
<a href='#about'>
<h1>About</h1>
</a>
</li>
<li>
<a href='#products'>
<h1>Products</h1>
</a>
</li>
<li>
<a href='#jobs'>
<h1>Jobs</h1>
</a>
</li>
</ul>
<div id='menu-button'>
<div id='line1'></div>
<div id='line2'></div>
<div></div>
</div>
</nav>
</section>
</body>
</html>
You might have to change the structure.
The reason for changing the structure is that you need to have the top header (Logo section) fixed on the top and your nav should start after that section.
If the Logo section takes the entire width, the nav section automatically stays below the logo section.
So, the changes I provided are:
Separate out the logo section and nav section in different divs and make them sibling so that nav section appears below the logo section.
Added top: 0 on the fixed logo section to keep it on top always.
Added margin-top of the height of the logo section to the nav section to make nav section visible .
<html>
<head>
<style>
#topbar {
top: 0;
font-weight: 300;
background-color: white;
z-index: 999;
position: fixed;
width: 100%;
margin-bottom: 49px;
height: 60px;
box-shadow: 0 5px 10px rgb(124 124 124 / 30%);
}
#links {
margin-top: 60px;
}
body {
margin: 0;
}
#media (min-width: 35em) {
#topbar {
height: 60px;
}
}
</style>
<script defer src="main.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div id="topbar">
<h1 id="logo">Logo</h1>
</div>
<nav>
<ul id="links">
<li>
<h1>Home</h1>
</li>
<li>
<h1>About</h1>
</li>
<li>
<h1>Products</h1>
</li>
<li>
<h1>Jobs</h1>
</li>
</ul>
<div id="menu-button">
<div id="line1"></div>
<div id="line2"></div>
<div></div>
</div>
</nav>
</body>
</html>
I think that's because of not using
top
left properties
Whenever you use position property you must use these 2 properties
Added Those two properties to #Topbar
#topbar{
top: 0;
left: 0;
}
No matter what I do, when resizing the screen or going on mobile, everything overlaps each other and images size down when they aren't supposed to.
Here is what the navigation bar looks like when resized:
Here is how it is supposed to be:
I did find a potential solution with the text, but it isn't exactly the solution I want. Especially with position: relative, which, for me, is hard to deal with since, no matter where you move your divs, it still processes it as being where it originally was. That is why I usually work with absolutes. So, if there is an alternative solution for that, it would be greatly appreciated. :)
What I am having a problem with at the moment is the image. If I do position: relative it resizes it when you change the browser size. I figured out a way to make it stabilize when it is absolute, but it still overlaps with other media when the browser is resized.
I have tried #media, (which for some reason breaks the whole browser, makes something disappear, or doesn't work,) overflow: hidden/auto, margins, paddings, indexes, max-width, max-height, ect. I can't seem to find a solution, though.
Here is the html and css code.
.nav-bar-links a {
font-family: 'Oswald', sans-serif;
text-decoration: none;
text-transform: uppercase;
color: #fff;
z-index: 1;
position: relative;
float: right;
margin: 35px 35px 35px 35px;
color: 6s;
}
.nav-bar-links a:hover {
font-family: 'Oswald', sans-serif;
text-decoration: none;
text-transform: uppercase;
color: rgb(253, 253, 159);
z-index: 1;
position: relative;
float: right;
margin: 35px 35px 35px 35px;
transition: color 0.6s;
}
.nav-logo img {
position: absolute;
max-width: 25%;
max-height: 20%;
z-index: 1;
float: left;
margin: 0x 20px 20px 20px;
padding: 0;
}
.nav-text-link a {
text-transform: uppercase;
text-decoration: none;
position: relative;
padding: 0px 20px;
color: #fff;
font-family: 'Oswald', sans-serif;
font-weight: bold;
font-size: 50px;
float: left;
z-index: 1;
top: 10px;
left: 12%;
color: 6s;
}
.nav-text-link a:hover {
color: rgb(253, 253, 159);
color: 6s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<div class="container-fluid">
<div class="bg-color">
Color
</div>
<div class="row">
<div class="nav-bar-wrapper">
<div class="nav-bar-links">
<a class="about-us" href="About Us"> About Us </a>
<a class="our-services" href="Our Services"> Our Services </a>
<a class="reviews" href="Reviews"> Reviews </a>
<a class="contact-us" href="Contact Us"> Contact Us </a>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="nav-logo">
<img src="/image.png">
</div>
</div>
</div>
<div class="container">
<div class="nav-text-link">
Viju
</div>
</div>
</div>
</div>
</body>
Thank you!
You haven't told us what you want to achieve exactly, but first step is to remove everything that makes the image behave weirdly, notably negative margin, float and position. Try to avoid these things as much as possible.
If you want to put columns or elements next to each other, you should use flex declarations on the parent element, the div that wraps the elements you want to arrange. Note that I moved your container-fluid out so it wraps everything. Not good to nest multiple containers inside one another.
Let me know where we want to take this from here (see, no overlapping!):
* { box-sizing: border-box;
margin: 0;
padding: 0;
}
.nav-logo img {
width: 100%;
margin-top: 2rem;
}
.nav-bar-wrapper {
padding: 1rem 2%;
display: flex;
align-items: center;
justify-content: space-between;
background: pink;
}
.nav-bar-links {
display: flex;
justify-content: space-between;
width: 60%;
}
.container-fluid {
max-width: 1400px;
}
.row {
margin: 0 4%; /* margin on each side of content */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<div class="container-fluid">
<div class="nav-bar-wrapper">
<div class="logo"><h1>LOGO</h1></div>
<div class="nav-bar-links">
<a class="about-us" href="About Us"> About Us </a>
<a class="our-services" href="Our Services"> Our Services </a>
<a class="reviews" href="Reviews"> Reviews </a>
<a class="contact-us" href="Contact Us"> Contact Us </a>
</div>
</div>
<div class="row">
<div class="column nav-logo">
<img src="https://wallpapercave.com/wp/ylvyN1V.jpg" alt="National park" title="National Park">
</div>
</div>
<div class="row">
<div class="nav-text-link">
Viju
</div>
</div>
</div>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<div class="container-fluid">
<div class="bg-color">
Color
</div>
<div class="row">
<div class="`nav-bar-wrapper`">
<div class="nav-logo">
<img src="/image.png">
</div>
<div class="nav-bar-links">
<a class="about-us" href="About Us"> About Us </a>
<a class="our-services" href="Our Services"> Our Services </a>
<a class="reviews" href="Reviews"> Reviews </a>
<a class="contact-us" href="Contact Us"> Contact Us </a>
</div>
</div>
<div class="container">
<div class="nav-text-link">
Viju
</div>
</div>
</div>
</div>
</body>
add this css
.nav-bar-wrapper{
display:flex;
justfy-contant:space-between;
}
donot use any asolute positioning that is what is causing it to overlap
<!DOCTYPE HTML>
<html lang ="en">
<meta charset = "utf-8" />
<head>
<title>Example Page</title>
<link rel="stylesheet" type="text/css" href="Web_Design_01_Stylesheet.css" />
</head>
<body>
<div id = "container">
<header>
<div id = "static_nav">
<nav>
Home
About Us
Contact US
Gallery
Member Log-in
</nav>
</div>
</header>
<div id = "block_two">
<p></p>
</div>
<div id = "block_three">
<p> Block Three </p>
</div>
<div id ="block_four">
<p> Block Four </p>
</div>
</body>
<div id = "end_block">
<footer>
<p> This is where the footer would go </p>
</footer>
</div>
</div>
</html>
Here is the CSS
body {
height: 100%;
width: 100%;
max-width: 100%;
overflow-x: hidden;
margin: 0;
}
Here is the #static_nav nothing happens when I do that. I'm not quite sure how to remedy this. I've been able to modify the other divs but I'm not to sure why I can't in this case.
div#static_nav{
font-family: Verdana, sans-serif;
padding-top: 10px;
text-align: right;
width: 100%;
height: 5vh;
background-color: #000000;
position:fixed;
opacity: .75;
color:;
}
div#container {
margin-top: 10px
height: 10vh
width: 100%;
background-color: #16BA81;
color:;
}
Also, "text-align: right" pushes the text to the right side border. How would I add a little space between the border and text so that its not directly on the border. I tried padding and margin but it didn't move it.
Thank you for the help.
To color the links in #static_navbar, you have to style them directly. Otherwise the browsers default link color will be used:
div#static_nav a {
color: white;
}
To vertically align the links, one possibility is to use the padding of the #static_navbar on top and bottom, e.g.:
padding: 10px 0;
Also make sure, that your markup is valid. Your closing body take hast to be set directly before the closing html tag.
body {
height: 100%;
width: 100%;
max-width: 100%;
overflow-x: hidden;
margin: 0;
}
div#static_nav {
font-family: Verdana, sans-serif;
padding: 10px 0;
text-align: right;
width: 100%;
background-color: #000000;
position: fixed;
opacity: .75;
}
div#static_nav a {
color: white;
}
div#container {
margin-top: 10px height: 10vh width: 100%;
background-color: #16BA81;
}
<!DOCTYPE HTML>
<html lang="en">
<meta charset="utf-8" />
<head>
<title>Example Page</title>
<link rel="stylesheet" type="text/css" href="Web_Design_01_Stylesheet.css" />
</head>
<body>
<div id="container">
<header>
<div id="static_nav">
<nav>
Home
About Us
Contact US
Gallery
Member Log-in
</nav>
</div>
</header>
<div id="block_two">
<p></p>
</div>
<div id="block_three">
<p>Block Three</p>
</div>
<div id="block_four">
<p>Block Four</p>
</div>
<div id="end_block">
<footer>
<p>This is where the footer would go</p>
</footer>
</div>
</div>
</body>
</html>
I am trying to build a two columned layout with a sidebar that always stays on the left side of the page with a main content area that is centered, and when the window is resized, the centered content will eventually bump up against the nav bar, but never move any further left than where it is when they touch (which would be left: 150px).
Can someone help me out?
Here is the CSS:
#charset "UTF-8";
/* CSS Document */
body,td,th {
font-size: 16px;
font-family: Verdana, Geneva, sans-serif;
color: #000;
}
body {
background-color: #FFF;
margin-left: 0px;
margin-top: 0px;
margin-right: 15px;
margin-bottom: 0px;
}
#nav {
position: fixed;
top: 0px;
left: 0px;
width: 150px;
height: 10000px;
background-color: #D61D21;
text-align: right;
}
#nav a:link {
color: #FFF;
text-decoration: none;
}
#nav a:visited {
color: #FFF;
text-decoration: none;
}
#nav a:hover {
color: #FFF;
text-decoration: underline;
}
#main {
width: 810px;
height: 810px;
margin: 0px auto;
}
and here is the html:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Nick Passaro Designs</title>
<link href="css/index.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="nav">
<img src="assets/marklogo.jpg" width="150" height="97" border="0" alt="Nick Passaro Designs">
<p>PORTFOLIO </p>
<p>LOGOS </p>
<p>PRINT </p>
<p>WEB DESIGN </p>
<p>PHOTOGRAPHY </p>
<p>CONTACT </p>
</div>
<div id="main">
ENTER CONTENT HERE
</div>
</body>
</html>
Any help is greatly appreciated!
Do this:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Nick Passaro Designs</title>
<link href="index.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="nav">
<img src="assets/marklogo.jpg" width="150" height="97" border="0" alt="Nick Passaro Designs">
<p>PORTFOLIO </p>
<p>LOGOS </p>
<p>PRINT </p>
<p>WEB DESIGN </p>
<p>PHOTOGRAPHY </p>
<p>CONTACT </p>
</div>
<div id="wrapper">
<div id="main">
ENTER CONTENT HERE
</div>
</div>
</body>
</html>
CSS:
#wrapper{
margin-left: 150px;
}
What you do is create a wrapper div around your main div and make that wrapper div have a left-margin of 150px so that it's side by side with the nav bar. Now all your resizes inside the main div should be limited to within the wrapper.
A neat little trick I just learned is making your #content position: relative; and then make all child elements inside it position: absolute; that way all child elements are absolute to your content area and the content will resize to any resolution. Saves me so loads of time and i can't believe how much time I used to waste laying dynamic sites out.
Hope this does something for you.