Webpage Resize Autofit HTML Simple - javascript

So I just got done making my first JQuery project which is a simple full width slider. (Getting back to HTML & CSS & im currently working in C#)
Here is the issue; I dont want to be able to scroll on the page I want it to be autofit to the webpage.
Lets say I open the webpage right now, I want resize it how ever I want its responsive & its working like a charm. but you can still scroll down.
(Feel free to try it yourself with my code)
I remember this being really simple to fix but for some reason I cant remember how I did it back in the day. I'm pretty sure I will have to change something with the height; it in the CSS file or inside the body of the HTML source.
Here is the fiddle
My CSS file is completly empty.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Full Width Responsive Image Slider</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
<style type="text/css">
*{padding: 0; margin: 0;}
body {font-family: Sans-Serif;}
img {max-width: 100%;}
.cycle-slideshow {
width: 100%;
display: block;
position: relative;
margin: 0 auto;
}
.cycle-prev, .cycle-next {
font-size: 200;
color: #FFF;
display: block;
position: absolute;
top: 50%;
margin-top: -16px;
z-index: 9999;
cursor: pointer;
}
.cycle-prev {left: 10%;}
.cycle-next{right: 10%;}
.cycle-pager{
width: 100%;
text-align: center;
display: block;
position: absolute;
position: top;
bottom: 20px;
z-index: 9999;
}
.cycle-pager span {
text-indent: 100%;
white-space: nowrap;;
width: 12px;
height: 12px;
display: inline-block;
border: 1px solid #FFF;
border-radius: 50%;
margin: 0 10px;
cursor: pointer;
}
.cycle-pager .cycle-pager-active {background: #FFF;}
</style>
</head>
<body>
<div class="container">
<!-- Full Width Responsive Slider -->
<div class="cycle-slideshow">
<span class="cycle-prev">〈</span>
<span class="cycle-next">〉</span>
<span class="cycle-pager"></span>
<img src="images/Untitled.png">
<img src="images/wp.png">
<img src="images/wp2.png">
</div>
<!-- Full Width Responsive Slider -->
</body>
</html>

try this code.
html,body,img {padding: 0; margin: 0;height:100%;width:100%}
body {font-family: Sans-Serif;}
.container{height:100%;width:100%;overflow: hidden;}
.cycle-slideshow {
height: 100%;
where
*{padding: 0; margin: 0;}
body {font-family: Sans-Serif;}
img {max-width: 100%;}
.cycle-slideshow {
and if you want to change the size, just change .container

Related

How do I get the text body lower but not make it a footer?

HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="NWC.css">
<meta charset="utf-8">
<!--Font Import Links-->
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght#700&display=swap" rel="stylesheet">
<!---JS File Imports-->
<script src="NWC.js">
</script>
<!--HTML Code Starts Below-->
</head>
<body>
<section>
<div class="header">
<div class="logo_container">
<h1>N W C</h1>
</div>
</div>
</section>
<!--Cover Section-->
<section>
<div class="coverpic">
<img src="file:///C:/Users/jakes/Desktop/NWC/nwcgfrey.png" alt="NWC LOGO" width="60%" height="40%">
</div>
</section>
<!--About Section-->
<section>
<div class="about-section">
<h1>About NWC</h1>
<p>New World Coding is a startup teaching kids to program. Coding is an essential skill to learn because it is our future. All of our technology today whether it's using a computer to making a pot of coffee is run by the code engineers write. Here at NWC, we have group lessons for you and a friend, or 1:1 lessons! For more information about NWC, our lessons, or any other questions, please fill click the button below.</p>
</div>
</section>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
body {
background-image: url(file:///C:/Users/jakes/nwcWebsitecity.png);
background-size: cover;
}
.header {
display: block;
background-color: #1E1E1E;
background-size: 1000px;
width: 100%;
height: 80px;
}
/*
.inner_header {
width: 1000px;
height: 100%;
display: table-cell;
margin: 0 auto;
}
*/
.logo_container {
height: 100%;
display: table;
float: left;
}
.logo_container h1{
color: white;
height: 100%;
display: table-cell;
vertical-align: middle;
font-family: 'Josefin Sans', sans-serif;
padding-left: 10px;
}
.coverpic {
bottom: 750px;
vertical-align: middle;
text-align: center;
display: table-cell;
}
.about-section {
background-image:
url(file:///C:/Users/jakes/nwcWebsitecity.png);
height: auto;
width: 100%;
position: fixed;
color: white;
font-family: 'Josefin Sans', sans-serif;
color: white;
text-align: center;
transform: rotate(180);
}
[What site looks like now, I just want to move the body section lower1
Basically, I want the text body to move down lower so that you don't see it when you first load into the site, I want the .coverpic to be centered when you first load into the site and when you start scrolling you see the about section.
U can use margine-top in css.
which text u want to lower just write in css margine-top: and how px u want.
Like example
h1 {
margine-top: 50%;}
to be in the middle screen or just lower or more high % to make it in the right position
Add a class to your text (p tag):
<p class= "sample">
and then adjust the margin in your CSS:
.sample {
margin-top: 50px;
}
adjust the margin-top accordingly for how low you want the text to go.
edit: change the "color" in your about-section to black for example. Basically you have white on white right now.
You'll also notice that I added margin-top: 50px on both about-section and sample classes. The first margin-top brings the title down and the second brings the text down.
.about-section {
background-image:
url(file:///C:/Users/jakes/nwcWebsitecity.png);
height: auto;
width: 100%;
position: relative;
font-family: 'Josefin Sans', sans-serif;
color: black;
text-align: center;
transform: rotate(180);
margin-top: 50px;
}
.sample {
margin-top: 50px;
};

How can I make a box fit in a picture in css properly (view video to understand what i mean)

Basically I want to put a screen behind an iphone X skin. How do I scale it so that it fits perfectly and adapts to zooming. The dark grey box is the screen. Basically, something like this is my endgoal. https://live.hqt.space/login
My HTML:
body {
background-image: url("https://www.xmple.com/wallpaper/linear-gradient-green-purple-1920x1080-c2-00ff7f-7b68ee-a-255-f-14.svg");
background-attachment: fixed;
background-repeat: no-repeat;
background-size:cover;
}
.Containerforlogin {
width: 40%;
height: 80%;
background: rgba(0, 0, 0, 0.5);
color: #fff;
top: 50%;
left: 50%;
position: sticky;
transform: translate(-50%,10%);
box-sizing: border-box;
}
img {
margin: auto;
display: block;
margin-left: auto;
margin-right: auto;
position: sticky;
}
<div class="Containerforlogin">
<img src="http://i63.tinypic.com/34pi1c6.jpg" alt="Image and video hosting by TinyPic">
</div>
If all you want to do is fit the image of the iPhone X screen into the div, one way to do it would be to change the position to absolute, and then the height and width to 100%. However, with your current code it is not possible to actually put text inside the iPhone X screen.
Here's my interpretation of what I think you're asking for:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>🤑 Cold Hard Trivia </title>
<link rel="stylesheet" href="Styles.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="Containerforlogin">
<img src="http://i63.tinypic.com/34pi1c6.jpg" border="0" alt="Image and video hosting by TinyPic">
</div>
<div id="inside-phone-screen">Text for login</div>
</body>
</html>
CSS:
body {
background-image: url("https://www.xmple.com/wallpaper/linear-gradient-green-purple-1920x1080-c2-00ff7f-7b68ee-a-255-f-14.svg");
background-attachment: fixed;
background-repeat: no-repeat;
background-size:cover;
}
.Containerforlogin {
width: 50vw;
height:90vw;
background: rgba(0, 0, 0, 0.5);
color: #fff;
left:50%;
transform:translate(-50%,10%);
position: sticky;
box-sizing: border-box;
border-radius:10vw;
}
img {
margin: auto;
position:absolute;
width:100%;
height:100%;
}
#inside-phone-screen{
padding:20% 10%;
}

children div not stacking side by side inside parent div

For some reason the video and sidebar div keep pushing each other outside of the wrapper div. In addition, it seem like the main wrapper div is not being defined for some reason. I been messing around for hours now and it seem like nothing work . Can some give me some pointer.
https://jsfiddle.net/4z5wwq2j/
Thank you.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style>
#wrapper{
width: 100%;
height: 500px;
white-space: nowrap;
display: inline-block;
}
#sidebar{
height: 420px;
width: 10%;
background-color: red;
}
#video{
border-radius: 25px;
background: #C5EFF7;
border: 5px solid #19B5FE;
padding: 20px;
width: 65%;
height: 420px;
display: inline-block;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="sidebar"></div>
<div id="video"></div>
</div>
</body>
</html>
You have to set display: inline-block; for the #sidebar div as well:
https://jsfiddle.net/4z5wwq2j/1/
#sidebar{
height: 420px;
width: 10%;
background-color: red;
display:inline-block;
}
Set the vertical-align as well for both of them as you need.

Issue with message container width CSS

I am trying to show a message on the top - center of my web page. I create a very basic example :
http://jsbin.com/eniwax/3/edit
Here the problem is with message container with. I want to set the container width equals to the message text width means ( auto, width vary according to the size of message ).
Do it like this DEMO
Explanation: Use a nested div and make the container div width as 100% and give text-align: center; to the container div
CSS
.test {
top: 0;
text-align: center;
position: relative;
width:auto;
z-index: 100;
border: 1px solid #F0C36D;
background-color: #F9EDBE;
font-size: 12px;
font-weight: bolder;
padding : 4px;
display: inline-block;
}
.container {
width: 100%;
text-align: center;
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="test">I am a sample text</div>
</div>
</body>
</html>
Use a <span /> inside your div rather than a <div /> on it's own.
Divs are block level elements which means they fill all the available width that they have. Spans are inline which means they are only as wide as their contents.
Give display: inline-block; and text-align: center; to the parent.
body {text-align: center;}
.test
{
top: 0;
text-align: center;
position: relative;
width:auto;
display: inline-block;
z-index: 100;
border: 1px solid #F0C36D;
background-color: #F9EDBE;
font-size: 12px;
font-weight: bolder;
padding : 4px;
}
Demo: http://jsbin.com/eniwax/15

webpage (app) layout - set 100% height (html, css)

I'm having a HUGE problem, geting my masterpage layout to stretch to 100% browser window height. There is no problem for width. I tried many different solutions, but none worked.
This is what I have so far. I managed to expand html and body to height:100%, but div#container is giving me problems...it wont expand to height:100%. For testing purposes I put borders arround html, body and container, to see which one isn't working. Any help appritiated. I'm designing my web app in VS2010 and using Chrome (also tested in IE and Mozilla with no success).
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="container">
<div id="headercontent">
HEADER
</div>
<div id="leftcontent">
<p>LEFT CONTENT</p>
<p>MENU</p>
<p>MENU</p>
<p>MENU</p>
</div>
<div id="rightcontent">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="footercontent">
FOOTER
</div>
</div>
</form>
</body>
</html>
And my stylesheet.css
body{
font-family: "Lucida Grande" , "Lucida Sans Unicode" , Verdana, Arial, Helvetica, sans-serif;
font-size: 15px;
background: yellow;
}
html{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 2px solid red;
}
body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 2px solid blue;
}
#container{
width: 100%;
height: 100%;
margin: 0px;
border: 2px solid black;
line-height:150%;
}
#headercontent{
height: 70px;
padding: 0.5em;
color: white;
background-color: gray;
clear: left;
}
#leftcontent{
float: left;
width: 160px;
margin: 0;
padding: 1em;
border-right: 1px solid gray;
}
#rightcontent{
margin-left: 190px;
border-left: 1px solid gray;
padding: 1em;
}
#footercontent{
padding: 0.5em;
color: white;
background-color: gray;
clear: left;
}
Your body element IS 100% height as you set it but you've not set the contents to anything to position anywhere so they follow the normal flow, like a stack of boxes, as they should. You also don't have enough content to fill the screen. If you want the footer to stick to the bottom, search here on SO or Google for "sticky footer".
If you want some of the content to stretch further, you'll have to add some height to those.
Just do the following:
Set html and body to height: 100%;:
html,
body {
height: 100%;
}
Next step: wrap your form with a container and gibt it a minimum height of 100%:
#wrapper {
min-height: 100%;
}
This won't work in IE6. Therefor add a little hack:
* html #wrapper {
height: 100%;
}
Your #container element is nested inside your <form> tag, so even though you've set the height of #container to 100%, this will set it's height to 100% of it's parent element i.e. the <form> tag.
Try moving your #container <div> tag so it sits outside the <form> tag like this: http://jsfiddle.net/ianoxley/E4zAm/
If you can live with having div#container using position: absolute, you can use this little trick:
#container{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: 0px;
border: 2px solid black;
line-height:150%;
}
Setting all four layout attributes (top/right/bottom/left) to the values you want will cause the element to stretch to accomodate those values.

Categories