There is a strange space on the right side of my web, whenever i zoom in. the space becomes bigger. can someone help me how to get rid of that.
here is my html:
<html>
<head>
<title>thesis</title>
<link rel = "stylesheet" href = "styles and pics/index.css">
</head>
<body>
<div id = "outer_wrapper">
<header>
<section>
<input type = "text" id = "username" name = "username" class = "text" placeholder = "E-mail"/>
<input type = "password" id = "password" name = "password" class = "text" placeholder = "Password"/>
<input type = "submit" id = "submit_login" name = "submit_login" class = "submit" value = "login"/>
</section>
</header>
<footer>
footer
</footer>
</div>
</body>
here is my css:
*{ padding:0px; margin:0px; }
body{ text-align:center;}
#outer_wrapper{ width:100%; height:700px; background-color:yellow; position:relative;}
header{ background-color:blue;height:70px;display:block;position:absolute;top:0px;width:100%;}
header section{ position:relative;top:20px;left:120px;}
.text{ height:25px;width:200px;padding-left:5px;}
#submit_login{height:25px;width:70px;background-color:green;border:0px;outline:none;cursor:pointer;color:white;}
.text,#submit_login{ margin-left:10px;}
footer{background-color:blue;height:40px;position:absolute;bottom:0px;width:100%;}
section { left: 120px; } is causing the issue. By default, section is inheriting width: 100% so moving it left is adding 120px to the total width.
Assuming you intend the header section to be offset 120px to the left, there are at least two ways to fix the issue:
Change section { left: 120px; } to section { margin-left: 120px; }
or
Add overflow: hidden; to header element i.e. header { overflow: hidden; }
Otherwise just remove left: 120px;
Remove the left:120px from: "header section{ position:relative;top:20px;left:120px;}"
Should be "{position:relative;top:20px;}".
Related
I want to fit the video to the screen and scrolling needs to be disabled.
Problem:
Instead of being full screen it is overflowing from the screen.
What am I doing wrong here?
<!DOCTYPE html>
<html>
<head>
<style>
.videosize {
position:absolute;
z-index:-1;
top:0;
left:0;
width:100%;
height:auto;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/indigo-player#1/lib/indigo-player.js"></script>
</head>
<body>
<div id="playerContainer" class="videosize">
<script>
const config = {
sources: [
{
type: 'hls',
src: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
}
],
};
const element = document.getElementById('playerContainer');
const player = IndigoPlayer.init(element, config);
</script>
</div>
</body>
</html>
Make the <body> element have a class where
position: relative , width: 100% and overflow: hidden are declared or use the inline style="..."
After doing this the video should take the width of the parent with a relative position.
The solution can be this:
Added position:fixed; in css
Added height:100%; in css
Added background: url('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8') no-repeat center center; in css
Added background-size: 100%; in css
Know Issues
NavigationUI visible only in full screen mode (F11 or F) given of the script (Need to change the script to fix these) but it still work.
Final Code
<!DOCTYPE html>
<html>
<head>
<style>
.videosize {
position:fixed;
z-index:-1;
top:0;
left:0;
width:100%;
height:100%;
background: url('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8') no-repeat center center;
background-size: 100%;
}
</style>
</head>
<body>
<div id="playerContainer" class="videosize">
</div>
<script src="https://cdn.jsdelivr.net/npm/indigo-player#1/lib/indigo-player.js"></script>
<script>
const config = {
sources: [
{
type: 'hls',
src: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
}
],
};
const element = document.getElementById('playerContainer');
const player = IndigoPlayer.init(element, config);
</script>
</body>
</html>
I'm putting together a simple todo application where the individual checkboxes and the labels belonging to them are created dynamically as the user presses the 'Add' button. I would like the checkboxes that are created to be aligned to the left at the time of creation, relative to the left side of the input text field. I could actually solve this part using the margin-left property.
What I would like is that the checkboxes stay where they are upon resizing the browser window either from the left or the right side and they keep sticking to the leftmost part of the input text field.
The black vertical line in the image is a guide I drew to indicate where I would like my checkboxes to stick upon resizing the window
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My JavaScript Todo App</title>
<link rel="stylesheet" type="text/css" href="css/myStyle.css">
</head>
<body>
<div class="outerContainer">
<div id="top" class="topContainer">
<label for="todoInput">
<input id="todoInput" type="text">
</label>
<button id="addButton">Add</button>
</div>
<div id="middle" class="middleContainer">
<ul id="todoList" class="middleTodoList"></ul>
</div>
</div>
</body>
<script src="js/todo.js"></script>
</html>
myStyle.css
li {
list-style: none;
}
input[type=checkbox]:checked + label {
text-decoration: line-through;
}
.outerContainer {
}
.topContainer {
text-align: center;
}
.middleContainer {
}
.middleTodoList {
text-align: center;
}
todo.js
const todoInput = document.getElementById('todoInput');
const addButton = document.getElementById('addButton');
const todoList = document.getElementById('todoList');
let listElementId = 0;
addButton.addEventListener('click', event => {
const checkBox = document.createElement('input');
checkBox.setAttribute("type", "checkbox");
checkBox.setAttribute("id", todoInput.value);
const itemLabel = document.createElement('label');
itemLabel.setAttribute('for', todoInput.value);
const bottomDivision = document.getElementById('middle');
const listElement = document.createElement('li');
const todoInputValue = todoInput.value;
if (todoInputValue) {
listElement.id = 'list-item-' + listElementId++;
itemLabel.append(todoInputValue);
listElement.append(checkBox, itemLabel);
todoList.append(listElement);
document.body.appendChild(bottomDivision);
}
todoInput.value = '';
});
I eventually found a solution that I like and does what I needed. I modified the HTML in a way that the two pair of <div> tags that were previously encapsulated in an outer <div> tag now exist on their own.
index.html
<div id="top" class="topContainer">
<label for="todoInput">
<input id="todoInput" type="text">
</label>
<button id="addButton">Add</button>
</div>
<div id="middle" class="middleContainer">
<ul id="todoList" class="middleTodoList"></ul>
</div>
I also added the following attributes to these class selectors.
myStyle.css
.topContainer {
justify-content: center;
align-items: center;
min-height: 5vh;
display: flex;
}
.middleContainer {
justify-content: center;
align-items: center;
display: flex;
}
.middleTodoList {
min-width: 11rem;
}
Just a quick on in relation to the following site:
christmas.drcrittall.com
My question, is why despite the following CSS:
html, body {
height:100%;
}
/* Background image for website */
body {
/*background: url("images/crumpled.jpg") no-repeat center center fixed;*/
background: url("../img/crumpled.jpg") no-repeat;
background-size: 100% 100%;
/*margin-bottom:5%;*/
}
#header {
height:20%;
border-style: solid;
border-color:red;
/*padding:0px; */
}
#middle {
height:60%;
/* border-style: solid;
border-color:green;*/
}
#cap {
height:20%;
border-style: solid;
border-color:blue;
/* Previously the click here text was overflowing out of this div. See here to see how to deal with this: https://css-tricks.com/almanac/properties/o/overflow/ */
/*overflow:auto;*/.
}
#form {
min-height:20%; /* Setting min-height of white-space beneath body enables container to expand with the form as it gets bigger */
display:none; /* This div is initially hidden until click button which activates jquery animation */
}
#main_image {
max-width:100%;
max-height:60vh; /*Set max and min heights to 60vh to lock within this container ie stop images expanding out */
min-height:60vh;
}
#candle_image {
width:100%;
height:100%;
}
#top_paper {
width:100%;
max-height:100%;
}
/* Make row height and columns fill entire height of containers */
.row, .col-md-6, .col-md-4, .col-md-6, .col-md-12, .col-md-8, .col-md-2, .col-md-3, {
height:100%;
}
Does the row within #cap and #head not fill 100% of the height? I have used flex box to center the font within the header, but can not seem to do the same with the cap... Here is the HTML:
<body>
<div class = "container-fluid center_font" id = "header">
<div class = "row" style = "border-style: solid; border-color:black;">
<div class = "col-md-12 col-xs-12">
<font id = "dear"> Merry Christmas! </font>
</div>
</div>
</div>
<div class = "container-fluid center_font" id = "middle">
<div class = "row"><!-- style = "border-style:solid; border-color:black;">-->
<div class = "col-md-3" id = "holly_1" style = "padding-top:10%;">
<img src = "../img/candles.png" id = "candle_image" class = "img-fluid">
</div>
<div class = "col-md-6 col-xs-12 center_font"><!-- style = "border-style:solid; border-color:yellow;">-->
<img src = "" id = "main_image" class = "img-circle">
</div>
<div class = "col-md-3" id = "holly_2" style = "padding-top:10%;">
<img src = "../img/candles.png" id = "candle_image" class = "img-fluid">
</div>
</div>
</div>
<div class = "container-fluid" id = "cap"><!-- style = "border-style:solid; border-color:green;">-->
<div class = "row" style = "border-style: solid; border-color:black;">
<div class = "col-md-offset-3 col-md-6 col-xs-12 center_font">
<font class = "ammend" id = "dear" style = "font-size:45px;"> Love from Matthew</font><br>
<!--<a href = "#" id = "reveal">
<font id = "dear" class = "fiddle" style = "font-size: 20px;">Click Me</font>
</a>
-->
</div>
<div class = "col-md-offset-3 col-md-6 col-xs-12 center_font">
<a href = "#" id = "reveal">
<font id = "dear" class = "fiddle" style = "font-size: 20px;">Click Me</font>
</a>
</div>
</div>
</div>
</body>
Font size is too big and collapses the offset columns, and you are missing center_font class on #cap.
Add center_font class to #cap.
Change font-size from 45px to less or equal than 36px on font#dear.ammend to keep 1 line of text ("Love from Matthew").
I have to fit my div size is height=250px and width=1000px and want to fit image automatically in this size. but when i upload image it not fits in div.
My code is here:
css
#main {
width:1000px;
margin:0 auto;
background: #fff;
position:relative;
z-index:1;
}
.promo-image {
margin:0 0 8px;
}
.promo-image img {
vertical-align:top;
}
html:
<main id="main" role="main">
<div class="promo-img">
<?php
$sql4 = "SELECT * FROM adverts_top ORDER BY id DESC LIMIT 1";
$query4 = $conn->query($sql4);
$row4 = $query4->fetch(PDO::FETCH_ASSOC);
$link4 = $row4['link_url'];
$images4 = $row4['imagepath'];
$immg4 = basename($images4);
$imagee4 = "adverts"."/".$immg4;
$rowc = $query4->rowCount(PDO::FETCH_ASSOC);
if ($rowc>=1) {
echo "
<a href='$link4'; target='_blank'><img src='$imagee4';></a>
";
}
else {
echo "";
}
?>
</div>
</main>
You need to use width:100% in <img> you can use inline css as well as you can write it in external file
Inline
External
Pass a class in <img> and write css according to that
.fullWidth{
width:100%;
}
I think he means this
.promo-image {
position: absolute;
top: 0;
right: 0;
bottom: 8px;
left: 0;
}
seeing how he set #main's position to relative without setting any other values (like top or left) for #main
I have a square that contains pictures and each picture is supposed to be clickable to take you to that person's profile, but my top left picture is not clickable. I'm not sure what I'm doing wrong.
Here is my jsfiddle so you can see the problem.
<div id = 'crew_div'>
<div class = 'my_crew'><div id = 'jason'><a href = 'http://www.startingtofeelit.com/author/musicmakesmelosectrl/'><img src='http://www.startingtofeelit.com/profile/jason.jpg' title = 'View Posts by Jason'></a></div></div>
<div class = 'my_crew'><div id = 'dharam'><a href = 'http://www.startingtofeelit.com/author/4everevolution/'><img src='http://www.startingtofeelit.com/profile/dharam.png' title = 'View Posts by Dharam'></a></div></div>
<div class = 'my_crew'><div id = 'james'><a href='http://www.startingtofeelit.com/author/jjstiles/'><img src='http://www.startingtofeelit.com/profile/james.png' title = 'View Posts by James'></a></div></div>
<div class = 'my_crew'><div id = 'cody'><a href='http://www.startingtofeelit.com/author/codecray/'><img src='http://www.startingtofeelit.com/profile/Cody.jpg' title = 'View Posts by Cody'></a></div></div>
</div>
#crew_div {
position:relative;
width: 312px;
height:312px;
}
.my_crew {
position:absolute;
}
.my_crew img {
width:156px;
display:block;
}
.my_crew #jason {
top:0px;
left:0px;
position:relative;
}
.my_crew #dharam {
top:0px;
left:156px;
position:relative;
}
.my_crew #james {
top: 156px;
left: 0px;
position:relative;
}
.my_crew #cody {
top:156px;
left:156px;
position:relative;
}
Add a z-index to your image like this :
.my_crew #jason {
top:0px;
left:0px;
position:relative;
z-index: 1;
}
You haven't specified width/height dimensions or top/left positioning for your <div class="my_crew">. They are each positioned at the top-left, and their child <div> is then positioned relative to the absolutely positioned parent. That's why the top-left isn't clickable, because it's really stacked under 3 other <div>s.
A better solution would be to combine the two <div>s into one.
See the fiddle here: http://jsfiddle.net/R4HJb/8/
<div id = 'crew_div'>
<div class = 'my_crew jason'><a href = 'http://www.startingtofeelit.com/author/musicmakesmelosectrl/'><img src='http://www.startingtofeelit.com/profile/jason.jpg' title = 'View Posts by Jason'></a></div>
<div class = 'my_crew dharam'><a href = 'http://www.startingtofeelit.com/author/4everevolution/'><img src='http://www.startingtofeelit.com/profile/dharam.png' title = 'View Posts by Dharam'></a></div>
<div class = 'my_crew james'><a href='http://www.startingtofeelit.com/author/jjstiles/'><img src='http://www.startingtofeelit.com/profile/james.png' title = 'View Posts by James'></a></div>
<div class = 'my_crew cody'><a href='http://www.startingtofeelit.com/author/codecray/'><img src='http://www.startingtofeelit.com/profile/Cody.jpg' title = 'View Posts by Cody'></a></div>
</div>
#crew_div {
position:relative;
width: 312px;
height:312px;
}
.my_crew {
position:absolute;
width: 156px;
height: 156px;
}
.my_crew img {
width:156px;
display:block;
}
.my_crew.jason {
top:0px;
left:0px;
}
.my_crew.dharam {
top:0px;
left:156px;
}
.my_crew.james {
top: 156px;
left: 0px;
}
.my_crew.cody {
top:156px;
left:156px;
}
Here is what you need, I reorganized your HTML a bit :)
New Fiddle
<div id = 'crew_div'>
<a href = 'http://www.startingtofeelit.com/author/musicmakesmelosectrl/'><div class = 'my_crew'><div id = 'jason'><img src='http://www.startingtofeelit.com/profile/jason.jpg' title = 'View Posts by Jason'></div></div></a>
<a href = 'http://www.startingtofeelit.com/author/4everevolution/'><div class = 'my_crew'><div id = 'dharam'><img src='http://www.startingtofeelit.com/profile/dharam.png' title = 'View Posts by Dharam'></div></div></a>
<a href='http://www.startingtofeelit.com/author/jjstiles/'><div class = 'my_crew'><div id = 'james'><img src='http://www.startingtofeelit.com/profile/james.png' title = 'View Posts by James'></div></div></a>
<a href='http://www.startingtofeelit.com/author/codecray/'><div class = 'my_crew'><div id = 'cody'><img src='http://www.startingtofeelit.com/profile/Cody.jpg' title = 'View Posts by Cody'></div></div></a>
Why don't you just float them next to each other? That will also save some lines of CSS.
.my_crew {
float:left;
}
Example: http://jsfiddle.net/T5LCm/