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
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>
Hi! I am trying to place two paragraphs inside a DIV (a Name and a Job Position) for a responsive site.
.header {
min-height: 56px;
transition: min-height 0.3s;
max-width: 800px;
}
.header__inner {
margin-left: auto;
margin-right: auto;
float: left;
border: 3px solid #73AD21;
display: inline;
}
.header__text {
float: right;
border: 3px solid #73AD21;
display: inline;
}
<header class="header">
<div class="header">
<div class="header__inner">
<img class="header__logo" src="logo.jpg" alt="Logo">
</div>
<div class="header__text">
<p class="header__title">
NAME
</p>
<p class="header__subtitle">
CURRENT POSITION
</p>
</div>
</div>
</header>
Whenever I start playing with different sizes of screen both paragraphs switch places randomly. How can I make sure that they will stay in order?
This is how the page looks
Page with misplaced texts
And this is what I would like to accomplish
what I want to do
It seems you didn't post the CSS for the two elements whose position you want to switch, header__title and header__subtitle. But apparently they are both floated right. To make sure header__subtitle is NOT displayed to the left of header__title even if there is enough space, you can add this:
.header__subtitle {
clear: right;
}
I am having trouble and need assistance. Essentially, I want a center image div and four divs around the center image with text. Also, when I collapse the page width, I want them to all float centered below one another. Imagine a smartphone image in the middle of the screen and four text blocks (two top and two bottom). Additionally (to complicate things, ha) I want the left top and bottom text blocks to have right aligned text and the right top and bottom text blocks to have left aligned text. When the page collapses, I want all text to be centered. Thank you very much for any assistance!
The problem I have with my existing code: I cannot move the text blocks exactly where I want. I don't want them specifically at the top and bottom. Also, I am having trouble with aligning the text properly.
This is what I have so far:
#solutions2Header {
text-align: center;
padding-top: 50px;
padding-bottom: 50px;
font-size: 40px;
font-weight: lighter;
letter-spacing: 2px;
}
.solutionSection2:after { /*clear float*/
content: "";
display: table;
clear: both;
margin: 0 auto;
}
.solutionSection2 > div {
float: left;
width: 33%;
box-sizing: border-box;
text-align: center;
background-color: red;
}
#media (max-width: 850px) { /*breakpoint*/
.solutionSection2 > div {
float: none;
margin-left: auto;
margin-right: auto;
width: 100%;
background-color: #FAFAFA;
text-align: center;
}
}
.solutions2 {
background-color: green;
height: 100%;
padding-bottom: 500px;
}
#iphonexCenter {
position: relative;
margin: 0 auto;
}
#bottomBox {
padding-bottom: 100px;
}
<div class="solutions2">
<h2 id="solutions2Header">Highlighted Features</h2>
<div class="solutionSection2">
<div>
<p>Charges stored in one <br>place.</p>
<p><br>Provides peace of mind by<br>syncing and storing your charges<br>automatically.</p>
</div>
<div>
<img src="http://via.placeholder.com/300x600" id="iphonexCenter" alt="iPhone X Image" height="600" width="300" style="margin: 0 auto">
</div>
<div>
<p>Individual and team<br>messaging.</p>
<p><br>100% HIPAA compliant text<br>messaging at the tip of your fingers.</p>
</div>
</div>
<div class="solutionSection2">
<div id="bottomBox">
<p>Track daily work<br>progress.</p>
<p><br>Intellegently helps locate<br>missing charges and provides a score<br>card to ensure all charges are entered.</p>
</div>
<div>
<p></p>
</div>
<div id="bottomBox">
<p>Care coordination<br>alerts.</p>
<p><br>Be in the know. We can alert <br>your providers via admit/discharge
<br> notifications, stat, routine consults,<br> and more.</p>
</div>
</div>
</div>
If you don't need support for old browser I would go with flex box. It's quite easy. You can find complete guide to it here https://css-tricks.com/snippets/css/a-guide-to-flexbox/
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 ;)
At the bottom of this page, there are two columns. The right-hand column contains a twitter feed and the left-hand column shows a YouTube video and a comments section. The columns are created by the following HTML & CSS
.leftCol {
margin-right: 365px;
}
.rightCol {
float: right;
margin-bottom: 10px;
width: 355px;
}
<div class="rightCol">
<div>
<div class="leftCol">
<div>
But for reasons I don't understand, the left-hand column doesn't slide up into the vacant space to the left of the the right-hand column.
Just remove clear: both; from your inline styling of <h2 class="banner bgImage video">.
Change your .leftCol styling to:
.leftCol {
float: left;
width: 365px;
}
The margin is creating an illusion of space to the right of the left column.