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
Related
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">
I don't mind the border appearing, its just the strange bit at the top that I dislike. I know I can work around of this, getting rid of the border altogether by using outline: 0, but I also know that's bad.
The HTML setup is
<li>
<a href='..'><img alt='..' src='..'/></a>
<a href='..'>...</a>
</li>
An extract of the CSS:
li{
display: block;
width: 9em;
margin-right: 1em;
height: 12em;
text-align: center;
}
li img{
height: 8em;
display: block;
margin: 0 auto;
}
(The effect is similar if the two are combined in a single <a>.)
I think this is related to using display: block on the image. I've reproduced the issue here: http://jsfiddle.net/pvd69wce/
If you don't want to remove the outline, one solution is to give display:inline-block to the <a>.
li {
display: block;
width: 9em;
margin-right: 1em;
height: 12em;
text-align: center;
}
li a {
display: inline-block;
}
li img {
height: 8em;
display: block;
margin: 0 auto;
}
<ul>
<li>
<a href='#'>
<img alt='' src='https://upload.wikimedia.org/wikipedia/commons/e/e2/Merton_College_Oxford_Coat_Of_Arms.svg' />
</a>
<a href='##'>Merton</a>
</li>
</ul>
To be honest though, I'm not entirely sure why this works exacty. Nor indeed, where the extra lines do come from when the <a> is not an inline-block.
Another alternative way you could think about assuming if the links are going to the same position is adding outline:none to the link but also adding a hover/focus effect on the image to highlight the link below it as to help for accessibility
Codepen http://codepen.io/noobskie/pen/ojXYgo
I am creating a simple blog template. In the right corner of the template there is a search box in the header. The search box should appear there, but at some moments it appears under the header.
This happens every now and then, if I refresh the page a few times the box will somethimes jump positions. I have used Google Chrome for the developent The html of this page is purely static, so I don't have a clue why this is happening. Could anyone find out why this box is jumping up and down.
The affected page can be found here.
I can't re-create your problem, but I'm sure adding position:relative to either nav or .wrapper
.wrapper {
width: 800px;
margin: 0 auto;
position: relative;
}
and position:absolute to the searchbox will prevent any jumping.
header#top #searchBox {
position:absolute;
top: 0;
right: 0;
display: block;
width: 240px;
height: 45px;
// line-height, any other styles
}
Try the following
header#top #searchBox{
float: right;
display: inline-block;
line-height: 45px;
width: 63%;
text-align: right;}
The solution is quite simple,
just ad float: left; to the menu element ( header#top nav ul)
header#top nav ul {
list-style: none;
height: 45px;
display: inline-block;
float: left;
}
than you will only need to add height to the wrapper
.wrapper {
width: 800px;
margin: 0 auto;
height: 46px;
}
How do I get my navigation bar to not overlap onto the picture, and when it does it goes underneath it, so you are still able to read the picture and use the navigation?
Here is a link to my code.
CSS
.navigation{
list-style-type: none;
position: absolute;
vertical-align: middle;
}
.navigation ul{
list-style-type: none;
padding: 0;
text-align: right;
float: right;
vertical-align: middle;
}
.navigation li{
display: inline;
padding-left: 10px;
vertical-align: middle;
font-size: 24px;
}
.header .navigation{
position: absolute;
top: 0;
right: 20px;
}
HTML
<div class="navigation">
<ul>
<li><a class="live" href="index.html">Home</a></li>
<li>Unit 1</li>
<li>Unit 2</li>
<li>Unit 3</li>
</ul>
</div>
If the question didn't make sense, make the result window fairly large and then zoom in and you'll see what I mean.
Here is what you are looking for:
DEMO
It seems you had your picture floating to the left, represented by this CSS:
float: left;
which would mean that all of your content would be to the right of the photo no matter what, so I just took that line of code out, and made the picture text-align:center; which means the photo would stay centered no matter what (giving you that nice responsive movement).
Just do me a favor, stay away from the position effects (relative, absolute, fixed) unless you absolutely need it... floats are better to use because they respond much better than positioning effects do. Plus, absolute positioning can definitely give you a headache after a while!
Hope this helped :)
Use the z-index property
css
.header h1 a{
display: inline-block;
color: white;
width: 135px;
height: 50px;
background: url(http://www.gpccolorado.com/wp-content/uploads/2013/10/Square-head.jpg);
text-indent: -9999px;
background-size: cover;
z-index:500;
position:relative;
}
Working Demo
Please look at the following jsFiddle and alter appropriately. I basically want the text to be perfectly in the middle of the images height.
http://jsfiddle.net/e7AV9/1/
You could set it as a background image and center it there and then add a bit of left padding like this http://jsfiddle.net/e7AV9/5/
I'm partial to absolute positioning.
CSS
* {
font-family: Verdana;
font-size: 10px;
}
nav > ul li:nth-child(2) a:before {
position: absolute;
top: 9px;
left: -2px;
content: url(http://s2.postimage.org/1waex5o10/9j41t1.png) " ";
}
nav a {
color: #626262;
padding: 10px;
margin-left: 10px;
margin-right: 10px;
width: 150px;
display: inline-block;
}
nav ul li {
position: relative;
display: inline-block;
list-style: none;
}
HTML
<nav>
<ul>
<li>Home</li>
<li>Community</li>
</ul>
</nav>
You could also put the image directly in the HTML and style it that way: http://jsfiddle.net/e7AV9/10/
Here's the problem with CSS:content:
I feel that we shouldn't use the content declaration at all. It adds
content to the page, and CSS is meant for adding presentation to the
page, and not content. Therefore I feel that you should use JavaScript
if you want to dynamically generate content. CSS is the wrong tool for
this job.
Another solution can be just to add vertical-align: top such as this example: http://jsfiddle.net/Vh6wP/.
Also here's a link on vertical-align: http://css-tricks.com/what-is-vertical-align/ for other values.