PDA

View Full Version : css text border problem


quibs
05-23-2006, 03:29 AM
can some one help me i have a problem with the border surrounding the text links on my website its okay on the main page as the color was set to the color as the menu bar but on other pages where the color is different it looks awe full I've tried playing with the code but cant seem to get it right is there a way of removing the border surround links on a page so all pages look okay -or when you run your mouse pointer over them.?or to some how make the color inherent so that all pages get the color the same as whatever color the borders or backgrounds are on any page it matches ?i hop I've explained this ok I'm really new to this here is the address just so you can see what I'm trying to do. http://www.home-of-poker.com
thanks .im still playing with it now so the colour codes might change.
code.
body {
background:#FFA500;
font:.8em sans-serif;
color:#000000;
}

/*
* Container surrounding all content on the page
*/
.fw-container {
margin-left: auto;
margin-right: auto;
padding: 1em;
width:95%;
background: #556b2f;color:#000;
border:5px solid #FFA500;
}

a {
color: #FF4500;
background-color:#000;
}

a:hover {
color: #7cfc00;
background-color:#000;
}

/*
* This can be used to decorate around any advertisements that appear on the page (non-premium users only)
* It is STRICTLY forbidden to modify this code as to obstruct the view of the advertisement
*/
.fw-advertisement {
margin:1em auto;
width:728px;
height:90px;
border:2px solid #444;
}

/*
* Container surrounding Site Title, Small Title, and Logo
*/
.fw-head {
border-bottom:1px solid #556B2F;
}

/*
* Site Title
*/
.fw-head h1 {
font:normal 2.5em georgia,serif;
margin-bottom: 1px;
}

/*
* Site Small Title
*/
.fw-head h3 {
margin: 0;
font-weight: normal;
}

.fw-logo {
width:1157px;
height:240px;
display: inherit
}

.fw-nav-menu hr {
display:none;
}
.fw-footer hr {
display:none;
}

/*
* NavBar
* UL containing all the NavBar links
*/
.fw-nav-menu ul {
margin:10px 0;
padding:5px;
border:1px solid #DDD;
background: #006400;color:#000;
list-style:none;
text-align:center;
}

/*
* Individual NavBar LI's
*/
.fw-nav-menu li {
display:inline;
margin:0 5px;
}

/*
* Individual NavBar links
*/
.fw-nav-menu a {
text-decoration:none;
}

/*
* This is the container that holds the main content (paragraphs) of the page.
*/
.fw-content {

}

/*
* Paragraph title
*/
.fw-paragraph h2 {
font: normal 1.8em georgia,serif;
margin-bottom: 2px;
}

/*
* Paragraph body
*/
.fw-paragraph-body {
padding-bottom: 2px;
margin-bottom: 30px;
border-bottom: 1px solid #ccc;
}

p {
margin-top: 5px;
margin-bottom: 15px;
}

/*
* Site Footer
*/
.fw-footer {
clear: both;
font-size: .9em;
text-align: center;
}

/*
* Freewebs Tracker Code. If you are a premium user, you may ignore (or remove) this
* It is STRICTLY forbidden to modify this code as to obstruct
* the view of the Freewebs Tracker Code
*/
.fw-tracker {
clear: both;
font-size: .8em;
text-align: center;
margin-top: 5px;
}

/*
* All elements on form pages are surrounded by
* a SPAN with class="formSpan"
*/
.formSpan {
display:block;
margin-bottom:8px;
}

_Aerospace_Eng_
05-23-2006, 03:50 AM
I think you have some bigger problems to worry about. Your right side div is going behind your middle content and it looks even worse in FF.

quibs
05-23-2006, 04:39 AM
I think you have some bigger problems to worry about. Your right side div is going behind your middle content and it looks even worse in FF.
its okay ive fixed the text problem but now i see what you mean about ff in lower resulutions dont no were to start on that one ? ill look at the html i guess the css now checks out as perfect no errors.

_Aerospace_Eng_
05-23-2006, 04:57 AM
Check out this example. Part of your problem is setting a width to all three of your columns. http://bonrouge.com/3c-hf-fluid-lc.php
As you have noticed not everyone has the same resolution, now you have to do even more work because you forgot about the users.

quibs
05-23-2006, 07:00 AM
Check out this example. Part of your problem is setting a width to all three of your columns. http://bonrouge.com/3c-hf-fluid-lc.php
As you have noticed not everyone has the same resolution, now you have to do even more work because you forgot about the users.
yes ive already started working on this problem the main body area of my page is html as i use freewebs html editor so the columns are html, but thats ok i no how to fix them now, i got started on the problem of the width of the page first to see what was causing that ,i found out that it was my site banner,h1 heading and the footer stretching to wide for the page,these i have fixed but i have a problem with the banner still, its to small in higher resolutions than 800*600 is there a way of making it stretch to fit full width of the page in any resolution?

