ClioSport.net

Register a free account today to become a member!
Once signed in, you'll be able to participate on this site by adding your own topics and posts, as well as connect with other members through your own private inbox!

  • When you purchase through links on our site, we may earn an affiliate commission. Read more here.

Trying to get my head around CSS!! AAARRRRGH!!



  306 TD Slut
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

getting there :)

what does the :hover mean?

#menu ul li a:hover {
display: block;
background-color: #0099ff;
text-decoration: none;

also, i have the links down the side but they seem to have bullett points outside of the box's, i dont want bullet points at all.
 
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

Means when the cursor hovers over the link in the list in the menu id

For links, there's:

a:active
a:hover
a:link
a:visited
 
  20VT Clio & 9-5 HOT
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

to get rid of the bullets:

Code:
#menu ul {
    list-style: none;
    list-style-image: none;
}
 
  306 TD Slut
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

hi matey,
having a bit of trouble with getting it look right in Firefox, i pasted
<br class="clearsides" />
in before the footer and it didnt make a difference. is there a property i can change in the CSS of the body or something?

In firefox it kind of just over laps, and sits on top of each other like you said.

heres my code without the br class.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]">
<html xmlns="[URL="http://www.w3.org/1999/xhtml"]http://www.w3.org/1999/xhtml[/URL]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>South Midlands Communications Ltd</title>
<link href="rewriteCSS.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style5 {font-weight: bold}
.style6 {color: #FF0000}
.style7 {color: #000066}
.style8 {
 font-size: 14px;
 font-weight: bold;
}
.style9 {font-weight: bold; color: #000066;}
a:link {
 color: #000066;
 text-decoration: none;
}
a:visited {
 text-decoration: none;
 color: #000066;
}
a:hover {
 text-decoration: none;
 color: #000066;
}
a:active {
 text-decoration: none;
 color: #000066;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="[URL="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"]http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0[/URL]" width="770" height="150">
    <param name="movie" value="testing.swf" />
    <param name="quality" value="high" />
    <embed src="testing.swf" quality="high" pluginspage="[URL="http://www.macromedia.com/go/getflashplayer"]http://www.macromedia.com/go/getflashplayer[/URL]" type="application/x-shockwave-flash" width="770" height="150"></embed>
  </object>
</div>
<!--header-->
<div id="navbar">
  <div align="center">Company Overview  | The Future| Customer Care| Meeting Standards | World Markets | Location </div>
</div>
<!--navbar-->
<div id="content">
 <div id="menu">
  <ul>
   <li><a href="#">Home</a></li>
             <li><a href="#">Antennas and Masts  </a></li>
             <li><a href="#">Radio Communications </a></li>
             <li><a href="#">Pneumatic Masts </a></li>
             <li><a href="#">Links and Downloads </a></li>
    <li><a href="#">Contact Us </a></li>
             <li><a href="#">Job Vacancies </a></li>
   </ul>
 <div id="mast">
   <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="[URL="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"]http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0[/URL]" width="50" height="550">
        <param name="movie" value="Images/smc_mast.swf" />
        <param name="quality" value="high" />
        <embed src="Images/smc_mast.swf" quality="high" pluginspage="[URL="http://www.macromedia.com/go/getflashplayer"]http://www.macromedia.com/go/getflashplayer[/URL]" type="application/x-shockwave-flash" width="50" height="550"></embed>
     </object>
 </div>
 </div>
  <!--menu-->
<div id="rightcolumn">
  <p align="center"><img src="Images/builindgfront.jpg" alt="image of premises" width="244" height="162" id="image" /><strong>Welcome to South Midlands Communications Ltd</strong></p>
  <p align="justify">SMC was   established in 1958 and initially specialised in support masts, towers and the   manufacture of antennas. </p>
  <p align="justify">Today   SMC is recognised as one of the most comprehensive and professional mobile   communications companies in the UK and essentially covering the world market. Between   them, the SMC group of companies can advise, design, supply and install   practically every form of mobile communications, from simple but robust radio   systems, mast and antennas to the most sophisticated communications equipment   designed for the 21st Century.</p>
</div>
<div id="news">
<span class="style8">News</span><span class="style5"><span class="style7"><span class="style8"><span class="style13"><img src="Images/news_loop.jpg" width="494" height="124" id="image_loop" /></span></span></span></span>
<p align="left"><span class="style5"><span class="style14 style6"><strong>New Produc</strong>t</span> - <span class="style7">NVIS Mobile Loop Antenna</span></span></p>
  <p class="style13">The Loop antenna has been designed and manufactured to meet the requirements of NVIS HF mobile communications for both on-road and off-road vehicles, and has been designed to meet the requirements of Mil-810 C, D<span class="style6">...Full story</span></p>
  <p><span class="style5"><span class="style14 style6"><strong>N</strong></span></span><span class="style16 style6"><strong>ew Pro</strong></span><span class="style6"><strong>duct</strong></span><span class="style5"> - <span class="style7">HiloCam</span></span></p>
  <p align="justify" class="style13"><img src="Images/hilo_cam.jpg" width="104" height="190" id="image_hilocam" /></p>
  <p align="justify" class="style13">The HiloCAM from Hilomast, a High Level Photography system that incorporates a single multi-core control cable.  Connecting and operating the system is simple, connect the control box to your computer's USB socket, switch  on and view a real time image through the camera, compose your shot using the control joystick and<span class="style6">...Full story</span> </p>
  <p>&nbsp;</p>
  <p><strong><span class="style14 style6">SMC</span> <span class="style7">Aquires CTS</span></strong></p>
  <p align="justify" class="story style13"><img src="Images/cts_news_coil.jpg" name="image" width="197" height="144" id="image_cts" />The manufacture and sale of CTS and Minns Baluns products has been transferred to South Midlands Communications Ltd. CTS has been manufacturing and designing HF broadband ferrite matching transformers, hybrids, multicouplers,filters and associated products since its formation in 1987. The business and products of Minns Baluns Ltd was absorbed in 1998. All of these products are now manufactured and marketed by South Midlands Communications Ltd<span class="style6">...Full Story</span></p>
  </div>
  <div id="events"> <span class="style8">Events/Exhibitions</span>
    <p> South Midlands Communications like to attend many large and small scale events, we take any chance to show off our products, of which we are very proud of. </p>
    <p class="style7"><strong>Forthcoming Events  2006</strong>:</p>
          <a href="[URL="http://www.communicasia.com/"]http://www.communicasia.com/[/URL]" target="_blank"><strong>CommunicAsia2006 -   20-23rd June 2006</strong></a>    
      <p><a href="[URL="http://www.communicasia.com/"]http://www.communicasia.com/[/URL]" target="_blank"><img src="Images/CMMA2006-col(tagline).jpg" width="400" height="74" border="0" /></a></p>
    <a href="[URL="http://www.theevent.co.uk/"]http://www.theevent.co.uk/[/URL]" target="_blank" class="style7"><strong>DVD - 29th June   2006</strong></a>
    <p class="style9"><a href="[URL="http://www.theevent.co.uk/"]http://www.theevent.co.uk/[/URL]" target="_blank"><img src="Images/DVDfrontpage.gif" width="401" height="57" border="0" /></a></p>
  </div>
  <!--rightcolumn-->
  </div><!--content-->
<div id="footer">Site Map | About Us | Privacy Policy | Contact Us |  &copy; South Midlands Communications Ltd </div>
<!--footer-->
</div><!--wrapper-->
</body>
</html>
 
  306 TD Slut
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

and here is the css:
Code:
body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 background-color: #CCCCCC;
 text-align: center;
 padding: 0px;
 margin: 0 auto 0 auto;
}
#wrapper {
 width: 770px;
 text-align: left;
 position: relative;
 background-color: #FFFFFF;
 height: auto;
}
#header {
 height: 150px;
 width: 770px;
 position: relative;
}
#navbar {
 font-size: 110%;
 text-align: left;
 width: 730px;
 border-bottom-width: 1px;
 border-bottom-style: solid;
 border-bottom-color: #000000;
 padding-top: 5px;
 padding-right: 20px;
 padding-bottom: 5px;
 padding-left: 20px;
 letter-spacing: 0.1em;
 position: relative;
 color: #000066;
 height: auto;
}
#content {
 width: 770px;
 position: relative;
 height: 930px;
 padding-bottom: 0px;
 border-bottom-width: 1px;
 border-bottom-style: solid;
 border-bottom-color: #000066;
}
#rightcolumn {
 width: 585px;
 position: relative;
 float: none;
 top: 5px;
 left: 5px;
 padding-right: 5px;
 padding-bottom: 10px;
}
#menu {
 width: 170px;
 position: relative;
 float: left;
 height: 1010px;
 background-color: #CAD6FF;
 border-right-width: 1px;
 border-right-style: solid;
 border-right-color: #000066;
}
#image {
 height: auto;
 width: 160px;
 float: left;
 padding-right: 3px;
 padding-bottom: 3px;
}
#menu ul {
 list-style: none;
 list-style-image: none;
 padding: 0;
 margin: 0;
 text-align: left;
}
#menu ul li {
 font-size: 100%;
 margin: 0 0 5px 0;
 padding: 0 0 0 5px;
}
#menu ul li a {
 display: block;
 background-color: #CAD6FF;
 text-decoration: none;
 width: 150px;
 height: 15px;
 color: #000066;
 padding: 5px;
}
#menu ul li a:hover {
 display: block;
 background-color: #0099FF;
 text-decoration: none;
}
#mast {
 width: 50px;
 height: 550px;
 padding-left: 50px;
}
#footer {
 width: 760px;
 height: 20px;
 text-align: center;
 background-color: #FFFFFF;
 color: #CAD6FF;
 padding: 3px;
}
#events {
 float: none;
 width: 585px;
 position: relative;
 top: 5px;
 padding-top: 10px;
 padding-bottom: 10px;
 left: 5px;
 padding-right: 5px;
}

