The elements of the web page I'm building move around when I want them to stay in place. If the line beginning "This is a Beta version" changes length, the 4 menu items (translucent gray rectangles) shift: If I shorten the bottom line, the menu items move to the right; if I lengthen it, the menu items move left.
How can I arrange things so that the width of one element won't change the horizontal position of other elements that are stacked vertically with it?
You can view the page at http://apdamien.info/nfair/GH/demo/mainmenu.html
Here is what I think is the relevant sections of the code:
CSS:
#mainmenu {
width: 350px;
padding-bottom: 14px;
margin-right: 60px;
}
#maindiv {
background: url(imgs/smalltown.jpg) no-repeat;
}
.menu-entry {
display: block;
cursor: default;
color: #fff;
width: 100%;
height: 39px;
padding-top: 13px;
font-size: 20px;
font-weight: bold;
font-family: Univers,sans-serif;
text-transform: uppercase;
margin-bottom: 19px;
margin-left: 8em;
border: 2px solid black;
text-align: center;
background: rgba(96,96,96,0.65);
text-decoration: none;
text-transform: uppercase;
}
.menu-entry:hover {
background: rgba(0,0,0,0.5);
}
And the relevant chunk of HTML:
<body>
<div id="maindiv">
<div id="titleauth">
<div id="title"><img alt="Demo Game" src="imgs/title.svg"/></div>
<div id="author"><a href="http://www.apdamien.info"
target="_blank"><img alt="A. P. Damien" src="imgs/author.svg"/></a>
</div>
</div>
<div id="lowerleft">
<div id="mainmenu">
<a class="menu-entry" href="game.html">New Game</a>
<a class="menu-entry" href="helpmain.html">How to Play</a>
<a class="menu-entry" href="restore.html">Restore Saved Game</a>
<a class="menu-entry" href="credits.html">Credits</a>
</div>
<div id="bottom-line">
<img alt="Beta version warning" src="imgs/beta.svg" />
</div>
</div>
</div>
</body>
Both #mainmenu and #bottom-line are positioned relative to the left-hand side of #lowerleft. If you want to have them positioned relative to the right-hand side, you'll need to float all children to the right. You'll also want to use clear: both, so that the children won't sit next to each other.
#lowerleft * {
float: right;
clear: both;
}
Using the above on your live site allows me to adjust the width of #bottom-line without affecting the postion of #mainmenu, so this should hopefully work for you :)
Note that this shifts the menu slightly to the right. If you want to move the main menu back to its original position, you can increase its margin-right value. It would have had no effect on the menu previously, though the addition of float: right also fixes that ;)
Related
I'm trying to set up a nav bar with a png link to the top left corner, and a text element "menu" to the top right corner. I haven't been able to get this to work with "float: right;"
I've included the code that shows I used float: right; for the .topnav elements. I'm not sure if .logo is interfering with this. I needed the png logo to be aligned with the text element which was not possible without putting them in separate divs.
.container {
position: absolute;
margin: 20px;
width: auto;
}
.topnav {
overflow: hidden;
float: right;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 10px 10px;
text-decoration: none;
font-size: 17px;
}
.topnav_right {
float: right;
}
.logo {
float: left;
}
<div class="container">
<div class="logo">
<img src="####.png" style="max-width:100%;">
</div>
<div class="topnav">
<div class="topnav_right">
Menu
</div>
</div>
</div>
The text still remain next to the logo, when it should be in the opposite corner to the right.
In the container class, instead of having position: absolute , do position: flex . It will fix the problem.
Since you want a Navbar with left-aligned png-link and right-aligned text, it can be achieved in a much simpler way using flex-box, with the need of nesting them.
It also handles alignment easily
You can read more about flexbox from csstricks
<style>
.topnav {
display:flex;
justify-content:space-between;
align-items:center;
}
</style>
<div class="topnav">
<div class="logo">
<img src="###.png">
</div>
<div class="text">
Menu
</div>
</div>
I'm using the skeleton grids and have vertically aligned my two columns using flexbox. However, this pushed my navigation closer to the logo image, and won't move to the right even using text-align or align.
The HTML:
<nav class="nav">
<div class="row">
<div class="one-third column">
<img class="brand" src="img/logo.png" alt="Logo" />
</div>
<div class="two-thirds column" align="right">
<span class="bars"><i class="material-icons">menu</i></span>
<ul>
<li>LOL</li>
<li>LOL</li>
<li>LOL</li>
<li>LOL</li>
<li>LOL</li>
</ul>
</div>
</div>
</nav>
The SCSS:
nav.nav {
display: flex;
align-items: center;
.brand {
width: 200px;
}
ul {
width: 100%;
margin: 20px;
list-style: none;
text-align: right;
li {
display: inline-block;
margin: 0;
a {
display: block;
text-decoration: none;
color: inherit;
text-transform: uppercase;
letter-spacing: 2px;
padding: 12px 16px;
border-bottom: 2px solid lighten($foreground-colour, 30);;
margin-right: -5px;
}
a:hover {
color: lighten($foreground-colour, 30);
border-bottom-color: red;
}
}
}
.bars {
display: none;
}
}
The image of the result I have now is this (logo scribbled out):
That's probably because you use the flex display on the nav, which contains only the row in which the logo and menu are. By default using a flex display without defining the flex property in the child, will result in flex: 0 1 auto for the child. This cuts the width of the child back to the combined width of its children(which are the logo and the menu), which is why they end up so close to each other.
So, in order to fix this, you either want to use the flex display in the row div, and then specify widths with the flexbox properties, removing the skeleton-css classes (they don't work well together).
Or, you could work with skeleton-css and play with line-heights and vertical-align properties in the row div. It's useful to temporarily give your divs and other elements a different color, so you can see what happens.
I am developing a small site with dropdown menus, using only HTML/CSS. In itself this works fine. I used to use TD's, but hey, DIVS rules, so using DIVs now.
I use a topmenu. On the left hand side, there is a number of menu items and the same goes for the rights hand side of the menu. So far all good. Since there is only two divs, one floating left and one floating right, and both have the same CSS applying within a containmer div with width 100%, it looks like one big menu bar.
The problem arises when I want to add a small logo in EXACTLY the middle of the screen, on the same menu bar. Since the left and right menu option list aren't exactly the same width (the right hand side menu item list is somewhat shorter), the logo in the middle is skewed to the right.
To make things worse, the list of menu options is dynamic, depending on what page you are on and wether you are logged in.
What I want to achieve is this:
Have 3 parts on the menu bar: right menu, middle logo, left menu
The middle logo must always be in the exact center of the screen
When resizing the browser window, the left & right part resize automatically to fit the screen
the middle logo is fixed width
When resizing, the left and right menu may only resize to the width required by the longest of the right or right menu options list
Of course, no wrapping!
I have been trying but fail miserably, mainly because my knowledge is insufficient. I prewfer to only use HTML/CSS and not JS/jquery
I tried having a backgorund image in the css of the container div, but then, when resizing, the menu options eventually flow over the middle log.
THis is teh CSS for the dropdown menus (got it from the web somewhere, not my code)
.navbarl {
overflow: hidden;
background-color: #333;
}
.navbarl a {
float: left;
font-size: 12px;
color: white;
text-align: center;
padding: 8px 10px;
text-decoration: none;
font-weight: normal;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 12px;
border: none;
outline: none;
color: white;
padding: 8px 10px;
background-color: #333;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #FFCC00;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 8px 10px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
The HTML normally looks something like this:
<div class="navbarl">
Home
News
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
I changed this for my site of course, and added a second block of this for the right hand side menu on the menu bar.
THis is what I now have for the complete menu bar. I know tables are bad for formatting stuff, but I have tried many different things, and this is a copy of my last attempt. As I said, I am still new to divs and learning to get rid of them :-)
<table class=menu>
<tr>
<td class="menu_left">
<div class="navbarl">
Home
Menu option 2 wih a long name
<div class="dropdown">
<button class="dropbtn">Cursusā¼</button>
<div class="dropdown-content">
Be
One
</div>[![enter image description here][1]][1]
</div>
Login
</div>
</td>
<td class="menu_middle">
<img class="menu_sponsor" src="/images/sponsor.png" alt=""/>
</td>
<td class="menu_right">
<div class="navbarl">
Nieuws
</div>
</td>
</tr>
</table>
This is an example (logo i made invisible, no need to be commercial here, its our sponsors logo). You can see its skewed
This is where flexbox comes in really handy. I would advise you to stay away from using table for layouts because it would be used incorrectly, just as float is meant only for placing images to the side of text.
I have made a quick, simple example of how a navigation menu could be created with flexbox. Naturally, you will want to create a mobile menu at smaller viewport widths.
HTML
<header role="navigation">
<div class="nav menu nav1">
Home
News
<div class="menu-dropdown menu-item">
<p tabindex="0">Dropdown</p>
Link 1
Link 2
Link 3
</div>
</div>
<div class="menu logo">
<a href="#" tabindex="0" title="Click to go to homepage">
<img src="http://media.gettyimages.com/photos/blue-eyed-husky-puppy-picture-id178375154?s=170x170&w=1007" alt="Husky puppy">
</a>
</div>
<div class="nav menu nav2">
About
Contact
</div>
</header>
CSS (scss)
header {
align-items: center;
display: flex;
flex-wrap: nowrap;
justify-content: center;
.nav {
width: 42.5%;
}
.logo {
width: 15%;
}
.menu {
align-items: center;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
.menu-dropdown {
height: 20px;
margin-bottom: -5px;
p {
cursor: pointer;
margin: 0;
&:focus, &:hover {
~ a {
display: block;
}
}
}
a {
display: none;
}
&:focus, &:hover {
height: 70px;
margin-bottom: -55px;
a {
display: block;
}
}
}
img {
width: 100px;
}
}
}
Example
https://codepen.io/anon/pen/vjXaVW
Explanation
Flexbox is a CSS layout technique that uses the browser's CSS engine to dynamically arrange elements. Instead of having to assign widths manually, flexbox does the heavy lifting for us.
Learn More about Flexbox
.some-random-class {
align-items: center; // I'm telling the element to arrange its children to be vertically centered
display: flex; // Declaring that this element will be using flexbox; it's like flipping the "Flexbox Switch" to on.
flex-wrap: nowrap; // I'm telling the element to never allow its children to wrap (i.e. fold over). Using "wrap" instead of "nowrap" tells the element to definitely allow its children to wrap (i.e. fold over)
justify-content: center; // I'm telling the element to horizontally center its children. There are more options than just "center"
}
With the justify-content: center;, the menu and logo will always be centered on the page. Notice that the <div class='menu logo'></div> element is in between the other two div elements, and these two other div elements contain menu items.
So I have this CSS box:
.navigation-div
{
text-align:right;
margin-top:14px;
box-shadow:0px 0px 10px rgba(0,0,0,0.47);
padding: 0;
color:#E3E3E3;
background-color: #333;
}
With an image and a piece of text inside of it
#mailtext
{
margin-top:-10px;
display:inline-block;
font-size:20px;
color:white;
font-style:italic;
}
#mailpicture
{
display:inline-block;
margin-top:16px;
}
This is the HTML I have for it:
<div class="navigation-div">
<nav class="navigation">
<h1 id="mailtext">Mail Us</h1>
<img id="mailpicture" src="images/gmail.png">
</nav>
</div>
Currently there is no styling for the class navigation. The Mail picture is in the correct position, but the text I want to go upwards. As you can see from the #mailtext styling I have margin-top:-10px; This does not move the text upwards.
How would I move this text upwards with or without using margin-top.
This question is like my previous question in a way, but now the text will not go to where I want it to (upwards). Using margin-left is bad, but when I did that I could move the margin top also. Since the navigation-div has a text align of right, this might be messing it up.
How would I keep the text in the same position with moving the margin top without using margin left. I would like to keep the text on the same line with the image, not above. The picture is in the right place, all i want to move is the text higher. I want the text to be parallel to the center of the image on the same line.
The previous question I have posted was about keeping all the elements on the same line, this one is about moving the margin-top.
To align the text a little higher you need to replace margin-top with position: relative and top:-10px, like in the code snippet and fiddle.
For a more efficient solution i recommend using the CSS property vertical-align. In this case if the image(size) is changed, it will still align with the text.
JSFiddle
.navigation-div {
text-align: right;
margin-top: 14px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.47);
padding: 0;
color: #E3E3E3;
background-color: #333;
}
#mailtext {
position: relative;
top: -10px;
display: inline-block;
font-size: 20px;
color: white;
font-style: italic;
}
#mailpicture {
display: inline-block;
margin-top: 16px;
}
<div class="navigation-div">
<nav class="navigation">
<h1 id="mailtext">Mail Us</h1>
<a href="mailto:info#email.com">
<img id="mailpicture" src="images/gmail.png">
</a>
</nav>
</div>
Edit:
.navigation {
margin-top:14px;
box-shadow:0px 0px 10px rgba(0, 0, 0, 0.47);
padding: 0;
color:#E3E3E3;
background-color: #333;
width: 100%;
height: 100px;
}
.container {
display: flex;
align-items: center;
justify-content: center;
float: right;
line-height: 0.5;
text-align: center;
margin-right: 20px;
}
#mailtext {
align-self: center;
font-size: 20px;
color: white;
font-style: italic;
margin-right: 15px;
}
#mailpicture {
align-self: center;
}
<nav class="navigation">
<div class="container">
<h1 id="mailtext">Mail Us</h1>
<a href="mailto:info#email.com">
<img id="mailpicture" src="images/gmail.png">
</a>
</div>
</nav>
JS Fiddle
There are issues with inline-block elements, especially when one is a block element and the other is an inline element. What I'd do is set parent font-size to 0 and come back to the H1 element to set the desired font-size. Then, I'd set vertical alignment to middle.
Mention: setting an id to the image element doesn't work, IMHO, without working with the link that contains it. They're both inline elements and one has to include the other, acting like a block, right?
Check the code, its a bit simplified, but you will definitely work it out.
.navigation-div {
background: #333;
color: #fff;
font-size: 0;
text-align: right;
}
#mailtext {
font-size: 20px;
margin-right: 5px;
}
.navigation a,
#mailtext {
display: inline-block;
vertical-align: middle;
}
#mailpicture {
display: block;
}
<div class="navigation-div">
<nav class="navigation">
<h1 id="mailtext">Mail Us</h1>
<img id="mailpicture" src="images/gmail.png">
</nav>
</div>
I don't know how big your logo will be, but here is an approach that is relatively clean.
For the two inline-block elements, #mailtext and #mailpicture, set vertical-align: middle.
For #mailtext, zero-out the default margins from the h1 tag.
For #mailpicture, adjust the left and right margins as need to get horizontal white space suitable with your design. and then set the top and bottom margin accordingly.
The vertical-align property will keep the two elements centered with respect to each other.
However, if your image is such that the visual center of the image is not at the mid-height of the image, you can add position: relative to #mailtext and adjust the top or bottom offset (use one or the other).
If your image height is actually less than the height of the text, apply the position-relative adjustment to the image instead of the text.
.navigation-div {
text-align: right;
margin-top: 14px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.47);
padding: 0;
color: #E3E3E3;
background-color: #333;
}
#mailtext {
display: inline-block;
vertical-align: middle;
margin: 0; /* zero out h1 margins */
font-size: 20px;
color: white;
font-style: italic;
}
#mailpicture {
display: inline-block;
margin: 10px; /*adjust as needed */
vertical-align: middle;
}
.ex2 #mailtext {
font-size: 2.5em;
margin: 10px 0;
}
.tweak #mailpicture {
position: relative;
bottom: 5px; /* use top if you want to move the image downward */
}
<div class="navigation-div">
<nav class="navigation">
<h1 id="mailtext">Large Logo - Mail Us</h1>
<a href="mailto:info#email.com">
<img id="mailpicture" src="http://placehold.it/100x50">
</a>
</nav>
</div>
<div class="navigation-div ex2">
<nav class="navigation">
<h1 id="mailtext">Small Logo - Mail Us</h1>
<a href="mailto:info#email.com">
<img id="mailpicture" src="http://placehold.it/100x10">
</a>
</nav>
</div>
<div class="navigation-div ex2 tweak">
<nav class="navigation">
<h1 id="mailtext">Position Tweak - Mail Us</h1>
<a href="mailto:info#email.com">
<img id="mailpicture" src="http://placehold.it/100x10">
</a>
</nav>
</div>
I have a logo and a secondary menu that I would like to appear on the same line (the logo on the far left, and the menu on the far right). The logo width is undefined and the secondary menu width is 200px wide. When I apply the following CSS, the secondary menu is pushed to the line below the logo (but still on the right side of the page):
#logo {
padding-bottom: 40px;
}
.secondaryMenu {
width: 200px;
float: right;
margin-right: 0px;
padding-right: 2px;
color: black;
font-size: 9px;
letter-spacing: 1px;
text-align: right;
}
Here is the relevant part of the HTML:
<div id="logo">
<img id="logoimg" border="0" alt="" src="images/logo.gif"/>
</div>
<div class="secondaryMenu">
About | Services |
Contact Us
</div>
I would appreciate any thoughts on what I'm doing wrong.
#logo would need to float: left
then you should probably add a clear: both styled container after .secondardMenu or wrap them both with a clearfix class'd container