|
CSS - No-tables, Completely Css Pages, Pros And Cons
A friend of mine recently explained to me how css can be used to write webpages without use of any tables whatsoever. I was very sceptical and asked him to show/write me some examples. I immediately noticed that if you use absolute positioning you'll mess up the page presentation on differrent monitor resolutions. Also, for the same reason I found CSS to be unhandy when you have dynamically loaded content.
Still, the idea to use div tags and css and abolish tables sounds very tempting, but I want to ask people with more experience than me: Should I stop using tables, is all previous functionality still available without tables, and if not, in what cases, theoretically, it is better to use css and where it is better to use tables? Similar Tutorialsyeah so I just need a simple help with something. Its some basic stuff for a myspace layout.. I have got an image to span.. i received help here a while ago with it. but I can't figure out how to hover & span together. like for instance.. the idle image icon is black & white.. then when I mouseover it i want it to alternate to the colour image and also span the large image of itself to the side. I cant seem to combine them.. its either one or the other. just hover colour image over b&W.. or jus span large image. been noob i dont really know what to chop and mix. so how can i do it?? thanks for any help :P http://energetic.bluekazoo.eu/ Hi all. Hope someone can help. The above site has a strange quirk with there being a 20px gap to the right of the image which try as I might, I cannot seem to resolve. Been looking at it so long now that I reckon I can't see the wood for the trees. All help would be gratefully appreciated. Mark. Well I trying to build a navbar and I want it to be completely in CSS so I can have it in my styling sheet and only have to edit it once when I add a new page to the navbar. I have it figured out so the formatting for it is in the CSS but the actual items and links to pages are in the HTML, and I want the format and items in the CSS. Here's my CSS for the navbar formatting: Code:
#navbar ul {
margin: 10px auto auto auto;
padding: 6px;
list-style-type: none;
text-align: left;
background-color: #000;
font-family: arial;
}
#navbar ul li {
display: inline;
font-family: arial;
}
#navbar ul li a {
text-decoration: none;
padding: .2em 1em;
color: #ffffff;
background-color: #000000;
font-family: arial;
}
#navbar ul li a:hover {
color: #000000;
background-color: #ffffff;
font-family: arial;
}
And here's the code I have in the body of my HTML that adds each of the items to the navbar: Code: <div id="navbar"> <ul> <li><a href="index.html">Home</a></li> <li><a href="gallery.html">Gallery</a></li> <li><a href="irc.html">IRC</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> Anyone have any ideas on how I would do this? Thanks. I've been doing a bit of professional work for just a little while now (about a month and a half) as a summer job, but I'm just completely lost at this point and I have a clue as to how to handle this problem. Programming and styling works fine on my main computer (which has no special mods as far as I know) as well as one of my laptops (well family laptop) However, on my father's work laptop, Both macs as well as the computers for both my clients, the CSS stylesheets aren't working properly at all, almost as if certain commands from the stylesheet are ignored. On my dad's work laptop, one of my DIV tabs (the menu bar) width properties (15%) is almost completely ignored. The width of the DIV is actually extended to the point where it's pushed underneath the main content page. Changing the width value to 0 actually does nothing. I'm at a loss. On both my clients computers the main body DIV min-height value doesn't load properly, creating a small space of colour at the top of the page, while the rest of the actual content is properly placed below it. This div holds the background and "boundaries" for the nav bad and the main content. Both of which are not present. Both my father's work laptop and my clients computers use the latest version of IE.and I get these strange errors. I also get the second error when using Safari on both macs. God I love Firefox... it loads everything properly.... Either way, I'm confused as confused can be. HELP!!!! I'm completely stuck with my current web design. Pretty sure I'm not doing this the most efficient way, so any suggestions are helpful. My intention is to have the following: 1) an overall pg wrapper that sets width and centering 2) header 3) nav/links area 4) main content 5) footer My probs are all over the place. First, I have wrapper divs that aren't showing up. The content that is supposed to be inside these divs doesn't appear to be in them, so I guess the divs are empty. But I have no idea why this is happening. There is supposed to be a blue bg behind my links section. It's not showing up in IE6. The #main div --which should be a wrapper that contains all the thumbnails of the page -- is empty and showing up mid-way down the page behind all the thumbnails in IE6. If someone can start with these issues and help me, I would be forever grateful! XHTML is attached in a txt file and CSS is posted below. (I added the obnoxious bg colors & borders to divs intentionally to see where things are showing up.) Code: * {margin:0;padding:0}
#wrapper {
border: #f09 dashed 3px;
background-color: yellow;
text-align: left;
margin: 50px auto;
padding: 0;
width: 810px;
}
#header {
border: blue dashed 1px;
background-color: pink;
padding: 0px;
margin: 5px;
}
#header p {
display: inline;
}
#intro {
border: 1px solid black;
background-color: purple;
}
#intro p{
font: bold 80% arial;
position: absolute;
left: auto;
top: 85px;
color: #fff;
padding: 15px 0 0 435px;
margin: 0 0 25px 0;
width: 350px;
line-height: 1.4em;
border: 1px red solid;
}
#nav {
background-color: #09f;
border: solid red 1px;
min-height: 30px;
}
ul {
float: right;
list-style-type: none;
margin: 10px 0;
}
li {
font: bold 12px arial;
display: inline;
padding: 0 17px 0 17px;
border-right: 1px solid white;
}
span {
position:absolute;
top: -100000px;
}
#main {
border: thin green solid;
padding: 25px 25px 0 25px;
background-color: #eee;
min-height: 1000px;
}
div.work {
float: left;
padding: 10px;
/*border: thin red solid;*/
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
background-color: white;
margin: 0 0 25px 0;
}
div.work img {
display: inline;
border: 4px black solid;
float: left;
}
div.work p {
margin: 0;
padding: 10px 0 0 25px;
line-height: 1.3em;
font: 100% arial;
float: left;
border: thin purple solid;
width: 400px;
}
div.work h1 {
margin: 25px 0 0 0;
padding: 10px 0 0 25px;
display: inline;
font: 125% arial;
color: #ff8529;
width: 400px;
float: left;
border: thin green solid;
}
div.work h2 {
display: inline;
margin: 0;
padding: 10px 0 0 25px;
font: 85% arial;
width: 400px;
float: left;
border: thin black solid;
}
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "removed link">
<html xmlns="removed link" xml:lang="en" lang="en">
<head>
<title>Page Title here</title>
<link rel="stylesheet" type="text/css" href="divtest.css" media="screen"/>
</head>
<body>
<!--begin overall page wrapper; sets width and centering-->
<div id="wrapper">
<!--begin header-->
<div id="header">
<p><img src="assets/logoHolder.jpg" alt="Logo alt text here" /><span>Logo description here</span></p>
<div id="intro">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do ei
usmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit.</p>
</div>
</div>
<!--end header-->
<!--begin nav-->
<div id="nav"><ul><li><a href="#">Link 1 goes here</a></li><li><a href="#">Link 2 goes here</a></li></ul></div>
<!--end nav-->
<!--begin main content area-->
<div id="main">
<div class="work"> <img src="assets/placeholder.gif" />
<h1>Heading goes here</h1>
<h2>Subhead goes here</h2>
<p>Supporting information goes here.</p>
</div>
<div class="work"> <img src="assets/placeholder.gif" />
<h1>Heading goes here</h1>
<h2>Subhead goes here</h2>
<p>Supporting information goes here.</p>
</div>
<div class="work"> <img src="assets/placeholder.gif" />
<h1>Heading goes here</h1>
<h2>Subhead goes here</h2>
<p>Supporting information goes here.</p>
</div>
<div class="work"> <img src="assets/placeholder.gif" />
<h1>Heading goes here</h1>
<h2>Subhead goes here</h2>
<p>Supporting information goes here.</p>
</div>
<div class="work"> <img src="assets/placeholder.gif" />
<h1>Heading goes here</h1>
<h2>Subhead goes here</h2>
<p>Supporting information goes here.</p>
</div>
<div class="work"> <img src="assets/placeholder.gif" />
<h1>Heading goes here</h1>
<h2>Subhead goes here</h2>
<p>Supporting information goes here.</p>
</div>
</div>
<!--end of main container-->
</div>
</body>
</html>
Please look at this page in Firefox: http://www.pacunionsonoma.com/real-estate-listings.asp?city=Santa-Rosa Notice the links up to the top area that read Showing Appointment, Listing Images, etc. No matter what I do I can't get them to appear within the respective property listing div. It must be some inheritance issue but I just can't figure it out. Thanks. http://loganagency.com/temp/index.php Please click there and view in IE and then in Firefox. The div is completely shifted upward and the baber overlaps the text in FF but looks fine in IE. What is wrong and how can I avoid this in the future? While we are on the subject, what gives with IE vs FF web design? Everyone posts errors here. Is there a tutorial or post that describes the reasons they process code so differently and ways to prevent it? You would need to look in Internet Explorer (probably on windows) for the bug to show up. I've posted in css, because I assume it's something to do with css, but I guess it could be something else. The stylesheet for the page can be found here... http://estore.e-av.co.uk/stylesheet.css I realise there are various other errors on these pages still, but hey, it's a work in progress. It's really weird, if you click around through the pages, about 50% of the time, a white block seems to get drawn over the left and right hand menus (actually, I'm assuming it's over everything, but behind the main content). It follows no pattern, and if you move your cursor over it, it will redraw. It's so weird, and if it was any other browser, I would ignore it - but it's i.e. on windows, the most heavily used browser out there, so I've got to fix it somehow. Has anyone come across this before and managed to fix it?? Anyone got any ideas at all?? Any advice at all would be very much appreciated. Thanks in advance... Hi all, I use an background image for a menu. Code:
#menu a, #menu a:hover {
height: 20px;
width: 150px;
text-decoration: none;
padding-left: 40px;
padding-top: 3px;
padding-right: 3px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
margin-bottom: 10px;
background-position: 0px;
vertical-align: middle;
}
#menu a {
color: #9E007F;
background-image: url(../imgs/nav/subNav/subNav_bg.gif);
background-repeat: no-repeat;
}
#menu a:hover {
color: #FFF;
background-image: url(../imgs/nav/subNav/subNav_bg_over.gif);
background-repeat: no-repeat;
}
It works fine in IE but not in firefox. Somehow the background image is not completely shown. It stops after the last letter. Any suggestions?? Grtz, I'm at a loss because I'm not very familiar with css... this page www.centerpointpilates.com/index.html has pricing formatted by line 42 of the code at the very bottom of this post, printed out here by itself: Code: #main #plans {
position: relative;
float: right;
width: 220px;
background-color: transparent;
border: 1px solid #6B9D98;
margin: 0px 0px 10px 10px;
left: 428px;
top: 29px;
}
I've done something but I'm unaware of what! The text within the div using this now goes off the screen, all the way to the right! Can anyone tell me why? I'm printing the whole css sheet below, the above code is line 42. If I can't figure this out tonight I'm going to just redo the page using tables until I can find what is wrong. Code:
body {
background-color: #F6EEC2;
margin: 10px;
padding: 0px;
}
#bannerBox {
background-color: transparent;
background-image: url(gfx/cpp_banner2.jpg);
background-repeat: no-repeat;
border: none;
padding-left: 5px;
height: 80px;
margin: 0px;
}
#leftNav {
position: absolute; left: 10px; top: 100px;
width: 130px;
background-color: transparent;
}
#navBlock {
position: relative; left: 7px;
width: 110px;
background-color: transparent;
border: 1px solid #6B9D98;
}
#main {
background-color: transparent;
position: relative;
margin-top: 5px;
margin-left: 138px;
margin-right: 0px;
border-left: 1px solid #6B9D98;
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 137px;
margin-right: 0px;
}
html>body #main {
margin-left: 139px;
margin-right: 0px;
}
#main #plans {
position: relative;
float: right;
width: 220px;
background-color: transparent;
border: 1px solid #6B9D98;
margin: 0px 0px 10px 10px;
left: 428px;
top: 29px;
}
#tagLine {
background-color: transparent;
border: none;
margin: 0px;
padding-top: 10px;
padding-bottom: 50px;
}
IMG {
position: relative;
float: right;
border: 0px;
padding-left: 20px;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 10px;
}
P,H1,H2 {
margin: 0px 10px 0px 10px;
}
H1 {
font: bold 16px "arial";
color: #6B9D98;
letter-spacing: 0px;
padding-left: 5px;
padding-top: 3px;
padding-bottom: 10px;
}
H2 {
font: bold 14px "arial";
color: #6B9D98;
letter-spacing: 0px;
padding-top: 10px;
padding-bottom: 13px;
}
#leftNav P {
padding-top: 6px;
margin: 0px 10px 0px 10px;
}
#leftNav P.spacer {
padding-bottom: 15px;
}
#navBlock P {
font: bold 11px arial;
color: #6B9D98;
padding-top: 1px;
padding-bottom: 1px;
}
#main P {
text-align: justify;
font: 11px arial;
color: #6B9D98;
line-height: 17px;
padding-left: 10px;
padding-bottom: 10px;
}
#main P.head {
font: bold 12px arial;
color: #6B9D98;
padding-left: 10px;
padding-bottom: 3px;
}
#plans P {
font: 12px "arial";
color: #6B9D98;
padding-left: 10px;
padding-bottom: 3px;
}
#plans P.list {
text-align: justify;
font: bold 10px arial;
color: #6B9D98;
width: 150px;
padding-left: 15px;
padding-bottom: 5px;
}
#plans P.list2 {
text-align: justify;
font: bold 10px arial;
color: #6B9D98;
width: 180px;
padding-left: 15px;
padding-bottom: 5px;
}
#plans P.price {
font: 11px arial;
color: #6B9D98;
padding-left: 15px;
padding-bottom: 1px;
}
#tagLine P {
font: italic 11px arial;
color: #6B9D98;
padding-bottom: 3px;
}
#tagLine P.copy {
font:11px "lucida console";
color: #6B9D98;
padding-top: 5px;
}
A.nav:link {
text-decoration: none;
background-color: transparent;
color: #6B9D98;
font: bold 11px arial;
}
A.nav:visited {
text-decoration: none;
background color: transparent;
color: #6B9D98;
font: bold 11px arial;
}
A.nav:hover {
text-decoration: none;
background-color: transparent;
color: #6B9D98;
font: bold 11px arial;
}
A.reg:link {
text-decoration: none;
background-color: transparent;
color: #6B9D98;
border-bottom: 1px solid #8DBFBA;
}
A.reg:visited {
text-decoration: none;
background-color: transparent;
color: #8DBFBA;
border-bottom: 1px solid #8DBFBA;
}
A.reg:hover {
text-decoration: none;
background-color: transparent;
color: #8DBFBA;
border-bottom: none;
}
I've done these types of thing before myself, and the pages actually loaded faster, it was easier to edit and find things I wanted. This layout is completely table based, too much positioning for me to do. I would like the layout to preserve it's flexiblity yet still look quite the same. I need a great CSS Guru to completely CSSfy my site. This includes positioning, changing images to texts and small taggies and stuff. Since it's only one page and it'll take half hour at the most, I will pay $7 whoever asks me first. Nadalitian@VFEmail.net April 18th, 2004 I'm not confident enough with CSS to just use it, so I'm mixing it with some tables too. I want a layout with two tables next to each at the top and then another below. The two at the top are working fine, but the one below keeps jumping back up to the top. I've managed to get an ugly fix by putting in a load of <br> but this doesn't work in IE7 (unless I add a lot more, pushing the content way down in other browsers) and isn't much of a solution. The other problem I have is that I want to have the majority of my page with a white background, but to get a surrounding border I've set the body background to be a colour and then placed a div around all the content. I want this div to be the size of the page and so set it's height to 100%, but this makes it too small. Not sure why. Here is my code for my page and CSS. If anyone can help I'd be most grateful. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="incl/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function navon(num) {
document.getElementById("nav" + num).style.backgroundColor = '#CDEB8B';
document.getElementById("nav" + num).style.paddingTop = '0px'
document.getElementById("nav" + num).style.paddingBottom = '0px';
document.getElementById("nav" + num).style.borderTopWidth = '10px';
document.getElementById("nav" + num).style.borderBottomWidth = '10px';
}
function navoff(num) {
document.getElementById("nav" + num).style.backgroundColor = '#C3D9FF';
document.getElementById("nav" + num).style.paddingTop = '8px'
document.getElementById("nav" + num).style.paddingBottom = '8px';
document.getElementById("nav" + num).style.borderTopWidth = '2px';
document.getElementById("nav" + num).style.borderBottomWidth = '2px';
}
//-->
</script>
</head>
<body>
<div class="main">
<table width="29%" border="0" cellpadding="2" cellspacing="5" align="left">
<tr>
<td><img src="" alt="" width="230" height="80" border="0" /></td>
</tr>
</table>
<table width="70%" height="60px" border="0" cellpadding="2" cellspacing="5" align="right">
<tr>
<td width="180px" class="nav" id="nav1" onmouseover="navon('1')" onmouseout="navoff('1')">link</td>
<td width="180px" class="nav" id="nav2" onmouseover="navon('2')" onmouseout="navoff('2')">link</td>
<td width="180px" class="nav" id="nav3" onmouseover="navon('3')" onmouseout="navoff('3')">link</td>
<td width="180px" class="nav" id="nav4" onmouseover="navon('4')" onmouseout="navoff('4')">link</td>
<td width="180px" class="nav" id="nav5" onmouseover="navon('5')" onmouseout="navoff('5')">link</td>
</tr>
</table>
<br /><br /><br /><br /><br /><br />
<table width="100%" border="0" cellpadding="2" cellspacing="5" align="center">
<tr>
<td width="70%">
some content
</td>
<td width="30%">
some more content
</td>
</tr>
</table>
</div>
</body>
</html>
Code:
@charset "utf-8";
/* CSS Document */
body {
padding-right: 4%;
padding-left: 4%;
padding-top: 30px;
padding-bottom: 30px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
letter-spacing: 0.1em;
color: #000000;
background-color: #EEEEEE;
}
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
color: #000000;
text-decoration: none;
}
a:active {
color: #000000;
text-decoration: none;
}
a:hover {
color: #000000;
text-decoration: underline;
}
.main {
background:#FFFFFF;
border: 10px solid #36393D;
width: 89%;
padding: 5%;
}
.nav {
padding: 8px;
background-color: #C3D9FF;
vertical-align: middle;
text-align: center;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 24px;
color: #36393D;
cursor:pointer;
border: 2px solid #36393D;
}
Has anyone got any advice/experience on how to manage the css issues related to a site with upwards of 7, 000 pages. The client wants to have at least 60% of the total pages in the site to be bespoke in terms of design and layout and obviously this will create some very big challenges in terms of planning and implementing the css. The reason why they want so many bespoke pages is because a site with that many pages would make for a very boring user experience if there was just one design and layout site wide. Any suggestions or advice would be great Cheers Hi, I suck at css and I cannot figure anything out with it. I hate it but I am stuck using it. Can someone help me widen all the pages on my website with css? Thanks, Gibs Code:
body {
font-family: tahoma, helvetica, arial, sans-serif;
font-size: 10px;
text-align: center;
background: #d9d6cc url(images/page_bg.gif) top center repeat-x;
color: #868686;
margin: 0;
padding: 10px;
}
html, #wrapper, h1 {
margin: 0;
padding: 0;
}
img { border: 0; }
#wrapper {
margin: auto;
text-align: left;
width: 458px;
position: relative;
}
h1, h2, h3 {
font-size: 10px;
}
h1 {
line-height: 1;
position: absolute;
top: 0;
left: 0;
}
h2 {
margin: 0 0 5px 0;
padding: 0;
}
h3 {
padding: 4px 0 0 0;
}
.block {
display: block;
}
.clear {
clear: both;
height: 10px;
}
.left {
float: left;
margin: 5px 20px 0px 0px;
}
.right {
float: right;
margin: 0px 0px 0px 20px;
}
.readmore {
text-align: right;
}
/* page structure */
#wrapper {
background: url(images/body_t.png) 24px 0px no-repeat;
height: 40px;
}
h1 {
position: absolute;
top: 16px;
left: 43px;
margin: 0;
padding: 0;
width: 135px;
z-index: 10;
}
#nav {
position: absolute;
top: 31px;
left: 0;
width: 31px;
margin: 0;
padding: 0;
z-index: 5;
}
#nav li {
float: left;
width: 31px;
padding: 0;
margin: 0;
list-style: none;
}
#nav img {
display: block;
}
#body {
background: url(images/body_bg.png) repeat-y;
position: absolute;
top: 39px;
left: 10px;
width: 448px;
margin: 0;
padding: 10px 0 0 0;
z-index: 2;
}
#body .inner {
width: 300px;
margin: 10px 20px 0px 20px;
}
#body .inner #content {
width: 200px;
margin-left: 10px;
margin-top: 1em;
}
#body .inner #content p {
margin: 1em 0;
padding: 0;
}
#body .inner #content div {
padding: 17px;
border-top: 1px solid #d4d6cf;
border-bottom: 1px solid #d4d6cf;
}
#body .inner h2 {
font-size: 12px;
}
#page_title {
float: left;
margin: 3px 0 -50px 15px;
padding: 20px 0 50px 0;
width: 57px;
border-right: 1px solid #d4d6cf;
}
* html #page_title {
margin-left: 7px;
}
#news {
float: left;
width: 129px;
margin: 10px 0 0px 6px;
background: url(images/box_bg.gif) repeat-y;
}
#news div {
background: url(images/box_t.gif) no-repeat;
}
#news div div {
padding: 12px 12px 7px 12px;
background: url(images/box_b.gif) bottom left no-repeat;
}
#news p {
margin: 0;
padding: 0 0 3px 0;
}
#news .readmore {
padding-top: 4px;
}
#paper {
position: absolute;
top: 39px;
left: 243px;
width: 196px;
z-index: 9;
background: url(images/paper_bg.gif) repeat-y;
}
#paper .inner {
background: url(images/paper_b.gif) bottom no-repeat;
padding: 8px 30px 18px 30px;
}
#paper .readmore {
text-align: left;
margin-bottom: 0;
padding-bottom: 0;
}
#paper p {
margin: 1em 0;
padding: 0;
}
#footer {
text-align: right;
margin-top: -10px;
}
.footerie {
display: none;
}
.clear {
margin-top: -20px;
}
a {
color: #575e58;
font-weight: bold;
}
a:hover {
color: #b31d00;
}
I am contemplating trying to learn CSS and redesign my home page, from tables to CSS. I basically have my index page, with a header image at the top (image map), a left menu, a right menu, and the area in the middle is where the content is displayed. Would I use one CSS file for this, or one for each page? Sorry for the stupid question, I am completely new to the use of CSS. I would imagine I just use one and load the file in on my main page, and use it through out all the pages that I load into the content area, but im not sure. www.NightmareMotorSports.com I'm an amateur web designer, I only do pages for my band and for the gallery I work for. What happens is that on a Mac, people only get the background. www.formone.net is my band's site. www.kennedygallery.org is the gallery. www.kennedygallery.org/icefollies is a mini-site I made for an off-site event we did. I'm not sure whether it's IEmac or Safari or what that craps out, but the director of the gallery uses a mac and so I'd really like it if he could see our site. haha. I made a form that I wanted to print. It is a page with a table with most of it formated with CSS. When I print however all that shows is the text, nothing that is defined with CSS is acknowledge, not the font-family, table borders, etc. I tried it with Safari and Firefox, both look the same. What is the deal? Hello everybody, I really need help on a CSS matter; Let me explain. My webpage is in PHP. I have a member page called member.php I am selecting the state,city and street datas from database and adding a fake url to the end of member.php. i.e: member.php/MA/Boston/Mass_Ave I am building my CSS on the main page. Member.php When I open member.php directly, CSS works perfectly. But when I want to click on a member page from the main page (here the link is given as <a href='member.pgp/$url'>David's Profile</a>) the page opens of course but CSS does not work. When the link is given as <a href='member.pgp?$url'>David's Profile</a>, it works. But I should use "/" instead of "?". I tried 3 ways to implement CSS. 1-<link ...... href='style.css'> 2- Internal <style> tags on head part 3-@import style.css None of these worked. My project stopped on this step. Thanks for your comments. Best Regards, [/FONT] I have a project in Visual Studio 2008, ASP.Net, 2.0. We are going from IE6 to IE8 and I'm making the changes for this move. I did all these changes by deploying the files to a test web server because I still had IE6 on my machine. When I publish to our web server the pages render like they should. I got IE8 last night so I figured I could just test it out on my box. When I run it off my box, the pages look all screwed up. I don't understand how they can look fine on the web server but not on my box. The same version of IE8 is installed on the test box I'm working with and my machine. Anyone ever encountered this or know of anything to check? If you have questions or need more info, ask. Hi, Was wondering if there was any possible way to insert text into a webpage using CSS. I have a website created with over 200 pages so far, and the people I'm creating it for all of a sudden decided that they want a line at the bottom of each page stating their name. I have a CSS created for the background and I was wondering if I could insert a line in that sheet that would add the text to all pages. Is it possible or am I just dreaming? LOL. I'm trying to avoid having to go through all those pages doing copy/paste..hehe. If this is not possible, any other ideas or help of any kind would be appreciated. Thanks, Christa |
|||||||