I want to create a simple div header to start my website and i have two pics logo.png and grey.jpg as background to my div. My logo wants to have the same height as the header, but to be left and to have something like 10% of the width.
The problem is that is that the logo doesnt seem to stay in size.It exceeds the height of the header if i put body size in auto.
<html>
<head>
<title>Museum page</title>
<meta charset="UTF-8">
<meta name="keywords" content="Home Museum">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
width:auto;
height:auto;
padding-left: 10%;
padding-right:10%;
text-align:center;
}
div#header{
height:10%;
width:100%;
background-image: url("images/grey.jpg"); text-align:center;}
nav{background-color:#d8d8d8;}
footer{background-color:white;clear:both;}
</style>
</head>
<body>
<div id="header">
<img src="images/logo.png" alt="Smiley face" style="float:left;width:15%;height:100%;">
<h1> Giorgos Angelousis life story </h1>
AM:2969 <br>Exercise-1a<br><br>
</div>
<footer>
TOP
</footer>
</body>
</html>
I want the logo to be the same height as the div , head.
Just remove the width:15% from <img src="images/logo.png" alt="Smiley face" style="float:left;width:15%;height:100%;">.
I've created a JSFiddle for you :)
HTML:
<div class="flex">
<div>
<img src="images/logo.png" alt="Smiley face" style="width:50px;height:100px;">
</div>
<div class="middle">
<h1> Giorgos Angelousis life story </h1>
</div>
<div>
<div>
AM:2969
</div>
<div>
Exercise-1a
</div>
</div>
</div>
CSS:
.flex{
display: flex;
align-items: center;
}
.middle{
padding-left:10px;
padding-right:10px;
}
Just remove height:100% from your <img> tag. So it will automatically get the height of header div. Here's sample snippet.
<html>
<head>
<title>Museum page</title>
<meta charset="UTF-8">
<meta name="keywords" content="Home Museum">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
width:auto;
height:auto;
padding-left: 10%;
padding-right:10%;
text-align:center;
}
div#header{
height:10%;
width:100%;
background-image: url("images/grey.jpg"); text-align:center;}
nav{background-color:#d8d8d8;}
footer{background-color:white;clear:both;}
</style>
</head>
<body>
<div id="header">
<img src="test-img.jpg" alt="Smiley face" style="float:left;width:15%;">
<h1> Giorgos Angelousis life story </h1>
AM:2969 <br>Exercise-1a<br><br>
</div>
<footer>
TOP
</footer>
</body>
</html>
Related
I want to realise this effect on website Link of video
my HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="style.css">
<title>Resto</title>
<link rel="icon" href="favicon/logoB.ico">
</head>
<body>
<main class="container">
<nav class="menu">
Burger
Sandwich
Chawarma
Salades
BBQ
Boissons
</nav>
<div class="central" dir="ltr">
<div class="logo">
<img src="images/logoB.png" alt="Logo">
</div>
<p class="text">Decouvrer des Saveurs exquises</p>
<div class="pictures">
<img src="images/burger.jpg" alt="Hamburger">
</div>
</div>
</main>
<footer>
<p>©*Copyright*****Chez MED***2023</p>
<p><img src="images/loc.png" class="localisation" alt="Adresse">2152 ** Boulevard des ULYSSES</p>
</footer>
</body>
</html>
my css:
.container{
position: relative;
z-index: 1;
box-shadow: 0 2rem 4rem #f3ebe0;
}
footer{
position:sticky;
bottom: 0;
padding: 15vmin 2rem;
background-image:url("images/fries.jpg");
background-repeat: no-repeat;
background-size: cover;
}
the result is
my page
My footer
the problem is my footer is visible under the body
can I get some idea to fix this problem?
I try to add an effect on my first page the footer should be under the main content who get the z-index
this is my code for my portfolio page and the links for my first row of images do not seem to be working
this screenshot shows which images links are not working
the CSS for this is here, so not too sure what i have done wrong
Check your folder structure first. Maybe that is the problem. Also, please write the code in your questions. It's easier for us to see the problem you are facing.
Added note
It's better in your case to make the parent element, div gallery, a grid.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.gallery {
margin: 20px;
display: grid;
grid-template-columns: auto auto auto;
grid-row-gap: 10px;
grid-column-gap: 10px;
text-align: center;
}
.gallery img {
width: 100%;
}
<!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">
<link rel="stylesheet" href="./index.css" />
<title>Document</title>
</head>
<body>
<div class="gallery">
<div>
<img src="https://images.unsplash.com/photo-1643827982014-87c3f7a14b1e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80" alt="picture">
Link
</div>
<div>
<img src="https://images.unsplash.com/photo-1643827982014-87c3f7a14b1e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80" alt="picture">
Link
</div>
<div>
<img src="https://images.unsplash.com/photo-1643827982014-87c3f7a14b1e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80" alt="picture">
Link
</div>
<div>
<img src="https://images.unsplash.com/photo-1643827982014-87c3f7a14b1e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80" alt="picture">
Link
</div>
<div>
<img src="https://images.unsplash.com/photo-1643827982014-87c3f7a14b1e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80" alt="picture">
Link
</div>
<div>
<img src="https://images.unsplash.com/photo-1643827982014-87c3f7a14b1e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80" alt="picture">
Link
</div>
</div>
</body>
</html>
So I have a probably really dumb question but I'm very new to coding.
I want to be able to resize and center my logo image (which is currently taking up the whole page on preview) but I've tried so many different ways of resizing in CSS and nothing at all happens. What am I missing??
Besides the standard beginning of HTML file this is all I have in my HTML file:
<div class="header">
<img class="logo" src="images/logo.png" alt="\Stuff logo">
</div>
These are the only lines I have in my CSS file:
body {
margin: 0 auto;
}
.logo {
max-width: 20%;
max-height: 20%;
}
img{
display:block;
margin:0 auto;
width:10%;
}
<!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>
</head>
<body>
<div class="header">
<img src="https://images.unsplash.com/photo-1575881875475-31023242e3f9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80" alt="">
</div>
</body>
</html>
This is what I have so far for the code...
<!DOCTYPE html>
<html lang="en">
<head>
<!--meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Stylesheets -->
<link href="style.css" rel="stylesheet" type="text/css">
<title>name of website</title>
</head>
<body>
</div>
<div class="topnav">
<img src="../images/website logo-01.png" width="80" height="80" alt="logo" class="logo">
<header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
<li> Resume
</ul>
</nav>
<header id="portrait">
<img src="../images/portrait.jpg" width="2000" height="2000" alt="portrait" class="portrait"
style="float: left; margin-right: -8000px; margin-bottom:">
<p>this is where the text wold be going</p>
</header>
<main>
<main>
<aside>
<div>
</main>
enter image description here
I would like the text to be aligned where the yellow bordered box is, and would appreciate some help.
You can use the css flex property like, put the image and text inside a div and add use display:flex property to the div and then you can use can use the order property if you want image and text in different order.
You can do that by putting your <img> and your <p> tag together inside one div and by using display:flex on that div element.
Place the p tag before the img and do as follows:
HTML
<header id="portrait">
<p>this is where the text wold be going</p>
<img src="../images/portrait.jpg" alt="portrait" class="portrait">
</header>
CSS
#portraid {
display:flex;
flex-direction:row;
align-items:center;
justify-content:center;
}
I will do set two images in inline, in the header of my website. But how I can do it?
https://imgur.com/0xnuqp5
I tried this... but (obviously) doesn't work.
<img src="../wp-content/themes/sadra/images/logo/3d-header.png" width="350"><img src="../wp-content/themes/sadra/images/home/prot3-sadra-JSI22D-1.png" width="325">
Try this flexbox example:
* {
box-sizing: border-box;
}
.row {
display: flex;
}
.image {
flex: 33.33%;
padding: 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="row">
<div class="image">
<img src="https://picsum.photos/id/237/200/300.jpg" style="width:100%">
</div>
<div class="image">
<img src="https://picsum.photos/id/237/200/300.jpg" style="width:100%">
</div>
</div>
</body>
</html>
<style>
.img{float:left;}
</style>
or
<style>
.img{display:inline;}
</style>
And then apply the class:
<img src="../wp-content/themes/sadra/images/logo/3d-header.png" width="350" class="img"><img src="../wp-content/themes/sadra/images/home/prot3-sadra-JSI22D-1.png" width="325" class="img">