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".
Related
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>
I want to know the proper way to put an image in the center of the page, and then beside the image vertical align 2 lines of text. should I put the image and text in one bootstrap coloumn or should i have the image in one coloumn and the text in a seperate coloumn. I know there are a few ways to do this, i just want to know the proper method.
<div class="row">
<div class="col-xs-9">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" style="vertical-align:middle" />
</div>
<div class="col-xs-3">
<span style="font-size:48px;">Test</span>
<span style="font-size:24px;">Test second line. </span>
</div>
</div>
https://jsfiddle.net/k90s5fec/
This is the right way to do this
div{
display: inline-block;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-8">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" style="vertical-align:middle" />
</div>
<div class="col-xs-4">
<p style="font-size:48px;">Test</p>
<p style="font-size:24px;">Test second line. </p>
</div>
</div>
This is the fiddle
NOTE : Use https:// when importing external resources,
use p tag instead of span if you want to use block texts.
use this
<div class="row">
<div class="col-xs-9">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" class="displa`enter code here`yed" />
</div>
<div class="col-xs-3">
<span style="font-size:48px;">Test</span>
<span style="vertical-align:middle; line-height: 30px;">Test second line. </span>
</div>
</div>
img.displayed
{
display: block;
margin-left: auto;
margin-right: auto
}
<div class="row">
<div class="col-md-8 col-sm-8 col-xs-8">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" style="vertical-align:middle" />
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<div style="font-size:48px;">Test</div>
<div style="font-size:24px;">Test second line. </div>
</div>
</div>
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;}
I want to switch to div with class="col-md-x" depending upon the number of student object i am receiving.
E.x: Sample
if i am getting only one JSON object then i want to a div with class should be like(class="col-md-12").
if am getting two JSON object then i want to switch to a div with class="col-md-6".
<div class="container">
<div class="row">
<div class="col-md-12">
<div clss="row">
<div ng-repeat="c in vm.students" class="col-md-12">
<div calss="thimbnail">
<div class="Option div 1">
</div>
</div>
</div>
<div ng-repeat="c in vm.students" class="col-md-6">
<div calss="thimbnail col-md-">
<div class="Option div 2">
</div>
</div>
</div>
<div ng-repeat="c in vm.students" class="col-md-4">
<div calss="thimbnail col-md-">
<div class="Option div 3">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Use ng-class like below,
ng-class="{class}[condition]"
In your case ,
ng-class="{1:'col-md-12', 2:'col-sm-6'}[vm.students.length]"
For your reference, Detailed explanation
You have calss instead of class in the example code. I hope that is a typo.
To address to your problem you can make use of ng-class where you can assign classes based on conditions
More document on ng-class
Code Snippet:
<div class="container">
<div class="row">
<div class="col-md-12">
<div clss="row">
<div ng-repeat="c in vm.students" ng-class="{col-md-12:vm.students.length === 1,col-md-6:vm.students.length === 2">
<div calss="thimbnail">
<div class="Option div 1">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I'm trying to get the horizontal grey lines to sit in front of the red background but behind the blue buttons. I've tried using z-index but I think it fails because the nested divs need to be placed in front of a div outside their containers.
Any help would be appreciated
http://jsfiddle.net/LZxxB/1/
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div>
<!-- /header -->
<div role="main" class="ui-content" id="contentDiv">
<div class="fretboardWrapper">
<div class="strings">
<div class="string" id="stringHighE"></div>
<div class="string" id="stringB"></div>
<div class="string" id="stringG"></div>
<div class="string" id="stringD"></div>
<div class="string" id="stringA"></div>
<div class="string" id="stringLowE"></div>
</div>
<div class="stringTitle">
<div class="noteClickArea stringTitleContainerE1">
<div class="round-button" id="noteHigh0"> <span class="note">E</span>
</div>
</div>
<div class="noteClickArea stringTitleContainerB">
<div class="round-button" id="noteB0"> <span class="note">B</span>
</div>
</div>
<div class="noteClickArea stringTitleContainerG">
<div class="round-button" id="noteG0"> <span class="note">G</span>
</div>
</div>
<div class="noteClickArea stringTitleContainerD">
<div class="round-button" id="noteD0"> <span class="note">D</span>
</div>
</div>
<div class="noteClickArea stringTitleContainerA">
<div class="round-button" id="noteA0"> <span class="note">A</span>
</div>
</div>
<div class="noteClickArea stringTitleContainerE2">
<div class="round-button" id="noteLowE0"> <span class="note">E</span>
</div>
</div>
</div>
<div class="stringTitle">
<div class="noteClickArea stringTitleContainerE1">
<div class="round-button" id="noteHigh0"> <span class="note">E</span>
</div>
</div>
<div class="noteClickArea stringTitleContainerB">
<div class="round-button" id="noteB0"> <span class="note">B</span>
</div>
</div>
<div class="noteClickArea stringTitleContainerG">
<div class="round-button" id="noteG0"> <span class="note">G</span>
</div>
</div>
<div class="noteClickArea stringTitleContainerD">
<div class="round-button" id="noteD0"> <span class="note">D</span>
</div>
</div>
<div class="noteClickArea stringTitleContainerA">
<div class="round-button" id="noteA0"> <span class="note">A</span>
</div>
</div>
<div class="noteClickArea stringTitleContainerE2">
<div class="round-button" id="noteLowE0"> <span class="note">E</span>
</div>
</div>
</div>
</div>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
<!-- /footer -->
</div>
<!-- /page -->
You were right to use z-index. But z-index only works for elements with position: relative, absolute or fixed.
I've set:
.string {
position: relative;
z-index: 2;
}
.round-button {
position: relative;
z-index: 3;
}
And removed the z-index from .stringTitle.
And it works
http://jsfiddle.net/LZxxB/2/
try this:
add position and z-index here:
.noteClickArea {
height:16.66%;
z-index:2;
position:relative;
}
and remove z-index here:
.stringTitle {
z-index:1; // REMOVE IT
}
see results here: http://jsfiddle.net/LZxxB/4/
My advice is to not touch z-indexing; Use html's implicit layer indexing;
I believe it behaves such that the first child element is topmost and the last element is bottom most, then leverage nesting. (I could have it backwards, it might be that the last element is rendered topmost)
This works best for be when using any sort of positioning, as the position can be specified independent of any z indexing, and element order can be manipulated by javascript if need be. (Assuming you anticipate using JavaScript at all)