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.
Related
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 am new in HTML & CSS. I learned web design using table tags. Now i am learning table-less design using div tags. I am now converting my old designed website to new one using div tags. I am having a problem in my design. I am posting table tag which is working fine and new code in div tag which is not accurate as old one. Kindly tell me where I am having mistake.
New design which is working fine:
Visit http://jsfiddle.net/rizwan1969/k4111Lzj/1/
New design which is not accurate as old:
Visit http://jsfiddle.net/rizwan1969/8vpyk815/
How can I achieve the same look without using tables?
you're sorta close, when you're using divs, you have to be careful of what you put on the outside divs, because they also hold true for the inner divs, so what you want is something like this:
#right_col {
width:260px;
/* padding:5px; */
background-color:#999900;
float:left;
line-height:18px;
font-size:12px; color:#FFFFFF; text-align:justify
}
#heading
{
font-size:16px;
color:#FFFFFF;
padding:10px;
background-color:#030;
display:block;
}
.content {
padding:7px;
}
and add a content div to separate the header from the text:
<div id="right_col">
<strong id="heading">QUAID'S MESSAGE</strong>
<div class="content">
<img src="images/quaid-2.jpg" align="left" style="margin-right:5px; border: 1px solid #006600; "/> "Pakistan is proud of her youth, particularly the students, who are nation builders of tomorrow. They must fully equip themselves by discipline, education, and training for the arduous task lying ahead of them."
</div>
</div>
heres the fiddle: http://jsfiddle.net/8vpyk815/2/
you also should be careful of all the random paddings cause they can make working with elements inside other elements difficult
I have created a simple navigation bar using html and css. The issue with it is when zoomed in, the structure changes as not all the links can fit in one line. Here is the jsfiddle: http://jsfiddle.net/HamishT/b3Lw4/
Here is the code in case you are unable to access jsfiddle:
<div id="navBar">
<ul>
<li class="nav">HOME</li>
<li class="nav">PRODUCTS</li>
<li class="nav">SERVICES</li>
<li class="nav">CONTACT US</li>
<li class="nav" id="order">ORDER</li>
</ul>
</div>
#navBar {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color:#5a5a5a;
font-size:12px;
font-weight:bold;
background-color:#eeeeee;
padding:0.1em;
box-shadow: 5px 5px 5px #888888;
}
.nav {
list-style:none;
display:inline;
border-left:3px solid;
}
.nav a {
text-decoration:none;
color:inherit;
padding: 0 20px 5px 20px;
}
.nav a:hover{
border-bottom:3px solid;
}
#order {
float:right;
color:#E65C00;
}
I have tried various ways, none to any success. One way I am wondering about is if I can edit it so that it will flow off the page if it doesn't fit (so only part of the width of the navbar is seen at one time), but I can't seem to work my head around it. Another way I think would be to detect the screen width/zoom and change the structure completely if the available space is too small, but I am unsure if this is possible (I've looked into it, but have not found any that seem to work the way I've described.
Just in case it helps: one thing I have spotted is the floats may be preventing me from being able to fix this.
Are there any ways to fix this and if so, how? I don't mind how it works (eg. flows off the screen or zooms the whole navbar out) so long as it does work. I've been stuck on this for three days now (I'm still new to it all) so any help whatsoever would be greatly appreciated.
The problem is caused because float is considering a 100% width for the navbar. Add a width in pixels to fix the size of the navbar, like this
#navBar {
width: 550px;
}
Although this will cause elements to flow out of current window (and hence bringing the scrollbar). Your best bet in such a case is make stuff responsive and create different styles for different widths.
When you zoom into the page, the size of the viewport is decreasing.
That means you can use media queries to create proper breakpoints:
#media screen and (max-width:600px) {
#navBar {
font-size:5px;
}
}
The 600px mark works well in my test case. But you can't reproduce it via jsfiddle. 5px aren't too small since you're zoomed in. The best approach however would be using em values instead of px since they allow to change the reference font-size: body { font-size:0.9em; }. This will be inherited by any other element.
I have found a solution (it may not be of use to everyone who sees this, but is one alternative solution to the issue). I put the li element that floats right in a separate div so that when zoomed in it will not drop below the others or overlap. Instead the other li elements will drop down before they overlap, whilst still working properly.
From the HTML, the #order element (float right) is in a div before the other li elements put into a new div.
<div id="navBar">
<div>
<ul>
<li class="nav" id="order">ORDER</li>
</ul>
</div>
<div>
<ul>
<li class="nav">HOME</li>
<li class="nav">PRODUCTS</li>
<li class="nav">SERVICES</li>
<li class="nav">CONTACT US</li>
</ul>
</div>
</div>
Here's a working jsfiddle to show what I mean: http://jsfiddle.net/HamishT/3pd5Z/#base
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.
I ran into a problem when trying to style a home page that I am working on. Here is very simple version of what I am doing. http://cdpn.io/kgLzD
I am using wordpress and have the_loop within a div which outputs 8 post with a class of "post". The problem I am having is styling each post like the picture below because they are divs and have no control over choosing which "post" to style? If I was using a list then I could choose which item to style. Any help/tips/advice to achieving the styles below would be greatly appreciated.
This is where I currently am and as you can see all I basically need are the borders. How would you go about achieving this?
You could use css nth-of-type() selector - since you are floating left and have the div's two-up, using nth-of-type(2n) would select all of divs on in the right column: (see codepen here: http://cdpn.io/Iacvk)
section.home-grid {
width:440px;
}
.post {
border-top:1px solid #777;
width: 200px;
float:left;
padding: 10px;
}
.post p {
padding:.5em 1em;
width:90%;
margin:0 auto;
text-align:justify;
}
.post:nth-of-type(2n) p {
border-left:2px dotted #777;
}
Not entirely sure what you're looking for, but perhaps using an nth-child css selector on the posts will help.
http://css-tricks.com/how-nth-child-works/