CSS - How To Display Two Different Links In A Page?

I know I am going to sound very silly in this, I have only very basic knowledge of CSS, other than that I only know bits of HTML. I haven't tried making a site for a couple of years, and I've only ever made sites with frames before. Now everyone is telling me that you really shouldn't use frames because they cause all kinds of problems with links/search engines/ etc. So I've used CSS to make the layout, very basic- column of links on left, content on the right.

The thing I can't get my head round is that all the content has to be on every single page, so that each one has all the links on the left coded into it... so if I want to alter this menu at all, say to add or remove a link, I have to edit every single page, which is 200+ pages!

Surely there is a way to not have to do this? To somehow set a template for the content etc so that I dont have to press copy paste 200 times! Or am I just going to have to deal with it? It seems so mental after how easy it is to change things with frames! Thanks so much for any help you can offer.

ok basically this is an accessibility thing, i dont want users (disabled) to read the links first page after page and i have read that i can place the links at the bottom but style them with css so they appear on top.

i am trying to do something like this but my page just gets messed up if i move the links to below.
page layout:
Code:

<div> //overall
   <div>//top>
   <div>side Links/menu
   <div>contents
   <div>footer

Hello

I am trying to fix my links so they remain in the same place regardless of how large the users window is when they browse the site. I have tried using the following code in my style sheet.

h3

{
position:absolute;
bottom:330px;
top:670px;
}


but the link still moves around when you minimise the browser on the site. Bear in mind I have a think black border as well which runs all around the screen.

Any help would be much appreciated.

I use this css:

#clearfooter { /* VERTICALLY ALIGN THE FOOTER TO BOTTOM WHERE REQUIRED */
clear: both;
height: 170px;
overflow: hidden;
}

#footerbox { /* BOX FOR THE FOOTER */
height: 170px;
width: 759px;
margin:0 auto;
padding:0;
margin-top :-170px;
text-align: center;
}

It puts the footer at the bottom of the page. In IE I can click on the links in that part of the page. In FF I cannot. If I remove the "clearfooter" id then it works in FF although obviously it knackers the page layout...any solution available?

Hi There -

Am stumped. Everyone I know is stumped.

We're using the cms Drupal on www.digitaldollhouse.com and whenever we update the site from svn, ie decides it doesn't want to display the page.

White screen of death. Notice: ie cannot display this page.

It occurs on all flavors of ie.

It used to be solved by clearing the caches. Not anymore.

The original authors of the html/css monster are contractors long since by the wayside. Another themer has taken over and she is very good, but had to work around some serious badness. She's also stumped. That leaves me.

I'd be grateful for any ideas on how to even start to troubleshoot this bug.

well i have totally redesigned my orginal page due to problems with IE browser--

i am now using a two column template and have copied code exactly-- had both XHTML and CSS verified with the
W3C validator and they both check out to be ok--

the page is NOT showing up properly at all-- i am using FIREFOX as browser and i am wondering if i have now traded one problem for another

i would sure appreciate it if someone would just go and look at page to see if it shows up right in another browser-


THE PAGE


also here is the url for the


CSS CODE

here is link to how page is supposed to look--
CORRECT VIEW

if the page is not right in FOX does anyone know a work around to make it right??????

UGH UGH THIS IS SO FRUSTRATING
thanks in advance--

If you display: none an image, will it load in the page?

That goes for any content, really... will it not load until you display: block it via javascript?

I use the same css for all page, but one of them doesn't show sidebar and push down the footer about 100px
Code:

http://elsoszabadmagyarkormany.com/torveny-szavazasok/

Anybody can help me?

I've been working some more on a new layout for one of my websites this weekend. However, I'm having trouble getting the layout to display the same in all browsers. Everything is looking exactly how I hoped in Firefox, but when the same page is viewed in Internet Explorer, some things appear rather differently.

Sample Page: http://www.mybb-emods.com/new/index.htm
CSS File: http://www.mybb-emods.com/new/stylesheet.css

Firstly, the background of the navigation bar at the top of the page should remain grey at all times apart from when a link is hovered, in which case it changes to blue. This is happening in both browsers, but in Internet explorer, only part of the background is changing as opposed to all of it. It's easier to show this than to explain, so I've posted two screenshots below to demonstrate. The first screenshot shows the navigation bar in Firefox, the second shows the same bar in Internet Explorer. I'm assuming this is probably something to do with the padding values I have assigned, but I have been unable to find a working solution for all browsers.

