Have you ever styling a wordpress header, and then found that header to ignore your CSS styling on lower-level pages? Could really use your help debugging this annoying issue -- thank you in advance!!
I'm creating a simple portfolio site for a friend here: http://sundryspirit.com/
The homepage has a global header atop the page that should be present on every page of the site:
<div id="header">
<div id="header-top">
<div id="logo">
<a href="<?php bloginfo('url'); ?>">
<h1>Sundry & Spirit</h1>
<h2>Burning Man Apparel</h2>
</a>
</div>
<div id="mainNav">
<?php wp_nav_menu(); ?>
</div>
</div>
</div>
And I've thrown some basic styling on this header for now, in the style.css file:
#header {
width: 100%;
height: auto;
background: #e1e1e1;
opacity: 0.75;
margin: 0 auto;
max-width: 960px;
}
#header-top {
height: 50px;
margin: 10px;
position: relative;
padding: 10px;
text-align: center;
}
HERE'S THE ANNOYING ISSUE: The basic header styling is not carrying over onto other pages, like http://sundryspirit.com/gallery/
How can that be if the header it just coming from a header.php file?! Thanks for your help -- my inexperience here is just driving me nutty.
You are using a relative URL to link to your stylesheet:
<link rel="stylesheet" href="wp-content/themes/sundry/style.css" />
Change it to an absolute URL:
<link rel="stylesheet" href="/wp-content/themes/sundry/style.css" />
^
or use get_stylesheet.
Related
This will be an easy question for you to answer. I'm making a Google Clone Homepage, and I'm trying to connect my CSS and HTML. For some reason it isn't working.
My HTML and CSS are in the same folder so that's not the problem. In my HTML sheet, I've already linked to the external CSS stylesheet as well. The HTML code is below.
<style>
<link rel="stylesheet" type="text/css" href="googleduplicate.css"/>
</style>
I'm expecting to see my HTML change because of my CSS, but I don't see that.
You can find my full HTML code: https://codeshare.io/ay3yrw
And full CSS here: https://codeshare.io/GABLnN
link tag is used directly inside the head tag
It must be like this:
<head>
<link rel="stylesheet" type="text/css" href="googleduplicate.css"/>
</head>
I check your code and I found three main reasons why your CSS doesn't work properly.
1. link tag
As many others mentioned, you need to remove the <style> ... </style> tag from the <head> tag and use the <link> tag directly inside of it.
2. Not id but class
Your HTML and CSS have many errors. For example, you are styling in the CSS file:
.top left links {
...
}
Here .top is defined as a class but in your HTML code you defined it as an id, check this line:
<!-- Containing Top Left Links on Nav Bar -->
<div id="top left links">
...
</div>
<!--Containing Top Right Links on Nav Bar-->
<div id="top right links">
...
</div>
Remember that an id should be unique therefore you should change id attributes with class attributes.
3. No white spaces
In your CSS file all your definitions are incorrect:
.top left links {
...
}
From this definition, we know that .top is a class, but left and links are representing tags. And we all know that where is no <left> nor <links> tags they should be represented as classes. Also, remember that you concatenate them when you want to refer to a single element with multiple classes and you separate classes by a white space when you want to refer to a descendant element.
So the correct definition will be without white spaces:
.top.left.links {
...
}
Finally, I did some modification on the CSS file for the .search1 class. Check this code:
/* Google Duplicate CSS */
.top.left.links {
float: left;
color: #718090;
text-align: left;
padding: 30px;
margin: auto;
list-style-type: none;
}
.top.left.links a:hover {
text-decoration: none;
}
.top.right.links {
float: right;
color: #718090;
text-align: right;
padding: 30px;
margin: auto;
list-style-type: none;
}
.top.right.links a:hover {
text-decoration: none;
}
#ham_menu {
height: 24px;
width: 24px;
float: right;
}
.search1 {
background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#f1f1f1));
background-image: -webkit-linear-gradient(top, #f5f5f5, #f1f1f1);
-webkit-border-radius: 2px;
-webkit-user-select: none;
color: #5F6368;
height: 36px;
line-height: 27px;
background-color: #f2f2f2;
border: 1px solid #f2f2f2;
border-radius: 4px;
cursor: pointer;
font-family: arial, sans-serif;
font-size: 14px;
margin: 11px 4px;
min-width: 54px;
padding: 0 16px;
text-align: center;
}
.bottom.left.links,
.bottom.right.links {
list-style-type: none;
color: #718090;
padding: 30px;
margin: auto;
font-size: 13px;
}
.bottom.left.links {
float: left;
}
.bottom.right.links {
float: right
}
.footer {
position: fixed;
min-width: 980px;
z-index: 103px;
height: 64px;
background-color: lightgray;
}
<!--Header Menu of Page -->
<header>
<!-- Containing Top Left Links on Nav Bar -->
<div class="top left links">
About
Store
</div>
<!--Containing Top Right Links on Nav Bar-->
<div class="top right links">
<li>Gmail</li>
<li>Images</li>
<li>Sign In</li>
</div>
</header>
<!--Top Right Ham Menu-->
<img id="ham_menu" src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png" class="right">
<!--Actual Google Image, Search Form, and Buttons-->
<center>
<img src="http://www.google.com/logos/doodles/2019/us-teacher-appreciation-week-2019-begins-4994791740801024-2x.jpg" alt="Happy US Teacher Appreciation Week 2019!" class="center">
<form class="search" input type="text"> </form>
<button class="search1" type="submit" value="Google Search" style="visibility">
Google Search
</button>
<button class="search1">
I'm Feeling Lucky
</button>
<p>We're supporting teachers inspiring the next generation.</p>
</center>
<!--Footer Links-->
<footer>
<div class="bottom left links">
Advertising
Business
</div>
<div class="bottom right links">
<li>Privacy</li>
<li>Terms</li>
</div>
</footer>
Remove the style tag from the beginning and end of the link tag, like the following
<link rel="stylesheet" type="text/css" href="googleduplicate.css"/>
Remove the style tag from the beginning and end of the link tag, like the following
<link rel="stylesheet" type="text/css" href="googleduplicate.css"/>
and in this condition make sure your HTML file and CSS file need to be in same folder.
Please, remove the <script> tag so that you can reference this CSS file.
This website doesn't seem to be using any javascript (besides something for webfont). Yet clicking a link applies a set of css rules. How does it work and what feature(s) of html/css is being used here?
As far as I can tell, data-step attribute seems to be playing some part in this. But I'm not familiar with how this works to produce the desired affects.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Web Design in 4 minutes</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
...
<link rel="stylesheet" type="text/css" href="website.css">
</head>
<body>
<header id="header">
<img id="logo" src="jt.png" alt="JT logo">
<h1>Web Design in 4 minutes</h1>
<p>
by Jeremy Thomas
</p>
</header>
<main>
<section id="start">
<p>Let's say you have a product, a portfolio, or just an idea you want to share with everyone on your <em>own</em> website. Before you publish it on the internet, you want to make it look attractive, professional, or at least <em>decent</em> to look at.</p>
<p>What is the <a class="step" data-step="0" href="#content">first thing</a> you need to work on?</p>
</section>
<section id="content">
<h2>Content</h2>
<p>The purpose of <strong>design</strong> is to enhance the presentation of the content it's applied to. It might sound obvious, but content being the <strong>primary</strong> element of a website, it should not be established as an afterthought.</p>
<p>Written content, like the paragraph you're currently reading, makes up for more than 90% of the Web. Styling this textual content will go a long way.</p>
<p>Let's assume you've already finalised the content you want to publish and just created an empty <code>style.css</code> file, what is the <a class="step" data-step="1" href="#centering">first rule</a> you can write?</p>
</section>
<section id="centering">
<h2>Centering</h2>
<p>Long lines of text can be hard to parse, and thus hard to <strong>read</strong>. Setting a limit of characters per line greatly enhances the readability and appeal of a wall of text.</p>
<pre><span class="selector">body</span> {
<span class="attribute">margin</span>: <span class="number">0</span> auto;
<span class="attribute">max-width</span>: <span class="number">50</span><span class="unit">em</span>;
}</pre>
<p>After styling the text <em>blocks</em>, what about styling the <a class="step" data-step="2" href="#font-family">text itself</a>?</p>
</section>
<section id="font-family">
<h2>Font family</h2>
<p>The browser's font defaults to <code>"Times"</code>, which can look unappealing (mostly because it is the "unstyled" font). Switching to a <strong>sans-serif</strong> font like <code>"Helvetica"</code> or <code>"Arial"</code> can vastly improve the look of your page.</p>
<pre><span class="selector">body</span> {
<span class="attribute">font-family</span>: <span class="string">"Helvetica"</span>, <span class="string">"Arial"</span>, sans-serif;
}</pre>
<p><em>If you want to stick with a serif font, try <code>"Georgia"</code>.</em></p>
<p>While this makes the text more <em>appealing</em>, let's also make it <a class="step" data-step="3" href="#spacing">more readable</a>.</p>
</section>
...
CSS
/* Base styles */
a strong {
color: inherit;
}
hr {
background: none;
border: none;
border-bottom: 1px solid #d8dee9;
}
img {
height: auto;
max-width: 100%;
}
pre {
overflow: auto;
white-space: pre-wrap;
}
footer {
align-items: center;
display: flex;
justify-content: center;
margin-top: 4em;
text-align: center;
}
/* Initial state */
#visited {
background-color: white;
bottom: 0;
color: white;
display: block;
left: 0;
padding: 1em;
position: fixed;
right: 0;
text-align: center;
}
#visited:visited {
background-color: #e81c4f;
}
#logo,
section,
footer {
display: none;
}
#start {
display: block;
}
/* 00 Content */
html.step0 #content {
display: block;
}
/* 01 Centering */
html.step1 #centering {
display: block;
}
html.step1 header,
html.step1 main {
margin: 0 auto;
max-width: 50em;
}
...
The website is working on href and id concept. (same page navigation)
http://jgthms.com/web-design-in-4-minutes/
Example:
go to id
<div style="margin-top:2000px;"></div>
<a id="id">id</a>
This refers to same page navigation. By default the content is display:none and on click of it, it is visible.
Hope it helps you.
Cheers!
I'm new in html and css so i have a question.
I am messing around with some stuff but after placing some images on my page i can't click on my links anymore.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<title>Rijschool Houben</title>
</head>
<body>
<div id="header"></div>
<div id="header-pic"><img src="image/test.png"></div>
<p>
<div id="nav-bar">
<ul>
<li>|Home|</li>
<li>Info|</li>
<li>Prijzen|</li>
<li>Acties|</li>
<li>Machtiging|</li>
<li>Theorie|</li>
<li>Begeleid rijden|</li>
<li>Bromfiets|</li>
<li>Contact|</li>
</ul>
</div>
</p>
<p>
<div id="icon-main">
<i class="fa fa-mobile" style="font-size:28px;"></i><a>046-4524501</a><br />
<i class="fa fa-paste" style="font-size:18px;"></i><a>raymond#rijschoolhouben.nl</a><br />
<i class="fa fa-facebook-official" style="font-size:20px;"></i><a>Volg ons op Facebook!</a>
</div>
</p>
<p>
<div id="img-1">
<img src="image/1.jpg" alt="Scooter" width="330px" height="400px"/>
</div>
<div id="img-2">
<img src="image/2.jpg" alt="Geslaagde 1" width="337px" height="400px"/>
</div>
<div id="img-3">
<img src="image/3.jpg" alt="Geslaagde 2" width="337px" height="400px"/>
</div>
<div id="img-4">
<img src="image/4.jpg" alt="Geslaagde 3" width="337px" height="400px" />
</div>
<div id="img-5">
<img src="image/5.jpg" alt="Geslaagde 4" width="337px" height="400px" />
</div>
<div id="img-6">
<img src="image/6.jpg" alt="Geslaagde 5" width="337px" height="400px" />
</div>
</p>
</body>
</html>
CSS:
div#header{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
background-color: white;
}
div#header-pic{
position: fixed;
height: 50px;
left: 500px;
}
div#nav-bar{
position: fixed;
padding-top: 130px;
left: 0;
width: 100%;
white-space: nowrap;
}
div#nav-bar ul{
list-style: none;
text-align: center;
background-color: #323232;
padding: 10px 0;
}
div#nav-bar li{
display: inline;
}
div#nav-bar li a{
text-decoration: none;
color: white;
padding: 14px 16px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
div#icon-main{
position: fixed;
color: #323232;
padding: 10px;
}
div#icon-main i{
padding: 5px;
}
div#icon-main a{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
div#img-1 {
position: fixed;
left: 0;
padding-top: 184px;
width: 100%;
}
div#img-2 {
position: fixed;
padding-top: 184px;
padding-left: 255px;
}
div#img-3 {
position: fixed;
padding-top: 184px;
padding-left: 915px;
}
div#img-4 {
position: fixed;
padding-top: 184px;
padding-left: 585px;
}
div#img-5{
position: fixed;
padding-top: 184px;
padding-left: 1245px;
}
div#img-6 {
position: fixed;
padding-top: 184px;
padding-left: 1575px;
}
i know the code is bad but i hope someone can help me!
Here is a fiddle.
-Ryan
I looked at your external code. Please add your HTML and CSS to your question in Stack Overflow.
From the external HTML you have the following code:
<a>046-4524501</a>
Which does not work as a link.
You have this code
Home
That works as you would expect it to.
Change this line:
<a>046-4524501</a>
to
046-4524501
Where the href="Where you want the link to go".
It's all about the value for "href"
I did notice you are doing non-responsive html which means it is not mobile friendly or will look the same in smaller browser windows.
Your code is messy but your doing okay.
First off wrap everything you are putting in the header in the header div
The images are floating up to the top over your nav due to the position:fixed
Remove all the empty <p></p> between your div's
Use floats on your images and width of a percentage of 100% plus wrap them in a container/div
If you need me to I can see if I can redo all your html and CSS but think for you would learn better to try it out for yourself.
You could always go look at the HTML5 boilerplate out there and use them to guide you on how to construct good code.
I see that you are trying to create a row of images. Instead of using a system of DIVs why don't you use the more flexible (and more responsive) structure of a list?
Then you can use float: for lining them up in a row and basic CSS to give them sizes. The images will be specified as a background for these li elements (better practice).
Like this: http://codepen.io/Attrexx/pen/KVvwXP
You are placing divs containing the images using padding. That's why you can not use links in the menu. Div blocks cover your links.
Try using something like:
selector {
position: absolute; /* or `fixed` like in your css; see below*/
top: 100px; /* pixels from the top */
left: 100px; /* pixels from the left */
/* you can also use `bottom` and `right` */
}
For example:
div#img-3 { /* or just `#img-3`; see below */
position: absolute;
top: 184px;
left: 915px;
}
Check this w3 schools article for more information on positioning.
Not related to the question:
If you are using CSS's id selector (#), I suggest not to use element selector (e.g. div). So rather than div#img-3 try using just #img-3.
Try avoiding using id selectors at all. You can use class rules, and happily after some time they will result in saving you a lot of work.
If you are using HTML5 then try using semantic elements.
Avoid using fixed position when you don't need to (your page is an example of such page).
Paragraphs (p) shouldn't be used in the same way as div. It may result in bad habit for semantic sites.
Rather than using positioning (position), experiment with float or different display types (e.g. inline-block). Use it only when it is really needed.
Read about HTML Responsive Web.
I apologize in advance if this question has already been answered but I'm having the hardest time making my logo linkable here: http://testsite.brentthelendesign.com/. This is a WordPress "Skeleton" based site. Any help would be greatly appreciated! The code is below.
HTML
<header class="left full header-bg">
<div class="container">
<div class="container-inside left">
<div class="sixteen columns">
<h1 class="logo abs"><a href="<?php echo get_option('home'); ?>"/></a></h1>
<nav>
<?php st_navbar(); ?>
</nav>
</div>
</div>
</div><!--container-->
</header>
CSS
h1.logo {
left:50%;
margin-left:-80px;
float: none;
text-align: center;
}
h1.logo a {
background:url(images/logo.png) no-repeat;
width:181px;
height:127px;
display:block;
text-indent:-9999px;
float: none;
text-align: center;
cursor: pointer;
}
.header-bg {
height: 190px;
background: url(images/bg-header.png) repeat;
}
> using this css you can display your logo with your home url.
h1.logo {
float: none;
left: 50%;
margin-left: -80px;
text-align: center;
z-index: 10000;
}
h1.logo a img{
display:block;
}
You're template is set up to use the WP_HOME value as the link, which is configurable in the Wordpress Admin under Settings > General. You can also override this value by explicitly setting the constant values in your wp-config.php:
define('WP_HOME', 'http://example.com');
define('WP_SITEURL', 'http://example.com');
You can also just edit the template file if you want to hardcode it (which is more efficient if it's never going to change), replace <?php echo get_option('home'); ?> with your desired URL.
Can you try instead of setting your logo as a background image through css to put it here?
<h1 class="logo abs">
<a href="<?php echo get_option('home'); ?>"/>
<image src="">
</a>
</h1>
Try this and tell me how it goes.
Images are not appearing on my local host. Here is HTML code. I've tried several variations to display te images. Twitter Bootstrap is used. Any help would be greatly appreciated.
<div class="media">
<a class="pull-left" href="">
<img class="media-object" src="/img/grads.jpg/64x64">
</a>
<div class="media-body">
<h4 class="media-heading">Collaborate with students at other Universities</h4>
<p>Join your classes and work with other students on studying without having to meet up.</p>
</div>
</div>
<div class="media">
<a class="pull-left" href="">
<img class="media-object" src="grads.jpeg/64x64">
</a>
<div class="media-body">
<h4 class="media-heading">Meet new friends you're in class with</h4>
<p>Pick who you want to be a stranger in your own classes. School is social and so is moreo. : )</p>
</div>
</div>
Here is the CSS code. Not sure what I'm doing wrong.
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 10px;
padding-bottom: 20px;
}
/* Custom container */
.container-narrow {
margin: 0 auto;
max-width: 700px;
}
.container-narrow > hr {
margin: 30px 0;
}
/* Main marketing message and sign up button */
.jumbotron {
margin: 30px 0;
text-align: center;
}
.jumbotron h1 {
font-size: 72px;
line-height: 1;
}
.jumbotron .btn {
font-size: 15px;
padding: 10px 20px;
}
/* Supporting marketing content */
.marketing {
margin: 5px 0;
}
.marketing p + h4 {
margin-top: 14px;
}
</style>
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
Try to view source and check for the paths of the images. Since you have used relative paths, Check whether the correct path for the image is taken or not on local
Verify your images path. it should end with file-name and its proper extension.
See you have,
<img class="media-object" src="grads.jpeg/64x64">
This could be like this, i think;
<img class="media-object" src="/64x64/grads.jpeg">
Now, if the image (grads.jpeg) is available in root's 64x64 folder, that will definitely render.
use Bootstrap image for image loading and media object use data-src attribute not src but i did not see any example of loading image with direct image URL Bootstrap Media object
EDIT
i think this tag refers online url, i am not sure. take a look at this placehold this URL is utility site which re-size the hosted image just like bootstrap example