just starting out on my code journey and am hoping you can shed some light here. I just can't quite figure out how to adjust my code to reflect what I'm trying to do. I've tried to use float:right but then it seems to tamper with my ability to modify margins afterwards.
I've tried to adjust padding/margin/ text-align and can't seem to get my navbar text to the position that I want. What I want is to align it right,
and then offset it from the top where it is, and then to create space between the words for presentation. I'd like to keep it as a fixed navbar with the logo and text present during scrolling, at all times.
Here's a link to jsfiddle for an example, see below for my topnav CSS code.
https://jsfiddle.net/gbr403/t1u7q3wL/
.topnav {
background-color: black;
overflow: hidden;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%;
height: 63px;
border-bottom: 1px solid seashell;
}
You can use flexbox to align items in navbar. See example below
body {
margin: 0;
}
.navbar,
.navbar--links {
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar {
background-color: #222;
padding: 13px 15px;
position: fixed;
top: 0;
left: 0;
right: 0;
}
.navbar--logo {
width: 50px;
height: 50px;
}
.navbar--links a {
text-decoration: none;
color: #fff;
margin-left: 18px;
}
<nav class="navbar">
<img src="https://images.pexels.com/photos/258174/pexels-photo-258174.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" class="navbar--logo"/>
<div class="navbar--links">
Mission
Featured Tea
Locations
</div>
</nav>
Use css flex. The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.
body {
background-color: black;
}
.topnav {
background-color: black;
overflow: hidden;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%;
height: 63px;
border-bottom: 1px solid seashell;
display: flex;
justify-content: space-between;
align-items:center;
}
.topnav a {
font-size: large;
font-family: sans-serif;
}
#img1 {
}
#logoid{
height: 50px;
width: 150px;
padding: 10px;
}
<body>
<header>
<div class="image1">
<img id="img1" src="">
</div>
<div class="topnav">
<div class="navlogo">
<img id="logoid" src="https://via.placeholder.com/150">
</div>
<div>
Mission
Featured Tea
Locations
</div>
</div>
</header>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>1111<br/><br/><br/><br/><br/><br/>2222
</body>
Related
I'm trying to fix my website. Problem #1 I can't push the list on the header over by using margin-left or padding-left. Problem #2 the Main Header 1 and 3 are creating there own padding. My goal is to fix the padding and bring the headers closer together and get rid of this padding/margin issue.
#hlist {
top: 10px;
margin-right: 3px;
position: relative;
height: 30px;
padding-right: -12px;
}
ul#hlist {
float: right;
list-style-type: none;
margin: 0;
overflow: hidden;
}
ul#hlist li {
float: left;
}
ul#hlist li a {
font-family: 'Poppins';
color: black;
text-align: center;
text-decoration: none;
padding: 14px 16px;
}
ul#hlist li a:hover {
border-style: solid;
border-width: 1px;
border-color: gray;
color: gray;
}
.content-wrapper {
padding: 0;
}
.text-wrapper {
height: 300px;
width: 100%;
position: relative;
margin-top: -60%;
}
.text-wrapper h1 {
text-shadow: 2px 2px black;
text-align: center;
color: #ffff;
font-size: 10vw;
}
.text-wrapper h3 {
margin-top: 10%;
text-shadow: 2px 2px black;
text-align: center;
color: #ffff;
font-size: 30px;
}
<div id="header">
<ul id="hlist">
<li>WHERE TO WATCH</li>
<li>ABOUT</li>
</ul>
<div id="logo-box">
<img style="height: 32px; padding:5px;" src="https://assets.nationalgeographic.com/styleguide/stable/logos/ng-logo-2fl.svg" alt="logo">
</div>
</div>
</header>
<div class="content-wrapper">
<image id="bg" src="https://i.imgur.com/i2MSrn7.jpg">
<div class="text-wrapper">
<h3> The Giant </h3>
<h1> Panda </h1>
</div>
<image id="ply" style="height: 32px; padding:5px;" src="images.svg">
</div>
Your body has margin: 8px set. That's why there's a gap around the edges. Set margin: 0 on the body tag. Check out this codepen I created. That solves the gap around the edges of the image.
I don't fully understand the second part of your question. Your page is spread out very wide due to the size of the image. Make the image smaller and so that it doesn't overflow and your site will look much better.
If you want to position the links in an easier way look into using Flexbox and doing something like this:
display: flex;
justify-content: flex-end;
Do that on your links and they should float right if that's what you're trying to do.
Also, look into using a CSS Reset. By default HTML elements come with certain CSS styles applied automatically. A reset will get rid of default styles so they don't interfere with what you're trying to do. Lots of HTML elements have default padding/margins that you may not realize.
I want to display two images, side by side, at the center of the page, as well as display a button at bottom of the page.
Currently, the alignment of the two images is horizontally center. But, what I want is the two images at center of the page.
Below is my code:
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 15px;
}
.button {
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
margin: 4px 2px;
cursor: pointer;
}
.home {
font-size: 20px;
width: 100%;
background-color: #2483E8;
}
<body align="center">
<h2>Guidance</h2>
<br>
<table style="width:100%" id="haha">
</table>
<br>
<img src="image/add.png" width="130px" height="130px">
<img src="image/list.png" width="130px" height="130px">
<br><br><br>
<button class="button home" onclick="window.location.href='index.html'">HOME</button>
</body>
Can anyone help?
You can use display: flex; and use align-items to the elements centred vertically and justify-content to get them horizontally centred.
Now to get the button stick to the bottom, you can either use position: absolute; or position: fixed;
body {
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
button {
position: fixed;
bottom: 0;
right: 0;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
cursor: pointer;
font-size: 20px;
width: 100%;
background-color: #2483E8;
}
img:first-child {
margin-right: 1em;
}
<img src="https://dummyimage.com/100x100/000/fff&text=image+1">
<img src="https://dummyimage.com/100x100/000/fff&text=image+2">
<button class="button home" onclick="window.location.href='index.html'">HOME</button>
There are few ways of doing this in CSS. Position: absolute or fix or relative e.g
.button{
position: fixed;
bottom: 0;
}
Currently, there is no high set so will only be centre to the height of the content.
Maybe have div wrapper with height 100vh.
Hope this help!
I am building a navigation bar that has a lot of options and special sections.
I worked with Twitter Bootstrap, but it is difficult to develop.
The nav html tag has 3 sections grouped in 3 divs (left, center, right).
I am having difficulty in centring horizontally the text and logo of the company in left div, anchors with navigation items in the right div.
I need the height of navigation bar to be set in the CSS and not the calculate the height based of the child elements.
This is the html:
.navbar {
overflow: hidden; /* Clips from content if it is bigger than the parent element */
background-color: #333;
position: fixed; /* Position of the navbar is fixed */
top: 0;
width: 100%;
height: 50px;
}
.left-navbar {
float: left;
background: cadetblue;
width: 230px;
height: 100%;
text-align: center;
}
.right-navbar {
float: right;
background: maroon;
height: 100%;
/* float: right;
position: absolute;
top: 50%; right: 0%;
transform: translate(-50%,-50%);
background: gold;
padding: 1.5rem; */
}
.center-navbar {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
background: gold;
padding: 1rem;
}
.left-navbar strong {
color: red;
padding: 10px 10px;
display:inline-block;
text-align: center;
vertical-align: center;
}
.left-navbar img {
width: 32px;
height: 32px;
padding: 10px 10px;
}
.navbar a {
float: right; /* Orientation of the element in the parent element */
display: block; /* All over top left right bottom it is a block - element has block/padding all over the embedded element */
color: #f2f2f2;
text-align: center;
padding: 14px 16px; /* 14px top and bottom, 16px right and left */
text-decoration: none; /* Could be underline, overline, line-through */
font-size: 17px;
}
/* Apply only for anchors inside the navbar class */
.navbar a:hover {
background: #ddd;
color: black;
}
input[type="text"]{ padding: 5px 5px; line-height: 28px; }
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<nav class="navbar">
<div class="left-navbar">
<strong>Company</strong>
<img src="https://cdn0.iconfinder.com/data/icons/social-flat-rounded-rects/512/newsvine-512.png"></p>
</div>
<div class="center-navbar">
<input type="text" id="name" name="name" required height="45px;"
minlength="4" maxlength="40" size="40">
</div>
<div class="right-navbar">
Home
News
Contact
</div>
</nav>
Any working fiddle with best practices is ideal for me.
Thank you!
You can use flexbox to achieve this
.right-navbar, .left-navbar{
display: flex;
justify-content: center;
align-items: center;
}
Here you have a codepen, let me know if that help!
Give .left-navbar - horizontal and vertical centering with display:flex;
.left-navbar {
display: flex;
float: left;
background: cadetblue;
width: 230px;
height: 100%;
text-align: center;
justify-content: center;
align-items: center;
}
Also, how do you want the right part of the navbar?
Flex-box is what you'll want to use here. Add display: flex to the .navbar and then add flex-grow: 1; to the center piece. This essentially says 'make this element span the remaining space in the flex container. Also, your height: 100% were unnecessary, so I removed them.
.navbar {
overflow: hidden; /* Clips from content if it is bigger than the parent element */
background-color: #333;
position: fixed; /* Position of the navbar is fixed */
top: 0;
width: 100%;
height: 50px;
display: flex;
}
.left-navbar {
background: cadetblue;
width: 230px;
text-align: center;
}
.right-navbar {
background: maroon;
}
.center-navbar {
background: gold;
padding: 1rem;
flex-grow: 1;
}
input[type="text"]{
padding: 5px 5px;
line-height: 28px;
width: 100%;
box-sizing: border-box;
}
I have 3 images in a div placed horizontally. When I resize the page the images changes their position and float in a vertical alignment.I want the page responsive and when i resize the page i want that the whole div is adapted and resized. I need also to put in the page others div with others images. I want the images align in the bottom side.Sameone help me please?
This is the code example.
.box{
display: inline-block;
position: relative;
bottom:100%;
width: 100%;
margin: 5% 5% 0 0;
font-size: 12px;
}
.box:before{
content: "";
display: block;
padding-top: 100%;
}
img {
max-width:100%;
height:auto;
border:1px solid black;
text-align:center;
}
.content{
/* Positioning */
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
/* Styling */
border:1px solid;
padding: 30px;
text-align: center;
vertical-align: center;
text-transform: uppercase;
color: #fff;
}
<div class="box">
<div class="content">
<img src="http://fantapr.altervista.org/paul.jpg" width="350px">
<img src="http://fantapr.altervista.org/paul.jpg" width="350px">
<img src="http://fantapr.altervista.org/paul.jpg" width="350px">
</div>
</div>
strong text
Just add this to the img:
See fiddle https://jsfiddle.net/16q2xr8k/27/
img {
width: calc((100% / 3) - 2px);
height: auto;
border: 1px solid black;
text-align: center;
}
I'm trying to make a header bar that looks similar to Bootstrap. If you view this document now the problem is that 'Item 1' is displayed correctly but 'Item 2' is pushed below it, instead of being to the right of it. I thought that by setting "left:80px' to 'Item 2' it would go 80px right of item 1.
Please let me know how to fix this. I was also wondering if I'm doing this in a smart way or if stacking the elements (.items > #item_1) is better. Thanks!
CSS
/* header, logo, and items */
#header {
width: 100%;
height: 45px;
position: absolute;
top: 0px;
left: 0px;
background: #3b5998;
text-align: left;
box-shadow: 0px 1px 0px #888888;
}
.items {
top: 0px;
right: 0px;
width: 200px;
height: 23px;
padding-top: 11px;
padding-bottom: 11px;
position: absolute;
background: #3b5928;
text-align: center;
font-family: 'Calibri';
font-size: 18px;
color: #f7f7f7;
}
#item_1 {
width:80px;
background: fff;
}
#item_2 {
width: 80px;
left: 80px;
background: #3b7328;
}
HTML
<!--Header and Footer-->
<div id="header">
<div class="items">
<div id="item_1"> Item 1 </div>
<div id="item_2"> Item 2 </div>
</div>
</div>
One approach would be to change the display of the elements to inline-block. (example)
.items > div {
display:inline-block;
}
Alternatively, you could float the elements or use a flexbox layout.
It's worth noting that you can't position a static element (i.e., position:static - the default). If you wanted left: 80px to work, you could add position:relative or position:absolute - fixed would work too. (example) As the example demonstrates, this isn't really an effective way to line the elements up though. It would be better to either float them or make them inline.
#item_2 {
width: 80px;
left: 80px;
background: #3b7328;
position: relative;
}
Here is a JS Fiddle, next time you should set one up. It's very useful for other people to see your issue.
<!--Header and Footer-->
<div id="header">
<div class="items">
<div id="item_1"> Item 1 </div>
<div id="item_2"> Item 2 </div>
</div>
</div>
#item_1 {
width:80px;
color: black;
background: #fff;
position: relative;
float: left;
display: inline-block;
}
#item_2 {
float: left;
width: 80px;
background: #3b7328;
position: relative;
display: inline-block;
}
http://jsfiddle.net/ws5ew/