I have a header in a website that I want to fill the top portion of the site no matter what the browser size is.
h1 {
font-family: 'Holtwood One SC';
color: #1C003A;
font-size: 4em;
}
#header {
float:left;
text-align:center;
width: 95%;
margin: 0px 20px 0px 20px;
}
<div id="header"><h1>Spilling the Beans</h1></div>
this is the CSS and HTML. The div for the header is just in the body. I don't know what to input to make this expand and shrink with the browser.
Well, if you just remove the float:left and width:95%, then it will automatically take the full width of the browser because that's the default.
If, however, you're actually talking about making the text size itself get bigger and smaller depending on browser size, you can try using Viewport Units:
h1 {
font-size:4em;
font-size:5vw;
}
It is very important to have the first one be in pt, px, em or other common unit, so that browsers that don't support Viewport Units have something to fall back on. As for the Viewport Unit, adjust as desired. You can also use vh instead of vw to adjust the text size based on the height of the viewport rather than the width.
If this isn't what you mean either, please be more specific.
you should be setting your margins in body and remove float and margin on the header
body{
margin:0; padding:20px;
}
#header {
text-align:center;
width: 100%;
background:#ccc;
margin:auto;
}
see http://jsfiddle.net/8dtqs/
Related
I need to style one of the containers in my app so that it has fixed aspect ratio and fills an outer container in width or height depending on viewport width. While filling width is as simple as setting
#myDiv{
width:100%;
padding-bottom: 50%
}
It doesn't seem like there is any obvious way to set the height to 100% and then left padding to 200% of that. Is this even possible without playing with bounding boxes in js?
As per my understanding you can try viewport height another css proeprty.
By giving like this:
#mydiv{
width:100%;
height:100vh;
}
vh means viewport height that will cover the container t0 viewport height.
Actually this is possible with media queries and "aspect-ratio". MDN says it's not supported by chrome, but it must be outdated, it works.
https://codepen.io/anon/pen/zWpmYK
#a4{
background: #f00;
width:100%;
padding-bottom: 141%;
}
#media (min-aspect-ratio: 21/29) {
#a4{
background: #0f0;
height: 98vh;
padding-bottom: 0;
width: 69vh;
}
}
https://developer.mozilla.org/fr/docs/Web/CSS/#media/aspect-ratio
<div id='wrapr'>
...
</div>
CSS
body{
max-width:1366px;
}
#wrapr{
position:fixed;
right:14px;
top:30px;
}
I just want #divr to bi fixed i.e. not scrollable on page.
But on a large screen (1920 px for example) it is placed outside of my bodytag !
How can I keep it fixed, but inside the body ?
A good rule of thumb for modern web development is to avoid px measurements at all costs. em, ch, vh/vw, and percents will generally provide a much better experience for users across a wide range of devices, aspect ratios, screen resolutions, etc.
body {
max-width: 100vw;
}
#wrapr {
position:fixed;
right: 1em;
top: 2em;
}
Sometime also to watch out for is for children elements which do not respect their parents max width. You may need to write CSS for these elements to ensure that they never grow larger than their parents.
#wrapr .someChildClass {
max-width: 100%;
}
For debugging this sort of thing, I find it extremely helpful to utilize Chrome DevTools. If you select the element you are interested in, it will show the entire box model including margin, content size, padding size, etc. in the style panel.
Finally, if you just want to truncate content, you can turn overflow off to prevent scrolling.
body {
max-width: 100vw;
overflow: hidden;
}
#wrapr {
position:fixed;
right: 1em;
top: 2em;
}
I am working on a website from a template, and for some reason the text in the lower left corner stacks on itself when I reduce the window size. I am by no means an expert in HTML/CSS but I can't seem to figure out why exactly it is doing this. I've tried messing with the div properties and the z-index. It looks like this
My HTML code:
<!-- Site Logo -->
<div id="logo">salem music</div>
CSS:
#logo {
font-family: 'Coustard', serif;
font-size: 49px;
bottom:40px;
height:auto;
left:40px;
position:absolute;
width:20%;
z-index:1000;
color: #fff;
}
I'd like it to look like
The width is set to 20%. If you decrease the window width, then eventually the #logo element will get too small in width and will cause the text to wrap.
Consider setting a larger width value.
.logo {
background-color: grey;
margin: 10px;
}
.logo1 {
width: 5%;
}
.logo2 {
width: 75%;
}
<div class="logo logo1">This width is too small and will wrap</div>
<div class="logo logo2">This width is better and won't wrap</div>
Or, if you want to keep it that width, and want to allow text to overflow out of the <div>, you can use white-space: nowrap. However, I wouldn't recommend this, as it would probably overlap the links next to it.
.logo {
background-color: grey;
margin: 10px;
}
.logo1 {
width: 5%;
}
.logo2 {
width: 5%;
white-space: nowrap;
}
<div class="logo logo1">This width is too small and will wrap</div>
<div class="logo logo2">This will not wrap even though it is too small</div>
#Bálint made a good point in the comments as well: when possible, use the em unit for measurements instead of percentages. ems are based on font size, rather than window size. Therefore, changing the window wouldn't affect it, but changing the font size would (in a desirable way).
Im trying to create a header by using html lists but when I try to change the font size to a smaller value it automatically re-sizes the whole li.
Here is an example of what I mean:
Comment out the font size tag to see what I mean...
HTML:
<ul id="header">
<li><a><h1>Home</h1></a>
</li>
<li><a><h1>Link2</h1></a>
</li>
<li><a><h1>Link3</h1></a>
</li>
<li><a><h1>Link4</h1></a>
</li>
<li><a><h1>Link5</h1></a>
</li>
<li><a><h1>Link6</h1></a>
</li>
Css:
#header {
width: 70em;
height: 4em;
padding: 0;
margin: 0;
margin-bottom: 1px;
list-style: none
}
#header li {
/*font-size: 8pt;*/
color: #FFF;
display: inline;
margin-right: -3px;
}
#header a {
display: inline-block;
width: 9.94em;
height: 4em;
background: #FDB813;
}
Should I use divs instead or is there another solution?
Please add this :
#header h1{
font-size: 8pt;
}
Thanks.
You are using the em unit for setting the width/height of the links.
em are relative to the font size, so when you change that you alter their dimensions as well
When you use display: inline the size of the element will depend on the text (and the size of the text). There are many ways to change this.
If you want the header to always take up the same width, consider floating the elements and setting a percentage width, depending on the number of elements (5 elements = 20% width).
You can also set the background color on the #header element, so that always takes up the same amount of space, but the links change size within it.
I would create a div as the header and then put the ul inside it. You will have more control over styling. To change just the font size on the a tags, add the font-size ; to the #header a {}.
Since the dimensions of the a element have been set using the em unit, they change when the font size of the element is changed. This also changes the dimensions of the enclosing li element, since the a element is its only content.
The conclusions depend on what you want. By setting dimensions using the em unit, you explicitly want them to depend on the font size. If you do not want that, use some other unit, such as px (though this unavoidably raises the question what happens when the font size is increased so that it is larger than the height set in px units).
Add a css property
#header a{
font-size: 8pt;
}
when I zoom-in, zoom-out my web page the position of all divs and items get disturbed.and when I again reset zoom to 100% it comes fine.Even this problem comes when open the same page in big screen laptop.How can I fix the div position.some of my css code-
/* hbg */
.hbg {
background-color:transparent;
float:left;
margin:2px 0 0 45px;
padding:65px 456px 0 56px;
width:137px;
height:190px;
background:#fff url(images/hbg_img.jpg) no-repeat top left;
}
/*solutions*/
.solu{ background-color:transparent;}
.solu_resize { margin:0 auto; padding:0; width:auto;}
.solu .smenu ul { margin:0 0 0 45px; padding:0; float:left; width:auto; list- style:none;}
.solu .smenu ul li { margin:0 0; float:left;}
.solu .smenu ul li a { display:block; margin:0; padding:0; color:#5f5f5f; text- decoration:none;}
.solu_resize img{ float:left; padding:0 0 0 0;}
........
Zoom-in and zoom-out means different things on different browsers. For instance on FF, you can zoom in "text-only." When the zoom feature affects text size, absolutely positions divs get messed up as you saw.
You can fix this problem by designing your page to be "elastic." Instead of using pixels, you define both coordinates and measurements in "em" units. An em is equal to the browser default text-size, which is usually 16px. To make life easier, reset em to 10px by putting the following in your stylesheet:
body {
font-size: 62.5%;
}
If the above code is in your style sheet, you can convert your pixels to em easily by dividing each pixel value by 10. For instance, using your code above:
margin:.2em 0 0 4.5em;
padding:6.5em 45.6em 0 5.6em;
width:13.7em;
height:19em;
This should fix the zoom problem and also allow people to change text-size when viewing your page. This won't work for your sprites and you may still run into overlapping issues. If it gets messy, you may have to consider changing your layout approach. If you do experience overlap, I'd suggest you use overflow:hidden on all your divs and specify max-height and max-width where appropriate.
If you need to read more about ems and elastic design, here's a good tutorial: http://jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css
And here's the W3 reference on max-height:
http://www.w3schools.com/Css/pr_dim_max-height.asp
This is because you provided absolute widths with floating elements. If you change the screen-size, the elements seem to be unsorted, because they are still of the specified size. Maybe size-definitions in percentage can help you out with this issue.