Code and style of header

  • stlcardsfan

    (@stlcardsfan)


    8 years, 9 months ago

    Hey friends,

    So I know HTML, CSS, and PHP, but I’m by no means an expert, and I’m struggling to “make the turn” from “code regurgitator and copy/paste guy”. It feels like the more I practice, the more I get lost.

    I’m of the understanding that the header is in some ways the most important part of your site, and coding the header the way I want has been an uphill battle. I see a lot of themes that have a phone number, email, etc on a thin nav bar at the top of a site, but for me that doesn’t execute very well. A call to action needs to have a dominant position.

    My problems really have to do with placement. I want my phone number padded in the middle from top to bottom in the header on the righthand side. I want my logo on the lefthand side, and, if need be, something in the middle. I know bootstrap is the way to go, but am I coding “container”, “container=row”, “col-xm-4” in 3 or 4 different divs? I just don’t want to write anything that’s unreadable.

    And here’s my code!!

    
<!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8">

		<meta name="viewport" content="width=device-width, initial-scale=1">

	  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

		<meta name="description" content="Check out my page using a global header and footer." />

		<title>St Louis Cooking blog</title>

		<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.css"/>

		<div class='header'>

</head>

<body>

<header>

<nav>

   <ul>

      <li><a href="">Home</a></li>

      <li><a href="">Services</a></li>

      <li><a href="">Portfolio</a></li>

      <li><a href="">Contact</a></li>

   </ul>

</nav>
<div class="number-wrap">
    <p class="city">Call for a
        <br>Free Consultation:</p>
    <p class="number"><a href="tel:6512000000" class="phone"><font class="number" >(651) 200-0000</font></a>
    </p>
</div>

</header>

</div>

<div class="container-fluid">

    CSS

    
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: right;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color:#4CAF50;
}

.number-wrap a.phone {
    color: red;
    font-size: 27px;
    text-decoration: none;
}
.number-wrap p.city {
    margin: 5px 0 4px 0;
    text-align: center;
    font-size: 14px;
    color: gray;
    text-transform: uppercase;
    line-height: 1.1;
}
.number-wrap p.number {
    text-align: center;
    margin: 0 0 5px 0;
}
.number-wrap {
    margin: 1% 1% 1% 1%;
    float: right;
}

@media screen and (max-width: 760px) {
    .number-wrap {
        margin:1px 5% 0 5%;
        width:90%;
        float:none;
        clear:both;
        position:relative;
        bottom:2px;
    }
}

    Any resources to help would be great. KnowtheCode was okay, but it didn’t give me a way to apply step-by-step, and left me a little lost.

Viewing 3 replies - 1 through 3 (of 3 total)
  • hellheim

    (@hellheim)

    8 years, 9 months ago

    Hi there,

    Could you provide your website url (if possible)?

    Thanks

    Thread Starter stlcardsfan

    (@stlcardsfan)

    8 years, 9 months ago

    I’m working on it locally. Everything is sandwiched at the top :/

    I’m just using this to familiarize myself so I can get better. I see everything I want to do, but I can’t execute! Header, footer, etc. I know how to call functions and loops, but I don’t know how to use that with WP, if that makes any sense. Right now I’m just trying to get everything where I want it on the page. Phone number at the top, contact form to the right side of an image slider, etc.

    Here’s somewhat of an example:

    http://www.arvadaroofing.com

    hellheim

    (@hellheim)

    8 years, 9 months ago

    Try this:

    CSS

    ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: right;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color:#4CAF50;
}

.number-wrap a.phone {
    color: red;
    font-size: 27px;
    text-decoration: none;
}
.number-wrap p.city {
    margin: 5px 0 4px 0;
    text-align: center;
    font-size: 14px;
    color: gray;
    text-transform: uppercase;
    line-height: 1.1;
}
.number-wrap p.number {
    text-align: center;
    margin: 0 0 5px 0;
}
.number-wrap {
    margin: 1% 1% 1% 1%;
    float: right;
}

@media screen and (max-width: 760px) {
    .number-wrap {
        margin:1px 5% 0 5%;
        width:90%;
        float:none;
        clear:both;
        position:relative;
        bottom:2px;
    }
}

#top_strip {float:left;width:100%;}
#logo {float:left;width:88px;}
#logo img {max-width:100%;height:auto;}
#middle_part {float:left;}
nav ul {float:left;width:100%;}

    HTML

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<meta name="description" content="Check out my page using a global header and footer." />
		<title>St Louis Cooking blog</title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
		<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.css"/>
	</head>
	<body>

		<header>
			<div id="top_strip">
			
				<div id="logo"><a href="#" title="logo" alt=""><img src=	"https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/1000px-Google_%22G%22_Logo.svg.png" /></a></div><!-- #logo end -->
			
				<div id="middle_part">
					<h2>This is the middle part of your top strip container.</h2>	
				</div><!-- #middle part end -->
			
				<div class="number-wrap">
					<div class="city">Call for a <br />Free Consultation:</div>
					<div class="number"><a href="#" class="phone">(651) 200-0000</a></div>
				</div><!-- .number-wrap end -->
			
			</div><!-- #top_strip end -->
		
			<nav>
				<ul>
					<li><a href="">Home</a></li>
					<li><a href="">Services</a></li>
					<li><a href="">Portfolio</a></li>
					<li><a href="">Contact</a></li>
				</ul>
			</nav>
		</header>
	</body>
</html>

    Hope it gets you started.

    You could also check https://www.w3schools.com/ and learn css, php, html.

    Thanks

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Code and style of header’ is closed to new replies.