I have put in the first: the normal image
Then I split each of them in Photoshop into png file.
Then I put the first split images:
Then the second picture:
Then the others.
Then I got this look:
So that when I put the mouse on one of them, others disappear
But the transparent aspect of the last image affects the others,
How do I remove the transparent side?
Html :
<Html>
<head>
<title>Class 2bac svt-2</title>
<link rel="stylesheet" href="Css.css">
</head>
<body>
<center>
<h1 class="Title">2Bac-Svt-II</h1>
<div>
<img src="Images/All-black&White.png" alt="All" class="All">
<img id="Gays" src="Images/A7meed.png" alt="All" class="A7meed">
<img id="Gays" src="Images/Wahid.png" alt="All" class="Wahid">
<img id="Gays" src="Images/3azi.png" alt="All"Class="3azi">
<img id="Gays" src="Images/3chir Piza.png" alt="All"Class="3chir piza">
<img id="Gays" src="Images/Joker Dial Maryoula.png" alt="All" class="JDM">
<img id="Gays" src="Images/Mister.png" alt="All" class="Mister">
<img id="Gays" src="Images/Piza.png" alt="All" class="Piza">
<img id="Gays" src="Images/Naser.png" alt="All" class="Naser">
<img id="Gays" src="Images/Nasiri.png" alt="All" class="Nasiri">
<img id="Gays" src="Images/Taha.png" alt="All" class="Taha">
<img id="Gays" src="Images/Jawad.png" alt="All" class="Jawad">
<img id="Gays" src="Images/Hedaya 3ad Lmath.png" alt="All" class="H3m">
<img id="Gays" src="Images/Hamoudo.png" alt="All" class="Hamodo">
<img id="Gays" src="Images/Himi.png" alt="All" class="Himi">
<img id="Gays" src="Images/Balon.png" alt="All" class="Balon">
<img id="Gays" src="Images/M5inzaaaaa.png" alt="All" class="M5inza">
<img id="Gays" src="Images/Monir.png" alt="All" class="Monir">
<img id="Gays" src="Images/Carasko.png" alt="All" class="Carasko">
<img id="Gays" src="Images/Francai.png" alt="All" class="Francai">
</div>
<label>Zoom 100% !!!! </label>
</center>
</body>
</Html>
Css :
body{
background-color: black;
}
.title{
color: white;
font-family: fantasy;
}
img[id="Gays"]{
height: 70%;
display: block;
margin-top: -518.7px;
}
.All{
display: block;
height: 70%;
}
label{
color: red;
}
#media screen and (max-width:1000px){
img[id="Gays"]{
height: 70%;
display: block;
margin-top: -511.7px;
}
}
You can do this by using the on mouse enter event and setting the items (apart from the one hovered) to have a 'hide' class. Hide class in css will set visibility to hidden.
Then use on mouse leave event to set all to visible again
Can't show you an example with your images, but you should be able to figure it out using the below snippet that uses text instead.
// hide all elements in div apart from the one that is hovered
function hoveredFunc(ele) {
let div = document.getElementById("div");
let contentsOfDiv = div.getElementsByTagName("h1");
for(let i = 0; i < contentsOfDiv.length; i++) {
let item = contentsOfDiv[i];
if(ele !== item) {
item.setAttribute("class", "hide");
}
}
}
// set all to visible in div
function leaveFunc() {
let div = document.getElementById("div");
let contentsOfDiv = div.getElementsByTagName("h1");
for(let i = 0; i < contentsOfDiv.length; i++) {
let item = contentsOfDiv[i];
item.removeAttribute("class", "hide");
}
}
.hide {
visibility: hidden;
}
<div id="div">
<h1 onmouseenter="hoveredFunc(this)" onmouseleave="leaveFunc()">
Test
</h1>
<h1 onmouseenter="hoveredFunc(this)" onmouseleave="leaveFunc()">
Test 2
</h1>
<h1 onmouseenter="hoveredFunc(this)" onmouseleave="leaveFunc()">
Test 3
</h1>
</div>
Related
I'm new to react and fairly new to programming in general.
I'm using react and want a box to expand on click while the 3 other boxes hide simultaneously. Right now I've just gotten it to add a class of 'hidee' (named that way because 'hide' is actually a feature) on click and send an alert.
Wanting the expanded area to be almost full window size as it will house content.. and then would add a nav bar to the top of that. Below is the concept and my current code is in a sandbox below that.
Here's my code so far for this component and corresponding css and html. Code Sandbox
import React, { Component } from 'react';
// onclick= (this.expand)
//outside of render:
// expand =(e) => {
// e.target (targets the one they clicked on)
// hide every other element of the class add a class to e.target to increase width and height
// add div to top with nav
// }
class AdminPanel extends Component {
constructor(){
super();
}
expand = (event) => {
event.preventDefault();
var elements = document.querySelectorAll('.title');
debugger;
for (var i=0; i<elements.length; i++){
elements[i].classList.add('hidee');
//hide everything except the one we clicked on
//if event.target != elements[i] then add a class of hidee
//add a class to event.target called expand
//make a css file and put in hidee and expand classes and put the css in
//import that css file at the top of this file
}
alert('hi');
}
render(){
return (
<div class="box">
<div class="container">
<div class="row">
<div className="col-sm-6 ">
<a href="#"/>
<div class="box-part text-center">
<div class="title" onClick={this.expand}>
<img class="card-img-top" src="https://visualpharm.com/assets/224/Folder-595b40b85ba036ed117dd27b.svg" alt=" image"/>
</div>
<div className="text">
<span><h2>Thought Archives</h2></span>
</div>
</div>
</div>
<div className="col-sm-6 ">
<a href="#"/>
<div class="box-part text-center">
<div class="title" onClick={this.expand}>
<img class="card-img-top" src="https://visualpharm.com/assets/168/Read%20Message-595b40b75ba036ed117d88f5.svg" alt=" image"/>
</div>
<div className="text">
<span><h2>Incoming Requests</h2></span>
</div>
</div>
</div>
<div className="col-sm-6 ">
<a href="#"/>
<div class="box-part text-center">
<div class="title" onClick={this.expand}>
<img class="card-img-top" src="https://visualpharm.com/assets/375/Create-595b40b75ba036ed117d7bbf.svg" alt=" image"/>
</div>
<div className="text">
<span><h2>Create New</h2></span>
</div>
</div>
</div>
<div className="col-sm-6 ">
<a href="#"/>
<div class="box-part text-center">
<div class="title" onClick={this.expand}>
<img class="card-img-top" src="https://static.thenounproject.com/png/5040-200.png" alt=" image"/>
</div>
<div className="text">
<span><h2>Your Community</h2></span>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
}
export default AdminPanel;
/* css for AdminPanel.js*/
#import url('https://fonts.googleapis.com/css?family=Josefin+Sans:100,300,400,600,700');
body{
background: #f2f2f2;
font-family: 'Josefin Sans', sans-serif;
}
h3{
font-family: 'Josefin Sans', sans-serif;
}
.box{
padding:60px 0px;
}
.card-img-top {
height: 100px;
width: 30%;
}
.box-part{
background:#FFF;
border-radius:10px;
padding:60px 10px;
margin:30px 0px;
}
.box-part:hover{
background:#4183D7;
}
.box-part:hover .fa ,
.box-part:hover .title ,
.box-part:hover .text ,
.box-part:hover a{
color:#FFF;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}
.text{
margin:20px 0px;
}
.fa{
color:#4183D7;
}
/* end css for adminPanel.js*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
</body>
</html>
Update the state of the component in the expand function using setState, When the state changes to true, the render method gets the new state.
constructor(){
super();
this.expand = this.expand.bind(this);
this.state = {
hide: !this.state.hide
};
}
expand = (event) => {
event.preventDefault();
this.setState({
hide: true
});
alert('hi');
}
{ this.state.hide ?
<div className="col-sm-6 ">
<a href="#"/>
<div class="box-part text-center">
<div class="title" onClick={this.expand}>
<img class="card-img-top" src="https://visualpharm.com/assets/168/Read%20Message-595b40b75ba036ed117d88f5.svg" alt=" image"/>
</div>
<div className="text">
<span><h2>Incoming Requests</h2></span>
</div>
</div>
</div>
: null }
if I were your, I'd definitely split the div's with the class of title into a separate component and have an initial data with everything each div needs.
If you make that, then you just have to loop through your source of data and render the elements your them to be rendered. As a result, you can show/hide the navbar.
I've created a sandbox in which you can see how to control the state of your component and render whatever you want accordingly.
Assume that each div is called card
Hope that could help!
You can do it easily as below :
class AdminPanel extends React.Component {
state = {
//Create sections obj in state to maintain your section's class
sections : {
thoughtArchives: {
key: 1,
class: 'hidee',
//add extra data if you want for further use
},
incomingRequests: {
key: 2,
class: 'hidee'
},
createNew: {
key: 3,
class: 'hidee'
},
yourCommunity: {
key: 4,
class: 'hidee'
}
}
}
constructor(props) {
super(props);
}
expand = (sectionKey) => {
//get the prevState
this.setState(prevState => {
//if key matches with section to expand add expand class or add hidee class
for (let k in prevState.sections) {
prevState.sections[k].class = prevState.sections[k].key === sectionKey ? 'expand' : 'hidee'
}
//return sections to update state
return prevState
})
}
render() {
let {sections} = this.state;
return (<div className="box">
<div className="container">
<div className="row">
<div className="col-sm-6 ">
<a href="#"/>
<div className="box-part text-center">
{/* Append expand/hidee class & attach onCLick listener and pass key of section to expand function*/}
<div className={"title " + sections.thoughtArchives.class} onClick={this.expand.bind(this, sections.thoughtArchives.key)}>
<img className="card-img-top" src="https://visualpharm.com/assets/224/Folder-595b40b85ba036ed117dd27b.svg" alt=" image"/>
</div>
<div className="text">
<span>
<h2>Thought Archives</h2>
</span>
</div>
</div>
</div>
<div className="col-sm-6 ">
<a href="#"/>
<div className="box-part text-center">
<div className={"title " + sections.incomingRequests.class} onClick={this.expand.bind(this, sections.incomingRequests.key)}>
<img className="card-img-top" src="https://visualpharm.com/assets/168/Read%20Message-595b40b75ba036ed117d88f5.svg" alt=" image"/>
</div>
<div className="text">
<span>
<h2>Incoming Requests</h2>
</span>
</div>
</div>
</div>
<div className="col-sm-6 ">
<a href="#"/>
<div className="box-part text-center">
<div className={"title " + sections.createNew.class} onClick={this.expand.bind(this, sections.createNew.key)}>
<img className="card-img-top" src="https://visualpharm.com/assets/375/Create-595b40b75ba036ed117d7bbf.svg" alt=" image"/>
</div>
<div className="text">
<span>
<h2>Create New</h2>
</span>
</div>
</div>
</div>
<div className="col-sm-6 ">
<a href="#"/>
<div className="box-part text-center">
<div className={"title " + sections.yourCommunity.class} onClick={this.expand.bind(this, sections.yourCommunity.key)}>
<img className="card-img-top" src="https://static.thenounproject.com/png/5040-200.png" alt=" image"/>
</div>
<div className="text">
<span>
<h2>Your Community</h2>
</span>
</div>
</div>
</div>
</div>
</div>
</div>)
}
}
export default AdminPanel;
I have list of data which i am binding using Knockoutjs,Now comes for CSS part, i need to align it horizontal.I am not much good in CSS.I have three images and username so i want to align it in Horizontal for my Mobile app below is my code kindly suggest me.
<ul style="list-style: none;" data-role="listview" id="hierarchical-listview" data-bind="foreach:UserProfile">
<li style="background-color:#FFF">
<div style="width:100%;">
<div style="width:50%">
<div style="padding-left:20px;padding-top:10px">
<span data-bind="text:UserId" style="display:none;"></span>
<span data-bind="text:Username"></span>
<img class="profileimage" data-bind="attr: { src: UserImage }" style="width:60px;height:60px;float:left!important;" />
<img data-bind="attr: { src: UserProfileImage }" style="width:30px;height:30px;float:left!important;" />
</div>
</div>
<div style="width:50%;float:left;margin: 0px -20px;">
<img data-bind="attr: { src: UserPostedImage }" style="width:30px;height:30px;float:left!important;" />
<input type="checkbox" class="listcheckbox km-widget km-icon km-check" data-bind="checked:UserSelected" />
</div>
</div>
</div>
</li>
</ul>
Remove all the float from your img containers and the parent div containers.
Provide display: inline-block to all and then vertical-align: middle.
So your img elements should look something like:
<img class="profileimage" data-bind="attr: { src: UserImage }" style = "width:60px; height:60px; display: inline-block; vertical-align: middle;" />
body{
border: 3px red solid;
background-color: green !important;
}
For the convinence of debug,I set body as above.
And the result is shown in the screenshot as below:
See that extra green space at the very bottom? I just can't seem to get rid of it.
The margin of the body of course is all 0 and overflow: hidden is not helping either.
Besides, all of the elements inside the body share the same height.
Alright ,so the html for this page is as below:
<link href="http://news.12reads.cn/style.css" rel="stylesheet"/>
<body class="page page-id-2109 page-template page-template-start page-template-start-php logged-in d2 g2 p2 c2 elegant">
<div id="global" class="global">
<div class="pusher">
<!-- <section id="title"></section> 隐藏课程学习页的page title -->
<!-- 内容区开始 -->
<section id="content" style="background-color: rgb(240, 240, 244); height: 100%; padding-bottom: 698px;">
<div class="container">
<div class="row">
<div class="col-md-9">
<div class="unit_wrap ">
<div id="unit_content" class="unit_content">
<div id="unit" class="unit_title" data-unit="2618">
<div class="instructor">
<img src="http://peixun:8888/wp-content/uploads/avatars/1/581214182bd15-bpthumb.jpg" class="avatar user-1-avatar avatar-96 photo" alt="12reads的头像" height="96" width="96"> <span><strong>讲师</strong><br>12reads</span>
</div><i class="icon-printer-1"></i><span><i class="icon-clock"></i> 49 分钟</span> <br><h1 class="well well-sm" style="font-size: 18px;">管理思维的演变</h1>
</div>
<div class="main_unit_content unit_class"><div id="a1"><object pluginspage="http://www.macromedia.com/go/getflashplayer" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=11,3,0,0" id="ckplayer_a1" name="ckplayer_a1" align="middle" height="400" width="100%"><param name="allowScriptAccess" value="always"><param name="allowFullScreen" value="true"><param name="quality" value="high"><param name="bgcolor" value="#FFF"><param name="wmode" value="transparent"><param name="movie" value="http://peixun:8888/wp-content/themes/peixun/ckplayer/ckplayer.swf"><param name="flashvars" value="f=http://mov.bn.netease.com/open-movie/nos/mp4/2013/12/02/S9E63A72V_sd.mp4&c=0"><embed allowscriptaccess="always" allowfullscreen="true" quality="high" bgcolor="#FFF" wmode="transparent" src="http://peixun:8888/wp-content/themes/peixun/ckplayer/ckplayer.swf" flashvars="f=http://mov.bn.netease.com/open-movie/nos/mp4/2013/12/02/S9E63A72V_sd.mp4&c=0" name="ckplayer_a1" id="ckplayer_a1" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" align="middle" height="400" width="100%"></object></div>
<script type="text/javascript" src="http://peixun:8888/wp-content/themes/peixun/ckplayer/ckplayer.js" charset="utf-8"></script>
<script type="text/javascript">
var flashvars={
f:"http://mov.bn.netease.com/open-movie/nos/mp4/2013/12/02/S9E63A72V_sd.mp4",
c:0
};
var params={bgcolor:"#FFF",allowFullScreen:true,allowScriptAccess:"always",wmode:"transparent"};
var video=["http://mov.bn.netease.com/open-movie/nos/mp4/2013/12/02/S9E63A72V_sd.mp4->video/mp4"];
CKobject.embed("http://peixun:8888/wp-content/themes/peixun/ckplayer/ckplayer.swf","a1","ckplayer_a1","100%","400",false,flashvars,video,params);
</script>
</div> <div class="unit_prevnext"><div class="col-md-3">上一课时</div><div class="col-md-6"></div><div class="col-md-3"></div></div> </div>
<input id="hash" name="hash" value="bf905d9c31" type="hidden"><input name="_wp_http_referer" value="/course-status/" type="hidden"><input id="course_id" name="course" value="2605" type="hidden"> <div id="ajaxloader" class="disabled"></div>
<div class="side_comments"><a id="all_comments_link" data-href="">查看全部</a>
<ul class="main_comments">
<li class="hide">
<div class="note">
<img src="http://peixun:8888/wp-content/uploads/avatars/1/581214182bd15-bpthumb.jpg" class="avatar user-1-avatar avatar-96 photo" alt="12reads的头像" height="96" width="96"> 12reads <div class="unit_comment_content"></div>
<ul class="actions">
<li><a class="tip edit_unit_comment" title="" data-original-title="Edit"><i class="icon-pen-alt2"></i></a></li>
<li><a class="tip public_unit_comment" title="" data-original-title="Make Public"><i class="icon-fontawesome-webfont-3"></i></a></li>
<li><a class="tip private_unit_comment" title="" data-original-title="Make Private"><i class="icon-fontawesome-webfont-4"></i></a></li>
<li><a class="tip reply_unit_comment" title="" data-original-title="Reply"><i class="icon-curved-arrow"></i></a></li>
<li><a class="tip instructor_reply_unit_comment" title="" data-original-title="Request Instructor reply"><i class="icon-forward-2"></i></a></li>
<li><a data-href="#" class="popup_unit_comment" title="Open in Popup" target="_blank"><i class="icon-windows-2"></i></a></li>
<li><a class="tip remove_unit_comment" title="" data-original-title="Remove"><i class="icon-cross"></i></a></li>
</ul>
</div>
</li>
</ul>
<a class="add-comment">Add a Note</a>
<div class="comment-form">
<img src="http://peixun:8888/wp-content/uploads/avatars/1/581214182bd15-bpthumb.jpg" class="avatar user-1-avatar avatar-96 photo" alt="12reads的头像" height="96" width="96"> <span>YOU</span> <article class="live-edit" data-model="article" data-id="1" data-url="/articles">
<div class="new_side_comment" data-editable="true" data-name="content" data-text-options="true" contenteditable="true">
添加评论 </div>
</article>
<ul class="actions">
<li><a class="post_unit_comment tip" title="" data-original-title="发布"><i class="icon-fontawesome-webfont-4"></i></a></li>
<li><a class="remove_side_comment tip" title="" data-original-title="Remove"><i class="icon-cross"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="course_time">
<strong>剩余时间 : <span>0 Days</span></strong> </div>
<div class="progress course_progressbar" data-increase-unit="50" data-value="50.00">
<div class="bar animate cssanim stretchRight load" style="width: 50.00%;"><span>50.00%</span></div>
</div><div class="course_timeline ">
<ul><li id="unit2609" class="unit_line done"><span></span> <a class="unit" data-unit="2609">管理思维导论</a></li><li id="unit2618" class="unit_line active done"><span></span> <a class="unit" data-unit="2618">管理思维的演变</a></li></ul></div> <div class="more_course">
返回课程
<form action="http://peixun:8888/course/%e7%ae%a1%e7%90%86%e6%80%9d%e7%bb%b4/" method="post">
<input name="review_course" class="review_course unit_button full button" value="评价课程" type="submit"><input name="submit_course" class="review_course unit_button full button" value="完成课程" type="submit">
<input id="review" name="review" value="e9c8949274" type="hidden"><input name="_wp_http_referer" value="/course-status/" type="hidden"> </form>
</div>
</div>
</div>
</div>
</section>
</div><!-- END PUSHER -->
</div><!-- END MAIN -->
<span class="text-options" style="top: -999px; left: -999px;"><button class="url-button">U</button><span class="input-text"><input name="liveedit-url" type="text"></span><button class="bold-button">B</button><button class="italic-button">I</button><button class="strikethrough-button">ABC</button><button class="unorderedlist-button">L</button></span></body>
This is a simple common mistake. the body element has a default value of 8px on margin property. What you gotta do is
html, body {
height: 100%;
width: 100%;
margin: 0;
}
The 100% width and height are optional, I just always use that snippet to fill up the whole screen with body.
I am having that problem with Bootstrap. Looks like the culprit is the ROW class. I solved it by setting the with of the row to 100%:
<div class="row" style="width:100%">
I tested with your code, not in a jsfiddle and I added this:
.page {
height: 100%;
margin: 0;
}
html {
position: relative;
height: 100%;
}
If you can't set html properties, on .page add min-height: 100vh. vh is viewport units, this case horizontal.
.page {
height: 100%;
margin: 0;
min-height: 100vh;
}
Consider I've a sample layout in bootstrap 3:
<div class="row">
<div class="col-md-6">
<div class="row">
<img class="filler" src="some/other/img.jpg" />
</div>
<div class="row">
<img class="filler" src="some/other/img.jpg" />
</div>
</div>
<div class="col-md-6">
<img class="main-img" src="some/link.jpg" style="width: 100%; height: auto" />
</div>
</div>
How can I make images with filler class to auto-scale to gain the same height as the image with main-img class.
I want to reach the following effect:
________ ____________
|.filler | |
|________|auto-scale |
|.filler |width: 100% |
|________|____________|
Is that event possible only with css?
EDIT:
I meant a height not, width (my bad);
Basically you didn't pay enough attention to the Bootstrap HTML markup which is quite important for it to remain "smart" and responsive.
.filler,
.main-img {
width: 100%;
height: auto
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="row-fluid">
<div class="col-md-6">
<img class="filler" src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" />
<img class="filler" src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image2.jpg" />
</div>
<div class="col-md-6">
<img class="main-img" src="http://www.gettyimages.com/gi-resources/images/frontdoor/creative/PanoramicImagesRM/FD_image.jpg" />
</div>
After the lil' talk we had in the comments, decided to back what i said with some code. Done with jQuery, as it was faster (for me). If you don't already have jQuery in your project, you should probably rewrite it in javascript. Not fully tested, but I don't see any reason why it shouldn't work cross-browser, cross-platforms:
document.initPictures = function() {
$('.resizeMe').css({
'height': $('#theContainer .col-sm-6').eq(1).height() + 6,
'display': 'flex',
'flex-direction': 'column',
'transition': 'height .4s cubic-bezier(0.55, 0, 0.55, 0.2)'
});
$('.resizeMe img').each(function() {
var src = $(this).attr('src');
$('.resizeMe').append('<div style="flex-basis: 50%; background-image: url(' + src + '); background-size:cover; background-position: center center"' + '</div>');
$(this).remove();
})
};
document.resizePictures = function() {
if ($('#theContainer').outerWidth() > 768) {
$('.resizeMe').css({
'height': $('#theContainer .col-sm-6').eq(1).height()
});
} else {
$('.resizeMe').css({
'height': $('.resizeMe').outerWidth()
});
}
};
$(window).resize(function() {
document.resizePictures();
});
document.initPictures();
.main-img {
width: 100%;
height: auto
}
#theContainer {
margin-top: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="row-fluid" id="theContainer">
<div class="col-sm-6 resizeMe">
<img class="filler" src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" />
<img class="filler" src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image2.jpg" />
</div>
<div class="col-sm-6">
<img class="main-img" src="http://joombig.com/demo-extensions1/images/gallery_slider/Swan_large.jpg" />
</div>
NOTE: if anyone could explain to me why $('#theContainer .col-sm-6').eq(1).height() is 6px smaller at page load than afterwards, I'd be really happy.
Im trying to get descriptions next to a 485 wide picture, I did it on my ways, but when trying to add a new line with the same picture and description something like this:
(source: gyazo.com)
But when I copy and paste the exact same line of code and add margin-top to that div, or even <br /> it won't make any space between them, that's how it is looking now:
(source: gyazo.com)
What is causing that? very interesting..
I am using twitter bootstrap framework.
Code:
<body>
<div class="container">
<div class="works">
<div class="field1">
<div class="work1">
<span class="title-col">Client: <span class="name-col">Joshua</span></span><br />
<span class="title-col">Description: <span class="name-col">A suavely, asthetic, betting website based <br />off of the widely expanding MOBA game League of Legends.<br />
It was a great honor doing this design, gaming <br />websites are always fun!</a>
<br />
<br />
<span class="title-col">Category:</span> <div class="tag_webdesign"></div>
</div>
<img class="examplefloat" src="img/p1.png"/>
</div>
<br />
<div class="field1">
<div class="work1">
<span class="title-col">Client: <span class="name-col">Joshua</span></span><br />
<span class="title-col">Description: <span class="name-col">A suavely, asthetic, betting website based <br />off of the widely expanding MOBA game League of Legends.<br />
It was a great honor doing this design, gaming <br />websites are always fun!</a>
<br />
<br />
<span class="title-col">Category:</span> <div class="tag_webdesign"></div>
</div>
<img class="examplefloat" src="img/p1.png"/>
</div>
</div>
</div>
<br />
</body>
CSS
.name-col {
color: #d3d3d3;
}
.title-col {
color: #b2b2b2;
float: left;
position: relative;
top: 7px;
}
.field2 {
margin-top: 50px;
}
.works {
margin-top: 10%;
}
.examplefloat {
float: left;
border: solid 1px #000;
margin-left: 50px;
}
.tag_webdesign {
background-image: url("../img/web-design.png");
width: 89px;
height: 37px;
float: left;
}
.work1 {
float: left;
}
Live preview:
http://justxp.plutohost.net/themetheory/portfolio.html
What is causing that problem?
Thanks
Add this rule to your CSS
.field1 {
margin-bottom: 30px;
overflow: hidden;
}
This will clear the floated elements in your .field1 container and apply a margin of 30px to its bottom.
Find the end </div> that pairs with the <div class="works">
Add above that end </div>:
<div style="clear:both"></div>
Should look like this.................
<body>
<div class="container">
<div class="works">
<div class="field1">
<div class="work1">
<span class="title-col">Client: <span class="name-col">Joshua</span></span><br />
<span class="title-col">Description: <span class="name-col">A suavely, asthetic, betting website based <br />off of the widely expanding MOBA game League of Legends.<br />
It was a great honor doing this design, gaming <br />websites are always fun!</a>
<br />
<br />
<span class="title-col">Category:</span> <div class="tag_webdesign"></div>
</div>
<img class="examplefloat" src="img/p1.png"/>
<div style="clear:both></div> //MY ADDITION
</div>
<br />
<div class="field1">
<div class="work1">
<span class="title-col">Client: <span class="name-col">Joshua</span></span><br />
<span class="title-col">Description: <span class="name-col">A suavely, asthetic, betting website based <br />off of the widely expanding MOBA game League of Legends.<br />
It was a great honor doing this design, gaming <br />websites are always fun!</a>
<br />
<br />
<span class="title-col">Category:</span> <div class="tag_webdesign"></div>
</div>
<img class="examplefloat" src="img/p1.png"/>
<div style="clear:both></div> //MY ADDITION
</div>
</div>
</div>
<br />
</body>
What you want to do is use a clearfix solution on your .field1 divs: https://stackoverflow.com/a/1633170/1778054
In essence, add this to your CSS:
/* For modern browsers */
.field1:before,
.field1:after {
content:"";
display:table;
}
.field1:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.field1 {
zoom:1;
}
If you take the float:left; off the .examplefloat (used on the images) class it will fix the margin issue.