Currently I am making a website. I input images into a div, and then text overlays that image to describe it. I put the text over the image, and then put a opacity of .5. The problem with my code is that the text will not scroll. The scroll is shown, but it will not work.
My HTML
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css"/>
<style type="text/css">
<!--
body {
margin: 0px;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="background">
<h10>.</h10>
</div>
<div id="header">
<div id="logobackground">
<img src="http://localhost/cabinchic/logo.png">
</div>
<div id="navbar">
<a href="http://localhost/cabinchic/home.html">
<div id="homebutton">
<h1> Home </h1>
</div>
</a>
<a href="http://localhost/cabinchic/homedecor.html">
<div id="homedecorbutton" style="border-radius: 8px; color: #00693E;;background-image: url(http://localhost/cabinchic/woodplankgreen.jpg)">
<h1> Home Decor </h1>
</div>
</a>
<a href="http://localhost/cabinchic/askheather.html">
<div id="askheatherbutton">
<h1> Ask Heather </h1>
</div>
</a>
</div>
</div>
<div id="leftbox">
</div>
<div id="mainbox">
<div class="picture" style="background-image: url(http://localhost/cabinchic/stones.jpg)">
<div class="text">
<h1> 26473264738654356427564 gyugfyubyeefwafwaf67erafh6ea7f67webf7bqyeuiewHFUIWhf78whiuNEuiwehui </h1>
</div>
</div>
</div>
<div id="footer">
<div id="footerborder">
<h10>.</h10>
</div>
<center>
<img src="http://localhost/cabinchic/logo.png" style="max-height: 18%; margin-top: -2%">
<div id="footertextcr"> <h1>All Rights Reserved © 2014 Python Daily</h1> </div>
<div id="footertext"> <h1>Logo made by Fatpaint | Site made by Michael Jones</h1> </div>
</center>
</div>
</div>
</body>
</html>
My CSS
/*Dartmouth Green Color Code Is #00693E*/
#background {
background-image: url("http://localhost/cabinchic/flatstone.jpg");
z-index: -10;
height: 160%;
width: 100%;
position: absolute;
}
#wrapper {
height: 100%;
width: 100%;
/*overflow-y: scroll;*/
position: absolute;
}
#header {
height: 100%;
width: 100%;
position: fixed;
}
#logobackground {
width: 100%;
background-image: url("http://localhost/cabinchic/wood.jpg");
text-align: center;
position: fixed;
margin-top: -3.8%;
}
#navbar {
height: 10%;
width: 100%;
background-image: url("http://localhost/cabinchic/woodbark.jpg");
margin-top: 13.6%;
position: fixed;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
#homebutton {
background-image: url("http://localhost/cabinchic/woodplank.jpg");
height: 10%;
width: 12%;
position: fixed;
margin-left: 19%;
text-align: center;
font-size: 80%;
color: black;
}
#homebutton:hover {
color: #00693E;
border-radius: 8px;
}
#homedecorbutton {
background-image: url("http://localhost/cabinchic/woodplank.jpg");
height: 10%;
width: 12%;
position: fixed;
margin-left: 44%;
text-align: center;
font-size: 80%;
color: black;
}
#homedecorbutton:hover {
color: #00693E;
border-radius: 8px;
}
#askheatherbutton {
background-image: url("http://localhost/cabinchic/woodplank.jpg");
height: 10%;
width: 12%;
position: fixed;
margin-left: 69%;
text-align: center;
font-size: 80%;
color: black;
}
#askheatherbutton:hover {
color: #00693E;
border-radius: 8px;
}
#leftbox {
width: 20%;
height: 105.8%;
position: absolute;
background-image: url("http://localhost/cabinchic/barkpine.jpg");
margin-top: 19%;
border-right: 1px solid black;
border-bottom: 1px solid black;
border-top: 1px solid black;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
z-index: -1;
background-size: 100%;
}
#mainbox {
width: 76%;
height: 100%;
position: absolute;
margin-top: 20.4%;
margin-left: 22%;
background-image: url("http://localhost/cabinchic/barkbrown.jpg");
border-radius: 8px;
border: 1px solid black;
/*background-size: 100%;*/
z-index: -1;
}
.picture {
border-radius: 6px;
border: 1px solid black;
background-size: cover;
position: absolute;
height: 55%;
width: 80%;
margin-left: 10%;
border-bottom-right-radius: 0px;
max-height: 55%;
z-index: 1;
}
.text {
overflow-y: scroll;
width: 100%;
height: 20%;
max-height: 20%;
background-color: black;
color: white;
opacity: .5;
border-top: 2px solid white;
margin-top: 34.3%;
font-size: 60%;
z-index: 2;
position: relative;
}
#footer {
width: 100%;
margin-top: 70%;
background-image: url("http://localhost/cabinchic/wood.jpg");
border-bottom: 1px solid black;
}
#footerborder {
width: 100%;
height: 2%;
margin-top: 40%;
background-image: url("http://localhost/cabinchic/woodbark.jpg");
}
#footertextcr {
color: white;
font-size: 50%;
margin-top: -3.5%;
}
#footertext {
color: white;
font-size: 40%;
margin-top: -1%;
}
a, u {
text-decoration: none;
}
Sorry that there is no spacing in the CSS code it didn't paste right...
Problem #1:
Your header has a height of 100%, a width of 100%, and is fixed over the page, thus covering the div and scroll bars and removing the ability to scroll.
Problem #2:
The container for the text, #mainbox has a z-index of -1, thus putting it and its children behind of everything else:
#mainbox {
width: 76%;
height: 100%;
position: absolute;
margin-top: 20.4%;
margin-left: 22%;
background-image: url("http://localhost/cabinchic/barkbrown.jpg");
border-radius: 8px;
border: 1px solid black;
/*background-size: 100%;*/
}
JSFiddle Demo
Related
I want to create a circle image with text like a picture, i upload in below
But i create a circle image with text like this show in after correct image
.circles {
margin: auto;
height: 73px;
width: 130px;
border: 2px solid black;
display: flex;
justify-content: center;
overflow: hidden;
background-color: black;
opacity: 50%;
border-top-right-radius: 50%;
border-top-left-radius: 50%;
margin-top: -169px;
}
.tit {
color: white
}
<div className="circle">
<img src={imageupload} className="cirimage" />
</div>
<div className="circles">
<p className="tit">Title</p>
</div>
.round {
background: #fff;
border: 2px solid #000;
width: 100px;
height: 100px;
border-radius: 50px;
overflow: hidden;
}
.text {
background-color: black;
opacity: 50%;
color: #fff;
padding: 10px;
text-align: center;
z-index: 999;
position: relative;
}
.image {
background-color: #e6baba;
height: 100px;
width: 100px;
position: relative;
top: -38px;
z-index: 9;
}
<div class="round">
<div class="text">
Text
</div>
<div class="image">
Add Image Here
</div>
</div>
update your CSS file
.text-container {
background-color: black;
opacity: 50%;
padding: 10px;
text-align: center;
z-index: 999;
color: #fff;
position: relative;
}
.image-container {
background-color: #e6baba;
height: 100px;
width: 100px;
z-index: 9;
position: relative;
top: -38px;
}
.circle-container {
background: #fff;
border: 2px solid #000;
height: 100px;
width: 100px;
overflow: hidden;
border-radius: 50px;
}
Use HTML as below
<div class="circle-container">
<div class="image-container">
Add Image Here
</div>
<div class="text-container">
Text
</div>
</div>
I'm currently working in a final assignment for a class. I need to create a basic webpage (actually, the main goal of the assignment is to learn to use the local storage) but i got stuck on a very early stage of the making (i'm pretty novice in this). I've been using fixed divs for the main structure of the webpage and now idk how to add more content. i tried inherent position but everything went wrong.
the code: https://codepen.io/ipanonima/pen/WNbNeJm
html of the body:
<body>
<div class="main">
<div class="main-bar">
<div class="main-bar-container">
<div class="main-bar--logo">
<img src="./public/logo.png">
</div>
<div class="main-bar--info-container">
<div class="main-bar--info-container--buttons">
<div class="main-bar--info-container--buttons--b"><p>Botón</p></div>
<div class="main-bar--info-container--buttons--b"><p>Botón</p></div>
<div class="main-bar--info-container--buttons--b"><p>Botón</p></div>
</div>
<div class="main-bar--info-container--login">
<div class="main-bar--info-container--login--b"><p>login</p></div>
</div>
</div>
</div>
</div>
<div class="example-section">
<div class="example-section--pictures" id="ex1">
<div class="example-section--pictures-pic"><img src="./public/canada-example.jpg"></div>
<div class="example-section--pictures--overlay"><div class="overlay--text">canadá</div></div>
</div>
<div class="example-section--pictures" id="ex2">
<div class="example-section--pictures-pic"><img src="./public/mexico-example.jpg"></div>
<div class="example-section--pictures--overlay"><div class="overlay--text">méxico</div></div>
</div>
<div class="example-section--pictures" id="ex3">
<div class="example-section--pictures-pic"><img src="./public/eu-example.jpg"></div>
<div class="example-section--pictures--overlay"><div class="overlay--text">EE.UU.</div></div>
</div>
</div>
<div class="banner-sesion"></div>
</div>
</body>
and my css (which is getting really long)
*{
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
}
input{
border: none;
border-bottom: 2px solid #74b5fa;
background-color: rgba(250, 167, 116, 0);
}
.box-session{
box-sizing: content-box;
position: relative;
background-image: linear-gradient(to top left,rgba(152, 116, 250,.1 ), rgba(250, 167, 116, 1));
width: 232px;
padding-left: 15px;
padding-right: 17px;
padding-top: 15px;
padding-bottom: 15px;
margin-top: 11%;
border-radius: 20px;
margin-left: calc(50% - 116px);
}
.session{
box-sizing: border-box;
position: relative;
width: 232px;
}
body{
background-color: #E2EBF8;
height: 100%;
width: 100%;
}
.relative{
position: relative;
height: 100%;
width: 100%;
}
.alto20{
height: 20%;
width: 100%;
}
.navBar{
position: fixed;
height: 100%;
width: 11%;
background-color: blue;
border-radius: 20px;
background-image: linear-gradient(#71AEFF, #4080FF);
}
.navBar--perfil{
position: relative;
float: left;
/* background-color: yellow; */
}
.navBar--photo{
position: relative;
margin-top: 25%;
/* background-color: blue; */
width: 100%;
height: 50%;
}
.navBar--photo img{
height: 30px;
width: 30px;
background-color: #FFFFFF;
border-radius: 5px;
margin-left: 40px;
}
.navBar--photo p{
color: #FFFFFF;
font-weight: bold;
font-size: 16px;
padding-left: 26px;
margin-top: 4px;
}
.navBar--opciones{
float: left;
width: 100%;
height: 60%;
}
.navBar--botones{
position: relative;
float: left;
width: 100%;
height: calc(100%/5);
}
.navBar--blanco{
position: relative;
height: 65px;
width: 65px;
/* background-color: green; */
margin-top: 3.5%;
margin-left: calc(50% - 52px);
box-sizing: border-box;
padding-top: 8px;
}
.navBar--blanco img{
height: 30px;
width: 30px;
margin-left: 19px;
}
.navBar--blanco p{
width: 100%;
color: #FFFFFF;
font-weight: bold;
font-size: 12px;
text-align: center;
}
.selected{
background-color: #FFFFFF;
border-radius: 20px;
color: #71AEFF;
}
.selected p{
color: #71AEFF;
}
.navBar--ayuda{
float: left;
/* background-color: green; */
}
.navBar--ayuda p{
position: relative;
background-color: #FFFFFF;
width: 70px;
height: 20px;
border-radius: 7%;
text-align: center;
color: #71AEFF;
font-weight: bold;
top: 75%;
left: 15%;
}
.main{
position: fixed;
height: 100%;
width: 55%;
background-color: #FFFFFF;
border-radius: 20px;
margin-left: 8%;
/* background-color: lightblue; */
}
.main--scroll{
position: absolute;
width: 90%;
/* background-color: pink; */
float: left;
overflow-y: scroll;
height: 95%;
overflow-y: auto;
overflow-x: hidden;
margin-top: 2.5%;
margin-left: 2.5%;
}
.lista ul{
float: left;
/* list-style-type: upper-roman; */
list-style-position: inside;
list-style-image: url('../public/man.png');
}
.tabla table{
border: 2px solid red;
border-collapse: separate;
}
.derecha{
position: fixed;
height: 100%;
width: 40%;
margin-left: 60%;
border-radius: 20px;
background-image: linear-gradient(#F3FAFC, #CCDBEF);
}
.ej{
background-color: greenyellow;
width: 100%;
height: 200px;
border: 1px solid black;
}
.noteblock{
width: 150px;
height: 150px;
background-color: #ff7190;
border-radius: 20px;
margin-left: 20px;
margin-top: 20px;
padding-top: 10px;
padding-left: 10px;
position: relative;
float: left;
}
.noteblock p{
color: white;
}
.noteblock h3{
color: white;
}
.boton{
margin-left: 20px;
margin-top: 20px;
position: relative;
}
thanks for all the patience
I think you may have misunderstood the fixed position. As it is, you can add more content perfectly well in your site: try setting .new { height: 2000px; background: orange;} and you'll see the orange wall does appear and the site scrolls. One thing that might be misleading you is because your header is also fixed, so any content you do add (an <h1> for example) is going to go under it.
In any case, because the banners are fixed, their position is relative to the screen, so they "go down" as you scroll, and they'll be in front of any content you add.
I don't understand what led you to set them fixed in the first place, but it's probably not a good idea. Try taking that out, give the ejemplo pictures a fixed height and let it scroll (try setting you header to sticky rather than fixed). When you're done with your homework, try researching CSS positions a bit more.
so i am having trouble collapsing borders between two floating divs. I know how to do it with table cells but these are not cells and I'm not using tables. Here is a picture of what the picture looks like page image
Here is my html and css code as well.
body{
background-color: #C8C8C8;
}
h1{
text-shadow: 2px 3px gray;
margin-left: auto;
margin-right: auto;
width: 200px;
}
img.width{
width: 100%;
}
img.tLeft {
float: left;
z-index: -1;
padding-right: 3em;
}
img.tRight {
float: right;
z-index: -1;
}
.div1 {
width: 900px;
height: 700px;
margin-left: auto;
margin-right: auto;
border-radius: 20px;
box-shadow: 10px 10px 5px #A8A8A8;
background-color: #4dffa6;
overflow: hidden;
z-index: -1;
}
.div2 {
height: auto;
border: 1px solid red;
overflow: hidden;
border-top-left-radius: 20px;
top: 0;
left: 0;
float: left;
border-right: collapse;
}
.div3 {
height: auto;
border: 1px solid red;
overflow: hidden;
border-top-right-radius: 20px;
top: 0;
right: 0;
z-index: -1;
float: right;
}
.div4 {
height: auto;
border: 1px solid blue;
background-color: lightgray;
overflow: hidden;
left: 0;
display: block;
}
strong{
font-size: 70px;
color: red;
}
<div>
<img class="width" src="images/rancidbanner.png" alt="Rancid Tomatoes">
</div>
<h1>TMNT (2015)</h1>
<!---block one--->
<div class="div1">
<!---block two--->
<div class="div2">
<img class="tLeft" src="images/rottenlarge.png" alt="Rotten" /> <strong>33%</strong>
</div>
<!---block three--->
<div class="div3">
<img class="tRight" src="images/overview.png" alt="general overview" />
</div>
<!---box four
<div class="div4">
<p>HEllo relkgnaldfkgnadlgsknasdlkgnasldkgnaslkdgnasldkn aslkdgnslkdgn sjdnaslkdjfnaslkdjfn sdgnaslkjgnlaskjgdn
</p>
</div>
--->
</div>
Might be worth using a CSS reset so that the browser doesn't affect your CSS - http://meyerweb.com/eric/thoughts/2011/01/03/reset-revisited/
I am trying to make a page that has two sections that stack on top of each other using rows. Each section is supposed to be the height of the browser window but for some reason the second row overlaps most of the first except for the header.
Here is a link to my code:
http://www.bootply.com/WwcepyZC01
If I understand your question correctly, you can do this using height: 100vh, and remove the position: absolute. I've also restructured your HTML a bit so that .layer2 is not a child of .layer1.
.layer1 {
width: 100%;
height: 100vh;
background-image: url(<%=asset_path "home_bg.jpg"%>);
background-size: cover;
background-color: purple;
}
.title-wide h1 {
top: 10%;
left: 10%;
right: 10%;
color: #ffffff;
font-size: 10vmax;
}
.home-caption {
position: absolute;
left: 20%;
right: 20%;
top: 30%;
}
.title-wide h2 {
color: #ffffff;
font-size: 4vmax;
}
.col-md-7 {
position: absolute;
text-align: center;
left: 15%;
right: 15%;
height: 100%;
top: 50%;
font-size: 10vw;
}
.btn-default {
background: rgba(255, 255, 255, 0.8);
}
.title-wide {
left: 90%;
right: 90%;
}
.btn-xlarge {
padding: 20px 20px;
font-weight: 700;
line-height: normal;
border-radius: 200px;
border: 2px solid none;
text-align: center center;
height: 3em;
font-size: 25px;
width: 10em;
}
.layer2 {
width: 100%;
height: 100vh;
background-size: cover;
background-color: green;
}
<div class="layer1 row-fluid">
<div class="title-wide text-center">
<h1>My Name</h1>
<div class="home-caption text-center">
<h2>I am a person working for a nameless corporation</h2>
<div class="row">
<hr>
<div class="offset4">
</div>
</div>
</div>
</div>
</div>
<div class="layer2 row-fluid">
</div>
<div id="push"></div>
For some reason, I can't figure out why there is like an 8px spacing below this image within a div. check it out:
If you look at the bottom of the image, there's about an 8px space, how can i get rid of it?
.side {
margin-top: 40px;
float: right;
}
.sidehead {
width: 260px;
height: 27px;
}
.sidecont {
background-color: #394d49;
width: 258px;
height: auto;
border: 1px solid #6b958b;
margin-top: -1px;
margin-bottom: 20px;
vertical-align: middle;
}
<!----HTML BELOW---->
<div class="sidecont">
<center><img src="images/rankings.jpg"></center>
</div>
Here's the entire code, if anyone needs it:
body {
background-image: url('images/bg.png');
background-color: #5a6a7a;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center top;
}
.wrap {
width: 960px;
margin: auto;
}
.head {
width: 960px;
height: 60px;
margin-top: 33px;
}
.head img {
float: left;
}
.head .home img { background: url('images/home.jpg'); width: 116px; height: 60px; }
.head .register img { background: url('images/register.jpg'); width: 116px; height: 60px; }
.head .forum img { background: url('images/forum.jpg'); width: 116px; height: 60px; }
.head .banner img { background: url('images/banner.jpg'); width: 263px; height: 60px; }
.head .chat img { background: url('images/chat.jpg'); width: 116px; height: 60px; }
.head .downloads img { background: url('images/downloads.jpg'); width: 116px; height: 60px; }
.head .donate img { background: url('images/donate.jpg'); width: 117px; height: 60px; }
.head .home img:hover { background: url('images/homehover.jpg'); width: 116px; height: 60px; }
.head .register img:hover { background: url('images/registerhover.jpg'); width: 116px; height: 60px; }
.head .forum img:hover { background: url('images/forumhover.jpg'); width: 116px; height: 60px; }
.head .chat img:hover { background: url('images/chathover.jpg'); width: 116px; height: 60px; }
.head .downloads img:hover { background: url('images/downloadshover.jpg'); width: 116px; height: 60px; }
.head .donate img:hover { background: url('images/donatehover.jpg'); width: 117px; height: 60px; }
.logo {
background-image: url('images/logo.png');
width:250px;
height: 110px;
display:block;
position:absolute;
left:0;
right:0;
bottom:0;
margin: -85px auto;
z-index: 1;
}
.main {
margin-top: 40px;
float: left;
clear: both;
}
* {
margin: 0;
padding: 0;
}
.mainhead {
background-image: url('images/content.jpg');
height: 27px;
width: 680px;
}
.maincont {
background-color: #394d49;
width: 668px;
border: 1px solid #6b958b;
margin-top: -1px;
height: auto;
word-wrap: break-word;
padding: 5px;
}
.side {
margin-top: 40px;
float: right;
}
.sidehead {
width: 260px;
height: 27px;
}
.sidecont {
background-color: #394d49;
width: 258px;
height: auto;
border: 1px solid #6b958b;
margin-top: -1px;
margin-bottom: 20px;
vertical-align: middle;
}
.footer {
background-image: url('images/footer.jpg');
width: 960px;
height: 19px;
margin-top: 20px;
font-size: 11.6px;
font-family: 'MS Serif';
text-align: center;
color: #dfd591;
text-shadow: 0 1px 2px black;
line-height: 19px;
}
__
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrap">
<div style="position:relative;">
<div class="logo"></div>
</div>
<div class="head">
<div class="home"><img></div>
<div class="register"><img></div>
<div class="forum"><img></div>
<div class="banner"><img></div>
<div class="chat"><img></div>
<div class="downloads"><img></div>
<div class="donate"><img></div>
</div>
<div class="main">
<div class="mainhead"></div>
<div class="maincont">
</div>
</div>
<div class="side">
<div class="sidehead"><img src="images/servinfo.jpg"></div>
<div class="sidecont">asdf</div>
<div class="sidecont">
<center><img src="images/rankings.jpg"></center>
</div>
<div class="sidehead"><img src="images/partners.jpg"></div>
<div class="sidecont">
<center><img src="images/epvp.jpg"></center>
</div>
</div>
<div style="clear:both;"></div>
<div class="footer"></div>
</div>
</body>
An image is an inline element, which means that it is placed on the baseline of the text. There is space below the baseline in a text block, for characters with descenders like p and g. It's that space that creates the spacing below the image.
You can make the image a block element to avoid that space, and don't use the deprecated center tag, use margins to center the image:
HTML:
<div class="sidecont">
<img src="images/rankings.jpg">
</div>
Add to the CSS:
.sidecont img { display: block; margin: 0 auto; }
no tag center <!doctype html> html5
<div class="sidecont">
<img src="images/rankings.jpg">
</div>
.sidecont {
margin: 0 auto;
background-color: #394d49;
width: 258px;
height: auto;
border: 1px solid #6b958b;
}