I have some text links inside a list, then within two divs. I want the hover effects to expand past the list to the outside of the outer div. Is there a way to do it with negative padding? Another way? Possible at all?
Visuals will be easier
How it is now-
Highlight of the padding in the surrounding div-
How I want the a:hover effect to look-
Basically the code looks like this-
.1 { padding: 10px;}
.2 { padding: 5px;}
<div class="1">
<div class="2">
<ul>
<li>
<a>abcde</a>
</li>
<li>
<a>fghij</a>
</li>
</ul>
</div>
</div>
Negative margin/padding are invalid and don't work as expect,
but is possible, you have to take out all his
parents margins and add padding to the links to get
the same effect but with all wide anchors:
/* CSS CODE */
.parent { padding:0px; border:1px solid red }
.child { padding:0px; }
.parent h2 { margin:10px; font-size:22px; }
.child ul li a { display:block; padding:10px 15px; }
.child ul li a:hover { background:green; }
you can see an example in: http://jsfiddle.net/3zANs/
Negative padding is invalid (and simply won't work), negative margin on the other hand is valid and it might be useful in your case.
I believe, also invalid are classes that stars with numbers.
Related
I am currently using this css sheet to stylize my page but no matter what I do I cannot get the footer to line up with the main content of my webpage. It seems to be an centering issue.
Here is my css:
.footnav
{
padding: 20px 40px 20px 40px;
clear:both;
text-align:center;
color:white;
position:relative;
z-index:100;
}
.footnav li a{
text-decoration:none;
display: inline;
font-weight:bold;
}
.footnav li {
list-style-type: none;
}
Here is the code that previous css it is stylizing, I apologize if it is a lot to read.
<div class="footnav" >
<ul class="nav1">
<li class="header">Main</li>
<li><Home</li>
</ul>
<ul class="nav2">
<li class="header">Aventure</li>
<li>News</li>
<li>Map</li>
</ul >
<ul class="nav3">
<li class="header">Survival</li>
<li>Guide</li>
<li>Gear</li>
</ul>
</div>
This is the css for the content area, that I am trying to line my footer with.
.content
{
color:white;
font-size:12px;
font-weight:none;
font-family:sans-serif;
padding:30px;
margin:auto;
margin-top:10px;
width:70%;
position:relative;
z-index:14;
opacity:1;
border-style:solid;
border-width:10px;
border-style:solid;
border-width:5px;
background-color:#000000;
border-color:#FFFFFF;
border-right-color:#999999;
border-left-color:#666666;
border-bottom-color:#333333;
}
I know that it involves trying to take half the width of the body of the webpage, but for my page I used percentages instead of pixels. I am not sure how to handle that. Thanks in advance and once again, I apologize for the lengthy question but the only way to properly assist me, would be to have the full picture. If there is any more material needed just ask.
Wrap the footer content in <center> tags </center>. They automatically align any child content with the center of the page.
try to add display: inline-block; to .footnav ul. The ul blocks would otherwise have 100% width - this way they can be next to each other, and be centerded together. inline-block limits the width, therefore you also should add a width setting to this rule. So it is:
.footnav ul {
display: inline-block;
width: 200px;
}
(The actual width depends on the content of your li elements in those nav lists)
jsfiddle at http://jsfiddle.net/Sapphireblue/781rrymp/39/ & code at bottom
I have four nav elements, each text in LIs side-by-side via float:left, in a UL, in a DIV, in a NAV, in a DIV whose width is a percentage of its parent element(s). (I am using a responsive grid layout and these LIs are populated by a WordPress menu, so there may well be a more efficient way to achieve this with less overhead, but that efficiency is not part of the spec for this project.)
What I want to do is to keep the left edge of the left-most LI at the left edge of all its parents; the right edge of the right-most LI at the right edge of all its parents; and have the other two LIs evenly spaced between the outer two. So kind of like a fully justified line of text.
Turns out, this is hard. Between the percentage-width div, which means that any margin I specify for the LIs is unsuitable as soon as you resize, and the fact that the text items in the LIs are of different widths so, and etc etc, I can't get the last LI flush right in a way that stays there for any resize (not even setting LI last-child margin-right to 0}.
I've played with various units for my LIs and none is right. I tried media queries for small adjustments to font sizes on the LIs as you resize the browser window and that parent div shrinks, which helps, but unless I set a breakpoint every 5 pixels, this isn't workable as a solution. If I work out margins that are ~close~ to what I want and then just set float:right on the last-child LI, it looks dumb if you resize the window down to where that last LI appears on its own line.
Gotta be a way to do this. And sorry if the question has been asked; I did browse but didn't find anything quite a match.
(Note: I'm not worried about widths so small the LIs wrap onto 2 lines, I just don't want there to be a gap of whitespace to the right of the UL, at any width where the UL can be contained on the one line.)
#myDiv {
width:50%;
margin:0;
border:1px solid red;
overflow:auto;
}
#myDiv ul {
padding:0;
margin:0 0 0 0;
height:auto;
}
#myDiv li {
list-style-type: none;
float:left;
background-color:yellow;
margin-right:20px; /* this value is only good for one
specific viewport width: ugggh */
}
#myDiv li:last-child {
margin-right:0px;
}
<div id="myDiv">
<nav>
<div>
<ul>
<li>Item 1</li>
<li>Item Two</li>
<li>#3</li>
<li>Longer Item Four</li>
</ul>
</div>
</nav>
</div>
If I understand correctly, this sounds like it would be difficult to achieve and unreliable, especially given that the nav text can be edited through a CMS.
In this situation I'd be inclined to handle it a little differently, using display: inline-block on the list items.
#myDiv li {
list-style-type: none;
display: inline-block;
background-color:yellow;
margin: 0 2px;
}
http://jsfiddle.net/781rrymp/40/
How about using TABLE instead of UL. The code would be:
<style type="text/css">
#myDiv {
width:50%;
margin:0;
border:1px solid red;
overflow:auto;
}
#myDiv table {
padding:0;
margin:0 0 0 0;
height:auto;
width: 100%;
}
#myDiv td {
width: 25%;
background-color: yellow;
border-right: 20px solid white;
}
#myDiv td:last-child {
border-right: 0px;
}
</style>
<div id="myDiv">
<nav>
<table>
<tr>
<td>Item 1</td>
<td>Item Two</td>
<td>#3</td>
<td>Longer Item Four</td>
</tr>
</table>
</nav>
</div>
I want to have a left-aligned navigation bar across the top of the page, but before (i.e. to the left of) the menu items, I would like a bit of text ("John Doe") that (i) has a substantially larger font size than the menu items but (ii) has the same baseline as the menu items.
From what I understand, the preferred/recommended way to do navigation bars is with floated <li>'s. However, I haven't found a way to use a left floated list and also have the menus align to the same baseline as the text to the left. My current CSS and HTML are:
<html>
<head>
<style>
#navdiv {
overflow:hidden;
border-bottom:solid 1px red;
}
#nav {
list-style:none;
margin:0;
padding:0;
}
#nav li~li {
float:left;
border:solid 1px blue;
width:100px;
}
#name {
float:left;
border:solid 1px blue;
font-size:40px;
width:250px;
}
</style>
</head>
<body>
<div id='navdiv'>
<ul id='nav'>
<li id='name'>John Doe</li>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
</body>
</html>
Is there any way to vertically align all left floated <li>'s to the bottom of the container <div>?
I should say: I can easily achieve the intended effect by using a table instead of a floated list (using vertical-align:bottom on the menu <td>'s), but since floated lists seem to be the recommended standard, I'd like to know if it's possible with them. (Though I really don't understand the animus folks seem to have against using tables for layout.)
Don't need to use float, in fact it's better if you don't, you can just set the display type to a table-cell
#navdiv {
overflow:hidden;
border-bottom:solid 1px red;
}
#nav {
list-style:none;
margin:0;
padding:0;
}
#nav li {
display: table-cell;
vertical-align: bottom;
border:solid 1px blue;
width:100px;
}
#nav li#name {
font-size:40px;
width:250px;
}
also, the extra border style was unnecessary, just change the selectors to #nav li and #nav li#name and you can supersede anything in #nav li with what's in #nav li#name because it has higher priority.
tables are bad mostly because of the way they load, as far as I understand they require the whole table to build before content can load, while using individual elements can load as they please, or something to that affect, i'm sure someone else could explain that part better.
I've a header div and a menu ul below it. I'd like to accomplish 2 things:
1) the ul should have the same width as the div (outer vertical borders exactly same x position
2) I'd like to keep the spacing between li elements roughly equal
With some trial and error on the li's margins and padding I roughly achieved the first point in Google Chrome (please see this jsfiddle) but in Firefox the li's don't fit in the ul so they don't stay on a single line. Also, the last li tends to 'spill over' to a second line when zooming in/out.
I tried it with margin:5px auto and padding:5px auto on the li elements but here auto seems to mean zero.
Is this really difficult/impossible or am I overlooking something obvious?
I also tried width:fit-contents but that didn't help either.
I edited a whole lot in your CSS, check the updated fiddle.
Basicly, this is what I've done:
HTML:
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
CSS:
ul {
width: 960px;
display: table;
table-layout: fixed;
}
ul li {
display: table-cell;
}
ul li a {
display: block;
}
The ul is displayed as a table, with the li's as table-cells, making it as width as the header. Within the li i display the anchors as a block, making them fill the whole li. Hope it suits you.
P.s. make sure you remove the class cf from the ul when you use this.
I think some fellow frustrates may find this useful:
.main-menu ul li ul li{
white-space: nowrap;
}
Like this
ul#mmenu li
{
padding:7px;
}
DEMO
You'll need to adjust the padding in ul#mmenu I changed the padding to padding:7px 23px; and it stays in a single line,but there will be a blank space at the right end of the last menu.
You can give absolute position to li items and position them (first have left:0, second: left:100px or so... last have right:0 and so on). That way they will always be at the same place when you zoom.
For those wanting to avoid CSS table and table-cell, which by the way, I have no probelm with you can use text-align:justify on the UL with a couple of tweaks.
Basic HTML:
<ul id='mmenu'>
<li><a href='#'>Blah Blah Blah Blah</a></li>
<li><a href='#'>Blah Blah</a></li>
<li><a href='#'>Blah Blah Blah Blah</a></li>
<li><a href='#'>Blah Blah</a></li>
</ul>
Note we've lost the clearfix because: a) We're not going to use floats and b)it breaks this solution.
CSS:
ul#mmenu{
width:100%;
margin:15px 0 10px 0;
overflow:hidden;
text-align:justify; /*Added this*/
}
ul#mmenu li{
letter-spacing:.05em;
color:#0a93cd;
/*Now inline blocks instead of blocks floated left*/
display:inline-block;
font:24px arial;
padding:7px 26px;
background:#fff;
border-left:2px solid #0a93cd;
border:2px solid #0a93cd;
border-radius:13px;
text-align:center;
}
/*Now for the hacky part....
...justify does not, by design, justify the last row of text
therfore we need to add an additional, invisible line*/
ul#mmenu:after {
content: "";
width: 100%;
display: inline-block;
}
I have also removed the :first-child style in the Updated Fiddle
I have an unordered list with a background-image set. All list-items have the same height, the background-image is positioned left center.
The text of each item should be centered vertically to the li. This works well with single-line text (by setting the line-height according to the height of the li), but not with two lines of text.
I could add "line-height:normal" to the two-line item, but I want a solution that works for all items.
How can I do this?
Example:
li {
list-style-type:none;
padding-left:40px;
height:36px;
line-height:36px;
background:url('tick.png') no-repeat 0 50%;
}
this is a most crossbrowser solution
li {
width : 200px;
line-height : 100px;
height : 100px;
border : 1px blue solid;
}
li span {
display : -moz-inline-box; /* FF2 or lower */
display : inline-block; /* FF3, Opera, Safari */
line-height : normal;
vertical-align : middle;
}
li span { *display : inline;} /* haslayout for IE6/7 */
<ul>
<li><span>My text</span></li>
<li><span>My longer text</span></li>
<li><span>My text, but this time is really wide</span></li>
<li><span>My text, some thoughts about how much it will expand in this item.</span></li>
</ul>
I used star hack for brevity, you should avoid. Just use html5boilerplate solution, it uses conditional comments on body tag
li {
height:200px;
line-height:200px;
border:1px solid red;
}
li span {
vertical-align:middle;
display:inline-block;
line-height:1.2;
}
<li>
<span>two<br />lines</span>
</li>
It should work.
EDIT : updated to see changes