#news {
 width: 585px;
 float: none;
 position: relative;
 top: 5px;
 border-top-width: 1px;
 border-bottom-width: 1px;
 border-top-style: solid;
 border-top-color: #000066;
 border-bottom-color: #000066;
 border-bottom-style: solid;
 padding-bottom: 10px;
 padding-top: 10px;
 left: 5px;
 padding-right: 5px;
}
#image_cts {
 height: 110px;
 width: 150px;
 float: right;
 border: 1px solid #000000;
 margin-left: 4px;
}
#image_hilocam {
 height: auto;
 width: 60px;
 float: left;
 padding-right: 3px;
 padding-bottom: 3px;
 margin-right: 3px;
}
#image_loop {
 height: auto;
 width: 300px;
 float: right;
 border: 1px solid #000000;
 margin-left: 3px;
}

if you could give me some sort of direction that would be great!
 
  20VT Clio & 9-5 HOT
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

you still have loads of CSS in your HTML there matey, try and keep it all within the CSS doc rather than at the top of the HTML.

If you use Dreamweaver to add colours, sizes, borders, etc via the toolbar it tends to add them automatially. thats why i find it better to do it all manually by typing the CSS and html rather than using toolbar bouttons.

Your BR 'clearsides' wont work because you dont have a 'clearsides' class in your CSS.

