How do I display four (4) unordered lists horizontally?
lists.html
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="UTF-8" />
<title>
HTML Lists
</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>
HTML Lists
</h1>
<div id="container">
<ul id="k">
<li>katakana</li>
<li>katakana</li>
<li>katakana</li>
<li>katakana</li>
<li>katakana</li>
</ul>
<ul id="ki">
<li>katakana-iroha</li>
<li>katakana-iroha</li>
<li>katakana-iroha</li>
<li>katakana-iroha</li>
<li>katakana-iroha</li>
</ul>
<ul id="h">
<li>hiragana</li>
<li>hiragana</li>
<li>hiragana</li>
<li>hiragana</li>
<li>hiragana</li>
</ul>
<ul id="hi>
<li>hiragana-iroha</li>
<li>hiragana-iroha</li>
<li>hiragana-iroha</li>
<li>hiragana-iroha</li>
<li>hiragana-iroha</li>
</ul>
<ul id="i">
<li>Image</li>
<li>Image</li>
<li>Image</li>
<li>Image</li>
<li>Image</li>
</ul>
</div>
</body>
</html>
style.css
#container {
display: inline;
}
ul {
list-style-position: inside;
}
#k {
list-style-type: katakana;
}
#ki{
list-style-type: katakana-iroha;
}
#h {
list-style-type: hiragana;
}
#hi {
list-style-type: hiragana-iroha;
}
#i {
list-style-image: url(images/myimage.png);
}
ul {
list-style-position: inside;
display:inline-block;
vertical-align:top;
}
and display:block on the #i
#i {
list-style-image: url(images/myimage.png);
display:block;
}
fiddle- http://jsfiddle.net/nNRDa/ http://jsfiddle.net/nNRDa/1/
note: IE7 only supports display:inline-block on elements that are naturally inline.
The following will work if with has been given to ul and container
#container {
display: block;
width:100%;
overflow:hidden;
}
ul {
width:15%;
float:left;
margin:20px 3% 0 0;
display:block;
vertical-align:top;
}
width can also be given in px.
Related
Here : http://thunderstorm999.byethost9.com/
On resizing browser, menu icons on the top right position change it's position. If I resize the browser towards left then the top right menu icons shifts to left wherease i need the icons to be at the absolute position on the top right itself. It has to be static. I used absolute position to share class but then the icons shifts absolutely to left and then i have to give more than 1000px of margin left inorder to pull it to left. i
body{
margin:36px;
}
.logo{
float:left;
padding-left:100px;
}
.share{
list-style:none;
}
.share li{
display:inline;
float:right;
}
.share img{
margin-right:20px;
}
aside{
position:relative;
}
.navigation{
float:left;
list-style:none;
position:absolute;
text-align:center;
}
.navigation img{
margin-left:-30px;
margin-top: 30px;
}
.social{
position:relative;
}
.social_icons{
text-align:center;
position:absolute;
list-style:none;
top:480px;
left:-10px;
}
.social img{
margin-bottom:10px;
}
.main{
position:relative;
display:block;
padding:0;
}
.main-image{
position:absolute;
margin-left:100px;
margin-top:40px;
padding:0;
border-left:1px dotted red;
border-bottom:1px dotted red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Speck</title>
<link rel="stylesheet" type="text/css" href="normalize.css"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<header>
<div class="logo">
<img src="images\logo.png"/>
</div>
<ul class="share">
<li><img class="image1" src="images\fade.png"/></li>
<li><img class="image2" src="images\cart.png"/></li>
<li><img class="image3" src="images\share.png"/></li>
</ul>
</header>
<aside>
<ul class="navigation">
<li><img id="image1" src="images\explore.png"/></li>
<li><img src="images\material.png"/></li>
<li><img src="images\team.png"/></li>
<li><img src="images\contact.png"/></li>
<li><img src="images\merchandise.png"/></li>
</ul>
</aside>
<aside class="social">
<ul class="social_icons">
<li><img id="image1" src="images\fb.png"/></li>
<li><img src="images\vimeo.png"/></li>
<li><img src="images\linkedin.png"/></li>
</ul>
</aside>
<section class="main">
<div class="main-image">
<img class="image1" src="images/slides/circus-aerial-act.jpg" style="display: block;">
</div>
</section>
<footer>
</footer>
</body>
</html>
is there any better option? Please tell me where am I going wrong. I have used class 'share' in the html. Please follow the link above.
Use a fixed width on the share class and it will work:
.share {
list-style: none;
width: 1000px; // Example
}
Got an issue in ie7!, see the image below for how the dropdown menu looks. This works fine in every other browser but in ie7, as soon as you venture outside of the main li 'i.e.: the top link' the menu dissapears. I have already checked setting red boxes around everything and the li element is extending correctly to contain the sub menu but I cannot fix it. Any ideas?
Example of markup:
<nav>
<ul class="clearfix">
<li class="dropdown-link">Top Link
<ul class="clearfix dropdown-holder">
<li>
<div class="arrow"></div>
<div class="dropdown-holder-inner">
<ul class="dropdown">
<li>Link</li>
<li>Link</li>
<li>Linky</li>
<li>Link</li>
<li>Link</li>
<li class="last-child">Link</li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
</nav>
CSS is quite heavy so I have put the Full Code on jsfiddle: http://jsfiddle.net/n2kgX/3/
image: http://i.stack.imgur.com/k24Du.png
I create a sample here: http://jsfiddle.net/jho1086/bbULV/5/, I change the html code and css a little bit because in my opinion container are too many. And I change the HTML5 tag (<nav>) because IE8 and below is not supported with HTML5, unless you have a fixed.
<div id="nav">
<ul class="clearfix sf-menu">
<li class="dropdown-link">Top Link
<div class="clearfix dropdown-holder">
<div class="arrow"></div>
<ul class="dropdown clearfix">
<li>Link</li>
<li>Link</li>
<li>Linky</li>
<li>Link</li>
<li>Link</li>
<li class="last-child">Link</li>
</ul>
</div>
</li>
</ul>
</div>
css
#nav { background:#6B6C6E; width:300px; margin:30px auto 0;}
.sf-menu li{float:left; font:12px/1em 'arial'; position:relative; padding:0 0 5px;}
.sf-menu li a{float:left;padding:12px 10px 5px;color:#fff; text-transform:uppercase;}
.sf-menu .dropdown-holder{
position:absolute;
left:-999em;
width:218px;
top:93%;
}
.sf-menu li:hover .dropdown-holder {left:-999em;}
.sf-menu li:hover .dropdown-holder {left:0;}
.arrow { background:url(arrow.png) no-repeat left top; width:32px; height:8px; position:relative; z-index:2; left:10px;}
.dropdown {
box-shadow:0 0 5px #bec2c8;
background:#fff;
height:100%;
position:relative;
z-index:1;
padding:10px 10px 5px;
}
.sf-menu .dropdown li{text-transform:capitalize; border-bottom:1px solid #ccc;}
.sf-menu .dropdown li.last-child { border:0;}
.sf-menu .dropdown a{
float:left;
padding:5px 0;
width:198px;
color:#333;
}
Hope it helps.
I have a feeling that Your example is overcomplicated.
This is the simplest implementation of nested menu (with hover) I know of:
<ul class="outer">
<li>
<p>TOP MENU</p>
<ul class="inner">
<li>link1</li>
<li>link2
<ul class="inner">
<li>link2.1</li>
</ul>
</li>
<li>link3</li>
</ul>
</li>
</ul>
With a little bit of css:
.outer {
border: 1px solid red;
width: 100px;
}
.inner {
display: none;
}
.inner li {
padding: 0 0 0 10px;
}
.outer li:hover > .inner {
display: block;
}
Tested on IE8 (in IE7 mode with IE7 Standards). Check here: http://jsfiddle.net/BUuyV/11/
Here is what you can do:
<!--[if lte IE 7]>
<style type="text/css">
nav ul li:first-child ul.dropdown-holder{
left: 0px;
top:-4px;
}
</style>
<![endif]-->
Note: For :first-child to work in IE8 and earlier, a <!DOCTYPE> must be declared.
When I toggle IE9's Compatibility VIEW on/off, my navbar shifts positions:
When Compatibility View: ON:
navbar is centred fine. :)
When Compatibility View: OFF:
navbar is shifted to the right slightly. :(
NOTE: I could NOT attach a screenshot due to certain site restrictions. :(
Obviously I would like to correct this, but cannot; thus, why I am posting here. :)
My CSS file looks as follows:
/*background image for outside area*/
#outside {
background-image:url('/images/body_bg.gif');
}
/*style for main area*/
#main {
font:16px "Trebuchet MS", arial, verdana, serif, monospace;
margin-left:auto;
margin-right:auto;
width:1020px;
border:5px outset darkgrey;
background-color:white;
}
/*background image*/
#bg {
background-image:url('/images/content_bg.gif');
}
/*horizontal list item widths*/
ul.two li{width:50%;}
ul.four li{width:25%;}
ul.five li{width:20%;}
/*submenu list item widths*/
ul.sfour li a{width:25em;} /*alternate value = 19.1em*/
ul.sfive li a{width:18.5em;} /*alternate value = 15.3em*/
/*top navigation bar*/
#topnav ul {
list-style-type:none;
margin-left:auto;
margin-right:auto;
width:100%;
overflow:hidden;
}
#topnav li {
float:left;
}
#topnav li a {
background-color:#606060;
color:white;
display:block;
font-size:large;
font-weight:bold;
font-variant:small-caps;
padding-top:4px;
padding-bottom:4px;
text-align:center;
text-decoration:none;
}
#topnav li a:active {
color:yellow;
}
#topnav li a:hover {
background-color:#888888;
}
/*topnav submenus*/
#topnav li ul {
display:none;
position:absolute;
}
#topnav li:hover ul {
display:block;
}
#topnav li:hover li {
float:none;
}
#topnav li:hover a {
background-color:#888888;
}
#topnav li:hover li a {
display:block;
font-size:small;
font-weight:normal;
font-variant:normal;
text-align:center;
text-decoration:none;
}
#topnav li:hover li a:hover {
background-color:#B0B0B0
}
/*page title*/
h1 {
border-bottom:3px solid black;
color:gray;
margin-left:auto;
margin-right:auto;
width:90%;
}
/*content*/
#content {
margin-left:auto;
margin-right:auto;
width:90%;
}
My _Layout.cshtml file is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>C4DP - #Page.Title</title>
<link href="#Href("~/Styles/Style.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/scripts/functions.js"></script>
<script type="text/javascript" src="/scripts/sorttable.js"></script>
</head>
<body id="outside">
<div id="main">
<img src="/images/title_c4dp.gif" alt="C4DP" width="100%"/>
<div id="bg">
<div id="topnav">#RenderPage("~/navbar_Top.cshtml")</div>
<h1>#Page.Title</h1>
<div id="content">
#RenderBody()
</div>
<div id="bottomnav">#RenderPage("~/navbar_Bottom.cshtml")</div>
</div>
<p id="copyright">© 2012 C4DP. All rights reserved.</p>
</div>
</body>
</html>
The navbar file looks as follows:
#if (WebSecurity.IsAuthenticated) {
if (!Roles.IsUserInRole("admin")) {
<ul class="four">
<li>News</li>
<li>Stats
<ul class="sfour">
<li>Earnings</li>
<li>Session Average</li>
<li>Ranking</li>
</ul>
</li>
<li>Profile
<ul class="sfour">
<li>Personal Info.</li>
<li>Change Password</li>
</ul>
</li>
<li>Logout</li>
</ul>
} else { //logged in as administrator
<ul class="five">
<li>News</li>
<li>Stats
<ul class="sfive">
<li>Earnings</li>
<li>Session Average</li>
<li>Ranking</li>
</ul>
</li>
<li>Admin
<ul class="sfive">
<li>Cardrooms</li>
<li>Events</li>
<li>Members</li>
</ul>
</li>
<li>Profile
<ul class="sfive">
<li>Personal Info.</li>
<li>Change Password</li>
</ul>
</li>
<li>Logout</li>
</ul>
}
} else {
// nav bar when NOT logged in
<ul class="four">
<li>Home</li>
<li>Rules</li>
<li>Login</li>
<li>Request Membership</li>
</ul>
}
Please help!
It turns out that my navbar needed the {display:inline;} and {padding:0;} attributes added to it to make it work.
Not being a real guru at this stuff, I assume the INLINE attribute prevented it from being "pushed over" by its neighbouring element, and that the PADDING:0; attribute ensured that the navbar fit properly in its parent element.
If a "real guru" (someone with more experience than me) could confirm my assumption, that would be much appreciated. Thank you in advance.
I use this method here in the below example.
<!-- vim: set nowrap:-->
<html>
<style type="text/css">
#titleImg{ <!--No use in the code but it makes -->
<!--things to work for some odd reason?!-->
position:absolute; <!--If I remove this, FAILURE --not 2x2.-->
<!--It becomes one-after-another after rem.-->
<!--Why?-->
}
li{
width:190px;
height:190px;
display: block;
float: left;
margin: 5px;
}
</style>
<body>
<center>
<ul style="width:400px; height:400px; text-align:center;">
<li>
<img id="titleImg"
src="../Pictures/Logos/logo.png"
style="width:100%;height:100%">
</li>
<li> </li>
<li> </li>
</ul>
</center>
</body>
You don't I think. Here's an updated jsFiddle example of what I believe you are trying to accomplish. Note: never use <center></center> tags - they are not good practice. Instead set the parent to display: block and its margin to 0 auto.
Here is the new live example
And the code:
HTML
<ul>
<li> <img src="http://www.woodlands-junior.kent.sch.uk/customs/images/uk.jpg"></li>
<li> <img src="http://www.crwflags.com/fotw/images/u/us.gif"> </li>
<li> <img src="http://www.enchantedlearning.com/school/Canada/flagbig.GIF"> </li>
</ul>
CSS
ul {
display: block;
margin: 0 auto;
}
li {
width:190px;
height:190px;
display: block;
float: left;
margin: 5px;
overflow: hidden;
}
av been scratching my head because of this for too long.I would like to change the width and height of easy slider version 1.7,i have gone through the faqs part of this site after researching in so many other places and cudn't get a solution.Please help.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Pilot project</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easySlider1.7.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true,
numeric: true
});
});
</script>
<link href="pilotp.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="v1.7.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div class="header">
<div class="menu">
<ul>
<li>Home</li>
<span>
Web Hosting
Domain Registration
</span>
</li>
<li>Consultancy
<span>
I.S Audit
Information Security
</span>
</li>
<li>
Career's
</li>
<li>
Contact Us
</li>
<li>
Testimonials
</li>
</ul>
</div>
</div>
<div id="container">
<div class="slidercontainer" style="background-color:fuchsia;width:800px;height:300px"><!--Will hold the slider -->
<div id="content" style="background-color:yellow;width:800px; height:299px;">
<div id="slider" style="background-color:pink;width:800px;height:298px;">
<ul>
<li><img src="images/01.jpg" alt="Css Template Preview" /></li>
<li><img src="images/02.jpg" alt="Css Template Preview" /></li>
<li><img src="images/03.jpg" alt="Css Template Preview" /></li>
<li><img src="images/04.jpg" alt="Css Template Preview" /></li>
<li><img src="images/05.jpg" alt="Css Template Preview" /></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
this is the css
/* Easy Slider */
#slider ul, #slider li,
#slider2 ul, #slider2 li{
margin:0;
padding:0;
list-style:none;
}
#slider2{margin-top:1em;}
#slider ul li, #slider2 ul li{
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
width:800px;
height:241px;
overflow:hidden;
}
#prevBtn, #nextBtn,
#slider1next, #slider1prev{
display:block;
width:30px;
height:77px;
position:absolute;
left:-30px;
top:71px;
z-index:1000;
}
#nextBtn, #slider1next{
left:696px;
}
#prevBtn a, #nextBtn a,
#slider1next a, #slider1prev a{
display:block;
position:relative;
width:30px;
height:77px;
background:url(../images/btn_prev.gif) no-repeat 0 0;
}
#nextBtn a, #slider1next a{
background:url(../images/btn_next.gif) no-repeat 0 0;
}
/* numeric controls */
ol#controls
{
height:28px;
margin-top:-20em;
margin-bottom:1em;
margin-right:0px;
margin-left:8px;
padding-top:0px;
padding-bottom:0px;
padding-left:0px;
padding-right:0px;
}
ol#controls li
{
margin:0 15px 0 0;
padding:0;
float:left;
list-style:none;
height:28px;
line-height:28px;
}
ol#controls li a
{
float:left;
height:28px;
line-height:28px;
border:1px solid #ccc;
background:#DAF3F8;
color:#555;
padding:0 10px;
text-decoration:none;
}
ol#controls li.current a
{
background:#5DC9E1;
color:#fff;
}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
/*just added */
ol#controls { margin: -30px 0 0 0 !important; }
/* // Easy Slider */
See line 73-76 in the CSS file screen.css:
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
And also change the width of the container:
#container{
margin:0 auto;
position:relative;
text-align:left;
width:696px; /* change this */
background:#fff;
margin-bottom:2em;
}
I have fixed it and it involved changing (increasing or decreasing) the width and height of
#slider ul li
{
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
width:796px;
height:246px;
overflow:hidden;
}
The width and height of the images are of importance also.
Thank you for you assistance!
In javascript file (easyslider.js) remove:
obj.width(w);
obj.height(h);