I want to allow liitems to have the same width but different height that may include images and text. the problem is when i float left, or display:inline-block, and one of the item exceeds the height. It disturbs the visual style of the content. Is there any way where i can manage this?
I want the li to follow a simple rule as
li {
float:left;
display:list-item;
width:200px;
background:#CCC;
height:auto;
padding:10px;
margin:0 10px 10px 0;
}
The example website which includes the same is
Genny Website
Sites like genny.com and pinterest.com do NOT float their elements, but rather position them absolutely and set their left and top values dynamically through JS. First, they grab the count of elements on the page. Second, they sniff the height and width of the elements. Third, they change the left and top CSS values.
+1 for the Masonry answer, I just wanted to explain how it works.
jQuery Masonry will be what you're looking for here, by nature the li's will never really bump up to the one above them without some less-than desirable code, but that jQuery plugin makes it very simple.
I think you would need to create three columns. something like:
<ul id="first column">
<li>Some content</li>
<li>Some content</li>
. . .
</ul>
<ul id="second column">
<li>Some content</li>
<li>Some content</li>
. . .
</ul>
<ul id="third column">
<li>Some content</li>
<li>Some content</li>
. . .
</ul>
Then you shouldn't have to float the li tags.
Related
What I'm trying to do is putting content of "|" after each first level anchor tag "which is the main menu not the sub-menu" follow #menuCont but exclude the last child.
tried to do it with CSS then I had unexpected result, then tried with jQuery and I had another unexpected result.
Main page menu HTML
<div id="menuCont">
<ul>
<li>
About
<ul>
<li>Vision</li>
<li>Mission</li>
<li>Values</li>
</ul>
</li>
<li>News</li>
<li>Gallery</li>
<li>Activities</li>
<li>Facilities</li>
<li>Students</li>
<li>Staff</li>
<li>Contact info</li>
</ul>
</div>
Another page menu HTML
<div id="menuCont">
<ul>
<li>Home</li>
<li>
Static pages
<ul>
<li>Homepage</li>
<li>Vision</li>
<li>Mission</li>
<li>Values</li>
<li>Contact info</li>
</ul>
</li>
<li>
Dynamic pages
<ul>
<li>News</li>
<li>Gallery</li>
<li>Videos</li>
</ul>
</li>
<li>
Administration
<ul>
<li>Create accounts</li>
<li>Edit accounts</li>
<li>Assign Students</li>
<li>Assign teachers</li>
</ul>
</li>
</ul>
</div>
CSS Controlers
CSS approch
#menuCont ul li a:after {content:"|"; font-size:30px; color:#FFF !important; font-weight:bold; color:#044c9e; margin:15px 5px;}
#menuCont ul li a:last-child:after {content:"" !important;}
CSS Approch for jQuery
#menuCont ul li a.conAfter:after {content:"|"; font-size:30px; color:#FFF !important; font-weight:bold; color:#044c9e; margin:15px 5px;}
jQuery code
$("#menuCont").children().children().children("a:not(:last-child)").addClass("conAfter")
The unexpected results in reflect of the CSS approch:
"Main page"
From Ie = it just selects all of the anchor tags and add the content to them and totally ignored where I ask to remove the content from last child.
From Ff,Gc,Sf,Op = I get the same from all of them, which is they select only first child and add the content to it.
"The other page"
From Ie = it just selects all of the anchor tags and add the content to them and totally ignored where I ask to remove the content from last child.
-This is different-From Ff,Gc,Sf,Op = I get the same from all of them, they add the content to all of the elements except the first anchor tag.
The unexpected results in reflect of the jQuery approch:
"Main page"
From Ie,Ff,Gc,Sf,Op = I get the same from all of them, which is they select only first child and add the content to it.
"The other page"
From Ie,Ff,Gc,Sf,Op = I get the same from all of them, they add the content to all of the elements except the first anchor tag.
Thanks all.
Thanks to #charlietfl I managed to reach a neutral state.
I will emphasis the solution in case somebody reaches that post with the same problem.
To get only the first level of children I need to use CSS child selector ">" start from the ancestor to the parent to the child if you get what I mean, that will give me an exact and specific selection.
And the other problem I didn’t notice that I’m calling the last child of the anchor tag instead of calling the anchor tag itself < a >, by calling the last child of < li > which is a, I got what I wanted.
Yet, IE8 didn’t understand that line, but all of the other browsers get it quiet good.
Good luck all!
If use > will denote children only
#menuCont > ul > li >a:after {content:"|";padding:0 10px; color:red;font-weight:bold ; }
#menuCont > ul> li:last-child >a:after {content:"" !important;}
Also note looking for <a> of last child <li>
DEMO
couple thing i see are the color is making the link invisible if you have a white background, but the underline needs text:decoration:none;
is this fiddle here what you are after?
http://jsfiddle.net/MV2dn/2/
I have header (100% width, 277px height), and in header I should have background image, x-repeated, which will stay in same position (x axis position), on all resolutions (1024+ actually, no need for mobile version so far). This is how it should look on all resolutions:
http://i.imgur.com/5rT4Xi9.png?1 (see profit, and cloud line under it - that's right position)
However, by changing resolution, background image changes it's position too ...
HTML:
Webopps
<h2>Helping you profit</h2>
<h3>from the Web</h3>
</div>
<div id="menu">
<ul>
<li>
Contact us
</li>
<li>
About us
</li>
<li class="has-sub">
The market
<ul class="submenu">
<li>
Mainstream
</li>
<li>
Adult
</li>
<li>
Niche
</li>
</ul>
</li>
<li>
Downloads
</li>
</ul>
</div>
</div>
CSS:
header {
width:100%;
height:277px;
z-index:999;
position:relative;
background-image:url(images/clouds2.png);
background-repeat:repeat-x;
background-position:-133px 0px;
}
http://jsfiddle.net/kF7Br/
Test link: http://bybyweb.com/webopps/
I have tried with media queries (not so smart solution, you can see at the bottom of my css, but without success), i have thought about js/jquery solutions, but have no idea how to make it... I am opened to all kind of hacks/solutions (css, jquery, html structure changes).
You can use this code :
function bgPos(){
var w = $(window).width() - $('#header-content').width();
w = w/2;
$('#header').css('background-position', w+'px 0')
}
$(window).on('resize', bgPos).trigger('resize');
But you will have to do some maths to place it well.
Fiddle : http://jsfiddle.net/kF7Br/1/
Did you try setting
background-attachment:fixed;
Also, if you dont need its position to be relative, set it to absolute.
For the desktop version, I suggest using the top and center keywords instead of using pixels. This approach looked good until about 400px wide, at that width you could use a responsive media query to override to a pixel value like you had before.
background-position:top center;
I'm going for something similar to the classic iPhone "Swipe to reveal" look using
CSS
the code structure I'm aiming for is something like like
<ul>
<li>Top Content</li>
<li>Bottom Content</li>
</ul>
So that using javascript and css transition I can get the top layer to slide away and reveal the bottom layer. I've tried setting the bottom layer to top: -(height of li) and z-index -1 which sort of works (they do overlap) except there is a large space between the divs due to this (margin 0 padding 0 didn't fix that)
How else could I implement this?
I really think using same list to accomplish this is a terrible idea you should just use two different ul's http://jsfiddle.net/8JYA2/
<ul class="list-1">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
<ul class="list-2">
<li>Back One</li>
<li>Back Two</li>
<li>Back Three</li>
<li>Back Four</li>
</ul>
I might be wrong but why are you aiming with that code structure?
I've got a working solution now after a bit of help and experimenting.
The solution was to to make one list, but put two divs per li and layer the divs.
Then using javascript, modify the left and right percentage on the divs so that the top div slides off. The code looks something like this
<ul>
<li><div>Top Content</div></li>
<li><div>Bottom Content</div></li>
</ul>
Combined with what I figured out before regarding setting the z-index higher on the top content it works great.
I'm trying to make a menu that opens to the right side of the the div that's clicked to activate it. However, I don't understand how I can do the positioning correctly. I would like the bottom of the last li (where I store the submenu options) to be even with the bottom of the div that activates the popout. However, giving is a negative margin
ul.dd{
z-index:100;
position:relative;
margin-bottom:-30px;
display:none;
}
isn't working out. How can I accomplish this
http://jsfiddle.net/mBPfG/1/
Thanks!
Your container div was preventing the hidden <ul> tag from floating to the right of the other. Also added a negative margin-top to adjust positioning.
I have updated the jsfiddle.
I simply added:
.dd_container { width:600px; }
ul.dd{
z-index:100;
position:relative;
margin-top:-60px;
display:none;
}
However, I would suggest nesting your second <ul> within the first <li>.
I have modified the HTML and CSS completely to have a more symatically correct answer.
<div id="dd_container" class="dd dd_container">
<ul class="dd_deploy">
<li>more options -->
<ul class="dd">
<li>el1</li>
<li>el2</li>
<li>el3</li>
</ul>
</li>
</ul>
<div class="cb"></div>
Less markup is better
View the full jsfiddle.
Is it possible with pure css or really simple way to transfer nav ul menu as dropdown list when body width is smaller than given (media css) (mobile phones etc)
<nav>
<ul>
<li>Blog</li>
<li>About</li>
<li>Archives</li>
<li>Contact</li>
<li class="subscribe">Subscribe via. RSS</li>
</ul>
</nav>
Assuming: I want to display it normally, but when on mobile with narrow screen, want to display it as dropdown menu - same as select form.
[edit]
something like: http://themewich.com/aware/ -see the menu when resized.
I don't know what you want exactly but this maybe can help you .I hope
<nav>
<ul> Test
<li>Blog</li>
<li>About</li>
<li>Archives</li>
<li>Contact</li>
<li class="subscribe">Subscribe via. RSS</li>
</ul>
</nav>
ul li{
display:none;
}
ul:hover li{
display:block;
}
jsFiddle
You can detect the screen width using javascript, and if the screenwidth is too small, you can change the list to a dropdown menu using tags. Google "javascript innerHTML" for more info how to do this.
If you look at the example URL with CSS disabled (or view the source), you will see that both types of navigation are present (nested list and form select). The page is using media queries to determine which element to hide: narrow devices will hide the list version while wide devices will hide the form version.