I am trying to put 3 divs in a row [1][2][3].
[1] should have a background image repeating to the left
[2] must be centered. its 1000 px
[3] should have a background image repeating to the right
The problem is that [1] appears on the top of[2],[3] below [2] and the background images for [1] and [3] don't appear. If I just put a color instead of the image,it appears(the path is correct).
HTML:
<div id="topleft">left</div>
<div id="top" >
<div class="container"/>
<div id="header">Menu</div>
</div>
</div>
<div id="topright">right</div>
CSS:
#topleft {
background-image: url(images/leftrepeat.png);
background-repeat: repeat-x;
float: left;
}
#top .container {
background-image:url(images/center.png);
background-repeat:no-repeat;
min-height:151px;
width:1000px;
float: center;
}
#topright {
background-image: url(images/rightrepeat.png);
float: right;
background-repeat: repeat-x;
}
You need to have something inside the divs in order to have a background image to appear. You can´t have empty divs with just background image...
Like above said, try setting the width and height on the divs and you could put some text inside maybe with the same color as the background image. Or you could put a transparent image with the right width/height inside the div and then the background image behind...
And yeah, float left on all!
Try setting the width on the divs in percentage instead. This way they should automatically adjust after the screen size/resolution.
Changing all the floats to
float:left;
will stack the three elements horizontally beside each other.
You need to move your 'topright' above the 'container' in the HTML
<div id="topleft">
left
</div>
<div id="topright">
right
</div>
<div id="top" >
<div class="container"/>
<div id="header">
Menu
</div>
</div>
</div>
Then the CSS for your container should remove the float: center; and add margin: 0 auto;
As for the images, just be sure of the paths as they should be appearing, and that the divs are large enough to display a background image.
float:center; isn't valid - to put elements on the same line you can float them all left. For the rightmost element (#topright) you can optionally float it right, depending on your layout.
If you want #top to be on the same line as #topleft and #topright, it needs to be a floated element, rather than .container.
For your background images - have you tried setting a width and height for #topleft and #topright?
Related
I'm at my wits end with this one.
I have a couple of divs. They all have a downward pointing arrow. It should be centered in the middle, on the brown line and on top of everything. The last div should also have the arrow. I tried z-index, absolute & relative positioning and nothing works.
If you click the title, the box opens. The arrow should stay on the line in the exact spot. This really doesn't seem all that difficult to me, but somehow I can't make it work.
Here is a fiddle:
http://jsfiddle.net/8eLwr
<article id="made" data-magellan-destination="made">
<div class="blocks-holder wide made">
<div class="block wide" id="">
<div class="openblock">
<div class="maak-competences">
<h2>title</h2>
<h4>tagline</h4>
<div class="arrow-down"></div>
</div>
Thanks so much in advance!
Remove the absolute positioning from the arrow and instead set it to display as block and give it margin: 0 auto to centralise it:
.arrow-down {
...
background-position: bottom;
display: block;
margin: 0 auto -36px auto;
}
Note that I've also set its background-position to bottom to make the background image sit directly at the bottom of the element.
JSFiddle demo.
Edit: from comments:
Yes, it should be just underneath the brown line, so it sort of looks like this: -----v------- The two point of the V should touch the line
This is a bit of a large change. We need to remove the background from the individual blocks (to stop them overlapping the arrow), then remove the float from the block container (to fix the height), then finally give the container the white background and increase the negative margin on the arrow:
.blocks-holder .block {
...
float: left; /* Remove this. */
}
.blocks-holder .block.wide {
...
background: transparent;
}
.blocks-holder.wide {
...
background: #fff;
}
.arrow-down {
...
margin: 0 auto -46px auto;
}
JSFiddle demo.
I have got a ul list which has several li elements which need to be floated left.
Each li contains an image of variable height either 150px or 200px. So what we get is multiple boxes(li) with images inside them.
This is the exact html inside an li
<li class="photo">
<a href="#" class="photo-link">
<img src="http://familytrees.genopro.com/MrSpock/pictures/200x150.jpg" class="photo-img">
<span class="photo-title">MrSpock</span>
</a>
</li>
Now if an image in any of the li elements is of height 200px and the adjacent li has an image of height 150px, the li with image 150px height stacks up on the top right edge of the li with 200px height. ( Remember both are floated left)
I want the li elements to stack up as if they were boxes of diff height kept on a floor.
Restrictions : I cannot change this html, there can be multiple li elements in which case the images flow to the next row. We do not know in advance if all the images in a row will be of same or diff height.
Is there a CSS only solution possible for this ? Heres a link to my problem :
https://dl.dropboxusercontent.com/u/88049315/home.html
I want the containers in the first row to all align at the bottom.
What about this fiddle?
<div id="container">
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
#container
{
width:200px;
height:200px;
background-color:#333;
display:table-cell;
vertical-align:bottom
}
.content
{
width:48px;
height:48px;
background-color:red;
float:left;
margin: 1px;
}
As long all the floating content together does not have a width larger then the container everything is fine. After that the float functionality takes over and positions the first line one row above the bottom.
Otherwise you could rotate the conainer div so all content in it goes with it. This is more of a hacky way and can cause issues further down the line. The Fiddle
I need to place 2 fixed width DIVs side by side inside another big fixed width DIV and it is working. This is the code that I have written :
<div id="mainDiv">
<div id="divLeft"> <img src="bla bla bla" > </div>
<div id="divRight"> Normal Text Here..... </div>
</div>
This is the CSS:
#mainDiv { width:1100;overflow:hidden; }
#divLeft { width:720; float:left;}
#divRight { width:380; float:right;}
The problem is, when I placed the image of size 720X480 into the first DIV, the height of the first DIV ("divLeft") is becoming 485. Why its giving an extra
5px ?
You can view the page here : http://www.touchmedia.ca/TestPos.php
Please Note the following:
I did overflow:hidden for the main div, b'cos, otherwise, the float will remove the effect of outer div.
I have hardcoded only the width and not the height.
main div width (1100) = left div width (720) + right div width (380)
Thanks a lot,
Isaac
Add:
#divLeft img {
display: block;
}
add this to your style sheet:
body{
margin:0;
padding:0;
}
I want to recreate the following header:
The problem is that the content is centered in the white section. Grey is the background of body and the header is 100% of screen.
What I have now is:
CSS
.top_left {
background:#3c4d74;
}
.top_right {
background:#2f3a5a;
}
.top_center {
background:#3c4d74 url(http://img85.imageshack.us/img85/2816/headerbgo.jpg) no-repeat right top;
height:140px;
}
#page,
.top_center {
max-width:1000px;
margin:0 auto;
}
#page {
background:#FFF;
}
body {
background:#DEDEDE;
}
HTML
<body>
<div id="top-header">
<div class="top_left"></div>
<div class="top_center">
LOGO
</div>
<div class="top_right"></div>
</div>
<div id="page" class="hfeed">
MY content bla bla bla
</div>
</body>
Which you can see working on http://jsfiddle.net/gTnxX/ (I put max width 600px instead of 1000px so you can see it on fiddle).
How can I make the left side soft blue and right side hard blue at any resolution?
To do this you need to be very aware of how positioning works.
The #header-bg is positioned so it falls below #wrapper. It is 100% width, 140px high with 2 divs which both take up 50% of that space and they both get a different colour for left/right.
The #wrapper is relatively positioned to make z-index work, putting it above the #header-bg. Width is set at 600px, and margin: 0 auto; centers it.
The #header is a simple div which has a height set to it and the background it requires.
Content follows the #header in normal flow.
Here is a jsfiddle with the requested behaviour.
http://jsfiddle.net/sg3s/cRZxN/
This even degrades nicely and lets you scroll horizontally if the content is larger than the screen (something I noticed from the original jsfiddle).
Edit:
To make it IE7 compatible I made some changes to fix 2 bugs. I had to add left: 0; and top: 0; explicitly to #header-bg to fix a positioning bug. Made the divs inside #header-bg 49% instead of 50% or else IE7 would not resize them properly and make the right div bump down. To compensate for the small gap that created I made the right div float: right;.
<style>
.header {
float:left;
width:50%;
border:1px solid black;
}
</style>
<div style="width:100%;">
<div class="header">Hello</div>
<div class="header">World</div>
</div>
I want the two inner divs to appear beside each other fitting perfectly inside the parent. This happens when there is no border set on them, but when I do set a border, the second div wraps and appears below. How do I avoid that?
The reason this happens is because 50% x 2 is already 100%. The 2 px borders make the width 100% + 4 px. To undo this, use negative margins of 1px on either sides.
Demo: http://jsfiddle.net/rfSMX/1/
You may run into the 100% combined width issue in IE.
Essentially, what is happening is that your div's are sized 50% + 2 pixels (one for each border) wide. Because (50% + 2 pixels) * 2 is wider than your 100% container, it forces the floats to wrap.
Applying a -1 pixel margin to the left and right sides of your .header div's should do the trick.
Add an extra div inside the divs that need a border called header-inner.
<style>
.header {
float:left;
width:50%;
}
.header-inner {
padding: 10px;
border: 1px solid #ccc;
}
</style>
<div style="width:100%;">
<div class="header"><div class="header-inner">
Hello
</div></div>
<div class="header"><div class="header-inner">
World
</div></div>
</div>
This could work:
because you don't need to float the second div it should fill up any space that is left after the first div. This allows you to add a border and still have them flush side-by-side