Element not in right space

I can probably do this, but I feel like I’m digging myself into a hole here with my css and it isnt clean code. the website is http://www.elliottsportswear.biz/. I’m trying to get the spans that have the phone number to the bottom right of the header. How would you guys recommend me fixing my CSS?

Hi @Popo. Why do you have the telephone number wrapped in a <span>? Spans are inline elements, so they don’t can’t be moved around like block elements can. Normally a span is used to target something like a few words within a paragraph to style them differently.

Why don’t you use <div> or some other semantically correct block level element, and then you can position the phone number like you want.

hi,

that’s not really the issue here. I can change them to block level elements. I would prefer not to float and margin them into place. I was hoping to get other suggestions here. Any suggestions on how to restructure my HTML so I don’t have to hack it into place?

-popo

Yes, but if you want to restructure your html, my suggestion is that this is probably not a proper use of <span> (some of the more expert people here might correct me on this) and the first thing you should do is replace that tag with a more appropriate one. Then you can deal with the CSS needed to position (not ‘hack’) your element where you want it to be.

I could simply write in css to display:block. That is not the issue. However since you think it is, I just added display:block to the css.

Popo, with the understanding that I don’t know how you want the top of your page to look, let me suggest that you change that block to “inline-block” and add a yellow dotted border around the header spans.

header span {
    display:inline-block;
    outline:1px dotted yellow;
}

Neither of those properties are likely to help the issue because we don’t know how you want the page to look or behave, but they will help you see where the elements are placed on the page. Just for fun, add the outline first and look for the yellow lines, then change block to inline-block and see what happens. I often use outlines to help me see what is happening on a page because outlines do not affect the layout.

When you can give us an idea how the page should look and behave, perhaps we can be more helpful.

I will upload an image of the PSD. The link is at elliottsportswear.biz/homepage-1.jpg

The CSS is updated

You don’t need to upload the PSD if we can access it online.

the psd was in my email, transfered to my desktop and the file manager. I used GIMP to turn it into a JPG and the image of how its supposed to look is in my previous reply. Check out that link

I did and it looks good. Thank you.

I’m confused. Are we talking the header or the contact ?

The contact phone number and the shopping cart link needs to go int he bottom right of the header. Please refer to the image of how it is supposed to look in my previous replies if you are confused

Ah, OK, I’ve figured it out. For some reason I couldn’t scroll to the top of the image and only saw the phone no. under “Facebook”. zooming out I see

so it is the header.

<header>
<ul class="login">
 <li><a href="http://www.elliottsportswear.biz">Home</a></li>
 <li><a href="http://www.elliottsportswear.biz">Log In</a></li>
</ul>
<div id="search">
  <script type="text/javascript" async="" src="https://cse.google.com/cse.js?cx=009232452708407050088:lahvihhbiyq"></script>
  <script>
  .....
  </script>
  <div id="___gcse_0" dir="ltr">
    <form class="gsc-search-box gsc-search-box-tools" accept-charset="utf-8">
    .....
    </form>
  </div>
</div>
<a class="logo" height="150" width="350" href="http://www.elliottsportswear.biz">
  <img title="ElliottSportsWear" alt="Logo" src="images/colorlogo.png">
</a>
<h1>Custom Embroidery &amp; Screenprinting</h1>
<span><a href="#" title="Shopping Cart">Shopping Cart</a></span>
<span>Give us a call: 410-663-3966</span>
</header>

The first thing I would do is lose the <span> tags there.

True, you can style them as block level elements, indeed I could write mark-up using no div tags at all

span.div { display: block; }
...
<span class="div"></span>

But I would not use an inline tag as a block level tag when there is an appropriate block level tag that could be used.

I changed them to divs

This has much to do with design decision, which I confess I’m not strong at.

From what I see header has two areas, “top” and “bottom”

Top has two areas, “links” and “search”

Bottom has three areas “logo”, “h1” and “right”

Right has two areas “cart” which is above “number”

