i want to create this effect using css, can you see the big box with the title and the blog post, and little box with the date on it and the number of comments on it. its been puzzling me, an example would be great thanks guys :))
In the HTML just create two separate divs, one for the details and the other for the content.
<div class="post">
<div class="post_details">
<div class="post_date">
<div class="post_day">26</div>
<div class="post_month">NOV/10</div>
</div>
<div class="post_comments">2</div>
</div>
<div class="post_text">
<div class="post_title">PASSION SUCCESS AND MONEY</div>
<div class="post_title">A lot of people...</div>
</div>
</div>
With the CSS you could float them both left or absolute position the details box off to the side.
.post { clear:both; width:600px; }
.post_details { float:left; width:53px; height:93px; background:#fff; }
.post_date { width:48px; background:#ddd; }
.post_month { width:48px; background:#666; }
.post_text { float:left; width:545px; background:#fff; }
its pretty easy with some css3:
http://jsfiddle.net/meo/J9SjQ/
don't quite understand what's so puzzleling but if it's how the divs are arranged there's 100 ways it could be done one way would be something like
http://img715.imageshack.us/img715/1650/exampleai.png
if it's about how to get rounded corners it would be like jakub mentioned
here is a sample
http://www.jsfiddle.net/KKpPQ/3/
The main trick would be in using the CSS3 border-radius property. That makes the boxes round. You'll have to use vendor prefixes to get this working in current browsers:
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
Related
Okay, so, on my website, I have three panels: cont1, cont2, and cont3. The following are their CSS definitions:
#cont1 { width:35%; position:fixed; background:#2583FE; right:0px; overflow:hidden; float:right; border:1px solid #0961D3; border-left:0px solid black; height:100%;}
#cont2 { height:69%; width:100%; overflow:auto;}
#cont3 { min-height:75px; width:100%; position:relative; display:block;}
Now, if I implement it in the following way, only a vertical scrollbar appears and I can scroll my content as I wish:
<div id="cont1">
<div id="cont3">First element</div>
<div id="cont3">Second element</div>
<div id="cont3">Third Element</div>
<!--And so on-->
</div>
However, if I implement it in this way (the way that I ultimately want it to work), horizontal scrollbars appear in cont2 for no apparent reason:
<div id="cont1">
<div id="cont2">
<div id="cont3">First element</div>
<div id="cont3">Second element</div>
<div id="cont3">Third Element</div>
<!--And so on-->
</div>
</div>
Usually, I would just put overflow-x:hidden, but I'm trying to make my site as cross platform as possible and I know overflow-x is a CSS3 property (not supported in IE8 or below). Could anyone offer insight as to what might be happening? Thank you!
.cont{
height: 30px;/**/
border-color: black;
/*position: relative;*/
position: fixed;
margin-left: 0px;
margin-right: 0px;
padding-left: 0px;
padding-right: 0px;
width: 100%;
border: none;
}
To begin, you must use the #id once, there can be only one #id. Uses .classes if you want to put several.
Then I do not understand I do not have this problem on jsFiddle, I wonder if this is the edge that is used in #cont1 that you created this bar.
You have a page to show us the problem live?
I had created the following divs and its definition.
<div class="serach-container">
<div class="search-keys-container">
<div class="search-type"> </div>
<div class="basic-search-keys-container"> </div>
<div class="advance-search-keys-container"></div>
</div>
<div class="search-result-container"></div>
</div>
.search-type{
height:20px;
width:auto;
margin:5px 10px;
background-color:#4000A0;
}
jsfiddle
But unfortunately the top-margin of class search type goes upwards. I tried by adjusting the margins so and so. But no result is found. Without margins it is ok. But I want the margins.
edit:
I dont know why top-margin is not working. Anyway an alternative solution is put another div say error-correct before the search-type div ie
<div class="serach-container">
<div class="search-keys-container">
<div class="error-correct"></div>
<div class="search-type">/div>
<div class="basic-search-keys-container"></div>
<div class="advance-search-keys-container"></div>
</div>
<div class="search-result-container">
</div>
</div>
.search-type{
height:20px;
width:auto;
margin:0px 10px 5px 10px;
background-color:#4000A0;
}
.error-correct{
width:100%;
height:5px;
}
jsfiddle
Thanks all my friends for your great help.
DEMO
Try change that class like here:
.search-type{
height:50px;
width:90%;
margin:0px auto;
background-color:yellow;
}
Try this and let me know if this is what you wanted.
.search-type{
height:20px;
width:auto;
margin:5px 10px 0 10px;
background-color:#4000A0;
}
That makes it come down and still keeps your margins.
As I said in my comment, you are being a little bit too strict in your size definitions...
But to solve your problem, you should do this:
.search-result-container{
height:100%;
width:100%;
background-color: #0000FF;
padding-top: 5px;
}
.search-type{
height:20px;
width:auto;
margin: 0 10px 5px 10px;
background-color:#4000A0;
}
To me, this looks like a bug or something, as margin isn't being applied against the parent, but the body tag.
Also, you have a minor typo in the first container serach
Try adding padding:0.01px to .search-keys-container. It won't have any visual effect, but it will cause margins to not collapse like this.
http://oi49.tinypic.com/2qithg4.jpg (example is a jpg img)
As You can see in the example; the boxes (after floating) gets a white space under it in order to make a room for an equal row of divs
but I wanna float all of 'em to fill the gaps.. any suggestions?
That's what I wanna do (example is a jpg img)
http://oi47.tinypic.com/2nixr2x.jpg
Thanks in advance.
edit// Showing Alex some code :)
HTML
<div id="content">
<div id="featured"></div>
<div class="box"></div>
<div class="box"></div>
<div style="width:310px; height:18px; margin:0 0 10px; padding:98px 0; text-align:center; float:left; display: block; background: #ffffcc;">Ad Space</div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
CSS
#content { }
#featured { width:630px; float:right; height:214px; margin:0 10px 10px 0; }
.box { float:left; width:310px; margin:0 10px 10px 0; height:400px; }
A similar question had been asked before: Vertical alignment of float:left div's, though no proper solutions were presented. As far as I guess doing it with pure CSS for a dynamic content would be difficult, so I would suggest to use jQuery Masonry for this task.
For a pure CSS approach, I guess it can be done using CSS3 columns as explained here.
How can I create a 3 column CSS layout, with the left and right edges flush with edges of parent element? I want to be able to do this within a liquid layout, so no fixed widths.
This sounds like it should be easy, but the best thing I can come up with is quite a hack.
<style>
.c3 { display:block; text-align:center; }
.c3 span { display: inline-block; width:20%; text-align:left; vertical-align:top; }
.c3 .left { float:left; }
.c3 .right { float:right; }
</style>
...
<span class="c3">
<span class="left"> ...
</span>
<span class="center"> ...
</span>
<span class="right"> ...
</span>
</span>
You can see it here, this works okay (in my browser at least) but it just feels wrong. Is there a better way to do this?
Since there seems to be some confusion about what I'm trying to do, here it is in context. I run into this fairly often, where I already have a page layout and I want three columns within that layout. I want the three columns to be "fully justified," and I want things to be liquid, because even thought the page has a fixed layout, there's usually a facebook app or something also and I like to reuse as much as possible. Here's the latest example of where I've run into this (bottom of the page).
I'm not worried about SEO, the content is usually in 1-2-3 order of importance. I don't really care if they're all the same length. I'd like to not use a ton of markup if possible. My main goal is to have the left and right edges flush with the parent element, and and equal amount of space between each column.
I could try to write a new layout for you or fix the one you started, but I feel like I should just point you to a good source for the layout you're after:
The Perfect 3 Column Liquid Layout (Percentage widths)
No CSS hacks. SEO friendly. No Images. No JavaScript. Cross-browser & iPhone compatible.
http://matthewjamestaylor.com/blog/perfect-3-column.htm
I have used this resource for many years and it's rock solid, even in IE6. Make sure to click around to see all the examples, and read the article so you understand how it works.
This is an image of the basic layout structure (not the actual output):
It uses some crafty relative positioning and SEO-friendly 2-1-3 source order. Full height faux columns, fixed-width or fluid columns...
I cannot recommend this resource enough, I hope you enjoy it.
OK, sounds like you just want a lightweight alternative to your already-working solution.
Per our discussion in chat, I'm posting the mini-template I created:
<div class="wrapper">
<div>1</div>
<div>2</div>
<div class="last">3</div> <!-- or use CSS3 :last selector -->
</div>
.wrapper {
width:500px; /* any width OK */
float:left;
}
.wrapper div {
width:30.65%; /* not perfect, but close */
padding:1%;
margin:0 0 0 1%;
float:left;
}
.wrapper div:first-child { margin:0; }
/* make up for imperfect 1/3 width rounding */
.last { float:right;margin:0 }
Demo: http://jsfiddle.net/bH8vY/2/
Best of luck.
As far as I can tell, the solution I gave in the question is the best answer for this. I haven't found any other suggestions since posting this that would achieve what I want.
I'll reiterate it here so the question can be closed.
<style>
.c3 { display:block; text-align:center; }
.c3 span { display: inline-block; width:20%; text-align:left; vertical-align:top; }
.c3 .left { float:left; }
.c3 .right { float:right; }
</style>
...
<span class="c3">
<span class="left"> ...
</span>
<span class="center"> ...
</span>
<span class="right"> ...
</span>
</span>
This might be what you want/help you; I've made a layout that uses css to emulate dynamic table behaviour [using divs]. It works in Chrome, Firefox and IE>7.
DEMO, have a go at resizing the window. That middle bit is what you want, I think.
Have a fiddle with it. Uncomment the border css line to see whats going on.
Code:
<div class="view" style="height:100%; width:100%">
<div class="north">
n
</div>
<div class="middle">
<div class="west">
w
</div>
<div class="centre">
c
</div>
<div class="east">
e
</div>
</div>
<div class="south">
s
</div>
</div>
html, body {
height : 100%;
margin : 0;
}
.view,
.view > .middle {
display : table;
}
.view > .north,
.view > .south {
height : 1px;
display : table-row;
}
.view > .north { vertical-align : top; }
.view > .south { vertical-align : bottom; }
.view > .middle > div {
display : table-cell;
}
.view > .west,
.view > .east {
width : 1px;
}
/*div { border : 1px solid black; }*/
Simple markup, no JS, and dynamic layout.
I typed this
#center-1, #center-2, #center-2, #center-3, #center-4,
#center-5, #center-6, #center-7, #center-8 { float: left; width:360px; }
HTML:
<div id="centerColumn">
<div id="center-1"></div>
<div id="center-2"></div>
<div id="center-3"></div>
<div id="center-4"></div>
<div id="center-5"></div>
<div id="center-6"></div>
<div id="center-7"></div>
<div id="center-8"></div>
</div>
and it doesn't work, why?
Guessing from your report that it "doesn't work", you're probably just not seeing the divs because there is no content, height, or padding. Add height:10px; or something, and some background - they will show up.
By the way, there's a slightly easier way to write this selector in your case:
/* Select all <div>s in the #centerColumn */
#centerColumn div {
float: left;
width:360px;
/* Test to make divs appear */
background:#f00;
height:10px;
margin:1px;
}
your divs do not have any content, that's why they are not visible. to make them visible add at least a into them, or add height/min-height to the css rule