The BR will be looking for a .clearsides somewhere to get its properties from. if it cant find it it does nothing.

you want something like this in your CSS doc:

Code:
.clearsides {
    display: block;
    clear: both;
    height: 1px;
    overflow: hidden;
    }
The <BR class="clearsides" /> will then use the .clearsides class properties to sort the layout out.

You would then need to put the BR right at the end of your 'content' DIV before you close the tag.
 
  306 TD Slut
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

righty, moved al the css over to my css doc.

.clearsides { display: block; clear: both; height: 1px; overflow: hidden; }​
<BR class="clearsides" />

didnt seem to work, i pasted <BR class="clearsides" /> before the footer is closed. i can see it has added a clear line break above the footer, but didnt make a difference when viewed in Firefox. :( have i done it correctly?

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]">
<html xmlns="[URL="http://www.w3.org/1999/xhtml"]http://www.w3.org/1999/xhtml[/URL]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>South Midlands Communications Ltd</title>
<link href="rewriteCSS.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="[URL="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"]http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0[/URL]" width="770" height="150">
    <param name="movie" value="testing.swf" />
    <param name="quality" value="high" />
    <embed src="testing.swf" quality="high" pluginspage="[URL="http://www.macromedia.com/go/getflashplayer"]http://www.macromedia.com/go/getflashplayer[/URL]" type="application/x-shockwave-flash" width="770" height="150"></embed>
  </object>
