I'm trying to create the following.
The problem is that the stuff in row1 has a different gradient background than the stuff in row2.
Also row1 is dynamically filled with stuff from the database, so it could have 2 items or 6.
So I want the gradient from row2 to keep repeating it's to match the width from it's sibling.
I can't set the gradient on the container since each has a diferent background image gradient.
The problem lies in with IE8 and 7 since they only repeat the gradient for row2 width, so if row 1 is shorter or wider there will be a white space gap.
<div id="content">
<ul class="product-list">
<li class="product-thumb">
<img src="" />
<h3> prod1</h3>
</li>
<li class="product-thumb">
<img src="" />
<h3> prod2</h3>
</li>
</ul>
<ul class="footer-menu">
<div class="footer-container">
<li>Link1 </li>
<li><a href="#" >link2</a></li>
<li>info</li>
<div class="footer-middle-background"></div>
</div>
</ul>
</div>
You cannot use a div like that in a ul.
If you move the div out of the ul it will automatically be 100% wide (unless you specified something else somewhere else...).
<div class="footer-container">
<div class="footer-middle-background">
<ul class="footer-menu">
<li>Link1 </li>
<li><a href="#" >link2</a></li>
<li>info</li>
</ul>
</div>
</div>
Related
I'm trying to use v-select in admin panel in header (using CoreUI). I have a container with "display: flex"
https://codepen.io/kat15pl/pen/NWNZgQg
<div id="app" class="c-app">
<div class="c-wrapper">
<header class="c-header c-header-light c-header-fixed c-header-with-subheader">
<ul class="c-header-nav d-md-down-none mr-auto">
<li style="width: 100%;">
<v-select :options="options"/>
</li>
<li>
next div
</li>
</ul>
</header>
</div>
</div>
I think I do something wrong... but I don't see what:(
I want to not resize when select is opened.
I mean why input cannot be 100%?
In an AngularJS+Bootstrap project, I'm trying to create a vertical nav menu/tabs on the left, while the content of one of the tabs should have its own tabs (secondary tabs), horizontal.
My problems:
1. The secondary tabs' contents are displayed outside the desired location
2. Navigation in the secondary tabs doesn't work.
You can check out my code here: http://www.bootply.com/vhArvv1N5V
The main nav bar (vertical) works fine (as demonstrated at: http://www.bootply.com/74926)
To solve the first problem you need to float that first navigation left. I resolved this by using Bootstrap's col-md-2 and col-md-10 around the navigation and the tab content, plus the obligatory row and container-fluid for layout. To solve the second problem, you missed out some of the data-toggle="tab" and .tab-pane on the second set of tabs.
I also changed your first nav from .nav-tabs to just .nav. Nav tabs rounds the corners etc, not really needed here. Plus I removed almost all of your CSS and relied more on Bootstrap.
<div class="container-fluid">
<div class="row">
<!-- Nav left -->
<ul class="nav col-md-2" id="leftTabs">
<li class="active">
<a href="#a_tab" data-toggle="tab">
<span></span>ItemA
</a>
</li>
<li>
<a href="#b_tab" data-toggle="tab">
<span></span>ItemB
</a>
</li>
<li>
<a href="#c_tab" data-toggle="tab">
<span></span>ItemC - TABS!
</a>
</li>
</ul>
<!-- Nav content -->
<div class="tab-content col-md-10">
<div class="tab-pane active" id="a_tab">
<h1>Content of A</h1>
</div>
<div class="tab-pane" id="b_tab">
<h1>Content of B</h1>
</div>
<div class="tab-pane" id="c_tab">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="active">First</li>
<li>Second</li>
<li>Third</li>
</ul>
<!-- Nav tabs content -->
<div class="tab-content">
<div id="first" class="tab-pane active">Content of first</div>
<div id="second" class="tab-pane">Content of second</div>
<div id="third" class="tab-pane">Content of third</div>
</div>
</div>
</div>
</div>
</div>
DEMO
i have full width slider and i have button on each image with link
but when i apply hover effect on first slider anchor tag its not working while its working for second slider,when i write a:hover{background:blue;} its not working for first slider.
here is my html
<ul class="cbp-bislideshow" id="cbp-bislideshow">
<li style="background-image: url('images/slides/slide1.jpg'); opacity: 1;">
<div class="info">
<h2>The Real Thing</h2> <label>Quality. Beauty. Durability. Only from </label>
<a class="link" title="Get Inspired" href="#"><span>Get Inspired</span></a>
</div>
<img alt="image01" src="images/slides/slide1.jpg">
</li>
<li style="background-image: url('images/slides/slide2.jpg'); opacity: 0;">
<div class="info">
<h2>The Real Thing2</h2> <label>Quality. Beauty. Durability. Only from.</label>
<a class="link" title="Get Inspired" href="#"><span>Get Inspired</span></a>
</div>
<img alt="image02" src="images/slides/slide2.jpg">
</li>
</ul>
i use this slider
http://tympanus.net/Blueprints/BackgroundSlideshow/
try
.info{
z-index:999;
position:relative;
}
Might be because of the order in which you've got your elements.
Try setting the elements out like below. If you're trying to do what I think you are the image will be covering the html above it so the hover effect won't work.
<li style="background-image: url('images/slides/slide2.jpg'); opacity: 0;">
<img alt="image02" src="images/slides/slide2.jpg">
<div class="info">
<h2>The Real Thing2</h2> <label>Quality. Beauty. Durability. Only from.</label>
<a class="link" title="Get Inspired" href="#"><span>Get Inspired</span></a>
</div>
</li>
I have this problem with an aligning issue. I am building this responsive site using twitter bootstrap and my client wants me to align bottom some content from two different spans lik this:
He wants the grey box on the right in the right span4 to align bottom with the flexSlider on the left in the other span4. How can this be achieved? i cant use margin on the right side since the upper content is dynamic and can be much longer. i have tried using a relative positioned wrapper and absolutely positioned it but thet width of the grey box and everything gets all messed up when trying to resize the browser window to a smaller size..Any other way to go besides absolute positioning?
Here is the markup:
<div class="span8">
<div class="row section professionIntro">
<div class="span4">
<div class="flexslider section">
<ul class="slides">
<li>
<img src="img/slide1.png" alt="slide 1" />
</li>
<li>
<img src="img/slide2.png" alt="slide 2" />
</li>
<li>
<img src="img/slide3.png" alt="slide 3" />
</li>
</ul>
</div>
</div>
<div class="span4">
<p class="intro">Som dataingeniør jobber du med systemutvikling og drift av maskiner eller systemer.</p>
<ul class="infoExpand">
<li class="expandVideo">
<h2 class="videoSign">Video dataingeniøren hverdag</h2>
</li>
</ul>
</div>
</div>
Appreciate any help..
Add css responsive:
http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css
If is button position:absolute is converting position:static;
.videoSign {
position : static;
bottom:auto;
top:auto;
left:auto;
right:auto;
}
Example: http://jsfiddle.net/sEryj/
Update:
JSFiddle:
http://jsfiddle.net/pcRKv/1/
I have read through a ton of posts and articles discussing z-indexing in IE7, but I just can't seem to come up with a solution for my problem.
I have a rotating banner that uses jQuery and CSS to fade to the next banner image in the list. I use z-index to make the last banner fade into the next banner. I created the HTML structure to easily break down without CSS. I'd like to have the .banner_thumb's sit on top of all the elements in the banner and float next to each other. It turns out that it works in all other browsers but IE7- ...in IE7 the thumbs sit on top of each other instead of floating next to one another. Any idea on how to fix this?
Here is my css:
http://pastebin.com/32GxamMg
HTML:
<div class="span-25 last" id="banner">
<h2>University Features</h2>
<ul>
<li class="selected">
<div class="banner_description">
<h3>xxxx</h3>
<p>body</p>
</div>
<img class="banner_img" src="" />
<img class="banner_thumb" src="" />
</li>
<li>
...
</li>
<li>
...
</li>
<li>
...
</li>
</ul>
</div>