I need to overlap logo and a cart button on my navigation bar ie.:
[Collapsed navi] [logo] [cart]
However, I cannot seem to get the below code to make them float left, center and right. Hope someone can help. Thank you!
CSS:
#navi_container {
width: 100%;
}
#navi_left {
float: left;
width: 100%;
}
#navi_right {
float: right;
width: 100%;
align-content: right;
}
#navi_center {
float: left;
width: 100%;
align-content: center;
}
HTML:
<div id='navi_container'>
<div id='navi_left'>
<div class='menumobile'/>
</div>
<div id='navi_center'>
<center><a href='url'><img height='auto' src='logoimg.jpg' width='150px'/></a></center>
</div>
<div id='navi_right'>
<span style="float: right;"<a href='url'><img height='auto' src='cartimg.jpg' width='150px'/></a>
</div>
</div>
Instead of float you can use flex here:
CSS:
#navi_container {
width: 100%;
display: flex;
justify-content: space-between;
}
You can remove width and float properties from #navi_left, #navi_right and #navi_center
Related
I'm a complete novice here, I want to put the vault-tec image on the left side aligned with the navigation menu,
<body>
<div class="container">
<nav class="navbar">
<img src="/images/vault-tec.png" alt="vault-tec-logo" />
<div class="home">Home</div>
<div class="about">About</div>
<div class="services">Services</div>
</nav>
</div>
</body>
Here's the css input:
`
.container {
background-color: #35538b;
height: 300px;
}
.navbar {
gap: 50px;
display: flex;
float: right;
font-size: 30px;
font-family: monospace;
align-items: center;
color: #eac852;
}
.navbar img {
width: 300px;
height: 200px;
justify-content: flex-start;`
I tried with the flex properties display, align-item...it's not working, I want to know what exactly I'm doing wrong. I attached an image for reference.
Thanks
You can use align-self and margin-right to align the image to the top left side, your CSS code should look like this:
.navbar img {
width: 300px;
height: 200px;
align-self: flex-start;
margin-right: auto;
}
Is that how you want it to be? Did I get right?
body{
margin:0;
}
.container {
background-color: #35538b;
height: 300px;
}
.navbar {
gap: 50px;
display: flex;
float: right;
font-size: 30px;
font-family: monospace;
align-items: center;
color: #eac852;
}
.navbar .logo {
padding:15px;
width: 300px;
height: 200px;
display:flex;
align-items:center;
}
.logo img{
width:100%;
height:100%;
}
<div class="container">
<nav class="navbar">
<div class="logo">
<img src="https://images.pexels.com/photos/9604815/pexels-photo-9604815.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="vault-tec-logo" />
</div>
<div class="home">Home</div>
<div class="about">About</div>
<div class="services">Services</div>
</nav>
</div>
By putting the features of the Flexbox, it is distributed to all its children in the same way. Therefore, if you want to change the position properties of any of them without changing the status of the rest, you can use self-align or make position property for your navbar equal to "relative" and the img position property equal to "absolute" and you can manipulate its position by top bottom left right properities. Or, I suggest that it is better for you to make the icons in a new container and control this container in its place or the location of its children icons in it easier, and you will also be able to control the image more smoothly
Here is fiddle https://jsfiddle.net/qyLjxwrv/1/.
As you can see left and right titles are aligned to screen corners, while I would like to align them to image corners. Trying it for 2hours without a success...
.wrapper {
position: absolute;
left: 0px;
right: 0px;
top: 0px;
background-color: rgba(213,213,213,.5);
text-align: center;
}
.info {
text-align: left;
}
.right-title {
float: right;
}
<div class="wrapper">
<div class="inner">
<div class="info">
<span class="left-title">Left</span>
<span class="right-title">Right</span>
</div>
<img src="http://i.imgur.com/CRcoPPS.jpg" />
</div>
</div>
Note that I don't want titles to appear inside image, but above it and aligned with left and right corner of image.
It seems that you can do it like this simply, and see the comments inline.
Updated Demo
.wrapper {
display: table; /*shrink-to-fit*/
margin: 0 auto; /*center*/
}
.wrapper img {
max-width: 100%; /*responsive*/
}
.left-title {
float: left; /*left*/
}
.right-title {
float: right; /*right*/
}
<div class="wrapper">
<div class="inner">
<div class="info">
<span class="left-title">Left</span>
<span class="right-title">Right</span>
</div>
<img src="http://i.imgur.com/CRcoPPS.jpg" />
</div>
</div>
Edit: Demos with the gray background color partly and full page.
I am trying to center my .get-started-btn vertically within a bootstrap column. I believe that the problem may be because this button is already placed inside a div with display: table-cell so i cannot create a table-cell within another table-cell? Is there another way to center the button vertically?
See my fiddle:
JS Fiddle
<div class="page-wrap">
<main>
<div class="jumbotron" id="jumbotron">
<div class="container">
<div class="row">
<div class="col-md-8">
<h1 class="page-header">Flash <span class="page-header-label">Cards</span></h1>
<p class="lead intro-text">
Flash Cards is a simple solution for anyone trying to memorize new things or study for that next big test.
Create your own personal deck of flash cards in minutes and we will track your results to ensure that
you know your stuff.
</p>
</div>
<div class="col-md-4">
<div class="vcenter">
Get Started
</div>
</div>
</div> <!-- end row -->
</div> <!-- end container -->
</div> <!-- end jumbotron -->
</main>
</div>
CSS
.page-wrap {
width: 100vw;
height: 100vh;
}
main {
display: table;
width: 100%;
height: 100%;
}
#jumbotron {
display: table-cell;
vertical-align: middle;
float: none;
}
.vcenter {
display: table;
height: 100%; /* does nothing */
width: 100%; /*pushes element to new line */
text-align: center;
}
.vcenter a {
display: table-cell;
vertical-align: middle;
float: none;
}
Apologies for misunderstanding your question. Once I increased the width, I saw the two columns.
You can vertically center the button by adding these styles:
.row {
display: table-cell;
}
.vcenter a {
position: relative;
top: 50%;
transform: translateY(-50%);}
}
Fiddle
Does div with paragraph will always have the same content? If yes then you could try:
.vcenter {
line-height: 270px; /*height of entire div on the left*/
}
And remove this:
.vcenter a {
display: table-cell;
vertical-align: middle;
float: none;
}
I was working on a project for my college using Bootstrap CSS and I am stuck with fixing some alignment issues. What I wanted to achieve is align logo to the left(acquiring 35% of width) and aligning social plugin and Sign Up & Sign In button to the right(acquiring the leftover space i.e. 65%).
The issue I am facing right now is everything is aligned vertically! What I've coded so far is mentioned below. Would appreciate if someone fixes bug in my code rather than coming up with a new one.
Here is the HTML:
<div class="container">
<div id="topBar">
<div class="topLeft">Logo</div>
<div class="topRight">
<div class="socialPlugin">f t g</div>
<div class="signUpIn">Sign Up/In</div>
</div>
</div>
</div>
Here is the CSS:
#topBar {
width: 100%;
}
#topBar .topLeft {
width: 35%;
}
#topBar .topRight {
width: 65%;
}
#topBar .topRight .socialPlugin {
float: left;
}
#topBar. topRighht .signUpIn {
float: right;
}
Demo
Thank you
Leaving aside the fact that Bootstrap is not being used most of what you want can be solved by correctly applying float and clearing floats as necessary.
#topBar {
width: 100%;
overflow: hidden;
/* quick clearfix */
}
#topBar .topLeft {
width: 35%;
float: left;
background: lightblue;
}
#topBar .topRight {
width: 65%;
background: #bada55;
float: left;
}
#topBar .topRight .socialPlugin {
float: left;
width:50%;
}
#topBar. topRighht .signUpIn {
float: right;
width:50%;
}
<div class="container">
<div id="topBar">
<div class="topLeft">Logo</div>
<div class="topRight">
<div class="socialPlugin">f t g</div>
<div class="signUpIn">Sign Up/In</div>
</div>
</div>
</div>
It looks like for the most part you've just got a typo in the last selector of your css:
Change #topBar. topRighht .signUpIn to #topBar .topRight .signUpIn, which I did to your fiddle.
I am making a web page that needs a header (on top) and a left aligned menu (below the header) and content to the right of that menu.
The problem I am facing is that I want to use (with elements and floats) rather than to create the struture of the page however, whenever I resize the browser window the content element floats down under the menu. I want the content to stick to the right of the left floating menu.
Any one got any ideas how I can fix this?
my html code has this structure:
<div id="menu">
menu #1
...
...
...
</div>
<div id="subcontent">
text or whatnot...
</div>
Css file look like this:
#menu
{
width: 200px;
float: left;
}
#subcontent
{
width: 800px;
float: left;
}
PS I have tried changing pixels to % but with no luck.
CSS
#layout {
min-width: 1001px;
}
#menu {
width: 200px;
float: left;
}
#subcontent {
width: 800px;
float: left;
}
.clear-both {
clear: both;
font: 1px/1px monospace;
display: block;
}
HTML
<div id="layout">
<div id="menu"> menu #1 ...
...
... </div>
<div id="subcontent"> text or whatnot... </div>
<div class="clear-both"></div>
</div>
Another solution:
CSS
#layout {
display: table;
width: 1000px; /* set it to 100% if #subcontent width is dynamic */
}
#menu {
width: 200px;
display: table-cell;
}
#subcontent {
width: 800px; /* you can remove the width to make it dynamic */
display: table-cell;
}
HTML
<div id="layout">
<div id="menu"> menu #1 ...
...
... </div>
<div id="subcontent"> text or whatnot... </div>
</div>
You will need an outer container.
Simply try wrapping both elements in a div of width 1000px
<div class="outer">
<div id="menu">
menu #1
</div>
<div id="subcontent">
</div>
</div>
.outer{width: 1000px;}
#menu
{
width: 200px;
float: left;
}
#subcontent
{
vertical-align: top;
width: 800px;
float: left;
}