Working on a grid-layout and I've run into a roadblock with css scrollbars differing between windows/mac.
Notice the scrollbar is to the right and away from the actual row. Now on windows, I see
Why is it that windows pushes the divs in the row to the next line? What is the best way to fix this?
General format in html is:
<div class="diamond-stat-body">
<div class="diamond-row">
<div class="diamond-block diamond-stat-block">
</div>
<div class="diamond-block diamond-stat-block">
</div>
...
</div>
....
</div>
and the corresponding css ...
.diamond-stat-block{
width: 125px;
height: 2.5em;
padding: .5em;
}
.diamond-block{
border: .1em solid white;
border-radius: 2px;
background-color: #ddd;
padding: 1em;
display: inline-block;
float: left;
}
.diamond-row{
height: 2.5em;
}
.diamond-body{
width: 480px;
height: 30%;
overflow-y: scroll;
margin: 0em auto;
}
Why don't you use an actual <table>?
If you don't want to do that, then what about using display: table; and display: table-cell;?
I haven't tested it, so I don't know whether that will fix your problem.
Related
I have a container and displaying message .when I am changing window size the text is overlapping each other.
Here is my code.
<div id="msgRowInfo">
<div style="hieight:100%;width:100%">
<div id="msgInfo">
<div id="msgType" >{{msg.msgType}}</div>
<div id="msgTime" >{{msg.time}}</div>
</div>
<div id="msgContent" >{{msg.subject}}</div>
<div id="msgDescription" >{{msg.description}}</div>
</div>
</div>
Here is my css.
#msgRowInfo{
padding-top: 5px;
padding-left: 5px;
height: 100%;
width: 100%;
border-bottom: lightgrey;
border-bottom-style: solid;
border-bottom-width: thin;
display: -ms-inline-flexbox
}
#msgInfo{
width:100%;
padding-left:1%;
}
#msgType{
display: inline-flex;
font-size: 20px;
width: 70%;
}
#msgTime{
width:27%;
display: inline-block;
float: right;
text-align: right;
padding-right: 3%;
}
#msgContent{
padding-left: 1%;
width:100%;
font-size: 20px;
}
when I was resizing msg.msgType and msg.time is overlapping. How to not overlap each other and window size reducing it should come to next line.could somebody help me on this.
#msgRowInfo {
padding: 5px;
border-bottom: lightgrey 1px solid;
font-size: 20px;
}
#msgInfo {
display: flex;
flex-wrap: wrap;
background-color: red;
}
#msgType {
background-color: pink;
/* flex basis sets a minium width of the message type so message time wraps */
flex: 1 1 75%;
}
#msgTime {
background-color: tan;
}
<div id="msgRowInfo">
<div id="msgInfo">
<div id="msgType">{{msg.msgType}}</div>
<div id="msgTime">{{msg.time}}</div>
</div>
<div id="msgContent">{{msg.subject}}</div>
<div id="msgDescription">{{msg.description}}</div>
</div>
I was not really sure here exactly what you are looking for so I made a best guess. I have removed a lot of the css and some html. Sometimes reducing the complexity will help you solve the issue. I have also added some background color so you can see what is going on. Please let me know if you have questions. The application of display flex to the message info area will stop overlap of the Type and Time. Hope this helps.
Of course this is just one way to solve the issue there are many others.
I try to use stack as a last resort to figuring out my coding problems but I can't find what is wrong with this stupid website. I am building the mobile site for a company right now and I am doing it through 2 separate style sheets so that when a user is on a device smaller than a specified resolution, it uses a different style sheet. I've done all of this no problem.
My problem is that some of the css styling in my external doc is not being applied to the respective elements in the HTML doc. More specifically, none of the ".fb a", ".tw a", and ".in a" are not being applied at all. When I apply them inline in the html document it works but I need it to be in the external style sheet. And I cannot figure out why this is happening. Since the background-image is not being applied, nothing shows up. What is weirder is that other elements of the footer display properly and when I change the styling, it is reflected on the site. Please help!!!
My HTML:
<!-- FOOTER -->
<div class="footwrap">
<div class="footer">
<!-- CONTACT -->
<div class="text">
<!-- LEGALITY -->
<div class="comm">Oblique Drive technology is patents pending. Copyright © 2014. All Rights Reserved. Oblique Drive is a trademark of Callplex, Inc.</div>
</div>
<!-- SOCIAL NETWORKING -->
<div class="sn">
<a href="http://www.facebook.com/obliquedrive">
<div class="fb">
</div>
</a>
<a href="http://www.twitter.com/obliquedrive">
<div class="tw">
</div>
</a>
<a href="http://www.linkedin.com">
<div class="in">
</div>
</a>
</div>
</div>
</div>
And my CSS:
/*Footer*/
.footwrap {
width: 100%;
height: 175px;
background-color: #444;
}
.footer {
width: 90%;
margin: auto;
height: 175px;
background-color: #444;
position: relative;
bottom: 0px;
}
.comm {
width: 420px;
margin: auto;
height: 175px;
font-size: 24px;
margin-top: 20px;
text-align: left;
float: left;
}
.sn {
width: 400px;
float: right;
margin-top: 30px;
margin-right: 50px;
display: block;
}
.fb {
width: 75px;
height: 75px;
display: inline-block;
}
.fb a {
display: block;
width: 100px;
height: 100px;
background-image: url(images/sniconsm.jpg) !important;
background-position: 0px 0px !important;
}
.tw {
width: 75px;
height: 75px;
display: inline-block;
padding-left: 30px;
}
.tw a {
display: block;
width: 75px;
height: 75px;
background-image: url(images/sniconsm.jpg);
background-position: 150px 0px;
}
.in {
width: 75px;
height: 75px;
display: inline-block;
padding-left: 30px;
}
.in a {
display: block;
width: 75px;
height: 75px;
background-image: url(images/sniconsm.jpg);
background-position: 75px 0px;
}
.footer .text {
position: relative;
display: inline-block;
margin-left: 50px;
margin-top: 15px;
float: left;
line-height: 170%;
color: #ffffff;
}
Also, here is the page live, with all of the code if it helps:
http://thewolv.es/Oblique%20Drive/mobile
Please just ignore any other problems you see lol
Look a little more closely at your styles. You have .fb a, but the HTML markup is the other way around:
<a href="http://www.facebook.com/obliquedrive">
<div class="fb"></div>
</a>
If you were trying to target the div, you should use a .fb. But really, you might not need those divs at all. Just change your A tag to something like:
Then use the CSS selector that is a.fb (no space between them).
Your A elements are not children of the divs, it's the other way around.. yet your CSS defines the A elements as children.
This one is for those CSS gurus out there...
I'm trying to align the elements of this progress meter properly and efficiently. Take a look at it here:
http://jsfiddle.net/arturo_sanz/UFPnZ/embedded/result/
It looks fine, however, I'm stuck with the alignment those labels, and my CCS is becoming too complex and not efficient. I'm especially worried about top: 4px; in line 47 which is an absolute reference while it should be a relative one. I'm not happy either with the #min CSS code in lines 21-26 but I couldn't find a better way to keep the bar away from the left label.
Here is the jsfiddle for you to check:
http://jsfiddle.net/arturo_sanz/UFPnZ/
I would appreciate any improvements to that CSS code ;)
Here is the working code: http://jsfiddle.net/3A9kM/2/
Updated CSS:
.progress-label {
color: #CC0000;
display: block;
text-align: center;
float: left;
margin: 4px auto auto;
width: 100%;
}
/*Removed position: absolute;top:4px;*/
/*Added: float: left;margin: 4px auto auto*/
Cheers!!! :)
A nice fix for line 47 is:
margin: 4px auto;
See my JSFiddle.
Much shorter, much prettier, much cleaner.
DEMO
HTML:
<div id="progbar" class="frame">
<span id="min" class="min-max-label ui-widget">200</span>
<span id="progressbar">
<span class="progress-label">Loading...</span>
</span>
<span id="max" class="min-max-label ui-widget">300</span>
</div>
CSS:
#progBar {
text-align: center;
margin:0 auto;
}
#progBar span{
vertical-align: middle;
text-align: center;
display: inline-block;
color: #CC0000;
}
#progressbar {
position:relative;
width: 60%;
height: 36px;
margin: 0 15px;
border-color: #CC0000;
}
.ui-progressbar-value {
position: absolute;
top: 0;
background: #CCCCCC url(http://download.jqueryui.com/themeroller/images/ui-bg_highlight-hard_100_cccccc_1x100.png) 50%;
}
.progress-label{
position: relative;
z-index: 1;
top:4px;
}
Hi I'm just wondering if anyone can help me out. I'm new enough to web design, and I'm having some problems with my CSS.
Basically I cant figure out how to correctly nest my divs/boxes without having overflow issues! I have tried using overflow: hidden; but this still hasn't worked, I've also tried floating the child elements either left or right to see if it would help but still no luck!
My css looks like this:
#customerReg {
width: 47%;
height: 480px;
float: left;
background: #FFF;
padding: 10px 10px 10px 10px;
display: inline;
margin-top: 10px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
overflow: hidden;
}
#customerInfo {
width: 95%;
height: 120px;
background: #414141;
padding: 10px;
margin-bottom: 10px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
overflow: hidden;
}
#participantReg {
width: 47%;
height: 480px;
float: right;
background: #FFF;
padding: 10px;
margin-top: 10px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
overflow: hidden;
}
#participantInfo {
width: 95%;
height: 120px;
background: #414141;
padding: 10px;
margin-bottom: 10px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
overflow: hidden;
}
My HTML Is as follows:
<div class="contentbody" style="border:#FF0066 solid 2px;">
<div id="customerReg" style="border:#33CC00 solid 2px">
<div id="customerInfo">
<p>Customer Registration
</p>
</div>
<!-- End of customerReg --></div>
<div id="participantReg" style="border:#33CC00 solid 2px">
<div id="participantInfo">
<p>Participant Sign Up</p>
<p> </p>
</div>
<!-- End of participantReg --></div>
<!-- end .contentbody --></div>
What im aiming for is so have two rounded boxes side by side with two smaller boxes inside these boxes. I tried to post an image but it wouldnt let me! What im getting is that the two inner boxes are both spilling out on the right side of the outer boxes if that makes sense??
Can anyone tell me where im going wrong and what i can do to correct this as ive spent hours trying to find an answer and cant figure it out!
The parent div set:
overflow: hidden;
OR
#customerReg, #participantReg{
float:left;
}
.contentbody:after{
content: '.';
clear:both;
visibility: hidden;
*zoom:1;
height:0;
display:block;
}
if you set the width of the first div the boxes ar side by side:
look this fiddle
.contentbody{
width:990px;
border:#FF0066 solid 2px;
}
Not as savvy on this as I'd like to be, so forgive me if my question is not phrased correctly.
Need to apply four rounded corners to a 119 x 119 App Store icon png auto pulled via a custom WordPress plugin using the variable $linkImg.
$strHtml = "
<div style='border: solid 1px #00b7f3; background-color: #f8f8f8; width: 656px; height: 186px; padding: 0px; float: left; margin-top: 4px;'>
<div style='float: left; width: 175px; margin: 0px; text-align: center; padding-left: 10px; padding-top: 15px;'>
<img src='$linkImg' width='119' height='119' style='margin: 0px; padding: 15px;'/>
</div>
</div>
";
Any ideas? (Btw, first post)
Edit 2 - This seems to do nothing, am I missing something obvious?
$strHtml = "
<div style='border: solid 1px #00b7f3; background-color: #f8f8f8; width: 656px; height: 186px; padding: 0px; float: left; margin-top: 4px; border-top-left-radius: 50px 50px;'>
<div style='float: left; width: 175px; margin: 0px; text-align: center; padding-left: 10px; padding-top: 15px;'>
<img src='$linkImg' width='119' height='119' style='margin: 0px; padding: 15px;'/>
</div>
</div>
";
This is an issue of css not php.
Use inline css if you cannot link an external css file.
Try http://www.css3.info/preview/rounded-border for Css3 rounded corners.
And http://www.devwebpro.com/25-rounded-corners-techniques-with-css/ for other hacks.
*******edit****
I am using operamini so I can't read your code. Also I can't post comments due to a wierd js issue.
The problem with css3 is it is not supported by all browsers and each browser currently does not use the standard. You need to find the -moz- specific and -webkit- specific versions. It isn't guaranteed to work unless the browser uses an engine which supports it.