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>
Related
I would like to know:
is this header of professional quality?
if not, what could I add or change?
I've tried not absolutely positioning the elements in the header and floating the button to the right, but it always results in the button being too low. Should I just keep the elements absolutely positioned, or is there another method I don't know about?
I am also having trouble setting proper ids and classes for my elements, do you know of a way to make this code more DRY?
I am aware that this is far from professional quality and that I'm an idiot, but I'm having trouble writing clean code and I don't know which way is best to make a header like this. I've tried googling help, and looking at code from other websites, but I'm always perplexed by their examples.
I would greatly appreciate it if you could give me some pointers, thanks!
HTML:
<header id="master-head">
<div id="master-head-content">
<span id="master-head-title">Brodie Been</span>
<span id="master-head-primary">
My Work
About Me
</span>
<span id="master-head-secondary" class="menu-right">
<button id="master-head-contact">CONTACT ME</button>
</span>
</div>
</header>
SCSS:
$shadowColor:rgba(0,0,0,0.16);
$softBlack:#404040;
$primaryColor:#348DC8;
#mixin vertCenter{
position:absolute;
top:50%;
transform:translate(0, -50%);
}
body{
background:#404040;
font-family:Open Sans;
button{
display:inline-block;
position:relative;
border:none;
color:white;
text-decoration:none;
font-size:14px;
background:$primaryColor;
&:hover{
cursor:pointer;
color:white;
background:$softBlack;
}
}
}
#master-head{
position:relative;
height:100px;
font-size:14px;
background:white;
#master-head-content{
width:100%;
height:100%;
#master-head-title{
#include vertCenter;
padding-left:50px;
font-size:24px;
}
#master-head-primary{
#include vertCenter;
padding-left:300px;
a{
text-decoration:none;
color:inherit;
margin-right:30px;
&:hover{
margin-bottom:-1px;
border-bottom:1px solid black;
}
}
}
#master-head-secondary{
#include vertCenter;
right:50px;
#master-head-contact{
width:130px;
height:50px;
}
}
}
}
Stack overflow probably isn't the place for this for future reference but don't sweat it! Here's my take:
Never use ids with css. (Here is an explanation why)
You should avoid nesting element selectors in css. Instead I recommend following BEM.
When naming my variables I like to format them based on type. So call your colors $color-black instead of just $black etc.
I would not use named css colors. Either use variables or write them out. Even with "safe" colors like black and white it just looks sloppy.
This goes back to #2 but avoid using element types as selectors. Give your button etc classes and use them instead. Unless of course that button style is going to be universal within your site.
Hopefully this feedback helps you! Good luck with your header.
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>
Should be simple but I can't work it out.
I have two panes on my webpage. I want both to be independently scrollable:
<body>
<div id="sidebar"> ... lots of content ... </div>
<div id="container"> ... lots of content ... </div>
</body>
#sidebar{
width:200px;
position:fixed;
overflow:scroll;
background-color:black;
color:white;
top:0;
left:0;
height:100%;
}
Here is a JSFiddle. Notice how when you scroll to the bottom in the black sidebar, and keep scrolling, the body starts to scroll? That's what I want to avoid. Is there a simple way to achieve this?
Please try following updated CSS. Here I have set 200px height after that it will add scroll bar for #sidebar div.
#sidebar{
width:200px;
position:fixed;
overflow:auto;
background-color:black;
color:white;
top:0;
left:0;
height:200px;
}
Hope it may help.!!
body {
overflow-y : hidden
}
helps you if you don't want body to be scrolled.
This is working if I understood your problem correctly. Just making overflow:hidden when mouse is over sidebar div.
#sidebar:hover + #container{
overflow-y: hidden;
height: some_value; // your window height
}
You´re right. In Chrome it happens.
Maybe some jQuery?
$("#sidebar").focus(function(){
$('body').css("overflowY","hidden");
});
$("#sidebar").blur(function(){
$('body').css("overflowY","scroll");
});
Add tabindex="-1" to sidebar to get this working
Actually Working
Hi I a creating a button using three divs and all divs have background images. This is how it looks like.
Button Demo
The button is fine but how can i resize it ?? I am doing like
.btncontainer{
position:absolute;
top:120px;
left:120px; cursor:pointer;
display:inline-block;
width:120px;
height:20px;
}
But it is changing the button design. What can i do to resize it dynamically with the text?
i want to look like this if the size is changed for example this image has different sizes.
So when i changing the .btncontainer then it should change the width and height of the elements inside it but this is not happening
As you precised in an upper comment; In this special case, you have to use images for left and right divs. I suggest you to set a proper height to them, in the html code.
This is not the best practise, but will do the work regarding your needs.
Please see the following example.
Please note you will have to change the #backgrounddiv height and line-height to match.
See fiddle here
CSS
.btncontainer{
position:absolute;
top:180px;
left:10px; cursor:pointer;
display:inline-block;
}
#leftdiv{
float:left;
}
#backgrounddiv{
background:url("http://i.share.pho.to/0ffe9c14_o.png") top center repeat-x;
float:left;
height:40px;
padding:10px;
line-height:40px;
}
#rightdiv{
float:left;
}
HTML
<div class="btncontainer" id="button">
<a href="#">
<div id='leftdiv'>
<img src="http://i.share.pho.to/ff6cc4e3_o.png" height="70px" />
</div>
<div id='backgrounddiv'>CLick Me </div>
<div id='rightdiv'>
<img src="http://i.share.pho.to/245be416_o.png" />
</div>
</div>
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).