I'm having difficulty fixing a problem in my html/css code for the position attribute. I want to have a word "Social" to the right and bottom with a fixed position so I can scroll with it in the same spot. I can't even get it to the right and bottom regardless of what positioning it is. Please tell me where my problem may be stemming from so I can fix it.
<head>
<meta charset="utf-8" />
<title>Template_</title>
<!--><meta name="generator" content="Geany 1.27" /></-->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
.container{
position:relative;
width= 100%;
height= 100%;
overflow=scroll;
}
.banner{
<!--></-->
position:absolute;
margin:5px;
width:90%;
right: 0px;
}
.banner .test{
<!--></-->
font-weight: 900;
font-size: 3em;
margin:10px;
font-variant: small-caps;
}
.banner .logo{
<!-->controls images within banner</-->
position: ;
}
.social_bar{
width: 300px;
border: 3px solid #73AD21;
}
#social_strip{
<!-->post button on either left or right to remain fixed
through scrolling
position:fixed;
right:0;</-->
position: fixed;
bottom: 0px;
right: 0px;
}
.content_container{
<!-->contain all content within container, relative to
overall container</-->
position: relative;
margin:5px;
padding:5px;
}
</style>
</head>
<div class="social_bar" id="social_strip">social</div>
<body class="container">
<div class="banner">
<p>Banner</p>
<div class="test">
<p>Test</p>
</div>
</div>
<div class="content_container">
<p>Content</p>
</div>
</body>
remove your comments on html style. It will work.
I am not sure of this.
But in css, you need /* */ to comment.
(e.g)
/* This is a comment */
<head>
<meta charset="utf-8" />
<title>Template_</title>
<!--><meta name="generator" content="Geany 1.27" /></-->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
.container{
position:relative;
width= 100%;
height= 100%;
overflow=scroll;
}
.banner{
position:absolute;
margin:5px;
width:90%;
right: 0px;
}
.banner .test{
font-weight: 900;
font-size: 3em;
margin:10px;
font-variant: small-caps;
}
.banner .logo{
position: ;
}
#social_strip{
position: fixed;
bottom: 0px;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
}
.content_container{
position: relative;
margin:5px;
padding:5px;
}
</style>
</head>
<div class="social_bar" id="social_strip">social</div>
<body class="container">
<div class="banner">
<p>Banner</p>
<div class="test">
<p>Test</p>
</div>
</div>
<div class="content_container">
<p>Content</p>
</div>
</body>
Related
I'm trying to make an image with an caption on the left-middle. The caption should be always at the left-middle or anywhere on the left side of the image and it's size should be vary with browser size simultaneously.
The problem is that when I resize the window than size of the caption won't change and It's position is also not fixed w.r.t the image.
.page-overview{
width: 100%;
border: 1px solid black;
}
.overview-content img{
width: 100%;
}
.caption{
position: absolute;
top: 20%;
left: 18px;
font-size: 80%;
font-family: 'Source Sans Pro', sans-serif;
z-index: 1;
}
.caption span{
display: block;
margin: 8px 0;
padding: 10px 17px;
border-radius: 3px;
background-color: #00000033;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test YOU</title>
</head>
<body>
<!--Here can have other content too-->
<div class="page-overview">
<div class="overview-content"><img src="https://images5.alphacoders.com/481/481903.png" alt="Delilious & Yum" height="auto">
<div class="caption">
<span>Test your best here</span>
<span>It's Yum 😋</span>
</div>
</div>
</div>
Remove position: absolute; and use relative instead. absolute will not account for browser shrinkage, it will just still stay in the specified area.
.page-overview {
width: 100%;
border: 1px solid black;
}
.overview-content img {
width: 100%;
}
.caption {
position: relative;
width: fit-content;
margin: auto 0;
top: 20%;
left: 18px;
font-size: 80%;
font-family: 'Source Sans Pro', sans-serif;
z-index: 1;
}
.caption span {
display: block;
margin: 8px 0;
padding: 10px 17px;
border-radius: 3px;
background-color: #00000033;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test YOU</title>
</head>
<body>
<!--Here can have other content too-->
<div class="page-overview">
<div class="overview-content">
<img src="https://images5.alphacoders.com/481/481903.png" alt="Delilious & Yum" height="auto">
<div class="caption">
<span>Test your best here</span>
<span>It's Yum 😋</span>
</div>
</div>
</div>
The main thing is to wrap a position:absolute divs with a position:relative div, so the absolute div will be relative that that parent.
Besides that, I used flexbox to center the content.
That is assuming you want the caption ON the image...
.page-overview{
width: 100%;
border: 1px solid black;
}
.overview-content img{
width: 100%;
}
.caption{
position: absolute;
top: 20%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
font-size: 80%;
font-family: 'Source Sans Pro', sans-serif;
z-index: 1;
}
.caption span{
display: block;
margin: 8px 0;
padding: 10px 17px;
border-radius: 3px;
background-color: #00000033;
}
.image-wrapper {
position: relative;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test YOU</title>
</head>
<body>
<!--Here can have other content too-->
<div class="page-overview">
<div class="overview-content">
<div class="image-wrapper">
<a href="#">
<img src="https://images5.alphacoders.com/481/481903.png" alt="Delilious & Yum" height="auto"/>
</a>
<div class="caption">
<span>Test your best here</span>
<span>It's Yum 😋</span>
</div>
</div>
</div>
</div>
I'm making a simple web page for practice and attempting to incorporate an image gallery, but I think I messed up my divs somehow because when I add content to the main part like image thumbnails they cause a weird gap between the header and left navbar. It's probably some simple solution but I'm super beginner so it's escaping me. Any help at all is appreciated, thanks in advance!
Here is my HTML code:
<!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,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<title>Lab 8</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<img class= "image" alt="flower" src="flower.jpg"style="max-width:100%;height:auto;">
<h1 class="header">Photos By Doug</h1>
<div id ="wrapper">
<main> Here is some content info about Doug Kowalski Photography
<img src="desert.jpg" class="thumbnail" height="100" width="100" />
<img src="hills.jpg" class="thumbnail" height="100" width="100"/>
</div>
<div class="nav">
Home<br>
Journals<br>
Books<br>
Nature<br>
Contact<br>
</div>
<img class ="image2" alt="vine" src="vine.jpg"style="max-width:100%;height:auto;">
</main>
</body>
</html>
And CSS:
body {
background-color: #88abc2;
margin:0;
}
.image{
height: 250px;
border-radius:5px;
background-repeat: no-repeat;
padding-bottom:10px;
float:left;
width: 25%
}
.header{
display:flex;
padding-top: 100px;
color: white;
text-align: center;
font-size: 50px;
font-family: papyrus;
background-color:#49708A;
justify-content: center;
align-items:center;
}
#wrapper {
height:100%;
margin: 10px;
padding: 0px;
width:67%;
}
.nav {
height: 100%;
width: 20%;
padding-top: 40px;
background-color:#49708A;
}
.nav a{
padding-left:3px;
padding: 6px 6px 6px 32px;
font-weight: bold;
color: #EBF7F8;
text-decoration: none;
font-size: 25px;
display: block;
}
ul {
list-style-type: none;
margin: 0;
overflow: hidden;
}
.nav a:hover {
color: #CAFF42;
}
main{
padding-top: 38px;
text-align:left;
padding-left: 30%;
}
.image2{
height:10%;
width:15%;
position: absolute;
right: 0px;
bottom: 0px;
right:0px;
bottom: 0px;
}
.thumbnail:hover {
position:relative;
top:-25px;
left:-35px;
width:500px;
height:auto;
display:block;
z-index:999;
}
Edit: and a photo of the area in question:
Do you mean like this?
I saw this:
<div id=wrapper>
<main>
</div>
</main>
Edit: Mistyped styles.css
I have a login modal and I want there to be a blue background. I do not understand what is wrong with my CSS.
I want the div for my content to be 200px height and 300px wide. I thought giving it a specific height and width would fix the issue but it has not.
I expect my content to have a white background in a 200px by 300px white box,but the white bakcgound will not show.
* {
margin: 0;
padding: 0;
}
html,
body {
box-sizing: border-box;
overflow: hidden;
height: 100%;
}
body {
min-height: 100%;
min-width: 100%;
background: url("images/newnewgirls.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
position: relative;
}
.container {
height: 100%;
width: 100%;
overflow: hidden;
}
.container2 {
width: 80%;
margin: auto;
text-align: center;
}
header {
padding: 1em;
margin: 0;
}
header #branding {
float: left;
}
header #branding img {
width: 55%;
}
header nav {
float: right;
margin-top: 0.5em;
}
header nav li {
display: inline;
padding: 1em;
}
header nav li a {
text-decoration: none;
}
#login-modal {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
#login-content {
border: 10 px solid black;
height: 300px;
width: 500px background-color:white;
text-align: center;
}
input[type=text],
input[type=password] {
display: block;
margin: 0 auto;
}
<!DOCTYPE HTML>
<html>
<head>
<link rel="apple-touch-icon" sizes="180x180" href="images\free_horizontal_on_white_by_logaster.jpg">
<link rel="icon" type="image/jpg" sizes="32x32" href="images\free_horizontal_on_white_by_logaster.jpg">
<link rel="icon" type="image/jpg" sizes="16x16" href="images\free_horizontal_on_white_by_logaster.jpg">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="resolve.css">
<title>Resolve - Real Women, Real Feedback</title>
</head>
<body>
<header>
<div class="container">
<div id="branding">
<img src="images/lasttry.png" alt="resolvelogo">
</div>
<nav>
<li>Home</li>
<li>How It Works</li>
<li>Contact</li>
<li>FAQ</li>
<li><button id="login" class="button">Log In</button></li>
<div id="login-modal">
<div id="login-content">
<span class="close">×</span>
<form>
<input type="text" placeholder="username">
<input type="password" placeholder="password">
<button>Log In</button>
</form>
</div>
</div>
</nav>
</header>
<section>
<div class="container2">
<div>
<h1>Guys</h1>
<h2>dhkjsdhkjh duhfsduhfdiu fudshfisduhus usihfksdjfhsdiuh ushfkjdshfidsu kjhfudihf dihakdhf djkhksdj idhjdsshf siudhk shadjkhfisdu fskjahfdudd jkshfiusdh feuidhdhsui dsduhskdj.</h2>
<button>Get Started</button>
</div>
<div>
<h1>Ladies</h1>
<h2>Resolve is an easy and fun way to make quick cash while you help guys turn into men you would date! Give them honest feedback that would help them improve. Receive five dollars for every review! </h2>
<button id="login">Get Started</button>
</div>
<div class="appad">
<h2>App Coming Soon!</h2>
</div>
</div>
<script src="resolve.js"></script>
</body>
</html>
There are two mistakes in your CSS.
It's #login-content and not .login-content. Since it's an id.
You're missing a semi-colon after width.
#login-content {
border: 10 px solid black;
height: 300px;
width: 500px;
background-color: white;
text-align: center;
}
Working snippet with the changes:
*{
margin:0;
padding:0;
}
html, body{
box-sizing:border-box;
overflow:hidden;
height:100%;
}
body{
min-height:100%;
min-width:100%;
background: url("images/newnewgirls.jpg");
background-size:100% 100%;
background-repeat: no-repeat;
background-position:center center;
position:relative;
}
.container{
height:100%;
width:100%;
overflow:hidden;
}
.container2{
width:80%;
margin:auto;
text-align:center;
}
header{
padding:1em;
margin:0;
}
header #branding{
float:left;
}
header #branding img{
width:55%;
}
header nav{
float:right;
margin-top:0.5em;
}
header nav li{
display:inline;
padding:1em;
}
header nav li a{
text-decoration:none;
}
#login-modal{
width:100%;
height:100%;
background-color:rgba(0, 0, 0, 0.5);
position: absolute;
top:0;
left:0;
display:flex;
justify-content: center;
align-items: center;
text-align:center;
}
#login-content{
border: 10 px solid black;
height:300px;
width:500px;
background-color:white;
text-align:center;
}
input[type=text], input[type=password]{
display:block;
margin: 0 auto;
}
<!DOCTYPE HTML>
<html>
<head>
<link rel="apple-touch-icon" sizes="180x180" href="images\free_horizontal_on_white_by_logaster.jpg">
<link rel="icon" type="image/jpg" sizes="32x32" href="images\free_horizontal_on_white_by_logaster.jpg">
<link rel="icon" type="image/jpg" sizes="16x16" href="images\free_horizontal_on_white_by_logaster.jpg">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="resolve.css">
<title>Resolve - Real Women, Real Feedback</title>
</head>
<body>
<header>
<div class="container">
<div id="branding">
<img src="images/lasttry.png" alt="resolvelogo">
</div>
<nav>
<li>Home</li>
<li>How It Works</li>
<li>Contact</li>
<li>FAQ</li>
<li><button id="login" class="button">Log In</button></li>
<div id="login-modal">
<div id="login-content">
<span class="close">×</span>
<form>
<input type="text" placeholder="username">
<input type="password" placeholder="password">
<button>Log In</button>
</form>
</div>
</div>
</nav>
</header>
<section>
<div class="container2">
<div>
<h1>Guys</h1>
<h2>dhkjsdhkjh duhfsduhfdiu fudshfisduhus usihfksdjfhsdiuh ushfkjdshfidsu kjhfudihf dihakdhf djkhksdj idhjdsshf siudhk shadjkhfisdu fskjahfdudd jkshfiusdh feuidhdhsui dsduhskdj.</h2>
<button>Get Started</button>
</div>
<div>
<h1>Ladies</h1>
<h2>Resolve is an easy and fun way to make quick cash while you help guys turn into men you would date! Give them honest feedback that would help them improve. Receive five dollars for every review! </h2>
<button id="login">Get Started</button>
</div>
<div class="appad">
<h2>App Coming Soon!</h2>
</div>
</div>
<script src="resolve.js"></script>
</body>
</html>
The element has the ID login-content, not a class. Change .login-content to #login-content on your CSS.
Im working on a code and I would like to make the space between "Szafranowka" and "Apartaments & Restaurant" smaller. Here's how it looks like now: https://gyazo.com/d6843d8857e954acbae5c1da748c044b
I really cannot find the answer that would perfectly fit my expectations. Please, could any1 help me? :)
Also, I would like to make a small square around "Wejscie/Entrance", but when im trying to do it with the border, it looks like this: https://gyazo.com/f84fedc7a78854773b287e01ebd3a21f
Here's a part of code that im using to make a border:
<h5 style="border:3px; border-style:solid; border-color:#000000; padding: 1em;">Wejscie/Entrance</h5>
and here's my code:
HTML:
<!DOCTYPE HTML>
<head>
<title>Szafranowka - Apartments & Restaurant </title>
<meta name="viewport" content="width=device-width", initial-scale=1">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<link rel="stylesheet" href="style.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Tangerine" rel="stylesheet">
</head>
<body>
<!-- Główny DIV całej strony -->
<div id="container">
<!-- Lewa część tła strony, zamknięta w divie -->
<div id="background">
<img src="background.jpg"> </img>
</div>
<div id="header">
<h2>Szafranowka</h2> <p>Apartments & Restaurant </p>
<br></br> <h5 id="entrance">Wejscie/Entrance</h5>
</div>
</div>
</body>
</html>
CSS:
body {
padding: 0;
margin: 0;
height: 100vh;
width: 100vw;
}
#container
{
width: 100%;
height: 100%;
}
#background
{
width: 100%;
height: 100%;
position: absolute;
opacity: 0.5;
filter: blur(3px);
filter: contrast(50%);
filter: brightness(30%);
}
#background img
{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
#header
{
position: absolute;
z-index: 1;
font-family: 'Tangerine', cursive;
text-align: center;
color: #9F5F9F;
font-size: 70px;
display: table-cell;
vertical-align: middle;
width: 100%;
text-shadow: 2px 2px #660055;
}
to your #entrance, try this :
#entrance {
width: 8rem; //or another size
margin auto; // to center
border: 2px solid;
}
<div id="header">
<h2>Szafranowka</h2> <p>Apartments & Restaurant </p>
<br></br> <span id="entrance">Wejscie/Entrance</span>
</div>
CSS:
h2{
margin:5px;
line-height:15px
}
#entrance{
border:1px solid;
}
<!DOCTYPE HTML>
<head>
<title>Szafranowka - Apartments & Restaurant </title>
<meta name="viewport" content="width=device-width", initial-scale=1">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<link rel="stylesheet" href="style.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Tangerine" rel="stylesheet">
<style>
body {
padding: 0;
margin: 0;
height: 100vh;
width: 100vw;
}
#container
{
width: 100%;
height: 100%;
}
#background
{
width: 100%;
height: 100%;
position: absolute;
opacity: 0.5;
filter: blur(3px);
filter: contrast(50%);
filter: brightness(30%);
}
#background img
{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
#header
{
position: absolute;
z-index: 1;
font-family: 'Tangerine', cursive;
text-align: center;
color: #9F5F9F;
font-size: 70px;
display: table-cell;
vertical-align: middle;
width: 100%;
text-shadow: 2px 2px #660055;
}
#header h2
{
margin-bottom: -30px;
}
#entrance span
{
border: 1px solid;
padding: 15px;
}
</style>
</head>
<body>
<!-- Główny DIV całej strony -->
<div id="container">
<!-- Lewa część tła strony, zamknięta w divie -->
<div id="background">
<img src="background.jpg"> </img>
</div>
<div id="header">
<h2>Szafranowka</h2> <p>Apartments & Restaurant </p>
<br></br> <h5 id="entrance"><span>Wejscie/Entrance</span></h5>
</div>
</div>
</body>
</html>
I'm working on header section where there are 3 spans, one floating to the left, one floating to the right and the other span in the middle. The middle span is not getting horizontally aligned no matter what.
body{
font-family: Myriad Set Pro;
margin: 0;
}
/* ===================== Header Section =============================*/
#header{
width: 100%;
position: fixed;
height: 75px;
line-height: 75px;
box-shadow: 5px 5px 5px #edeff2;
text-align: center;
}
#position{
float: right;
margin-right: 10px;
/*width: 20px;*/
/*margin-top: -75px;*/
}
#logo{
float: left;
height: inherit;
}
#logo:hover{
cursor: pointer;
}
#name{
border: 1px solid black;
position: absolute;
margin: 0px auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dash Html</title>
<link rel="stylesheet" type="text/css" href="dash.css">
</head>
<body>
<div id="header">
<a href="https://www.google.com" target="_blank">
<img src="abc.png" id="logo">
</a>
<span id="position"> Developer Developer </span>
<span id="name">SKSV</span>
</div>
</body>
</html>
Here is a simpler solution. Wrap them in a parent div and make the width equal. Take a look at the following:
body{
font-family: Myriad Set Pro;
margin: 0;
}
/* ===================== Header Section =============================*/
#header{
width: 100%;
position: fixed;
height: 75px;
line-height: 75px;
box-shadow: 5px 5px 5px #edeff2;
text-align: center;
font-size:0;
}
.header-col
{
display:inline-block;
width:33.3333333334%;
vertical-align:middle;
font-size:13px;
}
#position{
display:block;
text-align:right;
}
#logo{
display:block;
text-align:left;
}
#name{
border: 1px solid black;
display:block;
text-align:center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dash Html</title>
<link rel="stylesheet" type="text/css" href="dash.css">
</head>
<body>
<div id="header">
<div class="header-col">
<a href="https://www.google.com" target="_blank" id="logo">
<img src="abc.png">
</a>
</div>
<div class="header-col">
<span id="name">SKSV</span>
</div>
<div class="header-col">
<span id="position"> Developer Developer </span>
</div>
</div>
</body>
</html>
I would use left: 50%. Here. I this what you wanted:
body{
font-family: Myriad Set Pro;
margin: 0;
}
/* ===================== Header Section =============================*/
#header{
width: 100%;
position: fixed;
height: 75px;
line-height: 75px;
box-shadow: 5px 5px 5px #edeff2;
text-align: center;
}
#position{
float: right;
margin-right: 10px;
/*width: 20px;*/
/*margin-top: -75px;*/
}
#logo{
float: left;
height: inherit;
}
#logo:hover{
cursor: pointer;
}
#name{
border: 1px solid black;
position: absolute;
margin: 0px auto;
left: 50%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dash Html</title>
<link rel="stylesheet" type="text/css" href="dash.css">
</head>
<body>
<div id="header">
<a href="https://www.google.com" target="_blank">
<img src="abc.png" id="logo">
</a>
<span id="position"> Developer Developer </span>
<span id="name">SKSV</span>
</div>
</body>
</html>