I've been using the new CSS border-radius function for a while now, but I'm stumped today! I have a background image (120px x 60px) and have set a border radius of 5px, but it's only rounding the top two corners?!
The CSS code I'm using is here:
#buttonRow {
position:relative;
width:980px;
height:60px;
margin-left:51px;
margin-bottom:25px;
float:left;
}
#button {
position:relative;
float:left;
width:120px;
height:60px;
margin-left:25px;
padding-top:10px;
border-radius:5px;
background-image:url('../assets/buttons/generic_button.png');
background-repeat:no-repeat;
}
#singleLineButton {
position:relative;
float:left;
width:120px;
height:60px;
margin-left:25px;
padding-top:20px;
border-radius:5px;
background-image:url('../assets/buttons/generic_button.png');
background-repeat:no-repeat;
}
#buttonText {
width:120px;
height:auto;
color:#FFFFFF;
text-align:center;
font-size:16px;
font-family: Adobe Kaiti Std R;
}
And the output is this:
Why is it only showing the top corners as rounded?!
Any help would be greatly appreciated!
Thanks, Zulu
EDIT
Here is the HTML for those asking:
<div id="buttonRow">
<a href="http://www.zuluirminger.com/SchoolAdmin/individual_table_management.php">
<div id="button"><div id="buttonText">Individual Table Management</div></div>
</a>
<a href="http://www.zuluirminger.com/SchoolAdmin/attendance_index.php">
<div id="singleLineButton"><div id="buttonText">Attendance</div></div>
</a>
<a href="http://www.zuluirminger.com/SchoolAdmin/school_members.php">
<div id="singleLineButton"><div id="buttonText">School Members</div></div>
</a>
<a href="http://www.zuluirminger.com/SchoolAdmin/search_choice.php">
<div id="singleLineButton"><div id="buttonText">Search</div></div>
</a>
<a href="http://www.zuluirminger.com/SchoolAdmin/school_details.php">
<div id="singleLineButton"><div id="buttonText">School Details</div></div>
</a>
<a href="http://www.zuluirminger.com/SchoolAdmin/user_management.php">
<div id="singleLineButton"><div id="buttonText">Users</div></div>
</a>
</div>
It might be that your image isn't long enough and thus you don't see the rounded corners on the bottom. I ran into that today, actually.
I simply set a background color and it showed me what the issue was. So, just modify your CSS to:
background-image: #00ff00 url('../assets/buttons/generic_button.png');
or:
background-color: #00ff00; /* bright green for contrast */
background-image: url('../assets/buttons/generic_button.png');
That will at least tell you if your image covers the whole area or not and you will know what to do from there.
In CSS3 it's done like this:
border-top-right-radius: 8px;
border-top-left-radius: 8px
Most likely the bottoms are getting cut off from overflow. Make sure the containing element is tall enough to accomodate the heights of these or set the all the ancestor's overflow to overflow: visible.
Also, use jsfiddle.net to post live examples instead of just the CSS in a vacuum. CSS requires context.
As previously answered, your image isn't large enough. Your div is 120x60px to match your image, but you have a padding-top of 10px, which extends the size of the div to 120x70px total--too large to show the rounding. Either change the size of your background image or resize the div to 50px tall--with padding, it'll end up at the proper size.
You can use this code
#buttonRow {
width: 1170px;
margin: 0 auto;
display: block;
}
#button {
position:relative;
float:left;
width:120px;
height:60px;
margin-left:25px;
padding-top:10px;
border-radius: 5px;
background-image:url('../assets/buttons/generic_button.png');
background-repeat:no-repeat;
background: red;
}
#singleLineButton {
position:relative;
float:left;
width:120px;
height:60px;
margin-left:25px;
padding-top:20px;
border-radius: 5px;
background-image:url('../assets/buttons/generic_button.png');
background-repeat:no-repeat;
background: red;
}
#buttonText {
width:120px;
height:auto;
color:#FFFFFF;
text-align:center;
font-size:16px;
font-family: Adobe Kaiti Std R;
}
<div id="buttonRow">
<a href="http://www.zuluirminger.com/SchoolAdmin/individual_table_management.php">
<div id="button"><div id="buttonText">Individual Table Management</div></div>
</a>
<a href="http://www.zuluirminger.com/SchoolAdmin/attendance_index.php">
<div id="singleLineButton"><div id="buttonText">Attendance</div></div>
</a>
<a href="http://www.zuluirminger.com/SchoolAdmin/school_members.php">
<div id="singleLineButton"><div id="buttonText">School Members</div></div>
</a>
<a href="http://www.zuluirminger.com/SchoolAdmin/search_choice.php">
<div id="singleLineButton"><div id="buttonText">Search</div></div>
</a>
<a href="http://www.zuluirminger.com/SchoolAdmin/school_details.php">
<div id="singleLineButton"><div id="buttonText">School Details</div></div>
</a>
<a href="http://www.zuluirminger.com/SchoolAdmin/user_management.php">
<div id="singleLineButton"><div id="buttonText">Users</div></div>
</a>
</div>
Try using margin-top instead of padding top, I've had this issue recently and that seemed to fix it.
Related
I am trying to put three h4 elements on the same line, I tried using display:inline-block; on all of them, but that only put two of the elements on the same line, the third one is under them.
Here is my HTML
<h4 id="vbottomcreator"><a style="color:orange;">></a> Created by <a style="color:orange;"><</a></h4>
<h4 id="vbottomdates" align="center"><a style="color:orange;">></a> tasdf <a style="color:orange;"><</a></h4>
<h4 id="vbottomdevelopment"><a style="color:orange;">></a> Website still in Development <a style="color:orange;"><</a></h4>
The third element is under the rest
CSS
#vbottomdates
{
color:black;
display:inline-block;
margin-left:362px;
}
#vbottomcreator
{
color:black;
margin-left:30px;
display:inline-block;
}
#vbottomdevelopment
{
color:black;
margin-left:1100px;
display:inline-block;
clear:none;
}
QUESTION SOLVED
Try like this: Updated Demo
HTML:
<div class="center">
<h4>...</h4>
<h4>...</h4>
<h4>...</h4>
</div>
CSS:
#vbottomdates {
color:black;
display:block;
float:left;
}
#vbottomcreator {
color:black;
display:inline-block;
}
#vbottomdevelopment {
color:black;
display:block;
float:right;
display:inline-block;
}
.center {
width:100%;
margin:0 auto;
display:inline-block;
text-align:center;
}
Margin value is more for the last id.. Try to reduce the value like this.. all the 3 elements were placed properly
I am wondering why are you using margin-left to place all elements horizontally. You will seriously have to change it in future, as it will enable horizontal scroll if window size is reduced. In other words, your page will never be responsive.
remove all margin-left property and give some width in percentage such that total width of all blocks remains less than 100% width of window.
This will ensure that even if user reduces window size, your elements will be in correct position.
Check DEMO here
HTML
<h4 id="vbottomcreator" class="vbottom"><a style="color:orange;">></a> Created by <a style="color:orange;"><</a></h4>
<h4 id="vbottomdates" align="center" class="vbottom"><a style="color:orange;">></a> tasdf <a style="color:orange;"><</a></h4>
<h4 id="vbottomdevelopment" class="vbottom"><a style="color:orange;">></a> Website still in Development <a style="color:orange;"><</a></h4>
CSS
#vbottomdates
{
color:black;
display:inline-block;
}
#vbottomcreator
{
color:black;
display:inline-block;
}
#vbottomdevelopment
{
color:black;
display:inline-block;
clear:none;
}
.vbottom {
width : 30%;
}
Reduce the margin left value:
#vbottomdevelopment
{
color:black;
margin-left:500px;
display:inline-block;
clear:none;
}
I am trying to add text and a button on top of a background image I cannot figure out the CSS for the margins and positions on liquid page.If you can steer me in the right direction or help. Thank you!
.feature_home{
margin:?
position:?
}
.feature_image{
margin:?
position:?
}
.feature_text{
margin:?
position:?
}
.feature_button{
margin:?
position:?
}
<div class="feature_home">
<img class="feature_image" alt="Thanks For your guys help" src="images/xyz.com">
<p class="feature_text">I really appreciate your guys help!</p>
<a class="feature_button" href="/xyz-101/">Thank You</a>
</div>
</div>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
x background Image x
x Text Here: X
x Text Here: x
x x
x Button Here: x
x x
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
It wont let me ad an image until I get 10 reputations to post image.
Is this what you are looking for?
.feature_home{
position: relative;
display: table-cell;
vertical-align: bottom;
text-align: right;
width: 350px; /* image width */
height: 150px; /* image height */
}
.feature_image{
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
<div class="feature_home">
<img class="feature_image" alt="Thanks For your guys help" src="http://placehold.it/350x150">
<p class="feature_text">I really appreciate your guys help!</p>
<a class="feature_button" href="/xyz-101/">Thank You</a>
</div>
http://jsfiddle.net/7zvL5zto/2/
You can just get rid of <img> and use background-image style on .feature_home and give it a position:relative; so you can position feature_home and feature_button like you want it.
Here you have HTML code:
<div class="feature_home" style="background-image:url(image);">
<p class="feature_text">I really appreciate your guys help!</p>
<a class="feature_button" href="/xyz-101/">Thank You</a>
</div>
And here is CSS:
.feature_home{
width:300px;
height:200px;
position:relative;
display:block;
background-position:center center;
background-size:100%;
}
.feature_text{
position:absolute;
right:2px;
bottom:15px;
}
.feature_button{
right:2px;
bottom:2px;
position:absolute;
}
All the values are for example :)
http://jsfiddle.net/cjtdhcLr/
Here is something that will work, and instead of the red background choose your image
.feature_home {
width:400px;
background:red;
float:left;
padding:15px
}
p {
text-align:right;
}
a {
float:left;
text-align:right;
width:100%;
}
<div class="feature_home">
<p class="feature_text">I really appreciate your guys help!</p>
<a class="feature_button" href="/xyz-101/">Thank You</a>
</div>
<style>
.feature_home{
background-image:url("http://2.bp.blogspot.com/-biBlhcDYdZI/ULjLQeeCwzI/AAAAAAAAAmo/T9M9YTcMeWY/s400/BackgroundPanel.pngg");
background-repeat:no-repeat;
padding-left:25px;
padding-right:25px;
height:200px;
width:321px;
position:absolute;
}
.feature_button{
color:white;
position:absolute;
right:30px;
}
</style>
<div class="feature_home">
<p class="feature_text">I really appreciate your guys help!</p>
<a class="feature_button" href="/xyz-101/">Thank You</a>
</div>
</div>
Use position:absolute; http://www.w3schools.com/css/css_positioning.asp
Absolute Positioning
An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is :
This should be enough to get you started. I would not use an actual img. You would be better assigning the image as the background of your feature_home div. See the css background-image.
if you have to use the img then you will need to use z-index to position the elements in layers with the image set below all of the other items.
Here is the html code
<div>
<div class="fractop"><span>11</span></div>
<div class="fracbottom">2</div>
</div>
<div>
<div class="fractop"><span>5</span></div>
<div class="fracbottom">2</div>
</div>
Here is the css code
<style>
.fractop{
border-bottom:solid black 0px;
display:inline-block;
float:left;
margin-top:20px;
text-align:center;
width:100%;
}
.fracbottom{
display:inline-block;
clear:left;
float:left;
width:100%;
text-align:center;
}
.fractop span{
border-bottom:solid black 3px;
}
</style>
I need to make the "divide by" line for fractions stay fixed for 2 digits. It need not become longer or shorter dynamically.
change your .fractop span to this
.fractop span{
border-bottom:solid black 3px;
width: 17px;
display: inline-block;
}
while your approach isn't the best and you're over complicating things, to give you an answer within that approach, change your CSS to this:
.fractop{border-bottom:solid black 0px; display:block; margin-top:20px; text-align:center; width:15px; margin:0; padding:0 3px;border-bottom:solid black 3px;}
.fracbottom{ display:block; margin-top:20px; text-align:center; width:15px; margin:0; padding:0 3px;}
see fiddle here and change it at will
Here,
I have a working demo in this fiddle - put an HR between your two numbers, then style it as a line - does as you prescribe. I also added some inline styling to the parent div to help. You can easily move that to it's own css class though.
http://jsfiddle.net/rrp46faj/2/
<div style="width:20px !important;"><div class="fractop"><span>11</span></div>
<hr>
<div class="fracbottom">2</div>
</div>
<div style="width:20px;"><div class="fractop"><span>5</span></div>
<hr>
<div class="fracbottom">2</div>
</div>
You can use this ⁄
Example : <div class="fractop">4.0000 ⁄ 5.3456</div>
You can find more details here http://webdesign.about.com/od/localization/l/blhtmlcodes-math.htm
You can also see MathJax
I have 2 questions (more like 1.5)
1) What would be the correct way to modify the menu in the first picture to look like the one in the second. Since I put both the picture and the text in the same <a> tag I'm having problems with the white border (the icons are 30x30px, no transparent space around them or anything) :
HTML:
<div id="header">
<div class= "main">
<div class="logoHeader">
<img src="logo.png">
</div>
<div class="menuPicHeader">
<img src="stovyklae.png"><h2>stovykla</h2>
<img src="klubase.png"><h2>klubas</h2>
<img src="elparde.png"><h2>el. parduotuvė</h2>
<img src="kontaktaie.png"><h2>kontaktai</h2>
</div>
<div class="socialIconsWrapHeader">
<img src="yttop.png">
<img src="ftop.png">
</div>
</div>
</div>
CSS:
h2{
display:inline-block;
text-transform: uppercase;
text-decoration: none;
color: black;
margin-left:10px;
margin-right:10px;
font-size:14px;
}
.logoHeader{
margin-left:15px;
float:left;
margin-bottom: 20px;
margin-top:15px;
}
.socialIconsWrapHeader{
float:right;
margin-top:15px;
margin-right:20px;
}
.socialIconsWrapHeader a{
margin:0px 10px 0px 10px;
}
.menuPicHeader{
float:left;
margin:20px 0px 0px 130px;
padding-left:10px;
}
.menuPicHeader a{
padding-top:20px;
padding-bottom:2px;
}
2) I was wondering what should I use to get the text onto the picture as seen here:
Should I cut the picture in a half, get some div and stick it to the bottom of the picture using the grey half as background? Or somehow just write on top of the <a>?
HTML:
<div class="rightCol1">
<img src="pic1.png">
<img src="pic2.png">
</div>
CSS:
.rightCol1{
float:right;
margin-right:30px;
margin-top:10px;
}
1: add .menuPicHeader a{ margin-right: 20px; }
http://jsfiddle.net/Lphup/
2: There are a lot of ways to do that, but here's one option:
http://jsfiddle.net/33vth/
for second
<div class="rightCol1">
<img src="pic1.png"><span>your text</span>
<img src="pic2.png"><span>your text</span>
</div>
CSS:
.rightCol1{
float:right;
margin-right:30px;
margin-top:10px;
}
.rightCol1 a {display:inline-block;position:relative;height:200px;width:100px;}
.rightCol1 a span {display:block;width:100px;height:70px;position:absolute;bottom:0;left:0;z-index:99;background:#333}
You can have more positioning control over the elements if you set their parent's positioning to 'relative' and then set their positioning to absolute. This lets you use top, left or right to set an absolute position for the child objects, in relation to their parent.
I didn't have a chance to try this, but something like this should do the trick:
.menuPicHeader { position: relative; }
.menuPicHeader a { position: absolute; top: 0; }
I just wanted to create a newsbox just by using CSS without so many IMG or TABLE crap. It works quite well but there will always appear a space between my image and the colored bar under the picture which should be directly under the picture not with some space between. Here is my code :
<div id="mainbody">
<div class="news_box">
<div class="news_box_inside">
<img src="img/newsbox1.jpg" width="270" height="140" border="0" />
<div class="news_box_bar"></div>
</div>
</div>
</div>
#mainbody {
margin: 0 auto;
width: 900px;
padding-top:30px;
padding-bottom:30px;
}
.news_box {
float:left;
width:288px;
height:348px;
background-color:#DDDDDD;
margin-right:5px;
margin-left:5px;
border:1px;
border-style:solid;
border-color:#BBBBBB;
}
.news_box_inside {
float:left;
margin:9px;
width:270px;
height:330px;
background-color:#FCFCFC;
}
.news_box_bar {
background-color:#540000;
height:43px;
border:1px solid #892d2d;
}
I tried to set the margin and padding to zero for the image or trying position: or top: but somehow I can't get rid of the space. Anyone got a good solution ?
Best regards,
Kris
Add this to your CSS:
.news_box_inside > img {
display: block;
}
Example: http://jsfiddle.net/grc4/TV4zT/
Kris,
If you inspect <img> element by default it's css property display is set to inline-block, SO I suggest to apply style on <img> element and make it display:block
<img src="img/newsbox1.jpg" width="270" height="140" border="0" style="display:block" />
DEMO
Just add a margin to your newsbar as showm: DEMO
.news_box_bar {
background-color:#540000;
height:43px;
border:1px solid #892d2d;
margin-top:-5px;
}
.news_box_bar {
background-color:#540000;
margin-top:-5px;
height:43px;
border:1px solid #892d2d;
}
set this in your CSS class
use link below to see working solution for your problem
http://jsfiddle.net/v7NwR/
<div id="mainbody">
<div class="news_box">
<div class="news_box_inside">
<figure><img src="http://static.adzerk.net/Advertisers/a04d6b3e25c747f48ef794d13e765425.jpg" border="0" /></figure>
<div class="news_box_bar">sdfgsdfgsdfg</div>
</div>
</div>
</div>
css
.news_box{ float:left; border:5px #444 solid;}
figure{ font-size:0%;}
#mainbody{ color:#000;}
.news_box_bar{ background:red;}