How to place anchors side by side?

How to place anchors side by side?
0

#1

i want to add a header to my webpage.
how can i place anchors such as home,contact us,portfolio,etc side-by-side?


#2

Not sure what you mean. You could do something like this:

<header><a href="#home">Home</a> <a href="#contact-us">Contact Us</a> <a href="#portfolio">Portfolio</a></header>

That would display side by side (unless you changed that with CSS). Equally, inserting line breaks into the HTML would still leave them side by side, due to HTML collapsing whitespace.


#3

…and if you have an HTML structure like (pseudo code here for a common way to do navy menus):

ul.header-nav
  li
    a Home
  li
    a About
  ...

Just add display: flex to the CSS declaration for .header-nav, its child elements will by default sit side by side.


#4

that worked.
thankyou.


#5

i tried this one,but it is positioning them on each other.


#6

You need to post the actual code; there are a million and one different reasons why it might not work, it’s easier if we can see what you’re doing with the HTML and the CSS


#7

i am new here it is my third day on freecodecamp
,so kindly don’t judge me.


here is the link
i have been using position:relative;
to position things.
is there any easier way?


#8

To display LI tags containing A tags, you can use CSS.
LI tags by default are block type elements. A tags are inline type elements.
Is this what you meant?

nav li {
  display: inline;
}
<ul class='nav'>
  <li><a href="#">Link1</a></li>
  <li><a href="#">Link2</a></li>
</ul>

REF:
The Difference Between “Block” and “Inline”


#9

I understand that.Thanks.


#10

Sorry, I didn’t mean to sound harsh. Just overall positioning wise, I’d avoid putting things in specific places using position: relative: the issue you’ll get is that a web page isn’t like a printed page, it can be any size, so if you position things in very specific places with specific sizes, when the page is resized it won’t work. When I look at it on my desktop, it looks nice, but if I use my phone, almost the whole page is chopped off.

This is kinda the trick with CSS, and one of the reasons it might be a little mindbending at first - you have to kinda let go of the idea that everything will always be a specific size in a specific place, apply style with that in mind. The navigation is a good example: at the minute, the links will look good if the viewport is big enough and the font is that size. But if I use a phone to look at the page, that breaks it, and if I zoom the page, that also breaks it.


#11

so what is the alternative then?
should i make page responsive?
or something else can be done for positioning?


#12

a bit more help needed.
if you would have seen the webpage there are some red boxes,when i added anchor tag to the font-awesome symbols of twitter and all of those- why it gave a separate box for each.?
how can i remove them?


#13

You already have a set of rules for <a> tags. You’ve said that every a tag should be put in a box of a certain size, relatively positioned, with a red background, using the papyrus font etc. You’ve then said every <span> element should be posotioned somewhere else. So the span elements that contain the icons are shifted out of the anchor tags’ position. The two are still linked in the HTML (you can see both things highlighting when you mouse over), but the browser doesn’t really know what to do.

You absolutely cannot [realistically] build websites like this - it’ll take time to get used to how CSS works and how best to use it, but for starters you need to

  1. Structure your HTML sensibly - put the stuff in the header in a <header>, inside that have your main title and the navigation, have <section>s for each section, each with a header block and content blocks, etc etc. For example, you have the page title floating around in the html somewhere after the nav menu, but I can see you want it to be the first element that appears on the page.
  2. Not relatively position every single element on the page - if you literally remove all of the styles, the page will work better than it currently does.
  3. Not use specific rules that apply to every generic element on the page - it is fine to style say <a> tags all a certain colour, remove the text decoration etc. But if you set the specific position in pixels, that means every single <a> tag you use will try to occupy that position, it will never work.
  4. Use less ID selectors: I can see you have specified every single imge with a unique id and then set the position of every single one. Use classes (avoid IDs completely if possible, they aren’t necessary). You can have a single class to style every one of those portfolio images for example.
  5. Learn the difference between block-level elements and inline elements - block level elements like <div>, <header>, <form>, <section> etc go to 100% width automatically: you often don’t need to set the width because they wil already just fill the maximum available width.
  6. Relative posioning normally has some common, specific uses (using it to lay out an entire site is not one of them) - when applied to a parent, you can put positon:absolute on a child and position the child relative to the parent. This is useful for example for your big header image with the text over it - you can put the taglines and the image inside a div, set position:relative on that div, and then use absolute on the tagline elements only (the image will just sit where it it) to move them around relative to the image.

Here is an extremely rough refactor: note I’ve used rem units instead of pixels - 1rem is the root font size (by default 16px), so 2rem is equiv to 32px, .5rem to 8px and so on. I didn’t have time to do the form or the contact links, so the HTML has been written but commented out. Anyway:


#14

thankyou! for doing that much
what about the responsive design?


#15

The refactor is a start: it always fits in the browser window, there are no explicit widths at all on any element except the portfolio/sevices items (and even then, just a case of making each one 25% width). It would need media queries added to change the size/layout of specific items when it gets too small/large for the layout to work. For example, for the header could do something like the following. Note very rough, not tested, but would stack the title and each neav item on top of each other on tiny screens. Then when it gets a bit bigger, it puts the nav items in a row. Then bigger again it puts the tiel and the nav in a row:

.site-header {
  display: flex;
  flex-direction: column;
  padding: 2rem 1rem 0;
}

.site-navigation {
  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 400px) {
  .site-navigation {
    flex-direction: row;
  }
}

@media screen and (min-width: 600px) {
  /* move the title and nav side-by-side: */
  .site-header {
    flex-direction: row;
  }
  /* offset the title: */
  .site-title {
    position: relative;
    bottom: -1.5rem;
  }
}

#16

thankyou finally.
i need to learn a lot more.


#17

Hello Guys,

I am sorry this question is kind of not relevant to the main subject that is being discussed here but I do not know how to attach a picture in the CodePen :frowning: I can see that @rohit3463 managed to attach a picture id=“main-picture” in his Pen but I just don’t know how to do it in my Pens.

Can you please help?

Thank you.
Karol


#18

https://www.w3schools.com/html/html_images.asp

go through this to see how to put an image and its attributes.

if this solves your problem