_Aerospace_Eng_
05-23-2006, 07:14 AM
You could center it or give 100% width.

quibs
05-23-2006, 08:17 AM
ive tried loads of different things but no joy
}

.fw-logo {
width:800px;
height:230px;
display: inherit
}
doesn't seem to have any affect bar increaseing the width of the page ?please help thanks.

_Aerospace_Eng_
05-23-2006, 08:24 AM
And that CSS is never going to because its only applying to the div not the image. Instead of
.fw-logo {
width:800px;
height:230px;
display: inherit
}
try this
.fw-logo img {
width:100%;
height:230px;
display: block;
}

quibs
05-23-2006, 08:31 AM
And that CSS is never going to because its only applying to the div not the image. Instead of
.fw-logo {
width:800px;
height:230px;
display: inherit
}
try this
.fw-logo img {
width:100%;
height:230px;
display: block;
}
no no affect
this is the full code as it stands
body {
background:#FFA500;
font:.8em sans-serif;
color:#000000;
}

/*
* Container surrounding all content on the page
*/
.fw-container {
margin-left: auto;
margin-right: auto;
padding: 1em;
width:95%;
background: #556b2f;color:#000;
border:5px solid #FFA500
}
a {
color: #FF4500;
background-color:inherit;

}

a:hover {
color: #7cfc00;
background-color:inherit;
}

/*
* This can be used to decorate around any advertisements that appear on the page (non-premium users only)
* It is STRICTLY forbidden to modify this code as to obstruct the view of the advertisement
*/
.fw-advertisement {
margin:1em auto;
width:728px;
height:90px;
border:2px solid #444;
}

/*
* Container surrounding Site Title, Small Title, and Logo
*/
.fw-head {
border-bottom:1px solid #556B2F;
}

/*
* Site Title
*/
.fw-head h1 {
font:normal 2.5em georgia,serif;
margin-bottom: 1px;
}

/*
* Site Small Title
*/
.fw-head h3 {
margin: 0;
font-weight: normal;
}

.fw-logo {
width:100%;
height:230px;
display: block;
}

.fw-nav-menu hr {
display:none;
}
.fw-footer hr {
display:none;
}

/*
* NavBar
* UL containing all the NavBar links
*/
.fw-nav-menu ul {
margin:10px 0;
padding:5px;
border:1px solid #DDD;
background: #006400;color:#000;
list-style:none;
text-align:center;
}

/*
* Individual NavBar LI's
*/
.fw-nav-menu li {
display:inline;
margin:0 5px;
}

/*
* Individual NavBar links
*/
.fw-nav-menu a {
text-decoration:none;
}

/*
* This is the container that holds the main content (paragraphs) of the page.
*/
.fw-content {

}

/*
* Paragraph title
*/
.fw-paragraph h2 {
font: normal 1.8em georgia,serif;
margin-bottom: 2px;
}

/*
* Paragraph body
*/
.fw-paragraph-body {
padding-bottom: 2px;
margin-bottom: 30px;
border-bottom: 1px solid #ccc;
}

p {
margin-top: 5px;
margin-bottom: 15px;
}

/*
* Site Footer
*/
.fw-footer {
clear: both;
font-size: .6em;
text-align: center;
}

/*
* Freewebs Tracker Code. If you are a premium user, you may ignore (or remove) this
* It is STRICTLY forbidden to modify this code as to obstruct
* the view of the Freewebs Tracker Code
*/
.fw-tracker {
clear: both;
font-size: .8em;
text-align: center;
margin-top: 5px;
}

/*
* All elements on form pages are surrounded by
* a SPAN with class="formSpan"
*/
.formSpan {
display:block;
margin-bottom:8px;
}

_Aerospace_Eng_
05-23-2006, 08:40 AM
You aren't paying attention. You have this
.fw-logo {
width:100%;
height:230px;
display: block;
}
I told you to use this
.fw-logo img {
width:100%;
height:230px;
display: block;
}
See the difference?

Please use [ code][ /code] tags (no spaces) to post code, it makes things neater.

quibs
05-23-2006, 08:50 AM
You aren't paying attention. You have this
.fw-logo {
width:100%;
height:230px;
display: block;
}
I told you to use this
.fw-logo img {
width:100%;
height:230px;
display: block;
}
See the difference?

Please use [ code][ /code] tags (no spaces) to post code, it makes things neater.
yes that has worked sorry about that need sleep been up for 40 hours and thankyou for your help your a star.