I'm trying to recreate a website and position the icons in a certain way. Currently I have a black nav bar on the left with icons. I want the black nav bar to extend all the way to bottom of the page and I also want the icons to be separated.
Here is the CSS code:
#left_nav {
border: solid black;
}
#left_nav i {
color: gray;
padding-right: 35%;
padding-left: 35%;
margin-top: 60%;
}
HTML code:
<div id="left_nav" class="grid_2 alpha">
<i class="ss-icon">home</i>
<i class="ss-icon">time</i>
<i class="ss-icon">user</i>
<i class="ss-icon">question</i>
<i class="ss-icon">play</i>
</div>
http://jsfiddle.net/fmpeyton/3L5YV/
A few things:
Inline elements (i.e. <i>) cannot have a margin. You'll have to make the element a block level element via display:block;
In order for the sidebar to reach the whole page, you can set its height to 100%, but only after setting the height of its parent (in this case, the BODY and concurrently HTML elements) to 100% height.
CSS:
html, body{
height: 100%; // height declared so child #left_nav can expand to this height
}
#left_nav {
border: solid black;
height: 100%; // will expand to height of parent
}
#left_nav i {
display:block; // added display:block; to allow for margin
color: gray;
padding-right: 35%;
padding-left: 35%;
margin: 10px 0; // only available to block level elements
}
Related
I am trying to make a list of buttons in an absolute <div>. The buttons should span over the whole <div> container, without exceeding them. They do though I am wondering what I did wrong.
.container {
position: absolute;
background-color: yellow;
}
.btn {
padding: 8px;
margin: 8px;
width: 100%;
display: block;
background-color: blue;
}
<div class="container">
<button class="btn">Text</button>
<button class="btn">Text2</button>
</div>
Since you are using margin in your child element, the container will have the width of child only. But when using margin, it will overflow the element.
One way to workaround is to give a padding on left and right on the container, and a margin top and bottom on the child. Hope it makes sense.
.container {
position: absolute;
background-color: yellow;
padding: 0 8px;
}
.btn {
padding: 8px;
margin: 8px 0;
width: 100%;
display: block;
background-color: blue;
}
<div class="container">
<button class="btn">Text</button>
<button class="btn">Text2</button>
</div>
Regards
Margins that are hardcoded to a value will take precedence over relative sizing. As a result, it will push make space for the element on the DOM irrespective of the properties of its parent container.
A way to achieve what you want is to set the padding (to the same size as your required margin) on the parent container instead as I've done to achieve the border gap you're looking for rather than setting margin on the buttons themselves.
.container {
position: absolute;
background-color: yellow;
padding: 8px;
}
.btn {
padding: 8px;
width: 100%;
display: block;
background-color: blue;
}
<div class="container">
<button class="btn">Text</button>
<button class="btn">Text2</button>
</div>
Hi i just started trying to teach myself HTML/CSS a few days ago. I really dont like asking for answers id rather figure it out myself. But now i need some help so i can find peace and FINALLY move on. Im trying to make a horizontal menu with one drop down button and links in it.
.container {border:1px solid black;
text-align:left;
border-radius:10px;
overflow:hidden;}
.container a {padding:15px;
display:inline-block;
font-size:30px;
text-decoration:none;
background-color:grey;
color:white;}
.aboutcontainer {display:inline-block;}
.about {position:absolute;
display:none;
width:100%;}
.about a {display:block;
text-align:left;
font-size:20px;
padding:15px 5px;}
.aboutcontainer:hover .about {display:block;}
.container a:hover, .aboutcontainer:hover .button {background-color:red;}
.about a:hover {background-color:lightgrey;}
<div class="container">
<a href="#">Home</a
><a href="#">Media</a
><a href="#">Store</a
><div class="aboutcontainer">
<a class="button" href="#">About</a>
<div class="about">
About2
About3
</div>
</div>
</div>
I cant figure out how to make the dropdown menu automatically the same width as the drop down button. I figured that perhaps the drop down menu (.about) which has a width:100% would stretch as far as the div its contained in (.aboutcontainer) which is displayed as inline-block whose width would be determined by the "About" text-link inside of it. But the drop down menu, when displayed, goes the full length of the screen. So it seems to be the case that actual content inside an inline:block element will not define the width of that element. And although the border of an inline:block element wraps around its content automatically, its just an illusion and its actual width is really the full length of the screen, if no fixed widths have been defined in any of the parent divs (hope im using the right terminology). So is there a way to do this without any fixed widths assigned? If not then thats ok. Ill finally have my answer and know what im trying to do is impossible and stop wasting time on it.
Yes, an inline-block element will size to fit it's content.
Why isn't it working in your situation? You have .about positioned absolute.
When you position an element absolutely, you are taking it out of the HTML structure, meaning:
Do not leave space for the element. Instead, position it at a specified position relative to its closest positioned ancestor if any, or otherwise relative to the containing block. Absolutely positioned boxes can have margins, and they do not collapse with any other margins.
MDN Docs
This means the element is pulled out of the structure, and no longer influences the surrounding elements, or its parent.
An example of this:
.parent {
background: blue;
}
.child {
background: red;
position: absolute;
top: 20px;
}
Below is the parent element, with a blue background.
<div class="parent">
<div class="child">Bye bye parent</div>
</div>
If you run the snippet above, you don't see the parent or it's blue background at all, because the child element has been positioned out of it, and relative to the viewport.
Now back to your problem. How can we make the absolute positioned element be positioned relative to its parent, instead of the viewport?
The answer is extremely simple: position:relative; on the parent:
This keyword lays out all elements as though the element were not positioned, and then adjust the element's position, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned). The effect of position:relative on table-*-group, table-row, table-column, table-cell, and table-caption elements is undefined.
Relative positioning means that the absolute child elements will be positioned relative to the parent. While absolute will still pull the element out of the HTML structure, and it still won't influence the surrounding elements or its parent, the absolute element will now be influenced by its parent. So, in your case, setting width to 100% will be 100% of .aboutcontainers width, instead of 100% of the viewports width:
.container {
border: 1px solid black;
text-align: left;
border-radius: 10px;
}
.container a {
padding: 15px;
display: inline-block;
font-size: 30px;
text-decoration: none;
background-color: grey;
color: white;
}
.container>a:first-of-type {
border-radius: 10px 0 0 10px;
}
.aboutcontainer {
display: inline-block;
position: relative;
}
.about {
position: absolute;
display: none;
width: 100%;
}
.about a {
display: block;
text-align: left;
font-size: 20px;
padding: 15px 5px;
}
.aboutcontainer:hover .about {
display: block;
}
.container a:hover,
.aboutcontainer:hover .button {
background-color: red;
}
.about a:hover {
background-color: lightgrey;
}
<div class="container">
<a href="#">Home</a
><a href="#">Media</a
><a href="#">Store</a
><div class="aboutcontainer">
<a class="button" href="#">About</a>
<div class="about">
About2
About3
</div>
</div>
</div>
You'll notice in the snippet above, we had to remove overflow:hidden from .container. That is because now that the element is positioned absolutely within its parent element, it gets hidden when it overflows from .container. You had applied overflow:hidden so the end elements wouldn't stick out over the border-radius, so I simply added a border-radius to the first element.
Here, I removed overflow: hidden from .container and added position: relative to .aboutcontainer.
.container {
border: 1px solid black;
text-align: left;
border-radius: 10px;
}
.container a {
padding: 15px;
display: inline-block;
font-size: 30px;
text-decoration: none;
background-color: grey;
color: white;
}
.aboutcontainer {
display: inline-block;
position: relative;
}
.about {
position: absolute;
display: none;
width: 100%;
}
.about a {
display: block;
text-align: left;
font-size: 20px;
padding: 15px 5px;
}
.aboutcontainer:hover .about {
display: block;
}
.container a:hover,
.aboutcontainer:hover .button {
background-color: red;
}
.about a:hover {
background-color: lightgrey;
}
<div class="container">
<a href="#">Home</a
><a href="#">Media</a
><a href="#">Store</a
><div class="aboutcontainer">
<a class="button" href="#">About</a>
<div class="about">
About2
About3
</div>
</div>
</div>
I have split my footer tag into 2 seperate tags, 1 being a disclaimer and the other being contact but the children tags wont inherit the background color i want to set.
<footer role="contentinfo" id="contentinfo">
<div class="disclaimer">
</div>
<div class="contact">
</div>
</footer>
footer {
color: #FFF8BF;
width: 100%;
padding:0 px;
background-color: #1C1C1C;
margin-top: 0px;
margin-bottom: 0px;
bottom: 0;
display: block;
/*border-radius: 0px 0px 10px 10px ;*/
}
.disclaimer {
float: left;
color: white;
max-width: 50%;
}
.contact {
color:white;
float:right;
text-align: left;
padding-right: 20px;
padding-top:0px;
padding-bottom:0px;
margin: 0px;
max-width: 50%;
}
Thanks for any help
Blockquote
Either you set a height of the footer:
CSS
footer {
min-height: 100px;
}
Or you could insert content into the footers' children and set the overflow:auto property for the footer
HTML
<footer role="contentinfo" id="contentinfo">
<div class="disclaimer">
Sample content
</div>
<div class="contact">
Sample content
</div>
</footer>
CSS
footer {
overflow: auto;
}
Here's an example Fiddle.
Background color property cannot be inherited
you can achieve what you want by adding this in your code before closing footer tag
<br style='clear:both'></footer>
Actually, the background color is shown in your child divs, but since you are using float in them, and didn't set a specific height on your footer, the height of your footer is 0 since floating elements don't expand the parent container. At least not for block elements. Unless you set a different display attribute like display: table.
so change your footer class to:
footer {
color: #FFF8BF;
width: 100%;
padding:0 px;
background-color: #1C1C1C;
margin-top: 0px;
margin-bottom: 0px;
bottom: 0;
display: table; // <---- change this to table instead of block
/*border-radius: 0px 0px 10px 10px ;*/
}
You do not have a height at the moment, as the content and disclaimer are empty
if you add overflow:auto; with footer it will work. Try giving a width and height. Also for testing you can always add a border: 1px solid red; or something
EDIT: For now instead of max-width use width or min-width as with max-width the max width will be 50% yes BUT it can be 0% as it is in this case
Using twitter-bootstrap-2.0.4
...some topbar code here....
div.container-fluid
div.content
div.row-fluid
div.span2
div.menuLeft
a(class='menuLeftItem', href="http://localhost:3000") Explore
br/
a(class='menuLeftItem', href="http://localhost:3000") My Playlists
br/
a(class='menuLeftItem', href="http://localhost:3000") Challenge
br/
a(class='menuLeftItem', href="http://localhost:3000") Socialize
br/
My CSS:
* { margin: 0; padding:0; }
html, body {
background-color: red;
height: 100%;
width: 100%;
overflow: hidden;
}
body {
padding-top: 58px; /* 40px to make the container go all the way to the bottom of the topbar */
padding-left: 0px;
padding-right: 0px;
}
.container-fluid {
background-color: black;
}
.content {
background-color: blue;
}
.span2 {
background-color: green;
}
.menuLeftItem {
color:white;
/*font*/
font-size:13px;
font-weight:bold;
line-height:1;
border: 1px solid white;
}
My menuLeftItems are not aligned properly. Specifically the borders of those elements are overlapping. Please tell me how to properly align the elements. Also I want to each menuLeftItem to take the same width as its containing element span2. I tried width = 100% for .menuLeftItem. But it does not take effect.
My goal is to create a fixed page layout for different screen sizes. Hence I am trying to used fluid layouts.
Any help is appreciated
Ok Fixed it. I needed to add display: inline-block to the class menuLeftItem. I found this as reference on another stack thread
HTML/CSS - Extend element width to visible area (beyond width of containing element)
I am having issues with the below HTML when resizing the window;
1: Right bar suddenly drops down when the width is resized too small.
2: Spacing between the content and right bar gets larger as the width gets larger.
<style type="text/css">
#content {
width: 80%;
float: left;
height: 500px;
border:2px solid #00ff00;
}
#rightbar {
max-width: 200px;
width: 17%;
float: right;
border:2px solid #ff0000;
}
#rightbar a {
display: block;
padding: 5px;
background-color: #F0F4FF;
margin: 3px;
}
#rightbar a:hover { background-color: #1D3E93; color: #fff; }
</style>
<div id="content">contents</div>
<div id="rightbar">
link 1
link 2
link 3
</div>
There are two ways to get the result you want:
put the right bar before the content
in the html, remove the width from
the content and give it a right
margin instead (width of the right
bar + something extra)
position the right bar absolutely on the right, remove the width from
the content and give it a right
margin instead (see number 1.)
By the way, the problem is that you are mixing absolute and relative widths and what you see is exactly what you are supposed to see.
Edit: After re-reading your question, I think that with overflow:hidden (makes it a nice square block) on the content part, you can get it to work in combination with 1. without the margin:
<style type="text/css">
#content {
overflow: hidden;
height: 500px;
border:2px solid #00ff00;
}
#rightbar {
max-width: 200px;
width: 17%;
float: right;
border:2px solid #ff0000;
}
#rightbar a {
display: block;
padding: 5px;
background-color: #F0F4FF;
margin: 3px;
}
#rightbar a:hover { background-color: #1D3E93; color: #fff; }
</style>
<div id="rightbar">
link 1
link 2
link 3
</div>
<!-- content needs to be placed after rightbar -->
<div id="content">contents</div>
Once you resize too small, the percentages width will be smaller than the text content within your element. The browser cannot concatenate words, so the element is forced to have a min-width. Try putting the elements in a wrapper with an assigned min-width.
Between these two bars you have a space of 3%. 3% of 1000px is 30px. 3% of 2000px is 60px. Therefore if you right element is floating right, it makes sense you'll see that additional space. Try floating the element left.