I have the following HTML code and I am trying to position the links right below the image, but fail badly.
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<html>
<head>
<body>
<style>
html, body {
height: 90%;
background:#000000;
color:#fff;
}
img {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
max-width: 100%;
height: auto;
}
</style>
</head>
<img src="http://www.clker.com/cliparts/b/3/1/7/1374685821502984977google%20logo-md.png">
<br>Deutsch | English</p>
</body>
</html>
However, I need to place the links right below the image (centered) but it seems like it's impossible.
I wonder if any of you knows a solution that would work in this case.
try this
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<html>
<head>
<body>
<style>
html, body {
height: 90%;
background:#000000;
color:#fff;
text-align: center;
}
img {
max-width: 100%;
height: auto;
}
a{
width: 100%;
}
</style>
</head>
<img src="http://www.clker.com/cliparts/b/3/1/7/1374685821502984977google%20logo-md.png">
<br>Deutsch | English</p>
</body>
</html>
Try This Code
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body {
height: 90%;
background:#000000;
color:#fff;
}
img {
max-width: 100%;
}
.container {
position: relative;
}
.link {
position: absolute;
top: 200px;
left: 60px;
}
</style>
</head>
<body>
<div class="container">
<img src="http://www.clker.com/cliparts/b/3/1/7/1374685821502984977google%20logo-md.png" alt="" />
<h3 class="link">Deutsch | English</h3>
</div>
</body>
</html>
Related
I've recently started learning CSS Flexbox. Even though I'm being able to follow the curriculum, I'm having issues with some codes.
In the code below, I'm trying to use these two properties I learnt recently, flex-shrink and flex-grow, inside of a flex-container, the first two of the four div boxes are visible but the other two are not visible in the screen layout. Can someone please explain me that why I'm having such issues and what should I do?
Thank you.
Here's my code-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<style>
#box-container {
display: flex;
height: 300px;
}
#box-1 {
background-color: dodgerblue;
height: 50px;
flex-grow: 1;
}
#box-2 {
background-color: orangered;
height: 50px;
flex-grow: 2;
}
#box-3 {
background-color: dodgerblue;
height: 50px;
flex-shrink: 2;
}
#box-4 {
background-color: orangered;
height: 50px;
flex-shrink: 1;
}
</style>
<div id="box-container">
<div id="box-1"></div>
<div id="box-2"></div>
<div id="box-3"></div>
<div id="box-4"></div>
</div>
</body>
</html>
None of the boxes has any content. The first two boxes can expand because of flex-grow and the next two shrink by default even if you don't specify flex-shrink. This is why only the first two boxes are visible.
If you want to let them take equal widths with no content you can use flex: 1 1 auto;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<style>
#box-container {
display: flex;
height: 300px;
}
#box-container > * {
flex: 1 1 auto;
height: 50px;
}
#box-1 {
background-color: dodgerblue;
}
#box-2 {
background-color: orangered;
}
#box-3 {
background-color: dodgerblue;
}
#box-4 {
background-color: orangered;
}
</style>
<div id="box-container">
<div id="box-1"></div>
<div id="box-2"></div>
<div id="box-3"></div>
<div id="box-4"></div>
</div>
</body>
</html>
I have a doubt, I would like to scale the sides of my background image outside the visible width, so as to extend the background to the height that determined
To be more clear, I would like the browser to read only the width that I defined to be viewed, while the rest of the background would serve only to not leave the background spaghetti, my idea would be to extend the page down while the sides would serve only not to make the background ugly and disproportionate.
sorry my bad english.
CSS:
/* Main */
body{
margin: 0;
padding: 0;
}
.container{
position: absolute;
}
.main-logo h1{
position: inherit;
left: 0;
-webkit-text-stroke: 1.5px black;
font-size: 32px;
font-family: "8 BIT WONDER";
}
.background-img-main{
position: absolute;
width: 100%;
height: 1800px;
background-size: 0, 100%;
z-index: -100;
overflow: hidden !important;
}
HTML:
<!doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Forbidden Series</title>
<link rel="stylesheet" href="assets/styles.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<body>
<!--Container-->
<div class="container">
<!--Header-->
<header>
<div class="main-logo"><h1><font color="#780002">Forbidden </font><font color="#FFFFFF">Series</font></h1></div>
</header>
</div>
<img src="img/Screenshot_1.png" class="background-img-main">
<img src="img/background.jpg" class="background-media-main">
<!--Scripts-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
</body>
</html>
How I wish it were
set an height of 100% on your main container, and put and overflow:auto rule
.container{
position: absolute;
height:100%;
overflow:auto;
}
also, you want to set off the body and html overflow
body,html {
overflow:none;
}
Preface: I'm quite unfamiliar with CSS
I would like to position this FAB button, currently on the bottom right corner of the screen, to the top right corner. The CSS I have for the below FAB is
"[tooltip]:before {left: 110% !important; right: auto !important}", ".container-fab {right: 0 !important; left: auto !important;}"
Image of FAB button on app
If you want to make the position of your button fixed, then just give it position: fixed; right: 0; top: 0; it will give you the fixed button on top right corner.
to give space from right most, just set right: 15px; top: 15px in above css.
you will get that button on top right corner.
I assume (what I got after reading your question) your button positioned absolute is inside parent div with position relative. You want to button to be on top right corner. I have also added in the code if your are using "[tooltip]:before" as a button
.parent{
height:100px;
width:100px;
position:relative;
background-color:yellow;
}
.parent::before {
content: "+";
position: absolute;
width: 20px;
height: 20px;
border-radius: 20px;
top: 0px;
right: 0px;
margin: 5px;
background-color: blue;
color: aliceblue;
display: flex;
/* to center the + symbol */
justify-content: center;
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./main.css" />
<title>Document</title>
</head>
<body>
<div class="parent"></div>
</body>
</html>
.parent{
height:100px;
width:100px;
position:relative;
background-color:yellow;
}
.button {
position: absolute;
width: 20px;
height: 20px;
border-radius: 20px;
top: 0px;
right: 0px;
margin: 5px;
background-color: blue;
color: aliceblue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./main.css" />
<title>Document</title>
</head>
<body>
<div class="parent">
<button class="button">+</button>
</div>
</body>
</html>
I am trying to create a simple webpage using bootstrap that has some text fixed centered at the top and some more centered text fixed to the bottom of the page.
In the middle of the page I need an centrally horizontal and vertically placed image that scales depending on resolution/device.
The page needs to be full height of the viewport.
I have tried using the following code but it doesnt work properly and is a miss and there must be a simpler way of doing it?
The logo image is 450px x 480px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="" />
<meta name="author" content="" />
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<style>
html, body {
height: 100%;
}
.holder {
width: 100%;
height: 100%;
min-height: 100%;
display: block;
}
.fill {
min-height: 100%;
height: 100%;
}
.col-md-12 {
position: relative;
min-height:100vh!important;
}
.toptext{
background-color:#ffffff!important;
z-index:99999!important;
}
.bottomtext {
position: absolute;
width: 100%;
left: 0;
bottom: 0;
text-align: center;
margin-bottom: 20px;
background-color: #ffffff !important;
z-index: 99999 !important;
}
.middleimage > img {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index:1!important;
max-height:350px!important;
}
#media screen and (min-width:1px) and (max-width: 767px) {
h3 {
font-size: 16px !important;
}
.bottomtext{
bottom:80px!important;
}
html,body {
overflow: hidden!important;
}
}
#media screen and (min-width:567px) and (max-width: 767px) {
.bottomtext {
bottom: 80px !important;
}
html, body {
overflow:visible !important;
}
.middleimage>img{
max-height:100px!important;
}
}
#media screen and (min-width:760px) {
.bottomtext {
bottom: 0 !important;
}
html, body {
overflow: visible !important;
}
.middleimage > img {
max-height: 480px !important;
}
}
</style>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container fill">
<div class="holder">
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="toptext text-center">
<h3>Top of page info</h3>
<hr>
</div>
<div class="middleimage">
<img src="/holdingfiles/mylogo.png" alt="" class="img-responsive " />
</div>
<div class="bottomtext">
<hr>
Bottom of page / footer info
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Carl,
Since you are using bootstrap, go with 'img-responsive' class on div/img and it should scale nicely.
EDITED: you can use it as background image for your div: check out the following link which should give you what you want
https://css-tricks.com/perfect-full-page-background-image/
I have an IMG element on my page. I set the height and width to 100% so IMG tag should cover the page. However I have some space at the end of the image
Please see here: http://kekor.hostzi.com/
Dev tools screenshot : http://i.imgur.com/0TKkDDv.jpg
Here is the code
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
* {margin: 0; padding: 0;}
.balotelli { width: 100%; height: 100% }
body {background-color: red; height: 100%}
html {height: 100%}
</style>
</head>
<body>
<img class="balotelli" src="balotelli.jpg" alt="ss" />
</body>
</html>
I don't see any margins on your page. Are you referring to the scrollbars?
To remove scrollbars, use this CSS on your page:
html, body {
margin: 0 !important;
overflow: hidden !important;
}
You will also want to set your image to block element:
.balotelli {
width: 100%;
height: 100%;
display: block;
}
Try cleaning up styles syntax and add position: absolute;
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
* {margin: 0; padding: 0;}
.balotelli { width: 100%; height: 100%; position: absolute; }
body {background-color: red; height: 100%;}
html {height: 100%;}
</style>
</head>
<body>
<img class="balotelli" src="http://kekor.hostzi.com/balotelli.jpg" alt="ss" />
</body>
</html>