I'm creating a simple banner for a website using Bootstrap CSS and after centering text within the banner, I would like a button to be displayed inline with it. However, after I create the button, it does not display inline with the centered text within the button.
HTML:
<div id="idea_banner">
<div class="container">
<b>Got an idea? Tell us about it!</b>
Give us an idea
</div>
</div>
CSS:
#idea_banner {
background: #4B91FB;
overflow:hidden;
width:100%;
height:90px;
}
.container {
position:relative;
}
.container b {
display:block;
text-align:center;
margin-right:100px;
margin-top:35px;
color:#FFF;
font-size:22px;
white-space:nowrap;
}
.container a {
display:inline-block;
float:left;
}
I'm not really sure if this is a Bootstrap issue or not. Any help is greatly appreciated!
It was happening because you had displayed b as block in your CSS. Change it to inline to get it into a single line.
Also, remove float: left for .container a and add text-align: center for .container.
By the way, <b> tag is not recommended. If you need an element to wrap the text, use <p> instead.
Working Code Snippet:
#idea_banner {
background: #4B91FB;
overflow:hidden;
width:100%;
height:90px;
}
.container {
position:relative;
text-align: center;
}
.container b {
display: inline;
text-align:center;
margin-right:10px;
margin-top:35px;
color:#FFF;
font-size:22px;
white-space:nowrap;
}
.container a {
display:inline;
/*float:left;*/
}
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<div id="idea_banner">
<div class="container">
<b>Got an idea? Tell us about it!</b>
Give us an idea
</div>
</div>
Related
I want the text in front of the image to be in the middle of it!
My problem is the vertical align middle is not working...
what is wrong?
<div class="comments">
<div class="pull-left lh-fix">
<img class=foto src="/$foto" class="imgborder">
</div>
<div class="comment-text pull-left">
<span class="pull-left color strong">anna:</span> dododod
</div>
</div>
.pull-left { float: left; }
.lh-fix { line-height: 0 !important; }
.comments {
position:relative;
display:block;
overflow:auto;
padding-left:15px;
padding-top:8px;
padding-bottom:8px;
border:1px solid #000;
}
.comment-text {
margin-left: 8px;
color: #333;
vertical-align:middle; //not working?
line-height:normal;
width: 85%;
text-align:left;
}
.foto{
width:50px;
height:50px;
float:left;
}
https://jsfiddle.net/a0bhv4n1/
Vertical-align works on inline elements. You are applying it to the class .comment-text which is for a div element. A div is a block style element which of course means that it will take up the entire space that it is allowed to, thus you cannot center something that already takes up the whole space. Inline elements only take up the space they need to based on the content in them and you can simply add display:inline-block to .comment-text to allow vertical-align:middle to work. More information can be found at MDN's article on vertical-align
I have a (relatively) simple layout, with fixed header and footer divs. The content div is split in two "full height" divs with display: inline-block;. The left div is used for navigation and the right one for the actual content and has overflow-y: scroll;. The problem is that I cannot set the width of the right div to fill the remaining space. I have tried using float (as a last resort) but the right div was pushed downwards and, honestly, I'd prefer not to use floats.
Is filling the remaining width possible in my scenario? I would very much like to not hardcode the width of the right div.
Here's the JSFiddle example.
Simple HTML structure:
<html>
<head></head>
<body
<div id="container">
<div id="header">This is the header area.</div>
<div id="content">
<div id="leftContent"> </div>
<div id="textContent">
<p>Hello world (and other content)</p>
</div>
</div>
<div id="footer">This is the footer area.</div>
</div>
</body>
</html>
CSS excerpt:
html, body { margin:0; padding:0; height:100%; }
#container { position:relative; margin:0 auto; width:750px; overflow:hidden;
height:auto !important; height:100%; min-height:100%; }
#header { border-bottom:1px solid black; height:30px; }
#content { position:absolute; top:31px; bottom:30px; overflow-y:none; width:100%; }
#leftContent { display:inline-block; height:100%; width:200px;
border-right:1px solid black; vertical-align:top; }
#textContent { display:inline-block; height:100%; vertical-align:top; overflow-y:scroll;
width:540px; /*would like to not have it hardcoded*/ }
#footer { position:absolute; width:100%; bottom:0; height:30px; }
Edit:
Thanks to Prasanth's answer, I was able to achieve what I wanted. The solution was to set
display:flex; flex-direction:row; on the #content div and
width: 100%; on the #textContent div.
Testing on IE 11 (and downwards in compatibility mode) did not produce unwanted results.* The new version can be found here.
*Edit: This method works properly in IE11. In IE10, the scrollbars do not appear if the content of the #content div requires scrolling. The layout works thought. In IE <10 it does not work at all.
You can use Flexbox to achieve this
Go through this and you will get what you need
.content{ display:flex } .content > div { flex: 1 auto; }
and beware of browser support
when I make the div's(that contains the drop down menu)positioning to relative and the drop down menu div's positioning to absolute,it shows me only the last item on the drop down menu.if I set drop down menu container div to relative and leave the drop down menu div positioning,then it works.But that affects the rest of the page.So,how to set the positioning that would make the drop down works without affecting any other parts of the page.
HTML
<div id="top_head">
My Online Shop
<div id="nav">
<div class="test">Home</div>
<div class="test" id="product">Products
<div class="test1">shirt</div>
<div class="test1">Pant</div>
<div class="test1">inner</div>
<div class="test1">cap</div>
</div>
<div class="test">About</div>
<div class="test">contact Us</div>
</div>
</div>
CSS
body{
color:green;
}
#top_head{
width:100%;
height:100px;
font:48px Arial green;
border:1px dotted red;
}
#nav{
background-color:gray;
width:57%;
border-radius:5px;
font:28px Arial orange;
margin:0px -49px 5px 15px;
}
#nav a{
color:red;
text-decoration:none;
margin:0px 50px;
}
.test{
float:left;
}
.test:hover{
background-color:orange;
}
#product{
position:relative;
}
.test1{
position:absolute;
border:1px solid red;
visibility:hidden;
}
#product:hover .test1{
visibility:visible;
background-color:yellow;
}
I've tried with display property too. Same results.
If you have any idea where the problem lies, please help.
It looks like the issue here is that you're using position:absolute on all of the sub menu divs. This is essentially making them lay on top of each other (leaving the last one on top).
One solution for this is to wrap all of these elements in a container div and make that the thing that is hidden or shown:
Working Fiddle Demo
Your sub-menu becomes:
<div class="test1">
<div>shirt</div>
<div>Pant</div>
<div>inner</div>
<div>cap</div>
</div>
And the CSS is altered slightly:
.test1{
display:none;
}
.test1 div{
border:1px solid red;
}
#product:hover .test1{
position:absolute;
display: block;
background-color:yellow;
}
I have the following CSS setup for use on two different pages;
#content{
width:960px;
margin-top:0px;
height:auto;
font-family:arial;
font-size:1.em;
background-color:#f2f2f2;
}
#left-div {
width:600px;
padding-top:20px;
text-align:center;
line-height:.5em;
display:inline-block;
float:left;
}
#right-div {
width:300px;
margin-top:40px;
margin-right:20px;
display:inline-block;
text-align:center;
float:right;
background-color:#e0e0e0;
}
#isa-left {
width:440px;
margin-top:40px;
margin-left:30px;
margin-right:10px;
display:inline-block;
text-align:justify;
float:left;
}
#isa-right {
width:440px;
margin-top:40px;
margin-left:10px;
margin-right:30px;
display:inline-block;
text-align:center;
float:right;
}
On the page where I use left-div and right div like this;
<div id="content">
<div id="left-div"> Content </div>
<div id="right-div"> Content </div>
</div>
here is what happens. In FF, IE, Safari, and Chrome it looks just I expect with the two divs next to each other with a background color of #f2f2f2 from the content div.
On the second page where I use the isa-left and isa-right with the same setup as above what happens is that the inner divs are still showing where I expect them but now the background color from the content div is not showing.
After finding a post on here with the same problem I added this line overflow:auto; to the content div.
Now both pages in FF the content appears outside of the content div, 960 pixels to the right, with the background color showing. In IE, Safari, and Chrome both pages appear perfectly.
My question is what is causing the two inner divs to escape the content div in FF once I added overflow:auto;? Or is there a way to fix it so that the background color shows through on the second page without using overflow:auto;?
Any suggestion is appreciated.
Try this. I think it might be the solution to your problem.
http://jsfiddle.net/6dBdx/
-Code Reference -
CSS:
.wrapper {
width:400px;
margin-top:0px;
height:auto;
font-family:arial;
font-size:1.em;
background-color:#f2f2f2;
margin-bottom:15px;
}
.wrapper > div.box {
padding-top:20px;
text-align:center;
line-height:.5em;
border:thin solid #999;
/* Adding this for example purposes */
height:150px;
width:150px;
}
.pull-right {
float:right;
}
.pull-left {
float:left;
}
.clear-fix {
clear:both;
}
HTML
<label>Float Left Only</label>
<div class="wrapper">
<div class="pull-left box">One</div>
<div class="pull-left box">Two</div>
<div class="clear-fix"></div>
</div>
<label>Float Left & Right</label>
<div class="wrapper">
<div class="pull-left box">One</div>
<div class="pull-right box">Two</div>
<div class="clear-fix"></div>
</div>
Quick notes, don't forget to add a clear div after a float, so that elements show up correctly after floating an element. Also, if you want an element to line up next to each other, try using float:left as a rule of thumb, unless you want the elements to line up on the right in which case... float:right
I am working on my portfolio page for class. I am trying to get the web page to adjust with the browser when the browser gets resized. Mainly the navigation links I have in header. Also when screen is in full my navigation links are in the top right corner. But when I restore down the window it is center in middle. What do I do? Any help will be appreciated. Here is my code. If that helps any.
#header,
#main,
#footer{
display:block;
position:relative;
float:left;
}
#header,
#footer{
width:1100px;
height:80px;
}
#header{
margin-bottom:2px;
}
#footer{
margin-top:2px;
text-align:right;
border:2px;
}
#main{
width:650px;
height:200px;
margin-left:200px;
margin-right:200px;
margin-top:200px;
}
#leftcol{
float:left;
}
#nav{
border:2px solid #F00;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
#nav li{
display:inline;
}
#nav a{
display:inline-block;
padding:10px;
}
<html>
<head>
<title></title>
<link href="styles.css" rel="stylesheet" type="text/css">
<style type="text/css">
.auto-style1 {
text-align: left;
}
</style>
</head>
<body>
<div class="auto-style1">
<div id="header">Header
<h1>Creative Minds Inc.</h1>
</div>
<div id="nav">Navigation
<ul>
<li>Homepage
</li>
<li>Tips and Trick
</li>
</li>About me
</li>
<li>Get in Touch
</li>
</ul>
</div>
<div id="main">Main
<h2>A passion for design and a creative mind.</h2>
<h3>Design, Develop, Dream</h3>
</div>
<div id="sidebar">Navigation</div>
<div id="footer">Footer
<h3>Creative Minds Inc. Jonathan Mourning</h3>
</div>
</div>
</body>
</html>
You can use the standard resize DOM event. Then at
window.onresize = function(event) {
...
}
you can adjust the elmenets positions and size accordingly.
However In general, you could avoid fixed sizes and provide percentage values for your DOM elements, in order for them to resize automatically under all screen sizes and ratios. For example, if your page has a vertical orientation, change width to 100% and have your #main element always align the center of the screen:
#main{
width:650px; /*or 70% */
height:200px;
margin-left:auto;
margin-right:auto;
text-align:center;
margin-top:200px;
}
Here is an example with the code :http://jsfiddle.net/TZGXf/4/
Here is a full screen: http://jsfiddle.net/TZGXf/4/embedded/result/
Instead of using set widths like width: 1000px; use percentage values like width: 100%;. But be careful as this can cause unforeseen problems.