<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>xxxx</title>
<style>.center {
display: block;
margin-left: auto;
margin-right: auto;
}</style>
<link rel="icon" type="image/svg+xml" href="image" />
</head>
<body>
<div style="padding-left: 500px;">
<img src="image" alt="image" style="float:left ;" width="50" height="50" class="center">
<h2 style="text-align: center;font-family: sans-serif;color: rgb(81, 81, 133);float:left ;">xxxx</h2>
<hr>
</div>
</body>
</html>
this is what I have so far but whenever I try that the line goes to the top right what can I do to put it directly below the two elements
Use clear: left property on hr tag
It is not advised to use inline CSS
Also the float property creates unwanted(unexpected) behaviors so you can use flex or grid property instead
<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>xxxx</title>
<style>
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
<link rel="icon" type="image/svg+xml" href="image" />
</head>
<body>
<div style="padding-left: 500px;">
<img src="image" alt="image" style="float:left ;" width="50" height="50" class="center">
<h2 style="text-align: center;font-family: sans-serif;color: rgb(81, 81, 133);float:left;">xxxx</h2>
<hr style="clear:left">
</div>
</body>
</html>
I would suggest to use CSS classes and put your styling separately, because it creates cleaner HTML code.
padding-left isn't great because that only fits your own screen resolution. I just added text-align: right to push the whole shebang to the right, assuming that's what you wanted.
I added a container div and styled it with a border. Had to give it a width.
You shouldn't style using floats, unless you know what you're doing. display: flex or display: grid is what you're after when it comes to placing the elements on the right place.
<html>
<style>
header {
text-align: right;
}
header > .border-bottom-container {
width: 200px;
display: inline-flex;
align-items: center; /* align vertically */
justify-content: center; /* align horizontally */
border-bottom: 2px solid;
}
header img {
width: 50px
height: 50px;
}
header h2 {
text-align: center;
font-family: sans-serif;
color: rgb(81, 81, 133);
}
</style>
<body>
<header>
<div class="border-bottom-container">
<img src="image.png" alt="image">
<h2>xxxx</h2>
</div>
</header>
</body>
</html>
I'd suggest you wrap them in a div and then add the line to the div itself.
Related
I have a 4x11 grid and I am trying to place an image and caption next to it within the same area. Currently, the image is sitting above the text, rather than to the left in line with it:
<div class="Time">
<figure class = "Time-icon">
<img src="/images/time.png" alt="time icon" width= "20%" height= "20%">
</figure>
<h2>Time</h2>
</div>
.time {
grid-area: 10 / 3 / 12 / 4;
align-items: center;
padding-left: 85px;
}
.time-icon{
float: left;
display: block;
}
How would I go about making the icon sit nicely to the left inline with the text?
I think you can use this css.
.time {
display: flex;
justify-content: center;
align-items: center;
}
.time-icon {
margin: 0 8px 0 0;
width: 20%;
height: 20%;
}
.time-icon img {
width: 100%;
height: 100%;
}
html
<div class="time">
<figure class = "time-icon">
<img src="/images/time.png" alt="time icon">
</figure>
<h2>Time</h2>
</div>
you should use for this display flex, not float left.
.container{
display: flex;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="hec.css">
<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>
</head>
<body>
<div class="container">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/512px-HTML5_logo_and_wordmark.svg.png" width="60px" height="60px" alt="logo">
<h2>This is a logo!</h2>
</div>
</body>
</html>
This question already has answers here:
Is it wrong to change a block element to inline with CSS if it contains another block element?
(9 answers)
Closed 2 years ago.
I'm tryng to show two inline div, each div is wrapping 2 block divs, my question here is
Why the inline divs arent showing the background, even when they have children, until I type something inside, the background is showing but only in the text, no wraping the children.
Here's my code:
.container{
background-color: rgb(37, 220, 20);
height: 100px;
width: 100px;
/* display:block; */
}
.item{
background-color: coral;
margin: 10px;
height: 25px;
width: 25px;
}
.block{
display: inline;
}
<!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 class="container block" style="background-color: crimson">
<div class="item"></div>
<div class="item"></div>
</div>
<div
class="container block"
style="background-color: rgb(20, 180, 220)"
>
<div class="item"></div>
<div class="item"></div>
showing BG
</div>
</body>
</html>
Inline elements have no height or width as well as som other limitations on stying- you should make them inline-block to achieve your desired effect.
In the following snippet - I smily changed the styling to inline-block and it works as I believe you want it to - I was also able to remove the text from the second block.
Also - there does not seem to be a "flex-container" class on any of the elements.
.flex-container{
background-color: rgb(37, 220, 20);
height: 100px;
width: 100px;
/* display:block; */
}
.item{
background-color: coral;
margin: 10px;
height: 25px;
width: 25px;
}
.block{
display: inline-block; /* I changed this to inline block */
}
<!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 class="container block" style="background-color: crimson">
<div class="item"></div>
<div class="item"></div>
</div>
<div
class="container block"
style="background-color: rgb(20, 180, 220)"
>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
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.
.text{
width: 50px;
font-size: 27px;
float: left;
font-weight: bold;
}
.image{
width: 30%;
height: 100%;
clear: left;
float: right;
}
.parent{
background-color: pink;
height: 350px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link href="schrott.css" rel="stylesheet" type="text/css">
<title></title>
</head>
<body>
<div class="parent">
<p class="text">ihnihnihnihnihnihnihnihnihnihnihnihnihnihnihnihnihnihnii</p>
<img src="Pictures\—Pngtree—triangle neon color glowing border_4072770.png" class="image">
</div>
</body>
</html>
My wish would be to move the text next to the image. I have put these two inside a div and floatet the image right, but now i cant move the text down with margin-op?why and what could i improve?
Here is an example to point you in the right direction: https://jsfiddle.net/h5o607e1/1/
The biggest thing for you to look at here is the position and display settings for both the text and image: position: relative; and display: inline-block;
What about using a flexbox (display: flex):
.text{
width: 49%;
word-wrap: break-word;
margin: 0;
align-self: center; /*Vertically align text*/
}
.image{
width: 49%;
height: 100%;
background-color: red; /*for illustration*/
}
.parent{
background-color: pink;
height: 350px;
display: flex;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link href="schrott.css" rel="stylesheet" type="text/css">
<title></title>
</head>
<body>
<div class="parent">
<p class="text">ihnihnihnihnihnihnihnihnihnihnihnihnihnihnihnihnihnihnii</p>
<img src="Pictures\—Pngtree—triangle neon color glowing border_4072770.png" class="image">
</div>
</body>
</html>
This is CSS, level 1 people: just use float. The value for float is left, right or none (float on Mozilla Developer Network). The order of the elements should have an effect too.
<p>Placeholder...</p>
<img alt="Placeholder" src="4072770.png" style="float: left;" />
<p>Placeholder...</p>
<img alt="Placeholder" src="4072770.png" style="float: right;" />
<img alt="Placeholder" src="4072770.png" style="float: left;" />
<p>Placeholder...</p>
<img alt="Placeholder" src="4072770.png" style="float: right;" />
<p>Placeholder...</p>
Also don't put spaces or uppercase letters in URLs until you get more advanced or you'll create more headaches than it's worth.
My result: http://i.imgur.com/P50RS.png
My style.css
body {
background: url("img/bgs.png") repeat #cccccc;
color: #000000;
}
main {
margin-left: auto;
margin-right: auto;
}
My index.html
<html>
<head>
<title>Progress</title>
<link rel="stylesheet" href="css3-progress-bar.css" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link type="text/css" href="style.css" rel="stylesheet" />
</head>
<body>
<div id="main">
<p><b>215/160 LBS.</b></p>
<div class="bar_mortice rounded green_mortice">
<div class="progress rounded green" style="width: 05%;"></div>
</div>
</div>
</body>
</html>
Why is the text not centering? Also, the progress bar was not centering until I added the
margin: 0 auto;
I tried that under main but no luck. Any ideas?
In the css, you need to use #main instead of just main.
Also, you'll want to give it some width, otherwise it may take up the entire width. Try this:
#main {
margin-left: auto;
margin-right: auto;
width: 50%;
}