I have a header bar with a logo on the left and a search form following. Both are floated to the left. I am trying to control the vertical spacing of the search form using CSS but I cannot find a good solution other than adding padding and/or margin either on top or bottom of the search form, and although I may be able to find values that work in one browser, it is not a solution that is consistent across browsers... The same problem exists if I have a search button next to the search field. Is there a solution for this that is cross-browser compatible or do I need to use JavaScript? Is there a standard to doing something like this?
P.S. I reset the CSS in my dev code.
Here is a simplified version of my header code:
body {
font-family: Arial, sans-serif;
}
header {
overflow: hidden;
background-color: black;
}
a {
text-decoration: none;
color: white;
}
#site-title, #search {
float: left;
}
#site-title {
margin-right: 50px;
background-color: green;
font-size: 28px;
}
#search {
background-color: red;
margin-top: 5px
}
<body>
<header>
<div id="site-title">Site Title</div>
<div id="search">
<form>
<input type="search" placeholder="Search..." />
</form>
</div>
</header>
</body>
Link to code on JSFiddle: http://jsfiddle.net/mg535m80/2/
Edit: I found a solution, it's not as cross-browser compatible is I'd hoped, but it works in all modern browsers. I just added display: flex; and align-items: center to the parent, and it worked like a charm. New code:
body {
font-family: Arial, sans-serif;
}
header {
overflow: hidden;
background-color: black;
display: flex;
align-items: center;
}
a {
text-decoration: none;
color: white;
}
#site-title, #search {
float: left;
}
#site-title {
margin-right: 50px;
background-color: green;
font-size: 28px;
}
#search {
background-color: red;
}
<body>
<header>
<div id="site-title">Site Title</div>
<div id="search">
<form>
<input type="search" placeholder="Search..." />
</form>
</div>
</header>
</body>
Updated JSFiddle: http://jsfiddle.net/mg535m80/9/
The problem is the style of the input, which is different between browsers.
Solution: to make the input look the way you want, set all its styles explicitly instead of relying on the defaults. Example:
input {
width:10em; height:1.25em;
margin:0; border:2px solid #888; padding:0;
font:inherit; vertical-align:baseline;
}
See updated fiddle
Yes, it is possible to specify vertical properties in pure CSS. Partially you already answered your question (i.e. padding and margin properties). Other properties include height, line-height, min-height, max-height, etc. Also, you can use position: absolute or fixed and specify top/bottom properties. Hope this may help. Best regards,
One solution can be set height in header:
header {
height: 33px;
}
And then use display: flex to align search box:
#search {
display: flex;
align-items: center;
height: 100%;
}
FIDDLE: https://jsfiddle.net/lmgonzalves/mg535m80/3/
Related
When I view the following on my iPhone, the contents of the second div don't appear. I see both divs in chrome and safari on my computer. Seems to be an issue with mobile Safari. I found that if I replace the number, 123-456-7890, with text such as "Right Side Text", the issue goes away.
#bannerLeft {
float: left;
text-transform: uppercase;
font-size: 1.7em;
font-weight: bold;
width: 50%;
}
#bannerRight {
float: right;
font-size: 1.7em;
font-weight: bold;
width: 30%;
}
<div id="bannerLeft">Left Side Text</div>
<div id="bannerRight">123-456-7890</div>
Any suggestions? Thanks in advance.
First of all, you never style through id selectors, is a really bad practice, but this is easy to fix:
.banner {
font-size: 1.7em;
font-weight: bold;
box-sizing: border-box;
}
.banner.left {
float: left;
text-transform: uppercase;
width: 50%;
}
.banner.right {
float: left;
width: 30%;
text-align: right;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
<div class="clearfix">
<div class="banner left">Left Side Text</div>
<div class="banner right">123-456-7890</div>
</div>
The problem may be due to some paddings or margins each browser has as default, the simplest solution in here was to add the box-sizing css3 property, which stops this problem to happen.
Also when floating things you may want to wrap those elements into a clearfix element to prevent overlapping.
Try the codepen I put together, maybe it can help.
http://codepen.io/anon/pen/LELrYd
I also float everything to the left, you'll get quite the same result, just notice the text align property, if this is not your case you can float to right and it would still works.
Cheers!
I have a div message which basically has a text and a link. I want its size to be changing based on the string inside it. Also I want this message div to be centered inside its container.
I have been playing with it for a while without much luck. Here is the link to JSfiddle: http://jsfiddle.net/pDYJ8/
Also I don't know how make that text and link appear one after other ( not on the new line )
Here is the code:
<div class="container">
<div class="message">
<p>do you want to </p>
<a href="somewhere" target="_blank">
buy this product
</a>
</div>
</div>
.container {
position: absolute;
background: #666;
top:25%;
width:100%;
font-size: 15px;
color: #e47911;
}
.message {
margin-right: auto;
margin-left: auto;
background: #ddd;
width:100px;
}
Tried display inline block to fit its content but then it wouldn't center it inside its parent.
Keeping width 100px for now just to mock my requirements
Just Tweak Some CSS
See the demo fiddle.
.container {
position: absolute;
background: #666;
top:25%;
width:100%;
font-size: 15px;
color: #e47911;
text-align: center; /*added*/
}
.container .message {
display: inline-block; /*added*/
text-align: left; /*added*/
background: #ddd;
}
.message p { /*added*/
display: inline-block;
}
Explanation
The text-align center causes the now inline-block display of .message to center, which is then reset to have its own text-align back at left (this is not necessary). To get the a on the same line, the p also needs to be some type of inline display, here I chose inline-block as well..
I think you are over complicating things. All you need is a text-align: centeron the container and a display: inline-block on the message:
.container {
background: #666;
font-size: 15px;
color: #e47911;
text-align: center;
}
.container .message {
background: #ddd;
display: inline-block;
}
http://jsfiddle.net/Pevara/pDYJ8/9/
The inline block makes the div act as a word inside text, and the text-align center makes the 'word' align to the center...
Here is a simplified approach to a couple of the answers given. It reduces the amount of HTML and CSS needed.
CSS
.container {
color: #e47911;
text-align: center;
}
.message {
display: inline;
background: #DDDDDD;
}
HTML
<div class="container">
<p class="message">
Do you want to buy this product?
</p>
</div>
I would definitely put your anchor tag, <a> inside the paragraph tag, <p>.
You could even remove display: inline; from .message if you made it a <span> rather than a <p>.
Check this out:
http://jsfiddle.net/pDYJ8/10/
Changes made to above link
.container .message {
margin: 0 auto;
width:auto;
}
span{
background: #ddd;
display:inline;
}
You can simplify it with display: table; and margin: 0 auto;
.container {
display: table;
margin: 0 auto;
background-color: #DDD;
}
<div class="container">
do you want to buy this product
</div>
I was just adapting a webdesign, when I found a problem and couldn't slove it on my own.
I coded a heading and an article picture, both in the same div, with a border at the bottom of the div.
My problem: The border comes right after the title and doesn't integrate my picture.
Check out this fiddle to see what i mean: Click me!
Here is my code:
<div class="latestarticle">
<a class="articletitle" href="#" >Guitar Hero Experts Melt Your Face Off</a>
<div class="articlepicture">
</div>
and CSS:
.latestarticle {
border-bottom: solid 1px #CCC;
padding: 0px;
margin-top: 12px;
font-size: 12px;
}
.articletitle {
color: #CD5700;
text-decoration: none;
font-weight: bold;
font-size: 14px;
margin-bottom: 5px;
}
.articlepicture {
height: 76px;
width: 136px;
float: left;
margin-top: 12px;
margin-right: 9px;
border: solid #A3A3A3 2px;
}
I'm wondering why this is not working. This should work, anyway, add display: table; or display: table-cell; to your .latestarticle. It works fine. See Demo
Edit
Oh! I came to know this problem is happening because you have floated left to your .articlepicture and I hope you wanted to do as demo.
I have added <div class="articlegroup"></div> for your .articlepicture div and defined it display: inline-block;
DEMO
use css display: block to .articletitle
I think what you are looking for is a clearfix. You need to add a "clearfix" div as a sibling to a floated element if you want the parent to recognize the height of the floated element.
<div class="latestarticle">
<a class="articletitle" href="#">Guitar Hero</a>
<div class="articlepicture"></div>
<div class="clearfix"></div>
</div>
Then define the .clearfix style in css:
.clearfix { clear:both; }
use disply:inline-block; for latestarticle .see here http://jsfiddle.net/WEHw4/5/
I've been spending a couple of hours and can't seem to figure this out. I have a html tree similar to this:
<div class="region">
<div class="area" id="one">
<img src="..." />
<span>...</span>
...
Then my css has:
.region {
margin-left: auto;
margin-right: auto;
padding: 0;
width: 80%;
}
.area {
display: inline-block;
text-align: center;
width: 25%;
}
.area img {
border: 1px solid green;
margin: 0;
}
The problem is that for some reason I can't seem to be able to override img inside the area class. When I look into firebug I only see a global img being applied (display: inline-block) and nothing else.
The interesting thing is that replacing the "img" for "span" in the css does override it! How can this happen? Tested for typos, etc. but I can't seem to figure this out.
Any tip greatly appreciated!
I see the same issue in Firefox 16.02, and the latest Safari and Chrome. However, adding a class to the image fixes it:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.region {
margin-left: auto;
margin-right: auto;
padding: 0;
width: 80%;
}
.area {
display: inline-block;
text-align: center;
width: 25%;
}
.area img {
border: 1px solid green;
margin: 0;
}
.area .place {
border: 1px solid purple;
}
</style>
<title>Hello Dolly!</title>
</head>
<body>
<div class="region">
<div class="area" id="one">
<img src="../Pictures/TheBridge.jpg" class="place">
<span>Span This</span>
</div>
</div>
</body>
</html>
I found the problem causing it, though I don't understand why this is happening. My original css selectors look like this:
.area {
display: inline-block;
text-align: center;
width: 25%;
}
.area img {
border: 1px solid green;
margin: 0;
}
.area span {
vertical-align: middle !important;
}
With this order, the code doesn't work and img is completely ignored, but span isn't.
Now if I swap img with span, leaving the order .area, .area span, .area img then span is ignored, but img isn't!
Does anybody have any idea what could be causing this? I never ran into this kind of issue.
Could someone please try this http://jsfiddle.net/UxLuJ/1/ on a real browser to see if you can reproduce the problem?
In my case, using Chrome Version 23.0.1271.64 and Firefox 16.0.2 the img tag isn't parsed correctly. A way to fix the problem is doing the following: add a dummy selector between .country and .country img like this:
.country .foo {}
This way, the img tag is recognized correctly.
This seems to be the same bug reported by Carl, though I use a slightly different workaround.
I'd appreciate someone else confirming this.
I'm using CSS buttons from this tutorial:
http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html
I need to put a button in the middle of a DIV so it's centered. But I can't!
Here's the code of the button:
<a class="button" href="#"><span>Bring world peace</span></a>
And here's CSS:
.clear { /* generic container (i.e. div) for floating buttons */
overflow: hidden;
width: 100%;
}
a.button {
background: transparent url('bg_button_a.gif') no-repeat scroll top right;
color: #444;
display: block;
float: left;
font: normal 12px arial, sans-serif;
height: 24px;
margin-right: 6px;
padding-right: 18px; /* sliding doors padding */
text-decoration: none;
}
a.button span {
background: transparent url('bg_button_span.gif') no-repeat;
display: block;
line-height: 14px;
padding: 5px 0 5px 18px;
}
Here's the code I'm trying to use:
<div align="center"><a class="button" href="#"><span>Bring world peace</span></a></div>
the align attribute for the div element is deprecated. You're better off defining a class for that div, like so:
<div class="centerize">
<a class="button" href="#"><span>Bring world peace</span></a>
</div>
And the CSS:
.centerize {
text-align: center;
}
Note however that setting the text-align will only affect the content inside the div. The div itself (should be) a block element, and depending on where it sits in the document structure, may not be centered itself.
Just to make a little more certain, you can do something like this:
.centerize {
display: block;
margin: 0 auto;
text-align: center;
}
Now you can apply centerize to any element, and that element should take up the entire browser's width and center-align its content.
Modify the button class for these properties:
.button{
margin-left:50%;
margin-right:50%;
position: relative;
}
And wrap your link in the div like this:
<div align="center">
<a class="button" href="#"><span>Bring world peace</span></a>
</div>
The a.button is floated to the left. You could try float: none; on that element. margin: 0 auto; is also useful for center-aligning elements.
Does that help?