I'm having some trouble with the width of the li elements and the size of my text.
I'm using text-size-adjust to make text readable on mobile, the li height grows with the text but not the width, it stays at the text original size. So the texts overlap.
* { text-size-adjust: 200%; }
#navigation{
background-color: white;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25)
}
#navigation ul{
display: flex;
}
#navigation a{
color: black;
text-decoration: none;
font-size: 25px;
}
#navigation a:visited{
color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>BASE</title>
<link rel="stylesheet" href="../styles/backgradient.css" />
<link rel="stylesheet" href="../styles/base.css" />
<link rel="stylesheet" href="../styles/navigation.css" />
</head>
<body>
<nav id="navigation">
<ul>
<li>Projets</li>
<li>Réseaux</li>
</ul>
<a>変態 白雪</a>
</nav>
<div id="content">
</div>
</body>
</html>
since you have an issue with the text not being adjusted with the screensize, first you have to remove the font size defined within the class, then add the font size to * {} class by defining the size with vw (viewport width). That way the text size will follow the size of the browser window. Try the following example and see. For more information please check w3 documentation. https://www.w3schools.com/howto/howto_css_responsive_text.asp
* {
font-size-adjust: 200%;
font-size:4.5vw;
}
#navigation {
background-color: white;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25)
}
#navigation ul {
display: flex;
}
#navigation a {
color: black;
text-decoration: none;
}
#navigation a:visited {
color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>BASE</title>
<link rel="stylesheet" href="../styles/backgradient.css" />
<link rel="stylesheet" href="../styles/base.css" />
<link rel="stylesheet" href="../styles/navigation.css" />
</head>
<body>
<nav id="navigation">
<ul>
<li>Projets</li>
<li>Réseaux</li>
</ul>
<a>変態 白雪</a>
</nav>
<div id="content">
</div>
</body>
</html>
Related
I am trying to render an HTML unordered list horizontally with each item having the same length and same height. Both items embed a link. One of the two embed an image. I would like to have item aligned vertically.
I use the flex display but am not able to align li content vertically.
In the following example Some text and the image (here Logo), i.e. both orange bordered boxes, should be vertically aligned, which is not the case.
I do not want to change the HTML code (do not want to change the given semantic nor adding element which do not give any new HTML information) but only the CSS
.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset='utf-8' />
<style type='text/css'>
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
#navbar {
background:silver;
}
#navbar ul {
display: flex;
flex-wrap: wrap;
list-style: none;
}
#navbar ul > li {
flex: 1;
border: 5px dotted green;
}
#navbar a {
border: 5px dotted orange;
}
#navbar img {
height: 80px;
vertical-align:middle;
}
</style>
<title></title>
</head>
<body>
<body>
<nav id="navbar">
<ul>
<li>Some text</li>
<li><a id="logo" href="#"><img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIgogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIKICAgaWQ9IkNhbHF1ZV8xIgogICBkYXRhLW5hbWU9IkNhbHF1ZSAxIgogICB2aWV3Qm94PSIwIDAgNzYxLjEyIDMyMi4yMyIKICAgdmVyc2lvbj0iMS4xIgogICBzb2RpcG9kaTpkb2NuYW1lPSJsb2dvLnN2ZyIKICAgaW5rc2NhcGU6dmVyc2lvbj0iMS4wLjIgKGU4NmM4NzA4NzksIDIwMjEtMDEtMTUpIj4KICA8bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGE1NSI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGU+PC9kYzp0aXRsZT4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGRlZnMKICAgICBpZD0iZGVmczUzIj4KICAgIDxyZWN0CiAgICAgICB4PSIxNy44MDgwNTMiCiAgICAgICB5PSIzNi43NzM1NjIiCiAgICAgICB3aWR0aD0iNzExLjkxNzYxIgogICAgICAgaGVpZ2h0PSIyNDcuNTQzMjMiCiAgICAgICBpZD0icmVjdDk1NyIgLz4KICA8L2RlZnM+CiAgPHNvZGlwb2RpOm5hbWVkdmlldwogICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIKICAgICBib3JkZXJjb2xvcj0iIzY2NjY2NiIKICAgICBib3JkZXJvcGFjaXR5PSIxIgogICAgIG9iamVjdHRvbGVyYW5jZT0iMTAiCiAgICAgZ3JpZHRvbGVyYW5jZT0iMTAiCiAgICAgZ3VpZGV0b2xlcmFuY2U9IjEwIgogICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwIgogICAgIGlua3NjYXBlOnBhZ2VzaGFkb3c9IjIiCiAgICAgaW5rc2NhcGU6d2luZG93LXdpZHRoPSIxOTIwIgogICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9IjEwMTYiCiAgICAgaWQ9Im5hbWVkdmlldzUxIgogICAgIHNob3dncmlkPSJmYWxzZSIKICAgICBpbmtzY2FwZTp6b29tPSIyLjA0Njk4MzQiCiAgICAgaW5rc2NhcGU6Y3g9IjM4Ni4wNjUyMiIKICAgICBpbmtzY2FwZTpjeT0iMTYxLjExNTAxIgogICAgIGlua3NjYXBlOndpbmRvdy14PSIwIgogICAgIGlua3NjYXBlOndpbmRvdy15PSIyNyIKICAgICBpbmtzY2FwZTp3aW5kb3ctbWF4aW1pemVkPSIxIgogICAgIGlua3NjYXBlOmN1cnJlbnQtbGF5ZXI9IkNhbHF1ZV8xIgogICAgIGlua3NjYXBlOnNuYXAtdGV4dC1iYXNlbGluZT0idHJ1ZSIgLz4KICA8cmVjdAogICAgIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlLXdpZHRoOjMuNzg7c3Ryb2tlLWRhc2hvZmZzZXQ6MC4zNzg7c3Ryb2tlOiMwMDAwMDA7c3Ryb2tlLW9wYWNpdHk6MSIKICAgICBpZD0icmVjdDg4MCIKICAgICB3aWR0aD0iNzYwLjU5MjEiCiAgICAgaGVpZ2h0PSIzMjAuMTE3NDMiCiAgICAgeD0iMC4yMzY5ODY0OSIKICAgICB5PSIwLjgyMDcwODg3IgogICAgIHJ5PSIzLjM1Njg5ZS0xNSIgLz4KICA8dGV4dAogICAgIHhtbDpzcGFjZT0icHJlc2VydmUiCiAgICAgaWQ9InRleHQ5NTUiCiAgICAgc3R5bGU9ImZvbnQtc3R5bGU6bm9ybWFsO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LXNpemU6NDBweDtsaW5lLWhlaWdodDoxLjI1O2ZvbnQtZmFtaWx5OnNhbnMtc2VyaWY7d2hpdGUtc3BhY2U6cHJlO3NoYXBlLWluc2lkZTp1cmwoI3JlY3Q5NTcpO2ZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZTsiCiAgICAgdHJhbnNmb3JtPSJtYXRyaXgoMy41NTI5NDg4LDAsMCwzLjU1Mjk0ODgsMTEwLjI5MzgxLC00My43ODI5MTcpIj48dHNwYW4KICAgICAgIHg9IjE3LjgwODU5NCIKICAgICAgIHk9IjcyLjE2NDA2MiI+PHRzcGFuPkxPR088L3RzcGFuPjwvdHNwYW4+PC90ZXh0Pgo8L3N2Zz4K" alt="Some Logo" /></a></li>
</ul>
</nav>
</body>
</html>
You could add align-items: center; to the container that has display: flex; as follows:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset='utf-8' />
<style type='text/css'>
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
#navbar {
background:silver;
}
#navbar ul {
display: flex;
flex-wrap: wrap;
list-style: none;
align-items: center;
}
#navbar ul > li {
flex: 1;
border: 5px dotted green;
}
#navbar a {
border: 5px dotted orange;
}
#navbar img {
height: 80px;
vertical-align:middle;
}
</style>
<title></title>
</head>
<body>
<body>
<nav id="navbar">
<ul>
<li>Some text</li>
<li><a id="logo" href="#"><img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIgogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIKICAgaWQ9IkNhbHF1ZV8xIgogICBkYXRhLW5hbWU9IkNhbHF1ZSAxIgogICB2aWV3Qm94PSIwIDAgNzYxLjEyIDMyMi4yMyIKICAgdmVyc2lvbj0iMS4xIgogICBzb2RpcG9kaTpkb2NuYW1lPSJsb2dvLnN2ZyIKICAgaW5rc2NhcGU6dmVyc2lvbj0iMS4wLjIgKGU4NmM4NzA4NzksIDIwMjEtMDEtMTUpIj4KICA8bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGE1NSI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGU+PC9kYzp0aXRsZT4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGRlZnMKICAgICBpZD0iZGVmczUzIj4KICAgIDxyZWN0CiAgICAgICB4PSIxNy44MDgwNTMiCiAgICAgICB5PSIzNi43NzM1NjIiCiAgICAgICB3aWR0aD0iNzExLjkxNzYxIgogICAgICAgaGVpZ2h0PSIyNDcuNTQzMjMiCiAgICAgICBpZD0icmVjdDk1NyIgLz4KICA8L2RlZnM+CiAgPHNvZGlwb2RpOm5hbWVkdmlldwogICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIKICAgICBib3JkZXJjb2xvcj0iIzY2NjY2NiIKICAgICBib3JkZXJvcGFjaXR5PSIxIgogICAgIG9iamVjdHRvbGVyYW5jZT0iMTAiCiAgICAgZ3JpZHRvbGVyYW5jZT0iMTAiCiAgICAgZ3VpZGV0b2xlcmFuY2U9IjEwIgogICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwIgogICAgIGlua3NjYXBlOnBhZ2VzaGFkb3c9IjIiCiAgICAgaW5rc2NhcGU6d2luZG93LXdpZHRoPSIxOTIwIgogICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9IjEwMTYiCiAgICAgaWQ9Im5hbWVkdmlldzUxIgogICAgIHNob3dncmlkPSJmYWxzZSIKICAgICBpbmtzY2FwZTp6b29tPSIyLjA0Njk4MzQiCiAgICAgaW5rc2NhcGU6Y3g9IjM4Ni4wNjUyMiIKICAgICBpbmtzY2FwZTpjeT0iMTYxLjExNTAxIgogICAgIGlua3NjYXBlOndpbmRvdy14PSIwIgogICAgIGlua3NjYXBlOndpbmRvdy15PSIyNyIKICAgICBpbmtzY2FwZTp3aW5kb3ctbWF4aW1pemVkPSIxIgogICAgIGlua3NjYXBlOmN1cnJlbnQtbGF5ZXI9IkNhbHF1ZV8xIgogICAgIGlua3NjYXBlOnNuYXAtdGV4dC1iYXNlbGluZT0idHJ1ZSIgLz4KICA8cmVjdAogICAgIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlLXdpZHRoOjMuNzg7c3Ryb2tlLWRhc2hvZmZzZXQ6MC4zNzg7c3Ryb2tlOiMwMDAwMDA7c3Ryb2tlLW9wYWNpdHk6MSIKICAgICBpZD0icmVjdDg4MCIKICAgICB3aWR0aD0iNzYwLjU5MjEiCiAgICAgaGVpZ2h0PSIzMjAuMTE3NDMiCiAgICAgeD0iMC4yMzY5ODY0OSIKICAgICB5PSIwLjgyMDcwODg3IgogICAgIHJ5PSIzLjM1Njg5ZS0xNSIgLz4KICA8dGV4dAogICAgIHhtbDpzcGFjZT0icHJlc2VydmUiCiAgICAgaWQ9InRleHQ5NTUiCiAgICAgc3R5bGU9ImZvbnQtc3R5bGU6bm9ybWFsO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LXNpemU6NDBweDtsaW5lLWhlaWdodDoxLjI1O2ZvbnQtZmFtaWx5OnNhbnMtc2VyaWY7d2hpdGUtc3BhY2U6cHJlO3NoYXBlLWluc2lkZTp1cmwoI3JlY3Q5NTcpO2ZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZTsiCiAgICAgdHJhbnNmb3JtPSJtYXRyaXgoMy41NTI5NDg4LDAsMCwzLjU1Mjk0ODgsMTEwLjI5MzgxLC00My43ODI5MTcpIj48dHNwYW4KICAgICAgIHg9IjE3LjgwODU5NCIKICAgICAgIHk9IjcyLjE2NDA2MiI+PHRzcGFuPkxPR088L3RzcGFuPjwvdHNwYW4+PC90ZXh0Pgo8L3N2Zz4K" alt="Some Logo" /></a></li>
</ul>
</nav>
</body>
</html>
change your navbar css like this
#navbar ul {
display: flex;
flex-direction:column;
align-items:center;
flex-wrap: wrap;
list-style: none;
}
I'm trying to make a decent navigation bar filled with a logo image however the text refuses to utilize any vertical height and I need the text-box to utilize 100% of it's vertical height
As you can see in the image, the textbox is only clickable within that border and it isn't using any vertical height which I want it to use
#import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
.navigation-bar {
padding: 3px;
display: flex;
justify-content: space-around;
align-items: center;
background-color: #e31f1f;
}
.navigation-item {
height: 100%
margin: 5px;
border: 1px solid #4848b9;
flex: 1 1 35em;
font-size: 15px;
font-family: "Montserrat", sans-serif;
text-decoration: none;
color: #000000;
}
.navigation-item a {
overflow: hidden;
float: none;
}
.navigation-item a:hover {
}
.current-item {
}
.logo {
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>heading</title>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<div class="navigation-bar">
<div><a class="current-item navigation-item" href="home.html">Home</a></div>
<div><a class="navigation-item" href="contact-us.html">Contact Us</a></div>
<div><img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" height=128 alt="logo" class="logo navigation-item" /></div>
<div><a class="navigation-item" href="about-us.html">About Us</a></div>
<div><a class="navigation-item" href="gallery.html">Gallery</a></div>
</div>
</body>
</html>
You can use grid for your container to make the row occupy exactly 1fr. After that just add flexbox to your div's that are directly below your parent container to enable flex-grow on your navigation-item or <a> tags. After that it's just a matter of centering the text vertically and horizontally inside the navigation-item. See the snippet below, if it's what's you're looking for.
#import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.navigation-bar {
padding: 3px;
display: grid;
grid-template-rows: 1fr;
grid-template-columns: repeat(5, 1fr);
background-color: #e31f1f;
}
.navigation-item {
border: 1px solid #4848b9;
flex: 1;
display: flex;
justify-content: center;
align-items: center;
font-size: 15px;
font-family: "Montserrat", sans-serif;
text-decoration: none;
color: #000000;
}
.navigation-bar > div{
display: flex;
justify-content: center;
text-align: center;
}
.navigation-item a:hover {}
.current-item {}
.logo {}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>heading</title>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<div class="navigation-bar">
<div><a class="current-item navigation-item" href="home.html">Home</a></div>
<div><a class="navigation-item" href="contact-us.html">Contact Us</a></div>
<div><img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" height=128 alt="logo" class="logo navigation-item" /></div>
<div><a class="navigation-item" href="about-us.html">About Us</a></div>
<div><a class="navigation-item" href="gallery.html">Gallery</a></div>
</div>
</body>
</html>
Making a navigation bar.
On large screens, everything looks like I need.
The problem with small screens.
When a screen decreases, Flex children should be clinging to the left edge. But this does not happen. They are centered.
This is how it looks like on my screen:
I need it to look like this:
Media requests and other use cannot be used. Task condition: only flexs and nothing more.
So how can I get the same effect as in the picture?
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
.footer {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
background: black;
font-weight: bold;
padding: 8px 8px;
}
.footer-name {
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
.footer-nav-item {
margin-left: 10px;
}
.footer-nav-item:hover {
border-bottom: 2px white dashed;
}
.footer-button {
font-size: 7px;
background: inherit;
border: 1px solid white;
padding: 7px 7px;
font-weight: bold;
border-radius: 4px;
}
.footer-button:hover {
background: white;
color: black;
}
.white {
color: white;
}
.footer-margin {
margin: 8px 8px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./assets/css/reset.css" />
<link rel="stylesheet" href="./assets/css/styles.css" />
<title>Flex navigation</title>
</head>
<body>
<footer class="footer">
<a class="footer-name footer-margin white" href="#">Rio Coffee</a>
<nav class="footer-nav footer-margin">
<a class="footer-nav-item white" href="#">HOME</a>
<a class="footer-nav-item white" href="#">ABOUT</a>
<a class="footer-nav-item white" href="#">SERVICES</a>
<a class="footer-nav-item white" href="#">MENU</a>
</nav>
<button class="footer-button footer-margin white">CONTACT</button>
</footer>
</body>
</html>
I think the closest you will get if you are not allowed to use media queries is to use space-between instead of space-around.
The difference is that the free space is distributed between elements only, not including the left and right extreme sides:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
.footer {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
background: black;
font-weight: bold;
padding: 8px 8px;
}
.footer-name {
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
.footer-nav-item {
margin-left: 10px;
}
.footer-nav-item:hover {
border-bottom: 2px white dashed;
}
.footer-button {
font-size: 7px;
background: inherit;
border: 1px solid white;
padding: 7px 7px;
font-weight: bold;
border-radius: 4px;
}
.footer-button:hover {
background: white;
color: black;
}
.white {
color: white;
}
.footer-margin {
margin: 8px 8px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./assets/css/reset.css" />
<link rel="stylesheet" href="./assets/css/styles.css" />
<title>Flex navigation</title>
</head>
<body>
<footer class="footer">
<a class="footer-name footer-margin white" href="#">Rio Coffee</a>
<nav class="footer-nav footer-margin">
<a class="footer-nav-item white" href="#">HOME</a>
<a class="footer-nav-item white" href="#">ABOUT</a>
<a class="footer-nav-item white" href="#">SERVICES</a>
<a class="footer-nav-item white" href="#">MENU</a>
</nav>
<button class="footer-button footer-margin white">CONTACT</button>
</footer>
</body>
</html>
The way I would combat this is:
Try using mobile first. This means your putting your css for mobile and then adding desktop on top of the mobile styling. If you're unsure about this, look at media queries in CSS (https://www.w3schools.com/css/css3_mediaqueries.asp)
By default display: flex; will wrap content (if it exceeds the limit, it will go onto a new line) and will use row as the default direction
If you remove the justify-content: space-around and change it for justify-content: flex-start; it will all be left aligned (flex-end will right align) so you could do a media query for this.
All i've done is added a desktop/tablet breakpoint using a media query and set the .footer's justify-content to flex-start
Hope this helps explain a little more :)
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
.footer {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
background: black;
font-weight: bold;
padding: 8px 8px;
}
.footer-name {
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
.footer-nav-item {
margin-left: 10px;
}
.footer-nav-item:hover {
border-bottom: 2px white dashed;
}
.footer-button {
font-size: 7px;
background: inherit;
border: 1px solid white;
padding: 7px 7px;
font-weight: bold;
border-radius: 4px;
}
.footer-button:hover {
background: white;
color: black;
}
.white {
color: white;
}
.footer-margin {
margin: 8px 8px;
}
/* Desktop styling! */
#media screen and (min-width: 480px) {
.footer { justify-content: space-around; }
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./assets/css/reset.css" />
<link rel="stylesheet" href="./assets/css/styles.css" />
<title>Flex navigation</title>
</head>
<body>
<footer class="footer">
<a class="footer-name footer-margin white" href="#">Rio Coffee</a>
<nav class="footer-nav footer-margin">
<a class="footer-nav-item white" href="#">HOME</a>
<a class="footer-nav-item white" href="#">ABOUT</a>
<a class="footer-nav-item white" href="#">SERVICES</a>
<a class="footer-nav-item white" href="#">MENU</a>
</nav>
<button class="footer-button footer-margin white">CONTACT</button>
</footer>
</body>
</html>
the css dropdown is a variation of the one found at:
http://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_navbar
When placed inside a dijit.layout.ContentPane, instead of floating, a scroll bar appears.
I've tracked the bug to this file:
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css">
But i fail to see the cause.
Below, the code.
<!-- File: css/dropdown.css-->
ul.dbtul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li.dbtli {
float: left;
}
li.dbtli a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li.dbtli a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css">
<style type="text/css">
html, body { height: 100%; }
</style>
<link rel="stylesheet" type="text/css" href="css/dropdown.css"/>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.11.2/dojo/dojo.js"></script>
<script>
var dojoConfig = {
parseOnLoad: true
}
require([
'dijit/layout/BorderContainer', 'dijit/layout/ContentPane', "dojo/parser", "dojo/domReady!" ],
function(BorderContainer, ContentPane, parser) {
parser.parse();
});
</script>
</head>
<body class="claro" style="font-family: Verdana; font-size: 11px;" >
<div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width:100%; height:100%;">
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
<a id="linkDeRegreso" style="display:none;" href="#" class="controlesVolver"> << Volver a página anterior</a>
<div >
<ul class="dbtul">
<li class="dbtli"><a class="active" href="#home">Home</a></li>
<li class="dbtli">News</li>
<li class="dropdown">
123456
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
This is a result of the BorderContainer layout, which sets a fixed height for the ContentPane div. This div has the dijitContentPane class and claro.css has the following declarations for it:
.dijitContentPane {
display: block;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
You can override overflow to visible and your example will work but then you may run into layout problems when you add other elements to the container. I would suggest to just use a dijit MenuBar instead: https://dojotoolkit.org/reference-guide/1.10/dijit/MenuBar.html
Have a bit of a issue with a h1 not staying in its containing div, the odd thing is its stays in it until the h1 gets to a certain font size then it starts going outside of the div and overlapping into other content. Here is my html and css, also i am also using the eric meyer reset sheet and my font style sheet just contains my #font-face font styles since i am using a custom font:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<title>Lawrence Chabela - User Interface Design</title>
<!-- CSS -->
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" charset="utf-8">
<link rel="stylesheet" href="css/font.css" type="text/css" media="screen" charset="utf-8">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" charset="utf-8">
<!--[if IE 6]>
<link rel="stylesheet" href="/css/ie6.css" type="text/css" media="screen" charset="utf-8">
<![ endif]-->
<!--[if IE 7]>
<link rel="stylesheet" href="/css/ie7.css" type="text/css" media="screen" charset="utf-8">
<![ endif]-->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>
<body>
<div class="siteWrap">
<div class="nav clearfix">
<ul class="clearfix">
<li>
Home<span>is where I work.</span>
</li>
<li>
About<span>this dude.</span>
</li>
<li>
Folio<span>take a peek.</span>
</li>
<li>
News<span>whats going on.</span>
</li>
<li>
Contact<span>got some work?</span>
</li>
</ul>
</div>
<div class="slogan">
<h1>Why Is this h1 not staying in here</h1>
</div>
</body>
/*Clearing Floats*/
html body * span.clear, html body * div.clear, html body * li.clear, html body * dd.clear { background: none; border: 0; clear: both; display: block; float: none; font-size: 0; list-style: none; margin: 0; padding: 0; overflow: hidden; visibility: hidden; width: 0; height: 0; }
.clearfix:after { clear: both;content: '.';display: block;visibility: hidden;height: 0; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/*Base*/
body { font: .875em/1.295em AurulentSansRegular,Impact,Arial,Geneva,Helvetica,sans-serif; background: #f2f2f2 url('../img/top_dot.png') no-repeat scroll center 9px; border-top: 9px solid #000; }
.siteWrap { width: 1024px; margin: 0 auto; }
.nav { width: 67%; margin: 50px auto 0; padding: 0 0 15px; border-bottom: 1px solid #BFBFBF; }
.nav ul { margin: 0 auto; width: 94%; }
.nav li { float: left; padding: 0 68px 0 0; font-size: 1em; text-transform: uppercase; }
.nav li:last-child { padding: 0; }
.nav li span { padding: 2px 0 0; clear: both; display: block; color: #868686; font-size: .875em; text-transform: none; }
.slogan { text-transform: uppercase; }
<div class="slogan"> isn't closed.