I have a non-scrolling page with a content div that I want to scrolling dynamic to the length of the list as it grows.
The webpage is scubapolice.com/echo.php
See code below
body {
font-family: "Bitstream Vera Sans",Verdana,Arial,Helvetica,Sans,"Bitstream Vera Serif";
font-size: 1em;
color: #feffb7;
background: #000000 url(bg.jpg) no-repeat center center fixed;
margin: 0px;
background-size: cover;
height: 100%;
padding: 0px;
overflow-y: hidden;
}
.middleearth {
background: rgba(0, 0, 0, 0.4);
margin-left: 19%;
width: 62%;
margin-bottom: 10px;
}
.content {
padding: 30px;
padding-top: 1px;
}
#loadin {
border: 1px solid #cbcd65;
overflow: scroll;
height: 100%;
}
<body>
<div class="title">
SCUBA Police
</div>
<div class="menu">
<div class="menubar">
<?php include 'menu.html';?>
</div>
</div>
<div id="contain">
<div class="middleearth">
<div class="content">
<h2>Echo</h2>
<div id="loadin">
<?php include 'echolist.html';?>
</div>
</div>
</div>
</div>
<?php include 'footer.html';?>
</body>
Problem: I have a scroll bar inside the loadin div but the content still runs below the bottom of the page and I cant actually scroll.
There is no problem with your overflow, the problem is your 'loadin' height,
try this snippet with a fixed height :
body {
font-family: "Bitstream Vera Sans",Verdana,Arial,Helvetica,Sans,"Bitstream Vera Serif";
font-size: 1em;
color: #feffb7;
background: #000000 url(bg.jpg) no-repeat center center fixed;
margin: 0px;
background-size: cover;
height: 100%;
padding: 0px;
overflow-y: hidden;
}
.middleearth {
background: rgba(0, 0, 0, 0.4);
margin-left: 19%;
width: 62%;
margin-bottom: 10px;
}
.content {
padding: 30px;
padding-top: 1px;
}
#loadin {
border: 1px solid #cbcd65;
overflow: scroll;
height: 100px;
}
<body>
<div class="title">
SCUBA Police
</div>
<div class="menu">
<div class="menubar">
</div>
</div>
<div id="contain">
<div class="middleearth">
<div class="content">
<h2>Echo</h2>
<div id="loadin">
lorem ipsum <br/>
lorem ipsum <br/>
lorem ipsum <br/>
lorem ipsum <br/>
lorem ipsum <br/>
lorem ipsum <br/>
lorem ipsum <br/>
lorem ipsum <br/>
lorem ipsum <br/>
lorem ipsum <br/>
lorem ipsum <br/>
</div>
</div>
</div>
</div>
</body>
If you need to fixed your content then you need to specify height like 500px;
body {
font-family: "Bitstream Vera Sans",Verdana,Arial,Helvetica,Sans,"Bitstream Vera Serif";
font-size: 1em;
color: #feffb7;
background: #000000 url(bg.jpg) no-repeat center center fixed;
margin: 0px;
background-size: cover;
height: 100%;
padding: 0px;
overflow-y: hidden;
}
.middleearth {
background: rgba(0, 0, 0, 0.4);
margin-left: 19%;
width: 62%;
margin-bottom: 10px;
}
.content {
padding: 30px;
padding-top: 1px;
}
#loadin {
border: 1px solid #cbcd65;
overflow: scroll;
height: 500px;
}
<body>
<div class="title">
SCUBA Police
</div>
<div class="menu">
<div class="menubar">
<?php include 'menu.html';?>
</div>
</div>
<div id="contain">
<div class="middleearth">
<div class="content">
<h2>Echo</h2>
<div id="loadin">
<?php include 'echolist.html';?>
</div>
</div>
</div>
</div>
<?php include 'footer.html';?>
</body>
Related
I am a newbie, when it comes to learning HTML and CSS for myself and have been playing around with coding under the guidance of several videos. Obviously, I have to deal with knowledge gaps, by doing it this way.
Anyway, I have "designed" a CSS Layout from my head, so to help me push further in the process of learning. Here is the image, how I would like it to have Image Layout
The Output of the code looks like this: Result
I have been trying to figure out, how I can align a div below the header div on the left and right side, to completely fill out the black spaces.
And my code below:
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: blue;
margin: 0;
padding: 0;
width: 100%;
background-color: black;
background-size: cover;
background-repeat: no-repeat;
}
.Header {
height: 191px;
background: #808080;
border: 1px solid #000000;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 30px;
}
.contentwrap {
width: 1025px;
margin: 0 auto;
}
.container {
background: #808080;
border: 1px solid #000000;
height: 190px;
}
.footer {
background: #808080;
border: 1px solid #000000;
height: 129px;
}
<div class="Header">
<h1> Header </h1>
</div>
<div class="contentwrap">
<div class="container">
<p> Text </p>
</div>
<div class="container">
<p> Text </p>
</div>
<div class="container">
<p> text </p>
</div>
<div class="container">
<p> text </p>
</div>
<div class="footer">
<p> footer </p>
</div>
</div>
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: blue;
margin: 0;
padding: 0;
background-color: black;
}
.Header {
height: 191px;
background: #808080;
border: 1px solid #000000;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 30px;
}
.content {
display: flex;
}
.content__sidebar {
width: 200px;
min-height: 100%;
}
.content__sidebar--left {
background-color: red;
}
.content__sidebar--right {
background-color: green;
}
.content__main {
flex: 1;
}
.container {
background: #808080;
border: 1px solid #000000;
height: 190px;
}
.footer {
background: #808080;
border: 1px solid #000000;
height: 129px;
}
<div class="Header">
<h1> Header </h1>
</div>
<div class="content">
<div class="content__sidebar content__sidebar--left"></div>
<div class="content__main">
<div class="container">"
<p> Text </p>
</div>
<div class="container">
<p> Text </p>
</div>
<div class="container">
<p> text </p>
</div>
<div class="container">
<p> text </p>
</div>
</div>
<div class="content__sidebar content__sidebar--right"></div>
</div>
<div class="footer">
<p> footer </p>
</div>
Ugly way: https://codepen.io/stefantigro/pen/bGdZyeX
<div class="Header">
<h1> Header </h1>
</div>
<div class="">
<div class="right-side side">
</div>
<div class="middle">
<div class="container">
<p> Text </p>
</div>
<div class="container">
<p> Text </p>
</div>
<div class="container">
<p> text </p>
</div>
<div class="container">
<p> text </p>
</div>
<div class="footer">
<p> footer </p>
</div>
</div>
<div class="left-side side">
</div>
</div>
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: blue;
margin: 0;
padding: 0;
width: 100%;
background-color: black;
background-size: cover;
background-repeat: no-repeat;
}
.Header {
height: 191px;
background: #808080;
border: 1px solid #000000;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 30px;
}
.contentwrap {
margin: 0 auto;
}
.container {
background: #808080;
border: 1px solid #000000;
height: 190px;
display: block;
}
.footer {
background: #808080;
border: 1px solid #000000;
height: 129px;
}
.middle
{
display: inline-block;
width: 60%;
height: 100%;
}
.right-side{
background: blue;
}
.left-side{
background: red;
}
.side{
margin: 0;
width: 19%;
height: 800px;
display: inline-block;
}
Problem here was we are using set dimensions and well size varies especially from monitor to monitor. I would suggest looking into a grid system like bootstrap's or https://960.gs/
I'm building the website and I want to reach the section like on my psd (img attached):
You can see that there's 100% width section and .col-md-9 and .col-md-3 inside this section.
But when .col-md-3 ends its background should continue and pave the background of the main section.
How can I make the column's background continue? I've spent hours solving this problem but I didn't find the correct way. Thanks!
.single__content {
width: 100%;
max-width: 743px;
padding-top: 57px;
}
.single__content p {
color: #707070;
font-size: 15px;
font-weight: 400;
line-height: 23px;
}
.single__meta {
background: #3c73ba;
height: 70px;
}
.single__meta h2 {
font-size: 38px;
font-weight: 300;
line-height: 42px;
color: #fff;
margin: 0;
padding-top: 14px;
}
.col-sidebar {
background: #4285db;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<div class="single__meta">
<div class="container">
<div class="row ">
<div class="col-md-9">
<h2 class="page-title">Lorem ipsum dolor</h2>
</div>
<div class="col-sidebar col-md-3">
Second column content
</div>
</div>
</div>
</div>
You can split the background of your top with background: linear-gradient.
Demo with bootstrap 4
.top-bar {
background: linear-gradient(
to right,
#3c73ba 0%,
#3c73ba 50%,
#4285db 50%,
#4285db 100%
);
width: 100%;
padding: 0;
margin: 0;
color: #fff;
}
.col-left{
background: #3c73ba;
}
.col-right {
background: #4285db;
}
<div class="top-bar" style="padding: 0">
<div class="container">
<div class="row">
<div class="col-left col-md-9">
<h2>left</h2>
</div>
<div class="col-right col-md-3">
<h2>right</h2>
</div>
</div>
</div>
</div>
"make this changes in your code" hope this u want
<div class="row col_bg">
<div class="col-md-9 ">
<h2 class="page-title">Lorem ipsum dolor</h2>
</div>
<div class="col-sidebar col-md-3">
Second column content
</div>
<div class="clear">
</div>
</div>
"for css"
.row.col_bg {
background-color: #4285db;
clear: both;
}
.col-md-9 {
float: left;
width: 70%;
}
.single__meta h2 {
color: #000;
font-size: 38px;
font-weight: 300;
line-height: 42px;
margin: 0;
}
.col-sidebar.col-md-3 {
float: right;
width: 30%;
}
.clear {
clear: both;
}
I'm following these pages to create a horizontal line :
horizontal line and right way to code it in html, css
http://www.w3schools.com/tags/tag_hr.asp
http://www.jacklmoore.com/notes/jquery-tabs/
but It seems that It doesn't work inside my tab element. Here is my code :
<div class="container-fluid">
<div class="tabbable js-report-tab-container">
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<div id="circle"></div> <div class="h_line"> **<!-- horizontal line should be here -->**</div> <span id="circle"></span>
<br/><br/>
<p>Choose one of these type of reports : </p>
<input type="checkbox" name="report" value="reportValue" checked > Summary <br/>
<input type="checkbox" name="report" value="reportValue" > Candidate Details <br/>
<input type="checkbox" name="report" value="reportValue" > . . . .
</div>
<div class="tab-pane" id="tab2">
This is the second step view...
</div>
<div class="tab-pane" id="tab3">
This is the third step view...
</div>
<div class="tab-pane" id="tab4">
This is the fourth step view...
</div>
</div> {{-- end of tab-content --}}
</div> {{-- end of tabbable --}}
</div>
<style type="text/css">
#circle {
width: 40px;
height: 40px;
background: blue;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
float: left;
}
.hline {
width:100%;
height:13px;
background: #ff0000;
clear:both;
display:inline;
}
hr{
display:inline;
margin-top: 0.5em;
border-width: 0.5px;
border-style: inset;
margin-bottom: 0.5em;
height:2px;
background: #00FF00;
width: 20%;
align:left;
</style>
I have tried to use <hr align="left" /> and with css style :
hr{
display:block;
margin-top: 2.5em;
border-width: 1px;
border-style: inset;
margin-bottom: 0.5em;
border-top:1px solid;
height:2px;
background: #00FF00;
width: 20%;
align:left;
}
the result is like this :
I also tried to use <div class="block_1">Lorem</div> <div class="h_line"></div>
css : .hline { width:30%; height:13px; background: #fff }
Result is nothing :
Is there something I missed here...?? My goal is to create a horizontal between those 2 circles..
Thanks in advance... Need heelp here.. :)
I'm not entirely clear on what you're looking for, but here is one method of rendering a horizontal line between numbered circles. I've used something like this for a progress indicator in the past.
.circles {
border-bottom: 10px solid #000;
display: block;
height: 0;
list-style-type: none;
margin: 15px auto;
position: relative;
width: 80%;
}
.circle {
background: #00f;
border-radius: 50%;
color: #fff;
height: 40px;
line-height: 40px;
margin: -20px 0 0 -20px;
position: absolute;
text-align: center;
top: 5px;
width: 40px;
}
.circle:nth-child(1) {
left: 0;
}
.circle:nth-child(2) {
left: 50%;
}
.circle:nth-child(3) {
left: 100%;
}
<p>Lorem ipsum dolor sit amet.</p>
<ul class="circles">
<li class="circle">1</li>
<li class="circle">2</li>
<li class="circle">3</li>
</ul>
<p>Lorem ipsum dolor sit amet.</p>
I would suggest using Bootstrap's columns to do something like this:
<div class="row">
<div class="col-md-2"><div class="circle"></div></div>
<div class="col-md-8"><hr /></div>
<div class="col-md-2"><div class="circle"></div></div>
</div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I'm trying achieve an effect in which the image I am displaying is displayed within a computer screen. So basically, there'll be an image of a computer screen and my image within the screen.
What I am about to do is use photoshop to display the whole thing as a single image. But this is not really scalable. The other idea I had was to create CSS border images of the computer screen, however this sounds a bit involved, I am looking for a quick thing.
I know I've seen this effect on plenty of websites (but I can't remember the name of any to check the source), and I really feel there might be a ready-to-use solution to achieve that. Does such a ready-to-use solution exists or can you think of a simple way to achieve that ?
Create a computer image say(500x500)px with its screen transparent(blank) and export it as png with transparency on.
Then export you another image with same resolution.
And then you css position to place them on each other.
#computer_image{
position:relative;
z-index:100; /*To keep computer screen above use positive value*/
}
#computer_screen{
position:relative;
z-index:50;
/*Use top/left/right/bottom to place image on computer screen*/
}
Not sure if this I got you right, but here is a little demo of a MacBook Pro screen with a grumpy cat on it. Is this the kind of result you want to achieve? (EDIT: take a look for snippet #2 for the whole body (use the "full-page" view for a better result) )
Screen only
html * {
box-sizing: border-box;
}
#content {
background: url('http://truestorieswithgill.com/wp-content/uploads/2013/09/20130915-190532.jpg') no-repeat center center;
background-size: contain;
width: 100%;
height: 100%;
}
#outer-frame {
border: 4px solid #DADFE1;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
height: 350px;
width: 600px;
}
#inner-frame {
height: 100%;
border: 20px solid #000;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
overflow: hidden;
}
<div id="outer-frame">
<div id="inner-frame">
<div id="content"></div>
</div>
</div>
Screen + body
html * {
box-sizing: border-box;
}
.wrap{
width: 100%;
height: 100%;
}
#content {
background: url('http://truestorieswithgill.com/wp-content/uploads/2013/09/20130915-190532.jpg') no-repeat center center;
background-size: contain;
width: 100%;
height: 100%;
}
#outer-frame {
border: 4px solid #DADFE1;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
height: 350px;
width: 600px;
margin: 0 auto;
}
#inner-frame {
height: 100%;
border: 20px solid #000;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
overflow: hidden;
}
#body{
height: 20px;
background: #DADFE1;
width: 700px;
margin: 0 auto;
border-radius: 2px;
border-bottom-left-radius: 24px;
border-bottom-right-radius: 24px;
}
#notch{
height:10px;
width: 100px;
background: #BDC3C7;
margin: 0 auto;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
box-shadow: inset 1px -1px 2px rgba(0,0,0,0.5);
}
<div class="wrap">
<div id="outer-frame">
<div id="inner-frame">
<div id="content"></div>
</div>
</div>
<div id="body">
<div id="notch"></div>
</div>
</div>
This can be achieved by using CSS positioning methods. Here is an example you can use.
JSbin Demo
.project-widget-container {
position: relative;
margin-bottom: 30px;
}
.project-widget-container section {
position: relative;
padding-top: 20px;
margin-left: 10px;
}
.project-widget-container section:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 20px;
bottom: 0;
border: 1px solid #eee;
z-index: -1;
}
.project-widget-container section:after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 20px;
bottom: 0;
box-shadow: -5px -5px 5px -5px #eee, 5px -5px 5px -5px #eee;
z-index: -1;
}
.project-title {
border-left: 2px solid #660061;
padding-left: 20px;
}
.project-title h4 {
color: #660061;
font-weight: bold;
font-size: 1.4em;
line-height: 50px;
}
.project-excerpt {
color: #666;
font-size: 1.1em;
padding: 20px 20px 0 20px;
line-height: 1.2em;
height: 60px;
}
img.imac {
width: 100%;
position: absolute;
left: 0;
bottom: 0;
right: 0;
}
.project-image-container {
position: relative;
left: -10px;
padding-top: 85%;
}
.thumb img {
width: 50%;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -25%;
}
.thumb {
position: absolute;
z-index: 1;
bottom: 18%;
left: 0;
right: 0;
}
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3 project-widget-container">
<section>
<div class="project-title">
<h4>Project 1</h4>
</div>
<div class="project-excerpt">
Lorem Test dolor sit amet, consectetur adipiscing elit.
</div>
<div class="project-image-container">
<div class="thumb">
<img class="img-responsive" src="http://bombdiggitydesign.com/jsbin/xffdfd.png">
</div>
<img class="imac img-responsive" src="http://s29.postimg.org/b5kegwt53/small_mac.png">
</div>
</section>
</div>
<!-- col -->
<div class="col-sm-6 col-md-3 project-widget-container">
<section>
<div class="project-title">
<h4>Project 1</h4>
</div>
<div class="project-excerpt">
Lorem Test dolor sit amet, consectetur adipiscing elit.
</div>
<div class="project-image-container">
<div class="thumb">
<img class="img-responsive" src="http://bombdiggitydesign.com/jsbin/xffdfd.png">
</div>
<img class="imac img-responsive" src="http://s29.postimg.org/b5kegwt53/small_mac.png">
</div>
</section>
</div>
<!-- col -->
<div class="clearfix visible-sm"></div>
<div class="col-sm-6 col-md-3 project-widget-container">
<section>
<div class="project-title">
<h4>Project 1</h4>
</div>
<div class="project-excerpt">
Lorem Test dolor sit amet, consectetur adipiscing elit.
</div>
<div class="project-image-container">
<div class="thumb">
<img class="img-responsive" src="http://bombdiggitydesign.com/jsbin/xffdfd.png">
</div>
<img class="imac img-responsive" src="http://s29.postimg.org/b5kegwt53/small_mac.png">
</div>
</section>
</div>
<!-- col -->
<div class="col-sm-6 col-md-3 project-widget-container">
<section>
<div class="project-title">
<h4>Project 1</h4>
</div>
<div class="project-excerpt">
Lorem Test dolor sit amet, consectetur adipiscing elit.
</div>
<div class="project-image-container">
<div class="thumb">
<img class="img-responsive" src="http://bombdiggitydesign.com/jsbin/xffdfd.png">
</div>
<img class="imac img-responsive" src="http://s29.postimg.org/b5kegwt53/small_mac.png">
</div>
</section>
</div>
<!-- col -->
<div class="clearfix visible-sm"></div>
</div>
<!-- row -->
</div>
<!-- container -->
</body>
</html>
I am having trouble creating a scalable div that increases/decreases in size based on the size of the text in the chat bubble. A good example is the chat bubble that messenger or facebook chat uses.
.left-chat-bubble{
background-color:gray;
padding:10px;
border-radius:40px;
max-width:300px;
}
<div class="left-chat-bubble-wrap">
<div class="left-chat-bubble">
<p>hello</p>
</div>
</div>
I can get it to the its maximum size but I cant get the bubble to wrap around the relative size of the text.
All you need is display to be set inline or inline-block. See this.
.left-chat-bubble{
display: inline-block;
background-color:gray;
padding:10px;
border-radius:40px;
max-width:300px;
}
<div class="left-chat-bubble-wrap">
<div class="left-chat-bubble">
<p>hello</p>
</div>
</div>
For a better chat-like layout you can go for this snippet:
Update
adding arrows will also useful for a better UI.
.msg-list {
width: 100%;
}
.messenger-container {
padding: 8px 15px 8px 13px;
margin: 0 0 25px 35px;
float: left;
max-width: 82%;
background: #f2f2f2;
border-radius: 10px;
min-width: 20%;
position: relative; box-sizing: border-box;
box-shadow: 7px 10px 6px -5px #BBC0C7;
}
.messenger-container p {
color: #3D3D3D;
font-size: 12px;
margin-bottom: 6px;
line-height: 18px;
word-wrap: break-word; margin: 0;
}
.sender .messenger-container {
float: right;
margin-right: 35px;
width: auto;
background: #D5DBFF;
margin-left: 0px;
padding: 8px 15px 8px 13px;
}
.clear {
clear:both;
width: 100%;
padding: 0px !important;
margin: 0px;
height:0px;
}
.messenger-container::before {
width: 0px;
height: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right:15px solid #f2f2f2;
content: "";
position: absolute;
top: 9px;
left: -15px;
}
.sender .messenger-container::before {
width: 0px;
height: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 15px solid #D5DBFF;
content: "";
position: absolute;
top: 9px;
left: 99%;border-right: none;
}
<div class="msg-list">
<div class="messenger-container">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</div>
</div>
<div class="clear"></div>
<div class="msg-list sender">
<div class="messenger-container">
<p>Lorem Ipsum</p>
</div>
</div>
<div class="clear"></div>
<div class="msg-list">
<div class="messenger-container">
<p>Lorem Ipsum is simply dummy text</p>
</div>
</div>
<div class="clear"></div>
<div class="msg-list sender">
<div class="messenger-container">
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
</div>
</div>
<div class="clear"></div>
Or you can use either display:inline-block or float:left and clear:both if you want them on top of each other.
.left-chat-bubble{
clear:both;
float:left;
background-color:gray;
padding:10px;
border-radius:40px;
max-width:300px;
}
<div class="left-chat-bubble-wrap">
<div class="left-chat-bubble">
<p>hello, this is a chat bubble</p>
</div>
<div class="left-chat-bubble">
<p>hello, this is a chat bubble with text that wraps onto multiple lines</p>
</div>
</div>
.left-chat-bubble{
background-color:gray;
padding:10px;
border-radius:40px;
display:table-cell;
}
<div class="left-chat-bubble-wrap">
<div class="left-chat-bubble">
<p>hello with more text</p>
</div>
</div>