At the risk of div-itis, I’d be tempted to partition those into div tags something like

<header> 
  <div class="top"> 
    <ul clas="links"> ... </ul> 
    <div class="search"> ... </div> 
  </div> 
  <div class="bottom"> 
    <a class="logo"> ... </a> 
    <h1> ... </h1>
    <div class="right"> 
      <a class="cart"> ... </a> 
      <p class="phone"> ... </p>
    </div> 
  </div> 
</header> 

or maybe

    <p class="right"> 
      <a class="cart"> ... </a> 
      ... <span class="phone"> ... </span>
    </p> 

But please wait for someone better at Design before making any major changes as I could be way off the mark here.

Thanks, I’ll think about your input and wait for others. I didn’t design this site, just coding it for a friend. I havent coded in a number of years so my code practices are probably outdated. I’m learning that floating and margining a lot of stuff is outdated! Where did the time go when I would scold others for using tables for everything :joy:

I would do it roughly like this.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1">

<style type="text/css">
html, body {
	margin:0;
	padding:0
}
body {
	background-color:white;
	color: #373939;
	font-family: "Cabin";
}
.header {
	background-color: #373939;
	color:#fff;
	padding:1px 0;
}
.inner {
	max-width:1280px;
	margin:auto;
	padding:0 10px;
}
.login {
	float:left;
	color:#fff;
	margin:20px 0 30px;
	padding:0;
	list-style:none;
}
.login li, .login b {
	display:inline-block;
	margin:0 5px 0;
	vertical-align:middle;
}
.login b {margin-right:0}
.login a, .header-base a {
	color:#fff;
}
.search {
	float:right;
	margin:20px 0 30px;
}
.header-base {
	display:table;
	width:100%;
	clear:both;
}
.tc {
	display:table-cell;
	vertical-align:top;
}
h1.tc {
	text-align:center;
	color:#fff;
	margin:0;
}
.header-base .tc {
	vertical-align:middle;
	padding:0 0 1px;
}
.header-right {
	text-align:right;
}
.header-right p{margin:0;}
.header-right a, .header-right b{display:block}
.header-right a{margin:0 0 10px}
.logo img{max-width:100%;height:auto}
@media screen and (max-width:800px){
	.header-base .tc{display:block;text-align:center;}	
	.header-right a, .header-right b{display:inline-block}
	h1.tc{margin:0 0 10px;}
}
@media screen and (max-width:400px){
	ul.login,.search{float:none;text-align:center;}
}


</style>
</head>
<body>
<header class="header">
  <div class="inner">
    <ul class="login">
      <li><a href="http://www.elliottsportswear.biz">Home</a> <b>|</b></li>
      <li><a href="http://www.elliottsportswear.biz">Log In</a></li>
    </ul>
    <div class="search">
      <label for="Search"></label>
      <input type="text" name="search" id="search">
      <input type="submit" name="submit" id="submit" value="submit">
      </form>
    </div>
    <div class="header-base"> <a class="logo tc" href="http://www.elliottsportswear.biz"><img title="ElliottSportsWear" alt="Logo" src="http://www.elliottsportswear.biz/images/colorlogo.png" width="350" height="150"></a>
      <h1 class="tc">Custom Embroidery & Screenprinting</h1>
      <div class="header-right tc">
        <p><a href="#" title="Shopping Cart">Shopping Cart</a> <b>Give us a call: 410-663-3966</b></p>
      </div>
    </div>
  </div>
</header>
</body>
</html>

Basically you have two sections: Top and bottom header sections.

Then you have the top section in two parts which can be floated left and right.

The header base is in 3 sections and you can use the css display:table properties to place them easily in 3 units.

Tweak to suit :slight_smile:

Thanks a bunch paul! I’m going to study this code and see how you did it differently from mine. You’re as helpful as I remember!

PS- I love the css quizzes you used to do! I’m glad you included mobile code in here, that is by far my weakest part with CSS, I need to learn how to code mobile

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