Given the below fiddle:
Fiddle
What i'm looking to do is have the first column expand vertically in order to take up the remaining vertical space. Basically i want that right border to be equal across all the columns.
I'm a relative css/front-end newbie. Any ideas on how i can get this fixed up?
Full code below:
<html><head></head><body class="Body" onload="checkCookie()">
<div id="Container">
<div id="menu" class="clearfix">
<div class="menuItem" id="wallPopsMenuItem">
<a href="/wall-pops.aspx">
<div class="area">peel & stick</div>
<div class="category">Wall Decals</div>
</a>
<div class="subMenu" id="wallDecorSubMenu">
<div class="subMenuColumn">
<div class="inner">
<div>All Products</div>
<div>New</div>
<div>Popular</div>
<div>On Sale</div>
</div>
</div>
<div class="subMenuColumn">
<div class="inner">
<div class="title">Wallpops</div>
<div>
<ul>
<li>All Wallpops</li>
<li>Wall Art Kits</li>
<li>Wall Art for Kids</li>
<li>Wall Art for Nursery</li>
<li>Dot, Blox, Stripes</li>
<li>NuWallpaper</li>
<li>Room Dividers</li>
<li>Decorative Room Panels</li>
<li>Dry-Erase Decals</li>
<li>Chandeleiers</li>
<li>3-D Animal Heads</li>
<li>Hard Boards</li>
<li>Jewel Accented</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<style type="text/css">
body { color: #333; font-family: Gill Sans MT, Verdana, Arial, sans-serif; font-size: small; margin: 0 auto; text-align: left;position: relative;}
#Container { max-width: 960px;margin: 0 auto; }
.subMenu{padding: 5px;font-family: Arial;font-size: 9pt;text-transform: lowercase;background: white;display: none;position: absolute;z-index: 1;text-align: left;margin-left: 20px;box-shadow: 5px 5px 10px rgba(102, 102, 102, .7);}
#wallPopsMenuItem:hover #wallDecorSubMenu{ display: block;}
#dryEraseMenuItem:hover #dryEraseSubMenu{ display: block;}
.subMenu div, li{ padding: 2px 5px 0 0;}
.subMenu ul{ list-style: none;padding-left: 10px;margin: 0;}
.subMenu .subMenuColumn{float: left;height: 100%;}
.subMenu .inner{border-right: 1px solid #6a033d;height: 100%;padding: 0 10px 0 10px;}
.subMenu .shopBy{height: 100%;border-right: none;margin-left: 20px;min-width: 275px;}
.subMenu .title{ text-transform: uppercase;}
#menu{ position: relative;margin-top: 30px;}
#menu .menuItem{ float: left;width: calc(100% / 6);text-align: center;}
#menu .area{ color: #e86d1f;font-family: Arial;font-size: 10pt;text-transform: lowercase;}
#menu .category{color: #e86d1f;font-family: Arial;font-size: 11pt;font-weight: bold;text-transform:uppercase;}
.clearfix::after {
content: " ";
display: block;
height: 0;
clear: both;
}
</style></body></html>
Replace display: block with display: flex for #wallPopsMenuItem:hover #wallDecorSubMenu and remove float: left, height: 100% from .subMenu .subMenuColumn.
Updated JSFiddle
Related
I develop under Laravel 5.4. There is a top menu show as in the picture 1. top menu
However, I want to the menu show like picture 2 ideal top menu show,show in any size screen only in one row. Is there any good solution to make it? Like by change the menu font auto?
.venus-menu {
width: 100%;
margin: 0;
padding: 0;
position: relative;
float: left;
font-family: 'Open Sans', sans-serif;
list-style: none;
background: #fff;
box-shadow: 0 1px 3px #dedede;
}
<div class="navbar-header">
<a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#" style="display: block;"><i class="fa fa-bars"></i> </a>
<div class="content">
<ul class="venus-menu" id="top_bar">
<li>首页</li>
<li>title1</li>
<li>title2</li>
<li>title3</li>
<li>title4</li>
<li>title5</li>
<li>title6</li>
<li>title7</li>
<li>title8</li>
<li>title9</li>
<li>title10</li>
</ul>
</div>
</div>
Check working fiddle to get the same, but you have to change css part
NOTE - As you mansion that "top menu display only in one row"
Working fiddle
fiddle code
.navbar-minimalize {
margin:5px 50px 5px 15px;
display: inline-block;
}
.content {
width:100%;
display:flex;
width: 100%;
margin: 0;
padding: 0;
position: relative;
float: left;
font-family: 'Open Sans', sans-serif;
list-style: none;
background: #fff;
box-shadow: 0 1px 3px #dedede;
}
.content ul.venus-menu {
width:100%;
margin:0px;
padding:0px;
list-style:none;
border-left: 1px solid #ddd;
display:flex;
flex-flow:row nowrap;
justify-content:space-around;
}
.content ul.venus-menu li {
display:flex;
justify-content:space-around;
align-items:center;
flex-flow:row wrap;
}
.content ul.venus-menu li a {
display:block;
padding:10px 15px;
font-size:15px;
text-decoration:none;
color:#505050;
}
.content ul.venus-menu li a:hover {
background:#eee;
}
<div class="content">
<a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#"><i class="fa fa-bars"></i> </a>
<ul class="venus-menu" id="top_bar">
<li>首页</li>
<li>title1</li>
<li>title2</li>
<li>title3</li>
<li>title4</li>
<li>title5</li>
<li>title6</li>
<li>title7</li>
<li>title8</li>
<li>title9</li>
<li>title10</li>
</ul>
</div>
I have a list with images in. The list is a centered column in foundation.
Fiddle
I need it so that the list elements images are all aligned in the same 'row' rather than going down the page.
How can I do this? I've tried:
li{
display: inline;
}
But no luck.
Add display: inline-flex to your ul
ul {
list-style: none;
display: inline-flex;
}
img {
border: 1px solid black;
}
<div class="row">
<ul class="small-4 medium-6 small-centered columns">
<li>
<img src="http://api.ning.com/files/yallYWJbJ*ZVuc1yUMGYuXL4artVmJUl*Uuzcv2prT67gOy0nNVLPjrRE1GYTasJCNYmjgeSTgORbhuGbyRpcsaQbL1nvAPk/GreenSquare" />
</li>
<li>
<img src="http://api.ning.com/files/yallYWJbJ*ZVuc1yUMGYuXL4artVmJUl*Uuzcv2prT67gOy0nNVLPjrRE1GYTasJCNYmjgeSTgORbhuGbyRpcsaQbL1nvAPk/GreenSquare" />
</li>
<li>
<img src="http://api.ning.com/files/yallYWJbJ*ZVuc1yUMGYuXL4artVmJUl*Uuzcv2prT67gOy0nNVLPjrRE1GYTasJCNYmjgeSTgORbhuGbyRpcsaQbL1nvAPk/GreenSquare" />
</li>
</ul>
</div>
You can give the ul and li a fixed size or % based width and use for lists a display:inline-block
#myUL{
list-style: none;
width: 100%;
position: relative;
display:block;
float:none;
padding: 0;
margin: 0;
}
li{
width: 32.5%;
position: relative;
margin: 0px;
line-height: 14px;
display: inline-block;
}
}
img{
border: 1px solid black;
position:relative;
width:100%;
}
Jsfiddle
Firstly - you need to remove "li" css being nested inside ul.
Then, having li width set to some certain size, and adding display: inline-block; to li's css should do the job.
It has greater universal browser support in opposition to inline-flex (if you're about to have a support for IE9 and below):
HTML:
<div class="row">
<ul class="small-4 medium-6 small-centered columns">
<li><img src="http://api.ning.com/files/yallYWJbJ*ZVuc1yUMGYuXL4artVmJUl*Uuzcv2prT67gOy0nNVLPjrRE1GYTasJCNYmjgeSTgORbhuGbyRpcsaQbL1nvAPk/GreenSquare"/></li>
<li><img src="http://api.ning.com/files/yallYWJbJ*ZVuc1yUMGYuXL4artVmJUl*Uuzcv2prT67gOy0nNVLPjrRE1GYTasJCNYmjgeSTgORbhuGbyRpcsaQbL1nvAPk/GreenSquare"/></li>
<li><img src="http://api.ning.com/files/yallYWJbJ*ZVuc1yUMGYuXL4artVmJUl*Uuzcv2prT67gOy0nNVLPjrRE1GYTasJCNYmjgeSTgORbhuGbyRpcsaQbL1nvAPk/GreenSquare"/></li>
</ul>
</div>
CSS:
ul {
list-style: none;
}
li {
display: inline-block;
width:30%;
margin-right: -4px;
}
img {
border: 1px solid black;
}
JSFiddle
I'm building a menu with two sections and a logo between.
And i would like to know how can I prevent the logo from moving whenIi change the text from both sections. I would like to fix the logo, when i change the about us for exemple, i would like to see the about us editing and moving to the left side, not to the right side.
Sorry for my english:
Jsfiddle:
http://jsfiddle.net/uL52rvwn/
HTML:
<div class="menu">
<div class="m-info">
<ul>
<li class="l-aboutus"><a>About us</a></li>
</ul>
</div>
<div id="logo"><img alt="logo" src="http://i.imgur.com/bebZYcu.png" width="80" height="80" /></div>
<div class="m-contact">
<ul>
<li class="l-ourcontacts"><a>Contacts</a></li>
</ul>
</div>
</div>
What I did? I made the m-info float:left, and m-contact float:right, than made the #logo's margins negative to move it to the center.
Fiddle: http://jsfiddle.net/uL52rvwn/3/
<style>
.m-info {
width: 50%;
float: left;
text-align: right;
margin-left: -40px;
padding-right: 40px;
}
.m-contact {
width: 50%;
float: right;
text-align: left;
padding-left: 40px;
margin-right: -40px;
}
#logo {
float: left;
margin-left: -40px;
margin-right: -40px;
}
.menu ul {
padding: 0;
}
.menu li {
display: inline;
padding: 10px;
color: #eaeaea;
text-transform: uppercase;
z-index: 11;
position: relative;
}
.m-info ul li a, .m-contact ul li a {
text-transform: uppercase;
color: #a1a1a1;
letter-spacing: 7px;
font-size: 12px;
}
.m-info ul li a:hover, .m-contact ul li a:hover{
cursor:pointer;
color:#c8c8c8;
}
.m-contact ul{
margin-right:20px;
}
</style>
<div class="menu">
<div class="m-info">
<ul>
<li class="l-aboutus"><a>About us</a></li>
</ul>
</div>
<div id="logo"><img alt="logo" src="http://i.imgur.com/bebZYcu.png" width="80" height="80" /></div>
<div class="m-contact">
<ul>
<li class="l-ourcontacts"><a>Contacts</a></li>
</ul>
</div>
</div>
Absolute positioning should work: http://jsfiddle.net/6L35a0up/7/
I changed the following CSS rule:
#logo img {
left:50%;
z-index: 12;
position: absolute;
}
And moved the logo div to outside of the .menu wrapper.
This question already has answers here:
How to remove indentation from an unordered list item?
(10 answers)
Closed 7 years ago.
For some reason in my footer there's a space to the left of my ul so it isn't lined up with the content above it (membership text etc) If I were to put text outside this ul (but still within the footer wrapper) there is no such space.
Here's what it looks like:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Ozanam Club </title>
<link rel="stylesheet" href="css/styles.css" />
<link rel="stylesheet" href="css/normalize.css"/>
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/fonts/enigma.css" />
</head>
<body>
<div id="wrap">
<header>
<div id="logo"><img src="images/logo.png" height="157px" width="237px"></div>
<!--
<div class="social">
<ul>
<li><img src="images/icons/facebook.gif"/></li>
<li><img src="images/icons/twitter.gif"/></li>
<li><img src="images/icons/youtube.gif"/></li>
</ul>
</div>
-->
<div id="navigation">
<ul>
<li>Home</li>
<li>Events</li>
<li>Clubs</li>
<li>Photos</li>
<li>F.A.Q</li>
<li>Contact</li>
</ul>
</div>
</header>
<section class="slider">
<div class="flexslider">
<ul class="slides">
<li>
<img src="images/slider/image1.gif" />
</li>
<li>
<img src="images/slider/image2.gif" />
</li>
<li>
<img src="images/slider/image3.gif" />
</li>
</ul>
</div>
</section>
<div class="main">
<h1>Ozanam Club</h1>
<p>The first Ozanam Club was started in May 1989 by James Lynch, a member of the
St. Vincent De Paul society who himself had two children with learning difficulties
and who was concerned at the general lack of leisure provision for them.</p>
<p>The Ozanam Club is a Special Works Conference of the St. vincent De Paul Society.
The name of the clubs are called after Blessed Frederick Ozanam who is the founder
of the S.S.V.P. At this present time we have two clubs in Viewpark, an adults club
and a seperate club for younger members. We have an adults club in Hamilton and
Paisley and also a club in Carfin for younger members. </p>
<h1>Membership</h1>
<p>Membership is open to anyone who has disablities, regardless of their race or religious belief.</p>
<p>The aim of the clubs are a fun night out for our members and some temporary respite for parents. All of the clubs are run solely by volunteers who are disclosure checked prior to working with
vulnerable adults/children.</p><p> They are also made aware of the Adults/Children Protection Procedures and encouraged to attend an information session.</p>
<p>You can find more information on our a F.A.Q page.</p>
</div>
<div class="side">
<img src="images/events.gif" alt="Events" />
View
</div>
<div class="side">
<img src="images/photos.gif" alt="Events" />
View
</div>
</div>
<footer>
<div id="footer-wrap">
<ul>
<li>Home</li>
<li>Events</li>
<li>Clubs</li>
<li>Photos</li>
<li>F.A.Q</li>
<li>Contact</li>
</ul>
</div>
</footer>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script defer src="js/jquery.flexslider-min.js"></script>
<script>
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide"
});
});
</script>
</body>
</html>
CSS:
body {background: white; background: url('../images/grunge.png'); font-family: 'EnigmaticRegular';}
#wrap {margin: 0 auto; width: 100%; max-width: 1000px;}
header {position: relative;}
#logo {margin: 20px 0 0 0; display: block; float: left;}
.social ul { z-index: 1; list-style: none; position: absolute; top: 0; right: 0;}
.social li { float: left;}
.social img { height: 35px; width: 35px;}
#navigation { width: 100%; max-width: 1000px; height: 200px; position: relative; }
#navigation ul { padding: 0.5em; background: white; border-radius: 5px; border-bottom: solid 3px #3c88bc; display: inline-block; position: absolute; bottom: 0; right: 0;}
#navigation li { padding-left: 0.5em; padding-right: 0.5em; list-style: none; font-style: none; font-family: 'EnigmaticBold'; border-right: solid 1px black;}
#navigation li:last-child { border: 0;}
#navigation ul,
#navigation li {float: left;}
#navigation a { color: #195c8a; text-decoration: none; font-weight: bold;}
#navigation a:hover { color: #13405f;}
.main { float: left; margin-top: 20px; width: 625px;}
.main h1 {font-family: 'EnigmaticBold'; color: #13405f; }
.main p {color: #13405f;}
.main a {color: inherit; }
.side {float: right; margin-top: 20px; border-radius: 10px; margin-bottom: 10%; }
.side a { text-decoration: none; color: #3c88bc;}
.button { font-size: 14px;font-family: 'EnigmaticBold'; display: block; width: 100px; margin: 0 auto; text-align: center; background: #fff; padding: 5px; border-radius: 10px; border-bottom: solid 3px #3c88bc;}
footer { height: 100px; background: #195c8a; clear: both; }
#footer-wrap {margin: 0 auto; padding: 0; width: 100%; max-width: 1000px; }
#footer-wrap li { float: left; list-style: none; padding-right: 3em;}
#footer-wrap a {color: white ;text-decoration: none;}
The <ul> element has browser inherent padding & margin by default. In your case, Use
#footer ul {
margin: 0; /* To remove default bottom margin */
padding: 0; /* To remove default left padding */
}
or a CSS browser reset ( https://cssreset.com/ ) to deal with this.
I don't see any margin or margin-left declarations for #footer-wrap li.
This ought to do the trick:
#footer-wrap ul,
#footer-wrap li {
margin-left: 0;
list-style-type: none;
}
by default <UL/> contains default padding
therefore try adding style to padding:0px in css class or inline css
The situation: I have several lists; in each of these lists, the text inside the first li is positioned slightly to the right of center, instead of exactly in the center like the following li elements. In the following example, the second row text ("Site Map") is not centered. Any ideas?
The html:
<body>
<!-- <div class="header">Module Settings</div> -->
<div class="left_content">
<div id="header_nav" class="moduleTypeContent" style="top:-50px" name="header_nav">
<div class="moduleTypeHeader">
<div class="text-center">header_nav</div>
</div>
<ol class="connectedSortable sortable used nonest">
<li id="list_39">
<div class="listItemContents">
<div class="moduleTypeItem left">
<img src="common/images/icons/shadowed/cross-circle.png" alt="Delete Site Map" width="16" height="16" border="0" class="icon rightspace" />
</div>
<div class="moduleTypeItem center text-center">
Site Map
</div>
<div class="moduleTypeItem right text-center">
all
</div>
</div>
</li>
<li id="list_38">
<div class="listItemContents">
<div class="moduleTypeItem left">
<img src="common/images/icons/shadowed/cross-circle.png" alt="Delete Contact Us" width="16" height="16" border="0" class="icon rightspace" />
</div>
<div class="moduleTypeItem center text-center">
Contact Us
</div>
<div class="moduleTypeItem right text-center">
all
</div>
</div>
</li>
<li id="list_6">
<div class="listItemContents">
<div class="moduleTypeItem left">
<img src="common/images/icons/shadowed/cross-circle.png" alt="Delete Help" width="16" height="16" border="0" class="icon rightspace" />
</div>
<div class="moduleTypeItem center text-center">
Help
</div>
<div class="moduleTypeItem right text-center">
all
</div>
</div>
</li>
</ol>
</div>
</div>
and the relevant css:
html, body {
height:100%
}
body {
margin: 0px;
font-size: 12px;
font-family: Arial;
font-family: Arial, Verdana, Univers;
background-color: #f0eff0;
}
ol {
border: 0 solid #aeaeae;
border-width: 0;
margin: 0;
padding: 0;
padding-left: 30px;
}
ol.sortable, ol.sortable ol {
margin: 0 0 0 25px;
padding: 0;
list-style-type: none;
}
ol.sortable {
margin: 4em 0;
}
.sortable li {
margin: 0 0 0 0;
padding: 0;
}
.sortable li div {
border: 0 solid #aeaeae;
border-width: 1px;
padding: 0px;
margin: 0;
cursor: move;
}
div.moduleTypeDiv {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;
width:100%;
}
div.moduleTypeHeader {
border:1px solid #6d6d6d;
padding: 6px;
}
div.moduleTypeHeader {
background: #336699 url(../images/table_header_highlight.png) repeat-x bottom;
font-weight:bold;
color: #ffffff;
}
div.moduleTypeHeader a {
color: #ffffff;
}
.left_content{
width:48%;
float: left;
}
.moduleTypeContent{
position:relative;
top: -50px;
}
.moduleTypeHeader{
position: relative;
bottom: -48px;
}
.legendItem.left, .moduleTypeItem.left{
float: left;
width: 18px;
padding: 5px;
border:0px ;
border-right: 1px solid #aeaeae;
}
.legendItem.center, .moduleTypeItem.center {
padding:6px;
border:0px ;
}
.legendItem.right, .moduleTypeItem.right {
position: relative;
top: -25px;
float: right;
width: 100px;
padding:6px;
width:50px;
border:0px ;
border-left: 1px solid #aeaeae;
}
.listItemContents {
position:relative;
}
.text-center { text-align:center; }
Thanks!
p.s. I created a fiddle: http://jsfiddle.net/earachefl/c2bcc/
You are doing some really weird positioning on the right "column" elements by floating the right, but not actually leaving them any space for them on the line they belong, so they are pushed down a row and then using relative positioning is "hack" them back where you want them. And thus there is no item in the first line that would push the text left so that it would appear centered.
Simple solution: Use a table. Your code is a prime example of bad "CSS hacking" because of misunderstanding the rule "Don't use tables for layout". Please, use a table. Please.
EDIT:
Since you can't use a table, here's what you have to do:
Move the "right" column to the first position in the list item
Give the center column a right margin wide enough for the right column to fit it. (63px = 50px width + 2 * 6px padding + 1px left-border)
http://jsfiddle.net/Se87U/1/