</div>
<!--header-->
<div id="navbar">
  <div align="center">Company Overview  | The Future| Customer Care| Meeting Standards | World Markets | Location </div>
</div>
<!--navbar-->
<div id="content">
 <div id="menu">
  <ul>
   <li><a href="#">Home</a></li>
             <li><a href="#">Antennas and Masts  </a></li>
             <li><a href="#">Radio Communications </a></li>
             <li><a href="#">Pneumatic Masts </a></li>
             <li><a href="#">Links and Downloads </a></li>
    <li><a href="#">Contact Us </a></li>
             <li><a href="#">Job Vacancies </a></li>
   </ul>
 <div id="mast">
   <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="[URL="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"]http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0[/URL]" width="50" height="550">
        <param name="movie" value="Images/smc_mast.swf" />
        <param name="quality" value="high" />
        <embed src="Images/smc_mast.swf" quality="high" pluginspage="[URL="http://www.macromedia.com/go/getflashplayer"]http://www.macromedia.com/go/getflashplayer[/URL]" type="application/x-shockwave-flash" width="50" height="550"></embed>
     </object>
 </div>
 </div>
  <!--menu-->
<div id="rightcolumn">
  <p align="center"><img src="Images/builindgfront.jpg" alt="image of premises" width="244" height="162" id="image" /><strong>Welcome to South Midlands Communications Ltd</strong></p>
  <p align="justify">SMC was   established in 1958 and initially specialised in support masts, towers and the   manufacture of antennas. </p>
  <p align="justify">Today   SMC is recognised as one of the most comprehensive and professional mobile   communications companies in the UK and essentially covering the world market. Between   them, the SMC group of companies can advise, design, supply and install   practically every form of mobile communications, from simple but robust radio   systems, mast and antennas to the most sophisticated communications equipment   designed for the 21st Century.</p>
</div>
<div id="news">
<span class="style8">News</span>
<span class="style5"><span class="style7"><span class="style8"><span class="style13"><img src="Images/news_loop.jpg" width="494" height="124" id="image_loop" /></span></span></span></span>
<p align="left"><span class="style5"><span class="style14 style6"><strong>New Produc</strong>t</span> - <span class="style7">NVIS Mobile Loop Antenna</span></span></p>
<p class="style13">The Loop antenna has been designed and manufactured to meet the requirements of NVIS HF mobile communications for both on-road and off-road vehicles, and has been designed to meet the requirements of Mil-810 C, D<span class="style6">...Full story</span></p>
  <p><span class="style5"><span class="style14 style6"><strong>N</strong></span></span><span class="style16 style6"><strong>ew Pro</strong></span><span class="style6"><strong>duct</strong></span><span class="style5"> - <span class="style7">HiloCam</span></span></p>
  <p align="justify" class="style13"><img src="Images/hilo_cam.jpg" width="104" height="190" id="image_hilocam" /></p>
  <p align="justify" class="style13">The HiloCAM from Hilomast, a High Level Photography system that incorporates a single multi-core control cable.  Connecting and operating the system is simple, connect the control box to your computer's USB socket, switch  on and view a real time image through the camera, compose your shot using the control joystick and<span class="style6">...Full story</span> </p>
  <p>&nbsp;</p>
  <p><strong><span class="style14 style6">SMC</span> <span class="style7">Aquires CTS</span></strong></p>
  <p align="justify" class="story style13"><img src="Images/cts_news_coil.jpg" name="image" width="197" height="144" id="image_cts" />The manufacture and sale of CTS and Minns Baluns products has been transferred to South Midlands Communications Ltd. CTS has been manufacturing and designing HF broadband ferrite matching transformers, hybrids, multicouplers,filters and associated products since its formation in 1987. The business and products of Minns Baluns Ltd was absorbed in 1998. All of these products are now manufactured and marketed by South Midlands Communications Ltd<span class="style6">...Full Story</span></p>
  </div>
  <div id="events"> <span class="style8">Events/Exhibitions</span>
    <p> South Midlands Communications like to attend many large and small scale events, we take any chance to show off our products, of which we are very proud of. </p>
    <p class="style7"><strong>Forthcoming Events  2006</strong>:</p>
          <a href="[URL="http://www.communicasia.com/"]http://www.communicasia.com/[/URL]" target="_blank"><strong>CommunicAsia2006 -   20-23rd June 2006</strong></a>    
      <p><a href="[URL="http://www.communicasia.com/"]http://www.communicasia.com/[/URL]" target="_blank"><img src="Images/CMMA2006-col(tagline).jpg" width="400" height="74" border="0" /></a></p>
    <a href="[URL="http://www.theevent.co.uk/"]http://www.theevent.co.uk/[/URL]" target="_blank" class="style7"><strong>DVD - 29th June   2006</strong></a>
    <p class="style9"><a href="[URL="http://www.theevent.co.uk/"]http://www.theevent.co.uk/[/URL]" target="_blank"><img src="Images/DVDfrontpage.gif" width="401" height="57" border="0" /></a></p>
  </div>
  <!--rightcolumn-->
  <BR class="clearsides" /></div><!--content-->
