I currently have this menu:
(source: gyazo.com)
I am using Twitter Bootstrap 3, the .container class. What I am trying to do is, making the elements width scale automatically according to the amount of the elements in the ul + the width of the container.
I have attempted to do this, but this doesn't work:
#media (min-width: 428px) and (max-width: 991px) {
.container > #vote > #vote-list {
width: 100%;
background-color: red;
padding: 0;
}
#vote-list li {
width: auto;
float: left;
display: table-cell;
margin-left: 1px;
padding-left: 10px;
padding-right: 10px;
}
}
As you see I am firstly accessing #vote using .container because #vote is child of .container. #vote is basically the dark area you see that the nav is contained in. #vote-list is child of #vote.
#vote {
background-color: #161616;
min-height: 560px;
width: 100%;
}
I have tried changing the child selectors to direct access, but it is giving me the same results.
The html:
<body class="container">
<section id="vote">
<ul id="vote-list">
<li>MyNav</li>
<li>MyNav</li>
<li>MyNav</li>
<li>MyNav</li>
<li>MyNav</li>
</ul>
</section>
</body>
What did I do wrong? Let me know if you need more information
try this:
#vote-list {
width: 100%;
background-color: red;
padding: 0;
display: table; /* add this */
}
#vote-list li {
/* remove float:left; */
display: table-cell;
margin-left: 1px;
padding-left: 10px;
padding-right: 10px;
}
<section id="vote">
<ul id="vote-list">
<li>MyNav</li>
<li>MyNav</li>
<li>MyNav</li>
<li>MyNav</li>
<li>MyNav</li>
</ul>
</section>
Related
This is the first time I'm getting this type of problem. I'm trying to make responsive navigation bar. At a certain width, I want my nav links div to go to right side bar. But the nav links div is not taking full viewport height even after giving 100vh. Here is the code -
HTML
<header>
<nav>
<div class="logo">Logo</div>
<div class="nav-items">
<li><a href = '#'>Link-1</a></li>
<li><a href = '#'>Link-2</a></li>
<li><a href = '#'>Link-3</a></li>
</div>
</nav>
</header>
SCSS
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
header {
background: blue;
nav {
height: 65px;
max-width: 1340px;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
margin: auto;
padding: 1rem;
.logo {
font-size: 2rem;
color: black;
}
.nav-items {
li {
display: inline;
a {
color: black;
text-decoration: none;
margin-left: 2rem;
}
}
}
}
}
#media screen and (max-width: 768px) {
header nav .nav-items {
position: absolute;
right: 0;
height: 100vh;
width: 50%;
border: 1px solid black;
}
}
Link to codepen -
https://codepen.io/yell0wflash/pen/JjWGwJa
Set position to fixed, add top:0; also height:100vh and left or right to 0 in the media query
This is because your has align-items:center; change this based on media query.
#media screen and (max-width: 768px) {
header nav {
align-items:unset;
}
}
The height is 100vh, but you have set align-items:center, so the element is offset to align with the other flex element.
Add
header nav {
align-items: flex-start;
}
To your media query
Now as your nav element has padding you need to accommodate that with
height: calc(100vh - 16px);
I'm trying to recreate the Google homepage as part of theodinproject and I'm having trouble trying to get the navbar across the top to the right.
I tried display: flex and float: right but I'm not sure how to get the Images, Gmail, and Sign In button to the right. I've been told that my style isn't being applied also. Would anyone be willing to help? I'd greatly appreciate it. Below is a snippet of my html and css code and a link to how the page appears.
https://i.stack.imgur.com/pAgDn.png
<ul>
<li><a><button>Sign in</button></a></li>
<li>Images</li>
<li>Gmail</li>
</ul>
</header>
ul {
list-style-type: none;
}
li {
float: right;
}
li a {
display: block;
padding: 10px 10px;
}```
Seems like your only mistake is not having a <style> tag around your css code. Try this.
<style>
ul {
list-style-type: none;
}
li {
float: right;
}
li a {
display: block;
padding: 10px 10px;
}
</style>
Using float is not necessary for that, you can definitely use display: flex. The minimum to understand about flex is that it affects child elements only, so if you want to have a navbar which appears on the right for example, you need to use display: flex on the parent.
.header {
display: flex;
}
<div class='header'>
<div class='navbar'></div>
<div class='logo'></div>
</div>
You can also use justify-content to choose how they align among the main axis (by default the horizontal one)
For something like this I'd add justify-content: space-around or justify-content: space-between.
I'd highly recommend reading more about Flex, as it's super useful.
Good resource:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You need to wrap the css styling inside a as in the example below:
<style>
ul {
list-style-type: none;
}
li {
float: right;
}
li a {
display: block;
padding: 10px 10px;
}
</style>
and also you need to remove the characters at the end ( ``` )
Try using:
header {
width: fit-content;
margin-left: auto;
}
For example, I did the top part using this idea. This is how it looks.
html {
font-family: sans-serif;
color: #333;
}
header {
width: fit-content;
margin-left: auto;
}
li,
ul,
buttom {
display: inline-block;
padding: 0 1ch;
}
li {
font-size: 0.85em;
color: #555;
}
img {
display: block;
margin: 0 auto;
width: 20em;
padding-bottom: 1.5em;
}
main {
padding: 20vh 0;
width: fit-content;
margin: 0 auto;
}
input {
margin: 0 auto;
display: block;
border: 1px solid silver;
border-radius: 2.8em;
height: 2.8em;
width: 40em;
}
<header>
<ul>
<li>Gmail</li>
<li>Images</li>
</ul>
<button>Sign in</button>
</header>
<main>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
<input type="search">
</main>
I hope it works!
I have the following elements. The image is fixed at 325X70px and is placed at the top left corner. I want the list items, evenly spaced, to fill the remainder of the width and be responsive to browser resize. I'm sure this is easy, but I can't seem to get it to work.
<div class="wrapper">
<div class="left">
<div class="image">Image Here</div>
</div>
<div class="menu">
<ul>
<li>X</li>
<li>Y</li>
<li>Z</li>
<li>A</li>
</ul>
</div>
</div>`
CSS
* {
padding: 0px;
margin: 0px;
}
.wrapper {
position: relative;
}
.left {
float: left;
}
.image {
min-width: 325px;
max-width: 325px;
height: 70px;
background-color: red;
}
.menu {
width: 100%;
height: 70px;
background-color: black;
}
.menu ul {
position: absolute;
width: 100%;
height: 70px;
display: table;
}
.menu li {
color: #FFF;
width: 25%;
text-align: center;
vertical-align: middle;
display: table-cell;
list-style-type: none;
}
You may not need the .left class, you might be able to just do that styling on the image itself, but regardless, what needs to happen here is that .left and .menu need to be side by side. To do that...
.left,
.menu {
display: inline-block;
vertical-align: middle;}
We know the image is always 325px wide, so let's set the parent container to match...
.left {
width:325px;}
And then we want .menu to be the entire width of the screen, minus that image/container, so can we do this...
.menu {
width: calc(100% - 325px);}
You'll still have to turn your li horizontal...
li {
display: inline-block;
vertical-align:middle;}
I'm trying to align a DIV in the middle of the page when the size is less than 768px
I have one parent DIV that contains three different DIVs. So I used media queries and within one display size I added this "clear:both" to the display_type and buttons classes. So in that way each div will be in its own row.
<div class="category_header container">
<div class="products">
<label class="header t_left">Sorter efter:</label>
<div class="select t_left">
</div>
<div class="display_type">
<ul class="clearfix">
<li></li>
<li></li>
</ul>
</div>
<div class="buttons">
<span class="button"></span>
<span class="button"></span>
</div>
</div>
</div>
Then I tried several ways to align them in the center but they didn't work. Here what the CSS looks like:
.container {
width: 1180px;
margin: 0 auto;
padding: 0;
}
.category_header {
margin-top: 30px;
margin-bottom: 30px;
padding: 0 0 0 25px;
}
.products {
float: left;
width: 350px;
margin: 3.5px 0 0;
}
.products label {
margin: 0 30px 0 0;
line-height: 40px;
height: 40px;
display: block;
}
.display_type {
float: left;
width: 350px;
color: #A1ABB6;
margin: 12px 0 0;
}
.category_header .buttons {
float: right;
width: 427px;
}
I tried to add the following to the parent div "category_header" with no luck. I also tried the same to the child divs. I found a lot of solutions on google but noone seems to work. (display: inline-block; text-align: center etc etc)
#media screen and (max-width: Number px) and (min-width: Number px)
{
.category_header {
margin: 0 auto;
width: 50%;
}
}
Can anyone help me with this? Thanks
try this:
#media screen and (max-width: 768px)
{
.display_type, .buttons, .products
{
float:none;
margin:auto;
}
}
The navigation breaks into a second line as soon as I add "margin-right: 4%" in "nav li" - if I use px instead of % the problem won't occur, eg.: "margin-right: 10px" . I am not sure why this is happening
jsfiddle: http://jsfiddle.net/k93K2/
<header>
<div id="container">
<div id="logo">
<img src="http://placehold.it/220x80"/>
</div>
<nav>
<ul>
<li>Home</li>
<li>Services</li>
<li>Gallery</li>
<li>Team</li>
<li>Contact</li>
</ul>
</nav>
</div><!--container-->
</header>
--
.container {
max-width: 1070px;
margin: 0 auto;
}
header {
overflow: hidden;
}
#logo {
float: left;
}
nav {
float: right;
}
nav li {
display: inline;
text-align: center;
margin-right: 4%;
}
What about this ?
header{
width: 100%; /* initialization */
min-width: 590px; /* some min width */
}
.container {
max-width: 1070px;
margin: 0 auto;
}
header {
overflow: hidden;
}
#logo {
float: left;
}
nav {
width: calc(190px + 20%); /* width of nav is (4x5)% + size of "HomeServicesGalleryTeamContact" */
min-width: 370px; /* set some min width */
float: right;
}
nav li {
display: inline;
text-align: center;
margin-left: 4%;
}
For the problem with your code is margin and padding <ul> tag. So you need to remove margin and padding in <ul> like below:
nav {
float: left;
width: 220px;
}
ul {
margin: 0;
padding: 0;
}
Please try!
% takes value relative to it's container width....
so when you given 4% margin, then it applies to all li and pushes right margin to 4% according to container width!
To prevent content breaking into new line, i would suggest to apply white-space:nowrap to
example demo
header {
overflow: hidden;
white-space:nowrap; /*added*/
}
nav ul {
display:inline-block;
white-space:nowrap;/*added*/
border:1px solid red;
}