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.
Related
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.
I am working in a WordPress environment without access to the CSS :(.
I have 4 div boxes currently displaying side by side by using:
<style> .cells {
display: block;
float: left;
width: 33%;
}
.clearfix {
overflow: auto;
}
</style>
<section>
<div class="cells" style="width: 20.5%; height: 175px; margin: 0 20px 0 0; border: 1px solid grey; padding: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;">
<h3>this is box one</h3>
</div>
<div class="cells" style="width: 20.5%; height: 175px; margin: 0 20px 0 0; border: 1px solid grey; padding: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;">
<h3>this is box two</h3>
</div>
<div class="cells" style="width: 20.5%; height: 175px; margin: 0 20px 0 0; border: 1px solid grey; padding: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;">
<h3>this is box three</h3>
</div>
<div class="cells" style="width: 20.5%; height: 175px; margin: 0 20px 0 0; border: 1px solid grey; padding: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;">
<h3>this is box four</h3>
</div>
<div class="clearfix"></div>
</section>
the boxes display side by side just fine on the page but I need to get them to flow down the page on various mobile devices.
I am not sure how to do this, can someone please offer some advice?
Thanks
As another has said in a comment to your question, the question is a little vague and it is difficult to determine exactly what you are looking for. I think you mean that you want them to all have 100% width on mobile devices and stack one underneath the other as opposed to left to right. But, again, only on mobile devices.
Well, you would need to use a media query to set new behaviors for the divs only on mobile devices device's below a certain screen width (lets say 480 like a galaxy s4 or something and set aside the pixel ratio stuff)
#media screen and (max-width:480px){
.cells {
clear:both;
width:100%;
}
}
^ That should ensure each one takes up the full width and will not hang up on one another's edges but clear down to the next line.
I hope that gets you started with what you want to do.
I'm having a problem with making one div overlap the rest of the page.
I just need one image to overlap one section. I have kinda got it to work but once you resize the window or look at it on a different resolution the image doesn't appear where it should.
I'm using an position:absolute; and z-index. It is working to some extent. but it won't stay in that position, for example, if you resize your browser window (it moves from where I'd like it to stay).
Here is this website
I need it to overlap the yellow box like this.
Edit: Just a quick follow up: I think your solution has put me a bit of bother. I am unable to place another div directly under it as can be seen here
Move
<div id="medal"><img src="images/star2012medal.png" width="220" height="277"></div>
inside
<div id="box"><img src="images/boxheading.png"></div>
just before the image.
Change the CSS to
#medal {
position: relative;
top: -240px;
right: -80px;
z-index: 50;
}
and apply the following to the boxheading.png image
{
position: relative;
top: -280px;
}
EDIT:
From what I feel you are trying to achieve, you should be looking at a 2-column layout. There's too many good-practice resources online to learn how to do it.
To add another box below the first one, you will need to do the following changes to html:
<div id="box-container">
<div id="box">
<div id="medal">
<img src="images/star2012medal.png" width="220" height="277">
</div>
<img src="images/boxheading.png" width="291px" height="240px" style="position: relative; top: -280px; ">
</div>
<div id="box2">testing</div>
</div>
then add the following css:
#box-container {
float: right;
}
#box {
float: left;
color: #333;
background: #fff;
height: 240px;
width: 291px;
display: inline;
border-style: solid;
border-color: #fff100;
-moz-border-radius: 10px;
border-radius: 10px;
clear: both;
}
#box2 {
float: left;
color: #333;
background: #fff;
height: 240px;
width: 291px;
display: inline-block;
border-style: solid;
border-color: #fff100;
-moz-border-radius: 10px;
border-radius: 10px;
clear: both;
margin-top: 10px;
}
tested only in Chrome. Remember to test it in other browsers!
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;
}
I have a div tag and there is an asp.net TextBox control. I wanted to align the text box to left border. But the text box leaves a space of some 100px on the left. I tried padding:0px, margin:0px, float:left etc... but none solved the issue. It works fine on other browsers. And i already have conditional comments to support different browsers. Any idea why the space comes up on the left on IE 7?
Here is the code
<div class="keywords-div">
<asp:TextBox ID="keywordSearch" CssClass="txt-keywords" type="text" size="30px" />
</div>
.txt-keywords
{
width: 340px;
float: left;
background: transparent;
height: 28px;
border: 0px;
font-size: 18px;
line-height: 38px;
padding: 0px;
margin: 0px;
}
.keywords-div
{
width: 378px;
height: 38px;
text-align: left;
padding: 0px;
margin: 0px;
clear: both;
border:1px solid red;
}
use
_padding:0;
_margin:0;
*paddin:0;
*margin:0;