I'm trying to make a simple menu for my home server web platform for multiple screen resolutions.
Complete Example
#menu-area{
position: absolute;
text-align:center;
margin-left: 15%;
margin-right: 15%;
width: 70%;
min-height: 50px;
}
.menu-box{
display:inline-block;
height: 50px;
width: 150px;
font-size: 25px;
line-height: 50px;
text-align:center;
}
My idea was that, as the screen gets narrow , the menu links rearrange themselves, and transform from a line to a column. That part works as intended.
However when the menu gets more than 2 lines long vertically, it starts to overleap with the content display area.
I can't figure out, how to strech the div containing the menu-box -es to contain them, so the content area can get pushed down and not overleap with the menu.
P.S.: If possible I only want to use html and css for this layout.
If you comment out these lines in CSS - it works:
#head {
/* min-height: 200px; */
/* height: 15%; */
#menu {
/* height: 50px; */
#menu-area {
/* position: absolute; */
/* min-height: 50px; */
Related
I am using Angular Material for my Angular app. Currently, I have a dialog that shows info about a post. However, there is a lot of annoying whitespace at the bottom of the dialog that I want to get rid of. How can I do this?
Here is an image:
HTML
<div id="postModal">
<div mat-dialog-content id="postForm">
<div class="bigImage">
<img src={{imageLinks[0]}} class="postImage"/>
</div>
</div>
</div>
SCSS
body{
position: relative;
}
.postImage{
height: 80%;
width: 100%;
}
.bigImage{
text-align: center;
display: block;
}
#postForm{
height: 80vh;
width: 100%;
display: box;
}
mat-dialog-container{
padding-right: 30px;
padding-left: 30px;
padding-top: 10px !important;
padding-bottom: 0px !important;
}
You should remove the height from the #postForm. A height: 80vh makes it take up 80% of the height of the screen.
Since you are providing a fixed height to it, there will be empty space left if the image doesn't take up all the space.
Also your postImage has a height of 80%, the remaining space will be empty.
body{
position: relative;
}
.postImage{
/* height: 80%; this is your bug */
width: 100%;
}
.bigImage{ /* you don't need this level and even if use <figure></figure> not <div></div> */
text-align: center; /* this means empty space on sides when text is to short to fill, this class hasn't setted width, so it should adjust to content witch is an img - block element without any wraps */
display: block;
}
#postForm{
height: 80vh; /* this one may caused problems too */
width: 100%;
display: box; /* incorrect value */
}
mat-dialog-container{
/* padding-right: 30px; */
/* padding-left: 30px; */
/* padding-top: 10px !important; don't use !important instead of debugging */
/* padding-bottom: 0px !important; */
padding: 10px 30px 0; /* nice and readable instead of 4 lines */
}
If you set strict height value don't be surprised if it keep it. Good prepared css is an investment - works properly and maintaining is plasure without headaches.
.postImage{
height: auto; or 100%
width: 100%;
}
or don't give the height at all
I am trying to make a responsive blog. Here is my code for my two halves:
.masthead {
background-color: $hot-orange;
float:left;
position: fixed;
height: 100%;
width: 32%;
#include mobile {
text-align: center;
}
}
.main-body {
float: right;
width: 68%
}
Here is the container that is wrapping both:
.container {
margin: 0 auto;
max-width: 1250px;
width: 100%;
}
Am I doing anything wrong? When I open the inspector and highlight both halves, it looks like the right half (the main-body) overlaps with the left slightly. I can't seem to find the issue.
Here is my repo
I have been coding using position: absolute and then using media query's to find different resolutions and adjust items on the screen to that resolution. After looking around people have said that its better to have a design that is fluid and adjust automatically.
I had an attempt yesterday on my login screen and I managed to get it working. On my next screen I think it is a bit more difficult as I have images that need to be scaled.
Here is my layout of my page:
.wrapper {
width: 100%;
margin-left: auto;
margin-right: auto;
}
.bsimplex-header-bar {
margin-right: 10px;
margin-left: 10px;
width: 98.7%; /* 940 divided by 960 */
}
.content {
width: 98.7%;
margin-top: 38px;
margin-right: 10px;
float: right;
height: 79.5%;
margin-right: 10px;
}
.bsimplex-footer-bar {
width: 100%;
bottom: 0;
position: fixed;
margin-right: 10px;
background-color: #6a3d98;
margin-left: -10px;
}
Now I have 4 images that need to be in the middle of the screen side by side, would I wrap these 4 images in there own div or how can I achieve this scaling effect?
To make the images flexible, simply add max-width:100% and height:auto. Image max-width:100% and height:auto works in IE7, but not in IE8 (yes, another weird IE bug). To fix this, you need to add width:auto\9 for IE8.
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
or use Bootstrap framework
I have some div containers which expand when the 'view recipe button is clicked, but all 3 across the bottom will hide underneath the footer container, i'm unsure which element to alter to have the expanded containers appear above and not underneath.
live url: http://bit.ly/1hQuzRI
I've attached the css of the elements which are appearing underneath the footer and some from the footer too. I can paste the html but there is loads which will end up showing up. maybe best to just view direct on site.
.box2-container-collapsed {
padding: 10px;
width: 270px;
height: auto;
background-color: #F5F2E9;
display: block;
float: left;
margin-right: 20px;
margin-top: 20px;
position: relative;
}
.box2-content {
margin-left: 0px;
font-size: 0.9em;
min-height: 200px;
display: none;
}
#footer {
background-color: #F3F3F3;
padding-top: 10px;
padding-bottom: 0px;
bottom: 0;
position: relative;
margin: 0 auto;
width: 100%;
}
Set the z-index in the footer to a negative number. Also try setting the z-index for the div that expands to a higher number.
Edit:
Your div with the class="content-container" has overflow:hidden. I removed that in my Chrome-Dev tools and the expanding div was visible after that. Side Note: It's difficult to see where the recipe ends and the footer begins. You may want to put a light border around the recipe div, too.
Live site.
Toward the bottom of the page "Parlour Policies" is floating in the middle of the page, though it should be styled according to this:
.content {
height: 100%;
padding-bottom: 40px;
padding-left: 20px;
width: 600px;
}
Any ideas what's causing the location shift? I didn't see anything in Firebug, and the few validation errors(which I'm working to fix right now) all pertain the WP generated header and don't negatively effect any of the other <div class="content"> on different pages.
Just add overflow: hidden to .content - it will clear your floats
.content {
height: 100%;
padding-bottom: 40px;
padding-left: 20px;
overflow: hidden; /* this */
width: 600px;
}