Jump to content


Photo

Weird issue with stylesheet?


Best Answer jazzman1, 21 September 2013 - 07:28 PM

Try to place a html base tag inside a html head. 

<head>
    <title>TSPV-Websites - Offer</title>
    <link rel="stylesheet" href="css/main_styles.css" />
    <link rel="stylesheet" href="css/fonts.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
   <base href="http://www.tspv-websites.co.uk/">
</head>

Also, when you rewrite links don't use relative paths inside rewriting directory. 

 

For example:

 

You want to rewrite a link, like <a href="./Contact"> to index.php?page=$1 and in this index directory try to set up a relative path like <a href="./Home"> the browser should display the link as - <a href="./Contact/Home", not just ./Home, but that's wrong. Be careful and use absolute paths.

Go to the full post


  • Please log in to reply
8 replies to this topic

#1 Love2c0de

Love2c0de

    Advanced Member

  • Members
  • PipPipPip
  • 366 posts
  • LocationThe Pleiades
  • Age:23

Posted 21 September 2013 - 06:20 PM

Good evening,

 

I've got an 'Offers' page with 3 deals on there. Each deal has it's own link with the URL like this: 

<a href="./Contact/Deal" />Deal 1</a>

<a href="./Contact/Deal" />Deal 2</a>

<a href="./Contact/Deal" />Deal 3</a>

 

The idea is when one of the 3 deal buttons are clicked, I want to send a $_GET value through the URL and populate my textarea on my form with some text relevant to the 'Deal' on my contact page.

 

I am rewriting the URL and only just got the page to load (I was getting a 404 before). Trouble is, my page has no styles applied to it whatsoever. The stylesheet appears in the <head> but none of the elements have any styles applied to them.

 

Here is my Offers page:

<h2 id="offer_intro">Exclusive Offers This Year!</h2>
 
<div id="deals_container">
 
       <div class="deals" id="deal1">
               <h3>Deal 1</h3>
               <h2>40% Off!</h2>
               <p>Guranteed 40% off any website for our second client! Firstly, I will liaise with you and discuss the requirements of your website. I will provide you with the standard price, followed by the price after the deduction of the 40%. This offer includes domain & hosting for 1 year.</p>
 
               <span>Be quick!</span>
 
               <a href="./Contact/Deal">Order!</a>
       </div>
 
       <div class="deals" id="deal3">
                <h3>Deal 3</h3>
                <h2>&pound;50 Logo/Banner Design</h2>
                <p>If you would simply like a new logo or banner designed for your existing website, we provide this service for a very cheap fee of &pound;50 when you order  by 31<sup>st</sup> October 2013. We will create 3 or 4 mock examples and provide you with them all. We make any tweaks which you suggest.</p>
 
                <span>Need a logo?</span>
 
                <a href="./Contact/Deal">Order!</a>
       </div>
 
       <div class="deals" id="deal2">
                <h3>Deal 2</h3>
                <h2>Free Domain &amp; Hosting!</h2>
                <p>Free Domain &amp; Hosting for<span>2 years</span> when you purchase any website. This will be deducted from the overall price of your website. We will provide support in setting up your domain and hosting account, including any email accounts and/or mailing accounts your website will use.</p>
 
                <span>Order Now!</span>
 
                <a href="./Contact/Deal">Order!</a>
       </div>
 
</div>
 
<script>
 
$('.deals button').click(function(){
 
       console.log(this);
 
});
 
 
</script>
 

Here is my .htaccess file:

RewriteEngine on
RewriteBase /
RewriteRule ^/?([a-zA-Z_]+)$ index.php?page=$1 [L,QSA]
RewriteRule ^/?([a-zA-Z_]+)/([a-zA-Z_0-9]+)$ index.php?page=$1&deal=$2 [L]

Obviously something is not right with the second RewriteRule I think because like I said above, it was giving me a 404 and I kept modifying it and I looked at other peoples problems online and figured the 'pattern' but not quite 100%.

 

Getting this error in Chrome Dev Tools:

console.png

 

Has anyone ever come across this problem?

 

Thank you for your time.

 

Kind regards,

 

L2c.


Edited by Love2c0de, 21 September 2013 - 06:23 PM.


