CSS - Inserting Text Into Pages Using Css

Hi everyone,

I wasn't sure if I could do this with CSS or if I'd need to do something in my PHP to get this working. If it's not CSS, please could the mods move this to the PHP forum.

So here's my problem:

I have a site, www.geeknews.co.za, which is an article site that I want google adsense to run in. The problem is that the articles are inserted from the database dynamically, and I don't know how to add the google tags so that it doesn't appear after the article has finished.

The page on geeknews.co.za is a static page. Just so you can see what I'm going for.

Any ideas on how to do this?

Thanks

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 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 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?

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 know, this sounds like an AJAX question, but I don't think thats the solution. I have created a layout:
http://www.cabinincanada.com/script/

The problem is, that I want to be able to click on the About us button, and have it load into the content box where the posts are. I could just create a second page, copying the HTML and making the changes, but isn't this defeating the purpose of CSS? I would then have to go through and update all my links on both pages if I made changes. How do I load content into a box from an external web-page?

Hi;

I know this is a newbie issue, but I've studied the documentation & tutorials I have, without finding an answer...

I'm building a new website, and just starting with CSS & XHTML. I've got a few examples of simple menus for the top of the page; for the basic "About", "Contact Us", "Home", etc.

But the way these examples work is to define the style of the menu in CSS, then populate the menu in each page.

I understand one of the conceptual benefits of CSS is to provide consistent styles across the website, without coding the style in each page. Since I want the menu to be the same on each page, I would like to specify the menu items and links in just one place, and include that in each page, so when the menu changes as I develop it, I only change it in a single place.

I have a similar issue with my top level banner -- I define a background & box in CSS, but then insert my logo, title & tagline in the body of each HTML page. Again, I'd rather do it in one place.

Is there a good, accepted, elegant way to do this, with CSS or some other mechanism?

Thanks,

Paul

Hi, there. I have been working with the alignment for my site and every time I think I have it right, I look at it on a different size computer screen and everything is misaligned, I can't figure out what I'm doing wrong! I have a big .gif image as the background and a bunch of other images at the z-layer right above it so it gives the effect of a corkboard with sticky notes and things tacked onto it.

Usually it looks great but when I view it on my large computer screen, all the "items" tacked on the board are shifted over so that although they're aligned with each other the way I want them to be, they're spilling off the background cork image.

Any ideas what I'm doing wrong and how I can get it all aligned relative to the cork board, and have that whole thing centered on whatever size screen it's being viewed on? I thought that's what I had accomplished with the CSS code I wrote, can anyone figure out the loophole here?

Thanks!
-lindsey

[code]
<style type="text/css">

#corkboard {
align:center;
z-index: 1;
}

#mission {
z-index: 2;
position:absolute;
left:110px;
top:25px;
}

#whenWhere {
z-index: 2;
position:absolute;
left:445px;
top:25px;
z-index: 2;
}

#mailing {
z-index: 2;
position:absolute;
left:770px;
top:40px;
}

#postItMenu {
z-index: 2;
position:absolute;
left:90px;
top:350px;
}

#currentEvents {
z-index: 2;
position:absolute;
left:440px;
top:250px;
}

#highlights {
z-index: 2;
position:absolute;
left:690px;
top:225px;
}

#class {
z-index: 2;
position:absolute;
left:440px;
top:550px;
}


</style>

<body bgcolor="8a8584">
<div id="wrapper"><center>
<div id="corkboard">
<img src="images/corkboard.gif">

<div id="mission">
<a href="home.htm"><img src="images/UCUmainLogo.png" border="0"></a>
</div> <!--mission-->

<div id="whenWhere">

<img src="images/whenWhere.png" border="0">
</div> <!--whenWhere-->

<div id="mailing">
<a href="mailto:lindsey@urbancraftuprising.com?subject=UCU newsletter"><img src="images/mailingList.gif" border="0"></a>
</div> <!--mailing-->

<div id="currentEvents">
<a href="vo.htm"><img src="images/currentEvents.png" border="0"></a>
</div> <!--currentEvents"-->


<div id="highlights">
<img src="images/perks.png" border="0">
</div> <!--highlights-->

<map name="menu">
<area shape="rect" coords="36, 20, 176, 100" href="javascriptopUp('about.htm')">
<area shape="rect" coords="178, 15, 322, 92" href="javascriptopUp('media.htm')">
<area shape="rect" coords="73, 105, 180, 178" href="javascriptopUp('vl.htm')">
<area shape="rect" coords="194, 120, 350, 192" href="javascriptopUp('friends.htm')">

<area shape="rect" coords="57, 199, 177, 282" href="javascriptopUp('sponsors.htm')">
<area shape="rect" coords="188, 194, 320, 313" href="javascriptopUp('vo.htm')">
</map>

<div id="postItMenu">
<img src="images/postItMenu.png" usemap="#menu" border="0">
</div> <!--menu-->

<div id="class">
<img src="images/classInfo.png" border="0">

</div> <!--class-->

</div><!--corkboard-->


</body>

Hi,

I have many products with information that needed to be displayed and printed. I made a print page that displays each product with its own div that is within another div.

When I view the page in IE, there is no problem. See pic 01.gif

But when I print (or go to print preview) some pictures that overlap to the next page are CUT OFF. See pic 02.gif

Is there any way of using CSS to fix the size of each page taht is printed?

I use smarty foreach loops to generate repeating rows/tables. Anyways to set the page so that if the table or row is close to the end of a page then it will skip a few lines and begin again? That way to avoid images being cut off.

Please refer to pictures attached he
http://forums.devshed.com/php-devel...lem-397554.html

Thanks!

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.

For some reason, FF is displaying the web pages bigger than chrome or IE. I'm reviewing the site CSS with firebug on both FF and chrome but can't seem to find why its pages are different sizes on different browsers. It seems the seems either FF is scaling it up or IE and Chrome are scaling it done.

The other question is, which browser(s) are displaying the real size of the webpage?

Any help would be greatly appreciated!

http://50.116.66.243/~ab27853/

Thanks.

I have an index.php page which has a <link> to style.css. The style is applied just fine to content in index.php, but if index.php includes content from other php files using include(); statements, this included output ignores the stylesheet.

I have tried putting a <link> to the stylesheet in the included php files, but this does nothing. Can anyone help? Thanks!

Code:

<link rel="stylesheet" type="text/css" href="style.css" />

I am lost on how to stop the website pages from showing the scroll option. I don't want the scrolls in the middle of the website. Just want the to be normal. Please help!

caligrafx.com/clients/haugenroof/

Thanks,
Adam