I would like to create a vertical splitted site structure using two divs:
<div id="d1" style="width:100px;float:left"></div>
<div id="d2" style="width:auto;float:left"></div>
My intention is to have d2 next to d1 in a horizontal align structure (same line).
What i get is not this.
In fact using that code, d2 does not take the remaining space, but collapses to the min width.
if I use
<div id="d1" style="width:100px;float:left"></div>
<div id="d2" style="width:100%;float:left"></div>
WRONG because d2 goes down and takes all the space (but both divs are in different lines).
HOW TO REACH MY OBJECTIVE? Is there a design pattern for this problem????
Thanks.
OK THIS SHOULD BE THE RIGHT QUESTION...
Hello everyone. I would like to create a vertical splitted site structure using two divs:
<div id="d1" style="width:100px;float:left"></div>
<div id="d2" style="width:auto;float:left"></div>
My intention is to have d2 next to d1 in a horizontal align structure (same line). What i get is not this. In fact using that code, d2 does not take the remaining space, but collapses to the min width.
if I use
<div id="d1" style="width:100px;float:left"></div>
<div id="d2" style="width:100%;float:left"></div>
WRONG because d2 goes down and takes all the space (but both divs are in different lines).
HOW TO REACH MY OBJECTIVE? Is there a design pattern for this problem????
Thanks.
U might want to use a table like this:
<table width="100%" style="table-layout:fixed">
<tbody>
<tr>
<td width="100px"> </td>
<td width="100%"> </td>
</tr>
</tbody>
</table>
CSS APPROACH:
<div style="width:100%; position:relative">
<div style="width:100px;float:left"> </div>
<div style="width:100%;position:absolute;padding-left:100px;left:0;top:0"> </div>
</div>
Related
I can't seem to work out why my columns are overlapping in bootstrap
I've checked that my columns add up to 12
After "row" class there is always a column class
I have added my full code in a fiddle:
https://jsfiddle.net/exubnw4a/
As you can see , a lot of these values are getitng pushed together, when it should be 4 separate tables
Here is a shortened down version of my code:
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-3">
<h1>LH5</h1>
<table class="table">
table contents here
</table>
</div>
<div class="col-md-3">
<h1>LH5</h1>
<table class="table">
table contents here
</table>
</div>
<div class="col-md-3">
<h1>LH5</h1>
<table class="table">
table contents here
</table>
</div>
<div class="col-md-3">
<h1>LH5</h1>
<table class="table">
table contents here
</table>
</div>
</div>
</div>
</div>
Your table contains more rows which take more width than the 25% of col-md-3 class. You can make use of table-responsive class in such cases.
SAMPLE
Starting at md (medium, around 992 pixels), the main 4 divs are shrinking to 25% due to class="col-md-3". Remove that and it will go back to desired 100% at all sizes. See this screenshot showing how removing that causes it to work for the table on which it is removed:
If you want to place 4 elements in 1 row, make sure that they are all inside the same Bootstrap "row" class. In your case, you have to put all your tables in one row instead of creating a new row for each table.
As the enclosed image suggests, Three browsers are rendering the same content very differently.
Chrome Version 24.0.1312.57 (bottom) is collapsing images and computing significantly smaller sizes earlier than 2 counterparts. Amazing how Chrome just re-sizes the images and creates a half-blank screen although a sticky navigation bar fills the entire screen (as does a bottom background image)
Safari 5.1.10 (6534.59.10) (middle) handles a smaller viewport, but in sort order, with a smaller viewport, computes new image sizes even smaller than Chrome.
Firefox 29.0.1 degrades nicely based on viewport size, but does not re-compute the images.
Am using Foundation (the minified file) version 5
Source HTML
<div class="row">
<table cellpadding='0' cellspacing='0' border='0' align='center'>
<tr align='center'>
<td class="modelloframe">
<div id="thumbwrapper">
<img alt="Base_3210" src="/uploads/catalog/image/8/base_3210.jpg" />
<div class="text" id="thumbwrapper">3210F</div>
</div>
</td>
How can these values be computed so wildly differently? And why does Chrome really behave oddly
If you're using Foundation, you are going to need to follow their structure. After declaring your row, you need to declare your grid/columns. Let your grid be the parent container and you shouldn't need to mess with the position or width of your table.
<div class="row">
<div class="large-12 columns">
<table cellpadding='0' cellspacing='0' border='0' align='center'>
<tr align='center'>
<td class="modelloframe">
<div id="thumbwrapper">
<img alt="Base_3210" src="/uploads/catalog/image/8/base_3210.jpg" />
<div class="text" id="thumbwrapper">3210F</div>
</div>
</td>
</tr>
</table>
</div>
</div>
The .column/.columns classes contain the necessary floats etc. to maintain your horizontal block ( row ).
Block grids are an excellent resource as well, but if you do not declare them within a column, you will not achieve your desired results.
block grid does give better responsive results. If someone stumbles upon this, beware of downloaded version. MIne did not have for each grid type the list-style defined to 'none'...
<div class="row">
<ul class=small-block-grid-6>
<li>... </li>
</ul>
</div>
I have 4 divs in my .html:
<div id="div">
<div class="contenido">1</div>
</div>
<div id="divSupIzq">
<div class="contenidos"><div id="textoDinamico">120 </div><div id="textoEstatico">KM/H</div></div>
</div>
<div id="divSupDer">
<div class="contenidos">zona de</br>avisos</div>
</div>
<div id="divInfIzq">
<div class="contenidos">zona de</br>información</div>
</div>
In .css, I've applied border-radius in order to give these divs circular form.
I've applied text-align:center because I want the content of each div being centered
But how to center the content in the height?? I give some margin-top in .css, but it's wrong, because the interface is adaptable to the size screens (responsible design - css queries) and margin-top isn't sufficient for me...
I don't know if I'm explaining myself well...I try that yes.
Sorry for my bad english. Regards, Daniel
Live example: http://jsfiddle.net/cN2pS/
Another question: what tools do you use in order to test these type of apps for differents resolutions?
Use a table and set the align for each td center
<table>
<tr>
<td align="center">
Your text or elements
</td>
</tr>
</table>
Or set the div display as table-cell
So I have one row with 5 cells. The widths of the inner 3 are static. The first and last (far left and far right) should expand to fill the page so the inner 3 are centered. The outer cells are necessary, because they contain a repeating background image. Using tables, this is easy, because not supplying a width to the outer cells allows them to expand and make up the extra space:
<table width="100%">
<tr height="400">
<td></td>
<td width="200"></td>
<td width="300"></td>
<td width="200"></td>
<td></td>
</tr>
</table>
But I can't seem to get the same effect using DIV's and CSS, except for using the display:table; properties. I'm hoping to find another way around this, since this property isn't supported in IE6 and IE7.
<div id="container">
<div id="stretchLeft"></div>
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
<div id="stretchRight"></div>
</div>
You could do it with javascript / jQuery on load and on resize.
Get the full page width.
Then (full page width - left width - center width - right width)/2
That will be the width for your stretches.
If the only purpose of #stretchLeft and #stretchRight are to center the remaining three divs, then simply leave them out.
body{
text-align:center;
}
#container{
width:700px;
margin:auto;
}
<body>
<div id="container">
<div id="stretchLeft"></div>
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
<div id="stretchRight"></div>
</div>
</body>
Would do what you want.
If they have content, something along these lines will work, but it needs tweaked to your own personal situation:
http://jsfiddle.net/YFx2m/
Also, FWIW, unless you have business reasons for supporting them, IE6 is less than 1% market share, and IE7 is under 5%.
I have a picture on my website which has to much space beneath a picture. I tried to search for extra tags, but I quess it's controlled in a css file. Can someone tell me which part of the css is responsible for the space?
The location is: images/artikelen/123.png
this is a part of the html leading to the css containers which I think would contain the margins. The picture is placed in a table, I know there is no need to have it like this.
The picture is placed in a joomla module in a place called showcase 2
<div id="showcase-surround">
<div id="showcase" class="png"><div id="showcase2" class="png"><div id="showcase3" class="png">
<div class="showcase-inner">
<div id="showmodules" class="spacer">
<div class="block full" style="width: 1004px;">
<div class="module-light">
<div id="row1-block2" class="row"><div class="move-handle"></div><div class="body-surround-top"><div class="body-surround-top2"><div class="body-surround-top3"></div></div></div>
<div class="body-surround"><div class="body-surround2"><div class="body-surround3">
<div class=" showcase2:82">
<div class="moduletable">
<table align="center" border="0">
<tbody>
<tr>
<td> <img style="text-align: center;" src="/images/artikelen/123.png" /> </td>
</tr>
</tbody>
</table>
You can use Firefox browser with its DOM Insector Tool to find out. Is it the piece of code from http://www.friesecomputerservice.nl? (I just googled over 'Friese Computer Service - Computerhulp en PC probleem' :) ) If so, then you've got the following in your http://www.friesecomputerservice.nl/templates/rt_affinity_j15/css/template.css:
.moduletable
{
...
marging-bottom: 15px;
...
}
Remove margin-bottom and you're done.
Without the CSS it's hard to guess what's happening, but try putting this in your CSS:
.moduletable img { display: block; }