I've decided to make a site about the current election(s) and I'm already having trouble with the intro page.
#wrapper {
height: 900px;
width: 900px;
border: solid;black;
margin-left: auto;
margin-right: auto;
}
#repicon {
background-image: url(http://i.imgur.com/Ow7TR.png);
background-size: 140px 140px;
}
<div id="Wrapper">
<div id="repicon"></div>
</div>
HTML
<div id="Wrapper">
<div id="repicon">sdsdfsdsds</div>
CSS:
#wrapper {
height: 900px;
width: 900px;
border: solid;black;
margin-left: auto;
margin-right: auto;
}
#repicon {
background-image: url(http://i.imgur.com/Ow7TR.png);
//background-size: 140px 140px;
height: 500px;
width: 500px;
}
DEMO LINK
you have a few typos(id="Wrapper" won't match the #wrapper in CSS) plus for a background-image to work it needs height
As your comment, you want the background-image centered, just apply center in background shorthand.
#wrapper {
height: 900px;
width: 900px;
border: solid black;
margin-left: auto;
margin-right: auto;
}
#repicon {
background: url(http://i.imgur.com/Ow7TR.png) no-repeat center / 140px 140px;
height:140px;
}
<div id="wrapper">
<div id="repicon"></div>
</div>
Its not working because your div has no content and that results that it has no height. To see your image you have to add content to the div or a min-height
#repicon {
min-height: 140px;
background-image: url(http://i.imgur.com/Ow7TR.png);
background-size: 140px 140px;
}
See this working Fiddle
You need to have content inside your div if you want the "background-image" to show up.
You need to define height and width for #repicon
#wrapper {
height: 900px;
width: 900px;
border: solid;black;
margin-left: auto;
margin-right: auto;
}
#repicon {
background-image: url(http://i.imgur.com/Ow7TR.png);
background-size: 140px 140px;
width: 140px;
height: 140px;
}
<DOCTYPE html>
<html>
<head>
<title>2016 Election</title>
<meta name="keywords" content="Donald Trump, Bernie Sanders, Ted Cruz, Hillary Clinton, 2016 Elections, 2016 Primaries, Republican, Democrat">
<meta name="description" content="2016 Presidential Election, Primary Nominations">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="Wrapper">
<div id="repicon"></div>
</div>
</body>
</html>
Just add " " to your div and update your css for best result.
#wrapper {
height: 900px;
width: 900px;
border: solid;black;
margin-left: auto;
margin-right: auto;
}
#repicon {
background-image: url(http://i.imgur.com/Ow7TR.png);
background-size: 140px 140px;
}
<DOCTYPE html>
<html>
<head>
<title>2016 Election</title>
<meta name="keywords" content="Donald Trump, Bernie Sanders, Ted Cruz, Hillary Clinton, 2016 Elections, 2016 Primaries, Republican, Democrat">
<meta name="description" content="2016 Presidential Election, Primary Nominations">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="Wrapper">
<div id="repicon"> </div>
</div>
</body>
</html>
Related
I am new to HTML and CSS and have created a birthday card which I want to have a 50/50 split down the centre . I have inserted my image on the left however when I add text to the right and side it is too close to the centre line, so I have used some padding (padding-left: 50px;) to move it further across. The issue is when I do this the box on the right increases. I want the box on the right to remain the same size but just be able to adjust the text inside that box without it resizing.
.card {
box-sizing: border-box;
width: 600px;
height: 400px;
border: 5px solid;
display: flex;
}
.left {
flex: 1;
background-image: url("https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/golden-retriever-royalty-free-image-506756303-1560962726.jpg");
border-style: solid;
background-size: cover;
background-position: 60% 5%;
width: auto;
height: auto;
max-width: 300px;
max-height: 600px;
}
.right {
flex: 1;
background-color: burlywood;
border: 5px solid;
padding-left: 50px;
}
<!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">
<link rel="stylesheet" href="style.css">
<title>Flex</title>
</head>
<body>
<div class="card">
<div class="left">
</div>
<div class="right">
<h1 class="title">Hello</h1>
<h2 class="birthday">Happy Birthday</h2>
<p class="message">We really miss you and are thinking about you</p>
<p class="bye"> Lots of love and see you soon x</p>
</div>
</div>
</body>
</html>
Try this
.card {
box-sizing: border-box;
width: 600px;
height: 400px;
border: 5px solid;
display: flex;
}
.left {
background-image: url("https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/golden-retriever-royalty-free-image-506756303-1560962726.jpg");
border-style: solid;
background-size: cover;
background-position: 60% 5%;
width: 50%;
height: auto;
max-width: 300px;
max-height: 600px;
}
.right {
width: 50%;
background-color: burlywood;
border: 5px solid;
padding: 0 25px;
box-sizing: border-box;
}
I've browsed a whole lot of posts on here, some of which relate more closely to my issue than others; yet I've still to find a solution/explanation. -- Sorry if I've missed the answer somewhere!
Here goes.
I have this issue on with regards to a hero image on a site I'm creating, that I'd love to see resolved before I venture any further.
My issue is, that currently, on zoom, it goes towards the upper left corner, and adds a horizontal scrollbar at the bottom.
Ideally I'd like for the hero image to be centered when I zoom in with the browser, and for there to be no horizontal scrollbar.
Hopefully there's a simple fix, or something obvious I'm missing, and you lot could provide my feeble mind with an explanation as to what exactly it is that I'm not getting.
Below is provided the HTML and CSS I have so far. - Thanks in advance!
* {
margin: 0;
padding: 0;
font-size: 10px;
}
.hero_Image {
height: 1080px;
width: 1920px;
background-image: url("https://i.imgur.com/NVdZ3Ja.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
border-bottom: 1px solid lightgray;
margin: 0 auto;
position: relative;
box-sizing: border-box
}
.preview {
height: 50rem;
width: 1920px;
margin-left: 10%;
background: green;
margin: 0 auto;
}
<!doctype html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>treadwell.io</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="hero_Image">
</section>
<section class="preview">
</section>
</body>
</html>
to fix your problem add this css to your file and your problem is that you let the width of sections overflowing
.hero_Image {
height: 500px;
width: 500px;
background-image: url(https://images.homedepot-static.com/productImages/6c9e2ae9-7592-4de9-8ca9-2692bb908be7/svn/commercial-electric-specialty-meters-ms602h-64_1000.jpg);
background-repeat: no-repeat;
background-position: center;
background-size:cover;
border-bottom: 1px solid lightgray;
position: relative;
box-sizing: border-box;
overflow: hidden;
margin: 0 auto;
}
.preview {
height: 500px;
width: 500px;
margin-left: 10%;
background: green;
margin: 0 auto;
overflow:hidden;
}
<!doctype html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>treadwell.io</title>
<link rel="stylesheet" href="style.css">
</head>
<style>
</style>
<body>
<section class="hero_Image">
</section>
<section class="preview">
</section>
</body>
</html>
Here's my code. I'm a beginner so please let me know if I have any errors.
I need to have the text resize and move when the browser is scaled. As of now it just stays and doesn't move no matter the size. I've tried a media query's but they haven't worked.
html{
background-image: url(images/CBG1.png);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
h1{
text-align: -webkit-center;
color: #FF6633;
position: absolute;
margin: 0px;
margin-left: 650px;
margin-top: 314px;
width: auto;
height: auto;
}
<!doctype html>
<html lang="en">
<head>
<title>Hoax Studios</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="uft-8">
<link rel="stylesheet" href="work.css">
</head>
<body>
<div id="container">
<div class="header">
<h1>WORK</h1>
</div>
</div>
</body>
</html>
You need to change the alignment and width for h1 as below
h1 {
color: #FF6633;
position: absolute;
text-align: center;
margin-left: auto;
margin-top: 314px;
width: 100%;
height: auto;
}
I'm trying to put one div below another one, but the code is not working properly. As you can see in the code below, there is the wrapper ("#main"), then the top ("#top"), floating left, and the content ("#content"), floating left and clearing left also. Here is the code:
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<title></title>
</head>
<body>
<div id="main">
<div id="top">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
CSS:
#top{
width: 100%;
height: 100%; <!-- Already tried putting fixed height -->
left: 0px;
top: 0px;
position: absolute;
background-color: #ff0000;
display: block;
float: left;
}
#content{
width: 600px;
height: 400px;
left: 50%;
transform: translateX(-50%);
background-color: #999999;
position: absolute; <!-- Already tried removing this line -->
display: block; <!-- Already tried removing this line and the same one from #top-->
float: left; <!-- Already tried removing this line -->
clear: left; <!-- Already tried clear:both -->
}
But, for some reason, the grey div is not going under the red one. I have no idea what is happening. Please find below the image that is showing on my browser.
As top is positioned absoulte you cant clear left,
try reomving this property form #top
position:absolute;
and from #content remove
position:absolute;
transform: translateX(-50%);
float:left;
try this:
#top{
width: 100%;
height: 300px;
background-color: #ff0000;
float: left;
margin: 0;
}
#content{
width: 600px;
height: 400px;
background-color: #999999;
float: left;
clear: both;
}
and if you want the "content" to be to the right more, you can do something else:
#content {
width: 600px;
height: 400px;
background-color: #999999;
clear: both;
//NOTE MARGIN 0 auto will center the div for you
margin: 0 auto;
// or set a margin yourself ex:
margin: 0 5px 0 30px;
}
The thing is: when I remove
position:absolute
from #top and #content, the #top loses its height property. Also, a small white margin appears on Chrome. The only solution I found was to include position:absolute and top:0; and left:0;
The code I'm using now is
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<title></title>
</head>
<body>
<div id="main">
<div id="top">
<p>aaa</p>
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
CSS:
#top{
width: 100%;
height: 100%;
background-color: #ff0000;
float: left;
margin: 0;
}
#content{
width: 600px;
height: 400px;
background-color: #999999;
float: left;
clear: both;
}
But I want the #top to fill all the page when the page loads, and then the user has more content when he scrolls down.
Please find an image of actual page:
http://imgur.com/96gnwgv
Thanks!
Simply translate it with translateY. Here's the solution:
#top{
width: 100%;
height: 100%; <!-- Already tried putting fixed height -->
left: 0px;
top: 0px;
position: absolute;
background-color: #ff0000;
display: block;
float: left;
}
#content{
width: 600px;
height: 400px;
left: 25%;
background-color: #999999;
position:relative;
transform: translateY(150%);
}
Please try below code to remove top white line
body{
margin:0;
padding:0;
}
Position absolute consists from browser window in both left and top positions.
Please find the html and css code
<!Doctype>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css"/>
<title></title>
<style type="text/css">
body{
margin:0;
padding:0;
}
#main{
width: 100%;
height: 100%;
margin:0 auto;
background-color: #ff0000;
}
#content{
width: 600px;
height: 400px;
margin: 0 auto;
background-color: #999999;
}
</style>
</head>
<body>
<div id="main">
<div id="top">
TOP
</div>
<div id="content">
content
</div>
<div id="footer">
</div>
</div>
</body>
</html>
Hope this helps.
You can try this
HTML
<body>
<div id="main">
<div id="top">
TOP
</div>
<div id="content">
BOTTOM
</div>
<div id="footer">
FOOTER
</div>
</div>
</body>
CSS
#top {
width: 100%;
height: 100%; /**as you are giving here a 100% height you need to place some content inside the div **/
background-color: #ff0000;
display: block;
float: left;
}
#content {
width: 600px;
height: 400px;
background-color: #999999;
margin:0 auto;
}
Yo can see a fiddle here
http://jsfiddle.net/SoniaGM/ecu3fuzy/
Hope this helps.
What i want to do is to scroll my web page in two direction that is leftPanel in left to right direction while rightPanel in right to left direction but the header remain fixed in its postion. But i am stuck some where.
here is my code:
HTML File-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Page </title>
<link rel='stylesheet' href='css/default.css'>
</head>
<body class='aboutUsBody'>
<div id='header'></div>
<div id='mainPanel'>
<div id='leftPanel'></div>
<div id='rightPanel'></div>
</div>
</body>
</html>
CSS File-
html{
width: 100%;
height: 100%;
}
body{
width: 100%;
height: 100%;
margin: 0px;
}
#header{
width: 100%;
height: 10%;
background: #bad960;
}
#mainPanel{
height: 90%;
display: inline;
overflow-y: scroll;
}
#leftPanel{
float: left;
margin-left: -200px;
display: inline;
position: relative;
width:100 %;
height: 100%;
background: red;
}
#rightPanel{
display: inline-block;
position: relative;
width:100%;
height: 100%;
background: black;
}
please look at the image for further explaination:
at the page load scroll will be at center and the two divs positioned accordingly, when i scroll up the leftPanel scrolls from left to right and when i scroll down its rightPanel move from right to left.
What should i do ??
What you are doing is quite awkward to achieve because the scrollable divs must have a known width otherwise it is really difficult to control the line-wrap to act in your favour, but if you have a fairly static design to aim for it can work quite well.
You have quite a few strange things in your code that don't seem to be doing anything useful but it could be due to me misunderstanding what you are aiming for, also, some javascript might be essential for this, at least to get the left panel to start scrolled all the way to the right.
Here is my working css for something like what you are trying to do:
html{
width: 100%;
height: 100%;
}
body{
width: 100%;
height: 100%;
margin: 0px;
}
#header{
width: 100%;
height: 10%;
background: #bad960;
}
#mainPanel{
height: 90%;
}
#leftPanel{
float: left;
width:50%;
height: 100%;
background: red;
overflow-x: auto;
}
#rightPanel{
float: left;
color: red;
width:50%;
height: 100%;
background: black;
overflow-x: auto;
}
.horizScroll{
width: 800px;
}
#leftPanel .horizScroll{
direction: rtl;
}
And a jsfiddle
I have done some research and i had achieved it by adding a little jquery.
My code is :
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Page </title>
<link rel='stylesheet' href='css/default.css'>
<script src="./jQuery.1.10.0.js"></script>
<script>
$(document).ready(function(){
$("#mainPanel").scrollLeft(document.body.clientWidth*0.25);
$(window).bind('mousewheel DOMMouseScroll', function(event){
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
}
else {
}
});
});
</script>
</head>
<body class='aboutUsBody'>
<div id='header'></div>
<div id='mainPanel'>
<div id='panelOne' class='panel'></div>
<div id='panelTwo' class='panel'></div>
</div>
</body>
</html>
CSS file
html{
width: 100%;
height: 100%;
}
body{
width: 100%;
height: 100%;
margin: 0px;
}
#header{
width: 100%;
height: 10%;
background: #bad960;
position: fixed;
}
#mainPanel{
top:10%;
position: relative;
width:100%;
height: 90%;
overflow-x:scroll;
display: block;
background: yellow;
}
#panelOne{
position: absolute;
display: inline;
width: 1000px;
height: 100%;
background: red;
}
#panelTwo{
position: absolute;
display: inline;
margin-left: 1000px;
width: 1000px;
height: 100%;
background: aqua;
}
and here its fiddle:
JSFiddle