I have folowing code:
html:
<div class="container">
<div class="content">
<ul>
<li class="item">a</li>
<li class="item">bb</li>
<li class="item">ccc</li>
<li class="item">dddd</li>
<li class="item">eeeee</li>
</ul>
</div>
</div>
css:
.container{
width: 200px;
background-color: red;
overflow: hidden;
}
.content ul{
padding: 0px;
margin: 0px;
}
.item{
padding: 1px 10px 1px 10px;
background-color: green;
border: 1px black solid;
margin: 1px;
display: inline-block;
}
http://jsfiddle.net/VSfHS/183/
And i need to display items in one row with scrollable overflow.
Number of items is dynamic, so I can't preset width of content.
Here you go.
http://jsfiddle.net/VSfHS/184/
The solution is white-space: nowrap
Related
I need help with position.
This is setup code
<div style="background-color: gray; width: 100%; height: 100vh; display: flex; justify-content: center; ">
<div style="display: flex; flex-direction: column; background-color: rgb(248, 83, 83); width: 300px; position: sticky; bottom:0; ">
<div style="width: 100%; border: 1px solid black; ">Something</div>
And this is code where is problem
<ul >
<div *ngFor="let x of elementList" >
<li style="border: 1px solid black; position: relative; height: 500px; overflow-y: scroll;"> <span>{{x.Title}}</span>
<ul>
<div style="background: pink; position: absolute; right: -50px; top: 0;">
<li >{{x.Subtitle}}</li>
<li >{{x.Subtitle}}</li>
<li >{{x.Subtitle}}</li>
<li >{{x.Subtitle}}</li>
</div>
</ul>
</li>
</div>
</ul>
</div>
<div style="border: 1px solid black; width: 100%; display: flex; gap: 10px; padding: 5px;">
<span class="material-icons-outlined">
arrow_back
</span> <span>Hide navigation</span>
</div>
</div>
<div style="background-color: rgb(152, 247, 152); width: 100%; height: 100%;"></div>
</div>
I working on this for past 5h so can you help me?
This is full code
enter image description here
What I want is set list outside of contaner next to scroll
HTML;
<div id="container">
<div id="middle">
<div id="inner">Something</div>
</div>
<div>
<ul>
<li>List item one</li>
<li>List item two</li>
</ul>
</div>
</div>
To force a container to have a scrollbar, the inner content needs to have a width greater than it's container. Therefore I set the inner div's width to 120% and then put overflow: scroll on the middle div.
Styling;
body {
margin: 0;
}
#container {
background-color: gray;
width: 100%;
height: 100vh;
display: flex;
}
#middle {
display: flex;
flex-direction: column;
background-color: rgb(248, 83, 83);
width: 300px;
position: sticky;
bottom:0;
overflow: scroll;
}
#inner {
width: 120%;
border: 1px solid black;
}
Demo
I have a container with some tabs:
<div class="tabbed-container">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="active nav-link">Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link">A longer tab name</a>
</li>
<li class="nav-item">
<a class="nav-link">Last tab</a>
</li>
</ul>
<div class="tab-content">
<p>
Hey look, some content!
</p>
<p>
More content!
</p>
</div>
</div>
.
body {
background-color: white
}
*, *::after, *::before {
box-sizing: border-box;
}
.tabbed-container {
display: flex;
flex-direction: column;
margin: 2em;
background-color: white;
}
.nav {
display: flex;
padding-left: 0;
margin-bottom: 0;
list-style: none;
justify-content: space-between;
}
.nav-tabs .nav-item {
margin: 0 3px -1px 3px;
flex: 1 1 auto
}
.nav-tabs > .nav-item:first-child {
margin-left: 0px;
}
.nav-tabs > .nav-item:last-child {
margin-right: 0px;
}
.nav-tabs .nav-item a {
border-radius: 10px 10px 0 0;
padding: 1em;
border: 0px;
border-bottom: 1px solid transparent;
background-color: #e4e4e4;
text-align: center;
}
.nav-tabs .nav-item a.active,
.nav-tabs .nav-item a:active {
background-color: white;
border: 1px solid #e4e4e4;
border-bottom: 1px solid white;
}
.nav-link {
display: block;
}
.tab-content {
padding: 1em;
width: 100%;
border: 1px solid #e4e4e4
}
fiddle: https://jsfiddle.net/pqmefsbr/34/
I would like for there not to be any border between the content and the active tab. To this end, I've changed the margin on .nav-tabs .nav-item from margin: 0 3px to margin: 0 3px -1 3px, and added border-bottom: 1px solid white to the active tab. This doesn't seem to have accomplished anything, though.
After playing around with the border color and thickness to see what is actually going on, it looks like the border of the content div is always being rendered on top of the tab's border, so my white border-bottom is accomplishing nothing. What can I do to get the tab's border to render on top instead? Is there possibly some other way to accomplish what I'm trying to do?
Stacking without the z-index property | MDN
When the z-index property is not specified on any element, elements
are stacked in the following order (from bottom to top):
The background and borders of the root element Descendant
non-positioned blocks, in order of appearance in the HTML Descendant
positioned elements, in order of appearance in the HTML
Short answer is:
.nav-tabs {
position: relative;
...
}
Related examples:
.a {
height: 20px;
background: pink;
margin-bottom: -10px;
}
.b {
height: 40px;
border: 10px solid gray;
}
.relative {
position: relative;
}
.z-index {
z-index: 1;
}
<h3>Example 1: all default</h3>
<div class="a"></div>
<div class="b"></div>
<h3>Example 2: 1st position: relative</h3>
<div class="a relative"></div>
<div class="b"></div>
<h3>Example 3: both position: relative</h3>
<div class="a relative"></div>
<div class="b relative"></div>
<h3>Example 4: both position: relative + 1st z-index: 1</h3>
<div class="a relative z-index"></div>
<div class="b relative"></div>
UI told me to make a list, the list item height is not fixed, it depends on the images uploaded by user, and the user may upload a 10x1000 image or 1000x10 image, whatsoever, the image width is fixed to 100px, but height is auto. At right side of the image, there are some text written by user, which is not a one line text, it is multiline text which we don't know how many lines there will be.
html like below:
<ul>
<li class="container">
<img src="https://www.google.com.hk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
<div class="aaa">
aaa<br>bbb<br>ccc
</div>
</li>
<li class="container">
<img src="https://gss0.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/9358d109b3de9c822f4d68126981800a19d84307.jpg">
<div class="aaa">
ddd<br>eee<br>ffff
</div>
</li>
</ul>
css as below:
.container {
border: 1px solid green;
padding: 1px;
position:relative;
}
.container img {
width: 300px;
vertical-align: middle;
}
.aaa {
display: inline-block;
font-size: 16px;
border: 1px solid red;
box-sizing: border-box;
}
.bbb {
border: 1px solid blue;
}
But the result is as below:
How can I make the text box vertical align middle to the image at left side?
All code is at Codepen, you can try it there.
Thank you!
Declare vertical-align: middle on the sibling element (.aaa) as well.
To display x2 sibling inline block-level elements vertically center to each other, both elements should have the property vertical-align: middle.
Code Snippet Demonstration:
.container {
border: 1px solid green;
padding: 1px;
position:relative;
}
.container img {
width: 300px;
vertical-align: middle;
}
.aaa {
display: inline-block;
font-size: 16px;
border: 1px solid red;
box-sizing: border-box;
vertical-align: middle; /* additional */
}
.bbb {
border: 1px solid blue;
}
<ul>
<li class="container">
<img src="https://www.google.com.hk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
<div class="aaa">
aaa<br>bbb<br>ccc
</div>
</li>
<li class="container">
<img src="https://gss0.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/9358d109b3de9c822f4d68126981800a19d84307.jpg">
<div class="aaa">
ddd<br>eee<br>ffff
</div>
</li>
</ul>
You can use the power of flex.
Use align-items: center to do the trick.
Check it out: https://codepen.io/anon/pen/dJmrvB
Solution1: Just apply vertical-align: middle; to .aaa class
.container {
border: 1px solid green;
padding: 1px;
position: relative;
}
.container img {
width: 300px;
vertical-align: middle;
}
.aaa {
display: inline-block;
font-size: 16px;
border: 1px solid red;
box-sizing: border-box;
vertical-align: middle;
}
.bbb {
border: 1px solid blue;
}
<ul>
<li class="container">
<img src="https://www.google.com.hk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
<div class="aaa">
aaa<br>bbb<br>ccc
</div>
</li>
<li class="container">
<img src="https://gss0.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/9358d109b3de9c822f4d68126981800a19d84307.jpg">
<div class="aaa">
ddd<br>eee<br>ffff
</div>
</li>
</ul>
Solution2: Try to make use of flex CSS
.container {
border: 1px solid green;
padding: 1px;
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.container img {
width: 300px;
}
.aaa {
font-size: 16px;
border: 1px solid red;
box-sizing: border-box;
}
.bbb {
border: 1px solid blue;
}
<ul>
<li class="container">
<img src="https://www.google.com.hk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
<div class="aaa">
aaa<br>bbb<br>ccc
</div>
</li>
<li class="container">
<img src="https://gss0.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/9358d109b3de9c822f4d68126981800a19d84307.jpg">
<div class="aaa">
ddd<br>eee<br>ffff
</div>
</li>
</ul>
I'm trying to make my menu / navigationbar to center horizontally. I can't quite figure out what I've done wrong / forgotten. Also after my last li is right padding. How do I remove it?
HTML
<div class="wrapper">
<div class="header"></div>
<div class="Header"></div>
<ul class="menu">
<li>Home</li>
<li>Over mij</li>
<li>Mijn diensten</li>
<li>Contact</li>
</ul>
</div>
CSS
.wrapper {
width: 100%;
}
.menudiv {
width: 80%;
border: 1px red solid;
margin: auto;
}
.menu {
text-align: center;
border: 1px red solid;
position: relative;
display:inline-block;
transform: translateX(-50%);
left: 50%;
color: black;
padding-left: 20%;
padding-right: 18%;
min-width: 80%;
max-width: 80%;
}
.menu li {
float: left;
display: block;
padding-right: 5%;
}
.menu li:after {
content: '/';
padding-left: 20px;
}
https://jsfiddle.net/sdzLn5hd/
Well, first of all, are you sure this is how your HTML code should be?
<div class="Header">
</div>
<ul class="menu">
<li>Home </li>
<li>Over mij </li>
<li>Mijn diensten </li>
<li>Contact </li>
</ul>
instead of :
<div class="Header">
<ul class="menu">
<li>Home </li>
<li>Over mij </li>
<li>Mijn diensten </li>
<li>Contact </li>
</ul>
</div>
I'd suggest you to check this first.
Secondly, your menu is centered (the menu-items are not. Maybe that's what you meant). Just taking a look at your CSS and adding background-color to it makes it all clear.
.wrapper {
width: 100%;
}
.menudiv {
width: 80%;
border: 1px red solid;
margin: auto;
}
.menu {
border: 1px red solid;
padding: 55px 0;
position: relative;
display:inline-block;
transform: translateX(-50%);
left: 50%;
color: black;
width: 80%;
}
.menu li {
float: left;
display: block;
padding-right: 5%;
}
.menu li:after {
content:'/';
padding-left: 20px;
}
div.wrapper {
background-color: orange;
}
<title>Webdesign Maarten</title>
<body>
<div class="wrapper">
<div class="header">
<!-- hier image te zetten JQuery prefereerbaar Sliding !-->
</div>
<div class="Header">
<!-- menu float left indent met icoon gecentreerd opzicht v wrap. no list style -->
</div>
<ul class="menu">
<li>Home</li>
<li>Over mij</li>
<li>Mijn diensten</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
Now, onto the solutions, I am not sure what exactly you are looking for, but I can suggest you two possible solutions.
Solution 1:
Modify the .menu li class as below :
.menu li {
display: block;
text-align: center;
}
See this below :
.wrapper {
width: 100%;
}
.menudiv {
width: 80%;
border: 1px red solid;
margin: auto;
}
.menu {
border: 1px red solid;
padding: 55px 0;
position: relative;
display:inline-block;
transform: translateX(-50%);
left: 50%;
color: black;
width: 80%;
}
.menu li {
display: block;
text-align: center;
}
.menu li:after {
content:'/';
padding-left: 20px;
}
<title>Webdesign Maarten</title>
<body>
<div class="wrapper">
<div class="header">
<!-- hier image te zetten JQuery prefereerbaar Sliding !-->
</div>
<div class="Header">
<!-- menu float left indent met icoon gecentreerd opzicht v wrap. no list style -->
<ul class="menu">
<li>Home</li>
<li>Over mij</li>
<li>Mijn diensten</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
</html>
Solution 2:
Modify the .menu and .menu li class as below :
.menu {
border: 1px red solid;
padding: 55px 0;
position: relative;
display:inline-block;
transform: translateX(-50%);
left: 50%;
color: black;
width: 80%;
text-align: center; /*Add this property*/
}
.menu li {
display: block;
text-align: center;
}
See this below :
.wrapper {
width: 100%;
}
.menudiv {
width: 80%;
border: 1px red solid;
margin: auto;
}
.menu {
border: 1px red solid;
padding: 55px 0;
position: relative;
display:inline-block;
transform: translateX(-50%);
left: 50%;
color: black;
width: 80%;
text-align: center;
}
.menu li {
display: inline-block;
text-align: center;
}
.menu li:after {
content:'/';
padding-left: 20px;
}
<title>Webdesign Maarten</title>
<body>
<div class="wrapper">
<div class="header">
<!-- hier image te zetten JQuery prefereerbaar Sliding !-->
</div>
<div class="Header">
<!-- menu float left indent met icoon gecentreerd opzicht v wrap. no list style -->
<ul class="menu">
<li>Home</li>
<li>Over mij</li>
<li>Mijn diensten</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
</html>
To remove padding from the last li item, you need to target it:
.menu li:last-child {
padding-right: 0;
}
Looking at your code, I can't really figure out what is that you need. Html is all messed up. Why do you close header div before menu?
Change the li to display inline-block, target the last of the li's with :last-child:
.menu {
text-align:center;
border: 1px red solid;
padding: 55px 0;
position: relative;
display:inline-block;
transform: translateX(-50%);
left: 50%;
color: black;
width: 80%;
}
.menu li {
display:inline-block;
padding-right: 5%;
}
.menu li:last-child {
padding-right: none;
}
JSFiddle Demo
Here is the best I could do. I added flexbox style to the ul, and removed some padding to get it centered.
fiddle: https://jsfiddle.net/sdzLn5hd/7/
HTML
<title>Webdesign Maarten</title>
<body>
<div class="wrapper">
<div class="header">
<!-- hier image te zetten JQuery prefereerbaar Sliding !-->
</div>
<div class="Header">
<!-- menu float left indent met icoon gecentreerd opzicht v wrap. no list style -->
</div>
<ul class="menu">
<li>Home</li>
<li>Over mij</li>
<li>Mijn diensten</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
CSS
.wrapper {
width: 100%;
}
.menudiv {
width: 80%;
border: 1px red solid;
margin: auto;
}
.menu {
border: 1px red solid;
padding: 55px 0;
position: relative;
display:flex;
transform: translateX(-50%);
left: 50%;
color: black;
width: 80%;
}
.menu li {
margin:auto;
display: block;
}
.menu li:after {
content:'/';
padding-left: 20px;
}
https://jsfiddle.net/sdzLn5hd/9/ something like this perhaps is what you're looking for
<title>Webdesign Maarten</title>
<body>
<div class="wrapper">
<div class="header">
<!-- hier image te zetten JQuery prefereerbaar Sliding !-->
<ul class="menu">
<li>Home</li>
<li>Over mij</li>
<li>Mijn diensten</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
removing some unneeded tags in your html
put in your .menu
.menu { text-align:center; }
.menu li {
display: inline-block;
padding-right: 5%;
}
Your float:left will always send the elements to their furthest left possible.
and add this line in your css (remove the last '/' and padding)
.menu li:last-child:after {
content: '';
padding-left: 0px;
}
see here: https://jsfiddle.net/sdzLn5hd/5/
To center text and inline elements, a block parent should have text-align: center applied.
Since you have this tagged as HTML5, I would like to provide you with a more semantic approach to your HTML too. There were a lot of extra styling properties left over from you trying to get this to work, so I re-wrote your CSS thus far (including a few more changes that I try to explain in comments). You can see my code in the snippet below:
* { margin: 0px; padding: 0px; } /* Simple CSS reset */
header { display: block; text-align: center; }
h1,
nav > ul {
display: inline-block;
border: 1px red solid;
padding: 20px 0px;
width: 80%;
}
nav > ul { border-top: none; }
nav > ul > li { display: inline; }
nav > ul > li:after { content: "/" }
nav > ul > li:last-child:after { content: "" } /* Remove trailing separator */
nav > ul > li > a {
padding: 15px; /* Padding here is important for touch */
color: black;
text-decoration: none;
}
nav > ul > li > a:hover { text-decoration: underline; }
<header>
<h1>Title</h1>
<nav>
<ul>
<li>Home</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
I have a menu and a logo on the header, and I am struggling to make the logo to be at the far edge of the left side of the website and the menu to the edge of the right side.
The problem is, when both of them are displayed as inline-block which means they are going to float to the default orientation which is left, I can't figure out a way to change this, please help.
Here's the CSS code:
/*Header*/
.wrapperHeader{
background-color: #FFFFFF;
border-bottom: 1px solid #DDDDDD;
width: 100%;
padding: 15px 0px;
z-index: 1000;
}
.content{
width: 1000px;
max-width: 100%;
margin: auto;
}
.header-logo, #logoImage{
width: 250px;
max-width: 100%;
display: inline-block;
vertical-align: middle;
}
/*Main Menu*/
.header-menu{
width: 690px;
max-width: 100%;
display: inline-block;
vertical-align: middle;
}
#MainMenu li{
position: relative;
padding: 15px;
display: inline-block;
right: 0px;
}
Note: in the html, the logo is in a section and the menu is in anther section and both of them are inside a divide.
HTML code:
<header>
<div class="wrapperHeader">
<div class="content">
<section class="header-logo">
<img id="logoImage" src="assets/elements/logo.png" alt="LOAI Design Studio Logo"/>
</section>
<section class="header-menu">
<nav id="MainMenu">
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li id="PortfolioMenu"><a id="Portfolio" href="#">Portfolio</a>
<ul class="subMenu">
<li>Web Design</li>
<li>Visual Identity</li>
<li>Photography</li>
</ul>
</li>
<li>Testimonials</li>
<li>About Me</li>
<li>Get In Touch</li>
<li><a class="getStartedButton" href="get-started.html">Get Started</a></li>
</ul>
Menu<p id="SmartMenu-logo">LOAI Design Studio</p>
</nav>
</section>
</div>
</div>
</header>
Here I've edited your CSS code, so you can try this
/*Header*/
.wrapperHeader{
background-color: #FFFFFF;
border-bottom: 1px solid #DDDDDD;
padding: 15px 0px;
z-index: 1000;
overflow: hidden;
}
.content{
width: 1000px;
margin: auto;
}
.header-logo, #logoImage{
width: 250px;
float: left;
}
/*Main Menu*/
.header-menu{
width: 690px;
float: right;
}
#MainMenu ul{
margin: 0;
padding: 0;
list-style: none;
}
#MainMenu li{
position: relative;
padding: 5px 15px;
float: left;
list-style: none;
}
li#PortfolioMenu{
padding: 0;
}
li#PortfolioMenu > a{
padding: 5px 15px;
}
ul.subMenu{
display: none;
position: absolute;
}
li:hover ul.subMenu{
display: block;
}
I've used float:left; for the logo, float:right; for the header-menu, removed display:inline-block; and did some other fixes ...
Hope this will help you ...
I would float logo section left, float menu section right and then clear the wrapper using clear:both. Remove the inline-block for this to work properly.