Iv'e been trying to locate an image in a center of a page, and to locate two text sections in it's sides (left and right). The right text section is locating under the image and I cant locate it in the same line.
here is my HTML code:
<pre>
<html>
<head>
<link rel="stylesheet" href="EXC.css">
<script type="text/javascript" src="EXC.js"></script>
</head>
<body>
<div id="ronimg">
<img src="achivs.png"/>
<br>
<button class="button" style="vertical-align:middle"><span> GOBACK </span></button>
</div>
<div id="ronalfor">
THIS IS THE FIRST EXAMPLE
</div>
<div id="another">
THIS IS THE SECOND EXAMPLE
</div>
</body>
</html>
</pre>
This is the css code:
<pre>
#ronimg
{
margin-top: 30px;
float: right;
margin-right: 600;
clear: none;
}
#ronalfor
{
color: #43acf8;
font-style: oblique;
margin-top: 30px;
border: 5px inset #b1b53e;
float:left;
width: 500px
}
#another
{
clear: both;
color: #43acf8;
font-style: oblique;
margin-top: 30px;
border: 5px inset #b1b53e;
float:right;
width: 500px
}
</pre>
Flexbox to the rescue. I added a flexbox container around your HTML, implicitly making the children of the container into flex children. Then I use the order property to arrange the children the way you want (image in the middle with text sections flanking it).
.flex-container {
display: flex;
margin-top: 30px;
}
#ronimg img {
width: 100%;
max-width: 100%;
height: auto;
}
#ronimg {
order: 1; /* image in the middle */
}
#ronalfor,
#another {
border: 5px inset #b1b53e;
font-style: oblique;
color: #43acf8;
flex-basis: 200px; /* sets a minimum width for these elements */
}
#ronalfor {
order: 0; /* section on the left */
}
#another {
order: 2; /* section on the right */
}
<div class="flex-container">
<div id="ronimg">
<img src="http://placekitten.com/200/200" />
<br>
<a href="EXC.html">
<button class="button" style="vertical-align:middle"><span> GOBACK </span></button>
</a>
</div>
<div id="ronalfor">
THIS IS THE FIRST EXAMPLE
</div>
<div id="another">
THIS IS THE SECOND EXAMPLE
</div>
</div>
jsfiddle demo
Remove the #another { clear:both; } that makes to locate it in same line.
Related
I am new to HTML and CSS.
In first div I want to display elements and in second div I want to display text over background image.
But in the result element is displaying over background image. I want to display element and in below line I want to display background image. How to achieve this?
Below is my code. I am using HTML and CSS.
.navbar {
width: 100%;
}
.nav-left {
float: right;
width: 25%;
position: absolute;
padding-top: 14px;
}
.feature {
border: 2px solid black;
padding: 25px;
background: url(https://static3.depositphotos.com/1005590/206/i/950/depositphotos_2068887-stock-photo-lightbulb.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.navbar-Logo {
float: right;
color: #dd845a;
text-decoration: none;
}
<div class="navbar">
<div class="nav-left">
<a class="navbar-Logo" href="#">LOGO</a>
</div>
</div>
<div class="feature">
<h1> Sample Text</h1>
<p>Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text.</p>
<p>Engage Now</p>
</div>
Seems you're not understanding the CSS you're using:
Remove the floats, replace the float:right with text-align: right in .nav-left
Remove position: absolute from .nav-left
Result below:
.navbar {
width: 100%;
}
.nav-left {
text-align: right;
width: 25%;
padding-top: 14px;
}
.feature {
border: 2px solid black;
padding: 25px;
background: url(https://static3.depositphotos.com/1005590/206/i/950/depositphotos_2068887-stock-photo-lightbulb.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.navbar-Logo {
color: #dd845a;
text-decoration: none;
}
<div class="navbar">
<div class="nav-left">
<a class="navbar-Logo" href="#">LOGO</a>
</div>
</div>
<div class="feature">
<h1> Sample Text</h1>
<p>Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text.</p>
<p>Engage Now</p>
</div>
Setting your .nav-bar element to position: absolute makes it leave the document flow, and so it will be rendered on top of the next <div>.
Using only float elements inside a block will make it 0-height with elements overflowing, and so rendered over following elements in document flow.
Change your .navbar css code to this:
.navbar
{
height: 120px;
}
I think what you are trying to do is that you like to position your link in the navbar to the right within the navbar and the feature div below it.
But the issue is the float property you are using here is taking the applied element out of the document flow, thus pushing the proceeding elements to take it's space.
Here you can use flexbox with justify content property set to flex end to achieve this. Never use float unless it's absolutely necessary.
<!DOCTYPE html>
<html>
<head>
<style>
.navbar
{
width: 100%;
border: 2px solid black;
padding: 35px;
}
.nav-left {
float: right;
width: 25%;
position: absolute;
padding-top: 10px;
}
.feature {
border: 2px solid black;
padding: 25px;
background: url(light_bulb.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.navbar-Logo {
float:right;
color: #dd845a;
text-decoration: none;
}
</style>
</head>
<body>
<div class="navbar">
<div class="nav-left">
<a class="navbar-Logo" href="#">LOGO</a>
</div>
</div>
<div class="feature">
<h1> Sample Text</h1>
<p>Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text.</p>
<p>Engage Now</p>
</div>
</body>
</html>
I'm having problems making two elements align perfectly. They're in the same line, the one to the left is an input element and the one to the right is a div, in a "bar" (also a div). Please see the picture.
How it looks right now
What I want it to look like is for the two elements to have the exact same height, filling from top to bottom of the grey div with classname "wrapper".
I have simplified the code, and the button clearly doesn't work. What you can see in the code here is a small part of a react app, but that's irrelevant because the problem is in the CSS. The button needs to be a div.
The CSS code:
body{background-color: black}
.wrapper
{
background-color: grey;
padding: 0;
margin: 0;
}
input
{
font-size: 30px;
}
.button
{
background-color: green;
padding-left: 10px;
width: 100px;
height: 100%;
display: inline-block;
}
and the HTML code:
<body>
<div class="wrapper">
<input type="text" size="5"/>
<div class="button">
<p>
Button
</p>
</div>
</div>
</body>
I've tried setting the "display" of the elements to "inline" and "inline-block" back and forth, and tried to set the height to 100% for these elements which doesn't seem to work.
Thankful for any advice.
Just use flexbox
body {
background-color: black
}
.wrapper {
background-color: grey;
padding: 0;
margin: 0;
display: flex;
}
input {
font-size: 30px;
}
.button {
background-color: green;
padding-left: 10px;
width: 100px;
}
<body>
<div class="wrapper">
<input type="text" size="5" />
<div class="button">
<p>
Button
</p>
</div>
</div>
</body>
On the wrapper class add display: flex; and on the input tag add flex: stretch;
My apology, if I am not doing this (updating my original) correctly.
I stripped the code and pin pointed the statements that would cause the white space at the bottom of the "short list" side of the page.
Recap from previous post - here's the DIV in the page layout:
* div-1 The title aka titleFrame [ This is static ]
* div-2 The menu aka menu [ This is static ]
* div-3 The main aka mainFrame [ Dynamic content area ]
Objective: When a menu item is clicked, mainFrame.innerHTML content is updated.
Understanding the problem: The mainFrame DIV may contain two child DIVs, refer to the following set of codes for the discussion:
*** Set A: This set does not have a parent DIV
<div id="freewareLeft"> Left list </div>
<div id="freewareRight"> Right list </div>
*** Set B: This set has a parent DIV, with or without an ID name [ ie. div instead of div id="mainFrame" ]
<div id="mainFrame" style="line-height: 20px;">
<div id="freewareLeft"> ... </div>
<div id="freewareRight"> ... </div>
</div>
*** Set C: This is the desired code because of the flexibility
...
Set A: There is no problem with this set of code. Sizing does not produce any white space on the short list side.
Set B: If freeLeft and freeRight has a parent DIV (with or without an ID), the white space on the short list side shows up.
Set C: This is the desired set of code (one DIV) because mainFrame.innerHTML could be updated with one content or a split screen (two) contents with Left and Right DIV. Note: It work if the update does not contain child DIVs.
Here's the stripped down code:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="windows-1252">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#charset "utf-8";
/* CSS Document */
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
margin: 0;
line-height: 24px;
}
.parent{
display: flex;
}
#titleFrame { /* Welcome to the CyberPlaypen */
position: fixed;
top: 0; left: 0;
height: 30px; line-height: 30px; width: 100%;
font-weight: bold;
overflow: hidden; /* Disable scrollbars. Set to "scroll" to enable*/
text-align: center;
color: white; background: navy;
z-index: 2;
}
#menu {
min-width: 1000px;
position: fixed;
margin-top: 30px;
height: 24px;
line-height: 24px;
text-align: center;
width: 100%;
background-color: #0000FF;
/* opacity: 0.6; */
z-index: 2;
}
#menu a {
text-decoration: none;
color: white;
width: 80px; /*added */
display: block;
}
#menu a:hover {
background-color: green;
font-weight: bold;
text-align: center;
/* border-radius: 6px; */
}
#mainFrame {
position: relative;
overflow: auto;
top: 54px;
margin-left: 0px; /* was 20px */
width: 100%;
height: 100%;
/* tried min-height: 100vh; same result */
z-index: 1;
}
#freewareLeft {
background-color: black;
color: white;
position: relative;
float: left;
width: 216px;
min-height: 100vh;
border-right: 1px solid white;
}
#freewareLeft * {
margin-left: 15px;
}
#freewareRight {
white-space: nowrap;
background-color: black;
color: white;
position: relative;
float: right;
width: calc(100% - 217px);
min-height: 100vh;
}
</style>
</head>
<body>
<div id="parent" class="parent">
<div id="titleFrame">
Welcome to CyberPlaypen
</div>
<div id="menu">
<a style="width: 80px;" href="#" onclick="mouseBrowseReset(); codeInjector('mainFrame','Software/softFreeware.txt');">Freeware</a>
</div>
<!-- put <div id="mainFrame"> here to see the problem, also try with a blank <div> and it's worse -->
<div id="freewareLeft">
<br />Test
<br />Test <!-- Repeat this x times - make one list shorter -->
<br />Test
</div>
<div id="freewareRight">
<br />Test
<br />Test <!-- Repeat this x times - make one list shorter -->
<br />Test
</div>
<!-- put closing </div> if testing with <div id="mainFrame"> or blank </div> -->
</div>
</body>
</html>
You are giving height as 100vh and after scroll you actually need height as 100% of parent and your all 3 divs sits directly inside the body. Here is the solution.
Add a parent div and set style as display: flex;
In your html
<div id="parent" class="parent">
<div id="titleFrame">
Welcome to CyberPlaypen
</div>
<div id="menu">
..... other html
</table>
</div>
<div id="freewareRight">
<img src onerror="codeInjector('freewareRight','./Default.txt');">
</div>
</div>
and in your styles
.parent{
display: flex;
}
EDIT:
Wrap the content of left/right div in a no-name div.The code after innerHTML is modified with XMLHttpRequest() looks like this: [body] [div mainFrame] [div left][div]content[/div][/div] [div right][div]content[/div/[/div] [ /div] [/body]
I have a series of CSS-styled boxes. Each box has a heading, followed by a number in a paragraph tag. Some of the headings are 2 lines, and in this case, the number shows up right where I want it: centered in the bottom part of the box. Where the heading is only 1 line, the number floats up higher than I'd like. How can I get the number to be in the center of the white space? What's going on here?
Code here: https://jsfiddle.net/snp3gvke/
<div class="sm red left-margin"><h2>Website<br/>Visitors</h2><p>120,363</p> </div>
Try adding vertical-align:middle; and line-height
This is the hacky solution, but you can solve your problem by adding two line breaks to your headings. That's essentially the problem - when your heading only takes one line, it doesn't push the number down as far into the white part of the div.
p {
font-weight: bold;
font-size: 2em;
text-align: center;
position:absolute;
bottom: 5%;
width: 100%;
}
I was able to do it by using flexbox. I had to make some changes to your CSS to override the colors coming from langsdale-dashboard.css file.
I went ahead and made your CSS a little bit more efficient also. I made changes only on the CSS to make things work. Here's what I did:
Applied the colors to the h2 instead of the parent container.
Removed the height from the parent containers and set the heights to the h2 and p instead.
Applied display:flex; justify-content:center; and align-items:center to both the h2 and the p.
I'm including the code below. You can also view it on JSFiddle: https://jsfiddle.net/m0nk3y/snp3gvke/11/
Let me know if you have any questions.
.lg,.med,.sm {
border-radius: 15px;
border-style: solid;
border-width: 1px;
position: relative;
}
.lg {
width: 700px;
}
.med {
width: 500px;
display: inline-block;
}
.sm {
width: 175px;
display: inline-block
}
.sm, .med, .lg {
vertical-align: top;
}
.left-margin {
margin-left: 15px;
}
.row {
margin-bottom: 10px;
}
h2,
p {
display: flex;
margin: 0;
text-align: center;
justify-content: center;
align-items: center;
}
h2 {
height: 75px;
border-radius: 12px 12px 0 0;
}
p {
height: 100px;
font-weight: bold;
font-size: 2em;
}
.blue, .red, .green, .orange {
background: transparent;
}
.blue {
border-color: #41B6E6;
}
.blue h2 {
background: #41B6E6;
}
.red {
border-color: #ce2029;
}
.red h2 {
background: #ce2029;
}
.green {
border-color: #C4D600;
}
.green h2 {
background: #C4D600;
}
.orange {
border-color: #E35205;
}
.orange h2 {
background: #E35205;
}
<link href="https://langsdale.ubalt.edu/zz-test/langsdale-dashboard.css" rel="stylesheet"/>
<body>
<div class="row">
<div class="lg blue">
<h2>Walk-in Visitors</h2>
<p>109,328</p>
</div>
</div>
<div class="row">
<div class="med red">
<h2>Special Collections<br/>Flickr Views</h2>
<p>75,985</p>
</div>
<div class="sm green left-margin">
<h2>Questions<br/>Answered</h2>
<p>19,570</p>
</div>
</div>
<div class="row">
<div class="sm blue">
<h2>Materials<br/>Circulated</h2>
<p>375,985</p>
</div>
<div class="med orange left-margin">
<h2>Instruction Session<br/>Attendees</h2>
<p>2,045</p>
</div>
</div>
<div class="row">
<div class="med green">
<h2>Database Searches</h2>
<p>330,479</p>
</div>
<div class="sm red left-margin">
<h2>Website<br/>Visitors</h2>
<p>120,363</p>
</div>
</div>
<div class="row">
<div class="lg orange">
<h2>Titles Borrowed via ILL</h2>
<p>5,773</p>
</div>
</div>
</body>
I'm trying to create my first website, and I'm wanting to make a section in which the recent posts are on the left, and the sidebar is on the right. I'm not having any problems with positioning them but the problem is that the main div isn't drawing the background for it.
If I put any raw-text in the div, it will draw the background correctly for the raw-text, but not for any of the <div>'s inside of it.
Please note, in the code snipit the text is white, and body has a black background, the page-content div is supposed to have a grey background #666 but it's not showing up.
body {
background: #000;
}
/* Page Content */
#page-content {
background:#666;
color: #FFF;
opacity: .8;
}
#recent-updates {
width: 75%;
float: left;
}
#sidebar-right {
width: 25%;
float: right;
}
<html>
<body>
<div id='page-content'>
<div id='recent-updates'>
OneOneOneOneOneOneOne
</div> <!-- recent-updates -->
<div id='sidebar-right'>
TwoTwoTwoTwoTwoTwoTwo
</div> <!-- sidebar-right -->
</div> <!-- page-content-->
</body>
</html>
Because you have floated the elements inside #page-content, you have taken them out of the normal flow of the page. #page-content has no contents in the normal flow, so it collapses on itself and you can't see the background colour given to it.
You can clear your floated elements with an overflow trick:
body {
background: #000;
}
#page-content {
background:#666;
color: #FFF;
opacity: .8;
overflow: hidden;
}
#recent-updates {
width: 75%;
float: left;
}
#sidebar-right {
width: 25%;
float: right;
}
<html>
<body>
<div id='page-content'>
<div id='recent-updates'>
OneOneOneOneOneOneOne
</div> <!-- recent-updates -->
<div id='sidebar-right'>
TwoTwoTwoTwoTwoTwoTwo
</div> <!-- sidebar-right -->
</div> <!-- page-content-->
</body>
</html>
If you aren't able to apply overflow: hidden to #page-content, see other float-clearing methods.
Also you can do this just add div with style clear both floats so it will automatically settled.
body {
background: #000;
}
#page-content {
background:#666;
color: #FFF;
opacity: .8;
overflow: hidden;
}
#recent-updates {
width: 75%;
float: left;
}
#sidebar-right {
width: 25%;
float: right;
}
.clear
{
clear:both;
}
<html>
<body>
<div id='page-content'>
<div id='recent-updates'>
OneOneOneOneOneOneOne
</div> <!-- recent-updates -->
<div id='sidebar-right'>
TwoTwoTwoTwoTwoTwoTwo
</div> <!-- sidebar-right -->
<div class="clear"> </div>
</div> <!-- page-content-->
</body>
</html>