<div id="footer">Site Map | About Us | Privacy Policy | Contact Us |  &copy; South Midlands Communications Ltd </div>
<!--footer-->
</div><!--wrapper-->
</body>
</html>
 
  306 TD Slut
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

and the css
Code:
body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 background-color: #CCCCCC;
 text-align: center;
 padding: 0px;
 margin: 0 auto 0 auto;
}
#wrapper {
 width: 770px;
 text-align: left;
 position: relative;
 background-color: #FFFFFF;
 height: auto;
}
#header {
 height: 150px;
 width: 770px;
 position: relative;
}
#navbar {
 font-size: 110%;
 text-align: left;
 width: 730px;
 border-bottom-width: 1px;
 border-bottom-style: solid;
 border-bottom-color: #000000;
 padding-top: 5px;
 padding-right: 20px;
 padding-bottom: 5px;
 padding-left: 20px;
 letter-spacing: 0.1em;
 position: relative;
 color: #000066;
 height: auto;
}
#content {
 width: 770px;
 position: relative;
 height: 930px;
 padding-bottom: 0px;
 border-bottom-width: 1px;
 border-bottom-style: solid;
 border-bottom-color: #000066;
}
#rightcolumn {
 width: 585px;
 position: relative;
 float: none;
 top: 5px;
 left: 5px;
 padding-right: 5px;
 padding-bottom: 10px;
}
#menu {
 width: 170px;
 position: relative;
 float: left;
 height: 1010px;
 background-color: #CAD6FF;
 border-right-width: 1px;
 border-right-style: solid;
 border-right-color: #000066;
}
#image {
 height: auto;
 width: 160px;
 float: left;
 padding-right: 3px;
 padding-bottom: 3px;
}
#menu ul {
 list-style: none;
 list-style-image: none;
 padding: 0;
 margin: 0;
 text-align: left;
}
#menu ul li {
 font-size: 100%;
 margin: 0 0 5px 0;
 padding: 0 0 0 5px;
}
#menu ul li a {
 display: block;
 background-color: #CAD6FF;
 text-decoration: none;
 width: 150px;
 height: 15px;
 color: #000066;
 padding: 5px;
}
#menu ul li a:hover {
 display: block;
 background-color: #0099FF;
 text-decoration: none;
}
#mast {
 width: 50px;
 height: 550px;
 padding-left: 50px;
}
#footer {
 width: 760px;
 height: 20px;
 text-align: center;
 background-color: #FFFFFF;
 color: #CAD6FF;
 padding: 3px;
}
#events {
 float: none;
 width: 585px;
 position: relative;
 top: 5px;
 padding-top: 10px;
 padding-bottom: 10px;
 left: 5px;
 padding-right: 5px;
}

