I'm trying to replicate this layout with HTML/CSS:
http://reformrevolution.com/
I think I'm getting close to what I need, but I can't get rid of the vertical space between divs, wich should be equal to the horizontal gap, and I believe the divs are not "going down" in the right order.
Here is the code:
<body>
<div class="Main">
<div class="Diagrama1">
</div>
<div class="Diagrama2">
</div>
<div class="Diagrama3">
</div>
<div class="Diagrama4">
</div>
<div class="Diagrama1">
</div>
<div class="Diagrama3">
</div>
<div class="Diagrama3">
</div>
<div class="Diagrama2">
</div>
<div class="Diagrama1">
</div>
<div class="Diagrama2">
</div>
</div>
</body>
And the CSS:
#charset "UTF-8";
/* CSS Document */
.Main {
overflow:auto;
background-color:#CCC;
display:compact,
}
.Diagrama1 {
float:left;
width:180px;
height:260px;
background-color:#00F;
margin:15px;
}
.Diagrama2 {
float:left;
width:180px;
height:150px;
background-color:#F00;
margin:15px;
}
.Diagrama3 {
float:left;
width:180px;
height:320px;
background-color:#F0F;
margin:15px;
}
.Diagrama4 {
float:left;
width:180px;
height:200px;
background-color:#CF0;
margin:15px;
}
Any ideas?
The best to keep that dynamic without exploding your head with numbers and positioning is to use JQuery and the huge amount of plugins created for that kind of stuff:
http://mos.futurenet.com/pdf/computerarts/ART162_tut_dw2.pdf
http://www.chazzuka.com/blog/?p=47
some notes on your css
It's usually bad practice to mix, margins/paddings with widths/heights. Choose one system. Tip 4 from this article
I think you'll have better success using a grid system. They're a bit tough to start with, but they work great
If you don't want a grid, try this article that i find very useful in the css world
Since you have exact heights and widths for all the boxes and you seem to have an idea of the exact place they should go, you might be better off just using absolute positioning. You'll be able to control everything better that way.
Also, you should use ids for those <div>s, not classes, since they're only going to be used once.
Related
I want to know if possible, how to aling on a same line the containing 'Quality Analyst', 'Celestica Sdn Bhd' and 'MYR 2xxx' without changing HTML
html :
<div class="colMiddle resume-detail-item-middle">
<div class="pageRow resume-detail-position long-text-word">Quality Analyst</div>
<div class="pageRow resume-company-location long-text-word">Celestica (AMS) Sdn. Bhd.</div>
<div class="pageRow resume-detail-item-inner resume-margin">
<div class="resume-detail-item-inner-left resume-summary-heading resume-label">Monthly Salary</div>
<div class="resume-detail-item-inner-middle resume-summary-heading">MYR 2,515</div>
... missing html
In a more clearer way :
<div class="outter-containement">
<div class="inner-content-1">inner-content-1</div>
<div class="inner-content-2">inner-content-2</div>
<div class="inner-content-3">
<div class="sub-inner-content-3-1">sub-inner-content-3-1</div>
<div class="sub-inner-content-3-2">sub-inner-content-3-2</div>
</div>
</div>
How can i align on a single line inner-content-1, inner-content-2 and sub-inner-content-3-2
http://jsfiddle.net/K58S2/14/
I would recommend changing the HTML like so: http://jsfiddle.net/K58S2/11/
However you said without changing the HTML, so here is a CSS answer: http://jsfiddle.net/K58S2/7/
.resume-detail-position, .resume-company-location{
float:left;
width:auto;
clear:none;
margin-right:7px;
}
.resume-company-location{
margin-top:1px;
}
You can use display:inline; to each div that's needs to be in line.
A better bet would be throw them in spans, like so:
<span> CONTENT </span>
<span> CONTENT </span>
<span> CONTENT </span>
However, if you insist on aligning divs, something like this would suffice:
<style type="text/css">
.example { float:left; }
</style>
<div class="example"> CONTENT </div>
<div class="example"> CONTENT </div>
<div class="example"> CONTENT </div>
The way i undersood your question, you will have to add a margin-right: to the outter container, the same width reserved of the container for 'MYR 2xxx'. Then, position:absolute; right:0; your container for 'MYR 2xxx', it will fit in.
For making your dividers aligned on a row, you will have to study your css and re-design it, because actually, your dividers take 100% width and clear:both; so you will have to manage all this because even if you attempt to float:left the containers, it won't work.
So, a short answer, yes you can do it with only .css. But be prepared for tricky css re-writing/overwriting.
An other aproach would be javascript, by removing your 'MYR 2xxx' container and replacing it in the normal flow, after 'Celestica Sdn Bhd'. For that approach, study jquery .detatch(), .append(), .appendTo() and insertAfter().
It would look like jsFiddled here :
$('.resume-detail-item-inner-middle.resume-summary-heading').insertAfter($('.pageRow.resume-company-location.long-text-word') );
But still you will have to rework your css.
Try adding the style property display:inline-block; to all three classes
For example:
.colMiddle {
display: inline-block;
}
lets see this table:
<table border="1">
<tr><td>1111</td><td>42342324</td><td>ffffffff</td></tr>
<tr><td>11</td><td>442324</td><td>fdadasdfffffff</td></tr>
</table>
I need to do something like that but with DIV elements (sorry, boss wont allow tables). The real problem is, how to set same widths without direct setting it? I mean, if the first row is longer, then it will be actual width, otherwise the 2nd row's.
Preferably without javascript/jQuery hacking.
I'm assuming you want the "columns" to grow in width together with the content? dynamically setting the width of each div in the column?
I can't think of a way to do this with css, but some jiggery pokery with some divs might work.
<style>
.table{
border:1px solid black;
position:relative;
}
.column{
border:1px solid red;
display:inline-block;
}
.cell{
border:1px solid blue;
float:left;
clear:both;
}
</style>
<div class="table">
<div class="column">
<div class"cell">11</div>
<div class"cell">ffff</div>
</div>
<div class="column">
<div class"cell">1111</div>
<div class"cell">f</div>
</div>
<div class="column">
<div class"cell">1</div>
<div class"cell">fff</div>
</div>
</div>
I think you want to check out flexbox for modern browsers, with a JavaScript fallback for older browsers.
http://css-tricks.com/using-flexbox/
Flexbox is pretty awesome and is certainly part of the future of layout. The syntax has changed quite a bit over the past few years, hence the "Old" and "New" syntax. But if we weave together the old, new, and in-between syntaxes, we can get decent browser support. Especially for a simple and probably the most common use case: order-controlled grids
http://caniuse.com/flexbox shows pretty decent support.. IE10, FF, Chrome, Safari, and even Opera! *
*using combined "old and new" syntax
<div id="main_div">
<div id="nr1"> </div>
<div id="nr2"> </div>
</div>
and you use css to style : width ,height ,margin ,position of each div
I would like to implement a web page which contains tabs, the tabs are on top, bottom and left hand side of the page, like following:
Where the middle space is used for content change when user clicked a tab.
I am wondering What is the best way to implement this kind of layout?
I intend to use html table, but I am not sure if table cell can be CSS to a tab-like component? And how to do that?
Or is there any other way to implement this which is better than a table?
Do not use a table, as this is not tabular data.
Instead, you should consider using divs and styling with display:table; etc.
So, you would use
display:table;
display:table-cell;
display:table-column;
display:table-row;
Then you could use jQuery to make the divs clickable and to show() and hide() the content.
EDIT
Here is a simplified version to get you started:
HTML
<div id="page">
<div id="top_row">
<div class="top_row_cell" id="tab1">Tab 1</div>
<div class="top_row_cell" id="tab2">Tab 2</div>
<div class="top_row_cell">Tab 3</div>
</div>
<div id="middle_row">
<div class="middle_row_cell"></div>
<div class="middle_row_cell empty"></div>
<div class="middle_row_cell empty"></div>
</div>
<div class="content" id="content1">This is the content</div>
<div class="content hidden" id="content2">THIS IS THE OTHER CONTENT</div>
</div>
CSS
div#page{
display:table;
border-collapse:collapse;
width:500px;
position:relative;
}
div#top_row, div#middle_row{
display:table-row;
}
div.top_row_cell, div.middle_row_cell{
display:table-cell;
width:160px;
height:50px;
border:1px solid red;
border-collapse:collapse;
text-align:center;
}
div.middle_row_cell.empty{
border:none;
}
div.content{
display:block;
position:absolute;
top:52px;
left:166px;
background:red;
color:white;
width:334px;
height:51px;
}
div.hidden{
display:none;
}
JS
$('#tab1').click(function(){
$('.content').addClass('hidden');
$('#content1').removeClass('hidden');
});
$('#tab2').click(function(){
$('.content').addClass('hidden');
$('#content2').removeClass('hidden');
});
Working Example: http://jsfiddle.net/jasongennaro/9W7NE/
NOTE:
the jQuery is super simplified and is just for show. More robust logic is needed
I only coded clicks for tabs 1 and 2
You could use tables. Check out http://www.ssi-developer.net/css/menu-rollover-effect_table.shtml for example.
But I would prefer just using <div>'s and position them nicely using CSS.
I have stubbed out an example for you that doesn't use a table.
It doesn't look very nice because I've added coloured borders to show you where each part is.
http://jsfiddle.net/Sohnee/Hvx2x/
may be you could start with something like this
http://jsfiddle.net/xVDtW/ a css table, I just don't have time now to solve the right margin thing. if you have time I can do this in a few hours or so, just let me know
Does anyone know of a tutorial on how to do this, or does anyone have a little example?
example: http://hazelmade.com/projects.html
The 'lifted corners' example on this CSS drop-shadows without images demo page shows it's possible without using images. It relies on CSS3 support, specifically box-shadow and transform but this is to be expected from a pure CSS solution.
Full details of the technique can be found in the main article by Nicolas Gallagher.
The shadow on that site is a custom made image tailored to the specific width of those elements.
If you wanted to follow a similar technique that they did, you could just add a child image absolutely positioned below the div...
jsfiddle example: http://jsfiddle.net/gbFNk/
HTML:
<div id="example">
content here...
<img id="shadow" src="http://hazelmade.com/images/drop_shadow.png" />
</div>
css:
#example {
width:796px; //your tailor made shadow needs to be this long
height:100px;
position:relative;
background:grey;
}
#shadow {
position:absolute;
bottom:-15px; //this is the height of the custom image.
}
Alternatively, if you need a drop shadow like that with varying width you make 2 shadows (one for each corner) and do something like the following:
HTML:
<div id="example">
content here...
<div id="dropshadow">
<img class="left_shadow" src="leftshadow.png" />
<img class="right_shadow" src="rightshadow.png" />
<div style="clear:both"></div>
</div>
</div>
css:
#example {
width:796px;
height:100px;
position:relative;
background:grey;
}
#dropshadow {
width:796px; //needs to be the same width as the parent div
position:absolute;
bottom:-15px; //this still needs to be the height of the custom images.
}
#dropshadow img.left_shadow {
float:left;
}
#dropshadow img.right_shadow {
float:right;
}
I have the following:
<div style="width:100%;">
<table>
<tr>
<td style="width:30px;">hi</td>
<td style="width:40px;">hi</td>
<td id="lotoftext" style="width:auto;white-space:nowrap;overflow:hidden;">LOTS Of text in here, LOTS</td>
<td style="width:25px;">hi</td>
</tr>
</table>
</div>
What I want to happen is for this table to grow to 100% possible of the outer DIV. Problem is, that the table, with a lot of text inside, ID='lotoftext' is causing the table to grow to a width bigger than the outer div which then breaks the page.
Any ideas? thanks
can you use max-width? You might need to put a div inside that specific TD and give that the max-width
Unless it is tabular data, you should build it using DIVs and CSS. You should be able to achieve what you want with less of a headache this way.
AnApprentice, to achieve this layout using DIV's and CSS (alternate option to using tables) you could approach the situation like this:
CSS:
#body_container{
max-width:700px;
}
.data-container{
background-color:#ccc;
zoom:1;
}
.data-content_a{
width:30px;
float:left;
background-color:#3FF;
}
.data-content_b{
width:40px;
float:left;
background-color:#CF0;
}
.data-content_c{
width:25px;
float:right;
background-color:#9FF;
}
.data-content_lotsoftext{
float:left;
background-color:#FCF;
margin:-20px 26px 0 71px;
clear:left;
display:inline;
}
.clear{
clear:both;
padding:0;
margin:0;
}
HTML:
<div id="body_container">
<div class="data-container">
<div class="data-content_c">4</div>
<div class="data-content_a">1</div>
<div class="data-content_b">2</div>
<div class="data-content_lotsoftext">lots of text goes here!</div>
<div class="clear"></div>
</div>
</div>
The #body_container (or outter container) can to set to any width or no width. The left margin on the .data-content_lotsoftext is the combined width of .data-content_a and .data-content_b (70px + 1px to be on the safe side) and the right margin on .data-content_lotsoftext is the width of data-content_c (25px + 1px to be on the safe side).
By not assigning a width to .data-content_lotsoftext it will automatically stretch to be full width. display:inline helps it sit better in ie6.
Tested in Firefox, Chrome, IE8, IE7 and IE6 (IE6 and 7 are a little glitchy - if anyone could help refine the CSS to get it to work perfectly in IE6 and 7, please shout out!)
Hope this helps.
Dan
The scenario you are describing is simply not suited for a table. A table should only be used when displaying tabular data. You should be using some other kind of html elements to build your structure and style it with CSS.