How can I make the parent DIV wrap around the child DIVs? The problem lies with position:absolute in .nav-content.
http://jsfiddle.net/9H77Y/8/
EDIT: Well, apparently what I want is impossible. The only way to work around this would be javascript which would defeat the purpose of this in the first place. However, setting a fixed height to nav-tabs will work.
HTML
<div class="nav-tabs-wrapper">
<div class="nav-tabs">
<div class="nav-tab">
<input type="radio" id="tab1" name="nav-group" checked>
<label for="tab1">foooooooo</label>
<div class="nav-content">
<div> stuff1 </div>
</div>
</div>
<div class="nav-tab">
<input type="radio" id="tab2" name="nav-group">
<label for="tab2">bar</label>
<div class="nav-content">
<div> stuff2 </div>
</div>
</div>
</div>
</div>
CSS
.nav-tabs-wrapper
{
padding: 10px; /* separates the code from other content */
border: 1px solid #F00; /* visibility aid */
}
.nav-tabs
{
position: relative; /* needed as future positioning reference base */
clear: both;
height: 200px; /* Unfortunate */
padding-left: 10px; /* provides the paragraph-tab effect to the tabs */
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
}
.nav-tab
{
float: left; /* keeps the tabs inline with no gap [inline-block introduces gaps] */
}
.nav-tab label
{
display: block; /* needed so tabs can be positioned correctly to hide nav-content border */
position: relative; /* needed to position tabs correctly */
top: 1px; /* lowers the tabs to cover the border of nav-content; needed so bottom corners aren't slanted, but a 90deg angle */
padding: 4px;
border: 1px solid #999;
border-bottom-width: 0px; /* removes bottom border; needed so bottom corners aren't slanted, but a 90deg angle */
background-color: #CCC;
}
.nav-tab [type=radio]
{
display: none; /* hide the radio selectors */
}
.nav-tab [type=radio]:checked ~ label
{
z-index: 2; /* makes sure that the active tab is drawn above nav-content to cover border */
background-color: #FFF; /* covers the nav-content border */
}
.nav-tab [type=radio]:checked ~ .nav-content
{
visibility: visible !important; /* unhides the nav-content div for the current tab */
}
.nav-tab:nth-child(n+2)
{
margin-left: -1px; /* positions the left border of every second+ tab over the previous tab's right border */
}
.nav-content
{
visibility: hidden; /* hides the content by default */
position: absolute; /* positions the content for all tabs to the absolute left relative to the tabs */
left: 0; /* undo's the padding from the paragraph-tab effect */
width: 100%; /* fills the nav-content DIV completely for a better looking border */
z-index: 1; /* makes sure that the border is drawn under the tabs */
border: 1px solid #999;
}
.nav-content div
{
padding: 10px; /* separate div needed to keep nav-content from overflowing due to padding */
}
You can't account for position:absolute elements.
They are completely removed from the flow of the document.
Quoting the Specs
absolute
The box's position (and possibly size) is specified with the 'top', 'right', 'bottom', and 'left' properties. These properties specify offsets with respect to the box's containing block. Absolutely positioned boxes are taken out of the normal flow. This means they have no impact on the layout of later siblings. Also, though absolutely positioned boxes have margins, they do not collapse with any other margins.
Give a definite height to .nav-tab and give overflow:auto (or overflow:hidden) to .nav-tabs-wrapper
Related
I want to hide my vertical scrollbar, but still be able to scroll both vertically and horizontally.
I have tried using
overflow-y: hidden; overflow-x: scroll;
But it removes the ability to scroll vertically.
I have tried styling the scrollbar with
html .example-container {
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
}
and
html .example-container::-webkit-scrollbar { /* WebKit */
width: 4;
height: 0;
}
It makes both scrollbars hidden, and it is important for the horizontal scrollbar to be visible.
Example of all three methods tried:
https://stackblitz.com/edit/angular-gyq9ub
If you stylize your horizontal scrollbar then your vertical scrollbar somehow disappears and you are still able to scroll vertically as you asked. But it's unclear to me why it works
.example-container::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.example-container::-webkit-scrollbar-thumb:horizontal {
background: #a1a1a1;
border-radius: 3px;
background-clip: padding-box;
}
/* Track */
.example-container::-webkit-scrollbar-track:horizontal {
background-color: #dbdbdb;
border-radius: 3px;
background-clip: padding-box;
}
Create a wrapper div for your inner div and then set inner div overflow = auto. And the outer div overflow to hidden.
For example;
<div class="wrapper-div">
<div class="example-container">
<p class="content">
Start editing to see some magic happen :)
</p>
---
</div>
</div>
CSS:
.example-container {
height: 100px;
overflow: auto;
max-height: 100%;
margin-right: -100px;
padding-right: 100px;
}
.wrapper-div {
overflow: hidden;
}
Thats it! Please check this answer for better understanding.
So I'm attempting to create the above. Is there a smart way of making the menu component? Or does the container element have to cover most of the content component (it has to be a rectangle and in itself use CSS Grid to position the left part and the top part of the menu)?
This doesn't exactly match your single 'L' shape component requirement, but should get you closer than you were before.
A couple notes worth mentioning:
This simply answers your question as a html/css question, not in React style. You could split this up into two components like you were hoping for by using every html/css element other than body-content, then having body-content html/css as the child
Not sure exactly how you want to handle your content, but with this code the App-Header will scroll with your content. If you want it to be fixed and stay above the content copy the MainMenu's css, but style it for vertical scrolling.
Hope this gets you going in the right direction.
body {
margin: 0px;
}
.App-header {
background-color: #203764;
height: 80px;
padding: 10px;
color: white;
}
/* Style page content */
.main-content {
margin-left: 160px; /* Same as the width of the MainMenu */
}
.body-content {
padding: 20px;
}
/* The MainMenu menu */
.MainMenu {
height: 100%; /* Full-height: remove this if you want "auto" height */
width: 160px; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
left: 0;
background-color: #111; /* Black */
overflow-x: hidden; /* Disable horizontal scroll */
color: #FFF;
}
<div class="App">
<div class="MainMenu">Main Menu</div>
<div class="main-content">
<header class="App-header">Header</header>
<div class="body-content">Content</div>
</div>
</div>
I'm having trouble styling text within a div, which is in the shape of a triangle. All done with CSS.
The triangle is currently positioned absolutely as it needs to be for a larger project (I've removed the code from the larger project as it's irrelevant).
Here is a jsFiddle
See the code below:
HTML
<div>Here is a Triangle</div>
CSS
div {
text-align: center;
color: #fff;
font-size: 1.125em;
width: 100%;
}
div:nth-child(1) {
position: absolute;
top: 100px;
left: 100px;
width: 0;
height: 0;
border-left: 126px solid transparent;
border-right: 126px solid transparent;
border-bottom: 126px solid #D30000;
}
since the div has zero width, there will be a line break between each pair of words.
A solution might be to create the shape with one element, and have the text in another one.
You need to realise the triangle is actually a very thick border of a 0x0 element located at the top vertex, and position accordingly.
Here I've positioned the text at the baseline of the triangle and made its width from one vertex of the base to the other. Feel free to play with the text element's size to avoid the text overflowing the triangle. I'm afraid, however, that you can't just let the text flow inside a triangular shape:
HTML:
<div class="triangle"><div class="text">Here is a Triangle</div></div>
CSS:
div { /*your original CSS*/ }
div.triangle { /* your original CSS for div:nth-child(1) */ }
div.text {
position: absolute;
bottom: -126px; /* baseline */
left: -126px; /* left tip */
right: -126px; /* right tip */
width: auto; /* reset width:100% from div */
height: auto; /* just in case */
}
http://jsfiddle.net/honnza/UPeCf/8/
I am attempting to style some html that I do not have control over. WYSIWYG. What I need to do is:
Have the text not wrap under the image.
Control the text's vertical position. I am trying to position it approximately along the horizontal centerline of the image.
Text cannot be fixed width (the image however, can and is fixed width).
I have tried display: table, floating the text element and absolute positioning text, but they all had different problems. Thank you for any further ideas.
http://jsfiddle.net/6fjCX/3/ (you may need to shrink frame width to see effect)
img {
height: 66px;
width: 165px;
border: 1px solid black;
}
#title-text {
font-size: 32px;
line-height: 36px;
}
<h1 id="title-heading" class="pagetitle">
<img class="logo global custom" src="" alt="">
<span id="title-text">
Installing Confluence 3.4 on a Windows 64 bit system
</span>
</h1>
I set a width on both elements as well as the wrapper <h1>, to make sure they would float next to each other and there would be no text underneath the image.
Try something like this: http://jsfiddle.net/6fjCX/5/
img {
height: 66px;
width: 165px;
border: 1px solid black;
background: red;
/* Float the image */
float:left;
}
#title-text {
font-size: 28px;
/* Since the element comes after in the markup */
float:right;
/* (h1 width) - (img width) - (#title-text left padding/margin) */
width:420px;
}
#title-heading {
/* set to a width that works for you */
width:600px;
}
You could also absolutely position the span and set position:relative on the h1, but I try to avoid absolute positioning when possible.
Demo: http://jsfiddle.net/6fjCX/7/
img {
height: 66px;
width: 165px;
border: 1px solid black;
background: red;
float:left;
}
#title-text {
font-size: 28px;
position:absolute;
top:0;
/* (img width) + (span left padding) */
left:175px;
}
#title-heading {
/* contain absolute positioned elements */
position:relative;
}
I'm trying to get h1 to appear on the left and h2 on the right, which I've managed to do thanks to a previous post on stackoverflow. But now there is this white line showing up under the text that is seriously messing with my design. Any thoughts?
<div id="container">
<div id="header">
<h1 style="text-align:left;float:left;">Ken DeRosier</h1>
<h2 style="text-align:right;float:right;">Master Sculptor</h2>
<hr style="clear:both;">
<!-- end #header -->
</div>
...
</div>
This is all the CSS I can think of that could be affecting the code above.
body {
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #FFFFbb;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
background-color: #000000;
background-repeat: no-repeat;
background-position: center top;
background-image: url(../images/sunriseHeader.jpg);
}
.thrColLiqHdr #container {
width: 80%; /* this will create a container 80% of the browser width */
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 0px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
}
.thrColLiqHdr #header {
padding: 0 10px;
padding-top: 170px;
padding-right: 20px;
}
.thrColLiqHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
Try replacing this line
<hr style="clear:both;">
with this
<div style="clear:both;"></div>
I think this is because you use a <hr> aka "horizontal rule". Why don't you try to use a span or a div or something else to clear which is not intended to display itself with something visible?