I have one div which contains an ul tag and a span tag to creat my justified horizontal navbar.
The second span is an hidden span because i wanna the text of the first span is justified.
So, the problem i have now that, the parent div'height is larger than his children's height.
HTML:
<div id="div1">
<ul id="span1">
<li>ABC</li>
<li>DEF</li>
<li>GHI</li>
<li>JKL</li>
</ul>
<span id="span2"></span>
</div>
CSS:
#div1 {
background-color: red;
margin: 0;
padding: 0;
text-align: justify;
height: 15px;
}
#div1 ul#span1 {
display: inline;
background-color: blue;
}
#div1 ul#span1 li {
display: inline-block;
}
#div1 #span2 {
display: inline-block;
width: 100%;
height: 0px;
background-color: green;
}
JSFIDDLE
Any suggestions? Thanks!
Another question: I want to add a separate circle between two words like that:
How can i do? Thanks!!!
EDIT: For my first question, thanks for #Leth0_, i've just changed height = 15px and it worked. Please give me some suggestions for my second question! THANKS!!
You could try manually setting the height, try adding...
height:20px to the parent.
Try this JSFIDDLE
#div1 {
background-color: red;
margin: 0;
padding: 0;
text-align: justify;
}
#div1 #span1 {
display: inline-block;
width:100%;
background-color: blue;
}
#div1 #span2 {
width: 100%;
height: 0px;
background-color: green;
}
Related
I have the following elements. The image is fixed at 325X70px and is placed at the top left corner. I want the list items, evenly spaced, to fill the remainder of the width and be responsive to browser resize. I'm sure this is easy, but I can't seem to get it to work.
<div class="wrapper">
<div class="left">
<div class="image">Image Here</div>
</div>
<div class="menu">
<ul>
<li>X</li>
<li>Y</li>
<li>Z</li>
<li>A</li>
</ul>
</div>
</div>`
CSS
* {
padding: 0px;
margin: 0px;
}
.wrapper {
position: relative;
}
.left {
float: left;
}
.image {
min-width: 325px;
max-width: 325px;
height: 70px;
background-color: red;
}
.menu {
width: 100%;
height: 70px;
background-color: black;
}
.menu ul {
position: absolute;
width: 100%;
height: 70px;
display: table;
}
.menu li {
color: #FFF;
width: 25%;
text-align: center;
vertical-align: middle;
display: table-cell;
list-style-type: none;
}
You may not need the .left class, you might be able to just do that styling on the image itself, but regardless, what needs to happen here is that .left and .menu need to be side by side. To do that...
.left,
.menu {
display: inline-block;
vertical-align: middle;}
We know the image is always 325px wide, so let's set the parent container to match...
.left {
width:325px;}
And then we want .menu to be the entire width of the screen, minus that image/container, so can we do this...
.menu {
width: calc(100% - 325px);}
You'll still have to turn your li horizontal...
li {
display: inline-block;
vertical-align:middle;}
I'm having a little issue here. This is my HTML.
<div class="one">
</div>
<div class="two">
<ul class="ulclass">
<li>DASDA</li>
<li>QWEQW</li>
</ul>
</div>
This is my CSS:
.one{
width: 100%;
height: 300px;
background-color: black;
}
.two{
margin-top: 0px;
display: block;
padding: 0px;
margin-bottom: 0px;
}
.ulclass{
list-style-type: none;
margin:0px;
margin-bottom: 0px;
}
.ulclass li{
width: 500px;
padding: 10px;
overflow: auto;
float: left;
}
My problem is that these divs are next to each other and not above the other.
It looks like this.
http://oi57.tinypic.com/2lm5e1i.jpg
I want the green one to be down the black one. I have tried a lot of things and I can't do it.
I forget, these divs are inside another DIV which is a container
here the css:
.rost{
height: 100%;
min-height: 300px;
background-color: #fff;
padding: 0px;
padding-left: 0px;
box-shadow: 0 0 28px rgba(0, 0, 0, .6);
display: flex;
display: -webkit-box;
}
Here is the JSFIDDLE: http://jsfiddle.net/aemgm73z/
try adding clear:both; to .two class
.two{
clear:both;
margin-top: 0px;
display: block;
padding: 0px;
margin-bottom: 0px;
}
Remove display: -webkit-box and display: flex from your parent container.
As far as the second div goes it seems you've put the <li> elements within the <a> elements which is why they are spilling out of the divs. The child divs ARE in the parent divs but because you've enclosed the links the other way round the divs aren't expanding to wrap around them
You can see this point by assigning a fixed height, say 1000px to .lista div and upon inspection find that .rost does enclose both the divs.
Swapping the li and a tags should work for you.
Do you have any specific reason to include float: left into your css? After removing that, things are working as you expect.
.one{
width: 100%;
height: 300px;
background-color: black;
}
.two{
margin-top: 0px;
display: block;
padding: 0px;
margin-bottom: 0px;
background-color: green;
}
.ulclass{
list-style-type: none;
margin:0px;
margin-bottom: 0px;
}
.ulclass li{
width: 500px;
padding: 10px;
overflow: auto;
}
<div class="one">
</div>
<div class="two">
<ul class="ulclass">
<li>DASDA</li>
<li>QWEQW</li>
</ul>
</div>
Remove disply:block and margin-top:0px property from your style
Try adding display:block; to your .one style, this will make the green div bump down onto the next line.
I am trying to do a vertical align for my texts. I also want to make sure the green background div need to cover from top to bottom inside the red color div. Currently the green color div only covers 90% of the red oolor div. I am not sure what happened in my case. Can anyone explain and help me out?
html
<div id='wrapper'>
<div class='head'></div>
<h2 class='title'>Warm-Up</h2>
</div>
css
.title{
display: inline;
padding-left: 15px;
vertical-align: middle;
margin: 0;
}
.head{
width: 30px;
height: 50px;
display: inline-block;
background-color: #A9D075;
}
#wrapper{
width:200px;
background-color: red;
}
http://jsfiddle.net/rmS2f/3/
Thanks.
Demo http://jsfiddle.net/rmS2f/6/
Your html structure will work but you need to change the styles:
.title {
display: inline-block;
padding-left: 45px;
vertical-align: middle;
margin: 0;
line-height:50px;
}
.head {
position:absolute;
left:0;
width: 30px;
height: 100%;
display: inline-block;
background-color: #A9D075;
}
#wrapper {
position:relative;
width:200px;
height:50px;
background-color: red;
}
I would like to have two divs sit next to each other. Both divs have their width set to a certain percentage. Between the two divs I want a fixed width margin of 20px. The width of div1 and div2 and the 20px margin should add up to 100% of the available space. (See screenshot below)
Heres a basic jsfiddle to get started: jsfiddle
code for jsfiddle link to work
Is this possible without javascript?
Easiest, safest way I know to do something like this is a nested <div>, using the outside div as a container for layout purposes. See here: http://jsfiddle.net/u7VzB/1/
HTML
<div id="container">
<div id="div1">div#1</div>
<div id="div2">
<div>div#2 inner</div>
</div>
</div>
CSS:
#container
{
color: white;
margin-top: 50px;
}
#div1
{
float: left;
width: 30%;
background-color: black;
}
#div2
{
float: left;
width: 70%;
}
#div2 > div {
margin-left: 20px;
background-color: blue;
}
You can also do something like this without disturbing HTML code:
#container {
color: white;
margin-top: 50px;
position: relative;
}
#div1 {
float: left;
width: 30%;
background-color: black;
}
#div2 {
float: left;
position:absolute;
left: 30%;
margin-left: 20px;
right: 0px;
background-color: blue;
}
Working Fiddle
try by setting float left, right and reduce the width
#container
{
color: white;
margin-top: 50px;
}
#div1
{
float: left;
width: 29%;
background-color: black;
}
#div2
{
float: right;
width: 69%;
background-color: blue;
}
How can I position span text so that it is positioned in the middle (vertically and horizontally). I have made a jsfiddle example and this is my code:
<ul>
<li class="one"><span>One</span></li>
<li class="two"><span>Two</span></li>
</ul>
css:
ul {
height: 200px;
border: 1px solid #000;
width: 200px;
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
li {
height: 30px;
width: 100%;
position: absolute;
background-color: blue;
}
.one {
top: 30px;
height: 50px;
}
.two {
top: 150px;
}
li span {
color: #fff;
vertical-align: middle;
height: 100%;
display: block;
}
The height of the li's can vary. The above is just a reference using fixed heights.
You need to set line-height at the same height as your li:
li span {
color: #fff;
vertical-align: middle;
height: 100%;
display: block;
line-height:30px;
}
li.one span{
line-height:50px;
}
Here's your demo: http://jsfiddle.net/r4Dr9/2/
You don't need to do tricks with margin or padding.
Give the <li> a display:table;, and the <span> a display:table-cell;.
DEMO
CSS to add
li {
text-align:center;
display:table;
}
li span {
display:table-cell;
vertical-align:middle;
}
Try using text-align: center; on the li span, and you'll have to set the top margin accordingly for each to get it down from the top.
A couple things. First, height:100%;, vertical-align:middle; does nothing. Also, with width:100%; and not specifying text-align, it'll always default to left. I'd personally use padding:
li span {
display:inline-block;
color: #fff;
text-align:center;
height: 100%;
}
.one span {
padding-top:10px;
}
.two span {
padding-top:3px;
}
I updated your jsFiddle as well.
Added style - 'text-align: center' on li element and it worked for me