#news {
 width: 585px;
 float: none;
 position: relative;
 top: 5px;
 border-top-width: 1px;
 border-bottom-width: 1px;
 border-top-style: solid;
 border-top-color: #000066;
 border-bottom-color: #000066;
 border-bottom-style: solid;
 padding-bottom: 10px;
 padding-top: 10px;
 left: 5px;
 padding-right: 5px;
}
#image_cts {
 height: 110px;
 width: 150px;
 float: right;
 border: 1px solid #000000;
 margin-left: 4px;
}
#image_hilocam {
 height: auto;
 width: 60px;
 float: left;
 padding-right: 3px;
 padding-bottom: 3px;
 margin-right: 3px;
}
#image_loop {
 height: auto;
 width: 300px;
 float: right;
 border: 1px solid #000000;
 margin-left: 3px;
}
.clearsides {
    display: block;
    clear: both;
    height: 1px;
    overflow: hidden;
}
.style5 {font-weight: bold}
.style6 {color: #FF0000}
.style7 {color: #000066}
.style8 {
 font-size: 14px;
 font-weight: bold;
}
.style9 {font-weight: bold; color: #000066;
}
a:link {
 color: #000066;
 text-decoration: none;
}
a:visited {
 text-decoration: none;
 color: #000066;
}
a:hover {
 text-decoration: none;
 color: #000066;
}
a:active {
 text-decoration: none;
 color: #000066;
}
 
  20VT Clio & 9-5 HOT
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

it works fine in my firefox mate?

its not centered but thats about it.
 
  306 TD Slut
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

its all to the left and the 'dvd' banner at the bottom is over to the left and theres a white coulmn down the right hand side, and lines everywhere. hmm
 
  20VT Clio & 9-5 HOT
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

to make it centered, you need to add a margin to your 'wrapper'

0 auto 0 auto

this makes the left and right margins automaticaly size depending on the screen size. the fact your body has text-align:center means it will sit in the middle of the screen.

ill have a look at the rest mate, gimme half hour :)
 
  20VT Clio & 9-5 HOT
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

you want your right column float to set to :right instead of :none

not sure on the dvd bit i cant see it? i dont have ur images tho so i can only see the html no pics or flash ro anything
 
  306 TD Slut
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

yeah sorry, dvd bit is the bottom picture 401px x57px. ill give that a go.
 
  306 TD Slut
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

right. floated all of the right hand columns right, in FF they appear fine now. the whole page looks as it should, apart from the left column. the base of the left column (menu) should stop at the footer, but it goes past it an carrys on down the page too far.
 
  20VT Clio & 9-5 HOT
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

probably due to your height mate. its set to 1010px. set it to auto instead
 
  306 TD Slut
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

hey matey,

just a quickie! do i use the same CSS file for all my pages of the website? Which means that some would be unused and some used in some pages?

for example, on the index page there is a box in the right column called #events, but in the next page for site site, im using the same layout but instead of an #events box in the right column i want a box called #news_update, with different properties.

so all the CSS for the whole site is in the same file?
 
  20VT Clio & 9-5 HOT
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

yep thats right mate. sometimes you can have more than one. but in most cases just use the same one for them all, and change the DIV i'd's or use classes if they are the same on each page. if the properties are identical then use a class and reduce your css file size.
 
  20VT Clio & 9-5 HOT
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

no worries.

best way to create a page with similar layout, and to make it easy to make global changes is to create a template with all your structure. then you create areas that are editable, such as the box your on about, and the main content area.

all you do then is create a new page from the template and the structure is already there.

any changes, just edit the template, and it updates every page automatically to match!
 
  306 TD Slut
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

i have already created a template, didnt realise it would change every page if i changed it, good idea really.

didnt know about just having editable bits, take it thats why when i go to save it it says it has no editable regions etc..

thanks :)
 
  306 TD Slut
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

another one for ya craig!

i want to have a link, target="_self" but i want the link to open at a certain point half way down the page.

say i had a link to a page which is in three sections. top is the news, middle is the events, bottom is the more info. when i want this page to open, i want it to open half way down on the middle/events section.

is there a way of doing this?
 
  172
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

furry_cup said:
another one for ya craig!

i want to have a link, target="_self" but i want the link to open at a certain point half way down the page.

say i had a link to a page which is in three sections. top is the news, middle is the events, bottom is the more info. when i want this page to open, i want it to open half way down on the middle/events section.

is there a way of doing this?

No need for target="_self". You need an anchor in your page. Wherever you want the page to load at enter <a name="anchor_name_here"></a>. In your link enter <a href="page.html#anchor_name_here">link title</a>

Voilá
 
  306 TD Slut
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

Thanks for that 172.com, :)

