I' trying to make a horizontal menu with special conditions
these are the rules I have to stick with:
html + css
menu should resize to the width of the container (100% of container).
so the wider the container the bigger (height, width) the menu
menu elements are images with different width
every image(menu element) is close to the next and previous (no gaps in between)
all dimensions should be expressed in % (no fixed size)
the code:
<div id="menu-container">
<ul>
<li><img src="myImg01"></li>
<li><img src="myImg02"></li>
<li><img src="myImg03"></li>
</ul>
</div>
css
#menu-container{
width:100%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: table;
}
li {
display: table-cell;
}
li img{
width:100%;
}
this works in firefox and safari
does not in chrome and similar... (it seems like all images are scaled in different %)
I've searched and did not found a similar issue
could you help please?
Will try to clarify.
I need that all images retain their aspect ratio even after scaling
you should add max-width in your div , and make display flex wrap
hay I hope this example will be helpful, so try like this:
CSS
#menu-container{
width:100%;
border: 1px solid red;
}
ul {
margin: 0;
padding: 0;
display: flex;
align-items: center;
flex-wrap: nowrap;
list-style-type: none;
}
li {
width: 10%;
height: 0;
padding-bottom: 10%;
background-repeat: no-repeat;
/*background-size: contain;*/
background-size: cover;
background-position: center center;
}
li a {
display: block;
width: 100%;
height: 0;
padding-bottom: 100%;
}
HTML
<div id="menu-container">
<ul>
<li style="background-image: url(https://static.scientificamerican.com/sciam/cache/file/4E0744CD-793A-4EF8-B550B54F7F2C4406_source.jpg);">
</li>
<li style="background-image: url(https://www.afd.fr/sites/afd/files/styles/visuel_principal/public/2019-01-07-16-19/mangrove%20couv.jpg);">
</li>
<li style="background-image: url(https://blog.nationalgeographic.org/wp-content/uploads/2020/05/May-11_Dorset-heathland_shutterstock_1332881306_sml-1140x450.jpg);">
</li>
</ul>
</div>
You can CSS grid.
#menu-container {
width:100%;
}
ul.menu {
display: grid;
grid-template-columns: 1fr 25% 2fr; // You can use percentages or the fr unit It represents a fraction of the available space in the grid container (works like Flexbox’s unitless values).
list-style-type: none;
margin: 0;
padding: 0;
}
Related
I'm trying to add an image to my navigation bar, and fit the image to the navigation bar, however I could not manage to resize the image for this purpose; no matter what I did the image just extends to the whole page. I am quite new to HTML & CSS, could you please explain how to fit the image to the navigation bar?
#profile-image {
height: auto;
width: auto;
float: left;
padding-left: 2%;
margin: 0 auto;
padding: 10px 0;
}
<div class="top-padding">
<nav>
<div id="profile-image"><img src="profile-image.jpg"></div>
<ul class="menu">
<li>About Me!</li>
<li>My Blog Posts!</li>
<li>My Projects!</li>
</ul>
</nav>
</div>
try with this
#profile-image{
height:auto;
width:auto;
float: left;
padding-left: 2%;
margin: 0 auto;
padding: 10px 0;
}
#profile-image img{
object-fit:cover;
}
nav{
overflow:hidden;
}
I just added the rule for nav and the cover for th eimage
How large do you want this image to be on the navbar? Let's say you want it to be 100px by 100px.
First you need to set the height and width of the parent element of the image. I just gave the div with id profile-image a height: 100px and width: 100px.
Next you need to tell the <img /> tag to conform to these dimensions. We can do that by giving it a style of height: 100% and width: 100%.
#profile-image {
height: 100px;
width: 100px;
float: left;
padding-left: 2%;
margin: 0 auto;
padding: 10px 0;
}
#profile-image img {
height: 100%;
width: 100%;
}
<div class="top-padding">
<nav>
<div id="profile-image"><img src="profile-image.jpg"></div>
<ul class="menu">
<li>About Me!</li>
<li>My Blog Posts!</li>
<li>My Projects!</li>
</ul>
</nav>
</div>
I'm not sure what you're trying to achieve so this is something of a guess:
nav {
display: flex;
align-items: center;
background: #eeeeee;
}
#profile-image {
flex-basis: 20%;
font-size: 0;
}
#profile-image img {
width: 100%;
}
ul.menu {
display: flex;
margin: 0;
justify-content: space-around;
flex-grow: 1;
list-style-type:none;
padding:0;
}
ul.menu li {
padding:10px;
}
<nav>
<div id="profile-image"><img src="http://placekitten.com/150/150" /></div>
<ul class="menu">
<li>About Me!</li>
<li>My Blog Posts!</li>
<li>My Projects!</li>
</ul>
</nav>
If you want to "fit the image to the navbar" then you need to give the nav bar a size for the image to fit into.
You can probably get rid of the profile-image div if you wish, unless you want to add special styles to the image area.
I am assuming that you want the image to be like an icon on the left (because you added the float: left style), as opposed to an image that covers the entire nav bar like a background image would.
If that's the case:
nav {
height: 150px; or whatever you want the image and the nav bar to be
}
#profile-image {
height: 100% or you can use the same height as the nav style
width: auto; That will keep the image proportions correct
float: left;
padding-left: 2%;
margin: 0 auto; <== not sure what you are doing here. Try deleting it as it won't help.
padding: 10px 0;
}
I am creating a responsive menu for a website, but I have a problem: The a tag (red color) is losing a couple of pixels when defining the 100% width of the div (blue color).
To notice the difference it is necessary to open the link of the Pen, use the Chrome inspector and select the red box. The width is shown with pixels less than 30 (example: 28.72, 27.60, etc.).
I have tried other HTML tags although the result has been the same. Why does it happen and what would be the optimal solution for the tag to keep the width and height at 30px, please?
Here the pen: https://codepen.io/Jnico/pen/RQaEoa
body {
padding: 0;
margin: 0;
}
.menu__container {
width: 100%;
background: black;
padding: 0 5px;
}
.menu {
width: 100%;
max-width: 1024px;
height: 55px;
margin: auto;
display: flex;
align-items: center;
}
.logo {
width: 30px;
height: 30px;
background: red;
display: inline-block;
}
.menu__buttons {
width: 100%;
background: blue;
margin-left: 15px;
display: flex;
justify-content: space-between;
}
.button {
padding: 6px 20px;
border: 1px solid #FFFFFF;
}
<nav class="menu__container">
<div class="menu">
<a class="logo"></a>
<div class="menu__buttons">
<a class="button">Button 1</a>
<a class="button">Button 2</a>
</div>
</div>
</nav>
Because of flexbox..
Add flex: 0 0 auto to your .logo so it doesn't flex at all an it should be fine ;) Also, you don't need display:inline-block there, as it's a flex-item already.
.logo {
width: 30px;
height: 30px;
background: red;
flex:0 0 auto;
}
When i set display to inline-table or table is ok and set 30*30
or you can set flex to 0 0 auto;
Either you can use flex-wrap: wrap to the flex container if you want that the flexible items will wrap if necessary.
Or you have to use flex-basis:30px to the <a>(No need to mention the width) and
flex-grow:1 to the .menu__buttons so that it can take the remaining width...
And remove width:100% from the .menu__buttons...No need
Updated Code
My best alternative was:
.logo {
min-width: 30px
}
Because "min" can be used without interrupting my receptive system with fixed pixels or by adding extensive code.
Heya dear Stackers,
I need to make a web page where I'll have 9 links above an image.
With this background I'm using, I intend on making it responsive, as well as the links above each gray circle.
Imagine the following links' disposal:
I guess I could use like 3 different div elements, for example, where the ones containing one element would have width: 100%, the ones containing two elements would have width: 50% and the ones containing three elements would have width: 33%.
All of this, inside a main div element with a background image and fixed width and height (same as the image's size).
Current HTML
<div class="list-part">
<ul>
<li id="w1">Parceiros</li>
<li id="w2">PHC CS</li>
<li id="w2">PHC FX</li>
<li id="w3">Consultoria</li>
<li id="w3">Suporte</li>
<li id="w3">Desenvolvimento</li>
<li id="w2">Formação</li>
<li id="w2">Soltec</li>
<li id="w1">Financiamento</li>
</ul>
</div>
Current CSS
.list-part {
margin-top: 100px;
width: 672px;
height: 667px;
background: url(../media/solucoes_logo.jpg) no-repeat center;
background-size: contain;
}
.list-part ul {
width: 100%;
padding: 0;
}
.list-part ul li {
list-style: none;
}
.list-part ul li a {
color: red;
text-decoration: none;
}
.list-part ul li a:hover {
color: red;
}
#w1 {
width: 100%;
height: 133px;
}
#w2 {
width: 48%;
height: 133px;
display: inline-block;
}
#w3 {
width: 33%;
height: 133px;
display: inline-block;
}
EDIT: So far, I almost did what I intended, excepting the vertical position of each link, which isn't in the centre of its respective circle, but on the top margin of it.
Result
How can I dispose the links as the image shows, following the responsiveness of the background image?
I have an html page structure like this:
<div id="list">
<ul>
<li style="background-color:orange;">Lorem</li>
<li style="background-color:red;">Lorem</li>
.............
<li style="background-color:black;">Lorem</li>
<li style="background-color:blue;">Lorem</li>
</ul>
</div>
On this page, I want all list element to have the same width - I don't care about the content, only the color is really important in this case - and I want all thos elements to fit in their parent div (#list) when the page just loaded, this mean no scroll.
And this list is not final, I can add or delete somme elements in my list after the page load. I would like to know if there is a CSS way to get this result, JavaScript is not really suitable in this case.
Is that possible ?
You can achieve this kind of behavior by using flex:
HTML structure:
<div id="list">
<ul>
<li style="background-color:orange;">Lorem</li>
<li style="background-color:black;">Lorem</li>
...
<li style="background-color:blue;">Lorem</li>
</ul>
</div>
CSS:
#list {
border-style: solid;
border-width: 3px;
white-space: nowrap;
}
#list ul {
display: flex;
flex-direction: row;
margin: 5px;
padding: 0;
}
#list ul li {
border-style: solid;
height: 50px;
list-style-type: none;
}
Here is a working demo: http://jsfiddle.net/kmbxawdd/1/
Yes, you can use flexible boxes:
#list {
display: flex; /* Magic begins */
border: 3px solid;
padding: 1em;
}
#list > li {
width: 0; /* Ignore the width of the content */
flex-grow: 1; /* Distribute remaining space equally */
overflow: hidden; /* Hide possible overflow */
height: 50px;
border-style: solid;
}
<ul id="list">
<li style="background-color:orange;">Lorem</li>
<li style="background-color:red;">Lorem</li>
<li style="background-color:black;">Lorem</li>
<li style="background-color:blue;">Lorem</li>
</ul>
JSFiddle Example
Flexbox is your friend.
div#list {
height: 800px; /*Whatever you want, really*/
width: 800px; /*Again, substitute this with whatever size you like*/
}
div#list ul {
height: 100%;
width: 100%;
display: flex;
flex-flow: row nowrap;
align-content: stretch;
list-style: none;
padding: 0;
margin: 0;
}
div#list ul li {
-webkit-flex: 0 1 100%;
flex: 0 1 100%;
}
You can try to set display to "table" on list and "table-cell" on li. But it will work as you expect only if all li elements will contain content with same width. And list itself must have explicitly defined width, of course.
Could you please assist with how to make one of my Lis Could you please assist with how to make one of my LisCould you please assist with how to make one of my LisCould you please assist with how to make one of my Lis
<div id="pageTop">
<nav>
<ul>
<li><img src="images/headerConSize.png" alt="" /><br>Home
<li><img src="images/headerConSize.png" alt="" /><br>Home
</ul>
</nav>
</div>
body {
margin: 0px;
background-repeat: no-repeat;
}
#pageTop {
height: 172px;
}
nav {
margin: 0px auto;
overflow: scroll;
width: auto;
height: 95px;
}
nav ul {
margin: 0px auto;
overflow: scroll;
}
nav ul li {
display: inline-block;
height: 70px;
text-align: center;
float:left;
overflow: hidden;
}
Hmmm, I think you could make use of the nth-child CSS selector here.
I assume you want the fourth <li> to take up the width of three normal <li> elements (as defined in your existing CSS), so the width we want will be: 10.66666667% * 3 = 32%.
Delete the extra 2 <li> elements in your HTML, and use nth-child(4), like so:
nav ul > li:nth-child(4){
width: 32%;
}
Now, the fourth <li> element will be three times the width of the other ones. Here's a JSFiddle to show you what this achieves. (I set a temporary background colour so you can see the fourth one.) If you have any questions, let me know!