I have a button:
<div id="cta">
<a href="#" class="btn btn-lg">
Who are we?
</a>
</div>
#cta {
margin-left:35%;
position:absolute;
z-index:1;
}
#cta a{
border-radius:100px;
border-color:#FFF;
border-width:thick;
background-color:#ff8900;
font-size:1.75vw;
}
http://codepen.io/anon/pen/elcEi
(sorry no bootstrap on codepen)
And I'd like to adjust the position of the text inside, and the height of the button (which changes with size of text).
I have messed with paddings, margins, heights, aligns, vertical-aligns, line-heights, + all these in negatives.
Any ideas?
Also, Bootstrap has additional styles for aligning text in an element, such as text-center or text-right.
P.S. Was wondering why you surrounded the button with a div. To could just as the cta class to the button itself.
Related
I'm trying to create a download button with an icon on it, using Bootstrap 4 and Font awsome for the icon.
The thing is when I add the icon using:
<i class="fa fa-mobile fa-3x pull-left" ></i>
it pushes the text out of the button, and I can't get the button width to grow with the contents.
Here is my jsFiddle:
http://jsfiddle.net/x1hphsvb/48/
That's because you are floating your <i> element.
Remove the pull-left class from <i> and try this:
<a class="d-inline-flex flex-nowrap">
</a>
And add a margin class to your txtAppStore div. For example:
<div id="txtAppStore" class="ml-3"></div>
Working fiddle: http://jsfiddle.net/x1hphsvb/50/
The main issue was that i had the following CSS, that I missed, and was limiting my button size:
.black-background {
background-color:#000000;
padding: 6px;
width:150px;
}
I've comment that out, and did some changes accoding to the first answer, and now it looks goot, Thank you!
http://jsfiddle.net/dumitrudan608/x1hphsvb/52/
just define width for #txtAppStore, or put that all to Bootstrap div like col-md-3 and center it, then inside col-md-3 you can putt this button with width: 100%; and for example inside txt for 80% of width.
Quickest solutions but not "auto" is:
#txtAppStore {
width: 150px;
}
I have this simple user profile -https://jsfiddle.net/mt15199/fgogetrh/
I want to pull the envelope icon on the left, so I put it on span element and added a class pull-left but icons dropped and overlapped the container. Without this span element with pull left class the envelope icon and other icon sitting inside of div.
How can I fix this?
<span class="pull-left">
<a data-original-title="Broadcast Message" data-toggle="tooltip" type="button" class="btn btn-sm btn-primary"><i class="glyphicon glyphicon-envelope"></i></a>
</span>
Whenever you are using float don't forget to use clear or else element will overlap.
See demo
Use clearfix class or clear:both; after floated element
use
<div class="clearfix"></div>
or
<div style="clear:both;"></div>
First example is from bootstrap having same style given in second one.
The picture is the layout that I want but when you hover, everything gets messed up. The div's start shifting around and moving horizontally when the next div italicizes. How can I maintain this exact layout 100% of the time?
.project-link {
font-family: 'UtopiaStd';
color:#010202;
font-size:5.6vw;
white-space:nowrap;
text-decoration:none;
margin-right: 3%;
line-height:125%;
border-bottom: solid transparent 2px; }
https://jsfiddle.net/zjkouzbo/1/
Solution 1:
You had the right idea with trying white-space:nowrap. To keep your first two links together and keep them on one line, wrap them in a parent element and apply the white-space:nowrap to that parent element. If you have that on both the anchor elements and the parent elements, then you won't break the lines in the middle of a link or between them.
<div class="line">
<a class="project-link" id="one" href="#modal1">Maru speaker design <span> (1) </span> </a>
<a class="project-link" id="two" href="#modal2">Lights — Out <span> (2) </span></a>
</div>
CSS
.line{
white-space: nowrap;
}
New fiddle: https://jsfiddle.net/zjkouzbo/2/
Solution 2:
Place a non-breaking space between the anchor elements that you want to keep on the same line using the HTML entity . Just make sure that you take out any other spaces, including line breaks, between the two elements. This makes your code a little annoying to read, but it doesn't suffer from the "div-itis" that solution one does.
<a class="project-link" id="one" href="#modal1">Maru speaker design <span> (1) </span> </a> <a class="project-link" id="two" href="#modal2">Lights — Out <span> (2) </span></a>
Second fiddle: https://jsfiddle.net/zjkouzbo/3/
Since the <a> tag is an inline element, it will adjust which 'line' it is on as the parent block element changes width, or in your case the link width changes size. If you want to keep a the particular layout where link 1 and 2 are on the same line, but different lines from the rest, you should organize each group in a block element.
<div class="project_miniwrap">
<div class="group-block">
<a>Link 1</a>
<a>Link 2</a>
</div>
<div class="group-block">
<a>Link 3</a>
<a>Link 4</a>
</div>
</div>
adding
display:inline-block
and removing the line breaks you added to project-link solves the issue.
https://jsfiddle.net/70dceskq/1/
I have modified my bootstrap skeleton top nav to this: http://jsfiddle.net/55dTU/
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="/">SketchFemme</a>
<div class="brand slogan">
<span>pencial mileage</span><br>
<span>one curve at a time</span>
</div>
<div class="container nav-collapse">
<ul class="nav">
<li>Artists</li>
<li>Onion Skin</li>
<li>News</li>
<li>About</li>
</ul>
<ul class="nav" id="account_corner">
homonolocus
<span class="divider">|</span>
Settings
<span class="divider">|</span>
Sign out
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
Bootstrap .container sets the width to 1170px. Can someone please tell me why the .container.nav-collapse div can be nested inside .navbar-inner .container and somehow overlap the .brand and slogan? I would think since every instance of .container is the width of 1170px, that the .nav links would be forced into the next line instead of being on the same line as the brand and slogan.
My question isn't so much that I need something to be fixed. Rather I'm asking for an explanation of why this works. Why can one .container contain another .container, of the same width right on top of it. I was looking for a position:absolute which would allow that, but I don't find any. How does the ul.nav know where to indent?... there is no left padding and no left margin, and the containing element spans the entire width of the navbar. I want to know how this is being achieved.
I updated your fiddle ; I added
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width: 940px;
height: 1px; /* These */
clear:left;
}
It makes the container act like a real block: its display is set to block by default, but as its height was 0px, it didn't act like a block but rather as an inline-block.
The clear:left; also cancel any floating conflict (I put both in the fiddle without thinking, but hey, it's 6:30 am here in France).
Since you are using a responsive navbar, is there a reason why you aren't also using a responsive CSS file so the navbar collapses? I replaced your CSS file with
#import url('http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css');
In the account_corner div you have ul but no list items. I replaced the ul with a plain div. Also, if you are following the example from http://twitter.github.io/bootstrap/components.html#navbar the div with your main links should have these classes
<div class="container nav-collapse">
Which partly answers your question.
This is the result http://jsfiddle.net/panchroma/ruAmz/ ?
Hope his helps get you closer to what you want!
I'm trying to display with css the navigation buttons that are located inside my jquery rotating banner.
Which are:
<a class="ls-nav-prev" href="#"></a>
<a class="ls-nav-next" href="#"></a>
For some reason I can't show them, I've tried changing their position, setting a z-index, adding a background-image and color.
Here's the website:
http://npmaudiovisual.com/esde/
This is what I have:
This is what I should have (buttons on corners)
You need some room for them on the page or they will be hidden.
Also there is no text or image within the DIVs.
a class="ls-nav-prev" href="#" style="float:left;">Prev</a>
<a class="ls-nav-next" href="#" style="float:right;">Next</a>
Firstly, your CSS for the following:
<a class="ls-nav-prev" href="#"></a>
<a class="ls-nav-next" href="#"></a>
in layerslider.css just has
.ls-nav-prev,
.ls-nav-next {
outline: none;
}
This does not generate any image or content. How are you testing it?
Secondly, separate the classes and add positioning properties:
.ls-nav-prev {
left:-35px
position:absolute
top:200px
}
.ls-nav-next {
left:935px
position:absolute
top:200px
}
You can play around with the left and top property values to suit your needs.