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
Related
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 a page where there are two images on top which are floated to left and right as below :
.floatLeft{ float:left;}
.floatRight{ float:right; }
<div>
<img src="firstImage" class="floatLeft"/>
<img src="secondImage" class="floatRight"/>
<!-- wright here -->
</div>
Issue is when i write anything after images (be it in div or a plain text ) and if it goes beyong page width ,
the text after maximum width shifts downwords entirely after images . That is text doesn't wrap inbetween two images
What i understand about float is text should "FLOW" in between two images (unless we use clear which "clears" area around images ) , but its not working like that.
I want to have a text in between two images.
Any help is higly appreciated as a I have done a lot of efforts but it is not working.
Logically, you have 3 blocks of data here, so I suggest using 3 floating divs with set width:
.floatLeft{ float:left}
.div1{width:X%}
.div2{width:Y%}
.div3{width:Z%}
.overflow{overflow: hidden} /* this is optional */
<div class="overflow">
<div class="floatLeft div1">
<img src="firstImage"/>
</div">
<div class="floatLeft div2">
<!-- text here -->
</div">
<div class="floatLeft div3"><!-- or make it float right if you want -->
<img src="secondImage"/>
</div">
</div>
If you want your images a fixed width, try using CSS calc:
.div1{width:100px}
.div2{width:-moz-calc(100%-300px);-webkit-calc(100%-300px);calc(100%-300px);} /* not supported in some browsers */
.div3{width:200px}
But honestly I recommend to go classic way and use a table here:
.table {width:100%;border-collapse:collapse}
.table td {padding:0;margin:0}
.block1 {width:X%} /* or width:Xpx */
.block3 {width:Z%} /* or width:Zpx */
/* do not touch block2 here */
<table class='table'>
<tr>
<td class='block1'>
<img src="firstImage"/>
</td>
<td class='block2'>
<!-- text here -->
</td>
<td class='block3'>
<img src="secondImage"/>
</td>
</tr>
</table>
Remember to wrap your content in "blocks", it always helps when you mark up.
I guess this is the answer that you need jsfiddle
I will explain a little about.
in your div add a class of imgcontainer
in your css, add the following
.imgcontainer{
position:relative;
}
you can add the width of the div, in jsfiddle I set it as 150px. and each of the image is 50px. there you add paragraph with some text
Try this way
<div>
<img src="firstImage" class="floatLeft"/>
<p class="floatLeft">Some textgoes here</p>
<img src="secondImage" class="floatRight"/>
</div>
but give proper width
Another variation is using a CSS version of the table approach proposed by igorpavlov. You have to replace the table/tr/td by divs and to adapt the CSS as proposed here :
.table {width:100%; display: table;}
div{ display: table-cell; vertical-align: top;}
.block1 {width:33%} /* or width:Xpx */
.block3 {width:33%} /* or width:Zpx */
img {width: 100%; height: auto;}
<div class='table'>
<div class='block1'>
<img src="firstImage"/>
</div>
<div class='block2'>
<!-- text here -->
</div>
<div class='block3'>
<img src="secondImage"/>
</div>
</div>
It provides better semantics and works IE8+!
I have a DIV that I want to use to display some formatted content in. However, I have problems with some text TAGs inside the DIV.
You can see my problem in jsfiddle.
Can you please help me solve this?
I need the content of the second "column" to be able to word-wrap and when it would do that, I want the next "line" to be moved down so it would not overlap it.
Basically I want to text to look normal inside the DIV.
<div class="container-right">
<div class="topul" style="background-color:#2ecc71; width:352px;"></div>
<div class="parent" style="min-width:350px; width:350px; height:445px;">
<p class="myp" style="color:#2ecc71; font-size:2em; margin-bottom:0px"> <b>Worker information</b>
</p>
<div class="topul2" style="float:left; background-color:#2ecc71;"></div>
<div class="d-table">
<div class="d-tablerow">
<div class="d-tablecell" style="text-align:right; width:30%">
<p class="myp3" style="color:#2ecc71">Name:
<p>
</div>
<div class="d-tablecell" style="text-align:left; width:70%;">
<p class="myp4" style="color:#2ecc71"><b>Some name</b>
</p>
</div>
</div>
<div class="d-tablerow">
<div class="d-tablecell" style="text-align:right; width:30%">
<p class="myp3" style="color:#2ecc71;">Address:</p>
</div>
<div class="d-tablecell" style="text-align:left; width:70%;">
<p class="myp4" style="color:#2ecc71; display:inline-block"><b>Here goes a long text as address that does not word-wrap and exits the DIV</b>
</p>
</div>
</div>
<div class="d-tablerow">
<div class="d-tablecell" style="text-align:right; width:30%">
<p class="myp3" style="color:#2ecc71">Other info:</p>
</div>
<div class="d-tablecell" style="text-align:left; width:70%;">
<p class="myp4" style="color:#2ecc71; "><b>Here is other information</b>
</p>
</div>
</div>
</div>
</div>
</div>
You can see the CSS in the jsfiddle link above.
I give up... I am a newbie with CSS and HTML and so far this is done manually by me after digging on google. But now I have no idea how to solve this.
Please help.
Thanks
The problem is with your .myp4 styles
To avoid the overlap remove height: 2px;
To avoid bleeding from the div set max-width: 200px;
As mentioned above set heights are a bit of a nightmare unless you're going for a specific look. It's better to use min-height or max-height
NOTE: You should seriously split all your CSS into a separate file rather than having them in the elements
Also is there a particular reason for you to use crazy displays? You could achieve the same effect easily by having a div wrapping two other divs that are float left. display: block; will give you less of a hard time if you're a newbie. Aim for less code, not more.
Try setting min-height instead of height on the rows and/or cells.
The width of the table is the culprit, it's allowing its children to run wild on your page. .d-table {
width: 350px;
}
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; }