I am very new at web development and am trying to figure out an issue I am having with my header. I want my header to be responsive and not cause an over-lap on the button elements next to it.
I have tried applying the position, float, and transform elements separately and all at once to the header sections and this does not seem to solve the issue or I just do not know how to properly use them.
Below is a sample of both my html and css.
HTML:
<header>
<img id="smallLogo" src="/Users/ultimateorganism/Desktop/Brown-Dev-Proj-Vol.1/FuturUImages/smallLogo.png" alt="smallLogo">
<h1 class="bizPage">FuturU</h1>
<div class="homeButtons">
Home
MindMovies
Contact
About
Testimonials
<hr style="background-color: white; height: 3px; opacity: initial;">
</div>
<hr style="background-color: white; height: 3px; opacity: initial;">
</header>
CSS Classes:
#smallLogo{
width: 110px;
height: 110px;
float: left;
}
.bizPage{
font-size: 80px;
color: white;
position: relative;
top: 30%;
left: 30%;
}
header{
background-color: black;
font-family: Courier;
justify-content: center;
}
.homeButtons{
position: absolute;
top: 32px;
right: 26px;
font-size: 8px;
}
.lineHeader, .lineFooter{
margin-left: auto;
margin-right: auto;
color: white;
height: 3px;
width: auto;
{
Any solution for this would be greatly appreciated. Thanks
Basically, if you want to make a fully responsive page/navbar, you may need to use the "Burger Menu". Looks like you have used Bootstrap. You can see this link
Still, I'm trying to provide a measurable solution. Check the code and style as you want. I just have used a flex div at the html portion.
header{
width: 100%;
}
#smallLogo{
width: 110px;
height: 110px;
/* float: left; */
}
.bizPage{
font-size: 80px;
color: white;
/* position: relative; */
top: 30%;
/* left: 30%; */
}
header{
background-color: black;
font-family: Courier;
}
.homeButtons{
/* position: absolute; */
/* top: 32px; */
/* right: 26px; */
margin-top: 1%;
font-size: 8px;
}
.lineHeader, .lineFooter{
/* margin-left: auto;
margin-right: auto; */
color: white;
height: 3px;
width: auto;
{
<!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">
<title>Stack Overflow</title>
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<header>
<div class="d-flex justify-content-between">
<img id="smallLogo" src="/Users/ultimateorganism/Desktop/Brown-Dev-Proj-Vol.1/FuturUImages/smallLogo.png" alt="smallLogo">
<h1 class="bizPage">FuturU</h1>
<div class="homeButtons">
Home
MindMovies
Contact
About
Testimonials
<hr style="background-color: white; height: 3px; opacity: initial;">
</div>
</div>
<hr style="background-color: white; height: 3px; opacity: initial;">
</header>
<!-- <script type="text/javascript" src="index.js"></script> -->
</body>
</html>
Let me know if it works for you.
Related
I can't fit my page to resolution of screen. I have 1920x1080, image is 1920 px width and it is going out of a window. link with code and images: https://mega.nz/file/rPJB2aCZ#OY7vW1yFZ-d0Fb73UvYvw8D-1NEnSmSV5XSA-Dw0LPU index1.html and style1.css are unnecessery.
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="../css/style.css">
<style>
</style>
</head>
<body>
<div class="container1">
<img style="width: 100%" src="../img/Zrzut ekranu 2021-10-18 o 15.21.01.png">
<p class="text1">
<b>Opanuj stres i przejmij kontrolę<br>
w biznesie i życiu prywatnym!</b>
</p>
<p class="text2">
<b>Poznaj techniki koherencji w trakcie spotkań<br>
jeden na jeden i zapanuj nad swoim stresem.</b>
</p>
<button class="button1">
<b>Zapisz się na kurs</b>
</button>
<button class="button2">
<b>O mnie</b>
</button>
</div>
</body>
</html>
.text1 {
position: relative;
font-family: Ubuntu;
font-size: 70px;
margin: 0;
color: white;
}
.text2 {
position: relative;
font-family: Ubuntu;
font-size: 25px;
margin: 0;
color: white;
}
.button1 {
position: relative;
background-color: #D32A34;
color: white;
border: none;
width: 239px;
height: 71px;
font-size: 20px;
}
.button2 {
position: relative;
border: solid #D32A34;
color: white;
background-color: transparent;
width: 239px;
height: 71px;
font-size: 20px;
}
normal image responsive
here a online exercise, if you want to learn how to make an image responsive: https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-principles/make-an-image-responsive
.container1 img {
max-width: 100%;
height: auto;
}
if you want an image as a background
use this in your img selector
.container1 img {
width: 100vw;
height: 100vh;
object-fit: cover;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
the height is 100vh so 100% of all height of the device, also if the parent his width is less height.
the same with 100vw
object-fit make the image look good on all device, to matter the aspect ratio of the device
position: fixed is for make the image like a background
z-index for making the image go behind everything
.container1 img {
width: 100vw;
height: 100vh;
object-fit: cover;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
.text1 {
position: relative;
font-family: Ubuntu;
font-size: 70px;
margin: 0;
color: white;
}
.text2 {
position: relative;
font-family: Ubuntu;
font-size: 25px;
margin: 0;
color: white;
}
.button1 {
position: relative;
background-color: #D32A34;
color: white;
border: none;
width: 239px;
height: 71px;
font-size: 20px;
}
.button2 {
position: relative;
border: solid #D32A34;
color: white;
background-color: transparent;
width: 239px;
height: 71px;
font-size: 20px;
}
<!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">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container1">
<img src="https://laaouatni.github.io/w11-clone/images/1dark.jpg">
<!-- text 1 -->
<p class="text1">
<b>Opanuj stres i przejmij kontrolę
<br>
w biznesie i życiu prywatnym!
</b>
</p>
<!-- text 2 -->
<p class="text2">
<b>Poznaj techniki koherencji w trakcie spotkań
<br>
jeden na jeden i zapanuj nad swoim stresem.
</b>
</p>
<!-- button 1 -->
<button class="button1">
<b>Zapisz się na kurs</b>
</button>
<!-- buttton 2 -->
<button class="button2">
<b>O mnie</b>
</button>
</div>
</body>
</html>
Try changing 'width: 100%' to 'width: 100vw' (which means viewport width)
At first you should style your .container1 or body and give it a width of 100% or 100vw. Pixels doesn't work probably because some width of the screen is reserved for scroll. Pozdro
if you use 100vw(view width) instead 100% for your img and set all margin and padding to 0, like that:
* {
margin: 0;
padding: 0;
}
Use this style into your stylesheet to remove the spacing between the image and box-sizing "body {padding:0;margin:0;} "
I'm fairly new here so apologies if this has already been answered somewhere else, I can't seem to find anything about this specific issue though.
I've been struggling to get rid of a huge whitespace that appears next to each webpage I create that is almost the same size as the webpage. It doesn't extend below the page or have any affect on positioning of objects no the page; when I center things they go where I want them to.
Any help would be hugely appreciated.
Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body {
font-family: 'Raleway', sans-serif !important;
font-style: normal;
font-variant: normal;
margin: auto;
margin-left: auto;
margin-right: auto;
color: #013A51 !important;
}
div.a {
position: relative;
top:-30px;
}
div.c {
position: relative;
left: 1000px;
top: -120px;
}
div.b {
position: relative;
top: -60px;
}
.header {
padding: 5px;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
width: 100%;
height: 90px;
text-align: left;
background: #C5E8F6;
}
</style>
</head>
<body>
<div class="header">
<div class="a">
<p style="font-size:36px"><b style="color: rgb(0, 229, 158)">Some</b>Text</p>
</div>
<div class="b">
<p style="font-size:15px">Some | <b>Text</b></p>
</div>
<div class="c">
<p style="font-size:15px">SomeText</p>
</div>
</div>
</body>
</html>
My content in .box for some reason is going over my header, but not my footer when you resize the window. I was trying to make the footer/header fixed, so they don't move and have content go over them when the window is resized. But like I said it only works for the footer and the header allows content to go over it. So I'm wondering what can I do to fix this? Thanks.
body {
background-color: #323232;
font-family: Lato;
padding: 0;
margin: 0;
}
nav a {
color: #fff;
text-decoration: none;
padding: 7px 25px;
display: inline-block;
}
.container {
width: 100%;
margin: 0 auto;
}
.fixed-header, .fixed-footer {
width: 100%;
position: fixed;
background: #333;
padding: 10px 0;
color: #fff;
text-align: center;
}
.fixed-header{
top: 0;
}
.fixed-footer{
bottom: 0;
}
.box {
background: #FFFFFF;
padding: 10px;
width: 400px;
height: 600px;
text-align: center;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kumo99.cf</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="icon" href="favicon.ico">
</head>
<body>
<div class="fixed-header">
<div class="container">
<nav>
HOME
PROJECTS
ABOUT
</nav>
</div>
</div>
<div class="box">
<div class="container">
<img src="images/avatar.png" alt="" class="box-avatar">
<h1>KUMO</h1>
<h5>RANDOM DEVELOPER</h5>
<ul>
<li>I'm Kumo and this is my website. Here I post random releases of development, projects and concepts. Checkout my other pages for more information.</li>
</ul>
</div>
</div>
<div class="fixed-footer">
<div class="container">Made by Kumo © 2017</div>
</div>
</body>
</html>
Set a z-index for the header with a higher number than the .box which are both 0 by default. So, like try z-index: 999; You can decide to set a higher z-index value for the footer too, although, as it is added after the .box element in the html layout, it will show on top by default.
.fixed-header, .fixed-footer {
width: 100%;
position: fixed;
z-index: 999;
background: #333;
padding: 10px 0;
color: #fff;
text-align: center;
}
Also, in the example, I decided to change the .box css. Not positive why you have the other css styles. Guess you were working on something a bit different.
.box {
background: #FFFFFF;
padding: 10px;
width: 400px;
height: 600px;
margin: 0 auto;
padding: 24px 0;
box-sizing: border-box;
text-align: center;
}
body {
background-color: #323232;
font-family: Lato;
padding: 0;
margin: 0;
}
nav a {
color: #fff;
text-decoration: none;
padding: 7px 25px;
display: inline-block;
}
.container {
width: 100%;
margin: 0 auto;
}
.fixed-header, .fixed-footer {
width: 100%;
position: fixed;
z-index: 999;
background: #333;
padding: 10px 0;
color: #fff;
text-align: center;
}
.fixed-header{
top: 0;
}
.fixed-footer{
bottom: 0;
}
.box {
background: #FFFFFF;
padding: 10px;
width: 400px;
height: 600px;
margin: 0 auto;
padding: 24px 0;
box-sizing: border-box;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kumo99.cf</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="icon" href="favicon.ico">
</head>
<body>
<div class="fixed-header">
<div class="container">
<nav>
HOME
PROJECTS
ABOUT
</nav>
</div>
</div>
<div class="box">
<div class="container">
<img src="images/avatar.png" alt="" class="box-avatar">
<h1>KUMO</h1>
<h5>RANDOM DEVELOPER</h5>
<ul>
<li>I'm Kumo and this is my website. Here I post random releases of development, projects and concepts. Checkout my other pages for more information.</li>
</ul>
</div>
</div>
<div class="fixed-footer">
<div class="container">Made by Kumo © 2017</div>
</div>
</body>
</html>
.box {
background: #FFFFFF;
padding: 10px;
width: 400px;
height: 600px;
text-align: center;
/* top: 50%; */
/* left: 50%; */
/* position: absolute; */
/* transform: translate(-50%, -50%); */
margin: 0 auto;
}
.fixed-header, .fixed-footer {
width: 100%;
position: fixed;
background: #333;
padding: 10px 0;
color: #fff;
text-align: center;
z-index: 10;
}
Using these updated classes you can achieve what you are looking for.
Hi there I'm having some trouble with some code for school. I need to get my webpage to adjust as I adjust the internet explorer window, any help is very appreciated and all of my code is posted below
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cycling Tours</title>
<link rel="stylesheet" type="text/css" href="Cstyles.css">
</head>
<body>
<article id="HeadContent>
<header id="Head">
<h1 id="CycleTours">Cycle Tours</h1>
<figure>
<img id="BikeAxle" src="images/bicycle_axle.jpg" alt="bikeaxle"/>
<img id="BikeBanner" src="images/bicycle_banner.jpg" alt="bikebanner"/>
</figure>
</header>
</article>
</body>
</html>
* {
margin: 0;
padding: 0;
}
#Head {
background-color: #C0C0C0;
height: 600px;
width: 80%;
margin-left: 10.5%;
}
#BikeBanner {
position: absolute;
width: 70%;
margin-top: -4%;
height: 300px;
margin-left: 2.2%;
}
#CycleTours {
position: fixed;
margin-top: 7%;
color: white;
margin-left: 50%;
z-index: 1;
}
#HeadContent {
margin-left: 12%;
margin-right: 12%;
}
I would like to make continuous pull-out elements. I seem able to create one just fine, but am having difficulties creating any more than that. The effect I am after is that when you scroll down, item 2 gets revealed from underneath, and then when you keep scrolling, item 3 gets revealed from underneath item 2. I'd like this to keep going for as many items I add.
Here's the first snippet, with 3 items. It is not working properly:
html, body{
padding: 0;
margin: 0;
}
.text-center{
text-align: center;
}
#item-1{
position: relative;
height: 500px;
margin-bottom: 500px;
background-color: white;
border-bottom: 5px solid gray;
}
#item-2{
background-color: green;
border-bottom: 5px solid gray;
z-index: -1;
}
#item-3{
background: yellow;
z-index: -1;
}
.slide-item{
text-align: center;
height: 500px;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="item-1" class="text-center">
First item!
<div id="item-2" class="slide-item text-center">
Second item!
<div id="item-3" class="slide-item text-center">
Third item!
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.0/jquery.min.js" type="text/javascript"></script>
</body>
</html>
Here is another snippet, with only two items, which appears to be working, except the text isn't showing up (it shows up fine on my test page, though).
html, body{
padding: 0;
margin: 0;
}
.text-center{
text-align: center;
}
#item-1{
position: relative;
height: 500px;
margin-bottom: 500px;
background-color: white;
border-bottom: 5px solid gray;
}
#item-2{
background-color: green;
border-bottom: 5px solid gray;
z-index: -1;
}
#item-3{
background: yellow;
z-index: -1;
}
.slide-item{
text-align: center;
height: 500px;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="item-1" class="text-center">
First item!
<div id="item-2" class="slide-item text-center">
Second item!
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.0/jquery.min.js" type="text/javascript"></script>
</body>
</html>