Buttons won’t behave

[TheOriginal150mph]

CSS experimental site

- rectangle buttons will not center horizontally on the page

-  the text will not center vertically in the buttons

I see nothing in the html or css directing them flush left. Ive tried everything I can think of to center them on the page including adding align text center; and align content center in every div on the page. Why are they aligning left?

To get the text to center vertically in the button Ive experimented ad nauseum using padding and margin numbers to move the text a little up, a little down  - but it refuses to center correctly.

[BenPleysier]

Add the following style rules

        main {
            display: flex;
            flex-direction: column;
        }

        .intro-buttons {
            align-self: center;
        }

Having said that, the whole procedure would be so much quicker when using Bootstrap. You can concentrate on the outcome rather than trying to create the correct style rules.

[BenPleysier]

Sorry, just realised that there are two parts to the question. For the second part. remove the <br> from

<a href="_video-multimedia-animation.html" title="L">QUICK LOOK video</a><br>

and change the style rules to

main {
    display: flex;
    flex-direction: column;
}

.intro-buttons {
    align-self: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

[TheOriginal150mph]

Thanks Ben

Maybe Flex or Bootstrap is the way to go but theyre whole 'nother systems to learn, and I'm not going to be coding much in the future as coding isn't my thing, so I'm reluctant to use your simple fix and call it a day.

Would love to find how to fix it with regular html/css that I know and understand. I want to know where I went wrong, and I don't think these 2 problems should be a major coding challenge....

[BenPleysier]

Would love to find how to fix it with regular html/css that I know and understand.

By @TheOriginal150mph

Flexbox is regular CSS while Bootstrap is a CSS and component library (framework).

For more see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

[BenPleysier]

You could try:

        .intro-buttons {
            margin-left: auto;
            margin-right: auto;
        }

        .intro-buttons a {
            line-height: 2.25em;
        }

[TheOriginal150mph]

Thank you!

[osgood_ · Accepted solution]

Maybe Flex or Bootstrap is the way to go but theyre whole 'nother systems to learn, and I'm not going to be coding much in the future as coding isn't my thing, so I'm reluctant to use your simple fix and call it a day.

There's no need for any Flex or Bootstrap to do this. This is just a matter of getting your current css right, which would be as follows:

.intro-buttons {
text-align: center;
text-transform: uppercase;
width:350px;
background-color: rgba(255, 255, 255, 0.4);
border-radius: 5px;	
font-family: 'Brawler', serif;
font-size: 1em;
font-weight: bold;
color:#000;
padding: 10px 0;
transition-duration: 0.4s;
margin: 0 auto 10px auto;
}

.intro-buttons a:link {
text-decoration: none;
color: #000;
}
.intro-buttons a:visited {
color: #f2eab7;
}
.intro-buttons:hover {
background-color: #DAB277;
color: white;
}

Infact there is absolutely no need to wrap your anchor tags in <divs>, which create redundant code - you could just apply the class to the anchor tags themselves:

<a class="intro-buttons" href="_video-multimedia-animation.html" title="L">QUICK LOOK video</a>

<a class="intro-buttons" href="_directory.html" title="Site Directory">Enter Site</a>

Then use the slightly revised css below:

.intro-buttons {
text-decoration: none;
color: #000;
text-align: center;
text-transform: uppercase;
width: 350px;
background-color: rgba(255, 255, 255, 0.4);
border-radius: 5px;	
font-family: 'Brawler', serif;
font-size: 1em;
font-weight: bold;
color:#000;
padding: 10px 0;
transition-duration: 0.4s;
margin: 0 auto 10px auto;
display: block;
}

.intro-buttons:visited {
text-decoration: none;
color: #f2eab7;
}

.intro-buttons:hover {
background-color: #DAB277;
color: white;
}

[TheOriginal150mph]

Thanks Osgood that works great!

Same subject (buttons), new unrelated questions

— Whats the proper way to add say 70px vert. space under the big text/above the first button?

— I copied some code  (at the bottom of the css: "btn-group .button") from W3schools for a main nav and can't figure why theres a border even though the border property is commented out?

— How to adjust horz space between these nav buttons?

(http://planetrambler.com/index_text.html)

[osgood_]

— Whats the proper way to add say 70px vert. space under the big text/above the first button?

Since your large text is the main text on the page and probably the most descriptive and important you should use an h1 tag instead of just wrapping it in a div tag:

<h1 id="intro-big-text">visual communications<br>brand strategy</h1>

Then you can set the bottom margin on the css selector to 'margin: 0 0 70px 0;' as below:

#intro-big-text {
font-family: 'Brawler', serif;
/*font-family: 'Caveat Brush', cursive;
font-family: 'Kaushan Script', cursive;*/
font-size: 5em;
color: #FFF;
text-align: center;
text-shadow: 1px 1px 6px #433026;
margin: 0 0 70px 0;
align-content: center;
}

— I copied some code  (at the bottom of the css: "btn-group .button") from W3schools for a main nav and can't figure why theres a border even though the border property is commented out?

— How to adjust horz space between these nav buttons?

Add the below css selector:

.btn-group button {
border: none;
margin: 0 5px;
}

Although you should not really be using buttons for a navigation menu you should be using anchor tags or as a navigation is considered a list, you should be using an unordered list:

<nav>
<ul class="mainNav">
<li><a href="#">Home</a></li>
<li><a href="#">Art Direction</a></li>
<li><a href="#">Websites</a></li>
<li><a href="#">Video/Animation</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">Logos</a></li>
<li><a href="#">Client List</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

Then your css for the navigation would be:

.mainNav li {
list-style: none;
margin: 0 0 0 -3px;
padding: 0;
display: inline-block;
}

.mainNav a {
font-size: 13.5px;
text-decoration: none;
color: #000;
background-color: rgba(255, 255, 255, 0.4);
padding: 10px 12px;
}

.mainNav a:hover {
background-color:#D59E5E;
}

You are also missing your opening <head> tag which should go after:

<html lang="en">

Plus you have a redundant <nav> tag just before your closing </header> tag in your code.

The below h1, h2 headings plus the footer at the moment appear to be hidden from view.

 <h1 class="ir">LS Design</h1>   
<h2 class="ir">Main navigation</h2>

The code you are attempting to use is a bit 'incoherent' at the moment.

[TheOriginal150mph]

Thanks so much! 

Trying to reply, the system has become wonky, kept signing me out, authentication errors, wouldn't take my post, accused me of flooding. And no "errors" were "highlighted"...  Only got to post this after numerous tries, waiting hours...

[osgood_]

Trying to reply, the system has become wonky, kept signing me out, authentication errors, wouldn't take my post, accused me of flooding. And no "errors" were "highlighted"...  Only got to post this after numerous tries, waiting hours...

By @TheOriginal150mph

Unfortunately its been like this for months, even I get the post flooding warning - usually when I attempt to copy part of another post and paste it into the one I'm creating and yes I get the correct errors when no errors are highlighted. It is what it is, very poor.

I've previously voiced concern that it's enough to drive users away, especially new users as it's hugley frustrating. Its only on account I'm a sad die hard forum user that I continue to post, otherwise I wouldnt bother if it was my first few experiences.