How can this be achived ? I tried using inline-block , but the siblings move to the new line , i want the divs to move to the sides , any hints ?
http://fiddle.jshell.net/prollygeek/CdE2y/
hover the middle div.
All the divs are inline-block, so to prevent them from going to the next line, try setting the white-space to nowrap for the container:
#container {
...
white-space:nowrap;
}
Here is the working fiddle
What about keeping everything full and centered?
this uses a little trick that comes from the justified list items rule from http://getbootstrap.com/ and using li instead of div
<ul id="container">
<li id="div1">
<p>Col 1</p>
</li>
<li id="div2">
<p>Col 2</p>
</li>
<li id="div3">
<p>COl 3</p>
</li>
</ul>
http://fiddle.jshell.net/CdE2y/5/
Try this: http://jsfiddle.net/prollygeek/CdE2y/
I changed inline-block to table-cell and apply :hover on #container.
Related
There's this fixed header element (a block element), with an absolute positioned nav element with a menu, and another fixed element as the logo:
<header>
<nav id="menu">
<ul id="menuItems">
<li class="menu-item" role="menuitem">About</li>
<li class="menu-item" role="menuitem">Contact</li>
</ul>
</nav>
<div id="topLogo">
<h1>MAIN</h1>
<h2>SUB</h2>
</div>
</header>
The <header> doesn't have dimensions, it doesn't take-up space (check out with an inspector tool).
I need it to take space (and still be fixed).
Look at the JSFiddle to see it with the complete CSS as well:
https://jsfiddle.net/5amo16q8/4/
Changing the nav to float:left and removing the position:absolute seem to create to desired result.
See: https://jsfiddle.net/5amo16q8/8/
Apologies, I have attempted to create a JS Fiddle replication, but the issue does not seem to occur in the JS Fiddle so I can only think it is a problem with the more general CSS on the page.
The JS Fiddle created does not show the error, but here it is anyway: https://jsfiddle.net/j2qxh9zg/
I am attempting to line up two elements side-by-side. They use display:inline-block; and have a width of 33.3% and 66.6%. The body has font-size:0 set in order to remove any whitespace issues so I do not believe this to be an issue with the whitespace between containers.
<div class="grid one-third">
<div class="logo">
<img src="assets/logo.png" alt="Something"/>
</div>
</div>
<div class="grid two-thirds menu">
<ul>
<li><a name="#home">Home</a></li>
<li><a name="#expertise">Our Expertise</a></li>
<li><a name="#portfolio">Portfolio</a></li>
<li><a name="#tech">New Technology</a></li>
<li><a name="#contact">Get In Touch</a></li>
<li>01483 746650</li>
</ul>
</div>
I cannot seem to get the .one-third and the .two-thirds divs to sit side by side, despite them both being display:inline-block;
.grid.one-third{width:33.3%}
.grid.two-thirds{width:66.6%}
.grid{display:inline-block;box-sizing:border-box;}
Live link, you can see the menu is at the bottom of the page (grey box) http://digitalshowcase.somethingbigdev.co.uk/
The nav container is 70px high. It should be 50px high. Both the inside elements are 50px high, yet the container expands. Why?
I think adding vertical-align: middle; to .grid will do it.
I try use after selector in my CSS code, but is not well centered.
I use Bootstrap. When I set after selector on li not a, content moves down.
This is my HTML code:
<nav class="navbar">
<div class="row">
<div class="col-md-2">
<img src="/images/logo3.png" class="img-responsive">
</div>
<div class="col-md-5">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Prices</li>
</ul>
</div>
<div class="col-md-5">
<ul class="nav navbar-nav navbar-right">
<li>Projects</li>
<li>Logout</li>
</ul>
</div>
</div>
</nav>
And this is CSS code:
.navbar-nav li a::after {
content: "|" black;
}
.navbar-nav li:last-child a::after {
content: " ";
}
Here's working fiddle for you - jsFiddle -
FYI : need to expand the result section enough for your menu items to align on a single row.
PS : And I'm just hoping that you use my suggestion number 2 there ( the best would the third, but it depends on what kind of menu you need ). Using pseudo class to get those separators in your menu isn't a good practice. It could save the amount of HTML codes, but that's more like it when you use additional li between those menu items.
EXPLANATION
Your CSS was almost there, but you made a mistake.
content: "|" black;
You can't use CSS shorthand on the content attribute. And you need to give the ::after pseudo class padding-left to make it center-aligned.
Try above jsFiddle Hope this helps.
This is a comment, but I think it's the right answer so ^^
This seems very overcomplex. You should simply use display:inline on your ul's and then use padding for spacing between the list items. You can then float left and right the two individual lists respectively to get the positioning :).
I have a list of calendar events. The html looks like this:
<li data-id="1">
<a href="#calendar-item/1">
<div class="calendar" style="">
<div class="calendar-header"></div>
<div class="calendar-month">Dec</div>
<div class="calendar-day">11</div>
</div>
<p>Parents Association Non-Uniform Day</p>
<span class="chevron"></span>
</a>
</li>
I have given the list item padding, but it is ignoring the content of the div tag, see the image:
Here is the jsfiddle.
works in firefox for me but you defenitely need to clear your float. The easiest way to do that is using overflow: hidden on the list item so it takes the space of the floating icon and wraps its padding around that instead of just the text next to it
Try this my be slow your problem
CSS
give flot:left in below class
li p:nth-of-type(1) {float:left;}
And give flot:left in below class
li{float:left;}
so I have been trying all this stuff with first-child and everything and none seem to be working. If I have a div set up as such:
<div class="content">
<div class="thing">
abd
</div>
<div class="thing">
</div>
<div class="thing">
123
</div>
<div class="thing">
<li class="list" goal="target">
1
</li>
</div>
<div class="thing">
<li class="list">
2
</li>
</div>
<div class="thing">
<li class="list">
3
</li>
</div>
<div class="thing">
<li class="list">
4
</li>
</div>
</div>
what line of css that will be able to target only the first li element in the .content div (the one with the attribute goal="target")
now this can be fairly messy and there can be anywhere from 0 to 10 divs without a li before the first that contains one.
I have tried nearly anything with first-child, but it always targets every single li because they are in divs.
here is a jsfiddle if you want to try things
In CSS the format is grandparent parent element child... and :nth-child gives you the element the number specified down, so for your case that would be
.content .thing:nth-child(4) li {
/* CSS goes here */
}
In your example .content is the grandparent, .thing (the fourth one) is the parent, and of course the li is the element. Spaces are required for distinguishing in between levels in CSS.
Here is a working jsFiddle
Edit Without it being hard coded it's impossible to select the first li no matter who it's parent is without javascript.
Here is a jQuery fix:
$('.content').find("li").eq(0).css({ /* CSS goes here */});
Here is a straight javascript fix:
var elems = document.getElementsByTagName('li')[0];
elems.style.property="value";
OK first things first, goal is an invalid attribute so you shouldn't be using it. If you need custom attributes you should be using data-attributes
In order to target an element by attribute you should be using an attribute selector in your case the following selector would work.
li[goal="target"]{
/* Your styles go here.*/
}