|
Cheat Engine The Official Site of Cheat Engine
|
View previous topic :: View next topic |
Author |
Message |
Lorrenzo Moderator Reputation: 4
Joined: 02 Jun 2006 Posts: 3744
|
Posted: Mon Aug 23, 2010 4:47 pm Post subject: CSS sidebar help |
|
|
Ok, so. I want to take this pre-made CSS template and change it just a bit.
I want to make the sidebar it's own file I guess?
I'm going to have a lot of pages, but I don't want to have to change the sidebar on every page.
I just want to be able to change one file and have it change.
Is this possible and how can I do it?
I don't really know CSS.. I can change some things just by common sense and reading the file, but I can't do everything.
Would I even use CSS? Haha.
Any help is appreciated!
File : http://rapidshare.com/files/414730283/exposure_2.zip
_________________
LAWLrrenzolicious |
|
Back to top |
|
|
Madman I post too much Reputation: 1
Joined: 04 May 2006 Posts: 3978
|
Posted: Wed Aug 25, 2010 5:24 am Post subject: |
|
|
What you need to learn about is PHP. You can essentially treat the page like a program that is accessing multiple resources; IE the sidebar, header, content, footer, etc. Basically it is modularized web development that you want.
_________________
|
|
Back to top |
|
|
CrisNMP Fun Supervisor Reputation: 16
Joined: 11 Apr 2007 Posts: 4649
|
Posted: Wed Aug 25, 2010 8:03 am Post subject: |
|
|
Replace
<!-- start sidebar -->
**
<!-- end sidebar -->
with
Code: | <?php include "sidebar.html"; ?> |
then make in the same directory sidebar.html, add what you removed in it.
Code: |
<!-- start sidebar -->
<div id="sidebar">
<ul>
<li id="search" style="background: none;">
<form id="searchform" method="get" action="">
<div>
<input type="text" name="s" id="s" size="15" />
<br />
<input type="submit" value="Search" />
</div>
</form>
</li>
<li id="categories">
<h2>Categories</h2>
<ul>
<li><a href="#">Lorem Ipsum</a> (1) </li>
<li><a href="#">Uncategorized</a> (4) </li>
</ul>
</li>
<li>
<h2>Lorem Ipsum Dolor</h2>
<ul>
<li><a href="#">Nulla luctus eleifend purus</a></li>
<li><a href="#">Praesent scelerisque </a></li>
<li><a href="#">Ut nonummy rutrum sem</a></li>
<li><a href="#">Pellentesque tempus nulla</a></li>
<li><a href="#">Fusce ultrices fringilla metus</a></li>
<li><a href="#">Praesent mattis condimentum </a></li>
</ul>
</li>
<li>
<h2>Lorem Ipsum Dolor</h2>
<ul>
<li><a href="#">Nulla luctus eleifend purus</a></li>
<li><a href="#">Praesent scelerisque </a></li>
<li><a href="#">Ut nonummy rutrum sem</a></li>
<li><a href="#">Pellentesque tempus nulla</a></li>
<li><a href="#">Fusce ultrices fringilla metus</a></li>
<li><a href="#">Praesent mattis condimentum </a></li>
</ul>
</li>
<!---<li>
<h2>Lorem Ipsum Dolor</h2>
<ul>
<li><a href="#">Nulla luctus eleifend purus</a></li>
<li><a href="#">Praesent scelerisque </a></li>
<li><a href="#">Ut nonummy rutrum sem</a></li>
<li><a href="#">Pellentesque tempus nulla</a></li>
<li><a href="#">Fusce ultrices fringilla metus</a></li>
<li><a href="#">Praesent mattis condimentum </a></li>
</ul>
</li>
<li>
<h2>Lorem Ipsum Dolor</h2>
<ul>
<li><a href="#">Nulla luctus eleifend purus</a></li>
<li><a href="#">Praesent scelerisque </a></li>
<li><a href="#">Ut nonummy rutrum sem</a></li>
<li><a href="#">Pellentesque tempus nulla</a></li>
<li><a href="#">Fusce ultrices fringilla metus</a></li>
<li><a href="#">Praesent mattis condimentum </a></li>
</ul>
</li> --->
</ul>
</div>
<!-- end sidebar --> |
_________________
BENBENBENBENBENBENBENBEN |
|
Back to top |
|
|
Lorrenzo Moderator Reputation: 4
Joined: 02 Jun 2006 Posts: 3744
|
Posted: Wed Aug 25, 2010 3:54 pm Post subject: |
|
|
Mhk, thank you.
I figured I'd have to do some PHP.
So, I threw that code with some normal html tags in the sidebar.html file, and got it looking decent. Well, I think.
Code for that file to get something --
Code: | <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Exposure by Free Css Templates</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="default.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<!-- start sidebar -->
<div id="sidebar">
<ul>
<li id="search" style="background: none;">
<form id="searchform" method="get" action="">
<div>
<input type="text" name="s" id="s" size="15" />
<br />
<input type="submit" value="Search" />
</div>
</form>
</li>
<li id="categories">
<h2>Categories</h2>
<ul>
<li><a href="#">Lorem Ipsum</a> (1) </li>
<li><a href="#">Uncategorized</a> (4) </li>
</ul>
</li>
<li>
<h2>Lorem Ipsum Dolor</h2>
<ul>
<li><a href="#">Nulla luctus eleifend purus</a></li>
<li><a href="#">Praesent scelerisque </a></li>
<li><a href="#">Ut nonummy rutrum sem</a></li>
<li><a href="#">Pellentesque tempus nulla</a></li>
<li><a href="#">Fusce ultrices fringilla metus</a></li>
<li><a href="#">Praesent mattis condimentum </a></li>
</ul>
</li>
<li>
<h2>Lorem Ipsum Dolor</h2>
<ul>
<li><a href="#">Nulla luctus eleifend purus</a></li>
<li><a href="#">Praesent scelerisque </a></li>
<li><a href="#">Ut nonummy rutrum sem</a></li>
<li><a href="#">Pellentesque tempus nulla</a></li>
<li><a href="#">Fusce ultrices fringilla metus</a></li>
<li><a href="#">Praesent mattis condimentum </a></li>
</ul>
</li>
</ul>
</div>
<!-- end sidebar -->
</body>
</html> |
And this is my index file, but it doesn't display the sidebar.. I think I'm an idiot. >.>
Code: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
Title : Exposure
Version : 1.0
Released : 200800909
Description: A Web 2.0 design with fluid width suitable for blogs and small websites.
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Exposure by Free Css Templates</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="default.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<!-- start header -->
<div id="header">
<div id="logo">
<h1><a href="#">Exposure</a></h1>
<p><a href="http://www.freecsstemplates.org/">By Free CSS Templates</a></p>
</div>
<div id="menu">
<ul>
<li class="current_page_item"><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a hfre="links.html">Links</a></li>
<li><a href="pics.html">Photos</a></li>
<li class="last"><a href="videos.html">Videos</a></li>
</ul>
</div>
</div>
<!-- end header -->
<!-- start page -->
<div id="page">
<!-- Start Sidebar-->
<?php include "sidebar.html"; ?>
<!--End Sidebar -->
<!-- start content -->
<div id="content">
<div class="post">
<div class="title">
<h2><a href="#">About this Template</a></h2>
<p><small>Posted on August 20th, 2007 by <a href="#">Free CSS Templates</a></small></p>
</div>
<div class="entry">
<p>This is <strong>Exposure</strong>, a free, fully standards-compliant CSS template designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>. This free template is released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attributions 2.5</a> license, so you're pretty much free to do whatever you want with it (even use it commercially) provided you keep the links in the footer intact. Aside from that, have fun with it :)</p>
<p>This template is also available as a <a href="http://www.freewpthemes.net/preview/exposure">WordPress theme</a> at <a href="http://www.freewpthemes.net/">Free WordPress Themes</a>.</p>
</div>
<p class="links"><a href="#" class="more">Read More</a> <a href="#" class="comments">No Comments</a></p>
</div>
<div class="post">
<div class="title">
<h2><a href="#">Etiam rhoncus volutpat</a></h2>
<p><small>Posted on August 20th, 2007 by <a href="#">Free CSS Templates</a></small></p>
</div>
<div class="entry">
<p>Maecenas pede nisl, elementum eu, ornare ac, malesuada at, erat. Proin gravida orci porttitor enim accumsan lacinia. Donec condimentum, urna non molestie semper, ligula enim ornare nibh, quis laoreet eros quam eget ante. Aliquam libero. Vivamus nisl nibh, iaculis vitae, viverra sit amet, ullamcorper vitae, turpis. Aliquam erat volutpat. Vestibulum dui sem, pulvinar sed, imperdiet nec, iaculis nec, leo. Fusce odio. </p>
<p>Etiam arcu dui, faucibus eget, placerat vel, sodales eget, orci. Donec ornare neque ac sem. Mauris aliquet. Aliquam sem leo, vulputate sed, convallis at, ultricies quis, justo. Donec nonummy magna quis risus. Quisque eleifend. Phasellus tempor vehicula justo. Aliquam lacinia metus ut elit. Suspendisse iaculis mauris nec lorem.<br />
</p>
</div>
<p class="links"> <a href="#" class="more">Read More</a> <a href="#" class="comments">No Comments</a> </p>
</div>
<div class="post">
<div class="title">
<h2><a href="#">Praesent condimentum</a></h2>
<p><small>Posted on August 20th, 2007 by <a href="#">Free CSS Templates</a></small></p>
</div>
<div class="entry">
<p>Etiam arcu dui, faucibus eget, placerat vel, sodales eget, orci. Donec ornare neque ac sem. Mauris aliquet. Aliquam sem leo, vulputate sed, convallis at, ultricies quis, justo. Donec nonummy magna quis risus. Quisque eleifend. Phasellus tempor vehicula justo. Aliquam lacinia metus ut elit. Suspendisse iaculis mauris nec lorem.</p>
<ol>
<li><a href="#">Integer sit amet pede vel arcu aliquet pretium.</a></li>
<li><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li>
<li><a href="#">Phasellus nec erat sit amet nibh pellentesque congue.</a></li>
<li><a href="#">Pellentesque quis elit non lectus gravida blandit. <br />
</a></li>
</ol>
</div>
<p class="links"><a href="#" class="more">Read More</a> <a href="#" class="comments">No Comments</a> </p>
</div>
<br style="clear: both;" />
</div>
<!-- end content -->
<br style="clear: both;" />
</div>
<!-- end page -->
<!-- start footer -->
<div id="footer">
<p class="links">
<a href="#" class="rss" title="Subscribe to entries web feed">Entries (<abbr title="Really Simple Syndication">RSS</abbr>)</a>
<a href="#" class="rss" title="Subscribe to comments web feed">Entries (<abbr title="Really Simple Syndication">RSS</abbr>)</a>
<a href="http://validator.w3.org/check/referer" class="xhtml" title="This page validates as XHTML">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer" class="css" title="This page validates as CSS">Valid <abbr title="Cascading Style Sheets">CSS</abbr></a>
</p>
<p class="legal">
©2007 Exposure. All Rights Reserved.
•
Design by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>
•
Icons by <a href="http://famfamfam.com/">FAMFAMFAM</a>. </p>
</div>
<!-- end footer -->
</body>
</html>
|
_________________
LAWLrrenzolicious |
|
Back to top |
|
|
AhMunRa Grandmaster Cheater Supreme Reputation: 27
Joined: 06 Aug 2010 Posts: 1117
|
Posted: Wed Aug 25, 2010 3:59 pm Post subject: |
|
|
Look in the <head></head>
Code: |
<link href="default.css" rel="stylesheet" type="text/css" media="screen" />
|
If default.css doesn't exist it won't render. Well it will but not properly.
default.css also needs your placement definitions.
Check out http://www.w3schools.com/css/ for more info.
_________________
<Wiccaan> Bah that was supposed to say 'not saying its dead' lol. Fixing >.> |
|
Back to top |
|
|
Lorrenzo Moderator Reputation: 4
Joined: 02 Jun 2006 Posts: 3744
|
Posted: Wed Aug 25, 2010 4:22 pm Post subject: |
|
|
Sidebar.html has the style included from the CSS file. The index just won't include it?
The CSS file has this -
Code: | /* Sidebar */
#sidebar {
float: left;
width: 250px;
background: #FFFFFF;
border-bottom: 3px solid #59C0F8;
border-top: 3px solid #59C0F8;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
#sidebar li {
margin-bottom: 10px;
background: url(images/img10.gif) no-repeat left bottom;
}
#sidebar li ul {
padding: 0 30px 40px 30px;
}
#sidebar li li {
margin: 0;
padding-left: 30px;
background: url(images/img12.gif) no-repeat 5px 50%;
}
#sidebar h2 {
padding: 0px 30px 10px 30px;
background: url(images/img09.gif) no-repeat;
text-transform: lowercase;
font-weight: normal;
font-size: 1.6em;
color: #302D26;
} |
Does that not tell it where to place it?
_________________
LAWLrrenzolicious |
|
Back to top |
|
|
AhMunRa Grandmaster Cheater Supreme Reputation: 27
Joined: 06 Aug 2010 Posts: 1117
|
Posted: Thu Aug 26, 2010 7:58 am Post subject: |
|
|
Yeah that was not included with your files. If that is in sidebar.html that is fine. Another problem you will have is you are starting off your page <html> the header and the meta, but later I saw you called <?php include "sidebar.html"; ?> this will break your page as you will have two <html><head><meta> tags on your page.
I'd suggest rewriting your page. If you are using php and html it would be much easier to include your css page in header.php and have all the header for your page inside of it. This way no matter the page if you include header.php it will always have your sidebar.
Post back if you need an example.
_________________
<Wiccaan> Bah that was supposed to say 'not saying its dead' lol. Fixing >.> |
|
Back to top |
|
|
Lorrenzo Moderator Reputation: 4
Joined: 02 Jun 2006 Posts: 3744
|
Posted: Thu Aug 26, 2010 9:32 am Post subject: |
|
|
Ah. Well thank you all. I have figured it out and managed to get it to work. =D
_________________
LAWLrrenzolicious |
|
Back to top |
|
|
CrisNMP Fun Supervisor Reputation: 16
Joined: 11 Apr 2007 Posts: 4649
|
Posted: Tue Aug 31, 2010 4:02 pm Post subject: |
|
|
Lorrenzo wrote: | Mhk, thank you.
I figured I'd have to do some PHP.
So, I threw that code with some normal html tags in the sidebar.html file, and got it looking decent. Well, I think.
Code for that file to get something --
Code: | <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Exposure by Free Css Templates</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="default.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<!-- start sidebar -->
<div id="sidebar">
<ul>
<li id="search" style="background: none;">
<form id="searchform" method="get" action="">
<div>
<input type="text" name="s" id="s" size="15" />
<br />
<input type="submit" value="Search" />
</div>
</form>
</li>
<li id="categories">
<h2>Categories</h2>
<ul>
<li><a href="#">Lorem Ipsum</a> (1) </li>
<li><a href="#">Uncategorized</a> (4) </li>
</ul>
</li>
<li>
<h2>Lorem Ipsum Dolor</h2>
<ul>
<li><a href="#">Nulla luctus eleifend purus</a></li>
<li><a href="#">Praesent scelerisque </a></li>
<li><a href="#">Ut nonummy rutrum sem</a></li>
<li><a href="#">Pellentesque tempus nulla</a></li>
<li><a href="#">Fusce ultrices fringilla metus</a></li>
<li><a href="#">Praesent mattis condimentum </a></li>
</ul>
</li>
<li>
<h2>Lorem Ipsum Dolor</h2>
<ul>
<li><a href="#">Nulla luctus eleifend purus</a></li>
<li><a href="#">Praesent scelerisque </a></li>
<li><a href="#">Ut nonummy rutrum sem</a></li>
<li><a href="#">Pellentesque tempus nulla</a></li>
<li><a href="#">Fusce ultrices fringilla metus</a></li>
<li><a href="#">Praesent mattis condimentum </a></li>
</ul>
</li>
</ul>
</div>
<!-- end sidebar -->
</body>
</html> |
And this is my index file, but it doesn't display the sidebar.. I think I'm an idiot. >.>
Code: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
Title : Exposure
Version : 1.0
Released : 200800909
Description: A Web 2.0 design with fluid width suitable for blogs and small websites.
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Exposure by Free Css Templates</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="default.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<!-- start header -->
<div id="header">
<div id="logo">
<h1><a href="#">Exposure</a></h1>
<p><a href="http://www.freecsstemplates.org/">By Free CSS Templates</a></p>
</div>
<div id="menu">
<ul>
<li class="current_page_item"><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a hfre="links.html">Links</a></li>
<li><a href="pics.html">Photos</a></li>
<li class="last"><a href="videos.html">Videos</a></li>
</ul>
</div>
</div>
<!-- end header -->
<!-- start page -->
<div id="page">
<!-- Start Sidebar-->
<?php include "sidebar.html"; ?>
<!--End Sidebar -->
<!-- start content -->
<div id="content">
<div class="post">
<div class="title">
<h2><a href="#">About this Template</a></h2>
<p><small>Posted on August 20th, 2007 by <a href="#">Free CSS Templates</a></small></p>
</div>
<div class="entry">
<p>This is <strong>Exposure</strong>, a free, fully standards-compliant CSS template designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>. This free template is released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attributions 2.5</a> license, so you're pretty much free to do whatever you want with it (even use it commercially) provided you keep the links in the footer intact. Aside from that, have fun with it :)</p>
<p>This template is also available as a <a href="http://www.freewpthemes.net/preview/exposure">WordPress theme</a> at <a href="http://www.freewpthemes.net/">Free WordPress Themes</a>.</p>
</div>
<p class="links"><a href="#" class="more">Read More</a> <a href="#" class="comments">No Comments</a></p>
</div>
<div class="post">
<div class="title">
<h2><a href="#">Etiam rhoncus volutpat</a></h2>
<p><small>Posted on August 20th, 2007 by <a href="#">Free CSS Templates</a></small></p>
</div>
<div class="entry">
<p>Maecenas pede nisl, elementum eu, ornare ac, malesuada at, erat. Proin gravida orci porttitor enim accumsan lacinia. Donec condimentum, urna non molestie semper, ligula enim ornare nibh, quis laoreet eros quam eget ante. Aliquam libero. Vivamus nisl nibh, iaculis vitae, viverra sit amet, ullamcorper vitae, turpis. Aliquam erat volutpat. Vestibulum dui sem, pulvinar sed, imperdiet nec, iaculis nec, leo. Fusce odio. </p>
<p>Etiam arcu dui, faucibus eget, placerat vel, sodales eget, orci. Donec ornare neque ac sem. Mauris aliquet. Aliquam sem leo, vulputate sed, convallis at, ultricies quis, justo. Donec nonummy magna quis risus. Quisque eleifend. Phasellus tempor vehicula justo. Aliquam lacinia metus ut elit. Suspendisse iaculis mauris nec lorem.<br />
</p>
</div>
<p class="links"> <a href="#" class="more">Read More</a> <a href="#" class="comments">No Comments</a> </p>
</div>
<div class="post">
<div class="title">
<h2><a href="#">Praesent condimentum</a></h2>
<p><small>Posted on August 20th, 2007 by <a href="#">Free CSS Templates</a></small></p>
</div>
<div class="entry">
<p>Etiam arcu dui, faucibus eget, placerat vel, sodales eget, orci. Donec ornare neque ac sem. Mauris aliquet. Aliquam sem leo, vulputate sed, convallis at, ultricies quis, justo. Donec nonummy magna quis risus. Quisque eleifend. Phasellus tempor vehicula justo. Aliquam lacinia metus ut elit. Suspendisse iaculis mauris nec lorem.</p>
<ol>
<li><a href="#">Integer sit amet pede vel arcu aliquet pretium.</a></li>
<li><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li>
<li><a href="#">Phasellus nec erat sit amet nibh pellentesque congue.</a></li>
<li><a href="#">Pellentesque quis elit non lectus gravida blandit. <br />
</a></li>
</ol>
</div>
<p class="links"><a href="#" class="more">Read More</a> <a href="#" class="comments">No Comments</a> </p>
</div>
<br style="clear: both;" />
</div>
<!-- end content -->
<br style="clear: both;" />
</div>
<!-- end page -->
<!-- start footer -->
<div id="footer">
<p class="links">
<a href="#" class="rss" title="Subscribe to entries web feed">Entries (<abbr title="Really Simple Syndication">RSS</abbr>)</a>
<a href="#" class="rss" title="Subscribe to comments web feed">Entries (<abbr title="Really Simple Syndication">RSS</abbr>)</a>
<a href="http://validator.w3.org/check/referer" class="xhtml" title="This page validates as XHTML">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer" class="css" title="This page validates as CSS">Valid <abbr title="Cascading Style Sheets">CSS</abbr></a>
</p>
<p class="legal">
©2007 Exposure. All Rights Reserved.
•
Design by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>
•
Icons by <a href="http://famfamfam.com/">FAMFAMFAM</a>. </p>
</div>
<!-- end footer -->
</body>
</html>
|
|
Get apache or something to test it out locally otherwise upload it to test.
_________________
BENBENBENBENBENBENBENBEN |
|
Back to top |
|
|
Lorrenzo Moderator Reputation: 4
Joined: 02 Jun 2006 Posts: 3744
|
Posted: Tue Aug 31, 2010 5:08 pm Post subject: |
|
|
Haha, yeah. I realized I had that issue. >.>
It worked once I uploaded it to an actual host.
_________________
LAWLrrenzolicious |
|
Back to top |
|
|
|
|
You cannot post new topics in this forum You cannot reply to topics in this forum You cannot edit your posts in this forum You cannot delete your posts in this forum You cannot vote in polls in this forum You cannot attach files in this forum You cannot download files in this forum
|
|