having some problems with my background image. its repeating it to much vertically, so when i view the page, the page stops but the background image carries on down the page.

Its a shadow for the page. i made an image, the width of my content with a shadow then set it as the background. i made the image 10px in height so that i could get it to repeat down the page to the appropriate size, but its repeating to many times.

is there an easier way of making the background?

baring in mind that each page of my website varies in height..

cheers peeps.
 
  172
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

you must have extra space at the end of your page then if it's doing that. Link?
 
  306 TD Slut
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

its not uploaded onto the net matey. in dreamweaver it appears how i want it to with no space at the bottom, but when veiwed it adds the space.. ~:-/
 
  172
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

furry_cup said:
its not uploaded onto the net matey. in dreamweaver it appears how i want it to with no space at the bottom, but when veiwed it adds the space.. ~:-/

DreamWeaver :dead:.

Code?
 
  20VT Clio & 9-5 HOT
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

I like dreamweaver for previewing work, and for managing websites too. Especially if they are using contribute. The WYSISYG part of it is crap though.

it does sound like something is up with your page height. you dont have any fixed height settings in your content divs do you? or dodgy margin settings?

Backgrounds will only show up to the point of the last bit of content on the site.
 
  306 TD Slut
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

i checked the heights of all my boxs, body, content navbar etc.. they all add up correctly, there are no dodgy ones. hmm. i took the shadow away and i think it looks a bit better without it as i have made more adjustments.

still gonna puzzle me tho!

172.com what do you use to create sites?
 
  306 TD Slut
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

the same body CSS (where the background image is set) applies to all my pages. do you think where on one page it is repeated app. 10 times then on another page, which is shorter its repaeating it the same amount as the longer page? if you get me..?
 
  20VT Clio & 9-5 HOT
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

it should repeate as many times as it requires to either fill the screen, or fill the content of the site when its scrolled down. try adding a background-attatchment: fixed
 
  172
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

furry_cup said:
172.com what do you use to create sites?

jEdit (www.jedit.org). Takes a bit of getting used to, I wouldn't recommend it to anyone who doesn't use it 8 hours a day. Dreamweaver is fine for normal everyday stuff though.
 
  306 TD Slut
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

looks scary! lol too advanced for my in experienced brain!!
 
  Honda S2000
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

You should feel lucky that you have managed to get help on here! My boss saw a course on CSS that we wouldn't have to pay for and decided to send me on it even though I know CSS!! Its 2 days and in a hotel overnight with an 8am start the 2nd day!! What can they possibly show for 2 days worth of CSS!!!!
 
  306 TD Slut
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

maybe its a beginners course starting right from the basics? thats why its 2 days..? never know, u may learn something you didnt already know.

i do feel extremely lucky! CS is good for more things than clio's! its a good excuse for me to be on the CS forum at work, if my boss asks what im doing i can just show him that im getting help.

a course sounds pretty cool, all very expensive tho!

cheers again everyone who has helped me, craig, 172.com etc..
 
  172
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

Kelly_ said:
You should feel lucky that you have managed to get help on here! My boss saw a course on CSS that we wouldn't have to pay for and decided to send me on it even though I know CSS!! Its 2 days and in a hotel overnight with an 8am start the 2nd day!! What can they possibly show for 2 days worth of CSS!!!!

You'd be amazed. IMHO, it's a specialist field in itself; multi-browser, accessible CSS + CSS P is quite in depth, I doubt you will even get a full comprehension of CSS from just two days... that is, of course, if it's a good course.

Developers often snub at people who only work in HTML and CSS, but it's a very specialised field and to get perfect is just as hard as coding any website.
 
  Honda S2000
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

I have got a description of what is being taught so hopefully i'll learn something new. Has anyone been on a residential course for IT? What type of people go on them? What happens at night? Do people just go to their rooms or stay up? I'm dreading it! 2 days with total strangers, breakfast through till 9pm... No offense meant by this to anyone but I hope it's not all total IT geeks!!
 
  306 TD Slut
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

haha, well if u class ur self as a non geek then im sure there will be others, i wouldnt worry about it. u'll have fun and there will be loads of people there in a similar situation as yourself!

you'll have a laugh more than anything.

how come you got the course free?
 


Top