i need
at this moment code look
Css
ul#content {height:1%;overflow:hidden;list-style:none;margin:0;padding:0;max-width: 1020px;}
ul#content li{vertical-align:top;display:inline-block;margin:0 2% 26px 0;width:auto;}
* html ul#content li{display:inline;}
*+ html ul#content li{display:inline;}
Html
<ul id="content" >
<li>
<div style="height: 420px;width: 740px;" ></div>
</li>
<li>
<ul>
<li>
<div style="min-width: 220px;">
text
</div>
</li>
<li>
<div style="min-width: 220px;">
text
</div>
</li>
<li>
<div style="min-width: 220px;">
text
</div>
</li>
</ul>
</li>
</ul>
Maybe css media queries are something you want to look in to:
http://css-tricks.com/6731-css-media-queries/
This specific tutorial explains how to make changes to the layout/styles based on screen width.
Basically it allows to conditionally set styles on elements, in this case you could make seperate styles for the ul depending on screen width. Browser support is pretty decent, and as a fallback you could supply some pretty simple js code to handle the not supporting browsers.
I'm guessing you need something like the following for it to look like the second image...
html:
<div id="content"></div>
<ul id="contentList">
<li>Text</li>
<li>Text</li>
...
</ul>
css:
#content {width:740px; height:420px}
#contentList {margin:10px 0; overflow:hidden}
#contentList li {min-width:220px; float:left; list-style:none}
Related
Hope somebody can see what's going on with this, it's got me beat.
I have an issue with the tag text elements inside a drop-down menu extending beyond the li element for the mobile version of the navigation in the footer. The li element has a width restriction (is shaded orange to see clearly), you can see the problem on this page when browser is mobile width wide https://www.mcveaghfleming.co.nz/nav-issues.html There are some long link names and instead of flowing under the line above they are extending past the end of the li element.
Here's the relevent html
<div class="footer">
<div class="blockfooter">
<div class="row ft-low-nav ">
<style>
.foot-mobile-on .dropdown-menu li{float:left; width:100%; background:orange; word-wrap: break-word !important;}
.foot-mobile-on .dropdown-menu li,
.foot-mobile-on .dropdown-menu li a{display:inline-block;}
</style>
<span class="foot-mobile-on">
<div class="col-md-12">
<div id="navbar" class="navbar-collapse collapse dropdown">
<ul class="nav navbar-nav" >
<li><a href="#" class="dropdown-toggle make-b" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Business & Corporate <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li class="make-b">Business & Corporate </li>
<li>Anti-Money Laundering and Countering Financing of Terrorism Act 2009 Compliance and Advice
</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</span>
<!-- end-->
</div>
</div>
</div>
<!--end-->
Be sure to set position:relative or anything different than the static default to the UL.
Adding up, this is to prevent the 100% width to be referring to an upper parent. My guess is that a lack of position declaration on the parent is scaling up the DOM to the entire body width. A quick inspect on the code should give you a hint about this, but is hard without seeing the actual code in action.
I am working on visual studio express 2013 and create a default project based on webform with default template as shown in link http://codepen.io/anon/pen/dPWzRd
For some reason Header & footer elements appear our their main wrapper as it is show in the codepen example. I tried to play around with few css properties but it breaks the design.
<header>
<div class="header-wrapper">
<div class="float-left">
<p class="site-title"> logo here</p>
</div>
<div class="float-right">
<nav>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Test</li>
</ul>
</nav>
</div>
</div>
</header>
How can ii fix this so that Logo and menu items show inside the Header Wrapper (basically inside the red box) and same for the footer section
You can just use in CSS
display: inline-block;
instead of
float: left;
Full example:
.float-left {
display: inline-block;
}
It's because style float makes element "invisible" for parent. Style display: inline-block acts similar to float but is "visible".
when you have to element inside in other div and two div's are floating after that you need to add clear.
forked example
http://codepen.io/anon/pen/mymMMz
<header>
<div class="header-wrapper">
<div class="float-left">
<p class="site-title"> logo here</p>
</div>
<div class="float-right">
<nav>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Test</li>
</ul>
</nav>
</div>
<div class="clear"></div>
</div>
</header>
.clear {
clear: both;
}
or add overflow hidden to .header-wrapper
I was wondering if it's possible to achieve an effect as shown in my mock up, with a single ul as opposed to a ul for the image and a ul for text, to to have an image and text shown below in a single ul, using css?
Something like this
<ul>
<li><img src=""/><p>text</p></li>
<li><img src=""/><p>text</p></li>
</ul>
Any help would be great,
Cheers
Here's the mock up:
Completely doable. Each <li> gets an <img> and <p> tags, and then text-align:center; on the <ul>.
HTML
<ul>
<li>
<img src="http://placehold.it/100x100.png>
<p>Here's a caption</p>
</li>
<li>
<img src="http://placehold.it/100x100.png>
<p>And another caption</p>
</li>
<li>
<img src="http://placehold.it/100x100.png>
<p>One more caption</p>
</li>
</ul>
CSS
ul{
text-align: center;
}
li{
display: inline-block;
}
Codepen
I'm trying to tweak an existing Twitter Bootstrap navigation bar to include a sign-out item, which is implemented as a form:
<div class='navbar'>
<div class='navbar-inner'>
<div class='container'>
<a class='brand'>Test</a>
<ul class='nav'>
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
<li><form >Sign Out</form></li>
</ul>
</div>
</div>
The logout link gets rendered differently than the rest of the navigation items. I'm sure this is a simple fix for someone knowledgeable in Twitter Bootstrap, but I'm pretty lost and would appreciate a push in the right direction.
I have a JSFiddle demonstrating the issue here.
The <form> tag is disrupting the bootstrap CSS if you inspect the bootstrap code you can see the selector for the a styles are only targeting direct descendants of the <li> in the nav
.navbar .nav > li > a
I am not sure the indended application of the form is but a real easy fix is to wrap the entire navbar with the form.
<form>
<div class='navbar'><div class='navbar-inner'>
<div class='container'>
<a class='brand'>Test</a>
<ul class='nav'>
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
<li>Sign Out</li>
</ul>
</div>
</div>
</form>
Try This
<li>Sign Out</li>
remove the form tags
Check here JSFiddle
Hello I've got this weird problem with css.
I'm displaying an unordered list
<ul>
<li>
<div class='align-left'>
PMI
</div>
<div class='align-right'>
<img src="/img/delete_icon2.png" id='19' class="elim" name="19">
</div>
</li>
<li>
<div class='align-left'>
GRANDS COMPTES
</div>
<div class='align-right'>
<img src="/img/delete_icon2.png" id='21' class="elim" name="21">
</div>
</li>
<li>
<div class='align-left'>
associations
</div>
<div class='align-right'>
<img src="/img/delete_icon2.png" id='22' class="elim" name="22">
</div>
</li>
<li>
<div class='align-left'>
PME
</div>
<div class='align-right'>
<img src="/img/delete_icon2.png" id='25' class="elim" name="25">
</div>
</li>
<li>
<div class='align-left'>
ecoles privees
</div>
<div class='align-right'>
<img src="/img/delete_icon2.png" id='28' class="elim" name="28">
</div>
</li>
<li>
<div class='align-left'>
organisme
</div>
<div class='align-right'>
<img src="/img/delete_icon2.png" id='32' class="elim" name="32">
</div>
</li>
<li>
<div class='align-left'>
test
</div>
<div class='align-right'>
<img src="/img/delete_icon2.png" id='34' class="elim" name="34">
</div>
</li>
</ul>
now this is accompanied by these css rules:
.align-right{
float: right;
}
.align-left{
float: left;
}
On chrome, the bullet point from the list is actually UNDER the text for the bullet point.
Why did I do this, I want the images to be aligned from top down.
here are screenshots of the problem
thanks in advance.
the code you provided won't cause this problem.
Depending on what you want to do, adding
ul { list-style-type:none; }
or
ul li { padding-left:40px; }
may achieve desired effect.
edit
try adding overflow:hidden; to the li elements
I'd also personally do it like this:
li {
background:url(/img/delete_icon2.png) no-repeat center right;
padding-right:25px; /*might need to adjust */
}
<ul>
<li>PMI</li>
<li>Bla bla</li>
</ul>
no need to over-complicate things.
If you want the DIVS clickable you can just do
<li>PMI</li>
and CSS:
li a { display:block; width:xxx; height:xxx; }
as required.
Try playing with the list-style-position property. Options are inside and outside.
I had the same problem and it seems that you do not have exact control over the position of the default bullet point.
For me the following was working in Firefox and in IE, but in Chrome it is positioned inside the text:
<ul style="list-style-position: outside; margin:0; padding:0;">
<li />
<li />
</ul>
I needed to set margins and paddings for both the list and the list items to get the bullet point(disk) outside the text
<ul style="list-style-position: outside; margin:10px; padding:10px;">
<li style="padding: 10px 0 0 3px; margin-bottom: 8px;" />
<li style="padding: 10px 0 0 3px; margin-bottom: 8px;" />
</ul>
The strange part is, that if I set those bottom margins to anything less than 7 pixel, the bullets jump inside. 8px is the smallest working value, although there is lots of space around and between the elements (they move closer to each other fluently, only the bullet points start to jump).