My application should look good on small screens. When it is normal size, everything looks good. But when the screen is too small my buttons starting to mess up.
Red square represents an image, yellow represents some text and blue represents buttons.
Normally, the top version is displayed (the correct one)
When the screen is small, the second situation happens, when the bottom button jump to a new line.
Ideally, both buttons should stay one above the other. This is my css code:
{
background-color: #6b89ac;
border: 1px solid #89a9d0;
border-bottom-color: #1d4474;
color: white;
font-weight: bold;
text-decoration: none;
padding: 2px 5px 2px 5px;
margin-bottom: 3px;
text-align: center;
display: inline-block;
width: 100px;
}
It happens on small screens because the button is being pushed far enough down to slide under the picture. Try wrapping the text and buttons together in a div. The buttons would then be bound by the left edge of that new div.
Depending on your code that new div might also need overflow: hidden.
In the 1st situation, the 2nd blue box being held to the right only because the red box is tall enough to prevent it from clearing.
To ensure the blue boxes stay to the right right, float them right {float:right}
You should then wrap each set in a div so that the 2nd red box doesn't run up into the middle of the 1st group. And you'd probably need to apply a cleafix solution to that div to ensure its height grows approprirately with the addition of floats.
clearfix references:
1. What methods of ‘clearfix’ can I use?
2. The New Clearfix Method
(I prefer #2)
You can give the body a fixed width. Then, your layout doesn't change when the window width is reduced. You can use the overflow-x property to control the scrollbar behaviour
Related
I have created a CSS button on the main menu of a site that I adopted (did not design myself) and the button looks great when at the top of the page. However, once I scroll down and the menu compresses into the sticky menu, the text misaligns with the button background. The text drops down to below the button background and I'm not sure how to fix that.
I've tried adjusting the padding, instead of creating a set height & width to the button, but the padding wasn't working on the right and left side so I went back to the static size. My current button code is below.
.button-menu {
background-color: #0051a3;
width: 100px;
height: 30px;
text-align: center;
vertical-align: central;
border-radius: 10px 10px 10px 10px;
}
.button-menu:hover {
background: #fbb714;
text-decoration: none;
}
I just want the text to be centered within the button background in the vertical alignment when the menu is in scrolling mode.
Your button has a fixed width and height but the text inside of it is going to drop down into multiple lines as that's a browser default behavior. You could try playing around with
.button-menu{ word-wrap: break-word; }
or maybe also try using a min-width and min-height instead of setting the width and height.
I have four boxes in a row and they all have the same class. They all should be the same width but one is 1 pixel wider than the rest and it's throwing the row out. As far as I can see, the content is not pushing it, and there is nothing in the box to make it 1 pixel wider. It's the second last box to the right with the contact form in it on this site: http://www.guitarworldcityarcade.com.au/
If it's not content, how can I tell what's making this particular div 1 pixel wider than the rest?
I had compensated for the border in the widths of each box: layout is 1120px wide. 1120/4 = 280. Each box has a padding of 5px, so thats 5 on the left and right. 280-10=270. Then the border, which is 1px on each side, so thats 270-2 = 268. I have set my class for the boxes to be 268px wide and yet one is one pixel wider. I don't really want to sacrifice the border (yet).
You are using border: 1px solid #111111; on line 247 of global.css.
So if you are aware of CSS Box Model
The border is counted outside of the element and not inside hence it offsets your element by 2px and not 1px because it takes 1px on the left, 1px on the right as well as top and bottom too.
So two solutions here, either you can use border: 0; or you need to use box-sizing: border-box; on that element, which will count the border inside instead of outside.
That extra space is coming because of border. So you need to set it to zero.
Declare border: none; for the last box and it will work.
Add this code in your class
border: none;
outline: none;
width:0;
Remove the css border property to that div
border:0px;
I have a form surrounded by a border. When the window is resized the border sometimes overlaps the form. This should not happen.
See the fiddle output:
http://jsfiddle.net/sdSdW/embedded/result/
Can someone tell me what I have to change in my source to make the border surrounding my form, keeping a distance between the form and the border even if the window is resized.
I do not want to make the border fixed width (if not really necessary)
See the fiddle source:
http://jsfiddle.net/sdSdW/
You don't need many parents for the border. You can add the border to fieldset itself
try -
fieldset {
border: 1px solid #DDDDDD;
margin: 0;
padding: 40px;
}
JSFiddle
I read this and wrote this code:
.wholePageDivForCentering
{
width: 80%;
white-space: nowrap;
display:inline-block;
margin: 0 auto;
border: 4px solid red;
/* other stuff I tried........*/
/*padding-left: 10%;*/
/*margin-left: 10%;*/
/*padding-right: 10%;*/
/*margin-right: 10%;*/
}
<body>
<div class="wholePageDivForCentering">
<h2>Hello from the page</h2>
<!-- stuff such as 2 nested divs contained text labels, and a small image -->
</div>
</body>
I put a solid-red, 4-pixel border around my outermost div for a reason.
I wanted to see if that thick red border rectangle around that outermost div would
horizontally center itself on the page.
IT DID NOT.
EDIT: My outermost div stays on the left when the browser is maximized.
You can see I tried more than one thing. In my opinion, I should be able to:
tell this outermost div, the one with the thick red border, to take up 80% of
the browser window
then using the advice from the above SO post (again, here) -- get this
outermost div always taking up 80% of the browser window but HORIZONTALLY CENTERED
on the browser window.
Me personally? I think my margin-left = 10%, margin-right=10% should do it but no.
To see what I want -- open Craigslist at http://sfbay.craigslist.org/
and maximize the browser window (the main page, not a nested page, of the CL site).
The horizontal width of the whitespace on either side of the Craiglist main
page is the same when you maximize the browser. The main page's columns are
horizontally centered.
Because (perhaps) that page has a centered div that surrounds everything
else on the main page.
How do I do it?
Take out display:inline-block and it should work.
Here is a Jsfiddle (click Run): http://jsfiddle.net/zKm6b/
I also recommend using an id instead of a class for that div. I hope that helps!
Why are you settings display: inline-block. It will work if display is block (which a div is by default, so you can solve the problem by removing display).
On this page, you'll see a blog post that has a thumbnail, tag set and other information in a sidepanel on the left: http://www.elegantthemes.com/preview/TheStyle/2010/10/morbi-rutrum-interdum-justo/.
What I am trying to do is to create a black rectangle on this white div, a black rectangle that extends from the top left of the white div to the bottom, just left of the post text.
At first I tried simply creating a two-color image that was one pixel wide and using repeat-y in order to extend the "faux two column" layout from top to bottom. However, this div resizes dynamically, so in many cases the black text from the post ends up running over into this sidebar.
I then tried using the same image in the same way, but giving the white div a "position: absolute" trait. This caused the sidebars on the right to spill over onto the post content.
I want to create this black rectangle to take up any whitespace to the left of the post content.
I have inherited a lot of CSS that I'm not sure how to change. Any advice would be greatly appreciated. `
I will add the style.CSS file here if I can find some way to do so. This is my first time on the site.
Looking into the CSS, it says that everything you said is within its own div:
<div class="info-panel">
With that said, you just make your CSS changes to that class. You'd do something like:
.info-panel {
background-color: #000;
}
But keep in mind that, for it to look good, you should play with the padding and margins for the info-panel and post-content classes as well.
I just made it look better and keep the same overall width by including the following:
.post-content {
background: url("images/entry-bottom-bg.png") repeat-x scroll left bottom transparent;
padding: 0 4% 30px 1%;
}
.info-panel {
background: none repeat scroll 0 0 #000000;
float: left;
margin-right: 1%;
padding: 2% 0 2% 2%;
width: 29%;
}
The last two code snippets from the CSS are just some advice on what I would do if my solution worked for you. Doesn't mean you have to, so please don't treat it as such. It just keeps the area from looking awful.
It's hard to decipher what exactly you're trying to do, but see if this helps:
.post-content.info-panel {
background-color: black;
padding: 4px;
width: 28%;
}