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.
Related
I know there's a ton of similar questions about this on here, but none seem to address the issue for me.
css code:
/*Deferred Payment Popup*/
div.DeferredPaymentPopup {
}
div.DeferredPaymentPopup input.RefreshImage {
background-image: url(../Images/Refresh-icon.png);
background-position: left top;
display: inline-block;
float: left;
width: 15px;
height: 18px;
}
Code on page -
<div id="DeferredPaymentPopup" class="DeferredPaymentPopup newportal popup" title="Deferred Payment Calculator">
<div data-bind="with: statement.viewModel.DeferredPaymentModel">
...
<div id="divDollarCalc">
<div style="float: left; padding-left: 4px">
<input type="image" onclick="return false;" title="Refresh" class="RefreshImage" />
</div>
</div>
There's a number of nested divs on the page, and a couple of them have their own IDs - I included one of them for illustration.
No issues in IE or Edge.
All looks well on inspect in Chrome:
Thoughts?
You can use src attribute of input[type=image]
<input type="image" src="../Images/Refresh-icon.png" />
Clarification for the questions from comments:
For input[type=image] and img tags in chrome, if there is no src attribute or invalid src attribute, browser shows the icon of broken image which is not background, that's why you cant override it from css background.
However img tag is not showing the icon when there is no src attribute at all, it is showing only when the value of src is invalid.
But for input[type=image] it is showing up even when there is no src attribute, this behavior is different for img and input[type=image].
I don't know the exact reason behind that, but my guess is that may be src is optional for img but not for input[type=image].
As per the problem input[type=submit] not working, if you can provide the new code you have tried we should be able to help you with that.
This is a small experiment that shows how it works
<p><strong>input type="image"</strong></p>
<p>Without src</p>
<input type="image" style="display:inline-block;width: 40px;height: 40px;background: #000;"/>
<p>With src</p>
<input type="image" style="display:inline-block;width: 40px;height: 40px;background: #000;" src="https://static-cdn.jtvnw.net/jtv_user_pictures/e91a3dcf-c15a-441a-b369-996922364cdc-profile_image-300x300.png"/>
<br />
<br />
<p><strong>input type="submit"</strong></p>
<p>With background</p>
<input type="submit" style="display:inline-block;width: 40px;height: 40px;background: #000;"/>
<br />
<br />
<p><strong>img</strong></p>
<p>Without src</p>
<img style="display:inline-block;width: 40px;height: 40px;background: #000;"/>
<p>With empty src</p>
<img style="display:inline-block;width: 40px;height: 40px;background: #000;" src />
<p>With invalid src</p>
<img style="display:inline-block;width: 40px;height: 40px;background: #000;" src="//avcs" />
<p>With valid src</p>
<img style="display:inline-block;width: 40px;height: 40px;background: #000;" src="https://static-cdn.jtvnw.net/jtv_user_pictures/e91a3dcf-c15a-441a-b369-996922364cdc-profile_image-300x300.png" />
Use .DeferredPaymentPopup, input.RefreshImage{...} because RefreshImage is not a child of the DeferredPaymentPopup div
Edit
Is this what you intend to achieve? Instead of input type="image" , I used text
div.DeferredPaymentPopup {}
div.DeferredPaymentPopup input.RefreshImage {
background: url("http://res.cloudinary.com/sayob/image/upload/v1526907328/483257_vwhhfw.jpg") no-repeat left top;
display: inline-block;
float: left;
width: 100px;
height: 18px;
}
<div id="DeferredPaymentPopup" class="DeferredPaymentPopup newportal popup" title="Deferred Payment Calculator">
<div data-bind="with: statement.viewModel.DeferredPaymentModel">
<div id="divDollarCalc">
<div style="float: left; padding-left: 4px">
<input type="text" onclick="return false;" title="Refresh" class="RefreshImage" />
</div>
</div>
</div>
</div>
Use .DeferredPaymentPopup, input.RefreshImage{...} because RefreshImage is not a child of the DeferredPaymentPopup div
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;" />
Given the following example, what would be a good approach to position the Search button in line with the date input controls?
I gave it a shot with Bootstrap (2 rows, 3 columns) but the layout should stick to the left and keep the 3 logical columns together. And maybe there's an easier solution I am overlooking.
JS Bin HTML
Note: based on the simplified output from Telerik's Kendo UI combined with ASP.NET MVC.
Flexbox requires IE10+
Here is the solution that works everywhere and won't break bootstrap's responsiveness http://output.jsbin.com/ladezahija/1/
Idea is to apply to elements (blocks with date and search button) next rule:
.element {
display: inline-block;
vertical-align: bottom;
}
In an example I had to use float: none to redefine previously added property by bootstrap.
Also make sure you add a separate class for container and inner elements you work on.
I would go with CSS Flex.
using this CSS would align them for you. (you will need some vendor prefixes)
$("#datepicker").kendoDatePicker();
$("#grid").kendoGrid({
dataSource: [
{ foo: "foo", bar: "bar" }
]
});
.container-fluid {
display: flex;
justify-content: space-around;
}
.container-fluid > div {
align-self: flex-end;
}
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<div class="container-fluid">
<div style="margin: 20px; float: left;">
<h4>
<label for="StartDate">From</label>
</h4>
<span class="k-widget k-datepicker k-header">
<span class="k-picker-wrap k-state-default">
<input name="startDate" class="k-input" id="startDate" role="combobox" aria-disabled="false" aria-expanded="false" aria-readonly="false" aria-owns="startDate_dateview" style="width: 100%;" type="text" value="1-11-2015" data-val="true" data-role="datepicker" />
<span class="k-select" role="button" unselectable="on">
<span class="k-icon k-i-calendar" unselectable="on">select</span>
</span>
</span>
</span>
</div>
<div style="margin: 20px; float: left;">
<h4>
<label for="EndDate">To</label>
</h4>
<span class="k-widget k-datepicker k-header">
<span class="k-picker-wrap k-state-default">
<input name="endDate" class="k-input" id="endDate" role="combobox" aria-disabled="false" aria-expanded="false" aria-readonly="false" aria-owns="endDate_dateview" style="width: 100%;" type="text" value="24-12-2015" data-val="true" data-role="datepicker" />
<span class="k-select" role="button" unselectable="on">
<span class="k-icon k-i-calendar" unselectable="on">select</span>
</span>
</span>
</span>
</div>
<div style="margin: 20px; float: left;">
<button tabindex="0" class="k-button" id="applyFilters" role="button" aria-disabled="false" data-role="button">Search</button>
</div>
</div>
You didn't used bootstrap properly. Anyway I have two solution.
First Solution:=> Add a blank h4 <h4> </h4> into last div.
Second Solution:=> Use margin-top:60px to k-button.
I have a page with this elements:
<body>
<div class="C2">
<div class="Ban">
<div class="blockWithLabel position BankCode">
<span>BankCode</span>
<br />
<input type="text"/>
</div>
<div class="blockWithLabel position BranchCode">
<span>BranchCode</span>
<br />
<input type="text" style="width:500px"/>
</div>
<div class="blockWithLabel position AccountNumber">
<span>AccountNumber</span>
<br />
<input type="text"/>
</div>
<div class="blockWithLabel position CheckDigits">
<span>CheckDigits</span>
<br />
<input type="text"/>
</div>
<div class="blockWithLabel position BankName">
<span>BankName</span>
<br />
<input type="text"/>
</div>
<div class="position validator">
<div class="validator">VALIDATOR</div>
</div>
</div>
</div>
</body>
I want to apply this style:
.Ban { overflow:hidden }
div.blockWithLabel { display:inline-table; overflow:none; }
.C2 { background-color: blue; }
.C2 div.blockWithLabel { background-color:yellow; margin:2px;}
.C2 div.position { float:left}
With all browsers, I have (if the width of the screen is enough big) 6 elements in the same line
Now, I want to make breaks using
.C2 div.position.AccountNumber, .C2 div.position.validator { clear:left }
The problem is that with IE7, AccountNumber appears in a new line, but the next elements CheckDigit and BankName doesn't appear in the same line but in the previous !!
How can I fix it ?
use conditional comments for IE7
<!--[if lte IE 7]>
<style type="text/css">
/* hide other layout for other browsers by
setting display to none
*/
.C2 {
display:none;
}
</style>
Use ie7 formatting here with tables instead of divs.
<table>
<TR>
<T...................
<![endif]-->
I have narrowed down the culprit to either a SPAN or a DIV in lines 27-33 but cant quite get it... if i remove the span that makes the font below the press muted, it fixes the spacing issue at the top of the page but makes that text way to large
u.neighborrow.com/items/indexb
<div id="slide_one" class="bg"><!--slide #1-->
<div class="slide-content">
<div class="nhome">
<div style="margin-top:22px;color:#000;font-size:30px;margin-left:200px;width:408px">
The cheaper, greener, easier, better way to have stuff.
<span style="font-size: 13px; position: relative; top: -2px"> <br /></span>
<?php echo $form->create('Item', array('controller' => 'items', 'action' => 'recent/2')); ?>
<div class="input text required">
<label for="ItemItem"></label><input type="text" id="ItemItem" value="" maxlength="255" style="font-size: 25px; width: 200px; margin: 5px 0pt;" name="data[Item][item]">
<input type="submit" value="Search" style="font-size: 22px" />
</div>
<?php echo $form->end(); ?>
<div style="font-size: 13px; position: relative; top: -2px; line-height: 1.4em;"> <strong>Search Tips:</strong> Need a camera or a book for a trip? Want to try an iPAD before you buy it? Need a tool for a project or a tent for an event? <br />
Borrow these things from your neighbors, The <i>owner</i>-ship has SAILED!</div>
<span style="font-weight:normal;color:#ccc;font-size:14px;line-height:20px">Still not sure what to borrow? <br />
Browse the borrowables or <br />
Lend something safely and securely<br />
</span>
<div>
<div style="padding:5px;text-align:center"><img src="/images/press_wide.jpg"></div>
<span style="font-weight:normal;color:#ccc;font-size:14px;line-height:20px"> The media adores us, our users love us,our friends <i>like us</i>,
<center><iframe src="http://www.facebook.com/plugins/like.php?href=www.neighborrow.com&layout=standard&show_faces=false&width=350&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height: 30px; text-align: center;margin-top:0px;"></iframe></center>
(oh yeah, and mother earth has a crush on us:)</div></span>
<hr color="#CCC" />
</div>
</div>
</div>
</div>
</div>
and i know i need to get rid of the inline styles:)
got some crazy margins:
<div class="main-content" style="margin-top:200px">
It's in div class="main content" style="margin-top: 200px"> It seems to be inline on line 325