[Picture of My Website1
Hey so if you see that image there then I just wanted to know how to put the button in the center, like how the heading is. Like directly under it, text-align does not work for me.
Please let me know if anything in my code is preventing the button from going in the center.
(I am new to HTML)
My code :
<html style = "background-color: lightblue;">
<b
><h1 id="chimp">
Welcome to Monkey Idle!
</h1></b
>
<a class="button" href="" style="text-decoration: none; color: black" id = "button">
Click Here to Play!
</a>
<a id="button2" class="button" href="" style="text-decoration: none; color: black;">
Played before? Click here!
</a>
<style>
#chimp {
text-align: center;
font-size: 50px;
font-family: cursive;
}
#moneycount {
border-style: solid;
}
#button2 {
text-align: center;
background color;
position:absolute;
left: 50%;
font-family: cursive;
background-color: white;
padding: 20px;
position: center;
align: center;
}
#keyframes buttonbounce {
0%{margin-left: 0px;}
100%{margin-left: 10px;}
}
#button2:hover {
animation: buttonbounce 0.1s infinite;
}
#button {
text-align: center;
background color;
position:relative;
font-family: cursive;
background-color: white;
padding: 20px;
}
</style>
</html>
The reason that text-align doesn't work for buttons is that buttons are not considered to be text. When you use text-align, you are centering the text within the parent element, not necessarily the center of the page. Text-align on a button for example will just center the text at the center of the button. If you want to center the button, you can wrap the button in a div, and utilize Flexbox. If you are getting started on web development, I highly recommend the aforementioned Flexbox as well as CSS Grid for page layouts.
#button-wrapper {
display: flex;
justify-content: center;
}
<div id="button-wrapper">
<button>My button!</button>
</div>
Related
I'm trying to create a responsive navbar where each item gets its' background highlighted (color change to higher saturation) on hover. However, only the link text gets highlighted.
I'm using a flexbox container with evenly distribution, plus a logo with margin-right:auto so it stays fixed at the left side.
What I want is getting the whole space (as seen in the dev console
) highlighted on hover. After digging around, I believe that area highlighted using the dev-console is the margin, thus the question title.
I figured it out using padding but it looks sketchy, it jumps around so it's far from ideal.
Here's my code:
* {
margin: 0;
padding: 0;
}
.top-nav {
background-color: rgb(148, 174, 186);
height: 120px;
display: flex;
justify-content: space-evenly;
}
.logo {
height: 100px;
margin-right: auto;
}
.nav-links {
font-family: 'Montserrat';
font-style: bold;
text-align: center;
margin: auto;
font-size: 45px;
color: white;
text-decoration: wavy; //don't mind this, just how I managed to clear the links default styling
height: auto;
}
.nav-links:hover {
background: rgb(39, 136, 180);
color: black;
}
<div class="top-nav">
<a class="logo-link" href="index.html"><img class="logo" src=img/Logotipo.png> </img>
</a>
<a class="nav-links" href=m y-bio.html>MY BIO</a>
<a class="nav-links" href=e xperience.html>EXPERIENCE</a>
<a class="nav-links" href=projects.html>PROJECTS</a>
<a class="nav-links" href=hire-me.html>HIRE ME!</a>
</div>
I was thinking about making the links into divs but I'm afraid it will end up with the same result.
You can't add a background colour to a margin value, that isn't possible. If you want it to be in the links add the following to your .nav-links class:
.nav-links {
padding: 1rem;
transition: .2s;
}
If you want the menu items to fill the full height of the parent element with the same effect you can do:
.nav-links {
height: 100%;
display: flex;
align-items: center;
padding: 0 1rem;
transition: .2s;
}
I'm not quite sure I know what you wish to achieve though.
I have looked at some other posts and all I could find was answers using javascript. Is there some way that I hover over an element on top of another element but the element at the bottom won't change its style? By the way, I only want to use vanilla HTML and CSS, no javascript. In this example, the goal is to hover over blabla or blablabla without adding a border to the navigation bar.
HTML
<div class="navBar">
<div>
<h1 id="Title">A Random Website</h1>
</div>
<div class="navBarChild">
Notepad
Help
</div>
</div>
CSS
.navBar{
display: flex;
position: sticky;
top:0;
padding: 20px;
border: 2px solid gainsboro;
width: 100%;
justify-content: center;
background-color: gainsboro;
z-index: 2;
}
#Title{
color: black;
font-family: monospace;
}
.navBar:hover{
border: 2px solid black;
}
h3{
z-index: 2;
}
body{
background:url("...") left / cover no-repeat;
}
.navBarChild{
display: flex;
flex-direction: row;
position: relative;left: 290px;top: 17px;
}
#linkBla{
font-weight: bold;
text-decoration: none;
font-size: 26px;
font-family: monospace;
color: black;
}
#linkBla:hover{
color: orangered;
}
#linkBlaBla{
position: relative;left: 50px;
font-weight: bold;
text-decoration: none;
font-size: 26px;
font-family: monospace;
color: black;
}
#linkBlaBla:hover{
color: orangered;
}
Add a new 'navBarContainer'
Try bringing the 'navBarChild' out of the 'navBar' like this:
<div class="navBar">
<div>
<h1 id="Title">A Random Website</h1>
</div>
</div>
<div class="navBarChild">
Notepad
Help
</div>
Make a whole new 'navBarContainer' for the both of them
<div class="navBarContainer">
<div class="navBar">
<div>
<h1 id="Title">A Random Website</h1>
</div>
</div>
<div class="navBarChild">
Notepad
Help
</div>
</div>
Set the '.navBarContainer' in your css to 'position: relative;'
position: relative;
Set the 'navBarChild' to
position: absolute;
display: flex; //to keep the a-links together
and then you can position it to your desire
top: 0; //important
left: 75%;
height: 100%;
At this point there should be no need for the z-index
Lastly
Add a little padding to the #linkBla and #linkBlaBla and set the display to 'flexbox'
#linkBla, #linkBlaBla {
padding: 40%;
display: flexbox;
}
Checkout the whole thing in this pen https://codepen.io/emekaorji/pen/mdOMMRr
I don't believe this is possible without javascript, but you can put the script inside of the HTML like so:
<html>
<body>
...
<script>
function removeOutline() {
document.getElementsByClassName("navBar")[0].style.border = "2px solid transparent";
}
function addOutline() {
document.getElementsByClassName("navBar")[0].style.border = "2px solid black";
}
</script>
</body>
</html>
and use it like:
<div class="navBarChild" onmouseover="removeOutline()" onmouseout="addOutline()">
CSS does not allow you to change elements above the current element. In other words, you can't change the parent element based on the child element (the reverse works by using child selectors).
I'm trying to align my text with the icon next to it but some reason it doesn't work. I put margin-bottom and margin-top but still not working so I would be really appreciated if I can get any help or suggestion.
<div class="notification"
[ngClass]="{'noty-error' : (caraouselItems[notificationIndex].notificationType==1),'noty-warn': (caraouselItems[notificationIndex].notificationType==2)}"
*ngIf="caraouselItems[notificationIndex].message">
<div class="firstPart">
<i-feather name="x-circle" *ngIf="caraouselItems[notificationIndex].notificationType==1" class="noty-error-icon"></i-feather>
<i-feather name="alert-triangle" *ngIf="caraouselItems[notificationIndex].notificationType==2" class="noty-warn-icon"></i-feather>
<span>
{{caraouselItems[notificationIndex].message}}
</span>
</div>
</div>
.notification {
padding: 0px 14px ;
font-weight: bold;
display: flex;
align-items: center;
height: 50px;
}
.noty-error {
background-color:#32111C;
border: 1px solid #D2232B;
}
.noty-error-icon {
color: #D2232B;
margin-right: 14px;
stroke-width: 1 !important;
width: 30px;
height: 30px;
}
Just put this style and adjust according to your position for alignment
whatever you need bottom it will work hopefully
<span style="position:relative;bottom:2px;">
{{caraouselItems[notificationIndex].message}}
</span>
I have just started to code. But I ran into a error in my css. The error is that I want the button to align to center but it will not align.
It is probably obvious but I don't know what is wrong.
Please help me. I would love it if you would help.
Here is my code:
<!DOCTYPE HTML>
<html>
<head>
<h1>Help</h1>
</head>
<body>
<br>
<a class="button" onClick='window.location="view-source:" + window.location.href' target="_blank">View Source</a>
</body>
<style>
h1 {
color: black;
text-align: center;
}
a[target=_blank] {
text-align: center;
}
.button {
text-align: center;
padding: 0 5px 5px 5px;
background-color: #dcdcdc;
border: 1px solid #666;
color: #000;
text-decoration: none;
font-family: "arial";
font-size: 100%;
}
</style>
</html>
I can't find anything on the web
If you say that you did not find anything on the web, you must not have tried at all.
Read up on the margin property and the rest of the HTML and CSS tutorials.
http://www.w3schools.com/css/css_margin.asp
You can either wrap the button in a div, or you can put around it.
Wrapped in div
HTML
<div class="div_name"><a class="button" onClick='window.location="view-source:" + window.location.href' target="_blank">View Source</a></div>
CSS
.div_name { text-align: center; }
Or
<center><a class="button" onClick='window.location="view-source:" + window.location.href' target="_blank">View Source</a></center>
add this to your css
margin:auto;
that will make it align to the center of the page.
you just add
body {
text-align: center;
}
text-align attribute specifies inner element,not this element
I've got an image of a house I want to display on my navbar as the 'home' link. I've entered some CSS to implement this but it doesn't seem to work. Could anyone help me display the image? See the image and CSS code below for clarification.
The light blue box is where the little white house should be. See below for CSS
html, body
{
padding: 0;
margin-right: auto;
margin-left: auto;
}
.navbar
{
height: 48px;
width: 100%;
background-color: #294052;
text-align: center;
vertical-align: middle;
margin-bottom: 10px;
}
li
{
display: inline;
position: relative;
padding: 20px;
border-right: inset 2px white;
font-size: 20px;
font-weight: normal;
font-family: sans-serif;
vertical-align: middle;
padding-top: 31px;
padding-bottom: 14px;
}
a
{
text-decoration: none;
color: white;
}
li:hover
{
text-decoration: underline;
background-color: #447294;
}
li.home
{
background-color: #447294;
background-image: url('home.png');
}
span
{
font-weight: bold;
}
I've tried using the display:block fix but it just messes up the rest of my navbar.
And the HTML code...
<div class="navbar">
<ul>
<li class="home"></li>
<li>ABOUT</li>
<li>CyMAL: MUSEUMS, ARCHIVES AND LIBRARIES</li>
<li>CONTACT</li>
</ul>
</div>
To start debugging, I'd first try to use absolute URL to make sure that the image can be loaded.
li.home
{
background-color: #447294;
background-image: url('full_path_to_image/home.png');
}
Also, please provide HTML code, ideally make a ready demo at http://jsfiddle.net/ (or any other similar service). That way you'll we can help you better.
EDIT: After you have added the HTML code, the problem seems to be indeed the path to your image.
Here is a working demo: http://jsfiddle.net/tBNSU/
Your background image is present in li.home; but li.home isn't wide enough to display anything. Background images are like background color - they won't change the shape of the content.
Try adding some content:
<li class="home">home</li>
Or change the alignment of your bg image to center center to perhaps see it more clearly.