I want to create my navbar something like this
Navbar
And this is what I have created one side div container but the curves are not perfect of my div and i need to make this for both sides for both side I will use flex box but my main focus is to create that same curves.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<style>
.left {
border-radius: 0px 5px 100px 0px / 100px 30px 100px 0px;
border: 0px solid #800000;
background-color: red;
padding: 10px;
height: 100px;
width: 500px;
}
</style>
<div class="left">
s
</div>
</body>
</html>
Thank you.
This should work here you go :)
The website you gave uses .svg images to create this curve effect.
And with display: flex; makes them inline.
<body>
<style>
* {
padding: 0;
margin: 0;
background: black;
}
.navbar {
display: flex;
}
</style>
<div class="navbar">
<div class="left">
<img src="https://techfest.org/2021/home/Navbar/Logo.svg">
</div>
<div class="right">
<img src="https://techfest.org/2021/home/Navbar/TN.svg">
</div>
</div>
</body>
This will need Javascript, search for burger navbar CSS design using Javascript on YouTube.
Related
I have a problem when displaying my web page I'm using CSS border and margin in my code, but the output in my browser is very awkward this is my code and this is the output :
div {
width: 300px;
background-color: #DDD ;
padding: 10px;
border: 10px solid red;
margin: 10px;
}
<!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">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<h1>Product title</h1>
<p>This is a paragraph</p>
</div>
</body>
</html>
The output of my code in the browser
It looks like you have a second div element after the first one.
It might also be Tag soup, you could try to validate your HTML and see if you have any errors or warnings.
div {
width: 300px;
background-color: #DDD ;
padding: 10px;
border: 10px solid red;
margin: 10px;
}
<div>
<h1>Product title</h1>
<p>This is a paragraph</p>
</div><div>
There is a possibility that you have 2 div tags after I see the results of your code. For my solution, you can create a card attribute as a product container like this:
.card {
width: 300px;
background-color: #DDD ;
padding: 10px;
border: 10px solid red;
margin: 10px;
}
<div class="card">
<h1>Product title</h1>
<p>This is a paragraph</p>
</div>
Have You tried to run it on anyother browsers as your code is seems fine there is no problem in it.
I'm trying to place my logo nicely on the top left corner of the navbar. However, when I do that the brand name gets placed in a weird position.
I would appreciate it if someone could tell me how I could place the logo and brand nicely on the navbar.
This is the HTML:
<nav id="navbar">
<div className="nav-wrapper">
<Link
to={this.props.auth ? "/dashboard" : "/"}
className="left brand-logo"
>
<img src={Logo} alt="logo" className="photo" />
<div id="logo">Logo</div>
</Link>
<ul className="right">{this.renderContent()}</ul>
</div>
</nav>
And this is the css:
#navbar {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
#logo {
display: inline-block;
height: 100%;
padding-left: 20px;
}
.photo {
width: 64px;
height: 64px;
}
I am currently using materialize CSS for the navbar.
Just add this css line and you are good to go.
.brand-logo {
display: inline-flex !important;
}
CodesandBox:
Logo Issue
You can declare nav-wrapper as display:"flex" and use align-items:"center".
Then it should work fine.
Do let me know if this was something you were looking for.
If not we can try few more things.
#Nav_Bar {
height: 45px;
background-color: salmon;
display: flex;
align-items: center;
}
#Nav_Bar>div {
margin: 10px;
}
img {
max-height: 35px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<link rel="stylesheet" href="./index.css" />
</head>
<body>
<nav id="Nav_Bar">
<div id="Logo_Wrapper">
<a href="https:google.com">
<img src="./Logo.JPG" />
</a>
</div>
<div>
<h2>Logo</h2>
</div>
</nav>
</body>
</html>
Use flex-box
#navbar{
display:flex;
align-items:flex-start;
justify-content:center || space-around || space-evenly;
}
This should do it, flex-box makes it effortless to create navbars.
Add margin padding where you see fit.
In my HTML page, I have some social media icons at the top of the page, and a logo that's supposed to be in the middle. But, after I added the icons, they're pushing the logo to the side a bit.
Here's an image of what's happening
The question mark symbol is supposed to be in the middle of the entire page (directly in between the "updates" and "archive" in the nav bar), but it's being pushed off. Is there a way I can make the logo in the center of the entire page?
In my HTML I have:
<img src="https://imgur.com/16OdDvD.png" class="sns-icon" id="ig">
<img src="https://imgur.com/nQ2aUYu.png" class="sns-icon" id="reddit">
<div class="center">
<img src="https://imgur.com/hQRzG5G.png" id="headerlg">
</div>
Then in my styles.css I have:
.center {
text-align: center;
}
#headerlg {
padding-top: 35px;
padding-bottom: 9px;
width: 80px;
position: relative;
}
.sns-icon {
width: 30px;
float: left;
margin-top: 13px;
margin-left: 13px;
padding: 1px;
}
I've also tried justify-content: center and margin: auto both of which didn't work
your source code didn't work for me, but here I write some code like yours, I solve your problem with flex box and add some visual style, I hope it's make sense to you.
.container {
width: 100%;
height: 50px;
display: flex;
justify-content: space-around;
align-items: center;
}
.container>div {
width: 33%;
height: 20px;
background-color: rgb(216, 216, 216, 0.4);
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML & CSS</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<div class="social-media">
<span>instagram</span>
<span>twitter</span>
</div>
<div class="logo">
icon logo
</div>
<div class="put-nothing">
</div>
</div>
</body>
</html>
I just created 3 div 1 of them contain social media ,another contain logo , and last one left empty. all of them have same width in all device (mobile, tablet, laptop).
Im trying to use a full screen image as my headers background but for some reason the image is not showing up and I cant figure out what im doing wrong. Can someone help? The image is in the same folder as the html and css files btw.
CSS
body {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#header{
background-image:url(headerbackground.png);
width: 100%;
height: auto;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: inline-block;
float: right;
}
HTML
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, width=device-width">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<header>
<div id="header">
<ul class="col-4">
<li>SOBRE</li>
<li>TRABALHOS</li>
<li>CONTACTO</li>
</ul>
</div>
</header>
</body>
</html>
Since you've given your header div (#header) no explicit height and floated the only child it has, it collapses and acts like it has no content. Either give it a height or add overflow:auto to the CSS rules for it.
Agree with #j08691.
Working with html layout and css, it's always helpful, for me at least, to add following css:
border: 1px solid green; //or any color you like
so that we can see clearly how is the layout.
additional, in case you have issue with src image size, you may use
background-size: cover;
So i have been trying to remove the space between my div elements and iframe to no success for an hour. Any help will be greatly appreciated. This is what I have done so far.
css:
h1 {
text-align: center;
color: white;
}
.d1 {
border-style: none;
background-color: blue;
}
iframe {
width: 50%;
height: 50%;
display: block;
margin: 0;
}
Here is my html: I am trying to to remove the white space between the the 2 divs elements on the top and bottom.
<!DOCTYPE html>
<!-- By Christian Soto -->
<html>
<head>
<meta charset="UTF-8">
<title>Event Driven JS</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="d1">
<h1>Using JavaScript to Change the HTML</h1>
</div>
<iframe id="section">
<!-- Will be loading different html pages into here -->
</iframe>
<div class="d1">
<h1>Christian Soto</h1>
</div>
</body>
</html>
You need to remove the default margin from the <h1> tag,
all HTML headings have a default margin style.
h1{
text-align: center;
color: white;
margin: 0;
}