I need to make image positioned like on below picture:
I have code:
<footer>
<div class="stopka1">
<div class="container">
....................
</p>
</div>
</div>
</footer>
<div class="container">
<div class="row" style="padding-right:0; padding-left:0;padding-top:30px;padding-bottom:20px;">
<div class="col-md-6">
<div class="row">
<div class="col-xs-6"><img src="phone.png" style="vertical-align:middle !important;"> <span style="font-weight:lighter;color:rgb(10, 55, 110);font-size: 28px; vertical-align:middle !important;">22 213 18 31</span></div>
<div class="col-xs-6"><button class="col-cs-12 przycisk-pytanie" style="font-weight: bold;margin-top:0;">Zadaj pytanie</button></div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-xs-2"><img src="women.png" style=""></div>
<div class="col-xs-5">.. price ..</div>
<div class="col-xs-5"><button class="przycisk-rezerwuj-big" style="font-weight: bold;height:35px;">Rezerwuj teraz</button></div>
</div>
</div>
</div>
</div>
Have someone any idea how to get this effect? I have no idea how to force it to cover higher div.
You can do one of two options:
OPTION 1
img {margin-top:-20px;}
OPTION 2
img {position:relative; top:-20px;}
Related
SIMPLE CALCULATOR DESIGN WITG GRID (ALL CODE PASTED)
Trying hard but the last equal(=) is not working
<div class="calculator">
<div class="display-area"></div>
<div class="button-section">
<div class="rows">
<div class="first-row">
<div id="cancel">C</div>
<div id="divide">/</div>
<div id="multiply">*</div>
<div id="delete">Del</div>
</div>
<div class="second-row">
<div id="seven">7</div>
<div id="eight">8</div>
<div id="nine">9</div>
<div id="minus">-</div>
</div>
<div class="third-row">
<div id="four">4</div>
<div id="five">5</div>
<div id="six">6</div>
<div id="plus">+</div>
</div>
<div class="fourth-row">
<div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>
<div id="equal">=</div>
</div>
<div class="fifth-row">
<div id="percent">%</div>
<div id="zero">0</div>
<div id="dot">.</div>
</div>
</div>
</div>
</div>
</div>
This is the pic for css where the code not working properly. The last equal block is not working in grid-rows as i want it to move down till the last row
enter image description here
This is the result i got after many tries
enter image description here
I have this html structure :
<div class="wrapper2">
<div class="previewContainer2">
<div id="previewGroup">
<div id="filePreview">
<div id="icon">
<div id="whiteSheet"/>
<div id="extension">EXT</div>
</div>
</div>
<img id="thumbnail" src="assets/indesign.svg" />
<div id="fileName">aaa</div>
</div>
</div>
<div class="metadataContainer2">
</div>
</div>
But then once loaded in electron, the last div (.metadataContainer2) is moved inside the .previewContainer2 div :\
<div class="wrapper2">
<div class="previewContainer2">
<div id="previewGroup">
<div id="filePreview">
<div id="icon">
<div id="whiteSheet">
<div id="extension">EXT</div>
</div>
</div>
<img id="thumbnail" src="assets/indesign.svg">
<div id="fileName">aaa</div>
</div>
</div>
<div class="metadataContainer2">
<p>ncndnlkcd</p>
</div>
</div>
</div>
Did I do something wrong ?
If you follow the HTML5 rules a div tag can not be self closed. Check more on this site
So modify your original code line#6 to mentioned below.
<div id="whiteSheet"></div>
How can I make my container to go down automatically of the page if it exceed the width of the page? The page background is in black if you look at the jsfiddle and it's size is 780px. All two credit cards are displaying over the page. Thanks.
My CSS as below:
<div style="width:780px;background:#000">
<div class="container">
<div class="sleeve">
<div class="credit-card">
<div class="card-company">West Frodo</div>
<div class="card-number">
<div class="digit-group">4141 7204 9012 0029</div>
</div>
<div class="card-expire"><span class="card-text">CVC</span> 321 <span class="card-text">Expires</span> 12/24</div>
<div class="card-holder">John P. Smith</div>
<div class="card-type">Debit card</div>
</div>
</div>
<div class="sleeve">
<div class="credit-card selected" style="background: #555">
<div class="card-company">West Frodo</div>
<div class="card-number">
<div class="digit-group">4234 1302 3798 0265</div>
</div>
<div class="card-expire"><span class="card-text">CVC</span> 321 <span class="card-text">Expires</span> 12/24</div>
<div class="card-holder">John P. Smith</div>
<div class="card-type">Debit card</div>
</div>
</div>
<div class="sleeve">
<div class="credit-card" style="background: #3B3">
<div class="card-company">West Frodo</div>
<div class="card-number">
<div class="digit-group">4812 0322 0517 2840</div>
</div>
<div class="card-expire"><span class="card-text">CVC</span> 321 <span class="card-text">Expires</span> 12/24</div>
<div class="card-holder">John P. Smith</div>
<div class="card-type">Debit card</div>
</div>
</div>
<div class="sleeve">
<div class="credit-card" style="background: #3B3">
<div class="card-company">West Frodo</div>
<div class="card-number">
<div class="digit-group">4812 0322 0517 2840</div>
</div>
<div class="card-expire"><span class="card-text">CVC</span> 321 <span class="card-text">Expires</span> 12/24</div>
<div class="card-holder">John P. Smith</div>
<div class="card-type">Debit card</div>
</div>
</div>
</div>
</div>
Here's my fiddle: http://jsfiddle.net/5gronvk1/1/
Update the following selectors in your CSS with the following:
.container {
height: 100%;
}
and
.sleeve {
display: inline-block;
margin: auto;
}
https://jsfiddle.net/ax26f966/
HTML:
<section id="btn">
<p>View the Newsletter</p>
<div id="facebook">
<div class="logo"><div class="recto"></div></div>
<div class="top"></div>
<div class="logo verso"></div>
</div>
<div id="shadow"><img src="http://lab.aqro.be/img/shadow.png" alt="shadow" /></div>
</section>
How can I add the text WEBSITE or something else next to the envelope, so when hovered, it also flips.
check here : jsfiddle
remove text-indent: -9999px; from #facebook
and change your html to:
View the Newsletter
<div class="logo">
<div class="recto">
<h2>WEBSITE</h2>
</div>
</div>
<div class="top"></div>
<div class="logo verso">
<h2>WEBSITE</h2>
</div>
</div>
<div id="shadow"><img src="http://lab.aqro.be/img/shadow.png" alt="shadow" /></div>
</section>
I have this html
<div class="row">
<div class="col-md-6" id="temp-box" >
<img id="weather-icon" src='Icons/sunny.png'></img>
<span id="temperature">50F</span>
</div>
<div class="col-md-6" > <div class="text-center" id="coodrs-title" ><span>Current Location</span></div>
<div class="position">
You Current Latitude Is: <span id="lati"></span><br/>
You Current Longitude Is: <span id="lngi"></span>
</div>
</div>
</div>
and i want the img with id #weather-icon be placed above the element with id #temperature, but both of them be inside the same row. How can i do this?
Ankit Agarwal gave me the best solution. Boootstrap's clear class!!!
Better solution is to use .clear bootstrap class. It willl work perfectly
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-6" id="temp-box" >
<img id="weather-icon" src='Icons/sunny.png'></img>
<div class="clear"></div>
<span id="temperature">50F</span>
</div>
<div class="col-md-6" > <div class="text-center" id="coodrs-title" ><span>Current Location</span></div>
<div class="position">
You Current Latitude Is: <span id="lati"></span><br/>
You Current Longitude Is: <span id="lngi"></span>
</div>
</div>
</div>
You could nest rows, like so:
<div class="row">
<div class="col-md-6" id="temp-box">
<div class="row">
<img id="weather-icon" src=''>IMAGE</img>
</div>
<div class="row"><span id="temperature">50F</span>
</div>
</div>
</div>
I'm not sure if this is the best way to to this, but it works.
Try setting:
#weather-icon {
display: block;
}
Currently you have an img & a span next to each other, which are both creating inline boxes. One way to force your image to have a line of its own is to set it to a block box element. At least that's my understanding of how it works.
Codepen:
http://codepen.io/anon/pen/pjzBRv
View code:
<div class="row">
<div class="col-md-6" id="temp-box" >
<img id="weather-icon" src='Icons/sunny.png'></img><br>
<span id="temperature">50F</span>
</div>
<div class="col-md-6" >
<div class="text-center" id="coodrs-title" ><span>Current Location</span></div> <div class="position"> You Current Latitude Is: <span id="lati"></span><br/> You Current Longitude Is: <span id="lngi">
</span>
</div>
</div>
</div>
In the code next "img" there is "br".