- This topic is empty.
August 22, 2014 at 9:41 am #180277
I am creating the beginnings of my website with new html5 and css3 elements. However, i am having a problem with my head title not keeping inline with my logo.
See jsfiddle here:
Additionally why is the anchor tag sat the way it is and not expanded to the size of the span it is contained in.August 22, 2014 at 10:44 am #180278
Your images are not displaying in your fiddle. Remember to use fully qualified URLs (and that
http://localhostis not reachable over the internet).
i am having a problem with my head title not keeping inline with my logo.
h1uses block display by default, not inline.
why is the anchor tag sat the way it is and not expanded to the size of the span it is contained in.
In your fiddle, the anchor element is the same size as its containing span.
~ ~ ~ ~ ~ ~ ~ ~ ~ ~
You have lots of seemingly unnecessary markup. Is there a reason you have so many wrapper elements? in most cases, they are unneeded, along with all of your declared heights and widths.
<header> <nav> <!-- nav items --> </nav> <h1> <a href=#><img src="your/logo.png"></a> My Site Name </h1> </header>
I highly recommend using
inline-blockinstead of floats for not-actually-floating layouts (e.g., menu items). Likewise, you might want to look into normalize.css instead of using a css reset (resets create a lot of extra work and are often counter-productive). These decisions are up to you, however.August 22, 2014 at 10:48 am #180279
When i change span to display:inline-block the text sits in the middle of the bottom border :/ it has something to do with the image.August 22, 2014 at 10:57 am #180281
That does not happen when I try… however:
- I was suggesting using
inline-blockfor the menu items.
- Is there a reason you are wrapping your logo and title in
spans? there doesn’t seem to be. It would be much simpler to just put the logo* and title inside the
h1element. They wouldn’t need
* semantically, it would be better to instead “make space” (e.g., via padding) for the logo and define it as a background image on the
h1, rather than using an
imgelement. But if this concept confuses you, don’t worry about it right now.
Have you looked at the pen I made for you?August 22, 2014 at 11:08 am #180282
I have looked at the pen but, with no offense you have gone on a tangent than what i wanted :) I have 2 nav elements for a reason. Obviously i havent implemented it yet but i will be.August 22, 2014 at 11:15 am #180283
Check the Title now that the image is showing. You can see what i mean about the element sitting halfway inbetween the line.August 22, 2014 at 12:06 pm #180289
I have 2 nav elements for a reason.
In the fiddle you originally posted there is only one
If you need two, that’s fine. But it doesn’t address my question about why you have so many wrapper elements, and whether those are needed.
see what i mean about the element sitting halfway inbetween the line.
inline-blockhas a vertical alignment of “baseline” by default, meaning it will align with the item next to it on the same “line” the the text sits on. You can change this by setting
Again, however, note that I was not actually suggesting you use inline-block on the heading and logo. Is there a reason you are using such an elaborate structure? This
<section id="header-logo"> <span><a href=""><img src="http://i.imgur.com/M5GIqGb.png"/></a></span> <span id="header-title"><h1>My Site Name</h1></span> </section>
…could easily be this instead:
<section id=header-logo> <a href=#><img … ></a> <h1 id=header-title>My Site Name</h1> </section>
<h1 id=header-logo> <a href=#><img … ></a> My Site Name </h1>
without compromising your current design, and it would be much cleaner (and more maintainable) markup.August 22, 2014 at 12:43 pm #180295
I agree your method is better, i still can’t fix this original issue of mine.
I have tried changing vertical align to middle, see below.
Click HereAugust 22, 2014 at 12:48 pm #180298
bottomworked best when I tried. But I am not recommending you use inline-block for the title at all.August 22, 2014 at 12:53 pm #180299Paulie_DMember
It should also be noted that block level elements such as
h1should not be placed inside inline elements like
It will fail validation for that and many other reasons.
- I was suggesting using
- The forum ‘CSS’ is closed to new topics and replies.