Adjustable Div Container for Text (Zoom in and Zoom out) - javascript

I want to know how to make an adjustable div container which adjusts its own width and height according screen its being displayed in laptop, netbook or desktop. It must be so that no text under or overflows its container and no white spaces are left within the container.
I tried using % or em but since its based on base font-size 16px there are occasion in smaller netbook screen where the text overflows or in bigger screen desktop where there are whitespaces left in the bottom of container.
Any suggestions would be greatly appreciated.
<style type="text/css">
.tt
{
border: 2px solid red;
height: 80px;
width: 168px;
font-size: 16px;
padding: 0px;
}
</style>
</head>
<body>
<div class="tt">
Hello World Hello World<br>
Hello World Hello World<br>
Hello World Hello World<br>
Hello World Hello World<br>
</div>
</body>

You can try this to make the div stretch to the screen:
html, body, .tt { width:100%; height:100%; padding: 0; margin: 0;}
.tt
{
border:2px solid red;
font-size:16px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
}
Beware, box-sizing is a CSS3 property.
If you don't want to use it, you can remove the border from the div, or use tables (deprecated).
Do you also need to fill the hole screen with text?
In that case, this will be usefull: CSS: Set font to a size so the text would occupy whole container
(the link is a duplicated question, but in my opinion has a more easy to understand answer).

Related

CSS: Dynamically resizing font in container that is 100vh

Problem: I have a container that is 100vh, when the screen shrinks, I would like the font to shrink with it and always fit within the container, never spilling over it.
Notes: I know this can be done pretty simply with #media css rules, but I'm wondering whether or not is it possible to accomplish without #media or dynamically
Fiddle: https://jsfiddle.net/wm0n4mys/
.container{
border:1px solid black;
text-align:center;
height:100vh;
}
h2{
font-size:60px;
}
*{
box-sizing:border-box;
padding:0;
margin:0;
}
<div class="container">
<h2 class="main">A TITLE THATS TALKING ABOUT SOMETHING BIG AND THIS IS A PRETTY BIG TITLE MAN I GET IT YO</h2>
<p class="text">Something, Something, Something, Something, Something, Something Something Something Something Something SomethingSomething SomethingSomethingSomethingSomethingSomethingSomething</p>
</div>
Use vw, or vh, as font size unit
.container{
border:1px solid black;
text-align:center;
height:100vh;
}
h2{
font-size:5vw;
}
*{
box-sizing:border-box;
padding:0;
margin:0;
}
<div class="container">
<h2 class="main">A TITLE THATS TALKING ABOUT SOMETHING BIG AND THIS IS A PRETTY BIG TITLE MAN I GET IT YO</h2>
<p class="text">Something, Something, Something, Something, Something, Something Something Something Something Something SomethingSomething SomethingSomethingSomethingSomethingSomethingSomething</p>
</div>

How to put 2 divs next to one huge div

So there are a lot of questions like this on StackOverflow but there doesn't seem to be one that will be helpful in my case.
As you can see, I have 2 divs on the screen. One on the left which is
float:left;
and the one in the middle is
margin-left-auto;
margin-right:auto;
So my question is, when I want to put another div JUST like the one on the right on the left of the middle DIV, how will I go on to doing this?
float:right;
has been tried on the right div but that just puts it in a different line because of the left div being floated.
So how do I do this? Answers are greatly appreciated.
I can provide more code such as how the DIV"s are arranged if needed.
All I did was type
display: flex;
in the container div and it worked perfectly.
To create a main body of content with a left and right sidebar, you can float:left and simply define a width for each div in the CSS.
ie:
.div1 {width:25%}
.div2 {width:50%}
.div3 {width:25%}
If you want to account for padding, just reduce the amount divided by three on each div width.
ie: http://jsfiddle.net/simsketch/9tj4va6r/
It might help you to start out using a framework like Foundation or Bootstrap.
Foundation provides lots of starter templates to help get you started here.
http://foundation.zurb.com/templates.html
When using a grid system, instead of needing to define widths in your custom css, you can simply include the foundation.css library, and reference the classes.
ie: <div class="large-6">content</div>
For the layout you're after, this would do the trick.
http://foundation.zurb.com/templates/feed.html
What they're doing there is simply:
<div class="large-3"></div>
<div class="large-6"></div>
<div class="large-3"></div>
As long as the numbers add up to twelve, they will fit perfectly.
This has been a brief introduction to grid systems. Consult the following for more information:
http://foundation.zurb.com/
http://getbootstrap.com/
http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
These are the two most popular front-end frameworks but there are dozens more and they are all wonderful.
Flexbox solution
Wrap the items inside a parent container and set the display: flex
flex: 1 on the left and right items will grow and shrink it 1x.
flex: 2 on the middle items will grow and shrink it 2x.
.container {
display: flex;
}
.left,
.right {
flex: 1;
text-align: center;
background: #E77F24;
}
.middle {
flex: 2;
text-align: center;
background: lightblue;
margin: 0 10px;
}
<div class="container">
<div class="left">1</div>
<div class="middle">2</div>
<div class="right">3</div>
</div>
.div1{
width:25%;
overflow:auto;
float:left;
background-color:blue;
color:white;
text-align:center;
}
.div2{
width:50%;
overflow:auto;
float:left;
background-color:red;
color:white;
text-align:center;
}
.div3{
width:25%;
overflow:auto;
float:left;
background-color:green;
color:white;
text-align:center;
}
<body>
<div class="div1">First Div</div>
<div class="div2">Second Div</div>
<div class="div3">Third Div</div>
</body>

Make Safari 8 toolbar custom color using HTML, CSS and Javascript

