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).
Related
I am developing a little Fantasy Football web. For the lineup, I want to put some div's with the players data above an image of a football field, and want to make it responsive too.
My example code:
HTML:
<div class="container" style="position: relative;" >
<div class="tag">player</div>
<img class="img-fluid" id="image" src="<?php echo base_url() ?>assets/img/grass.jpg">
</div>
CSS:
<style type="text/css">
.tag {
float: left;
position: absolute;
left: 55px;
top: 100px;
z-index: 1000;
background-color: #92AD40;
padding: 5px;
color: #FFFFFF;
font-weight: bold;
}
The problem comes when the browser resizes or it's in mobile version, since the position of the divs goes elsewhere, even out of the image. There is way to establish the div's position relative to the image itself? So no matter if I access through a desktop or a cellphone it maintains its position and I can see the players in the position that I want. And in this case, it's better to have an image or maybe a div with a image background? Or maybe a bootstrap method/class can do something similar.
Desktop:
Mobile:
What I want to accomplish (edited with paint):
The problem is to get the players positioned correctly relative to the grass image whatever the device dimensions.
You can get a container div to take on the size of its contents by making it display: inline-block. Then you want the grass to fill as much as possible of the screen - but it must keep its aspect ratio. The method you have (using img rather than background-image) is probably the better one to use here because the sizing will occur automatically.
Once you have done that you can position your players in the x and y directions by giving their percentage positions. Also if you alter your HTML slightly so that the img comes first in the container it will always be behind the players you put afterwards. The players are positioned with absolute, as you have done, so that they do not effect each others' positions.
* {
margin: 0;
padding: 0;
}
.container {
position: relative;
width: auto;
height: auto;
display: inline-block;
}
.tag {
position: absolute;
left: 55%;
top: 80%;
background-color: #92AD40;
padding: 5px;
color: #FFFFFF;
font-weight: bold;
font-size: 2vw;
}
#image {
width:100vw;
max-width: 100vh;
}
<div class="container" >
<img class="img-fluid" id="image" src="https://i.stack.imgur.com/3I0Ie.jpg">
<div class="tag">player</div>
</div>
I have rather arbitrarily set the font-size to be proportional to viewport width, so it shrinks proportionally, but you probably want to think about whether the smallest devices need a larger font size to be readable.
So on a website I'm making a have a navigation bar, I use this code for it.
<div id="container">
<span>Home</span>
<span>Blackmail</span>
<span style="color: #7CFC00">Keeping Safe</span>
<span>Cyberbullying</span>
<span>About</span>
</div>
However this navigation bar is wider than the others, exact same code (Apart from the colour, the colour shows what page you are on)
I would appreciate it if someone told me why this happens or how it could get fixed!
Website - nibble90.github.io
The page with the wider navigation bar is the keeping safe page!
Your #container menu has a fixed width (83em) and a padding. When your content is longer than the page height, it causes a vertical scroll bar to appear and your fixed width elements can't adjust to accommodate it.
You should set its width to be 100% with a min-width of something like 550px and its sizing to be border-box. This will mean it fits your page much more gracefully on different sized browsers and also auto-adjust to the presence or absence of the vertical scroll bar.
So:
#container{
width:100%;
min-width:500px;
box-sizing:border-box;
}
Replace the #container code by this one and it will works. It's better to use % or px instead of em for container width.
#container {
display: block;
width: 25em;
margin: 0 auto;
padding: 10px 0px;
margin-top: 2em;
text-align: center;
background-color: #333;
width: 100%;
}
The width in your CSS is what is throwing you off. Remove the width and the divs will match in size.
#container {
display: block;
margin: 0 auto;
padding: 10px 0px;
margin-top: 2em;
text-align: center;
background-color: #333;
}
Make sure to remove both because you had width in there twice.
I'd like to have a div that is centered on the document. The div should take all the space it can to display the content and the content itself should be aligned to the left.
What I want to create is image gallery with rows and columns that are center and when you add a new thumb it will be aligned to the left.
Code:
<div id="out">
<div id="inside">
<img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/>
<img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/>
<img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/>
<img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/>
<img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/>
</div>
</div>
and the CSS:
img {
height: 110px;
width: 110px;
margin: 5px;
}
#out {
width: 100%;
}
#inside {
display: inline-block;
margin-left: auto;
margin-right: auto;
text-align: left;
background: #e2e2f2;
}
Live version here: http://jsfiddle.net/anPF2/10/
As you will notice, on right side of "#inside" there is space that I want to remove, so this block will be displayed until the last square and all of it will be centered aligned.
EDIT:
Please view this photo: https://www.dropbox.com/s/qy6trnmdks73hy5/css.jpg
It explains better what I'm trying to get.
EDIT 2:
I've uloaded another photo to show how it should adjust on lower resolution screens. notice the margins on the left and right. This is what I'm trying to get (unsuccessfully so far :\ )
https://www.dropbox.com/s/22zp0otfnp3buke/css2.jpg
EDIT 3 / ANSWER
well, thank you everybody for trying solve my problem. I solved this problem using JS, with a function that listens to a screen resize event. The functions checks the size of the right margin and add padding to the left so all the content is centered. I didn't find a solution using CSS. If you have one, I'd very much like to know it.
Thanks eveyone!
Specify a width for #inside to center it. I used width: 120px. Fiddle: http://jsfiddle.net/anPF2/7/
Additionally, CSS should be used for the height and width of images, not attributes such as height="300". The fiddle reflects this change.
use of display:inline-block takes extra margins. To remove those set font-size:0px to the #out container. See the demo
This is what you want to achieve? demo
img {
height: 110px;
width: 110px;
margin: 5px;
display: inline-block;
}
#out {
width: 100%;
margin: 0 auto;
position: relative;
border: 1px solid red;
}
#inside {
position: relative;
background: #e2e2f2;
}
You shouldn't use Pixels when laying out your css, it makes it very rigid and causes possible problems for people with high resolution screens and low resolution screens. Its best to declare it as a % or em (% is still probably slightly better when working with widths, but em for height is perfect)
First, the "outer" div must be declared to be smaller than what it is inside. For instance if "outer" is inside body:
#outer{
width: 100%;
}
#inside{
width: 80%;
margin-left: auto;
margin-right: auto;
}
#inside img{
height: 110px;
width: 110px;
margin-left: 1%;
margin-right: 1%;
margin-top: 0.5em;
float: left;
}
Okay so, since "inside" is 80% of "outer"'s width, the margin-left:auto, margin-right: auto together make the "inside" div center within the "outer".
Setting the float property to left moves all the imgs of inside to always try to move left while it can.
EDIT: I fixed this after looking at your picture you provided.
I haven't tested this but I believe it should work, let me know if you are having more problems.
To make the boxes not go the entire width of the page, try setting the width less than 100% on #out and add margin:auto; to center it.
#out {
width: 90%;
margin:auto;
}
http://jsfiddle.net/anPF2/36/
First of all, want to say, that I'm not a front-end engineer and my skills of UI and UX are very low.
So my question is:
I have a div with p tags inside. I want to have it width: 700px when the browser window is maximized. But if I put this property in CSS of my div. The text will not shrink if I resize the window. So I want to have it up to a certain point while window is maximized and shrink it if you resize the window, without affecting side-bar div.
To be more clear I will give you an example:
Maximazed Browser window:
Minimized Browser window:
HTML
<!-- HOME -->
<div id="home" class="content">
<h2>Home</h2>
<p>AAAAAAAAAAAAAAAAAAA</p>
<p>BBBBBBBBBBBBBBBBBBBB</p>
</div>
CSS
.content {
padding-bottom: 30px;
position: absolute;
left: 280px;
right: 40px;
top: 0px;
}
.content h2 {
font-size: 110px;
color: #fff;
color: rgba(255,255,255,0.9);
padding: 10px 0 20px 0;
margin-top: 50px;
}
.content p {
color: black;
font-size: 16px;
line-height: 24px;
display: inline-block;
}
You don't need to use Media Queries in your case, but that would be the case in more complicated cases (different breakpoints for example).
Just use max-width: 700px and you're done.
Normal behavior: your paragraph is never wider than 700px.
With very small widths, paragraph occupies the whole width as would any block element and it's still smaller than 700px so no need for MQ!
See this fiddle to see it into effect: http://jsfiddle.net/LQbgJ/ (I used 200px instead of 700)
Compatibility should be IE7+
What you want are Media Queries. Take a look at the W3C recommendations for them.
Basically, the syntax is as follows:
#media screen and (min/max-width: ){
//do something
}
These are called 'break points'. Which means, at the point where the browser reaches the min/max width you provide, you can over-rule other css. So you can make your p and div sizes different.
#media screen and (min/max-width: ){
div {
width: 200px;
}
p {
font-size: 20px;
}
}
Also take a look at Smashing Magazine's tutorial on how to use them.
Hi this is an easy noob question but I have to ask it anyway. See my fiddle:
http://jsfiddle.net/jjalbert/xXdev/
code:
<h1>Hi!</h1>
<p>Some more text</p>
<div id="bottomcorner"></div>
#bottomcorner {
position: fixed;
bottom:0;
right:0;
background-color:red;
width: 100px;
height: 100px;
}
h1 {
color: green;
font-size: 20px;
width: 200px;
font-weight: bold;
}
p {
color: blue;
width: 230px;
}
I have an element fixed to the bottom right but I want it to remain in a static position once a certain browser width is created so that it doesn't start interfering with the content to the left of it.
So in my fiddle once the browser window is about 330px wide I would want the red box to stay in place and become unfixed from the corner of the browser.
Check out CSS Media Queries. This should get the job done.
CSS Media Queries
#media all and (min-width: 300px) {
...css rules here...
}
You could float it right and put it inside of a div with a max-width, then fix the div's position at the bottom instead of the red box to the bottom right.