I wanted to change position of div.img-box it is not working using below code. How do I do this?
<style>
ul.home-grid-list li:nth-child (odd) div.img-box {float:left;}
ul.home-grid-list li:nth-child (even) div.img-box {float:right;}
</style>
<ul class="home-grid-list">
<li>
<div class="img-box"><img src="images/h-grid-1.jpg"/></div>
<div class="grid-info">
<p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin,</p>
</div>
</li>
<li>
<div class="img-box"><img src="images/h-grid-2.jpg"/></div>
<div class="grid-info">
<p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin,</p>
</div>
</li>
</ul>
Remove space between nth-child and bracket.
It should be:
ul.home-grid-list li:nth-child(odd) div.img-box {float:left;}
ul.home-grid-list li:nth-child(even) div.img-box {float:right;}
Working DEMO here
Related
This is my Vue code and I am using bootstrap-vue, I am using the sidebar inside the card body Ideally it should only appear inside the card-body but it's not working. How can I make it fit either inside the outer div or b-card body?
<template>
<div class="">
<div>
<b-card title="Card Title" body-class="text-center" header-tag="nav">
<template v-slot:header>
<b-nav card-header tabs>
<b-nav-item active>Active</b-nav-item>
<b-nav-item>Inactive</b-nav-item>
<b-nav-item disabled>Disabled</b-nav-item>
</b-nav>
</template>
<b-card-text>
With supporting text below as a natural lead-in to additional content.
</b-card-text>
<b-card-body>
<b-sidebar visible="true" title="Sidebar" shadow>
<div class="px-3 py-2">
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo
odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
risus, porta ac consectetur ac, vestibulum at eros.
</p>
<b-img
src="https://picsum.photos/500/500/?image=54"
fluid
thumbnail
></b-img>
</div>
</b-sidebar>
</b-card-body>
<b-button variant="primary">Go somewhere</b-button>
</b-card>
</div>
</div>
</template>
The sidebar wasn't really designed to be inside a container. but instead be used as an off-canvas menu for the entire page.
However, you can hack it a bit to fit your needs with a little CSS.
The sidebar is position: fixed by default, so that it is fixed to the viewport.
You need to change this to position: absolute, so that it will be positioned based on the closest parent that is position: relative. In this case that's the card.
In the snippet the sidebar goes over the title. If you want it only inside the body, all you need to be is wrap it in another element with position: relative
new Vue({
el: "#app"
});
body {
padding: 1rem;
}
.my-sidebar.b-sidebar-outer {
position: absolute !important;
height: 100% !important;
}
.my-sidebar .b-sidebar {
position: absolute !important;
height: 100% !important;
}
<link href="https://unpkg.com/bootstrap#4.4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-vue#2.13.0/dist/bootstrap-vue.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.13.0/dist/bootstrap-vue.js"></script>
<div id="app">
<b-button v-b-toggle.sidebar-1>Toggle Sidebar</b-button>
<!-- The height is only here for the example -->
<b-card style="min-height: 300px;" class="overflow-hidden" no-body>
<b-card-header>
<b-card-title>Title</b-card-title>
</b-card-header>
<b-sidebar id="sidebar-1" title="Sidebar" shadow class="my-sidebar">
<div class="px-3 py-2">
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
</p>
<b-img src="https://picsum.photos/500/500/?image=54" fluid thumbnail></b-img>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
</p>
</div>
</b-sidebar>
</b-card>
</div>
I solved by modifying the style of the element by using JQuery where top': '60px' is going to be the hight of the navbar.
mounted() {
$('#sidebar-1').css(
{'top': '60px',
'opacity': '80%'
}
);
},
I'm new to CSS and have a question about expanding the content of an inner DIV to fill the entire outer div.
I have been researching an answer to my problem for hours and have found dozens of similar questions, but none of the suggested solutions work for me. I'm sure it's that I'm misunderstanding something fundamental, but I can't seem to put my finger on it.
I need to have the blue background cover the entire block between "Some other stuff" and "More different stuff" and the text must be centered vertically and horizontally in the blue block - and maintain the same hover qualities and text-decoration rules.
<div>
<span>Some other stuff</span>
</div
<div class="outer-container">
<h2>
<a class="inner-container" href="https://www.google.com" target="_blank">
Lorem ipsum
</a>
</h2>
</div>
<div>
More different stuff
</div>
I have so much trouble with CSS because I don't know how to gracefully describe what I'm wanting - I'm a developer not a designer!
.outer-container {
background-color: #337AB7;
text-align: center;
vertical-align: middle;
position: relative;
}
.inner-container {
background-color: #337AB7;
color: #fff;
height: 100%;
font-size: x-large;
&:focus, &:hover, &:link {
background-color: #286090;
color: #fff;
text-decoration: none;
}
}
If I put the focus, hover CSS stuff in the outer-container the hover mechanics are not consistent.
I hope I'm making sense...like I said, I have a horrible time explaining design stuff.
Any suggestions?
You just need to set background color to outer-container.
When you set background-color to <a> tag, the background color is assigned to the text only.
Here is you updated fiddle.
Here is the snippet.
.outer-container {
text-align: center;
vertical-align: middle;
position: relative;
background: #337AB7;
}
.inner-container {
background-color: #337AB7;
color: #fff;
height: 100%;
font-size: x-large;
}
<div> <span>Some other stuff</span>
</div>
<div class="outer-container"> <a class="inner-container" href="http://www.google.com" target="_blank">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum purus vel iaculis accumsan. Nulla vel massa velit. Proin a nisl vel tortor tincidunt pharetra. Nulla tristique porttitor erat. In laoreet, erat non ultricies vulputate, massa mauris tempor ligula, sed dignissim ex augue sit amet sapien. Donec malesuada massa eget turpis consectetur, at feugiat velit aliquam. Fusce dictum ornare dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer non consectetur nunc, at sollicitudin nibh.</a>
</div>
<div>More different stuff</div>
Why can you not change the background colour to be on the parent .outer-container?
This would solve your immediate issue.
See http://jsfiddle.net/n1gva5b4/
If a was you i would make a div-container and inside the div(innerContainer) insert the a-link-tag. So the Conainer does what its called (contain-something), applies the color as you want it and the link also works fine.
like this:
<div class="outer-container">
<div class="inner-container" >
Lorem ipsum dolor sit
</div>
</div>
Just in case the outer-container responses don't help, an alternative is to set display: block on inner-container. Block-level elements are the ones that take up all available horizontal space on their parent by default (an example might be, one of these answers), and "inline-level" elements like a (by default anyway) can be placed in the middle of a block of text, only affecting its own text without re-flowing any layout around it.
I am using a CSS Slider that utilises two sub tabs in each slide.
The slider's sub tabs use Bootstrap's 'Active' Class on the li that then changes the inactive li's class to active when the inactive tab's navigation arrow (< or >) is clicked.
The sub tabs work correctly on the first slide but do not work on the second slide, or any slide thereafter.
My JS Fiddle
JS Fiddle
The Problematic Code
<div class="profile-thumbnail">
<div class="profile-image">
<div class="overlay-profile"></div>
</div>
<!-- Sub Tabs -->
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a class="hvr-border-fade" href="#tab1" data-toggle="tab"><</a></li>
<li><a class="hvr-border-fade" href="#tab2" data-toggle="tab">></a></li>
</ul>
</div>
<!-- END Player Profile Thumbnail-->
Refer to the below link (the MEET THE TEAM section) for a more accurate idea as the pasted code doesn't seem work as well.
Your tab's href's location need to be unique. Right now you are repeating the same href="tab1", href="tab2" for each slider. You can change it to:
href="tab1-a", href="tab2-a" for gallery 1.
href="tab1-b", href="tab2-b" for gallery 2.
Also, make sure you follow the same process for the id's. I cannot paste full code here due to character limits.
See JsFiddle
<!------------ Sean Peens ------------>
<article>
<!-- Player Profile Thumbnail-->
<div class="profile-thumbnail">
<div class="profile-image">
<div class="overlay-profile"></div>
</div>
<!-- Sub Tabs -->
<ul class="nav nav-tabs" id="myTab">
<li class="active">
<a class="hvr-border-fade" href="#tab1-a" data-toggle="tab"><</a>
</li>
<li><a class="hvr-border-fade" href="#tab2-a" data-toggle="tab">></a>
</li>
</ul>
</div>
<!-- END Player Profile Thumbnail-->
<!-- Start Player's Profile -->
<div class="player-profile">
<!-- First Tab -->
<div class="tab-pane fade in active" id="tab1-a">
<div class="player-profile-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas neque diam, luctus at laoreet in, auctor ut tellus. Etiam enim lacus, ornare et tempor, rhoncus rhoncus sem. Aliquam volutpat arcu et nibh mollis eleifend pharetra lorem scelerisque.
Donec vel enim purus, id viverra neque. Cras in velit ante, eget pellentesque sem. Duis tincidunt erat quam. Etiam placerat sapien elit.
</div>
</div>
<!-- Second Tab -->
<div class="tab-pane fade in" id="tab2-a">
<div class="gun-profile">
<img src="http://roxyprinsloo.co.za/tst/_include/img/profile-guns/richard-gun.png">
</div>
<div class="gun-profile-text"><span class="gun-title">KWA SR5</span>
<br>NC STAR Red Dot
<br>Underslung Grenade Launcher
<br>Extended Barrel
<br>Mock Suppressor
</div>
</div>
</div>
<!-- END Start Player's Profile -->
<!-- Start Player's Title -->
<div class="player-details">
<h3>Sean Peens</h3>
<ul>
<li><span class="aka">AKA 'SNOWMAN'</span>
<br>Team Captain
</li>
</ul>
</div>
<!-- END Start Player's Title -->
</article>
<!------------ END Sean Peens ------------>
<!------------ Richard Bradley ------------>
<article>
<!-- Player Profile Thumbnail-->
<div class="profile-thumbnail">
<div class="profile-image">
<div class="overlay-profile"></div>
<!-- Thumb Image -->
<img src="http://roxyprinsloo.co.za/tst/_include/img/work/thumbs/image-01.jpg">
</div>
<!-- Sub Tabs -->
<ul class="nav nav-tabs" id="myTab">
<li class="active">
<a class="hvr-border-fade" href="#tab1-b" data-toggle="tab"><</a>
</li>
<li><a class="hvr-border-fade" href="#tab2-b" data-toggle="tab">></a>
</li>
</ul>
</div>
<!-- END Player Profile Thumbnail-->
<!-- Start Player's Profile -->
<div class="player-profile">
<!-- First Tab -->
<div class="tab-pane fade in active" id="tab1-b">
<div class="player-profile-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas neque diam, luctus at laoreet in, auctor ut tellus. Etiam enim lacus, ornare et tempor, rhoncus rhoncus sem. Aliquam volutpat arcu et nibh mollis eleifend pharetra lorem scelerisque.
Donec vel enim purus, id viverra neque. Cras in velit ante, eget pellentesque sem. Duis tincidunt erat quam. Etiam placerat sapien elit.
</div>
</div>
<!-- Second Tab -->
<div class="tab-pane fade in" id="tab2-b">
<div class="gun-profile">
<img src="http://roxyprinsloo.co.za/tst/_include/img/profile-guns/richard-gun.png">
</div>
<div class="gun-profile-text"><span class="gun-title">KWA SR10</span>
<br>NC STAR Red Dot
<br>PEQ Box
<br>Magpul Furniture
<br>Noveske KX3 Flash Enhancer
</div>
</div>
</div>
<!-- END Start Player's Profile -->
<!-- Start Player's Title -->
<div class="player-details">
<h3>Richard Bradley</h3>
<ul>
<li><span class="aka">AKA 'DEADLEE'</span>
<br>Team Co-Captain
</li>
</ul>
</div>
<!-- END Start Player's Title -->
</article>
Ok, I am new with CSS and this is just causing me trouble. How do I add a background color to multiple columns but not all columns.
I want one background color on span2 and a different color on span10. The problem I run into is issues with padding. When I apply the background to certain columns it won't have a nice even padding around the content. Does this make sense? How do I add a background to certain columns with nested columns and still maintain nice even padding?
HTML
<div class="row bg">
<div class="span10">
<!-- Main hero unit for a primary marketing message or call to action -->
<div class="sidebar">
<div class="hero-unit">
<h1>Join</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-large">Register Now »</a></p>
</div>
</div>
<!-- Example row of columns -->
<div class="row">
<div class="span5">
<div class="bot-pad">
<h2>We are Fun!</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div>
</div>
<div class="span5">
<div class="right-pad bot-pad">
<h2>Learn more about yourself</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div>
</div>
</div>
</div>
</div>
CSS
.bg
{
background: url('/assets/img/grid.png');
.border-radius(5px); //LESS mixin for creating border radius
}
.right-pad
{
padding-right: 20px;
}
.bot-pad
{
padding-bottom: 20px;
}
Explanation
So the bg class is applying the background. Then my nested columns have weird padding, so I went through and added classes like right-pad to the columns that need right padding and bot-pad to columns that need padding on the bottom. I know how incredibly wrong this is semantically, I just don't know how else to get my needed results. Thanks.
Here is another example of what I am trying to do... however they do not provide a solution either
https://github.com/twitter/bootstrap/issues/1446
It's not a good idea setting the background-color on the span# level. Why? Because span# is a positioning helper and if you change paddings or margins the entire grid will break.
So, what's the native Twitter Bootstrap element for rendering a coloured background wrapper? It's well.
How to use it?
First, insert the well element inside the span#:
<div class="span5">
<div class="well well-red">
<!-- Your content -->
</div>
</div>
And second, assign properties through an extension of the .well class (I've used .well-red):
.well-red {
background-color: #ff0000;
}
This way you have always available the parent class .well but you can apply different properties at will.
please give a look to my http://jesica89.blogspot.com there is a problem that post description is coming after thumbnail , i know this can be solved by setting , i find a solution to it by firebug ::
p:{display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
please someone tell me how to edit this because i can't find this in my source code , i tried to use this div[ ] to override inline stylesheet but noting happened
here goes the post body html code
<!-- begin blog item -->
<div class='postBox'>
<h1><b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if></h1>
<div class='entry'>
<div class='clear'/>
<p><b:if cond='data:blog.pageType == "static_page"'><br/>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</b:if></p>
</div>
<div class='clear'/>
</div>
<!-- end blog item -->
</b:includable>
You have
<div class="entry">
in which you have
<div id="summary2601058450852975397">
in which you have
<p><img width="230" height="180" src="http://1.bp.blogspot.com/-edk8FaVPqKs/Tg2PwaOkfdI/AAAAAAAAAF8/n0BE2A5VPBY/s1600/love-relationship.jpg"/><p>
followed by
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae justo tellus. Suspendisse vel lobortis orci. Donec sit amet purus tincidunt felis semper auctor at in libero. Nunc vel nisi accumsan metus volutpat faucibus. Maecenas sit amet nulla<p>
This is the order of your HTML so it will display in that order. If you want the last paragrpah to show first, just change you HTML order.