I have this site here: http://dev.jmret.com/index.php but i have a problem on the content page i have two <li> underneath each other and one floating next to it. But it only floats next to the second. How would i make i float next to the first <li>?
So it looks something like this.
CSS (what i am using currently):
.sub-info {
display: inline-block;
position: relative;
width: 67%;
margin-bottom: 25px;
margin-right: 1%;
padding-left: 3%;
float: none;
}
.sub-info2 {
display: inline-block;
position: relative;
width: 26%;
margin-bottom: 25px;
/* margin-right: 1%; */
float: left;
/* padding-right: 5%; */
padding-left: 1%;
}
So what i need to do is make it so that the 3 <li> stack correctly, how can i make this happen in css?
Many thanks
You have to wrap your ul into a div, and then make it float next to it. First change the css to this :
.sub-info {
display: inline;
position: relative;
width: 95%;
margin-bottom: 25px;
margin-right: 1%;
padding-left: 3%;
float: left;
}
then in your li.body-section, wrap the two first ul's into a div and leave the last ul outside like this :
<div class="wrapper">
<ul></ul>
<ul></ul>
</div>
<ul></ul>
and add the css :
.wrapper {
float : left;
}
I believe you wanted something like this :
This is because your ul containing the right column has display: block;.
Change to display: inline-block; on the ul containing .sub-info2 and remove the width on .sub-info2.
Like this (inline styling, but you'll get the point):
<ul style="display: inline-block;">
<li class="sub-info2" style="width: auto">
<ul>
<li class="text tablet">
Related
I have a menu that's generated by a plugin, and I need it to span 2 lines instead of 1 like so:
Example:
I Cannot:
I can't wrap certain li in a div/span
I can't add a <br> where I need the break
I Tried:
I tried adding a Pseudo Element to "Happy" with display: block to create a line break, but couldn't get it to work the way I intended
jsFiddle: http://jsfiddle.net/3xy405oj/
Using content: "\A"; white-space: pre; on the after pseudo-element might help you
JSFiddle
Just add a width to the ul :
ul {
width: 40%;
}
To make it pretty, remove text-align center from the li and add it to ul instead.
Then add margin 0 auto to ul to make it pretty :)
ul {
text-align: center;
margin: 0 auto;
}
Fiddle - http://jsfiddle.net/kq03kzwt/
You can do this:
CSS
ul {
width: 40%;
text-align: center;
margin: 0 auto;
padding: 0;
}
li {
display: inline-block;
margin: 0 2%;
text-align: center;
width: 20%;
}
HTML
<ul>
<li>Crazy</li>
<li>Awesome</li>
<li>Smile</li>
<li class="break-after">Happy</li>
<li>Jitter</li>
<li>Cool</li>
<li>Mango</li>
</ul>
DEMO HERE
You can just float all the elements inside the ul and use clear: left.
<ul>
<li>Crazy</li>
<li>Awesome</li>
<li>Smile</li>
<li>Happy</li>
<li class="break">Jitter</li>
<li>Cool</li>
<li>Mango</li>
</ul>
ul {
width: 100%;
text-align: center;
overflow: auto;
}
li {
margin: 0 5px;
float: left;
}
.break {
clear: left;
}
I've spent hours going through a lot of code online trying to center this dropdown menu, but no luck. I feel like I've changed everything in my code twice and I'm at the end of this particular rope.
As you can see, there's space between the right side of the dropdown list and the unordered list that contains it.
I also can't get any transitions to work with the dropdown, so if you feel like sharing some information about that as well it would be appreciated.
Here's the trouble-maker.
<li class="nav">PORTFOLIO
<ul id="portfolio_menu">
<li>PAINTINGS</li>
<li>DRAWINGS</li>
<li>CARTOONS</li>
</ul>
</li><!--portfolio-->
JSFiddle
There is margin right in your list because you have it in your css. Remove the margin-right:4px;. As I can see the text was center. Please explain it more.
ul#navbar_ul li{ width: 125px;
text-align: center;
display: inline;
float: right;
margin-right: 4px; /*REMOVE THIS*/
position: relative;
}
In your code the following code will target all the li elemnts. If you want to apply only first level of child then use >. This will resolve your space issue.
ul#navbar_ul li {
width: 125px;
text-align: center;
display: inline;
float: right;
margin-right: 4px;
position: relative;
}
Change it to like below.
ul#navbar_ul > li {
width: 125px;
text-align: center;
display: inline;
float: right;
margin-right: 4px;
position: relative;
}
DEMO
I have a horizontal list on my page.
<ul class="period-selection">
<li>Monthly</li>
<li>Weekly</li>
<li>Daily</li>
</ul>
Here is my css:
.period-selection {
width: 33.3%;
text-align: center;
float: right;
list-style: none;
}
.period-selection li {
float: left;
width: 18%;
}
.period-selection li:last-child {
margin-left: -12px;
}
As I collapse the page, the text start to overlap each other. How do I keep the text separate or stop it from overlapping?
You're setting a fixed width of 33.33% for the li's, regardless of the length of the text within. Try setting it to auto.
And remove the
margin-left: -12px;
on the li:last-child.
How can I center this navbar horizontal and vertical?
Here is a screenshot of my navigation bar: http://puu.sh/7luYN
HTML code
<div class="content">
<div class="nav">
<ul>
<li>Startseite</li>
<li>Leistungen</li>
<li>Referenzen</li>
<li>Kontakt</li>
</ul>
</div>
</div>
CSS code
.nav {
background-color: #CCCCCC;
font-family: 'Source Sans Pro', sans-serif;
height: 45px;
padding-left: 170px;
}
.content {
width: 800px;
height: 500px;
margin:0 auto;
}
.nav ul li {
list-style-type: none;
text-align: center;
width: auto;
float: left;
padding-left: 10px;
padding-right: 10px;
margin:0 auto;
}
.nav a {
display: block;
padding-top: 2px;
padding-bottom: 2px;
color: #000000;
text-decoration: none;
}
I already got it to center it horizontal but how can I center it vertical?
I hope for your answers,
Thanks Felix
Here is a PEN I created for a similar answer. There are 3 ways to vertically align your content. The best suited here, according to me will be the line height method.
There are multiple ways to do it, see the following article: http://phrogz.net/CSS/vertical-align/
My favorite way is to use display: table; (on container) and display: table-cell combined with vertical-align: middle (on items itself) as shown in this fiddle:
http://jsfiddle.net/G6vxs/
If you want to use only css, you need to set it with position absolute, top and left to 50% and set the margin-top and margin-left to -height/2 and -width/2.
position: absolute;
top: 50%;
left: 50%;
height: 45px;
margin-top: -22.5px;
width: 440px;
margin-left: -220px;
http://jsbin.com/galapudo/1/edit?html,output
If you want to put centered vertical/horizontal inside other div, set that div with position:relative;
I hope that this helps you.
Single-line approximation for a vertical align : .nav {margin-top : 45%;}
(I wanted to add this as a comment for Daniel Rogi's answer, but I haven't enough reputation points...)
I need to align my banner with the buttons, banner size is w:967 h:106, tried to directly add the image but it pushes all the buttons to the right.
This is what my code looks like so far:
HTML
<nav>
<img src="png"/>
<ul class="fancyNav">
<li id="home">Home</li>
<li id="s">Social</li>
<li id="p">Political</li>
</ul>
</nav>
CSS
.fancyNav{
overflow: hidden;
display: inline-block;
position: absolute;
text-align: center;
top: 16%;
margin-left: 170px;
}
Site link: http://mops.pcriot.com/main.html
This is caused by display: inline-block; which behaves like this:
Displays an element as an inline-level block container.
The inside of this block is formatted as block-level box,
and the element itself is formatted as an inline-level box.
Using display: block will solve this, but then you may need to do more to align the navigation. Anything with inline in it, will cause what you're seeing.
Here are your other options for the display: property:
http://www.w3schools.com/cssref/pr_class_display.asp
.fancNav {
top: 110px;
}
adjust 110 to whatever looks best
make some changes in your class
.fancyNav {
overflow: hidden;
display: inline-block;
text-align: center;
top: 16%;
margin-left: 170px;
width: 100%;
}
Left Aligned - Try removing:
.fancyNav {
margin-left: 170px;
}
Then add:
.fancyNav {
padding: 0;
}
Center Aligned - Do as above then add:
nav {
margin-left: 170px;
}
or instead (probably better):
nav {
width: 967px;
margin: 0 auto;
}