I've a little problem with arranging nav/div on a website. Google didn't revealed me a solution, but to be honest, I didn't really know how to search for it...
What I'd like to have at the end:
On the left side, a <nav> (data selection) is visible. On the right side, several <div> (graphs) are shown like a table with 2 columns and infinite lines, resp. max. two graphs side by side. The field of the <nav> shall be independently which means no <div> from the right side should be below of the <nav>.
How I have to implement the css file?
If you click this hyperlink, you'll see the current situation of the arrangement:
Screenshot of the nav and the divs
Later on: the goal is to realize a Drag&Drop behavior as described here: HTML5 Drag&Drop. It should be possible, to drag the data from the <nav> and to drop it into any of the graph-<div> for visualization.
Thanks!
In your CSS try:
display: inline-block;
CSS
nav {
width:30%; //<----Occupying 30% of total width, change it as required
float:left;
}
#charts-wrapper {
float:left;
width:68%; //<----Occupying 68% of total width and occurs on right of nav, change it as required
margin-left:1%;
margin-top:10px;
}
.charts {
float: left;
width:32%; //<-----Equal area within charts
margin-left:0.5%;
}
Demo Fiddle
From what i understand from reading your question you would like to have a navigation bar on the left and another container with images/graphs on the right?
Here is a js fiddle I put together quick demonstrating floats: http://jsfiddle.net/HzS3m/1/
HTML:
<body>
<nav id="nav">
HTML
CSS
JavaScript
jQuery
</nav>
<div id="graphs">
<img src="#">
<img src="#">
<img src="#">
</div>
</body>
CSS:
nav{
width:20%;
height:200px;
background-color:#f00;
float:left;
}
#graphs{
width:80%;
overflow:auto;
background-color:#ff0;
float:right;
text-align:center;
}
img{
width:300px;
height:90px;
border:1px solid #000;
}
Floats are a good way to align html/div elements side by side.
Hope this is of some help to you.
Related
Good day,
Could someone please assist me with making HTML table match the height and width of jquery-mobile listview? Attached is the snapshot of the goal I am trying to acheive.
I first tried using data-split-icon approach, but abandoned it because of challenge moving icon to the left and it created multiple clickable segments which I don't want.
I am now trying to fit basic HTML table within the dimensions of jquery-mobile listview. My first attempt was to use standard HTML table and style it but table didn't stretch. My second attempt is to use CSS table so use ul element as table, li as table-row:
<ul data-role="listview" data-theme="d" data-icon="false" class="listviewborder customul" style="margin-right:3px;margin-left:3px;">
<li class="customli">
<div class="div-table-col" align="center">Image</div>
<div class="div-table-col">Date1</div>
<div class="div-table-col">Date2</div>
</li>
</ul>
and CSS:
ul.customul
{
display: table;
border:1px solid black;
width:auto;
}
li.customli
{
display: table-row;
display:table-row;
width:auto;
clear:both;
}
.div-table-col
{
float:left;
display:table-column;
width:auto;
border:1px solid black;
}
I researched similar questions and came up with this approach, but it's still not working. I think I'm on the right track but the table still not matching the dimensions of the listview. Could somebody please suggest what I am missing or what else needs to be done here to make it work?
Thank you,
Victor.
I am creating a web page that needs to be responsive.
Here is an image of it:
Here is the HTML:
<div class="smallBoxes">
<div class="leftHomeBox">
<a class="Description" id="Desc_1">WHEN?</a>
</div>
</div>
and the CSS:
.smallBoxes{
display:block;
margin-left:25%;
margin-right:20%;
width:auto;
}
.leftHomeBox{
width:100%;
float:left;
margin-bottom:10px;
padding:10px;
padding-bottom:0;
height:65px;
}
.Description{
border:5px solid #ffffff;
padding:5px;
}
I am trying to keep the "when" box in the centre of the div, for all screen sizes. AS things are now, both margins will change, but at different rates eg they do not stay consistent relative to each other and so the "when" box doe s not stay central.
I have looked at other websites and have not been able to find a working example.
I have tried using
margin-left:20%;
margin-right:20%;
width:auto;
but this does not work. I have been working on this all day and I have read all I can find but I cannot seem to get this to work. I have tried every possible thing I can think of.
Surely this is something that is required often and cannot be very difficult to achieve, but I am not able to find a clear answer to how to achieve this, or what I am doing wrong.
If someone could provide a fiddle of a working solution I would be very grateful.
use
CSS
.leftHomeBox{
text-align:center
}
DEMO
.Description
{
display:block;
margin-left:auto;
margin-right:auto;
}
This should be work.
You can apply a text-align: center on an <a> tag.
.leftHomeBox{
text-align:center
}
It will center the link without using margins
I have a outer container, containing two links. They are aligning horizontally. The first one contains a div with background image and the second one is just text. The problem is the whole outer container acts as the first anchor, links to the first url while it is supposed to link nothing. Here's the simplified layout
<div id="links-block">
<div id="edit-quote-button"></div>
Preview the PDF
</div>
Here is the example JSFiddle. I am just wonder how to structure this set of elements, to prevent this problem.
Define this css
a{display:inline-block;vertical-align: top;}
#preview-pdf-link {
float: right;
margin-top: -30px; // remove this line
color: #999999;
}
Demo
here is your new html structure
<div id="links-block">
<a class="g-link" href="http://www.google.com"><div id="edit-quote-button"></div></a>
<a class="y-link" href="http://www.yahoo.com" id="preview-pdf-link">Preview the PDF</a>
<div class="clear"></div>
</div>
add this css to your css file
.g-link{
display:block;
float:left;
}
.y-link{
display:block;
}
.clear{
clear:both;
height:0px;
width:0px;
display:block;
}
hope this will work for you
It's not a great idea to have a div inside the a like that (invalid in pre-HTML5). If you set the edit-quote-button div to display: inline-block it will work better, though. Then remove the negative top margin on the Yahoo link.
div.horizontalRule {
clear:both;
width:100%;
background-color:#d1d1d1;
height:1px;
margin-top:5px;
margin-bottom:5px;
}
This is what I am doing now but the Margins seem to have no effect! I am not sure why but the text above and below this "horizontal rule" touch the horizontal rule with no margins. Is there a way to implement margins in this scenario?
http://jsfiddle.net/fwqSH/
Problem is your not closing the div:
You cannot close a div as you did there must be a closing tag as so:
<div></div>
and not
<div />
corrected jsfiddle:
http://jsfiddle.net/fwqSH/1/
EDIT
Final solution was to add a min-height of 1px because an empty div sometimes do weird things.
Final CSS:
div.horizontalRule {
min-height: 1px;
clear:both; width:100%;
border-bottom:1px solid #d1d1d1;
height:1px; padding-top:5px;
margin-top:5px;
margin-bottom:5px;
}
The reason the text below it butts right up against the line is because you didn't properly close the div. The browser sees <div /> and thinks that the paragraph after that is part of the div. So change your HTML to something like this:
<div class="horizontalRule" runat="server"></div>
If this is a horizontal rule, I recommend adding your class to the horizontal rule tag, <hr class="horizontalRule" /> This may help resolve some div interaction glitches.
We have a page that ordinarily has two elements arranged side-by-side. Despite exploring a few angles for this, we can't seem to make it work. We're not averse to using JavaScript, it just feels that a CSS based solution ought to be possible. Is there a way of using just CSS (and possibly extra markup if necessary) to make element2 centre when it appears on its own?
Examples
Sometimes we have two elements, side by side.
<div id="container">
<div id="element1">content</div>
<div id="element2">content</div>
</div>
But in some conditions only element2 is on the page e.g.:
<div id="container">
<div id="element2">content</div>
</div>
There is a pure css solution, however it won't work in versions of IE less than 7 because it won't understand the sibling selector (+), for that you may want to consider a JavaScript solution (perhaps Dean Edwards' IE7). Anyway, some example css:
div#element2{
width:100px;
margin:0 auto;
}
div#element1{
width:50px;
float:left;
}
div#element1 + div#element2{
width:50px;
float:left;
margin:0;
}
The key is the line div#element1 + div#element2 which selects div#element2 given that it directly follows div#element1.
I think Phil was on the right track, but you should try using the CSS last-child pseudo-class. As far as I know, first-child and last-child are the only way in CSS to approximate an if construct.
div#container div#element2:last-child {
width:100px;
margin:0 auto;
}
div#element1{
width:50px;
float:left;
}
div##element2{
width:50px;
float:left;
margin:0;
}
The CSS above basically says "if element2 is the last child element of its parent use this set of styles, otherwise use these other styles.
This should even work in IE7.
A strict CSS2 solution:
#container {
text-align:center;
}
#element1, #element2 {
display:inline-block;
}
The inner elements should layout like inline text inside #container, but remain blocks inside.
This is standard CSS, but getting browser support might take some trickery.
it's not cool solution becouse tables are not "trendy" anymore but it solves the problem completly (under all ie)
<style>
#container {
margin:0 auto;
width:100px;
}
#container table{
width: 100%;
text-align:center;
}
#element1{
background-color:#0000ff;
}
#element2 {
background-color: #ff0000;
}
</style>
<div id=container>
<table cellspacing=0 cellpadding=0>
<tr>
<td id="element1">content</td>
<td id="element2">content</td>
</tr>
</table>
</div>