An image is worth a thousand words, so here is one:
The upper image is the corect version, I used display:table-cell to avoid what happens in the second image in IE7. What do you suggest to use instead to avoid this case?
Here is the code used:
<div class="sharerDataContainer">
<img src="http://tctechcrunch2011.files.wordpress.com/2011/09/perfectworld.png?w=145" width="90" alt="Andrew" />
<div class="sharerData">
<p class="sharerDataTitle">
<a href="http://example.org" target="_blank">
Website Title Here
</a>
</p>
<p class="sharerDataAddress">
mbac.squarespace.com
</p>
<p class="sharerDataDescription">
Congratulations to Rachel Edwards, who won a fabulous Bloom Tea Treatment Box Set (worth £20) from our friends at Running Cupcake
</p>
</div>
</div>
UPDATE:
CSS code:
.sharerDataContainer img {
float: left;
}
.sharerData {
background: none repeat scroll 0 0 transparent;
border: 0 solid #0077A5;
color: #808080;
display: table-cell;
font-size: 11px;
line-height: 15px;
padding: 0 10px !important;
position: relative;
}
.sharerData .sharerDataDescription {
margin-top: 5px;
}
IE7 does not support display: table-cell.
Though it's not really a problem in this instance, because there's no need for it. You can replace it with overflow: hidden to achieve the same effect: http://jsfiddle.net/thirtydot/AmNeV/
the simple cross-browser solution is to wrap the image in another division tag:
<div class="imgContainer">
<img src="" width="90" alt="Andrew" />
</div>
and let it float:
.sharerDataContainer .imgContainer {
float: left;
}
try it! http://jsfiddle.net/9U7e9/
Related
I'm taking the Free Code Camp course thing and the first project is to create a tribute page to whoever. Mine is on J Dilla, my favorite hip hop producer. God rest his soul. Anyways I'm trying to use a bootstrap thumbnail around a picture of him, with the text/caption also inside the thumbnail. My problem is that it messes up the centering and aligns the thumbnail to the left and I have no idea how to fix it. Here's the relevant code:
<style>
.cool-text {
font-family: Lobster;
font-size: 20px;
}
.image-centering {
display: block;
margin-left: auto;
margin-right: auto;
}
.vertical-centering {
margin-top: auto;
margin-bottom: auto;
}
.gray-background {
background-color: lightgray;
margin: 20px 100px 20px 100px;
border-radius: 5px;
}
.white-background {
background-color: white;
margin: 10px 560px 10px 10px;
}
</style>
<div class="gray-background">
<br>
<h1 class="cool-text text-center">J Dilla</h1>
<h2 class="text-center"><i>The one and only</i></h2>
<br>
<div class="span8 offset2">
<div class="img-thumbnail thumbnails">
<img class="image-centering" src="http://media.lessthan3.com/wp-content/uploads/2014/02/j-dilla-lessthan3.jpg" alt="The man himself."</img>
<p class="text-center">Dilla working on something ill, I presume</p>
</div>
</div>
<br>
</div>
</div>
Also if there's anything glaringly terrible about my code, I'd love some input on how to reformat it. This is my first time asking a question on stack overflow so forgive me if this is the wrong way to do so.
I'm working on this HTML email template and thought I was done until I figured out that GMail and some other e-mail clients strip out the position CSS property.
Since writing html/css for email readers is like going back into the stone ages I'm a little bit stuck on this one.
What I want is to display a score bar which is sort of like a progress bar, with a score text inside of it, like this:
This works fine until the score becomes really low and the score text doesn't fit inside of the blue container anymore. The text just gets cuts off like so:
and at 0%:
Please note that I'm not sure why the word "Score" still shows up in the last one.
What I want is the score text just to overlap into the red part when the text is too long to fit inside of the blue container.
My code is as follows:
<div style="float: left;width: 70%;height: 30px;max-height: 30px;background-color: #f00;color: #fff;font-weight: bold;padding: 0px;font-size: 18px;">
<div style="float: left;width: 0%;height: 30px;max-height: 30px;margin: 0;padding: 0;background-color: #3c88a7;overflow: visible;">
<div style="padding-left: 10px; float: left;line-height: 30px;max-height: 30px;">Score 0%</div>
</div>
</div>
I've also tried to solve it with a table, but I walk into the same problem - there seems to be no cross-platform way to make the text overflow the cell.
Any ideas how to solve this, so it works in all the major email clients and webmail clients?
It is as simple as this:
<div style="margin:0;padding:0;background:blue">
<p style="width:10%;background:red;color:white;white-space: nowrap;">Score: 10%</p>
</div>
not very polished, but at least for a code-starter it's fine, i guess
You could use just two div without positioning. You have to use white-space: nowrap to prevent your text from wrapping.
Example Snippet:
div.wrap {
width: 100%; height: 26px; max-height: 26px;
background-color: #dd6666; color: #333;
padding: 0px;
}
div.wrap > div {
line-height: 26px; max-height: 26px;
background-color: #3c88a7; padding: 0px 0px 0px 4px;
width: 30%; white-space: nowrap; color: #fff;
font-family: helvetica, sans-serif; font-size: 14px; font-weight: bold;
}
div.d2 > div { width: 5%; }
div.d3 > div { width: 15%; }
div.d4 > div { width: 0%; }
div.d5 > div { width: 60%; }
<div class="wrap d1">
<div>Score 30%</div>
</div>
<br /><div class="wrap d2"><div>Score 5%</div></div>
<br /><div class="wrap d3"><div>Score 15%</div></div>
<br /><div class="wrap d4"><div>Score 0%</div></div>
<br /><div class="wrap d5"><div>Score 60%</div></div>
Here's a completely insane solution. :)
I wrote the SVG to CSS here...
http://jsfiddle.net/coqckyj9/1/
Then converted the SVG to base64 and pasted it into the div background image...
http://jsfiddle.net/coqckyj9/2/
<div id='bar' style='width: 100px; height: 20px; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPjxyZWN0IGZpbGw9J2JsdWUnIHdpZHRoPSc0cHgnIGhlaWdodD0nMjBweCcgLz48cmVjdCBmaWxsPSdyZWQnIHg9JzRweCcgIHdpZHRoPSc5NnB4JyBoZWlnaHQ9JzIwcHgnIC8+PHRleHQgeD0nMnB4JyB5PScxNnB4JyBmaWxsPSd3aGl0ZScgZm9udC1zaXplPScxOCc+U2NvcmUgNCU8L3RleHQ+PC9zdmc+);'></div>
I’m trying to recreate this sort of layout:
This is the code I’m currently using to accomplish it:
<table style="border:0px;">
<tbody>
<tr style="border:0px;">
<td><img src="twophones.jpg" alt="" /></td>
<td>
<table style="border:0px;">
<tbody>
<tr width="100%" style="border:0px;">
<td width="100%">
<center>
<h11>DISCOVER THE BRANDS AND STYLES DESIGNED FOR YOU</h11>
<br>
<h33>Coming soon to the App Store and Google Play.</h33>
<table style="border:0px; width:410px;">
<tr style="border:0px;"><td style="border:0px;"><img src="dot.png"></td></tr>
<tr style="border:0px;" width="410">
<td style="border:0px;"><img src="app.jpg" alt="" /></td>
<td><img src="android.jpg" alt="" /></td>
</tr>
</table>
</center>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Unfortunately, I’m sick of maintaining this table gunk. How can I maintain the same layout, but using standard CSS techniques?
Here are a couple of my attempts:
<div id="parent"> <div id="viewport">
<a href="#">
<img src="twophones.jpg" style="float:left;> <img src="twophones.jpg" alt="" />
<h11 style="width:100%;float:right; display: table-cell; vertical-align: middle;">DISCOVER THE BRANDS AND STYLES DESIGNED FOR YOU</h11>
<span><h11>DISCOVER THE BRANDS AND STYLES DESIGNED FOR YOU</h11><br>
<h33>Coming soon to the App Store and Google Play.</h33>
<br>
<h33 style="width:100%;float:right; display: table-cell; vertical-align: middle;">Coming soon to the App Store and Google Play.</h33>
</span>
</a>
</div> </div>
<div id="parent"> <div id="parent">
<img src="twophones.jpg" style="float:left;"> <img src="twophones.jpg" style="float:left;>
<div style="width:65%;float:right;"> <div style="width:65%;float:right;">
<h11>DISCOVER THE BRANDS AND STYLES DESIGNED FOR YOU</h11>
<h11>DISCOVER THE BRANDS AND STYLES DESIGNED FOR YOU</h11>
<br> <br>
<h33>Coming soon to the App Store and Google Play.</h33>
<h33>Coming soon to the App Store and Google Play.</h33>
</div> </div>
First thing you want do to when doing a layout with CSS is, well, not touching the CSS and dealing purely with the content. How best could we represent this content? I think this includes all the content rather semantically:
<section>
<img src="twophones.jpg" alt="">
<h2>Discover the brands and styles designed for you</h2>
<p>Coming soon to the App Store and Google Play</p>
<ul>
<li class="iphone">
<a href="#">
Available on the
<strong>App Store</strong>
</a>
</li>
<li class="android">
<a href="#">
Available on the
<strong>Android Market</strong>
</a>
</li>
</ul>
</section>
It contains all the content, but it doesn’t look great. It looks sort of like this:
(picture of two phones)
Discover the brands and styles designed for you
Coming soon to the App Store and Google Play
Available on the App Store
Available on the Android Market
Your layout doesn’t quite look like that. First big difference is that nothing’s centered here, but that’s trivial to fix: (take a look)
section {
text-align: center;
}
And what about those buttons? Well, each one functions sort of as a blocky part of the page, but we still want it to be inline, so we’ll apply a display of inline-block. Furthermore, we want the bolded part to be on another line, so we’ll set its display to block, which should force that. Lastly for now, we know it’s got a orangish background and border, and looks like it’s got a little shadow on the text, so putting all this together:
section li a {
display: inline-block;
background: orange; /* fallback for browsers that
don't support gradients */
background: linear-gradient(#f9a60d, #f37111);
color: white;
text-shadow: 0 0 -1px 0 black;
border: 1px solid #e79d48;
border-top-color: #ffe37d;
border-radius: 5px;
box-shadow: 0 5px 0 #a95511;
padding: 8px;
text-decoration: none; /* no underlines on our link, please */
text-align: left; /* within the button, left-aligned */
}
section li a strong {
display: block;
}
Nice buttons! But we could still use some icons on them—fortunately, that’s easy: just add a little more padding on the left and apply a background image: (try it)
section li a {
padding-left: 50px;
}
section li.iphone a {
background: orange url(iphone-icon.png) no-repeat 10px 10px;
background: linear-gradient(#f9a60d, #f37111), url(iphone-icon.png) no-repeat 10px 10px;
}
/* similar for Android */
Now how do you get the buttons to appear in a line? Fortunately, that’s simple. First, remove any margins and padding on the list, then make each item inline-block (try it):
section ul {
margin: 0;
padding: 0;
}
section li {
display: inline-block;
}
Now how about that image on the side? It turns out CSS has us covered. We just tell it we want to float it to the left. As a common trick, we’ll also set an overflow: hidden on the container, so the float is entirely contained within the container. (You can’t see it standalone, but you may see the effect if you try to embed it in a larger web page.)
section {
overflow: hidden;
}
section img {
float: left;
}
Try it. Then we have just one minor visual tweak: we want the header to be uppercased. Fortunately, CSS has us covered there, too! Just apply
section h2 {
text-transform: uppercase;
}
And we’re done. Of course, there’s more you could do: adjust the margins and/or padding to change the spacing; change the font if necessary, etc., etc., but I’ve explored a few techniques that are generally applicable:
Floats are used and abused all the time in CSS. They’re useful.
Changing display can be useful to force elements to display in or out
of a line.
Playing with background can put icons on things.
I don’t mean for this to be a huge code dump; rather, I’d hope you’d learn something out of it, and be able to do similar things yourself.
I don't think I can go any more in-depth or explain anything better than the fantastic answer by icktoofay, but here is a simple layout that could also get you started.
Here is the demo.
Let's start with the basic HTML layout:
<div class="wrap">
<div class="image">
<img src="http://www.placehold.it/400X500" />
</div>
<div class="information">
<h1>DISCOVER THE BRANDS AND STYLES DESIGNED FOR YOU</h1>
<h2>Coming soon to the App Store and Google Play.</h2>
<a class="storeLinks">Play store</a>
<a class="storeLinks">APP store</a>
</div>
</div>
Now let's add in some CSS to layout your HTML elements. In this example:
display: table-cell; can be used to vertically align our content in conjunction with vertical-align: middle; and place our image to the left of the text.
html,body { height: 100%; } allows us to give our wrapping .wrap div a height of 100% so that all the content contained within <div class="wrap"> can be vertically centered.
.wrap > div will target only the divs that are directly after <div class="wrap">.
margin: 0 auto;, along with a fixed width, keep all our content horizontally centered.
* {
margin: 0;
padding: 0;
}
html,body {
height: 100%;
}
.wrap {
display: table;
height: 100%;
width: 900px;
margin: 0 auto;
}
.wrap > div {
display: table-cell;
height: 100%;
vertical-align: middle;
}
.image {
width: 400px;
}
.information {
width: 500px;
text-align: center;
}
h1 {
text-align: center;
padding: 10px;
margin: 10px;
}
h2 {
padding: 10px;
margin: 10px;
}
.storeLinks {
display: inline-block;
padding: 20px;
background: #DDD;
padding: 10px;
}
I am using Joomla, Phoca Gallery Image Component and Phoca Callery module. It is not actaully the question about Joomla, but about CSS. Plugin creates gallery with 4 images. Those images should create 2 x 2 grid, using float:left.
Here is what I have as a result:
http://jsfiddle.net/qAx7c/ (original link: http://renathy.woano.lv/index.php/lv/par-mums-2)
.block {
border:1px solid #342e2b;
border-radius:7px;
padding: 12px 22px 12px 22px;
}
.block-box2 div.content-main {
width:50%;
display:inline-block;
float:left;
}
.block-box2 div.content-sidebar2 {
width:49.99%;
float:right;
}
/* float clearing for IE6 */
* html .clearfix{
height: 1%;
overflow: visible;
}
/* float clearing for IE7 */
*+html .clearfix{
min-height: 1%;
}
/* float clearing for everyone else */
.clearfix:after{
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
font-size: 0;
}
/* FIXes */
#phocagallery-module-ri .phocagallery-box-file {
padding: 0 !important;
background: none !important;
}
#phocagallery-module-ri .phocagallery-box-file-first {
background: none !important;
}
#phocagallery-module-ri {
margin-left: 40px !important;
}
#phocagallery-module-ri div.mosaic a img {
border: 1px solid #342e2b !important;
/*border: none !important;*/
}
#phocagallery-module-ri div.mosaic a img, #phocagallery-module-ri div.mosaic img {
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
<div class="block block-box2 clearfix">
<div class="content-main">
<div class="item-page">
<h2>Par mums</h2>
Some text here
Some text here
</div>
</div>
<div class="content-sidebar2">
<div id="phocagallery-module-ri" style="text-align:center;">
<center style="padding:0px;margin:0px;">
<div class="mosaic" style="float:left;padding:5px;width:170px">
<a class="modal-button" title="Atmosfēra" href="">
<img src="phoca_thumb_m_parmums_telpas.jpg" alt="Atmosfēra" width="170" height="150">
</a>
</div>
<div class="mosaic" style="float:left;padding:5px;width:170px">
<a class="modal-button" title="Par mums" href="#">
<img src="phoca_thumb_m_parmums_atmosfera.jpg" alt="Par mums" width="170" height="149">
</a>
</div>
<div class="mosaic" style="float:left;padding:5px;width:170px">
<a class="modal-button" title="Par mums" href="#">
<img src="phoca_thumb_m_parmums_dzerieni.jpg" alt="Par mums" width="170" height="150">
</a>
</div>
<div class="mosaic" style="float:left;padding:5px;width:170px">
<a class="modal-button" title="Par mums ārpusē" href="#">
<img src="phoca_thumb_m_parmums_izskats.jpg" alt="Par mums ārpusē" width="170" height="150">
</a>
</div>
</center>
</div>
<div style="clear:both"></div>
</div>
As you see, one image is not floating correctly. The code of div phocagallery-module-ri is generated automatically.
I tried to change width, marings, paddings of images and divs, but nothing helps - one image is floating incorrectly, however it seems that everything should be fine.
Can you, please, give me some ideas, why this floating is broken?
The first image's code is :
<img src="/images/phocagallery/par_mums/thumbs/phoca_thumb_m_parmums_telpas.jpg" alt="Atmosfēra" width="170" height="150">
And the second image's code is :
<img src="/images/phocagallery/par_mums/thumbs/phoca_thumb_m_parmums_atmosfera.jpg" alt="Par mums" width="170" height="149">
They have different height ( 150 and 149 ), this is the reason.
Changing the second image's height to 150 will works fine.
The issue is that the second image is less tall than the first. Therefore, the second floats next to the first, but the third one also floats left to the first, leaving a gap. The fourth one doesn't fit next to the third, so it wraps to a new line.
So that's the cause. Now for the solution, I'm not a CSS professional, so I cannot say which of the following solutions is best, nor if there is another, better one.
One solution would be to embed each image in a container that has a fixed height, or at least has the same height for each of them.
Other possible solutions would be to use a CSS table way of styling.
Thirdly, adding a clear:both element after each second image (since you only want two on a row) will break the floating.
Given the nature of the site and the pictures in the gallery, you may also choose to make each thumbnail image the same size. That will also solve it, by taking away the trigger of the problem.
I am new to css . I am trying to display my images in a perfect manner
here is my html code:
<div id="photos">
<h3>Photo title</h3>
<P class="like">Like </P>
<p class="date">date </p>
<div id="image">
<img src="something.jpg" />
</div>
<p class="about">about image goes here</p>
</div>
Now i want to style the same like this:
http://www.desolve.org/
If you want to make your image like that wall post i did it in below given fiddle link.
http://jsfiddle.net/zWS7c/1/
Css
#photos{
margin:10px;
border:solid 1px red;
font-family:arial;
font-size:12px;
}
#photos h3{
font-size:18px;
}
.date, .like{
text-align:right;
}
.about{
margin:10px;
}
#image img{
width:100%;
}
HTML
<div id="photos">
<h3>Photo title</h3>
<P class="like">Like </P>
<p class="date">date </p>
<div id="image">
<img src="http://www.desolve.org/_images/chicago_banner.jpg" />
</div>
<p class="about">about image goes here</p>
</div>
Live demo http://jsfiddle.net/46ESp/
and now set to according to your layout as like margin *padding* with or height
I think you need like this
http://jsfiddle.net/VwPna/
From http://www.w3schools.com/css/default.asp you learn easily... and also you can check other website css from firebug in your browser.
below code is that you given site css for banner class.
.banner {
background: url("../_images/gallery_banner.jpg") no-repeat scroll 0 0 transparent;
height: 350px;
margin-bottom: 4em;
overflow: hidden;
padding-left: 3.9%;
position: relative;
}
same way you can give more style their.
Here is the way it is made on the link you gave.
HTML:
<div class="banner">
<h1>We love urban photography</h1>
<p>
We’re betting you do to. Welcome to our site, a growing collection of galleries taken by a small group of passionate urban photographers. Visit our galleries, buy some of our prints, or drop us a line. While you’re at it, feel free to submit a gallery of your own.
<strong>Welcome</strong>
.
</p>
</div>
CSS:
.banner {
background: url("../_images/gallery_banner.jpg") no-repeat scroll 0 0 transparent;
height: 350px;
margin-bottom: 4em;
overflow: hidden;
padding-left: 3.9%;
position: relative;
}
.banner h1 {
color: #FFFFFF;
font-size: 2.2em;
letter-spacing: 0.1em;
padding-top: 290px;
}
.banner p {
background: none repeat scroll 0 0 rgba(123, 121, 143, 0.8);
color: #FFFFFF;
font-size: 1em;
height: 350px;
padding: 1% 1% 0;
position: absolute;
right: 0;
top: 0;
width: 21%;
}
You only need to translate that to your id's, classes and form, then you have it
There's nothing special that they've done on the reference web site. They've used the image as a background property of a div class="preview".
Here is the (x)HTML:
<section class="chicago">
<h2>Chicago</h2>
<p class="pubdate">
<time datetime="2011-04-24" pubdate="">April 2011</time>
</p>
<div class="preview"></div>
<p class="caption">Big wind, big shoulders. See a different side of Chicago.</p>
</section>
And the corresponding CSS
.chicago .preview {
background: url(../_images/sm_chicago_banner.jpg) no-repeat;
}
You can always sneak-peek by right mouse click on the website and choosing "View Page Source" or something similar, depending on your browser :)