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.
Related
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/
I have been reading a few different answers to this type of question, as well as researching a bit on how to fix it, but I feel that my code is probably pretty messed up by now. I can't get my divs to sit next to each other so that I can create another larger div beneath them. I am very new at this and have been following tutorials and class reading to get this far, so I am sure something fairly simple or dumb is wrong. I just can't figure it out :-/. Here is the jsfiddle link http://jsfiddle.net/betyB/1/
CSS:
body {
background-image: url(superhighway.jpg);
background-repeat: repeat-x;
background-attachment:scroll;
background-color:#000000;
background-attachment: fixed;
}
#main1 {
position:relative;
z-index:1;
width: 600px;
height: 400px;
background-color:#000;
margin: 5px;
border: solid 4px #323232;
padding: 10px;
overflow:hidden;
filter:alpha(opacity=50);
-moz-opacity:.50;
opacity:.50;
}
#content1 {
position:relative;
z-index:2;
top:-425px;
width: 960px;
height: 800px;
text-align:left;
color:#FFF;
font-weight: bold;
margin: 35px;
}
#main2 {
position:top;
z-index:1;
width: 600px;
height: 400px;
background-color:#000;
border: solid 4px #323232;
padding: 10px;
margin-left:auto;
margin-right:auto;
margin-top:300px;
filter:alpha(opacity=50);
-moz-opacity:.50;
opacity:.50;
}
#content2 {
position:relative;
z-index:2;
top:-425px;
width: 960px;
height: 800px;
text-align:left;
color:#FFF;
font-weight: bold;
margin: 35px;
}
HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>Title Here</title>
<link href="MyStyle.css" type="text/css" rel="stylesheet">
<!--
<script language="Javascript" type="text/javascript">
<!--
alert("");
</script>
-->
</head>
<body>
<h1>My Ideal Job</h1>
<div id="main1"></div>
<div id="content1">
This is to test the content of the div.
<li>one</li>
<li>two</li>
<p></p>
<li>a</li>
<li>b</li>
</div>
<div id="main2" style="float:right;margin:0;"></div>
<div id="content2">
Testing number two div.
<li>one</li>
<li>two</li>
<p></p>
<li>a</li>
<li>b</li>
</div>
</body>
</html>
The first thing that you need to do is add the display: inline-block; property to your divs' CSS. Second, you may need to ensure that there is a whitespace (either via just adding a space or adding if that is not sufficient, in your divs.
Extra Info
Positioning divs can be very simple, or it can be very challenging depending on your implementation and what you are trying to achieve. Most of the time, when speaking generally about positioning divs side-by-side the simple answer is to use the display:inline-block property. However, if you are trying to space everything out evenly and provide the maximum amount of cross-browser support, the solution gets more complicated.
Check out this post. It provides a terrific description of the challenges and various solutions to positioning divs side-by-side with maximum cross-browser support. The post is primarily concerned with evenly spacing the divs, which you can decide to do or not to do, but it provides a lot of great background and extra info that you should know. I have used the described solution for over a dozen implementations.
Here is the code for that solution:
HTML:
<div id="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<span class="stretch"></span>
</div>
CSS:
#container {
border: 2px dashed #444;
height: 125px;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
/* just for demo */
min-width: 612px;
}
.box1, .box2, .box3, .box4 {
width: 150px;
height: 125px;
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1
}
.stretch {
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0
}
.box1, .box3 {
background: #ccc
}
.box2, .box4 {
background: #0ff
}
And here is a link to the fiddle that he provided: http://jsfiddle.net/EDp8R/3903/
ok so I made this pen for you: http://codepen.io/anon/pen/zpxJt it does what I think you want, but your html has several errors, missing you shouldn't be doing inline styles, I understand you're new to this so I get it. The layout you want to achieve can be difficult if your html structure is not correct.
In the following code from: http://6.470.scripts.mit.edu/css_exercises/exercise5.html
<html>
<head>
<style type="text/css">
.wrapper1 {
width: 65%;
margin: 0px auto 0px auto;
border: 1px solid;
text-align: center;
background: #eeeeee;
}
.wrapper2 {
clear: left;
width: 80%;
margin: auto;
border: 1px solid;
background: #111111;
}
.p1 {
margin: 20px;
font-size: 70px;
}
.p2 {
font-size: 50px;
}
.link-gr {
list-type: none;
}
.link-gr li{
float: left;
}
.link-gr li a{
display: block;
width: 100px;
}
</style>
</head>
<body>
<div class="wrapper1">
<div class="wrapper2">
<p class="p1">MIT 6.470</p>
<p class="p2">Learn Web Programming this IAP</p>
<ul class="link-gr">
<li>Comprehensive Curriculum</li>
<li>Insightful Guest Lectures</li>
<li>Interaction with Sponsors</li>
<li>$30,000+ in Total Prizes</li>
</ul>
</div>
Copyright © 2012 MIT 6.470
</div>
</body>
the ul.link-gr links are falling outside the div. I mean everything excluding the links are wrapped inside div.wrapper2 with border and black-ish background but the links are placed outside the box (like outcast-ed). This is very strange. Some explanation from your side will be highly appreciated.
Thanks
I would think this is a float problem: your code contains
.link-gr li{
float: left;
}
The problem is that its container is not float: left, which means that the list items are free to go anywhere. Try adding float: left to the .link-gr as well:
.link-gr{
float: left;
}
This may solve the problem. Fiddle: http://jsfiddle.net/abZHK/1/
Ah floats...
Explanations
See this old article from P.I.E: Clearing floats (IE/Win is IE version 6 there)
Solution
Apply this modern clearfix (on parent of the non-contained floats)
I am in the process of designing a website for a film that is being released, but I am having some problems with getting it to fit in all browser windows sizes and screen sizes. Essentially, the markup, for example for the splash page, has the films logo at the top of the page, a video (the films trailer) under it, then an enter button that takes the user to the homepage. All of these should be centered on all browser window sizes. However when I try different sizes etc. the content does not remain centered and the video moves off of it's background image. How would I fix that with CSS?
There are a few other pages as well i.e. synopsis, videos and then a page to donate to the project. I would like these to work in the same way, keeping content working correctly on all sizes. Thanks!
If you want to look at this and see what I mean, the link is http://rescuedthemovie.com/new/home. This is the dev page and has basically no final design so it is somewhat messy but you can see what I'm talking about.
jwinton
Sounds like a problem with the way you are positioning your elements on the page. Take a look at:
http://www.w3schools.com/css/css_positioning.asp
Just add this to whatever divs you want to be centered. This should work on all browsers and will keep everything centered no matter the resolution.
#div {
margin:0 auto;
text-align:center;
}
I would suggest using this for the main content div, so everything is centered, then creating separate divs for the video, links, etc. That way you can position those where you want them inside the centered div..
I don't understand your design. I see the following problems.
You have a div id="container" but the only thing it contains is the div id="fotter". All the rest of the elements are "outside" the container div.
You have a div id="logo" with a style of margin-top: 1%; margin-left: 25%;. How will this center it?
Your div id="slider" has position: relative; left: 26%; top: 3em; which means that it is being pushed 26% from left and 3em from top of its origional position and leaving a "gap" where it was before.
Your h1 has a margin: left; 300px;. Where exactly you want it to be?
Underneeth the h1 you have a elements which contain div elements? This is like a block level element inside a in-line elements. Totally wrong. These all a elements should be inside a div and than that div should be positioned.
Your div#footer is inside the
div#container. The div#foooter
has a style of position: absolute
while the div#container does NOT
have a position: relative. This
causes 2 things. The div#container
collapses as it does not have any
content and the div#fotter is
positioned relative to the browser
window.
you have 3 div#recent. The ID has to be unique. This is not allowed. Use calsses instaed.
I will give a skeloton on how to go about this.
THE HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Rescued: The Movie</title>
<link rel="stylesheet" href="my_styles.css">
</head>
<body>
<div id="container">
<div id="logo">
<img src="http://rescuedthemovie.com/new/images/logo.png" alt="Rescued Logo" />
</div>
<div id="nav">
<ul>
<li>home</li>
<li>synpsis</li>
<li>videos</li>
<li>blog</li>
<li>partner</li>
</ul>
</div>
<div id="slider">
<img src="http://rescuedthemovie.com/images/slides/slide1.jpg" alt="Slide 1" />
<img src="http://rescuedthemovie.com/images/slides/slide2.jpg" alt="slide 2" />
<img src="http://rescuedthemovie.com/images/slides/slide3.jpg" alt="slide 3" />
</div>
<div id="blog">
<h1>NEWS</h1>
<div class="recent">
<h2>The Putnam's Adoption Journey</h2>
My husband and I thought our family was complete. We had our two children (one boy and one girl) and were completely satisfied with that. Life was comfortable. My youngest had just started Kindergarten so I found myself with more free time than I had had in nine years! I was enjoying the freedom of grocery shopping without toddlers. But then God started stirring something in our hearts...
</div>
<div class="recent">
<h2>God's Divine Leading: Part 3</h2>
I remember feeling a little surprised that she had decided on adoption. I guess I just assumed that she would opt to keep her baby. I have to admit that I did wonder for a fleeting moment if perhaps the Lord was trying to lead Jurgen and I to adopt her baby, but then reasoned that a domestic adoption might be too risky. People might also think it strange, since I was the one who encouraged her to consider adoption in the first place, rather than end her baby’s life...
</div>
<div class="recent">
<h2>God's Divine Leading: Part 2</h2>
When I awoke, I had an overwhelming desire to have a baby of our own. The dream was extraordinarily real and tangible, and I felt strongly that the Lord had given me this dream as an answer to my questions about pursuing adoption. I am not the type of person who normally bases my decisions on dreams, but this was different. It was as if the Lord Himself had dropped this desire into my heart...
</div>
<a id="more" href="http://rescuedthemovie.com/blog">Read More</a>
</div>
<div id="footer">
<p>©2011 Rescued</p>
</div>
</div>
</body>
</html>
THE CSS
{
margin: 0;
padding: 0;
}
img
{
border: 0;
}
a
{
text-decoration: none;
color: #000;
}
body
{
background: url("http://rescuedthemovie.com/new/css/../images/blog_bg.jpg") no-repeat scroll center top #000;
}
div#container
{
width: 960px;
margin: 20px auto;
margin-bottom: 0;
}
div#logo
{
width: 850px;
height: 300px;
margin: 0 auto;
}
div#logo a
{
width: 100%;
height: 100%;
display: block;
}
div#nav
{
background: url("http://rescuedthemovie.com/new/css/../images/nav.png") no-repeat scroll 0 0 transparent;
font-size: 25px;
text-transform: uppercase;
}
div#nav ul
{
width: 900px;
margin: 10px auto;
}
div#nav ul li
{
display: inline-block;
margin: 0 40px;
color: #FFF;
}
div#nav ul li a
{
color: #FFF;
}
div#slider
{
width: 500px;
height: 250px;
margin: 0 auto;
margin-top: 77px;
float: right;
position: relative; /*romove this in the final design*/
}
div#slider img /*romove this in the final design*/
{
position: absolute;
top: 0;
left; 0;
}
div#blog
{
float: left;
width: 450px;
color: #FFF;
margin-bottom: 50px;
}
div#blog h1
{
margin: 20px 0;
}
div#blog a#more
{
float: right;
color: red;
}
div.recent
{
margin: 20px 0;
border: 1px solid #555;
padding: 5px;
}
div.recent h2
{
font-weight: bold;
color: #777;
margin-bottom: 10px;
}
div.recent a
{
color: #FFF;
}
div#footer
{
clear: both;
color: #FFF;
text-align: center;
font: 25px;
margin: 20px auto;
}
div#footer p
{
font-size: 25px;
}
This offcouse is an fixed width layout. But you can easily change it to fluid or estalic. This is how it looks
When I try to put 5 inline-block divs of 20% width with 1px borders, inside a containing div, also with a 1px border, they wrap on to the next line.
They do fit if I get rid of all the borders.
I understand that this is because the divs take up 100% of the containing divs area, including its padding and border area, meaning that they don't fit within the borders, so it has to wrap.
My question is how to modify this so that I can make them fit exactly. Surely this is a common problem?
<html>
<head>
<title> Test </title>
<style type=text/css>
div
{
margin: 0;
padding: 0;
}
#navBar
{
border: 1px solid black;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
width: 50%;
}
.navBtn
{
border: 1px solid black;
display: inline-block;
text-align: center;
}
</style>
</head>
<body>
<div id="navBar">
<div class="navBtn" style="width:20%">Text</div><div class="navBtn" style="width:20%">Text</div><div class="navBtn" style="width:20%">Text</div><div class="navBtn" style="width:20%">Text</div><div class="navBtn" style="width:20%">Text</div>
</div>
</body>
</html>
As a side note, it's crazy that if I put the 5 divs on their own lines, they get rendered with space between them, hence why they're all on one line. In my real code the divs are generated with php, so it's not long.
margin:0 -1px 0 -1px gives you an easy place to start.
Would also recommend using float:left for this since display:inline-block is buggy in some browsers.
To get your container <div> to expand vertically to fit content, just have an element with clear:both after your floated ones.
All can be seen here: http://jsfiddle.net/steve/qEJaA/
One idea is to get rid of the 1px border for your .navBtn class, and create a nested element in each navBtn div:
<html>
<head>
<title> Test </title>
<style type=text/css>
div
{
margin: 0;
padding: 0;
}
#navBar
{
border-top: 1px solid black;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
width: 50%;
}
.navBtn
{
display: inline-block;
text-align: center;
}
.nav-text { border:1px solid #ccc; }
</style>
</head>
<body>
<div id="navBar">
<div class="navBtn" style="width:20%"><div class="nav-text">Text</div></div><div class="navBtn" style="width:20%"><div class="nav-text">Text</div></div><div class="navBtn" style="width:20%"><div class="nav-text">Text</div></div><div class="navBtn" style="width:20%"><div class="nav-text">Text</div></div><div class="navBtn" style="width:20%"><div class="nav-text">Text</div></div>
</div>
</body>
</html>
Yes, this is a common problem.
There are (at least) two common solutions.
The first is have a wrapper element for each child element, and move the width to that. The border stays on the child element.
Because your id is navBar, this is obviously for some kind of menu, so I'm going to restructure your code to add the described wrapper elements, and to make it more semantic.
See: http://jsfiddle.net/wFeYn/
<ul id="navBar">
<li style="width:20%">Text</li><li style="width:20%">Text</li><li style="width:20%">Text</li><li style="width:20%">Text</li><li style="width:20%">Text</li>
</ul>
#navBar {
border: 1px solid black;
margin: 10px auto 0 auto;
width: 50%;
margin: 0;
padding: 0
}
#navBar li {
display: inline-block;
text-align: center;
}
#navBar li a {
display: block;
border: 1px solid black;
}
The second solution is to use CSS3's box-sizing: border-box.
This is very easy, and all modern browsers support it (unfortunately IE7 does not).
To use this with your original code you would do:
.navBtn
{
border: 1px solid black;
display: inline-block;
text-align: center;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
If you do care about IE7, then you should know that display: inline-block won't work without some simple hacks.
For IE7 support, replace display: inline-block; with:
display: inline-block;
*display: inline;
zoom: 1;
That goes for either your original code, or my updated code. But only if you care about IE7.