I wonder why my code not works! I want to center my images on my two circle shape but currently I do not understand why they are not centered despite having set everything right, in my opinion, I hope someone can help me, thanks. This is my code!
with width and height 100% there is no problems, but I would like to leave some space on the sides of the internal images
* {box-sizing: border-box;}
body {
margin: 0;
font-family: "DM Sans", sans-serif;
overflow: auto;
}
button, a {
cursor: pointer;
}
.header {
background-color: #f1f1f1;
width: 100%;
padding: 0.5% 5%;
}
.header-left, .header-right {
color: var(--main-color);
padding: 0 2%;
}
.menu {
float: left;
color: black;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.social {
color: var(--main-color);
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
padding: 0;
}
.social-button {
text-decoration: none !important;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
margin-right: 20px;
position: relative;
color: #1F1C2E; /* colore icona */
border: 2px solid #1F1C2E; /* colore bordo */
padding: 0;
}
#kofi_img, #github_img {
text-align: center;
width: 100%;
display: inline-flex;
margin: auto;
padding: 2%;
}
.header span, a, button {
float: left;
color: black;
text-align: center;
padding: 12px;
text-decoration: none;
border-radius: 4px;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
</head>
<body>
<header class="header">
<div class="header-left">
<span id="name" class="name menu">mySite</span>
</div>
<div class="header-right">
<div class="social">
<a id="github" class="social-button menu" target="_blank" href="https://github.com">
<img src="https://i.ibb.co/LZfPtzn/Git-Hub-Mark-64px.png" alt="GitHub" height="84%" width="84%">
</a>
<a id="kofi" class="social-button menu" target="_blank" href="https://ko-fi.com">
<img src="https://i.ibb.co/PCyyCY8/kofi.png" alt="kofi" height="84%" width="84%"></img>
</a>
</div>
</div>
</header>
</body>
I can see a small discrepancy of white space between edges of images icons and borders.
Maybe try removing width and height percentages from your HTML and using CSS to apply these sizes, instead.
This stretched the images to fit more centered.
Your icons are collapsing when the screen resizes, as well. Adding a containing div or other semantic tag will keep this from occurring.
Lastly, your #kofi_img and #github_img selectors aren't doing what you may think.
By removing the underscores from each, you will indeed be selecting the images within those anchors!
Here's my code:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
</head>
<body>
<div class="social">
<div class="icon_container">
<a id="github" class="social-button menu" target="_blank" href="https://github.com">
<img src="https://i.ibb.co/LZfPtzn/Git-Hub-Mark-64px.png" alt="GitHub">
</a>
</div>
<div class="icon_container">
<a id="github" class="social-button menu" target="_blank" href="https://github.com">
<img src="https://i.ibb.co/LZfPtzn/Git-Hub-Mark-64px.png" alt="GitHub">
</a>
</div>
</div>
</body>
.social {
color: var(--main-color);
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
padding: 0;
}
.icon_container {
background-color: coral;
}
.social-button {
background-color: teal;
text-decoration: none !important;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
margin-right: 20px;
position: relative;
color: #1F1C2E; /* colore icona */
border: 2px solid #1F1C2E; /* colore bordo */
padding: 0;
}
#kofi img, #github img {
width: 85%;
text-align: center;
margin: auto;
padding: 2%;
}
Here's a fiddle: https://jsfiddle.net/permalik/0csfnu6L/32/
If you look closely at the Github image you can see that it is not itself absolutely centered - you are bound to get a larger gap at the bottom of the circle than at the top. Here is a blown up screen shot:
I can't see the same problem with the kofi logo
Related
* {
margin: 0%;
padding: 0%;
box-sizing: border-box;
}
.body {
display: flex;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 20px;
}
.header a {
text-decoration: inherit;
color: #202124;
font-family: sans-serif;
margin-right: 20px;
}
.header a:hover {
text-decoration: underline;
}
.Righty {
display: flex;
justify-content: space-between;
margin: 0px 10px;
}
.Lefty {
display: flex;
justify-content: space-between;
margin: 0px 15px;
}
.header_app {
margin-right: 20px;
color: grey;
margin-top: -6px;
padding-top: 0%;
}
.mainBody {
flex: 1;
display: flex;
margin-top: 5%;
flex-direction: column;
}
.mainBody img {
object-fit: contain;
height: 100px;
}
.search_input {
display: flex;
justify-content: space-between;
margin: 0 auto;
margin-top: 30px;
border-style: ridge;
height: 48px;
max-width: 600px;
border-radius: 30px 30px 30px 30px;
}
.search_input input {
flex: 1;
padding: 10px 20px;
border: none;
outline: none;
font-size: medium;
}
.search-ico {
color: grey;
margin-top: 10px;
padding-left: 10px;
padding-right: 10px;
}
.search_buttons {
display: flex;
justify-content: center;
color: rgb(244, 240, 240);
}
.search_buttons button {
padding: 10px 20px;
margin: 28px 10px;
border-radius: 4px;
background-color: white;
outline: none;
border: none;
}
.search_buttons button a {
text-decoration: none;
color: #3c4043;
font-size: 14px;
}
.search_buttons button :hover {
border: 1px;
padding: inherit;
margin: inherit;
background-color: rgb(245, 244, 244);
}
<!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="/practice.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<title>Google Clone</title>
</head>
<!--Header section starts-->
<div class="header">
<div class="Lefty">
About
Store
</div>
<div class="Righty">
Gmail
Images
<span class="material-icons header_app">
apps
</span>
<span class="material-icons header_app">
account_circle
</span>
</div>
</div>
<!--Header section ends-->
<!--Main Body section starts-->
<br>
<div class="mainBody">
<img src="/graphics.html/googlelogo_color_272x92dp.png" alt="google logo">
<div class="search">
<div class="search_input">
<span class="material-icons search-ico">
search
</span>
<input type="text" />
<span class="material-icons search-ico">
mic
</span>
</div>
<div class="search_buttons">
<button>
Google Search
</button>
<button>
I'm Feeling Lucky
</button>
</div>
</div>
</div>
<!--Main Body section ends-->
</body>
</html>
When I use hover for buttons, hovering over 1 button makes the other buttons move too.
It's a clone of the Google Search page, made using HTML and CSS
When I hover over the "Google search" button, the "I'm feeling lucky" button next to it moves towards the left.
I have added the code but the problem is just with the Google Search and I'm feeling lucky buttons
I want the header which is position:fixed to not move when I put a margin on the #main section. I have seen to try and add padding to the top element, but that did not help. I even tried giving the #email-section some top-margin, but that did not work either. It's almost like the header and main elements are attached. I am a self-taught and self-learning website developer. I'm sorry if this does not make sense. I will try and help you out with any information you want to know about the code. Thank you.
body {
background: url(marble_background_backup.jpg);
}
header {
position: fixed;
display: flex;
width: 100%;
flex-direction: row;
align-items: center;
}
header #header-img {
width: 100px;
margin-left: 20px;
}
header h1 {
font-family: "Abril Fatface";
font-size: 42px;
margin-left: 2%;
width: 60%;
}
#media (max-width: 1550px) {
header h1 {
width: 40%;
}
}
header li {
display: inline;
font-size: 30px;
font-weight: 500;
font-family: "Abril Fatface";
}
header li a {
text-decoration: none;
color: brown;
}
#main {
width: 100%;
margin-top: 100px;
}
#main #email-section {
width: 20%;
margin: 0 auto;
text-align: center;
font-family: "Bebas Neue";
font-size: 30px;
}
#main #email-section h2 {
margin-bottom: 0px;
letter-spacing: 0.05em;
}
#main #email-section input {
width: auto;
margin: auto;
font-size: 20px;
margin-top: 15px;
border: 3px solid brown;
color: brown;
border-radius: 5px;
display: block;
}
#main #email-section input[type=submit] {
background-color: lightyellow;
}
#main #email-section input:hover, #main #email-section input:focus {
background-color: blanchedalmond;
}
#facts {
display: flex;
flex-direction: column;
width: 50%;
margin: 8% auto 0 auto;
font-size: 28px;
}
#facts .facts-boxes {
display: flex;
flex-direction: row;
margin: 3%;
}
#facts .facts-boxes img {
width: 100px;
margin-right: 5%;
}
#facts .facts-boxes #bean-pic {
border-radius: 50%;
}
#facts .liner {
width: 50%;
height: 6px;
background-color: brown;
margin: 0 0 0 auto;
padding: 0;
transform: skewX(-40deg);
}
<!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" type="text/css" href="/styler.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Pacifico&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<title>Lion's Club Product Page</title>
</head>
<body>
<header>
<img id='header-img' src="lion1.png">
<h1>Lions Club Coffee House</h1>
<ul>
<li>| Learn</li>
<li> | Pricing</li>
<li> | About |</li>
</ul>
</header>
<main id="main">
<section id="email-section">
<h2>Know where your coffee comes From</h2>
<form action="#">
<input type="email" id="email" placeholder="Enter your email">
<input type="submit" id="submit" value="keep me informed">
</form>
</section>
<section id="facts">
<div class="facts-boxes"><img src="/plant.svg" alt="plant picture"><h3>Ethically sourced from trusted coffee farms</h3></div>
<hr class="liner">
<div class="facts-boxes"><img src="/coffee_bean.jpg" id="bean-pic"><h3>New Varieties Weekly</h3></div>
<hr class="liner">
<div class="facts-boxes"><img src="/trophy.svg"><h3>Trained Baristas inhouse</h3></div>
<hr class="liner">
<div class="facts-boxes"><img src="/medal_first.svg"><h3>Quality Unmatched</h3></div>
<hr class="liner">
</section>
set top:0; to your header
it will probably fixed, if not try adding another element with same height as your header... an empty div can help and it won't be visible because it will be under header only works as you want
The fixed <header> element is getting its default position based on the layout of the page (which includes the margins). If you want to explicitly specify its position, you can just do:
header {
top: 0;
}
I have a vertical menu div and a paragraph div each in a separate line but I want them glued beside each other.
body {
margin: 0;
padding: 0;
background-color: rgb(252, 252, 252);
}
link {
display: none;
}
.vertical-men {
width: 130px;
margin-left: 10px;
margin-top: 25px;
text-align: center;
}
.vertical-men a {
background-color: #eee;
color: black;
display: block;
padding: 12px;
text-decoration: none;
transition-duration: 0.7s;
}
.vertical-men a:hover {
background-color: #ccc;
}
.vertical-men a.activate {
background-color: #4CAF50;
color: white;
}
.container-men {
border: black solid 3px;
width: 50%;
}
<html lang="">
<head>
<meta charset="utf-8">
<title>example</title>
<meta name="author" content="Your Name">
<meta name="description" content="Example description">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<div id="header"></div>
<p id="p1" class="head-1">example</p>
<img id="imag" alt="logo" src="logo-black.png">
<br>
</header>
<main>
<div class="vertical-men">
Home
Link 1
Link 2
Link 3
Link 4
</div>
<div class="container-men">
</div>
</main>
</body>
</html>
I just want the innertext (class="container-men") to be animatedly changed by clicking on each (class="vertical-men")
and also I'd be really grateful if you could give me the Javascript codes for that purpose. thanks a lot!!
There are multiple ways to achieve what you try. CSS-Grid, Flexbox, Float... However the modern techniques are to use either flexbox or css-grid.
Using a CSS-Grid:
You use the container main and change it into a grid layout by applying display: grid;. Then you add a 2 column layout with grid-template-columns: min-content auto;. That way The navbar will consume as much space as declared and the content all remaining space.
body {
margin: 0;
padding: 0;
background-color: rgb(252, 252, 252);
}
link {
display: none;
}
.vertical-men {
width: 130px;
margin-left: 10px;
margin-top: 25px;
text-align: center;
}
.vertical-men a {
background-color: #eee;
color: black;
display: block;
padding: 12px;
text-decoration: none;
transition-duration: 0.7s;
}
.vertical-men a:hover {
background-color: #ccc;
}
.vertical-men a.activate {
background-color: #4CAF50;
color: white;
}
.container-men {
border: black solid 3px;
width: 50%;
}
/* added changes */
.vertical-men {
margin: 0;
}
.container-men {
width: auto;
}
main {
margin-top: 25px;
padding: 0 10px;
display: grid;
grid-template-columns: min-content auto;
}
<html lang="">
<head>
<meta charset="utf-8">
<title>example</title>
<meta name="author" content="Your Name">
<meta name="description" content="Example description">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<div id="header"></div>
<p id="p1" class="head-1">example</p>
<img id="imag" alt="logo" src="logo-black.png">
<br>
</header>
<main>
<div class="vertical-men">
Home
Link 1
Link 2
Link 3
Link 4
</div>
<div class="container-men">
</div>
</main>
</body>
</html>
Using Flexbox:
In this case you use display: flex; on the container (<main>). Then you can use flex-direction: row; to align the 2 elements next to each other. To span the content the remaining width, you can use flex-grow: 1; on the content element.
body {
margin: 0;
padding: 0;
background-color: rgb(252, 252, 252);
}
link {
display: none;
}
.vertical-men {
width: 130px;
margin-left: 10px;
margin-top: 25px;
text-align: center;
}
.vertical-men a {
background-color: #eee;
color: black;
display: block;
padding: 12px;
text-decoration: none;
transition-duration: 0.7s;
}
.vertical-men a:hover {
background-color: #ccc;
}
.vertical-men a.activate {
background-color: #4CAF50;
color: white;
}
.container-men {
border: black solid 3px;
width: 50%;
}
/* added changes */
.vertical-men {
margin: 0;
}
.container-men {
flex-grow: 1;
}
main {
margin-top: 25px;
padding: 0 10px;
display: flex;
flex-direction: row;
}
<html lang="">
<head>
<meta charset="utf-8">
<title>example</title>
<meta name="author" content="Your Name">
<meta name="description" content="Example description">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<div id="header"></div>
<p id="p1" class="head-1">example</p>
<img id="imag" alt="logo" src="logo-black.png">
<br>
</header>
<main>
<div class="vertical-men">
Home
Link 1
Link 2
Link 3
Link 4
</div>
<div class="container-men">
</div>
</main>
</body>
</html>
So I'm trying to design my very first website using CSS and HTML. But I have run into a bit of an issue.
I'm trying to make a simple sidebar with just a profile picture next to the content container. But, the div pushes down the other div instead of going behind it. I've used position relative and z index but nothing seems to work.
This is how the code looks like now.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<link
href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
rel="stylesheet"
/>
<title>Document</title>
</head>
<body>
<div id="sidebar">
<img src="./Img/pepe.png" alt="" />
</div>
<div class="contentbox"></div>
<div class="Wrapper">
<header>
<h1>Welcome To My Site</h1>
<h2>First CSS Site</h2>
</header>
<nav>
<ul class="meny">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</body>
</html>
CSS
* {
padding: 0;
margin: 0;
font-family: "Roboto";
}
body {
background-color: #E0F2E9;
}
#sidebar{
border: 2px solid brown;
text-align: right;
margin-top: 50%;
margin-left: 0%
}
.contentbox{
border: solid 2px red;
width: 60vw;
margin: 0 auto;
background-color: white;
height: 100vh;
margin-top: 300px;
}
.Wrapper {
border: 2px solid green;
height: 250px;
background-color: #5B7B7A;
margin: auto;
width: 95vw;
position: absolute;
top: 30px;
right: 30px;
left: 30px;
border-radius: 5px;
}
.meny{
text-align: center;
line-height: 32px;
border: 2px solid purple;
padding: 10px 10px;
}
ul.meny{
margin: 15px 10px;
text-decoration: none;
}
.meny li{
display: inline;
padding: 0px 10px;
}
.meny a{
text-decoration: none;
color: white;
font-size: 1em;
}
.Wrapper h1, h2 {
margin: 10px;
border: 2px solid blue;
display: flex;
text-align: center;
justify-content: center;
text-transform: uppercase;
color: #ffffff;
}
.Wrapper h1 {
padding: 30px;
}
.Wrapper h2 {
padding: 4px;
z-index values are relative and it depend to you, for instance : i write z-index: 50 for my div and z-index : 51 for my another element . Element has z-index 51 comes above div has less value of z-index . i hope this is help .
I have 3 items (boxes) within my flexbox that I want to use as hyperlinks. However, when I wrap the in tags it completely breaks the layout. How can I set each item (box) as a hyperlink so that users can click the entire area and it takes them to another website? As of now, I have the text within the boxes set as links. But I want to use the entire box as a link.
Here is a codepen for it: https://codepen.io/mrhoward/pen/dqqOxj
HTML:
<!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, viewport-fit=cover">
<link rel="shortcut icon" href="img/misc/favicon.png">
<meta name="description" content="">
<meta name="author" content="">
<title>Flexbox Problem.</title>
<link href="css/ton.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Press+Start+2P|Open+Sans">
</head>
<body>
<h1 class="col">Each Square as Hyperlink</h1>
<h2 class="col">This is getting annoying</h2>
<div class="maincontain">
<div class="col gaming"><h3 class="title">1</h3></div>
<div class="col music"><h3 class="title">2</h3></div>
<div class="col dev"><h3 class="title">3</h3></div>
</div>
</body>
</html>
CSS:
body {
background: #333;
color: #fff;
padding: 20px;
}
a {
text-decoration: none;
}
/* FLEXBOX */
* {
box-sizing: border-box;
}
.col {
padding: 20px;
}
.maincontain {
display: flex;
display: -webkit-flex;
display: -ms-flexbox;
justify-content: space-between;
}
.maincontain .col {
width: 32%;
height:400px;
align-items: stretch;
}
#media only screen and (max-width: 40em) {
.maincontain {
flex-direction: column;
height: 300px;
margin: 0 0 10px 0;
}
}
#media only screen and (max-width: 40em) {
.maincontain .col {width: 100%;}
.maincontain h3 { font-size: 1.3vh}
}
/* Item Stylig */
.gaming {
background: #d836eb;
}
.music {
background: #0000ff;
}
.dev {
background: #00ff00;
}
/* Font Styling */
h1 {
font-size:5vw;
font-family: 'Open Sans', sans-serif;
font-weight: lighter;
text-align: center;
padding: 50px;
}
h2 {
font-size:2vw;
font-family: 'Press Start 2P', cursive;
text-align: center;
padding: 0px 0px 20px 0px;
}
h3 {
font-size: 1.3vw;
font-family: 'Press Start 2P', cursive;
padding-top: 10px;
object-fit: cover;
}
.title{
color: white;
text-shadow: 1px 1px 4px #000000;
}
check this example:
<div id="select">
<p class="options left">
<a id="leftq" href="#selectionSet">the quick brown fox jumps over the lazy</a>
</p>
<p class="options right">
<a id="rightq" href="#selectionSet">dog</a>
</p>
</div>
#select {
color: #fff;
float: left;
height: 188px;
width: 631px;
}
#select p.options {
color: #FFFFFF;
float: left;
font-family: 'ComfortaaBold',cursive;
font-size: 20px;
height: 100%;
margin: 0 auto;
text-align: center;
width: 48%;
}
p.options.left {
align-items: center;
background: none repeat scroll 0 0 #EBEBEB;
border-bottom-left-radius: 100px;
border-right: 2px solid #FFFFFF;
border-top-left-radius: 100px;
display: flex;
justify-content: center;
padding-left: 5px;
padding-right: 5px;
}
p.options.right {
align-items: center;
background: none repeat scroll 0 0 #EBEBEB;
border-bottom-right-radius: 100px;
border-left: 2px solid #FFFFFF;
border-top-right-radius: 100px;
display: flex;
justify-content: center;
padding-left: 5px;
padding-right: 5px;
}
#select p.options a {
color: #636363;
padding: 80px 0;
text-decoration: none;
display:block;
width:100%;
}
#select p.options a:hover {
color: #FFFFFF;
}
p.options.right:hover, p.options.left:hover {
background-color: #00AEEF !important;
}
.rightq {
width: 100%;
}
Below is a link to a pen I forked and saved =>
https://codepen.io/kipomaha/pen/OooWXL
Below is the HTML, I changed the class from the div and put it onto the a element that I wraps the div.
<!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, viewport-fit=cover">
<link rel="shortcut icon" href="img/misc/favicon.png">
<meta name="description" content="">
<meta name="author" content="">
<title>Flexbox Problem.</title>
<link href="css/ton.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Press+Start+2P|Open+Sans">
</head>
<body>
<h1 class="col">Each Square as Hyperlink</h1>
<h2 class="col">This is getting annoying</h2>
<div class="maincontain">
<div><h3 class="title">1</h3></div>
<div><h3 class="title">2</h3></div>
<a class="col dev" href="#"><div><h3 class="title">3</h3></div></a>
</div>
</body>
</html>
Try adding the <a> tag inside <h3> element like below
<h3><a hrer =""><a></h3>
With
. maincontain a{
display :block;
}