I have this block:
For example: I add the text: Last News in the world.
I would like to have the width of the block as wide as the text, but the corners should still remain as a curve.
CSS:
.cat-box-title h2 {
background: transparent url(.../images/testtitle.png) repeat-y;
padding-left: 5px;
color:#5E5E5E;
float:left;
margin-right:10px;
font-size: 22px;
font-family: BebasNeueRegular, arial, Georgia, serif;
}
HTML:
<div class="cat-box-title">
title
</div>
Your solution will be more easy if you use the border-radius instead of background image.
.round-btn
{
background:#4679bd;
color: #FFF;
border-radius:5px;
padding : 10px;
border:none;
}
of-course you need to check the browser compatibility whether your browser supports this property or not. If not then you need to use some hack.
JsFiddle Demo
and if you goes with background-image solution then you need to use two images; one for left side border-radius and another one for right side and use the background-color for rest of the button.
CSS:
.cat-box-title {
background-color: #4679bd;
color:#5E5E5E;
float:left;
border-radius:5px;
margin-right:10px;
font-size: 22px;
padding: 5px;
font-family: BebasNeueRegular,arial,Georgia, serif;
}
Related
I have some body and page settings that are keeping everything nicely centered in my site, which is my objective.
However, I also have some text in the center, which currently is sprawled along the entire width of the page when it's long. Every time I try to set a css width property, like max width, it decides to go haywire with it's positioning, and land itself far left of the center.
I guess there's some issue with my overall page center positioning, and setting any type of width property to a div.
EX of things nicely centered, but sprawling text: https://www.flickr.com/photos/77598212#N03/34191523510/in/dateposted-public/
and when I try to set any sort of width:
https://www.flickr.com/photos/77598212#N03/34191523450/in/dateposted-public/
I'd appreciate any and all thoughts. Thank you. -Wilson
the css:
*{
margin:0;
padding:0;
}
body{
text-align:center; /*For IE6 Shenanigans*/
}
button {
color: #900;
font-weight: bold;
font-size: 150%;
text-transform: uppercase;
}
h1{
margin-top:20px;
font-size: 250%;
overflow:hidden; /* older browsers */
font-family: hobeaux-rococeaux-sherman, sans-serif;
}
img {
max-width:500px;
max-height:340px;
box-shadow: 1px 5px 5px grey;
border-style: groove;
border-width: 1px;
margin-top:20px;
}
#ShowText{
overflow:hidden; /* older browsers */
word-wrap: break-word;
padding-top: 100px;
font-size: 18px;
font-family: vendetta, serif;
line-height: 25px;
}
If you have a fixed width on a block element then simply give it margin: 0 auto; to center it.
As you can see from this image of my site:
https://www.flickr.com/photos/77598212#N03/33735427334/in/dateposted-public/
My button is crammed right underneath the randomly generated text. Instead, I'd like to lower it.
But additionally, I'm trying to keep it completely "anchored" to the page, because right now when I click the button, a random image generates, but that image is moving the button vertically depending on the size of the image. Not good.
Instead, I'd like that button to remain in the same position, always.
Any thoughts/help would be appreciated. I'm still quite new to all this. Thank you. -Wilson
link to the actual website http://www.wilsonschlamme.com/test4.html
css:
*It's pretty simple. First two elements here are controlling centering the page. The rest are self explanatory, showtext refers to the random text generator.
*{
margin:0;
padding:0;
}
body{
text-align:center; /*For IE6 Shenanigans*/
}
button {
color: #900;
font-weight: bold;
font-size: 150%;
text-transform: uppercase;
}
h1{
margin-top:20px;
font-size: 250%;
overflow:hidden; /* older browsers */
font-family: hobeaux-rococeaux-sherman, sans-serif;
}
img {
max-width:600px;
max-height:440px;
box-shadow: 1px 5px 5px grey;
border-style: groove;
border-width: 1px;
margin-top:20px;
}
#ShowText{
overflow:hidden; /* older browsers */
word-wrap: break-word;
padding-top: 100px;
max-width: 1000px;
font-size: 25px;
font-family: vendetta, serif;
line-height: 25px;
margin: 0 auto;
}
Use:
#buttonfun {
margin-top: 20px;
}
Wrap the img with a div:
<div class="image-wrapper">
<img src="images/297.jpg" />
</div>
and add the CSS:
.image-wrapper {
height: 440px;
}
I have a h2 tag but the text isn't aligned with the left of the element as you can see on the picture.
Is it possible to remove this blank space or stick the text to the left?
Here are the CSS attributes:
h2 {
font-size: 5.2em;
font-family: UniSans;
word-spacing: 1px;
}
:** Here is a fiddle with my problem. And if there is a solution for the top blank space it would be great.
This is standard behaviour for sans-serif fonts I believe. The glyph has extra 'room' around it for ascender/decenders/serifs AFAIK.
Codepen.io example
HTML
<h1>Decent Test</h1>
<h1 class="serif" >Decent Test</h1>
CSS
* {
margin: 0;
padding: 0;
}
h1 {
font-size: 100px;
font-family:sans-serif;
word-spacing: 1px;
padding:0;
margin:0;
background: pink;
margin: 50px;
}
h1.serif {
font-family: serif;
}
You need to add margin:0 to your body and to your h2
Example : http://jsfiddle.net/LB2N5/3/
Update your CSS like below. Hopefully it will fix the issue.
body, html{margin:0; padding:0}
h2 {
font-size: 5.2em;
font-family: UniSans;
word-spacing: 1px;
margin:0px;
padding:0px;
}
DEMO
Just try to make the margin negative on your element like with -2px, you can adjust it to your Situation.
I have an issue with my page centering. Everything centers correctly except the left and right border.I believe the issue is with the border-right-width:300px; border-left-width:300px; lines but I am not sure of another way to set that up. Is there another solutuion to having a left and right border that also centers with the page. Any ideas?
Here is my CSS:
body {
margin:auto;
padding: 0;
background: #FFFFFF;
font: 12px/1.4 Verdana, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
border-right-style:solid;
border-left-style:solid;
border-right-width:300px;
border-left-width:300px;
border-color:#E8E8E8;
}
When you use margin:auto you must also specify a width. I think you are trying to center the contents of the body with a background #E8E8E8. Do this instead
body {
margin:auto;
padding: 0;
font: 12px/1.4 Verdana, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
width: 1020px; //or anything else you want
background:#E8E8E8;
}
You cant center anything that has no width, or is the parent-div with 100% because it cant relate to anything.
If you are going to use your body you need something like this:
body{
width:980px;
height:100%:
}
what most people do is using a container or wrapper. That gives you bit more control.
.container{
width:980px;
height:100%;
position:relative;
}
as you can see I gave the container as classs and a position:relative. This allows you to use it multiple times on the same page.
You need to center div itself, something like this:
div.page {
margin: 0 auto;
}
This is my code:
<h3 align="center">Is the mobile number above correct ?</h3>
<div class="yesno"><div id="yes">YES</div>
<div id="no">NO</div></div>
This is my CSS:
/* yes and no buttons */
#yes
{
float:left;
display:inline;
width:180px;
background: #999999;
font-size: 26px;
font-weight: bold;
text-align: center;
color: #FFF;
padding-top: 10px;padding-bottom: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
margin-bottom: 0.4em;
margin-top: 0.4em;
}
#yes a:visited,
#yes a:link{
color: #fff;
}
#yes:hover {
background-color: #9fd106;
cursor:pointer;
}
#no
{
float:right;
display:inline;
width:180px;
background: #999999;
font-size: 26px;
font-weight: bold;
text-align: center;
color: #FFF;
padding-top: 10px;padding-bottom: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
margin-bottom: 0.4em;
margin-top: 0.4em;
}
#no a:visited,
#no a:link{
color: #fff;
}
#no:hover {
background-color: #f20909;
cursor:pointer;
}
.yesno
{
width:400px;
margin-left:100px;
}
This is the issue:
I also have div switch to hide/show div. This is:
<!--show hide div logic-->
<style>
div#a { }
div#b { display:none; }
</style>
<script type="text/javascript">
$("a.nope").click(function(){
$("#a").hide();
$("#b").show();
return false;
});
</script>
<!--//end show hide div logic-->
You can't wrap an inline element (a) around a block element (div). Use SPAN instead of DIV as span is an inline element.
Use something like this:
<h3 align="center">Is the mobile number above correct ?</h3>
<div class="yesno">
<span id="yes">YES</span>
<span id="no">NO</span>
</div>
Both #yes and #no have widths of 180px so the buttons consume 360px on their own. The containing <div class="yesno"> is 400px wide so you have 40px left over. You also have three non-breaking spaces. Everything renders fine if you take the non-breaking spaces out so I'm guessing that IE is allocating more than 40px for the non-breaking spaces.
You can either make .yesno wider to accommodate how all the various browsers will render the non-breaking spaces or you can ditch the kludge and let the explicit widths on #yes, #no, and .yesno take care of keeping the buttons separated.
And yes, you should use <span> here instead of <div> as GlennG noted but that's not causing the problem here.
Or just put the buttons in a container div:
#colcontainer {
float:left;
width:100%;
}
Take that div and wrap it around your buttons.
That should do it.
Glenn is correct you cannot have a BLOCK element like a DIV inside a INLINE element such as an A tag.
Mu is to short is also correct.
Addtioanlly you should not be including
nbsp; you should be using CSS to format.
You can also remove alot of unnessasary HTML tags and CSS
For example http://jsbin.com/agojo4/5/edit
This could be refined even more but this is just a 2 minute job.