I´ve been trying to make a fixed div that makes Safari 8 toolbar the color I want, so it can fuse with my website seamlessly. Actually I´ve managed to make this work, but just half way.
The HTML markup I'm using is this:
<html>
<body>
<div id="hiddenbar"></div>
<p>Bacon ipsum dolor amet bresaola </p>
</body>
</html>
And the CSS:
html{
height:100%;
width: 100%;
}
p{
width:500px;
margin:0px auto;
text-align: center;
font-family: Helvetica, arial;
}
#hiddenbar{
position:fixed;
background-color: red;
height: 50px;
width:100%;
margin:-57px auto;
}
This works barely fine, as I need to scroll a little to make the toolbar change it color, and It leaves a tiny portion of color down the bar, but a proper z-index should fix the last one.
Here´s a demonstration of the code: https://www.youtube.com/watch?v=apRxjiaKqzs
Any hint on how to make it work without the need to scroll?

css responsive grid - horizontal line between rows

I have a responsive layout with a grid of content blocks.
on desktop each row is 4 blocks
on tablet each row is 3 blocks
on phone each row is 2 blocks
I want a horizontal line to run between each row of blocks on all sizes. At the moment I have a border bottom on each block but the line doesn't extend the full width of the page if you have an empty space (eg 3 blocks on a 4 column grid)
The only way I can think of doing it is to wrap each row in a container using JS and reload that function on each screen resize.
Anyone know of a CSS solution?
This image should demonstrate what I'm trying to achieve:
If old browser support is not an issue, you could put some :before or :after code insertion to insert stuff before the start of each row
e.g. something like
<!DOCTYPE html>
<html>
<head>
<title>Quick and dirty border demo</title>
<style>
div {width: 47%; float:left; border: 1px solid #333; margin:1em 5px}
div:nth-child(2n+1):before {
content:'';
border-bottom:1px solid green;
position:absolute;
display:block;
width: 100%;
margin-top: -1em;
}
</style>
</head>
<body>
<div>a</div>
<div>a</div>
<div>a</div>
<div>a</div>
<div>a</div>
<div>a</div>
<div>a</div>
<div>a</div>
<div>a</div>
</body>
</html>
With different patterns (3n+1 etc) for each media query.
If you don't want a border above the first row, use (2n+3), (3n+4) ... (xn+(x+1))
You can use some CSS media queries instead of javascript:
#media (max-width:768px) { /*Extra small devices - Phones (<768px)*/
/*css here to show only the horizontal line for this size*/
}
#media (min-width:768px) { /*Small devices - Tablets (≥768px)*/
/*css here to show only the horizontal line for this size*/
}
#media (min-width:992px) { /*Medium devices - Desktops (≥992px)*/
/*css here to show only the horizontal line for this size*/
}
#media (min-width:1200px) { /*Large devices - Desktops (≥1200px)*/
/*css here to show only the horizontal line for this size*/
}

Inherit div height from parent with absolute position

I want to achieve this kind of layout with pure CSS:
The gradient in the background is 100% the width of the browser window. The inner text is inside a 1000px div, centered inside the browser window. Now I want the text to define the height of the gradient. And here is the problem: The gradient is positioned absolute (left: 0px; width: 100%), but the text is inside another div.
I've tried some things with display:table; and display:table-cell; but once I put the gradient div to position:absolute it doesn't inherit the height of the text div.
Anyone a solution how to achieve this in pure CSS without javascript?
EDIT:
I'm sorry I forgot to mention that the gradient isn't the problem (I' using css3). And furthermore I also forgot to add the code: http://jsfiddle.net/kxu8N/1/
Absolutely-positioned elements are not part of the layout flow, therefore they cannot inherit dimensional information from parent elements.
You should be using a CSS background image (or a CSS3 gradient) on the element wrapping your text to give you the gradient instead of using a separate element.
You can use the css3 background-size property to scale the height of the gradient. Set the height to auto on a div with the gradient as its background.
Here's an answer without knowing your HTML structure: http://jsfiddle.net/8xagQ/1/
.gradient{
background: -webkit-linear-gradient(left, rgba(0,119,255,0) 0%,rgba(0,119,255,1) 25%,rgba(0,119,255,1) 50%,rgba(0,119,255,1) 75%,rgba(0,119,255,0) 100%);
margin:10px 0;
text-align:center;
color:#fff;
padding:10px 0;
}​
Note that I only included the gradient instructions for webkit.
<html>
<head>
<style type="text/css">
p,span{
margin-left:20px;
}
#logo{
font-weight: bold;
height:100px;
}
#slogan{
width:100%;
height:150px;
background: -webkit-linear-gradient(left, rgba(0,119,255,0) 0%,rgba(0,200,230,15) 25%,rgba(0,200,230,15) 50%,rgba(0,200,230,15) 75%,rgba(0,119,255,0) 100%);}
</style>
</head>
<body>
<div id="logo">
<p>Logo</p>
</div>
<div id="slogan">
<span>some text that defines hieght of this</span>
</div>
</body>
</html>
In my Case I move your blue into your gradient. that way, once you add more line, line of text it will increate automaticaly
<div id="container">
<div id="outer">
<div id="blue-background">
<div class="span3" id="blue">
Here is my content<br>
and this content should define the height of the underlying #blue-background <br />
and if we are adding more and more and more
</div>
</div>
</div>
</div>
Then to the text into it I change few setting in the CSS
#blue {
z-index: 1;
position:relative;
margin:auto;
text-align:center;
}
Because I didn't find any solution, I hacked it. Cause my content gets added dynamically through javascript, I added the content two times. The first time visible inside the overlaying div (over the blue background), and the second time inside the blue background. With visibility: hidden I hide all the divs inside the blue background.
And because both divs got the same content, they get the same height. Not beautiful, but it works.

Categories

Resources