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>
Related
I am trying to center a div on my website and it now works but when the window is too small you can't scroll all of the ways to the top of the div. Ideally, if the page's content is larger than the window it si viewed in, it should have a scroll bar that allows scrolling all the way to the top of the aqua box.
I belive that this has to do with the styling in either the body or test classes
the webpage is viewable here:
https://htmltest.duelcraft.pages.dev/
<!--(c) 2022 DuelCraft-->
<html>
<head>
<meta charset="utf-8">
<title>DuelCraft</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" type="image/x-icon" href="images/icon.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body background='images/background.png'>
<div class="body">
<div class="test">
<h1>DuelCraft</h1>
<a href="shop.html">
<img src="images/shop.png" alt="shop" style="width:100px;height:50px;" class="center">
</a>
<p class="main">DuelCraft Minecraft Server</p>
<h2>How do I join?</h2>
<p>Connect to play.duelcraft.games</p>
<div align="center"><iframe src="https://discord.com/widget?id=995858337293926400&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe></div>
<div class="email-part">
<p>Email user#example.com for help!</p>
</div>
</div>
<p class="copyright"> ©2022 DuelCraft </p>
</div>
</body>
</html>
h1 {
text-align: center;
font-size: 64px;
}
p {
text-align: center;
}
h2 {
text-align: center;
}
iframe {
display: block;
border-style: none;
}
html {
height: 100%;
}
body {
font: normal 16px verdana, arial, sans-serif;
background-position: top;
height: 100%;
margin: 0;
}
.test {
width: 500px;
border: 2px solid black;
padding: 50px;
margin: auto;
background-color: #9FE7FF;
}
.body{
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.email-part {
font-weight: bold;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
.copyright{
color:white;
}
#media screen and (max-width: 600px) {
* {
box-sizing: border-box;
}
body {
padding: 1rem;
}
.test,
iframe {
width: 100%;
}
h1 {
font-size: 12vw;
}
}
#ICE_Plane, the trick here is since you are using position absolute ( getting out of the flux )
You need to specify a max height to your .body class, like a max-height: 100vh.
You could as well add a overflow-y: auto to make sure it shows the scrollbar when overflowing
Here is the example you provided working:
Let me know if that helped, or if you need more info
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.
I want to divide the page after the top bar but it won't change. I want to design a page with three sections but the page also contains menu bar or head bar. I have tried something like below but it doesn't show anything at the top bar.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial;
color: white;
}
.split {
color: white;
height: 80%;
width: 30%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
.left {
left: 0;
background-color: #111;
}
.right {
right: 0;
background-color: red;
}
#top {
height: 20%;
width: 100%;
}
</style>
</head>
<body>
<div id="top">
<h2>Three Equal Columns</h2>
</div>
<div class="split left">
</div>
<div class="split right">
</div>
</body>
</html>
You shouldn't use a fixed position concept like this in general, but apart from that you need to set top: 20% for the .split sections to leave space at the top for the top bar, plus you shouldn't use color: white on a white background, because text will remain invisible that way (white text on white background)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial;
}
.split {
height: 80%;
width: 30%;
position: fixed;
z-index: 1;
top: 20%;
overflow-x: hidden;
padding-top: 20px;
}
.left {
left: 0;
background-color: #111;
}
.right {
right: 0;
background-color: red;
}
#top{
height:20%;
width:100%;
}
</style>
</head>
<body>
<div id="top">
<h2>Three Equal Columns</h2>
</div>
<div class="split left">
</div>
<div class="split right">
</div>
</body>
</html>
My goal is to have a div for few images (it worked so far), the div for some text on the right side and other div for text on the bottom as well.
When I add text into the missedletters div it somehow goes down not sure why. I think there might be something with display:inline-block
that causes the mess, but I can't figure out what is it.
The CSS that matters:
body {
background-color: #303030;
font-family: 'Source Code Pro', monospace;
font-size: 28px;
}
body .arena {
min-height: 400px;
height: 50%;
width: 50%;
margin: auto;
margin-top: 11.5%;
background-color: darkseagreen;
border-radius: 15px;
}
.poorguy {
display: inline-block;
vertical-align: top;
margin-top: 12px;
min-width: 360px;
/* not sure if shouldn't be longer, but fits into it*/
min-height: 300px;
/* so i'll check it out in the process*/
bottom: 0px;
}
.missedletters {
vertical-align: top;
display: inline-block;
margin-top: 12px;
min-height: 320px;
min-width: 190px;
left: 0px;
bottom: 0px;
word-wrap: break-word;
}
.correctletters {
min-height: 80px;
vertical-align: top;
word-wrap: nowrap;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="background">
<div class="arena">
<div class="poorguy">
</div>
<div class="missedletters">
</div>
</div>
</div>
</body>
</html>
You just need to add a max-width/width to your missedletters div. You could use float: left; instead of display: inline-block;
I've hit a wall here...
I have a title that I want to align centrally on the page. I've done this by using #landingAreaContent {position: relative; margin: auto; text-align: center; background-color: blue;.
The title is wrapped in a div that is, in turn, sitting inside a full-screen div.
I then wanted to increase the title div's top margin to bring the title down. Simple, yes?
Except when I add in margin: 50px into the style for the div containing the title, the full-screen div moves down with it.
Even more annoyingly, when I try to do exactly the same thing with divs further down the page, everything works fine.
Why is this happening? See code and screen shots for context.
body {
margin: 0;
padding: 0;
}
#landingArea {
width: 100vw;
height: 100vh;
background-color: #6fc9ff;
}
#landingAreaContent {
position: relative;
margin: auto;
text-align: center;
background-color: blue;
}#belowFold {
width: 100%;
height: 100%;
background-color: white;
}
#belowFoldContent {
position: relative;
margin: auto;
margin-top: 50px;
text-align: center;
}
h1 {
margin: 0;
padding: 0;
font-family: 'Dancing Script', cursive;
font-size: 60px;
}
<!DOCTYPE html>
<html>
<head>
<title>Becky's Pet Services</title>
<link rel="stylesheet" type="text/css" href="bps2CSS.css">
<link href="https://fonts.googleapis.com/css?family=Dancing+Script|Raleway" rel="stylesheet">
</head>
<body>
<div id="landingArea">
<div id="landingAreaContent">
<img id="langingAreaLogo" src="">
<h1>Becky's Pet Services</h1>
</div>
</div>
<div id="belowFold">
<div id="belowFoldContent">
<h1>Welcome!</h1>
<p>This is an example of a title and some text that would be filled with a short, meaningful blurb about the company and available services.</p>
</div>
</body>
</html>
P.S. The garish colours are only there for visibility of the divs. :D
You have to force parent elements to contain their children (or their childrens' margins) in some cases:
#landingArea {
...
overflow: hidden; /* or auto */
}
html,
body {
margin: 0;
padding: 0;
}
#landingArea {
height: 100vh;
overflow: hidden;
background-color: #6fc9ff;
}
#landingAreaContent {
position: relative;
margin: auto;
text-align: center;
background-color: blue;
margin-top: 50px;
}
#belowFold {
width: 100%;
height: 100%;
background-color: white;
}
#belowFoldContent {
position: relative;
margin: auto;
margin-top: 50px;
text-align: center;
}
h1 {
margin: 0;
padding: 0;
font-family: 'Dancing Script', cursive;
font-size: 60px;
}
<div id="landingArea">
<div id="landingAreaContent">
<img id="langingAreaLogo" src="">
<h1>Becky's Pet Services</h1>
</div>
</div>
<div id="belowFold">
<div id="belowFoldContent">
<h1>Welcome!</h1>
<p>This is an example of a title and some text that would be filled with a short, meaningful blurb about the company and available services.</p>
</div>