#2 Love2c0de

Love2c0de

    Advanced Member

  • Members
  • PipPipPip
  • 366 posts
  • LocationThe Pleiades
  • Age:23

Posted 21 September 2013 - 06:38 PM

I think it's to do with my links not being relative to the path or something because the images and stylesheet are not loading. 

 

Any ideas? Sorry couldn't edit my last post.

 

Thanks

 

L2c.



#3 jazzman1

jazzman1

    Advanced Member

  • Gurus
  • 2,657 posts
  • LocationMississauga, Canada

Posted 21 September 2013 - 07:28 PM   Best Answer

Try to place a html base tag inside a html head. 

<head>
    <title>TSPV-Websites - Offer</title>
    <link rel="stylesheet" href="css/main_styles.css" />
    <link rel="stylesheet" href="css/fonts.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
   <base href="http://www.tspv-websites.co.uk/">
</head>

Also, when you rewrite links don't use relative paths inside rewriting directory. 

 

For example:

 

You want to rewrite a link, like <a href="./Contact"> to index.php?page=$1 and in this index directory try to set up a relative path like <a href="./Home"> the browser should display the link as - <a href="./Contact/Home", not just ./Home, but that's wrong. Be careful and use absolute paths.


Edited by jazzman1, 21 September 2013 - 07:57 PM.


#4 Love2c0de

Love2c0de

    Advanced Member

  • Members
  • PipPipPip
  • 366 posts
  • LocationThe Pleiades
  • Age:23

Posted 22 September 2013 - 04:39 AM

Hi Jazz,

 

Thanks for the reply.

 

I added the base tag and I now have my images loading ok, the only things not loading now are my 2 stylesheets, font.css and main_styles.css  :confused:

 

I will look into the absolute path later as I'll be away soon. Just googled it and played around with {SERVER_NAME} but no luck. However will research later.

 

I'm not quite sure on this line in the console though: http://www.tspv-webs...main_styles.css    

 

The /css/ directory is not within a directory called Contact, it is in the same directory as my main index.php, whereas the actual Contact HTML file is a couple stages above.

 

Thanks again for the reply!

 

Kind regards,

 

L2c.



#5 Love2c0de

Love2c0de

    Advanced Member

  • Members
  • PipPipPip
  • 366 posts
  • LocationThe Pleiades
  • Age:23

Posted 22 September 2013 - 05:00 AM

Good morning again,

 

I added the <base> tag above all my other external files in the <head> and it's working fine now.

 

Thank you very much.

 

Kind regards,

 

L2c.



#6 jazzman1

jazzman1

    Advanced Member

  • Gurus
  • 2,657 posts
  • LocationMississauga, Canada

Posted 22 September 2013 - 07:01 AM

 

I added the <base> tag above all my other external files in the <head> and it's working fine now

 

Good for you :)

 

I completely forgot about it, because the browser reads the content from Top to Bottom and Left to Right ( in normal languages)  :)



#7 jazzman1

jazzman1

    Advanced Member

  • Gurus
  • 2,657 posts
  • LocationMississauga, Canada

Posted 22 September 2013 - 09:58 AM

off: Your background is huge and very heavy to people like me who prefer to browse on the web without any cache. You have to consider using some CSS techniques.



#8 Love2c0de

Love2c0de

    Advanced Member

  • Members
  • PipPipPip
  • 366 posts
  • LocationThe Pleiades
  • Age:23

Posted 22 September 2013 - 01:34 PM

Good evening Jazzy,

 

What would you suggest CSS wise?

 

Should I optimize the image using an online image optimization tool?

 

Thank you for further feedback! All criticism is greatly welcomed!

 

Kind regards,

 

L2c.



#9 jazzman1

jazzman1

    Advanced Member

  • Gurus
  • 2,657 posts
  • LocationMississauga, Canada

Posted 23 September 2013 - 07:02 AM

Good morning gardener :)

 

I'm afraid I'm not the right person in CSS. Just create a new topic thread in the HTML/CSS section, it's free of charge :)

 

Take a look at here and here.






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Cheap Linux VPS from $5
SSD Storage, 30 day Guarantee
1 TB of BW, 100% Network Uptime

AlphaBit.com