I have three images, the firsts are the brazilian flag and the english flag (language settings).. and the third is the logo of my site...
code:
<a class="language" href=""><img src="assets/images/language/portuguese.png">Português</a>
<a class="language" href=""><img src="assets/images/language/english.png">English</a>
<img class="logo" src="assets/images/logo.png">
I want the first and the second above the third..
So, in my css i made:
.language {
margin: 0 5px 0 10px;
}
.logo {
width: 40%;
margin-top: 60px;
}
There is something wrong?? it's not working.
At the moment you have all three images in the same "row". You didn't separate them in two rows in any way.
I would suggest putting language icons in their own div tag like this:
<div>
<a class="language" href=""><img src="assets/images/languag/portuguese.png">Português</a>
<a class="language" href=""><img src="assets/images/language/english.png">English</a>
</div>
<img class="logo" src="assets/images/logo.png">
More information missing from your question, but I guess that's it
<style type="text/css">
.classe1 {
background-image: url('../../Content/images/carousel2.jpg');
background-repeat: no-repeat;
height:100px;
}
</style>
<div class="classe1">
<img src="../../Content/images/Icon1.png" alt="" width="40px" />
<img src="../../Content/images/Icon2.png" alt="" width="40px" />
</div>
If you can't influence the HTML, you can make <br> with CSS:
a + a:after {
content: "\A";
white-space: pre;
}
Since ::before and ::after don't work on self closing tags like <img>, you'll have to add it to the second <a>
Voila demo
Just make it like this
HTML
<div class="wrapit">
<a class="language" href=""><img src="assets/images/language/portuguese.png">Português</a>
<a class="language" href=""><img src="assets/images/language/english.png">English</a>
<img class="logo" src="assets/images/logo.png">
</div>
CSS
.wrapit {
width: 100px;
float: left;
}
.wrapit img { width: 100%; float: left; }
.wrapit a { float: left; width: 50%; display: block; }
Related
At this site, there is a div.social below the Online Bookings at top right of the screen.
http://imgur.com/a/QhlIL
Note: I've not been able to upload images to SO for months - always says the image is too large (> 2MB) when it is 140 KB.
For some reason .social is not displaying, nor its sub-elements:
<div class="social">
<a title="Trip Advisor" href="#" target="_blank">
<div class="tripAdvisor"></div>
</a>
<a title="Facebook" href="#" target="_blank">
<div class="facebook"></div>
</a>
<a title="Instagram" target="_blank" href="#">
<div class="instagram"></div>
</a>
<a title="YouTube" target="_blank" href="#">
<div class="youtube"></div>
</a>
</div>
<style>
.headRight .tripAdvisor {
background: url(../images/social/tripadvisor.png) no-repeat;
width: 28px;
height: 22px;
}
</style>
.social is set to display: block; and there is enough room to fit the icons in.
Help appreciated.
Just checked the bug on your website.
You must apply the style to the child divs of .social
.social div {
display: inline-block;
margin-right: 15px;
display: inline; // remove this line
zoom: 1;
}
remove the
"display: inline"
Just keep
.social div {
display: inline-block;
margin-right: 15px;
zoom: 1;
}
from that class. Will work perfectly.
I have a section in my site that should stretch all the way across the screen.
I want to add 4 images in this section, one beside the other, and make them responsive. I want them to fill the background and breaks between them as needed. How should I modify my code below to accomplish the effects I desire?
#games {
background-color: #000;
}
#games img {
width: 100%;
height: auto;
}
.4columns {
width: 32%;
display: inline-block;
}
<section id="games" class="section section-games">
<div class="container-fluid">
<div class="row">
<img class="4columns" src="resources/media/icons/1.png">
<img class="4columns" src="resources/media/icons/2.png">
<img class="4columns" src="resources/media/icons/3.png">
<img class="4columns" src="resources/media/icons/4.png">
</div>
</div>
</section>
I think you want something like this :
.map{
margin:0;
padding:0;
}
.map img{
float: left;
width: 25%;
}
<div class="map">
<span>
<img src="http://www.inkntoneruk.co.uk/ink-cartridge-news/wp-content/uploads/2016/01/LOTRFOTRmovie.jpg" />
<img src="http://www.inkntoneruk.co.uk/ink-cartridge-news/wp-content/uploads/2016/01/LOTRFOTRmovie.jpg" />
<img src="http://www.inkntoneruk.co.uk/ink-cartridge-news/wp-content/uploads/2016/01/LOTRFOTRmovie.jpg" />
<img src="http://www.inkntoneruk.co.uk/ink-cartridge-news/wp-content/uploads/2016/01/LOTRFOTRmovie.jpg" />
</span>
</div>
I want to do the following:
The biggest Box is a div containing two imgs separated by a small space and with two small block of texts exactly beneath each one.
The problem is that I have been trying (not kidding) for at least 5 hours.
Here is my code:
CSS:
#divPictures {
width: 960px;
position: relative;
float: left;
top: 520px;
left: 200px;
background: url("../imgs/bg-body.jpg");
margin: 0 0 0 -5px;
}
#divPictures img {
margin: 0 0 0 10px;
}
HTML:
<div id="divPictures">
<img src="imgs/help-out.jpg" alt="">
<p>"TEXT HERE</p>
<img src="imgs/what-we-do.jpg" alt="">
<p>"AND HERE"</p>
</div>
EDIT:
I can't post images but is a block containing two images one next to the other and text beneath.
Something like this? Quick example, you can obviously add in extra CSS, or float both left and pad/margin etc...
#divPictures{
width: 100%;
background: url("../imgs/bg-body.jpg");
}
.left{
width: 45%;
float:left;
}
.right{
width: 45%;
float:right;
}
.left img, .right img{
margin: 0 0 0 10px;
}
HTML:
<div id="divPictures">
<div class="left">
<img src="imgs/help-out.jpg" alt="">
<p>"TEXT HERE</p>
</div>
<div class="right">
<img src="imgs/what-we-do.jpg" alt="">
<p>"AND HERE"</p>
</div>
</div>
Make new divs for images and use css atribute display: inline-block to tell interpreter that you want your divs in a line.
<!DOCTYPE html>
<html>
<head>
<!-- CSS -->
<style>
div#pic
{
display: inline-block;
width: 200px;
background: url("../imgs/bg-body.jpg");
margin: 5px 0 0 -5px;
}
div#pic img
{
margin: 0 0 0 10px;
}
</style>
</head>
<!-- HTML -->
<body>
<div id="divPictures">
<div id="pic">
<img src="imgs/help-out.jpg" alt="">
<p>"TEXT HERE"</p>
</div>
<div id="pic">
<img src="imgs/what-we-do.jpg" alt="">
<p>"AND HERE"</p>
</div>
</div>
</body>
</html>
This is the simplest way... When i get stuck I delete it and start over. I think you would have benefitted from starting over...
CSS
<style>
.caption{
text-align: center;
}
li{
background: #ccd2cd;
float: left;
margin:5px;
list-style: none;
padding:5px;
}
</style>
HTML
<ul>
<li>
<img src="http://omarhabash.com/img/feature1.jpg" alt="">
<div class="caption">caption2</div>
</li>
<li>
<img src="http://omarhabash.com/img/feature1.jpg" alt="">
<div class="caption">caption2</div>
</li>
</ul>
if you dont want to use (li) list then just replace those with div classes and rename the style also to the same.
the way i have it here is a good start to a grid if thats what you are aiming for.
http://jsfiddle.net/Mz6aF/
I have three images numbered 1, 2 and 3.
I want to display them using CSS like demonstrated here.
I currently have them inside a <span> and have tried various combinations of position and float. I can get them to be display consecutively but I cannot get image 2 to be position above image 3. Here's my code:
<img src="1.gif" style="padding-right: 4px;"/>
<span>
<img src="2.gif" style="float: top;">
<img src="3.gif" style="float: bottom;">
</span>
There's no such things as float top or bottom.
To achieve a visual like your example try this:
<div style="float;left">
<img src="1.gif" style="padding-right: 4px;"/>
</div>
<div style="float:right">
<img src="2.gif" style="display:block;">
<img src="3.gif" style="display:block;">
</div>
You want to set the images to display: block (so they'll end up on top of one another), and float the first image to the left.
CSS:
.stack img {
display: block;
}
.leftside {
padding-right: 4px;
float: left;
}
HTML:
<img src="http://placekitten.com/100/100" class="leftside"/>
<div class="stack">
<img src="http://placekitten.com/50/50">
<img src="http://placekitten.com/g/50/50">
</div>
See this in action here: http://codepen.io/paulroub/pen/zFEjH
Change your css to this:
img {
float:left;
margin-right: 4px;
}
span img {
float: left;
margin: 0;
}
span img:last-child {
margin-top: 50px;
margin-left: -50px;
}
Fiddle: http://jsfiddle.net/FLTU7/
All right, this should be simple. Basically, what I'm trying to do here is create the layout for a carousel image gallery. JSFiddle is here...
http://jsfiddle.net/G5Us4/1/
CSS...
.gallery {
margin-left: auto;
margin-right: auto;
width: 600px;
background-color: #000000;
height: 300px;
overflow: hidden;
white-space: nowrap;
}
.image {
margin-right: 300px;
margin-top: 50px;
position: relative;
height: 200px;
}
#image {
margin-left: -600px;
width: 287px;
}
#image-two {
width: 231px;
}
#image-three {
width: 242px;
}
HTML...
<div class="gallery"
><img src="../images/templateone.jpg" id ="#image" class="image" alt=""
/><img src="../images/templatetwo.jpg" id="#image-two" class="image" alt=""
/><img src="../images/templatethree.jpg" id="#image-three" class="image" alt=""/>
</div>
It's so simple, and I've been afraid to ask, for fear of missing something stupidly simple. I've looked around online, and I simply cannot figure out why this simple margin is not working.
The effect I'm trying to get is that all of the images are in a horizontal line with large right margins separating them from the other images. Now that I have that done, I need to add a negative margin on the first image so that the last image starts in the center of the stage, and the other two are outside of the hidden to the left.
For some strange reason the first image does not want to go outside the image to the left. Help please!
Thanks in advanced!
P.S. end of the tags are in front of the tags to prevent a small space between the images that occurs if there is a line break in the code.
Firstly, change id="#image-three to id="image-three" in your HTML. Remove the # on image one and two also.
<img src="../images/templateone.jpg" id ="image" class="image" alt=""/>
<img src="../images/templatetwo.jpg" id="image-two" class="image" alt="" />
<img src="../images/templatethree.jpg" id="image-three" class="image" alt=""/>
Secondly, to get it how you described, just increase that negative margin.
#image {
margin-left: -920px;
width: 287px;
}
See - jsFiddle
remove # from ids in your html Code,
<div class="gallery"
><img src="../images/templateone.jpg" id ="image" class="image" alt=""
/><img src="../images/templatetwo.jpg" id="image-two" class="image" alt=""
/><img src="../images/templatethree.jpg" id="image-three" class="image" alt=""/>
</div>