Buttons won’t behave

Contributor ,
May 28, 2021 May 28, 2021

Copy link to clipboard

Copied

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.

 

Views

316

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , May 29, 2021 May 29, 2021
quote

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;
...

Likes

Translate

Translate
Community Expert ,
May 28, 2021 May 28, 2021

Copy link to clipboard

Copied

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.

 

Wappler, the only real Dreamweaver alternative.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 28, 2021 May 28, 2021

Copy link to clipboard

Copied

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;
}
Wappler, the only real Dreamweaver alternative.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
May 28, 2021 May 28, 2021

Copy link to clipboard

Copied

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....

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 29, 2021 May 29, 2021

Copy link to clipboard

Copied

quote

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

Wappler, the only real Dreamweaver alternative.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 29, 2021 May 29, 2021

Copy link to clipboard

Copied

You could try:

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

        .intro-buttons a {
            line-height: 2.25em;
        }
Wappler, the only real Dreamweaver alternative.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
May 29, 2021 May 29, 2021

Copy link to clipboard

Copied

Thank you!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 29, 2021 May 29, 2021

Copy link to clipboard

Copied

quote

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;
}

 

 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
May 29, 2021 May 29, 2021

Copy link to clipboard

Copied

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)

 

 

 

 

 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 29, 2021 May 29, 2021

Copy link to clipboard

Copied

quote

— 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;
}

 

 

quote

— 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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
May 30, 2021 May 30, 2021

Copy link to clipboard

Copied

 

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...Screen Shot 2021-05-30 at 1.07.42 PM.pngScreen Shot 2021-05-30 at 1.08.43 PM.pngScreen Shot 2021-05-30 at 12.23.47 PM.png

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 30, 2021 May 30, 2021

Copy link to clipboard

Copied

LATEST
quote

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines