Hi I would like center correctly my content inside the container but I don't know how to do this. I have tried text-align : center.
How can I do this ?
HTML
<div id="Contacts" data-bind="foreach: viewModel.contacts()">
<div class="title">
<div class="container">
<small> <span class="red"> NEW CONTACT</span> </small>
<br>
<br>
</div>
</div>
</div>
CSS
.container {
width: 940px;
margin-left: auto;
margin-right: auto;
zoom: 1;
}
.title {
width: 540px;
height : 30px;
margin-bottom: 10px;
background-color: #F9F7F7;
border: 1px solid #e4e4e4;
position: absolute;
}
no centering
Centered version (approximative) what I would like :
Add line-height:30px; to .title class.
.container {
width: 940px;
margin-left: auto;
margin-right: auto;
zoom: 1;
}
.title {
width: 540px;
height : 30px;
line-height : 30px;
margin-bottom: 10px;
background-color: #F9F7F7;
border: 1px solid #e4e4e4;
position: absolute;
}
Jsfiddle: http://jsfiddle.net//vU73t/
.centerMe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
/* dimensions */
}
Here is corrected css and HTML with Fiddle link.
HTML
<div id="Contacts">
<div class="container">
<div class="title">
Demo Text goes here <br>
</div>
</div>
</div>
CSS
*{
padding:0;
margin:0;
}
.container {
width: 940px;
margin:0 auto;
zoom: 1;
background-color:#ffb7b7;
padding:20px;
text-align:center;
}
.title {
width:540px;
height:30px;
margin-bottom: 10px;
background-color: #F9F7F7;
border: 1px solid #e4e4e4;
margin:0 auto;
/*position: absolute;*/
}
Related
I'm a beginner to Html & CSS and have a probably really simple question, but I just can't seem to find the answer: How could you span an html element(child div, text, etc.) across multiple divs using only CSS & Html(no Javascript/JS)? I'm building a simple event calendar(using HTML+CSS) and am currently working on multiple day events.
html, body {
left: 0;
margin: 0;
background:white;
height:100%;
}
b{
font-family:calibri;
padding-left:10px;
}
#container{
margin: 0 auto;
width:300px;
padding-top:50px;
}
.colorone{
background:#FFEB3B;
width:150px;
height: 150px;
float:left;
}
.colortwo{
width:150px;
height: 150px;
background:#8BC34A;
overflow:hidden;
}
<html>
<head></head>
<body>
<div id="container">
<div class="colorone"><b>4</b>
</div>
<div class="colortwo"><b>5</b>
</div>
</div>
</body>
</html>
Desired result:
The blue div/rectangle should also be able to span more than two parent divs if wanted.
I've searched and researched online & on StackOverflow but I still can't seem to find the answer. Any help would be greatly appreciated.
Here's a quick example using your code with a few changes. I added the position to the container and the 3rd element and set the z-index to 2 on the div with the class of .colorthree.
var width = 0,
container = $('#container');
container.children('div').each(function(){
if(!$(this).hasClass('colorthree')) {
width += $(this).width();
}
});
container.width(width);
$('.colorthree').width(width-20);
html, body {
left: 0;
margin: 0;
background:white;
height:100%;
}
b{
font-family:calibri;
padding-left:10px;
}
#container{
margin: 20px auto;
width:300px;
height: 150px;
position:relative;
white-space: nowrap;
}
.colorone, .colortwo, .colorfour {
width:150px;
height: 150px;
background:#8BC34A;
overflow:hidden;
float:left;
}
.colorone{
background:#FFEB3B;
}
.colorfour {
background: red;
}
.colorthree {
z-index: 2;
top: 20px;
left: 10px;
position: absolute;
width:90%;
height: 40px;
background:blue;
overflow:hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div class="colorone"><b>1</b></div>
<div class="colortwo"><b>2</b></div>
<div class="colorfour"><b>4</b></div>
<div class="colorthree"><b>3</b></div>
</div>
You can do that with position: absolute
No javascript needed, only with html and css
html,
body {
left: 0;
margin: 0;
background: white;
height: 100%;
}
b {
font-family: calibri;
padding-left: 10px;
}
#container {
margin: 0 auto;
width: 300px;
padding-top: 50px;
position: relative;
}
.colorone {
background: #FFEB3B;
width: 150px;
height: 150px;
float: left;
}
.colortwo {
width: 150px;
height: 150px;
background: #8BC34A;
overflow: hidden;
}
.colorthree {
background-color: blue;
display: block;
position: absolute;
width: calc(100% - 50px);
height: 50px;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
left: 0;
right: 0;
color: white;
text-align: center;
line-height: 50px;
}
<html>
<head></head>
<body>
<div id="container">
<span class="colorthree">I'm Span!</span>
<div class="colorone"><b>4</b>
</div>
<div class="colortwo"><b>5</b>
</div>
</div>
</body>
</html>
I am trying to write some HTML that looks like this:
But what I currently have looks like this:
This my code:
<style>
div.relative {
position: relative;
width: 300px;
height: 70px;
border: 2px solid #73AD21;
left: 32px;
text-align: center;
}
div.absolute {
position: absolute;
top: 28px;
right: 0;
width: 200px;
height: 40px;
border: 2px solid #73AD21;
text-align: center;
}
</style>
<div class='relative'>phone <b> 07010710811</b>
shot code <div class='absolute'> <b>123456 </b></div>
</div>";
What should I do to get my desired output?
I would create another div for your "shot code", and "phone" text. I've used similar properties to what you have been using before so that it should fall in line with the rest of your styling.
I would also consider renaming your div's to something that isn't a CSS property.
div.container {
position: relative;
width: 300px;
height: 70px;
border: 2px solid #73AD21;
left: 32px;
text-align: center;
}
div.shot_code {
position: absolute;
top: 28px;
right: -2px;
width: 200px;
height: 40px;
border: 2px solid #73AD21;
text-align: center;
}
div.shot_text {
position: absolute;
top: 36px;
left: 0;
width: 100px;
height: 40px;
text-align: center;
}
div.phone_text {
position: absolute;
top: 5px;
left: 0;
width: 100px;
height: 40px;
text-align: center;
}
<div class='container'>
<div class='phone_text'>phone</div> <b> 07010710811</b>
<div class='shot_text'>shot code</div>
<div class='shot_code'> <b>123456 </b></div>
</div>
Assuming you can modify the HTML I would restructure it somewhat. That will make your life a lot easier when it comes to getting this styled right, and also styling it in the future.
.wrapper {
position: relative;
width: 300px;
height: 70px;
border: 2px solid #73AD21;
left: 32px;
}
.phone-num{
font-weight:bold;
margin-left: 45px;
}
.shot-code-num {
position: absolute;
top: 28px;
right: 0;
width: 200px;
height: 40px;
line-height:40px;
border: 2px solid #73AD21;
text-align: center;
font-weight:bold;
}
.shot-code{
margin-top:20px;
margin-left:20px;
}
<div class="wrapper">
<div class='phone'>phone
<span class="phone-num">07010710811</span>
</div>
<div class="shot-code">
shot code
<div class='shot-code-num'> <b>123456 </b></div>
</div>
</div>
You can quite possibly also remove the absolute positioning as well, and replace it all with inline-blocks. It looks like you are going for something more like this:
.wrapper {
position: relative;
width: 300px;
border: 2px solid #73AD21;
text-align:right;
}
.field{
display:inline-block;
position:relative;
width:300px;
}
.field-label{
display:inline-block;
width:70px;
text-align:left;
padding:10px;
}
.field-value {
display:inline-block;
width: 200px;
height: 40px;
line-height:40px;
border: 2px solid #73AD21;
text-align: center;
font-weight:bold;
}
<div class="wrapper">
<div class="phone field">
<span class="phone-label field-label">phone</span>
<span class="phone-value field-value">07010710811</span>
</div>
<div class="shot-code field">
<span class="shot-code-label field-label">shot code</span>
<span class="shot-code-value field-value">123456</span>
</div>
</div>
But I'm not sure what other requirements you have, so can't say for sure. You have a few options here. Hope some of it is helpful.
You could use float and with properties, like that :
.box{
float :left;
text-align: center;
width: 300px;
}
.top{
width: 100%;
}
.cut{
width: 50%;
float:left;
box-sizing: border-box;
}
.border{
width: 50%;
float:left;
}
<div class="box">
<div class="top">
Phone 07010710811
</div>
<div class="cut">
shot code
</div>
<div class="cut border">
123456
</div>
</div>
Of course, you have to adapt this code to your case.
I'm having an issue with my site's footer. Whenever more content is added further down the page and a scrollbar is made available, the user scrolls and the footer is not at the bottom. The footer is in position absolute, and shows neatly at the bottom of the screen before the user scrolls down. This would be find if the user didn't have to scroll down, but obviously some pages are longer than others. All the code is shown below. Using fixed would obviously not do what I want. I want the user to scroll down to the bottom of a page to find the footer there, like with most websites.
HTML:
<div id="topbox">
<img style="position:relative;left:12px;top:3.5px;width:121.55px;
height:42.5px;">
<div id="box" class="boxa">
text1
</div>
<div id="box" class="boxb">
text2
</div>
</div>
<div style="position:absolute;top:10px;right:0px;">
<img>
</div>
<div id="textbox" style="top:40px;left:90px;margin-right:500px;">Imagine a lot of text here, possibly enough to cause the page to overflow downwards.</div>
<img style="width:15%;height:15%;float:right;z-index:1;
position:relative;bottom:200px;margin-right:100px;">
<div class="backgroundimage"></div>
<div id="footer"><p style="position:relative;top:39px;left:5px;font-size:80%;">Footer text.</p></div>
CSS:
#box {
position:relative;
}
.boxa {
left:173px;
bottom:34px;
width:249px;
}
.boxb {
left:430px;
bottom:55px;
width:90px;
}
#textbox {
position:relative;
background:rgba(255,255,255,1);
padding:7.5px;
font-family:arial;
z-index:1;
//box-shadow:0 0 30px rgba(000,000,000,1);
border-radius:15px;
line-height:25px;
font-size:90%;
}
#topbox {
background-color:white;
width:50000px;
height:50px;
position:relative;
bottom:8px;
right:8px;
padding-right:20px;
}
#media screen and (min-width:1008px) {
#textbox {
width:auto;
}
}
#media screen and (max-width:1006px) {
#textbox {
width:auto;
}
}
#footer {
background-color:gray;
height:75px;
position:absolute;
bottom:0px;
left:0px;
color:lightgray;
font-family:arial;
width:100%;
}
.backgroundimage {
border-bottom:300px solid rgb(247,145,47);
border-right:3000px solid transparent;
z-index:0;
position:relative;
right:110px;
bottom:70px;
}
Please read carefully through my code tosee what I have attempted, and how everything works together. I have had no issues with the page at all, so if there is code completely irrelevant to the footer just leave it as is. Also please actually read through what I have already said so you are fully aware of what I am trying to achieve. Many thanks in advance.
If you mean a sticky footer, which is always on bottom position at less content. When more content is visible the footer is scollable again.
One way is to use flexbox. Use a wrapper and two divs inside. The Second is the footer. Then you give the first div more space.
This technic works in all modern browsers.
*{
padding: 0;
margin: 0;
}
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1;
}
<body>
<header>header…</header>
<main>main…</main>
<footer>footer…</footer>
</body>
Make it position:absolute
#footer {
position:absolute;
bottom:0;
left:0;
right:0;
}
if I understood correctly what you want, try this:
.backgroundimage {
border-bottom: 300px solid rgb(247,145,47);
z-index: 0;
position: relative;
right: 110px;
}
#footer {
background-color: gray;
height: 75px;
bottom: 0;
left: 0;
right: 0;
margin-top: 0px;
color: lightgray;
font-family: arial;
width: 100%;
}
Wrap all the elements in a div
<body>
<div> ...all your content... </div>
<div id"footer"></div>
</body>
jsfiddle link
#box {
position: relative;
}
.boxa {
left: 173px;
bottom: 34px;
width: 249px;
}
.boxb {
left: 430px;
bottom: 55px;
width: 90px;
}
#textbox {
position: relative;
background: rgba(255, 255, 255, 1);
padding: 7.5px;
font-family: arial;
z-index: 1;
//box-shadow:0 0 30px rgba(000,000,000,1);
border-radius: 15px;
line-height: 25px;
font-size: 90%;
}
#topbox {
background-color: white;
width: 50000px;
height: 50px;
position: relative;
bottom: 8px;
right: 8px;
padding-right: 20px;
}
#media screen and (min-width:1008px) {
#textbox {
width: auto;
}
}
#media screen and (max-width:1006px) {
#textbox {
width: auto;
}
}
html {
height: 100%;
box-sizing: border-box;
}
body {
min-height: 100%;
padding-bottom: 75px;
/*size of the footer*/
position: relative;
margin: 0;
box-sizing: border-box;
}
#footer {
background-color: gray;
height: 75px;
position: absolute;
bottom: 0px;
left: 0px;
color: lightgray;
font-family: arial;
width: 100%;
}
.backgroundimage {
border-bottom: 300px solid rgb(247, 145, 47);
border-right: 3000px solid transparent;
z-index: 0;
position: relative;
right: 110px;
bottom: 70px;
}
<div id="mainpart">
<div id="topbox">
<img style="position:relative;left:12px;top:3.5px;width:121.55px;
height:42.5px;">
<div id="box" class="boxa">
text1
</div>
<div id="box" class="boxb">
text2
</div>
</div>
<div style="position:absolute;top:10px;right:0px;">
<img>
</div>
<div id="textbox" style="top:40px;left:90px;margin-right:500px;">Imagine a lot of text here, possibly enough to cause the page to overflow downwards.</div>
<img style="width:15%;height:15%;float:right;z-index:1;
position:relative;bottom:200px;margin-right:100px;">
<div class="backgroundimage"></div>
</div>
<div id="footer">
<p style="position:relative;top:39px;left:5px;font-size:80%;">Footer text.</p>
</div>
I have three divs (left, mid and right) and these divs don't have an exact height, because it depends on how many rows text are inside the div.
Now I want vertical lines (which seperate the three divs) through the whole height of the users monitor, no matter how high the divs are.
How can I do this? Because , as you can see in the css-code, border-right/border-left don't work for me.
Intention
HTML
<div class="content">
<div class="content_left"></div>
<div class="content_mid"></div>
<div class="content_right"></div>
</div>
CSS
.content {
line-height: 1.1;
background-color: #FFF;
color: #000;
position: absolute;
top: 36px; /* because there is a top-menu which is 36px high */
left: 70px; /* because there is a side-menu which is 70px wide */
right: 0px;
bottom: 0px;
overflow-x: hidden;
overflow-y: auto;
}
.content_left {
position: absolute;
width: 22.5%;
left: 0px;
top: 0px;
border-right: 1px solid #ccc;
padding: 10px;
overflow-x: hidden;
overflow-y:hidden;
}
.content_mid {
position: relative;
width: 50%;
top: 10px;
left: 25%;
float: left;
padding-left: 10px;
}
.content_right {
position: absolute;
width: 22.5%;
right: 0px;
top: 0px;
border-left: 1px solid #ccc;
padding: 10px;
overflow-x: hidden;
overflow-y: hidden;
}
Edit 1: I would like to have these seperate-lines 1px wide and I cannot set the height of content_left, content_mid, content_right to 100% because I have resizeable boxes in these divs.
I think this does what you want.
JSFiddle example
The HTML structure is a bit more complicated than yours:
<div class="menu-top">Menu top</div>
<div class="wrapper">
<div class="menu-left">Menu left</div>
<div class="content">
<div class="column">
<div class="column-content">
<h1>Column 1</h1>
</div>
</div>
<div class="column">
<div class="column-content">
<h1>Column 2</h1>
</div>
</div>
<div class="column">
<div class="column-content">
<h1>Column 3</h1>
</div>
</div>
</div>
</div>
And here's the CSS:
body {
padding: 0;
margin: 0;
box-sizing: border-box;
height: 100%;
width: 100%;
}
.menu-top {
width: 100%;
height: 36px;
background-color: #3498DB;
}
.wrapper {
display: flex;
}
.menu-left {
height: calc(100vh - 36px);
width: 70px;
background-color: #59ABE3;
}
.content {
width: calc(100vw - 70px);
height: calc(100vh - 36px);
background-color: #E4F1FE;
display: flex;
}
.column {
flex: 33;
border-left: 1px solid hotpink;
}
.column:first-of-type {
border-left: none;
}
You can actually fake it using background-color for the parent.
/* Start Praveen's Reset for Fiddle ;) */
* {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
/* End Praveen's Reset for Fiddle ;) */
.parent {background-color: #f99; height: 100%; overflow: hidden; position: relative;}
.parent .col {float: left; background-color: #fff; height: 100%; margin: 0.5%; width: 32.25%; position: relative;}
<div class="parent">
<div class="col">
<p>I am one line!</p>
</div>
<div class="col">
<p>I am three lines!</p>
<p>I am three lines!</p>
<p>I am three lines!</p>
</div>
<div class="col">
<p>I am two lines!</p>
<p>I am two lines!</p>
</div>
</div>
Fiddle: http://output.jsbin.com/hefefawilu/1
Just Created a fiddle using your code.
See and let me know if this solves your issue.
http://jsfiddle.net/knxd0htm/
Add this part of code to make it work
**HTML:**
<div class="content">
<div class="content_left">a</div>
<div class="full-height one"></div>
<div class="content_mid">b</div>
<div class="full-height two"></div>
<div class="content_right">c</div>
</div>
**CSS**
/**** CODE ****/
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
.content {
height: calc(100%-36px);
min-height: calc(100%-36px);
}
.full-height {
position: absolute;
height: 100%;
border-left: 1px solid red;
}
.full-height.one {
left: 22.5%;
}
.full-height.two {
right: 22.5%;
}
/**** CODE ****/
You can achieve this without adding an extra HTML by using Pseudo selectors. I've also tidied up some of the code that works out widths :).
* {
box-sizing:border-box;
}
html, body {
height:100%;
width:100%;
}
body {
position:relative;
margin:0;
padding:0;
}
.content {
line-height: 1.1;
background-color: #FFF;
color: #000;
position: absolute;
top: 36px;
/* because there is a top-menu which is 36px high */
left: 70px;
/* because there is a side-menu which is 70px wide */
right: 0px;
bottom: 0px;
overflow-x: hidden;
overflow-y: auto;
}
.content_left {
position: absolute;
width: calc(25% - 35px);
left: 0px;
top: 0px;
padding: 10px;
overflow-x: hidden;
overflow-y: hidden;
}
.content_mid {
position: relative;
width: 50%;
top: 10px;
left: 25%;
float: left;
padding-left: 10px;
}
.content_right {
position: absolute;
width: calc(25% - 35px);
right: 0px;
top: 0px;
padding: 10px;
overflow-x: hidden;
overflow-y: hidden;
}
.content:before {
content: '';
border-left:1px solid #ccc;
width:0;
position:absolute;
top:0;
left:25%;
bottom:0;
}
.content:after {
content: '';
border-right:1px solid #ccc;
width:0;
position:absolute;
top:0;
right:25%;
bottom:0;
}
<div class="content">
<div class="content_left"></div>
<div class="content_mid"></div>
<div class="content_right"></div>
</div>
I am trying to place a box along side each image on my webpage that will scroll down with the page but only inside the confines of the post/image, like can be found at memecenter, but i am having some difficulties.
I have set the parent div (post) to position relative and the child div (scrolling box) to position absolute, and they are nested within each other in the html but the child div wont scroll it still stays static on the page.
See code here:
.parent {
position: relative;
width: 613px;
overflow: hidden;
padding: 10px 0;
border-bottom: 1px solid #dddddd;
}
.child {
position: absolute;
width: 46px;
height: 100px;
float: right;
margin-right: 20px;
}
and html:
<div class="parent">
<div class="child">
</div>
</div>
You can use "top" and "left" values.
Css Part:
.parent {
position.parent {
position: relative;
width: 613px;
overflow: hidden;
padding: 10px 0;
border-bottom: 1px solid #dddddd;
}
.child {
position: absolute;
left: 100px;
top: 10px;
width: 46px;
height: 100px;
float: right;
margin-right: 20px;
float: left;
}:
Html part:
<div class="parent">
<img src="img.png" width="100px">
<div class="child">This is image description</div>
</div>
Css :
.parent
{
background-color:Blue;
position:fixed;
width: 150px;
height:200px;
overflow: hidden;
padding: 10px 0;
border-bottom: 1px solid #dddddd;
overflow:hidden;
}
.child {
background-color:red;
position: absolute;
width: 460px;
height: 220px;
float: right;
margin-left:150px;
overflow:scroll;
}
and html:
<div class="parent">
</div>
<div class="child">
</div>
Please find a working fiddle.
http://jsfiddle.net/Victor_AJ/8GS7b/13/
CSS :
.parent {
background-color:Blue;
position:fixed;
width: 70%;
height:100%;
overflow: hidden;
padding: 10px 0;
border-bottom: 1px solid #dddddd;
overflow-y:scroll;
overflow-x:hidden;
}
.child {
background-color:Grey;
position: absolute;
width: 30%;
height:100%;
float: right;
margin-left:70%;
overflow:hidden;
}
And Html :
<div class="parent">
</div>
<div class="child">
</div>
Find a Fiddle Here Working EX