Nesting Anchor Tags

HTML-CSS
1

Hey guys I really would love to know if this is a recommended approach to getting a prescribed design using HTML and CSS. Is there a better way to do this if I am wrong?

My code looks like this:

<h1>
        SM Appliance Center 
        
        <a href = Q1F-About-Me.html target = myframe>
            <button>Home</button></a>

        <a href = Q1F-update.html target = myframe>
            <button>Update Inventory</button></a>

        <a href = Q2F-inventory.html target = myframe>
            <button>Display Inventory</button></a>
    </h1>

Required display is:
supposed design

My design is:

deviced design
deviced design1166×278 21.1 KB

2

I don’t think you want to put all those anchor tags inside the h1 heading. The h1 heading should just be the text of the heading (SM Appliance Center) and then the links would be a separate block, perhaps wrapped in a <nav>?

To get the heading and links to line up horizontally you could wrap them all in a <div>, or perhaps a <header> and then apply display: flex on that.

3

Thank you @bbsmooth I tried all the suggestions but it alters the expected design.
Using the <nav>, <header> and <div> and styling in CSS (I didn’t use any two at the same time, header, nav is purely for illustration):

header, nav{
    height: 30px;
    display: flex;
    margin-left: 500px;
}

Alters the design to:

using the nav tag
using the nav tag1171×271 20 KB

Even if I try using the margin attribute to style I can’t get the buttons inline with the <h1> element SM Appliance Center. My main concern is how to get the buttons inline with the <h1>

4

I really need to be able to see all of your code in order to help properly. Do you have a live link to this project?

CSS Tricks has an excellent document that explains all the flexbox options available. I think there may be some you will find very helpful.

5

It’s a string of web pages but I’ve been able to put the one we’re discussing in a codepen

Untitled (codepen.io)

6

You’ll most likely want to wrap the <h1> and <nav> in an element (maybe a <header>) and then put display:flex on that element and use other flex properties to get them to line up the way you want.

Also, you should not have a <button> inside of an <a>. Those are links and should just be <a>'s.

7

Heyy @bbsmooth This is what I ended up doing, really sorry about the delayed response. Got caught up with school and project deadlines.

Here’s my new code. I instead made use of <table> to nest the <p> and <button> What do you think?

<body>
<table>
<tr><td rowspan = 3 width = 35%>
  <p>SM Appliance Store</p>
   <img src = sm.png height = 100px weight = 100px>
<td valign = top>
<input type = button value =  "Home"
	onclick = window.open("home.html")>
<td valign = top>
<input type = button value =  "Update Inventory"
        onclick = window.open("update.html","myframe")>
<td valign = top>
<input type = button value =  "Update Inventory 2"
      onclick = window.open("update2.html","myframe")>
<td valign = top>
<input type = button value =  "Display Inventory" 
	onclick = window.open("items.html","myframe")>
</table>

Here’s a view of what the output looks like:

image
image962×265 13.5 KB

8

To be honest, not good. Tables should be used for tabular data, not layout. There is no reason you shouldn’t be able to use flex/grid to do what you want to do.

9

To be honest I’ve been pretty lazy to learn how to properly use the flex/grid display properties. I guess it’s time to take a dive and explore its wonders. I’ll study hard and get back to you on that.

10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.