I am trying to create a div which looks like a button with the help of the bootstrap framework. But when I increase the font size of the content inside the div, the width and height of the button changes. I just want to increase the font. But the button size should be same.
Here is the code
.bigfatbutton{
margin-top: 1em;
margin-bottom: 2em;
width: 80%;
margin-left: 2em;
background: #6130a3;
height: 4em;
text-align: center;
padding-top: 1em;
color: white;
font-size: 15px;
}
<div class="bigfatbutton">
Review & Pay
</div>
Note: I just want to know onething. Some helpful persons are mentioning me to use px for padding and margin instead of em I have used in my code snippet. Is that okay? How will it effect the responsiveness is my concern. Please help me in this regard.
The problem is that you are defining your margins and paddings relative to your fontsize. (you defined them in em, which is equal to the font-size.) This can easily be overcome by changing the em sizes to pt (or px). You'd then get something like this:
.bigfatbutton{
margin-top: 15pt;
margin-bottom: 30pt;
width: 80%;
margin-left: 30pt;
background: #6130a3;
height: 60pt;
text-align: center;
padding-top: 15pt;
color: white;
font-size: 15px;
}
<div class="bigfatbutton">
Review & Pay
</div>
Try this.
.bigfatbutton{
width: 80%;
background: #6130a3;
text-align: center;
color: white;
font-size: 18px;
padding: 20px 40px;
}
<div class="bigfatbutton">
Review & Pay
</div>
Demo
Add overflow: hidden to .bigfatbutton. Just change the font-size according to your requirement, button size would remain same.
Here is the working example.
I also recommend you to refer CSS Box Model so that you can make changes in your code as you want.
Related
I am trying to improve my css(and html) skills by trying to re-create the homepage of reddit.
The problems I have are the sidebars simply won't stay where they are supposed to be when resizing the browser window, they go up and the width is also changing.
The way it is on my end: https://imgur.com/a/SrfyP (Look at the right side things)
The way it should be: https://imgur.com/a/iBEX3 ( They always stay on the same width and height)
HTML for just the blue bars on the right side which say "Submit a new link"(in the imgur link). I assume if I can get one of them to work I can get all the other elements to work properly too.
<div class="container">
<div class="div1">
Submit a new link
</div>
<div class="div2">
Submit a new text post
</div>
</div>
CSS:
html, body{
margin: 0;
padding: 0;
width: 100%;
}
.container{
display: block;
margin-top: 8%;
margin-left: 87%;
width: 8%;
}
.div1, .div2 {
display: inline-block;
margin-top: 5%;
background: rgb(212, 229, 245);
height: 100%;
padding: 7px;
width: 199%;
text-align: center;
margin-left: -53%;
border-radius: 10px;
border: 1px solid #c4dbf1;
font-size: 150%;
font-weight: bold;
letter-spacing: -1px;
font: normal medium verdana,arial,helvetica,sans-serif;
}
.div1 a, .div2 a{
font-weight: bold;
text-decoration: none;
}
I tried so many possibilities, messing with position, display, float, width, margins. This question has been answered a million times but I couldn't find something that helps me.
Thank you for your time.
I have 2 simple intertwining issues related to my Unordered List which have caused me hours of headache. Each li within the ul contains 1 image, and 3 divs. The divs are titlebox, locationbox, and pricebox. There is text inside each of these divs. A JsFiddle demo is below along with a screenshot of what I need.
The li looks like:
<li>
<center><img src="LINK_TO_PHOTO"></center>
<div class="titlebox">Circa 1930 on the River</div>
<div class="locationbox">Lawrencetown</div>
<div class="pricebox">Offered at $249,000</div>
</li>
My issues are:
I want the titlebox (and the text within it) to stretch the exact width as the image above it, so there's no overhang. This means the text will have to get bigger if the user's monitor is larger, because the image width is a % and is responsive, so the text-size must be responsive as well.
I also need the pricebox (bottom div) to sit at the bottom of the green box. And I want the location box to sit equally between the titlebox above, and the price box below.
The 3rd box has a title of 2 lines, but I still need the location "Medford" to be aligned with those to the left. So I can't use a margin-top: % here because it would push the third box's location/price down too far (since the 2 lined title).
Here is a screenshot of what I need. Screenshot
See how I need the title and price to stretch the same width as the image?
And here is what it currently looks like: jsFiddle
Any help whatsoever would be great! Thank you so much
I use the following to horizontally center block and inline elements...
CSS Class
.center
{
margin-left: auto;
margin-right: auto;
text-align: center;
}
Note you will in some circumstances need to apply the CSS class to the parent element instead of directly to the element itself. Additionally if the width of the parent element is collapsed (e.g. using a float) you'll have to center that element as well by moving the class to the parent element's parent.
I am not sure this is the best way to solve your price spacing issue, but since you know there are 3 divs and one image, you could simply divide the height of a parenting div. Something like this:
#pictureBox
{
margin-left: auto;
margin-right: auto;
height: 50%;
}
#titleBox
{
margin-left: auto;
margin-right: auto;
text-align: center;
height: 25%;
}
#locationBox
{
margin-left: auto;
margin-right: auto;
text-align: center;
height: 15%;
}
#priceBox
{
margin-left: auto;
margin-right: auto;
text-align: center;
height: 10%;
}
I am sure you will have to play around with the percentages until you find a reasonable space you like, but I think that would distribute the space properly.
Here's what I came up with given some of the things you were looking for: http://jsfiddle.net/00gdax7m/8/
.titlebox {
width: 80%;
display: inline-block;
font-size: 17px;
font-size: 1.9vw;
margin-left: 10%;
margin-right: 10%;
line-height: 100%;
font-family: Garamond;
color: #002000;
text-align: center;
height: 20%;
}
.locationbox {
width: 100%;
display: inline-block;
font-size: 25px;
line-height: 100%;
font-family: Garamond;
color: #002000;
font-style: italic;
text-align: center;
height:20%;
}
.pricebox {
position:relative;
bottom:0;
width: 100%;
font-size: 32px;
line-height: 100%;
text-align: center;
font-family: Garamond;
color: #002000;
height: 20%;
}
.houseImage
{
margin-left: auto;
margin-right: auto;
text-align: center;
margin-top: 5px;
height: 36%;
}
Key notes:
I found an answer here which explains the use VW units which helps with your font sizing. The answer says to be careful of browser compatibility though. Pure CSS to make font-size responsive based on dynamic amount of characters
As another user mentioned. Make sure you are using CSS correctly to center.
To make your elements evenly space adjust the height % of your divs within the li (BlueBaroo answered similarly while I was typing)
Ok, here is the issue I am having. I am hoping to seek some guidance on this. I am sure I am doing something wrong, but what that something is I don't know. I have attached two screen shots to show what I am doing here. The second one will show the anchor tags, which are display: inline at the moment overlapping each other when the browser window is to small.
**** CORRECTLY DISPLAYED ****
**** INCORRECTLY DISPLAYED ****
#linkWrapper A {
padding: 10px;
border: 5px dashed #fff;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
width: 200px;
height: 30px;
margin: 0 auto;
color: #fff;
text-decoration: none;
font-weight: bold;
font-size: 30pt;
display: inline;
}
Since you dont post the html, my wild guess would be that the height CSS property does not suffice the whole button height.
So instead, use
CSS
#linkWrapper A {
height: 100px;
line-height: 100px;
}
It is a good habit to include the line-height property for cross browser compability.
One suggestion is try to use it on % for height and width which helps lots of time, along with issues
about your issue, when screen in decreased the div or span font-size will remain as it is, that's why you will see two line one above and below, you can use #media query in CSS which help you in customizing for different screen width and height variant
#media (min-width: 481px) and (max-width: 850px) {
#linkWrapper A {
padding: 10px;
border: 5px dashed #fff;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
width: 200px;
height: 30px;
margin: 0 auto;
color: #fff;
text-decoration: none;
font-weight: bold;
font-size: 30pt;
display: inline;
}
}
NOTE:
above css i have just copied and pasted, please change the css properties as you desired, so as above you can give for any width size screens
let me know if you have trouble
I am using Bootstrap to create all button elements on our website.
The button height is created using line-height, which also helps with centering the text.
I want to include two different font sizes in one button. The standard size, and a smaller note. I have created a very stripped down version of this here with jsfiddle
This is the html.
<div class="button">
test
<small>(note)</small>
</div>
This is the CSS.
.button {
background-color: orange;
color: #fff;
width: 150px;
line-height: 60px;
font-size: 26px;
text-align: center;
vertical-align: middle;
}
small {
font-size: 15px;
}
The issue is that the height of the button gets increased by 4 pixels. Removing the smaller text, will again bring the button to it's correct height. How can solve this problem as I cannot have a higher button?
Having a fixed height attribute of 60px does not work either, because then the text is not centered vertically anymore.
Thank you for the help.
It gets OK (on chrome) if you add a vertical-align to your small tag
http://jsfiddle.net/eAZCN/3/
.button {
background-color: orange;
color: #fff;
width: 150px;
line-height: 60px;
font-size: 26px;
text-align: center;
vertical-align: middle;
}
.button small {
font-size: 15px;
vertical-align: middle;
line-height:10px;
}
I have a website that looks fine in my resolution and even in the more common 1024 x 768. Yet, in someone else's browser in 1024 x 768, it's too wide and the website doesn't even center correctly.
Is there a way to have a proper width layout that doesn't change when the resolution is changed?
/* Body */
body {
background: #535353;
font-family: Arial;
font-size: 12px;
color: Black;
}
form {
margin:0;
padding:0;
display: inline
}
* {
margin: 0;
padding: 0;
}
/* Header */
#header {
margin-left: 100px;
margin-right: 100px;
overflow: hidden;
}
/* Logo */
#logo
{
background-color: White;
}
/* Menu */
#menu {
margin-left: 100px;
margin-right: 100px;
margin-top: 0px;
margin-bottom: 0px;
padding: 0 0 0 0;
text-align: left;
background-color: #AB0000;
font-size: 14px;
color: White;
font-weight: bold;
}
#menu a {
font-size: 14px;
color: White;
font-weight: bold;
}
#menu a:hover {
color: Yellow;
}
/* Spacer */
#spacer {
background-color: #8C8C8C;
}
/* Sidebar */
#sidebar {
margin-left: 100px;
margin-right: 100px;
padding-left: 10px;
font-weight: bold;
text-align: left;
background: url(Images/leftborder.jpg) repeat-x left top;
background-color: #C2C2C2;
}
#sidebar p {
color: Black;
font-weight: normal;
font-size: 11px;
}
#sidebar a{
color: Black;
font-weight: normal;
font-size: 11px;
}
/* Quick Links */
#quicklinks a{
color: White;
font-size: 12px;
font-weight: bold;
text-decoration:none
}
/* Content */
#content {
margin-left: 200px;
margin-top: 10px;
padding-left: 10px;
padding-right: 10px;
background-color: #C2C2C2;
}
#content p {
font-size: 12px;
}
#content a{
color: Black;
font-weight: bold;
}
/* Gallery */
#gallerylinks{
border-color:Black;
}
/* Footer Space */
#footerspace {
background-color: #AB0000;
}
/* Footer */
#footer {
width: 891px;
height: 70px;
margin-left: 100px;
margin-right: 100px;
margin-top: 0px;
margin-bottom: 0px;
padding: 0 0 0 0;
text-align: center;
background-color: #C2C2C2;
font-weight: bold;
color: Black;
}
#footer a {
font-weight: bold;
color: Black;
}
#footer a:hover {
color: Yellow;
}
If you don't want the width to change with resolution/browser size, then use absolute widths in your CSS as opposed to percentages (860px as opposed to 90%).
However if it looks different in someone elses browser, it could be because of their font and font size being different.
Usually you want your layout design to accommodate the users screen resolution. You can get that done by setting your container widths to percentages. Obviously this should be set for the containers and not images.
If the layout changes on different computers, it's likely to be because of
Using a different browser and/or operating system
The browser window is resized on one of the computers
Different text size that breaks the layout (Text resizing in IE does this)
Your markup and CSS-code is full of errors.
Care to post some code?
You have two options:
Adjust your layout so that it renders properly in percentage units; resize the width of your browser window to test
Set your container width using length units (such as pixels) instead of percentage units
Make sure to test in multiple browsers as there are usually subtle variations in the way they interpret the CSS rules. Also consider using a CSS reset library to make this easier.
Browser-based apps are guests on the desktop! You can't ever assume things like screen resolution. You must test your app in as many ways as you can image. Also, use tools like Google's BrowserSize http://browsersize.googlelabs.com/ or FF's WebDeveloper https://addons.mozilla.org/en-US/firefox/addon/60/ to see what your browser app looks like in difference screen sizes.
Also, if the person has a wide screen monitor running at 1024x786, that would make things appear a little weird, too.
This is about centering correctly.
Without the HTML it's a little hard to figure out exactly what's going on, but I don't really see any CSS that would center things.
The trick to centering things in CSS is that you want equal amount of space to the left and right of an item, but since you don't know how big the user's window will be, you don't know how big this space is going to be. The solutions is to use margin:0 auto;
If you guess at the left and right margin sizes for centering things, then you will usually end up with a left margin that is what you specified and a right margin that depends on the user's window size, so things won't look centered if the window size gets bigger than a certain amount.
Here's the deployment on an example page:
The CSS:
#page {
/*
width must be specified or the div will take up all the horizontal
space it can (can be ems, %, whatever)
*/
width:860px;
/*
Top and bottom margins are zero.
Left and right are automatically the same.
*/
margin:0 auto;
}
The HTML
<div id="page">
<h1>Something interesting</h1>
<p>Something enthralling</p>
</div>
I ended up restyling the webpage in 1024X768. Then everything worked out for all other resolutions.