I am trying to add borders around flexbox containers on my webpage project when the media query hits a large screen size. I want these borders to connect together to create a table look. However I can not get this to work. I have also tried the <hr> tag. If anyone has a suggestion on how to approach this it would be appreciated. I am wanting the borders to appear around the members section recent activity and settings / message user section.
The code and been seen in this JSfiddle https://jsfiddle.net/TLXL/9wkxts04/
/*********************************
Media Queries For Large Screen Size
***********************************/
#media (min-width: 1280px){
/*************************
New Members Styles
*************************/
.member {
height: 120px;
width: 650px;
position: relative;
}
.container1 {
height: 150px;
}
.member h4 {
position: absolute;
top: 25%;
right: 10%;
}
.member h3 {
margin-top:-5px;
}
.b h4 {
position: absolute;
top: 99%;
right: 3%;
color: #0084b4;
font-size: 1.25em;
}
/*************************
Message User Styles
*************************/
#buttonBox {
justify-content: space-around;
}
#messageUser{
width: 500px;
margin-left: 20px;
margin-bottom: 0;
margin-top: 50px;
}
#messageUser input {
width: 500px;
}
#messageUser textarea {
height: 225px;
width: 500px;
}
#messageUser button {
width: 500px;
}
/*************************
Setings Styles
*************************/
#settings {
width: 500px;
}
#settings h1 {
margin-left: -10px;
}
#settings select {
width: 500px;
}
.settingsButton {
width: 500px;
}
}
Thank you for your help.
Related
Hey guys I don't much experience with RTL Styles and I would really appreciate a help here.
I have this nested .less style. How can I detect if it's RTL and properly change 2 values?
I tried this but it doesn't work. Any tips?
I just need to change the margin-left and margin-right property values for RTL.
Thanks
#backdrop {
width: 100%;
height: 100vh;
display: flex;
background: rgba(0,0,0,.5);
justify-content: center;
align-items: center;
position: fixed;
z-index: 9999;
.content {
padding: 15px;
width: 100%;
max-width: 700px;
height: 400px;
background: #FFF;
border-radius: 10px;
overflow: scroll;
margin-left: -225px;
#media (max-width:768px) {
margin-left: 0;
width: 100%;
height: 90vh;
}
} & {
html {
[dir=rtl] & {
#backdrop {
.content {
margin-left: 0;
margin-right: -255px;
}
}
}
}
}
}
if the RTL style is a separate HTML file from the LTR one, then just add a specific class for the RTL element you want to edit, for example, put class="rtl__style"
on the element, and you can style that the way you want.
RE this on eBay: http://www.ebay.com/itm/281670060888
On my own site (at http://sallymilo.com/template-din.html) and when running on my own computer, the right side div aligns to the top of the left side div, but when I put it on eBay, the right side div is below the left - even if I make the tabbed section 200 pixels narrower.
A bit of the main CSS:
.row1 {
width: 100%;
position: relative;
float: left;
background: url(https://myimagefiles.com/dinnerman/tbg.png);
}
.row1l {
width: 26%;
position: relative;
margin-left: 2em;
float: left;
}
.row1r {
width: 64%;
position: relative;
margin-left: 2em;
margin-right: 2em;
float: left;
}
And a bit of the tabbed section CSS:
.tabholder {
width: 100%;
height: 14em;
font-size: 16px;
}
/* base font size for em-scaling */
.tabholder div.tabtops {
width: 100%;
max-width: 550px;
}
The issue is that in ebay the width of the container is lower than 1000px.
The because of the fact that your inner sections with hardcoded widths they break.
I suggest you to use width with %, in that way not matter what will be the with of the container the inner sections will take the number of the percentage that you gave.
.container {
margin: 20px;
background-color: rgba(0,0,0,0.2);
overflow: hidden;
}
.col-1 {
width: 20%;
background-color: rgba(0,0,0,0.2);
float: left;
}
.col-2{
width: 80%;
background-color: rgba(0,0,0,0.5);
float: left
}
<div class="container">
<div class="col-1">col-1</div>
<div class="col-2">col-2</div>
</div>
I've a fixed side bar on the right side of the page (position: fixed)
But it's contents are not fully visible as it's not scrolling with the page scroll. I could have added overflow-y: scroll in the .sidebar{} css settings. But don't want a separate scroll bar for sidebar. Is there an option to make it scroll with the full page scroll.
Here is my css settings for sidebar :
.sidebar {
text-align: center;
padding: 2rem,1rem;
color: rgba(255,255,255,.5);
background-color: #202020;
top: 0;
bottom: 0;
}
If you want to debug to see what went wrong, here is it running live : https://pagefault.me
Thanks
Based on the answer I suggested in my comment, I was able to work in chrome to arrive at the css below.
1) Add some css to the .sidebar-nav component
nav.sidebar-nav {
position: absolute;
overflow-y: scroll;
top: 100px; /*100px to give some room for the sidebar heading (without this, absolute position will make the nav overlap)*/
left: 15px; /* you can make this zero and add `padding-left: 15px` */
bottom: 15px; /* leave some room for copyright section */
right: -17px; /*this may vary from browser to browser (i suggest using the width of the widest scrollbar, then adjust for padding-right)*/
padding-right: 15px; /*padding to prevent the text from flowing off screen*/
}
2) The .container class becomes
.sidebar .container{
max-width: 38rem;
padding-left: 1rem;
padding-right: 1rem;
margin-left: auto;
margin-right: auto;
height: 100%;
position: relative;
overflow: hidden;
}
3) Make sure the footer bit remains at the bottom after making .sidebar-nav absolute
.sidebar .container > p:last-of-type {
position: absolute;
bottom: -15px;
}
Of course as mentioned in the original solution, you have to test the scrollbar widths in different browsers to arrive at the right width to use in place of right: -17px in step 1.
Use absolute position instead of fixed as you want it to scroll it along with the page.
body {
margin: 0;
padding: 0;
position: relative;
}
main {
position: absolute;
top: 0;
left: 0;
width: 80%;
height: 300vh;
background: beige;
}
aside {
position: absolute;
top: 0;
right: 0;
width: 20%;
height: 300vh;
background: black;
color: white;
}
<main></main>
<aside><aside>
A flex box solution without positioning :
body {
margin: 0;
padding: 0;
display: flex;
}
main {
width: 80%;
height: 300vh;
background: beige;
}
aside {
width: 20%;
height: 300vh;
background: black;
color: white;
}
<main></main>
<aside></aside>
I am currently developing my own website. The first div container integrates a image to html. The second div with the classname "face" should show up directly beneath the image. It contains a text with predefined width and height.
Now the problem: It does not show up on the right of the image div. How can I show it on the right side?
.face {
text-align: center;
background-image: linear-gradient(rgb(0, 21, 166), #115FD8);
border-radius: 5px;
width: 240px;
height: 80px;
margin-right: 0 !important;
}
.start {
margin-right: 10px;
}
.postpreview {
position: relative;
width: auto;
}
.one-half {
float: left;
width: 48.717948717948715%;
margin-left: 2.564102564102564%;
}
<div class="one-half start postpreview">
<a href="#">
<img src="http://vocaloid.de/wp-content/uploads/2015/02/KAITO-6th-anniversary-2015-Project-DIVA-Arcade-Diamond-Dust-750x256.jpg" class="attachment-Beitragsbild wp-post-image">
</a>
</div>
<div class="face">Facebook
</div>
This should help. http://jsfiddle.net/13m3vbu1/3/
Insert into your css:
.face {
text-align: center;
background-image: linear-gradient(rgb(0, 21, 166), #115FD8);
border-radius: 5px;
width: 240px;
height: 80px;
float: left;
margin-right: 0 !important;
}
.one-half {
float: left;
width: 48.717948717948715%;
margin-left: 2.564102564102564%;
margin-right: 10px;
}
.one-half > a {
display: block;
width: 100%;
overflow: hidden;
}
I removed the redundant CSS that isn't needed as well.
If you just want the div with a class face to show on the right side of div one-half use float: left and instead of using pixels in .face use percent it's more flexible
CSS
.one-half {
float:left;
width: 45%; //adjust in what % you want
display: inline;
}
.face {
float: left;
width: 45%; //adjust in what % you want
display: inline;
}
I try <iframe> for the content and use position: fixed; for a music player player bar to keep it at the bottom of the page.
Demo: http://jsfiddle.net/ThinkingStiff/vhLeE/
HTML:
<iframe src="http://thinkingstiff.com"></iframe>
<div id="player">music player</div>
CSS:
body {
margin: 0;
height: 100%;
}
iframe {
border: 0;
display: block;
height: 100%;
width: 100%;
}
#player {
background-color: black;
bottom: 0;
color: white;
left: 0;
position: fixed;
height: 30px;
width: 100%;
}
Sadly this doesn't work well for IE or Firefix 9, it simply shows the content in a small height window: http://cl.ly/0y0T2I1R042c3G002H3y
how can I fix this ?
I've seen a similar problem before with things I've worked on, and fortunately the workaround is really simple -- IE and Firefox just need the html height to be set to 100% as well. So update the first element of your style to be:
html, body {
margin: 0;
height: 100%;
}
That should do the trick.
You should also consider dividing iframe and div heights in percentages. If you specify 100% for iframe, div might hide the scrollbars.
you may change it to
iframe {
border: 0;
display: block;
height: 97%;
width: 100%;
}
#player {
background-color: black;
bottom: 0;
color: white;
left: 0;
position: fixed;
height: 3%;
width: 100%;
}
http://jsfiddle.net/vhLeE/3/