I am asking this because I saw very similar question to mine here.
having
<div id="grand">
<ul id="parent">
<li class="child">Content</li>
<li class="child">Content</li>
<li class="child">Content</li>
<li class="child">Content</li>
<li class="child">Content</li>
<li class="child">Content</li>
</ul>
</div>
Can one set css width of child relative ( in % unit ) to that of grand, completely ignoring value of parent's width. for example:
#child{ width: 25% of grand's width }
Some explanations added:
Consider this:
parent has 6 childs in it and we want to show just 4 of theme so that they should have 25% of grand's width.
#grand{
width: 900px;
overflow: hidden
}
#parent{
width: 9999px;
}
.child{
width: 900px;
width: 25% of grand's width
}
You could use % as well to size parent ;), so it is much easier to decide how much/many of child can be seen.
#grand {
width: 900px;/*update this to whatever : 100% to any other value/units */
overflow: hidden
}
#parent {
width: 1000%;
}
.child {
float: left;
box-shadow: inset 0 0 0 1px;
width: 2.5%;/* wich is here 25% of grand's width */
}
body {
margin: 0;
}
ul {
padding: 0;
list-style-type: none;
}
<div id="grand">
<ul id="parent">
<li class="child">Content</li>
<li class="child">Content</li>
<li class="child">Content</li>
<li class="child">Content</li>
<li class="child">Content</li>
<li class="child">Content</li>
</ul>
</div>
As a matter of fact, you can BUT it requires that the grandparent have position:relative and the absolutely positioning the grandchild.
I suspect this is an edge case but it is possible.
#grand {
padding: 5%;
width: 80%;
border: 1px solid red;
position: relative;
}
#parent {
height: 150px;
width: 60%;
background: red;
margin: auto;
}
#child {
height: 100px;
position: absolute;
width: 80%;
left: 50%;
transform: translateX(-50%);
background: blue;
color: white;
}
<div id="grand">Grand
<div id="parent">Parent
<div id="child">Child</div>
</div>
</div>
You could use em units. This doesn't require JavaScript or having to absolutely position.
Once you want to display some text content, reset the font-size back within a content span/div.
http://jsbin.com/xibocodaba/edit?html,css,output
div
{
height:100%;
}
#grand
{
font-size:300px;
border:1px solid blue;
width:1em;
height:30px;
}
#parent
{
border:1px solid red;
width:.1em;
}
#child
{
border:2px solid gold;
width:.25em;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="grand">
<div id="parent">
<div id="child">
</div>
</div>
</div>
</body>
</html>
Related
I know there are duplicates of similar questions to this but I just can't get my footer to stay at the bottom, and I've tried multiple suggested fixes. Please show me how to move the footer to the bottom of the page. Does it have something to do with the body? Whoever posts a solution could you say what it was that was incorrect?
<head>
<meta charset="utf-8">
<title>CopperMug</title>
<link href="Coppermug Stylesheet.css" rel="stylesheet" type="text/css">
</head>
<div class="navbar" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</div>
<body id="body">
<div>
<img src="../Final Logo Assets/Coppermug banner no background 2-min.png" class="img" id="logo">
</div>
</body>
<footer>
<a class="service-link" href="#">Privacy Policy</a>
<a class="service-link" href="#">Terms of Service</a>
</footer>
</html>
#charset "utf-8";
/* CSS Document */
html {
background-image: url("../Final Logo Assets/Blur Mug-min Opacity-min.jpg");
background-repeat: no-repeat;
background-size: cover;
}
#body {
}
#header,
li .nav-link {
font-family: "Copperplate Gothic";
color: #000000
}
#logo { display: block;
margin-left: 26%;
margin-right: auto;
margin-top: 12%;
width: 50%;}
#navbarSupportedContent {
color: black;
font-family: "Copperplate Gothic";
font-size: .99em;
padding: 1em;
}
#navbarSupportedContent li {
list-style-type: none;
display: inline-block;
}
div #navbarSupportedContent {
width: 100%;
}
.navbar {
text-align: center;
position: relative;
font-size: 150%;
margin-left: 3%;
}
.navbar-nav {
text-align: center;
position: relative;
font-size: 150%;
}
footer .service-link {
color: #000000;
}
footer {
text-align: center;
clear: both;
position: relative;
height: 40px;
margin-top: -40px;
}
What you have currently is a footer element which exists as just another plain element in the page flow (FYI, you have a redundant position:relative on it), so where it ends up is wherever the content above it ends (ie your image).
If you want a footer slammed to the bottom of the viewport that always remains visible regardless of content length or scroll position, then you'd use position: fixed on your footer, as crodev's answer shows. However this takes up screen real estate and is used with intention and good reason (like some action bar during some kind of funneled user experience).
However, for regular page circumstances, when you have short content, and want the footer to appear at the bottom of the viewport, it's best using a flex layout like below (which offers all kinds of advantages as well):
Codepen
body {
height: 100vh;
margin: 0;
}
#container {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
#header {
background-color: red;
min-height: 100px;
}
#content {
flex: 1;
background-color: green;
/* to test a longer page */
/* min-height: 3000px; */
}
#footer {
background-color: blue;
min-height: 100px;
}
.section {
padding: 1em;
display: flex;
justify-content: center;
align-items: center;
}
<div id="container">
<div id="header" class="section">
header
</div>
<div id="content" class="section">
content
</div>
<div id="footer" class="section">
footer
</div>
</div>
HTML:
<div class="footer">
<p>Footer</p>
</div>
CSS:
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: transparent;
color: white;
text-align: center;
}
The picture below shows what I would like to get.
It is a menu within a container, where the menu may wrap to multiple lines when the window/screen gets too narrow for all menu items to fit in. At the same time I would like the menu to have a background which expands to full screen in width, while expanding in height with the menu when it gets wrapped to multiple lines. Currently I think this is not possible with CSS, but I am also just a CSS amateur. My current solution involves #media queries to set the height of the menu background for resolutions where wrapping appears. This does not take into account that font-size could change, thus making each line of menu higher.
Here is a jsFiddle with a basic setup, which does NOT what I want:
https://jsfiddle.net/n3jmyq2f/3/ (Edited, was not the final version)
Here is the code:
<div class="container">
<div class="menu_wrap">
<div class="menu_bg"></div>
<div class="menu">
<ul>
<li>item 1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
</ul>
</div>
</div>
<div class="content">It's me, Mario!</div>
CSS:
.container {
width:50%;
margin: 0 auto;
background:lightgreen;
height:300px;
}
.menu_bg{
position: absolute;
background: #afafaf;
width: 100%;
left:0;
height:30px;
z-index: -1;
}
ul {
height:30px;
background: #afafaf;
}
li {
display:inline-block;
}
The first option is the simplest.
Stop thinking of the .container as something that must contain everything. It's just a class that can be reused as and when required.
If you take the menu div out of the "container" but put a .container div inside you get the effect you are looking for.
JSfiddle Demo
*,
body {
padding: 0;
margin: 0;
}
.container {
width: 50%;
margin: 0 auto;
background: lightgreen;
}
.menu {
background: #afafaf;
}
ul {
border: 1px solid green;
}
li {
display: inline-block;
}
.content {
height: 300px;
}
<div class="menu">
<div class="container">
<ul>
<li>item 1
</li>
<li>item2
</li>
<li>item3
</li>
<li>item4
</li>
<li>item5
</li>
<li>item6
</li>
</ul>
</div>
</div>
<div class="container">
<div class="content">It's me, Mario!</div>
</div>
2nd Option
Use a pseudo-element
*,
body {
margin: 0;
padding: 0;
}
.container {
width: 50%;
margin: 0 auto;
background: lightgreen;
height: 300px;
}
ul {
background: #afafaf;
position: relative;
border: 1px solid green;
}
ul:before {
content: '';
position: absolute;
height: 100%;
background: inherit;
width: 100vw;
left: 50%;
transform: translateX(-50%);
z-index: -1
}
li {
display: inline-block;
}
<div class="container">
<div class="menu">
<ul>
<li>item 1
</li>
<li>item2
</li>
<li>item3
</li>
<li>item4
</li>
<li>item5
</li>
<li>item6
</li>
</ul>
</div>
<div class="content">It's me, Mario!</div>
</div>
JSfiddle Demo
if in .container you change
width:50%;
to
width:100%;
it will do it
fiddle
you could also use the .menu-wrap class (which I've seen in your markup) to do this
<div class="nav">
<ul class="nav">
<a class="nav" href="#">
<li class="nav">item1</li>
</a>
<a class="nav" href="#">
<li class="nav">item2</li>
</a>
<a class="nav" href="#">
<li class="nav">item3</li>
</a>
</ul>
<div class="line"></div>
</div>
This is my HTML navbar
CSS:
ul.nav {
display: inline-block;
font-size: 0;
}
li.nav {
display:inline-block;
border-bottom: 2px solid gray;
padding: 15px 20px;
text-align: center;
font-size: 16px;
}
div.nav {
width: 100%;
display: inline-block;
}
How do I style the div.line so it is exactly next to the list (right), fills the rest of the page (width) and has the same height as the ul.nav/div.nav?
Thanks,
First of all, sorry about the english level!
You can do something like:
.line {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: gray;
}
e.g: http://jsfiddle.net/X8fE4/
That's basically turn the div.line into an absolute alement behind your navigation. It will have the width of the parent div.nav, it's not a beautiful solution, but is well supported :)
this might help you:
preview: http://jsfiddle.net/webcarvers/7uZgW/3/embedded/result/
code: http://jsfiddle.net/webcarvers/7uZgW/3/
JS:
$(document).ready(function(){
$("div.two").css({
//-2 is for border width
"width": ($(window).width() - $("div.nav").outerWidth() - 2) + "px",
"height": ($("div.nav").height()-2) + "px"
});
});
div.nav {
display: flex;
display: ms-flex;
display: -webkit-flex;
{
Edit: You also need to add the property flex-grow to .line.
.line {
flex-grow: 1;
}
http://jsfiddle.net/eWHnU/
tried to find a way to change a main image when hovering over an LI
Looking at Using only CSS, show div on hover over <a> I thought I could make it work, but when I moved the div it of course no longer worked.
Here is how I would do it with JavaScript - can you show me how to do the same with pure CSS on the same html?
<html>
<head>
<script>
var myImages = {li1:"image1.jpg",li2:"image2.jpg",li3:"image3.jpg"};
window.onload=function() {
var lis = document.getElementById('myList').getElementsByTagName('li');
for (var i=0;i<lis.length;i++) {
lis[i].onmouseover=function() {
document.getElementById('image1').src=myImages[this.id];
}
}
}
</script>
</head>
<body>
<img id="image1" />
<ul id="myList">
<li id="li1">show image1</li>
<li id="li2">show image2</li>
<li id="li3">show image3</li>
</ul>
</body>
</html>
As requested in your comment:
http://jsfiddle.net/wjBjZ/
This is a basic example showing the list and the image(s) behaving as you requested. Play with the positioning for fine tuning.
Implementing your comment
http://jsfiddle.net/QgJTN/2/
#main {
position: absolute;
top: 0px;
left: 10px;
border: solid 5px red;
}
#myList{
background: #ccc;
position: absolute;
top:110px;
}
#myList span{
cursor: pointer;
}
#myList img{
display: none;
width: 100px;
height: 100px;
position: absolute;
top: -110px;
left: 10px;
border: solid 5px red;
}
#myList li:hover{
background: #888;
}
#myList li:hover img{
display:block;
}
HTML
<img id="main" src="http://lorempixel.com/100/100/abstract/" />
<ul id="myList">
<li>
<span>List Item One</span>
<img src="http://lorempixel.com/100/100/abstract/" />
</li>
<li>
<span>List Item Two</span>
<img src="http://lorempixel.com/100/100/fashion/" />
</li>
<li><span>List Item Three</span>
<img src="http://lorempixel.com/100/100/city/" />
</li>
</ul>
here's my code:
<div id="banner" style="position:absolute; top:0px; width:100%; background:url('../../images/banner_repeat.jpg'); background-repeat:repeat-x; <!-- border:solid pink 1px; -->">
<ul id="banner_ul">
<li id="wrm"><i>The homepage of White Root Media!</i></li>
<li id="google"><i>+1 us on Google!</i></li>
<li id="facebook"><i>Like us on Facebook!</i></li>
<li id="twitter"><i>Tweet about us on Twitter!</i></li>
</ul>
</div>
<div id="container" style="<!-- border:solid yellow 1px -->; display: table;">
<div id="content" style="padding-top:90px; display:table-cell; min-width:945px; <!-- width:100% - 270px; -->">
This content will determine the height
</div>
<div id="right_column" style="display: table-cell; <!-- border:solid orange 1px; --> height:100%; width:270px; background-image:url('../../images/treetrunk7.png');background-repeat:repeat-y;">tree</div>
</div>
<div id="footer" style="position:relative; top:-1px; background-image:url('../../images/grass.png'); background-repeat:repeat-x; width:100%; height:100px;">grass</div>
here's the live page:
http://whiterootmedia.com/test/test4/
I would like the content div that is display:table-cell to go the full width of the page minus 270px. The tree should be all the way to the right.
Any help is greatly appreciated!
Thanks,
Dusty
You can use absolute positioning in the child div's
#foo {
display: table;
height: 400px;
position: relative;
width: 500px;
}
#foo > div {
display: table-cell;
height: 100%;
position: absolute;
}
#left {
background: blue;
left: 0;
right: 200px;
}
#right {
background: green;
right: 0;
width: 200px;
}
click here for demo
there are other methods of achieving the same effect such as changing the margins, I personally prefer the method above