I can't seem to get my "Home" buttons to the center. The home text is at the left instead of the center.I have my htm and css linked like this:
html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="background.css"/>
</head>
<body>
<h1>Bully-Free Zone</h1>
<h2>"Online harassment has an off-line impact"</h2>
Home
</body>
</html>
Css:
a.nav-link:link
{
color: black;
text-decoration: underline;
font-family:broadway;
font-size:30px;
text-align:center;
}
a.nav-link:visited
{
color: black;
text-decoration: none;
}
a.nav-link:hover
{
color: black;
text-decoration: none;
}
a.nav-link:active
{
color: black;
text-decoration: none;
}
You could wrap it in a div:
<div align="center">
Home
</div>
Or you can create a class for the div:
HTML:
<div class="myDiv">
Home
</div>
CSS:
.myDiv {
text-align: center;
width: 300px;
}
The text-align property will only center the text within the container it's in. In this case, the a tag is only as wide as the text. So regardless how you set your text-align property on that link tag, it will always appear the same. To center it you need to put it in an element that is wider.
<div id="nav">
<a href="New.html" class="nav-link>Home</a>
</div>
and your css:
#nav
{
text-align: center;
}
Good Luck!
Property text-align:center should be appurtenant to parent element
Link
a {
display: block;
margin: auto;
}
I reply 8 months late but I had the same problem as Backtrack and by trying a combination of the above answers I managed to fix my mishap this way. I share it very respectfully with you, in case someone needs this solution in the future.
CSS:
a {
text-align: center;
margin: 20px;
display: block;
}
It also works if you use an "Id" in the "a" tag.
Related
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).
This container stubbornly refuses to center. Demo: http://codepen.io/Diego7/pen/KzXgZN
I've tried just about every centering code I can find on the web, to no avail.
Removing width: 90%; from the css aligns the container to the left, even though margin: 0 auto; is telling it to center.
Sorry if this question isn't up to StackOverflow's 'standards', but codingforums.com are down at the moment :(
Thanks heaps!
HTML
<div class="container">
<article>
<header>
<img src="https://softwarereviews.files.wordpress.com/2016/04/bg-header-no-logo.png" width="972px"><br />
<h2>Information</h2>
</header>
<p>There's currently is no information available. Sorry.</p>
<footer>
© 2016
</footer>
</article>
</div>
CSS
##import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
font-family: 'Open Sans', sans-serif;
background: #fff;
}
.container {
list-style:none;
margin:0 auto;
width:90%;
padding-top: 20px;
background: #fff;
border-radius: 6px;
box-sizing: container-box;
}
article header h2 {
color: #282828;
font-size: 1.2em;
font-weight: normal;
display:inline;
line-height: 1.3;
}
article p {
font-size: 1em;
display:inline;
line-height: 1.5em;
color: #282828;
max-width: 972px;
}
article footer {
font-size: .9em;
display:inline;
color: #999;
}
a {
color: #2790ae;
text-decoration: none;
outline: none;
}
a:hover {
color: #0f6780;
}
Your .container is already centered: if you change background to red you will see it. And, if you add text-align property its content will be centered too.
.container {
list-style:none;
margin:0 auto;
width:90%;
padding-top: 20px;
border-radius: 6px;
box-sizing: container-box;
text-align:center;
background: red;
}
If you make the width a bit narrower (like 70%), you see that it IS centered.
by the way: " list-style:none;" has no effect whatsoever, and "box-sizing: container-box;" should be "box-sizing: content-box;"
Looks like you're centering the <div class="container">, but it doesn't look like it, because you're looking at the image.
If you want the image to take up the entire <div> element (so that any centering takes effect on both), try something like the following, instead of using an <img> element:
div.container {
background-image: url(https://softwarereviews.files.wordpress.com/2016/04/bg-header-no-logo.png);
}
There are other properties you can use to fiddle with precisely how the image is displayed. You can find more info here.
If you are using container after float tag. It can create problem sometimes. So to avoiding this user <div class="clear"></div>. Also clear class properties would be:
.clear{
clear:both;
margin:0px;
padding:0px;
height:0px;
font-size:0px;
line-height:0px;
float:none;
}
Hope it will be helpful..
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 am trying to create a button for my link which has the name on the button
and allows the user to click on it and go to the link.
Also I'm not sure why but my link "click-able range" seems to be extended.
Here is the Code:
<body>
<div id="container">
<div id="link">My Favorite Website</div>
</div>
</body>
Here is the CSS:
#container {
width:960px;
margin-left: auto;
margin-right: auto;
padding: 30px 0px;
}
a {
padding: 7px 100px;
border-radius: 10px;
background-size: 80px 60px;
background-color: green;
text-decoration: none;
}
#link {
padding: 7px;
font-size: 15px;
font-weight: bold;
font-style: italic;
}
Thanks!
Your link is inline element so you need to make it block or inline-block to add your styles so:
CSS
a {
display:inline-block;
}
Having a block element within an inline one is causing your problems.
By default, anchors are displayed inline. You need to display it a little differently, as inline-block:
a {
padding: 7px 100px;
border-radius: 10px;
background-size: 80px 60px;
background-color: green;
text-decoration: none;
display:inline-block;
}
JSFiddle
Remove div tag into a tag..
Demo
<div id="container">
My Favorite Website
</div>
just add this to #link in css
appearance:button;
-moz-appearance:button;
-webkit-appearance:button;
is an inline element. To make it behave like a block level element, you need to define its display property in CSS.
a {display:block;} or a {display:inline-block;}
and your link "click-able range" seems to be extended, because you are using a , which is a block level element, inside your tag.
Block level elements take the entire width of its container.
You need to redefine its bevavior.
link{display:inline-block;} or #link{display:inline;}
I'm trying to make a mobile version of my site. Here is the code for the "banner":
<center>
<div id="banner">
<img src="graphics/banner.png" />
</div>
</center>
And using this CSS:
#banner img a {
background-color: #ccc;
border-bottom: 1px solid #666;
color: #222;
display: block;
font-size: 20px;
font-weight: bold;
padding: 10px 0;
text-align: center;
text-decoration: none;
}
When I try it like that it won't work. Everything that was written apparently gets ignored, but if I remove the a, it works normal. But I need it to do that just if the <img> is surrounded by <a>. Why it won't work?
#banner img a means "An a element contained in an img element contained in an element with the id *banner".
You want: #banner a img if you want to select the img element.
I think that you want to have a comma between the HTML elements you want to apply the style to. Try #banner img, a{
...
} instead.