I have this html:
<div id="gallery-1" class="gallery galleryid-39 gallery-columns-3 gallery-size-thumbnail gallery1">
<script type="text/javascript"></script>
<dl class="gallery-item"></dl>
<dl class="gallery-item"></dl>
<dl class="gallery-item"></dl>
<br style="clear: both"></br>
<dl class="gallery-item"></dl>
<dl class="gallery-item"></dl>
<br style="clear: both"></br>
</div>
and this css:
.gallery dl:first-child {
display: none;
}
and it`s not working, I do not know why
dl:first-child won't match the <dl> element since it is not the first child of its parent. (Actually the first child of .gallery is a <script> element)
In order to target the first <dl> element, you could use :first-of-type pseudo class instead:
.gallery > dl:first-of-type {
display: none;
}
script is the first child of div. so it cant get selected. if you want to access first dl then use dl:first-of-type
Here is fiddle link
<div id="gallery-1" class="gallery galleryid-39 gallery-columns-3 gallery-size-thumbnail gallery1">
<script type="text/javascript"></script>
<dl class="gallery-item"></dl>
<dl class="gallery-item"></dl>
<dl class="gallery-item"></dl>
<br style="clear: both"></br>
<dl class="gallery-item"></dl>
<dl class="gallery-item"></dl>
<br style="clear: both"></br>
</div>
.gallery > dl:first-of-type {
display:none
}
Related
I'm using Bootstrap 3.3.7 and I have a dl list configured as horizontal. I would like to visualize a full length row inside a <dl> tag.
<dl class="dl-horizontal">
<dt>Label 1</dt>
<dd>Text 1</dd>
<dt>how to display a full length text?</dt>
<dd></dd>
<dt>Label 2</dt>
<dd>Text 2</dd>
</dl>
I would like to obtain something like this:
Try this
Check Demo here
HTML:
<dl class="dl-horizontal">
<dt>Label 1</dt>
<dd>Text 1</dd>
<dt class="fullWidth"> 26 Lakeshore View, Sentosa Cove, Singapore 26 Lakeshore View, Sentosa Cove.</dt>
<dd></dd>
<dt>Label 2</dt>
<dd>Text 2</dd>
</dl>
CSS:
.fullWidth + dd {
margin-left: 0;
width: unset;
}
.dl-horizontal dt.fullWidth {
width: 100%;
text-overflow: unset;
white-space: initial;
text-align: left;
}
This fiddle link may solve your problem.
Codes are as followed.
HTML
<div class="container">
<dl class="dl-horizontal">
<div class="row">
<dt class="col-xs-6">Label 1</dt>
<dd class="col-xs-6">Text 1</dd>
</div>
<div class="row">
<dd class="col-md-12">I guess this is what you are looking. This may help you. in bootstrap each row is devided into 12 columns. For more information you can check bootstrap grid system. </dd>
</div>
<div class="row">
<dt class="col-xs-6">Label 2</dt>
<dd class="col-xs-6">Text 2</dd>
</div>
<div class="row">
<dd class="col-md-12">Defination of lable2 Text2. This contains the defination.</dd>
</div>
</dl>
</div>
You need to add bootstrap.js and bootstrap.css files.
I'm trying to make a heading that attaches it self to my listview in bootstrap. However the heading does not extend as far as the listview, even though they are in the same column.
I want the title to extend as far as the list, there must be something I'm missing in the CSS.
My Code:
<div class="row">
<div class="col-sm-5 col-md-5 col-lg-5" style="margin-left:40px">
<div class="heading-surround-default-custom">
<div>
<asp:Label ID="LabelTitel" runat="server" CssClass="heading-default-custom" Text="Titel"></asp:Label>
</div>
</div>
<div class="list-group">
<asp:ListView ID="ListViewWebsite" runat="server" DataKeyNames="WebsiteID" ClientIDMode="AutoID">
<ItemTemplate>
<tr>
<td>
//List code
</td>
</tr>
</ItemTemplate>
</asp:ListView>
</div>
</div>
</div>
Custom CSS used in code:
.heading-default-custom {
color:#FFF;
margin-left: 10px;
font-weight:200;
font-weight:bold;
font-size:20px;
}
.heading-surround-default-custom {
background-color:#FF6600;
}
Sorry for mixing style, CSS and poor formatting. A result of repetitive trial and error. Pretty sure I'm missing something really simple.
You can use Bootstrap's built in panel classes to help you here (docs).
Bootply example: http://www.bootply.com/mT5mVxVpOT
HTML:
<div class="panel panel-custom">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
<ul class="list-unstyled">
<li>Panel content 1</li>
<li>Panel content 2</li>
<li>Panel content 3</li>
</ul>
</div>
</div>
Then add your CSS to tweak the colors etc.
.panel-custom .panel-heading {
color:#FFF;
font-weight:200;
font-weight:bold;
font-size:20px;
background-color:#FF6600;
border-radius: 0;
}
.panel-custom .panel-body{
background-color: #eee;
}
I would like the button to also be inside the div with 'border-blue', but it doesn't. If I remove 'pull-right' from the button's class, it will be in. So, how to keep the button inside the div, and also float it to the right.
http://www.bootply.com/KRnvb6Kk4W
HTML :
<form id="LoginForm">
<div class="container-fluid">
<div class="row-fluid">
<div class="centering text-center col-lg-3 border-blue">
<div class="drop-shadow raised">
<input type="text"/>
</div>
<br />
<div class="drop-shadow raised">
<input type="text"/>
</div>
<br />
<div>
<span id="spMsg"></span>
<button type="submit" class="btn-login-base pull-right">
<i class="fa fa-share-square"></i>
</button>
</div>
</div>
</div>
</div>
</form>
CSS :
.border-blue {border:1px solid blue;}
.row-fluid
{
height: 100%;
display:table-cell;
vertical-align: middle;
}
.centering
{
float:none;
margin:0 auto;
padding:0;
}
.btn-login-base
{
width:32px;
height:34px;
padding:0;
background:transparent;
border:none;
}
//bootstrap's .pull-right{float:right !important;}
Add .clearfix class to .border-blue, like this:
<div class="centering text-center col-lg-3 border-blue clearfix">
It will force the container not to collapce because of the inner floated elements.
You can see in this JSFiddle that the search div is centre aligned, how can I make it align to the top?
HTML:
<div id="wrapper">
<div id="banner">
<a href="#"><h1>Title</h2><br />
<h2>Subtitle</h2></a>
<div id="search">
<label>Search</label>
<input type="textbox"/>
<input type="submit" />
<img src="images/logo.png" alt="logo"/>
</div>
</div>
CSS:
#wrapper{
width:85%;
margin:35px auto;
}
#banner{
height:150px;
padding:30px;
padding-bottom:5px;
}
#search{
float:right;
display:inline;
width:38%;
}
#banner h1, #banner h2{
margin:0;padding:0;color:#A2A2A2;display:inline;
}
#banner h1{
font-size:50px;
}
#banner h2{
font-size:35px;
}
You have at least two options. If you want to float the search div to right, move it up in the html code. Now the search div floats right to the elements that are after it in the code. (Note that you had an unclosed div in the original code.)
See the Fiddle
<div id="wrapper">
<div id="banner">
<div id="search">
<label>Search</label>
<input type="textbox"/>
<input type="submit" />
<img src="images/logo.png" alt="logo"/>
</div>
<a class="" href="#"><h1>Title</h2><br />
<h2 class="">Subtitle</h2></a>
</div>
</div>
Other option is to make the preceding elements (a and h2) float to the left side of the search div but that doesn't look so good as the search div is not at the right edge of the browser window.
I am using the following code to display lables and checkboxes/textboxes in my MVC application.
<div style="width:auto; clear:both;">
<div class="metadata-left">Default Domain: </div>
<div class="metadata-right-domain"><%= Html.EditorFor(c => c.IsDefault) %></div>
<br />
<div class="metadata-left">Disabled:</div>
<div class="metadata-right-domain"><%= Html.EditorFor(c => c.IsDisabled) %></div>
<br/>
<div class="metadata-left">Name:</div>
<div class="metadata-right-domain"><%= Html.EditorFor(c => c.Name) %></div>
<br />
<div class="metadata-left">Domain Name:</div>
<div class="metadata-right-domain"><%= Html.EditorFor(c => c.DomainName) %></div>
<br />
<div class="metadata-left">Forward Url:</div>
<div class="metadata-right-domain"><%= Html.EditorFor(c => c.ForwardUrl)%></div>
<br />
<div class="metadata-left">Unsubscribe Url: </div>
<div class="metadata-right-domain"><%= Html.EditorFor(c => c.UnSubscribeUrl)%></div>
<br />
<div class="metadata-left">Privacy Url:</div>
<div class="metadata-right-domain"><%= Html.EditorFor(c => c.PrivacyUrl)%></div>
<br />
<div class="metadata-left">Brand Number:</div>
<div class="metadata-right-domain"><%= Html.EditorFor(c => c.BrandNumber)%>
<%= Html.HiddenFor(c=>c.Id) %></div>
<br />
</div>
<div style="margin-left: 0; text-align: center; padding-top: 4%; clear: both;" class="saveArea">
Save or <a href="/Admin/EmailBlast/Domains" class="cancel">
Cancel</a>
<img src="/Content/img/loader.gif" style="display: none;" class="loading" />
</div>
But I am not getting the alignment right. See picture:
This is the stylesheet I use:
.metadata-left
{
float: left;
width: auto;
text-align: right;
display:block;
}
.metadata-right-domain
{
float: right;
width:auto;
padding-left: 3%;
text-align: left;
}
How can I get the right alignment?
EDIT: I display three DIVs side by side (one shown in the picture).
You need to give your DIV a width. Auto is not enough, so the div box is only as wide as the content. You can use % for your purpose.
It is a table. So just use table element to mark up this data:
<style>
.example TD {text-align: right; }
</style>
<table class="example">
<tr>
<th scope="row">Default Domain</th>
<td>example.com</td>
</tr>
<tr>
<th scope="row">Disabled</th>
<td>No</td>
</tr>
</table>
If you need, you can place multiple tables side by side. For example, with float property:
<style>
.example-tables TABLE {float: left; }
</style>
<div class="example-tables">
<table>
<!-- table 1 -->
</table>
<table>
<!-- table 2 -->
</table>
<table>
<!-- table 3 -->
</table>
</div>