Also, I'm having a problem with the left margin of my main page content. The margins down the left side of the main page should all be 20px from the left hand border, and this shows correctly again in Firefox. However, in Internet Explorer, the left margin of the navigation bar appears correctly, but the content beneath it appears to have a much larger margin and as such the layout appears incorrectly.

If anyone has any idea how to fix these problems then I would very much appreciate the advice.

Thanks.

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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">

body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-color:#060606; background:url(images/background.png) repeat-y left top;
}

ul, ul li { margin:0; padding:0; list-style:none; }
ol, ol li { margin:0; padding:0; list-style:none; }
div { margin:0; padding:0; }
.clear { clear:both; }

.wrapper { width:100%; height:1000px; border:1px solid #FF0000;  }
.header_wrapper { background:url(images/banner_bg.png) no-repeat left top; height:115px; width:100%; border-bottom:2px solid #FCE66F; } 
.header_wrapper .header { width:906px; height:115px; margin:0 auto; outline:1px solid #0000FF;  }
.header_wrapper .header .logo { float:left; left:0; top:0; width:136px; }
.header_wrapper .header .title { float:left; margin-left:10px; padding-top:42px; width:491px; }
.header_wrapper .header .right { width:245px; height:115px; float:right; outline:1px solid #0000FF; position:relative; }
.header_wrapper .header .right .link { font:Tahoma, "Times New Roman", "Trebuchet MS", Verdana, Georgia, Arial, sans-serif; color:#F4E8D1; padding-top:28px; width:145px; height:20px; outline:1px solid #0033FF; position:absolute; right:0;    }
.header_wrapper .header .right .search { width:245px; height:35px; outline:1px solid #FF0000; position:absolute; bottom:20px; right:0; }

.header_wrapper .header .right .link ul li a { line-height:10px; border-left:1px solid #F4E8D1; float:left; text-decoration:none; margin-left:15px; padding-left:15px; color:#F4E8D1; }
.header_wrapper .header .right .link ul li.first a { border:none;  }
.header_wrapper .header .right .link ul li a:hover { text-decoration:underline; }




.container_wrapper { width:923px;  margin:0 auto; background:#060606; outline:1px solid #FF0000;  }
.container_wrapper .nav { margin:0 auto; padding-top:30px; width:923px; height:32px;   font:12px Tahoma, "Times New Roman", "Trebuchet MS", Verdana, Georgia, Arial, sans-serif;   }
.container_wrapper .nav ul { list-style:none; margin:0; padding:0;  }
.container_wrapper .nav ul li { display:inline;  margin-top:27px; }
.container_wrapper .nav ul li a { padding:17px 35px;  color:#FF6600; text-decoration:none;   }
.container_wrapper .nav ul li.first a { margin-left:30px; }
.container_wrapper .nav ul li a:hover { background:url(images/hover_button1.png) center center no-repeat; color:#FF6600; }

.container_wrapper .home_container { margin:0 auto; width:906px; outline:1px  solid #0000FF; position:relative; }
.container_wrapper .home_container .container_bg { background:url(images/body_bg.png) repeat-y left top;  }
.container_wrapper .home_container .left { float:left; width:219px; outline:1px solid #0000FF; margin-left:10px;    }
.container_wrapper .home_container .left .background { background:url(images/left_box_bg_img.png) repeat-y left top; }
.container_wrapper .home_container .left .background .title { font: bold 12px Verdana, Arial, Helvetica, sans-serif; color:#FDFD31; width:190px; border-bottom:2px solid #FF7811; margin-left:12px; padding-bottom:5px; padding-left:2px;    }
.container_wrapper .home_container .left .background .pruduct { width:190px; margin-left:12px; margin-top:5px; }
.container_wrapper .home_container .left .background .pruduct ul li { font:12px Verdana, Arial, Helvetica, sans-serif; color:#FFF500; padding-bottom:5px;  }
.container_wrapper .home_container .left .background .pruduct ul li a { color:#FFF500; text-decoration:none;  }
.container_wrapper .home_container .left .background .pruduct ul li a:hover {  color:#FFF500; text-decoration:underline; }

.container_wrapper .home_container .contain_box { float:left; width:400px; margin:0px 10px 0 10px; }
.container_wrapper .home_container .contain_box .contain_title { font:bold 14px Verdana, Arial, Helvetica, sans-serif; color: #FDFD31; padding:5px 0 8px 0; }
.container_wrapper .home_container .contain_box .text { font:12px Verdana, Arial, Helvetica, sans-serif; color:#ffffff; font-style:normal; text-align:justify; }

.container_wrapper .home_container .right { float:right; width:253px; outline:1px solid #0000FF;  }
.container_wrapper .home_container .right .right_box_bg { background:url(images/right_box_bg_img.png) repeat-y left top; }
.container_wrapper .home_container .right .right_box_bg .daily_news { width:195px; height:120px; outline:1px solid #00FF00; margin:0 auto; padding:0;  }
.container_wrapper .home_container .right .right_box_bg .daily_news .News_title { font: bold 24px "Times New Roman", Times, serif; color:#000000; text-align:center; border-bottom:2px solid #FA7815;   }
.container_wrapper .home_container .right .right_box_bg .daily_news .news_scroll { font:12px Verdana, Arial, Helvetica, sans-serif; text-align:center;  width:175px; padding-left:20px;  }


.container_wrapper .home_container .right .right_box_bg .login_nox { width:230px; height:200px; outline:1px solid #0000FF; margin:0 auto; margin-top:20px;  }

.footer { margin:0 auto; width:906px; height:73px;  background:url(images/footer2.png) no-repeat; margin-top:5px;  outline:1px solid #0000FF; text-align:center;  }
.footer ul li { font:12px "Times New Roman", Times, serif; color:#C1A579;  display:inline; line-height:80px; margin-left:20px; padding-left:20px;  }
.footer ul li a { font:12px "Times New Roman", Times, serif; color:#C1A579; text-decoration:none; }
.footer ul li a:hover { text-decoration:underline; }

</style>
</head>

<body>


<div class="wrapper">
    <div class="header_wrapper">
        <div class="header">
            <div class="logo"><img src="images/logo.png" height="171" width="136"/></div>
            <div class="title"> <img src="images/banner_title.png" width="500" height="56" /></div>
            <div class="right">
                <div class="link">
                    <ul>
                        <li class="first"><a href="">Register</a></li>
                        <li><a href="">Login</a></li>
                    </ul>
                </div>
                <div class="search">
                    <table width="245">
                        <tr>
                            <td><img src="images/search_bg.png" width="179" height="27" /></td><td> <img src="images/go_button.png" width="49" height="29" /></td>
                        </tr>
                    </table>
                </div>
                <div class="clear"><!-- --></div>
            </div>
            <div class="clear"><!-- --></div>
        </div>
    </div>
    
    
    
    
    
    <div class="container_wrapper">
    <div class="nav"> 
        <ul>
            <li class="first"><a href="#">Home  </a></li>
            <li><a href="#">Voluntee </a></li>
            <li><a href="#">About Us </a></li>
            <li><a href="#">Events</a></li>
            <li><a href="#"> Donate </a></li>
            <li ><a href="#"> Carrier with us</a></li>
        </ul>    
    </div>
    
    <div class="clear"><!-- --></div>
    <div class="home_container">
        <div><img src="images/body_top.png" width="906" height="12"></div>
        <div class="container_bg">
        <div class="left">
            <div><img src="images/left_box_top_img.png" width="219" height="14" /></div>
            <div class="background">
                <div class="title">EVENTS</div>
                    <div class="pruduct">                    
                        <ul>
                            <li>* <a href="#">Whatexpect on Sundays</a></li> 
                            <li>* <a href="#">Location and directions</a></li> 
                            <li>* <a href="#">Where to go to wear</a></li> 
                            <li>* <a href="#">What  for your child</a></li> 
                            <li>* <a href="#">Meet the staff</a></li> 
                            <li>* <a href="#">ExploreFaith.org</a></li> 
                            <li>* <a href="#">Mission Opportunities</a></li> 
                        </ul>    
                    </div>
            </div>            
            <div><img src="images/left_box_bottom_img.png" width="219" height="15" /></div>
        </div>
        
        
        <div class="contain_box">
                <div class="contain_title">Welcome to Elite Brigade</div>
                <div class="text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br>
<br>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                </div>
        </div>
        <div class="right">
            <div> <img src="images/right_box_top_img.png" width="253" height="18" /></div>
            <div class="right_box_bg">
                    <div class="daily_news">
                        <div class="News_title">Daily News</div>
                        <div class="news_scroll">

  <marquee height="80" behavior="scroll" direction="up" scrolldelay="50" truespeed="truespeed" scrollamount="1"  onmouseover="this.stop()" onmouseout="this.start()" >

Put Your Images tag here

</marquee>                        
                        </div>
                    </div>
                    <div class="login_nox"></div>            
            </div>
            <div><img src="images/right_box_bottom_img.png" width="253" height="17" /></div>
        </div>        
        <div class="clear"><!-- --></div>    
        
        
        </div>
        <div><img src="images/body_bottom_.png" width="906" height="23"/></div>    
     </div>
    
    
        <div class="clear"><!-- --></div>
    <div class="footer">
        <ul>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Contact us</a></li>
            <li><a href="#">Privacy Policy</a></li>
            <li><a href="#">Copyright statement</a></li>
        </ul>    
    </div>
    
    </div>
    
    </div>
</div>

</body>
</html>

Quote:
Hi Friends...........
Above code is an home page of website and I want that when user clicks on register link, the registration form(PHP File) displays below "Welcome to Ankit" by replacing "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br>
<br>
<span style="font-weight: bold">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."</span>
instead of another page.
Anyone plz help me??????????????
Thx in advance............

OK,

So I have put together what I thought was a reasonably basic xhtml page outline. I'm using a Win2k box. I checked it in Opera 7 and IE6 and it looks fine (more or less). I've also validated the xhtml and css codes. However, when I look at the page in Netscape 7.1 or Firefox, the menu kind of hangs a bit in limbo. Otherwise the rest of the page render's fine. I've included my code below. Does anyone have any suggestions since it's likely that if it doesn't work in Netscape/Firefox, it won't work in many other browsers either. Thanks!

Shawn

PS I'm not saying there is anything wrong with Firefox/Netscape, but likely my code


URL: http://www.raisetheratesottawa.org/xhtml/

=====
CSS
=====

HTML {
PADDING-RIGHT: 0px;
MARGIN-TOP: 0px;
PADDING-LEFT: 0px;
BACKGROUND-COLOR: #FF99CC;
MARGIN-BOTTOM: 20px;
PADDING-BOTTOM: 0px;
COLOR: #000000;
PADDING-TOP: 0px
}
BODY {
PADDING-RIGHT: 0px;
MARGIN-TOP: 0px;
PADDING-LEFT: 0px;
BACKGROUND-COLOR: #FF99CC;
MARGIN-BOTTOM: 20px;
PADDING-BOTTOM: 0px;
COLOR: #000000;
PADDING-TOP: 0px
}


#upper {
width:700px;
margin:0px auto;
text-align:left;
padding: 0px;
border: 5px solid #FFFFFF;
BACKGROUND-COLOR: #000000;
PADDING-RIGHT: 0px;
MARGIN-TOP: 0px;
PADDING-LEFT: 0px;
MARGIN-BOTTOM: 10px;
PADDING-BOTTOM: 0px;
PADDING-TOP: 0px
}


/* Horizontal nav */

#menu {
width:700px;
margin:0px auto;
padding: 0;
}

#menu ul {
border: 0;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
clear: left;
}

#menu ul li {
display: block;
float: left;
text-align: center;
padding: 0;
margin: 0;
}

#menu ul li a {
background: #000000;
width: 175px;
/* was 'height: 2em; */
height: 24px;
padding: 0;
/* was 'margin: 0 0 10px 0;
' this affects the margin between upper menus*/
margin: 0 0 0 0;
color: #FF0000;
text-decoration: none;
display: block;
text-align: center;
font-weight: bold;
letter-spacing: 1px;
/* was 'line-height: 2em; */
line-height: 24px;
/* was 'font-size: x-small;
' */
font-size: 10px;
font-size: 10px;
/* was 'FONT: 8px Verdana, Arial, Helvetica, Sans-Serif;*/
}




#menu ul li#one {
width: 46px;
}
#menu ul li#two a {
width: 154px;
}
#menu ul li#three a {
width: 105px;
}
#menu ul li#four a {
width: 85px;
}
#menu ul li#five a {
width: 56px;
}
#menu ul li#six a {
width: 57px;
}
#menu ul li#seven {
width: 147px;
}


#menu ul li a:hover {
color: #000000;
background: #FF0000;
}

#menu a:active {
background: #c60;
color: #fff;
}


#content {
width:700px;
margin:0px auto;
text-align:left;
padding:0px;
border:5px solid #FFFFFF;
background: url(/xhtml/graph/rtr-logo-bk.gif) #FF99CC;
}


======
XHTML
======

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Test</title>

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

<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<meta name="ROBOTS" content="No Index" />
<meta name="Copyright" content="Copyright (c) 2004" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />

<meta name="description" content="" />
<meta name="keywords" content="" />

<link rel="help" href="about.php" title="Site info." />

<meta name="Rating" content="General" />
<meta name="revisit-after" content="2 Days" />
<meta name="doc-class" content="Living Document" />


</head>

<body>

<div id="upper">

<div id="header">
<img src="graph/top-right2.jpg" width="700" height="78" alt="" />
</div>

<div id="menu"><ul>
<li id="one">&nbsp;</li>
<li id="two"><a href="link1.php" title="Link 1.">Link 1</a></li>
<li id="three"><a href="link2.php" title="Link 2.">Link 2</a></li>
<li id="four"><a href="link3.php" title="Link 3.">Link 3</a></li>
<li id="five"><a href="link4.php" title="Link 4.">Link 4</a></li>
<li id="six"><a href="link5.php" title="Link 5.">Link 5</a></li>
<li id="seven">&nbsp;</li>
</ul></div>
</div>


<div id="content">
<p>Here is some text</p>
<p>Here is some more text </p>
</div>



</body>
</html>

Hi,

I'm new using CSS and was just handed the task of creating an external style sheet that will 'brand' the web page of a new service we are using with my company's logo and menu.

Our page has a logo on the left, with a menu bar extending to the right of it, then a graphic bannner with the company's slogan below all of it.

The requirements are for an external style sheet which will apply this to each page of the services hosted pages.

I desperately need an example of how this is done, or CAN it be done with an external style sheet (and what code needs to go into the HTML file to make it work).

Any help would be greatly appreciated. I've spent 4 days searching for an example and have come up dry, or what I did find didn't work. This is my last resort and I need to finish the project today.

Tillius

Hi

I wonder if anyone can help. I've been trying to tidy up the layout of my home page, and I'm pretty confused by the way that the header is behaving in both Firefox and Safari - the browsers I use on my Mac.

I've got screen shots which show it looking good on most Windows browsers, but for some reason, all the text is bunched up at the top when I look at it on the Mac.

This is a link to the page:

http://www.independentliving.co.uk/index1.shtml

And this is the relevant bit of the stylesheet:

div#header {
background-image: url("header.jpg");
background-repeat: no-repeat;
color: #FFFFFF;
margin-left:auto;
margin-right:auto;
margin-top: 0;
width:780px;
height: 200px;
margin-bottom: 10px;
font-size: 0.8em;

}

#header .welcome {
text-align: left;
width: 700px;
padding-top: 90px;
padding-left: 20px;
padding-right: 20px;
color: #003366;
font-size: 0.8em;
}

p.welcome {
text-align: left;
width: 700px;
padding-top: 90px;
padding-left: 20px;
padding-right: 20px;
color: #003366;
font-size: 0.8em;
}

#header .slogan {
text-align: left;
width: 700px;
padding-left: 20px;
padding-right: 20px;
color: #003366;
font-size: 0.8em;
}

p.slogan {
text-align: left;
width: 700px
padding-left: 20px;
padding-right: 20px;
color: #003366;
}

If anyone has any ideas, I'd be really grateful. I know Mac is a minority platform, but as it's the one I use, I'm pretty keen to get it working!

Thanks

Frances

Hi all, I have a fairly complex page with quite a few nested divs, and some of these nested divs have overflow:auto assigned to them.

The problem Im having is that on pageload and when I click a link that has uses javascript to switch the visibility of some of the sub elements, it flickers the div to a different part of the page.

I know the description isnt much help, but I didnt know if this was something that others had ran into in general with gecko browsers.
I've tried assigning overflow: auto to the containing divs, and to no avail.

Anyone have any general ideas as to what it could be?

Thanks in advance