I'm trying to slice an box with rounded corners. The image is sliced horizontal in 3parts (top-middle-bottom). The problem in IE7 is that the top div is larger than the actual size I set.
Here is the HTML & CSS code
<!-- FIRST PICTURE -->
<div class='recent-box'>
<div class='recent-box-top'></div>
<div class='recent-box-middle' >
</div>
<div class='recent-box-bottom'></div>
</div>
<!-- FIRST PICTURE -->
<div class='recent-box'>
<div class='recent-box-top'></div>
<div class='recent-box-middle'>
</div>
<div class='recent-box-bottom'></div>
</div>
<!-- FIRST PICTURE -->
<div class='recent-box'>
<div class='recent-box-top'></div>
<div class='recent-box-middle'>
dsqd
</div>
<div class='recent-box-bottom'></div>
</div>
<!-- FIRST PICTURE -->
<div class='recent-box'>
<div class='recent-box-top'></div>
<div class='recent-box-middle'>
dsqd
</div>
<div class='recent-box-bottom'></div>
</div>
.recent-box {
width: 127px;
float:left;
display:block;
}
.recent-box-top {
float:left;
background-image: url('images/recent-foto-top.png');
background-repeat:no-repeat;
width: 100%;
}
.recent-box-middle {
float:left;
background-image: url('images/recent-foto-middle.png');
background-repeat:repeat-y;
width: 100%;
}
.recent-box-bottom {
float:left;
background-image: url('images/recent-foto-bottom.png');
background-repeat:no-repeat;
width: 100%;
}
Thanks for helping me out!
Ward
The font-size and line-height properties might be the offensive ones. If you are not placing any text in the top box, use something like
.recent-box-top {
font-size: 0;
line-height: 0;
}
Found the solution!
Just put in the div and it works like a charm!
found on http://archivist.incutio.com/viewlist/css-discuss/39150
Related
A site I inherited uses a sprite for some design based images. The sprite is 28px tall. Recently it began that when the site is viewed in Chrome, the sprite does not display on the elements when the height of the container with a background is > 28px.
I was able to reproduce this using the below snippet.
It's especially odd that if i create a narrower image, I don't have this problem. The break point seems to be width: 16384px or 2^14.
.outer {
width: 1000px;
background-color: skyblue;
}
.bg {
background: url('https://i.imgur.com/DEV7k42.png');
}
<div class='outer'>
<div class='bg'>
<div style='height:28px'>
See this nice background?
</div>
</div>
</div>
<div class='outer'>
<div class='bg'>
<div style='height: 29px;'>
No background here
</div>
</div>
</div>
This uses an image that is 16384px wide:
.outer {
width: 1000px;
background-color: blue;
}
.bg {
background: url('https://i.imgur.com/1vd6POs.png');
}
<div class='outer'>
<div class='bg'>
<div style='height: 29px;'>
this image is 13684px wide
</div>
</div>
</div>
This uses an image that is 16385px wide:
.outer {
width: 1000px;
background-color: blue;
}
.bg {
background: url('https://i.imgur.com/KV0uyia.png');
}
<div class='outer'>
<div class='bg'>
<div style='height: 29px;'>
This uses an image that is 16385px wide
</div>
</div>
</div>
Could this be a bug? I did a quick google search and could not find anything to indicate there is a hard limit on the dimensions of an image.
I simplified the structure and placed the bg image and color on the outer div. Seems to work:
.outer {
width: 1000px;
height: 28px;
background: url('https://i.imgur.com/DEV7k42.png');
background-color: skyblue;
}
<div class='outer'>
<div style='height:28px'>
See this nice background?
</div>
</div>
<div class='outer'>
<div style='height: 29px;'>
No background here
</div>
</div>
I'm looking for the classic page layout:
Header 800 Pixel, Navi (left) 200 Pixel, Content (right) 600 Pixel
Is it possible to put this in 3 DIVs only?
<div id="header">Header</div>
<div id="navi">Navi</div>
<div id="content">Content</div>
Because every layout I've found so far is built this way:
<div id="header">Header</div>
<div id="panel">
<div id="navi">Navi</div>
<div id="content">Content</div> <!-- position absolute left:200px -->
</div>
Thanks!
Roman
You surely can do it the way you told.
The thing is that code :
<div id="header">Header</div>
<div id="panel">
<div id="navi">Navi</div>
<div id="content">Content</div> <!-- position absolute left:200px -->
</div>
Will be easier to make and maintain. For example, you just need to specify a single margin-top on #panel to control margin between header and nav+content. With your code, you'll have to specify it twice, on #navi and on #content.
Don't think it's too complex-- just set the header to width 100%. Check it out: http://jsfiddle.net/ASy67/
<div id="header"></div>
<div id="left"></div>
<div id="right"></div>
And the CSS:
div {
height: 100px;
}
#header {
background: #f00;
width: 100%;
}
#left {
background: #0f0;
float: left;
width: 200px;
}
#right {
background: #f0f;
width: 600px;
}
With this example, the content does appear behind the left sidebar. You can fix it by either adding float: right; to the #right, or padding-left: 200px; to #right.
i need some help with centering a text below a rotated div.
I can place the text on the div, but not below and in center.
HTML:
<div id="contact_main2">
<div id="marker_align"
<div class="marker">
<p>Test</p>
</div>
<div class="marker">
</div>
<div class="marker">
</div>
</div>
</div>
The whole code:
http://jsfiddle.net/GVsxF/
Hope someone can help me out
Try separating out the <p> tag from inside the marker <div>:
HTML:
<div id="marker_align">
<!-- changed in EDIT -->
<div class="marker-group">
<div class="marker"></div>
<div class="marker"></div>
<div class="marker"></div>
</div>
<div class="marker-label">
<p>Test</p>
</div>
<div class="marker-label">
<p>Test</p>
</div>
<div class="marker-label">
<p>Test</p>
</div>
</div>
In your CSS, delete the .marker p rule and add this:
.marker-label {
display: inline-block;
vertical-align: top;
width: 45px;
height: 45px;
margin: 0px 50px 0px 20px;
}
.marker-label p {
text-align: center;
}
/* added in EDIT */
.marker-group {
clear: right;
}
JSFIDDLE
EDIT
Added .marker-group and clear:right to prevent text from moving on browser re sizing. This will need additional improvements if browser is re sized to smaller width. JSFiddle has been updated to reflect changes
I'm working on the "About Us" header on this page
Basically the little div there with the images and blue "About Us" block was an image, but for SEO purposes, I'm now replacing it with a structure that can use an <h1>...</h1> tag.
As you can see, the layout of the images and header tag works perfectly, but it's pushed the right column of the page in under the content.
I've checked, and double-checked and it looks like all floats are properly contained (unless I missed something) so I'm not sure how to fix this.
Can anyone tell me what I'm doing wrong here?
The HTML:
<div class="page_header">
<div>
<img src="http://sela.netgendns.co.za/wp-content/uploads/2012/11/sela-about-us-1.jpg">
<img src="http://sela.netgendns.co.za/wp-content/uploads/2012/11/sela-about-us-2.jpg" alt="" />
<img src="http://sela.netgendns.co.za/wp-content/uploads/2012/11/sela-about-us-3.jpg" alt="" />
<h1>About Us</h1>
</div>
</div>
The CSS:
/* Page Headers
----------------------------*/
.page_header div {
overflow: hidden;
min-width: 665px;
}
.page_header img, .page_header h1 {
float: left;
margin: 10px 10px 0 0;
}
.page_header img:nth-child(2) {
clear:right;
}
.page_header h1.about-us {
line-height: 90px;
background: #00f;
color: #fff;
padding: 0 42px;
}
Thanks in advance!
Hey Ortund Actually wrote a HTML markup in bit of improper way so you should write like this :-
<div id="main">
<div id="content">
<div id="sidebar-primary">
</div>
see the attached image its working fine through this method :-
That is because your <div id="sidebar-parimary"> should reside inside the <div id="main"> element.
Currently it is:
<div id="main">
<div id="content">...</div>
</div>
<div id="sidebar-primary">..</div>
it should be:
<div id="main">
<div id="content">...</div>
<div id="sidebar-primary">..</div>
</div>
So, i have some block, and this block must contains two divs, first div must be at left(attached to block), second at right(attached to block), and this two divs must coverage all block size.
<div id="block" style="width:800px">
<div id="left" style="float:left;width:50%;"> left </div>
<div id="right" style="float:right;width:50%;"> right</div>
</div>
Both divs have a width half of the parent's div.
But you have to be careful with borders as the width defines the width of the content (i.e. without borders). So if you use borders, the right box will be shown below the left, but still on the right side.
You would do it like this.
<div id="block">
<div id="left"></div>
<div id="right"></div>
</div>
The css would be
#block {
width:800px;
display:block //not sure if this line is required or not
}
#left {
width:400px;
float:left;
}
#right {
width:400px;
float:left;
}
There are many ways this could be done.... here's one:
<div style="position: relative; width: 100%; ">
<div style="position: absolute; left: 0; width: 50%; ">
<p>Content</p>
</div>
<div style="position: absolute; right: 0; width: 50%; ">
<p>Content</p>
</div>
</div>
Would something like this do what you want?
<div id="container">
<div id="leftside" style="width:100px; float:left">
Left Side
</div>
<div id="rightside" style="margin-left: 100px;">
Right Side
</div>
</div>
You may need to tweak the margin-left depending on the padding (and widths obviously). This is an easy way to get the two column approach (even if the two columns is a small box) :)
Or in the interests of separating the HTML and CSS, the same code represented again in two parts :) :
HTML
<div id="container">
<div id="leftside"></div>
<div id="rightside"></div>
</div>
CSS
#container:
{
/* insert any requires styles here :) */
}
#leftside:
{
width: 100px;
float: left;
}
#rightside:
{
margin-left: 100px;
}
Try this:
<div id="container">
<div id="left">
Some Content
</div>
<div id="right">
Some Content
</div>
</div>
CSS:
<style type="text/css">
#container
{
width:500px;
height:500px;
position:relative;
}
#left
{
width:250px;
height:250px;
position:absolute;
float:left;
}
#right
{
width:250px;
height:250px;
position:absolute;
float:right;
}
</style>
Adjust margin and width and you're done.
<div id="main">
<div id="left" style="float:left">
Content Left
</div>
<div id="right" style="float:right">
Content Right
</div>
</div>