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.
306 TD Slut
Re: trying to get my head around CSS!! AAARRRRGH!!!!!
right, im trying to get 6, 160px x 20px box's down the left hand side of the page, idea is, each box will have a link in.
one under the other. when i type in the code they come up along side each other, not under each other. what am i doing wrong?
right, im trying to get 6, 160px x 20px box's down the left hand side of the page, idea is, each box will have a link in.
one under the other. when i type in the code they come up along side each other, not under each other. what am i doing wrong?
20VT Clio & 9-5 HOT
Re: trying to get my head around CSS!! AAARRRRGH!!!!!
ok what id do is in your 'content' area have 2 divs that look like columns. one down the left and one down the right. one floated left, one right, then in your left column (or DIV) have your smaller divs within. if they are quite narrow (enought to get 2 or more in the left column) and you want them to be underneath each other then either use clear:both in your css for the boxes and it ensures that they dont allow anything along side them, or add a margin on the right so they site under one another.
post up some code and your css and ill take a look matey
ok what id do is in your 'content' area have 2 divs that look like columns. one down the left and one down the right. one floated left, one right, then in your left column (or DIV) have your smaller divs within. if they are quite narrow (enought to get 2 or more in the left column) and you want them to be underneath each other then either use clear:both in your css for the boxes and it ensures that they dont allow anything along side them, or add a margin on the right so they site under one another.
post up some code and your css and ill take a look matey
306 TD Slut
Re: trying to get my head around CSS!! AAARRRRGH!!!!!
i think i managed to solve it just before i left work, i copied and pasted the div 6 times and left the float box emptyand they went under each other, im starting to understand the html now, but i get confused once all the content is in it too and it all starts getting split up. html is good tho in dreamweaver as its color coded.
ill post up some code tomorrow so you can take a looksie. thanks mate
mark.
i think i managed to solve it just before i left work, i copied and pasted the div 6 times and left the float box emptyand they went under each other, im starting to understand the html now, but i get confused once all the content is in it too and it all starts getting split up. html is good tho in dreamweaver as its color coded.
ill post up some code tomorrow so you can take a looksie. thanks mate
mark.
306 TD Slut
Re: trying to get my head around CSS!! AAARRRRGH!!!!!
Mornin,
Right, prob gonna laugh at my attempt, so far its just flash banner at the top, a horizontal navigation bar consisting of 6 links.
then another 6 links in the left vertical column.
i have 3 CSS, Header_CSS, Navbar, Left_Column the flash banner has no CSS assigned to it, The horizontal links below the flash banner are assigned to .NavBar (header)
and the left hand column has .Left_Column assigned to it. (content)
and nothing in the footer yet.
<!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>
<link href="Header.css" rel="stylesheet" type="text/css" />
<link href="Navbar.css" rel="stylesheet" type="text/css" />
<link href="left column content.css" rel="stylesheet" type="text/css" />
</head>
<body>
<object classid="clsid
27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="770" height="150" class="header_CSS">
<param name="movie" value="file:///C|/Documents and Settings/msimons/Desktop/testing.swf" />
<param name="quality" value="high" /><param name="SCALE" value="noborder" />
<embed src="file:///C|/Documents and Settings/msimons/Desktop/testing.swf" width="770" height="150" scale="noborder" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>
</object>
<div class="Navbar" id="header">Home | Antennas and Masts | Radio Comms | Pneumatic Masts | Links and Downloads | Contact Us</div><!--header-->
<div class="Left_Column" id="content">
<div class="Left_Column" id="content">Meeting Standards </div>
<div class="Left_Column" id="content">World Markets </div>
<div class="Left_Column" id="content">Customer Services </div>
<div class="Left_Column" id="content">The Future </div>
<div class="Left_Column" id="content">Location</div>
<div class="Left_Column" id="content">Job Vacancies </div>
<div class="Left_Column" id="content"></div>
<!--content-->
<div id="footer"></div><!--footer-->
</div><!--wrapper-->
</body>
</html>
Mornin,
Right, prob gonna laugh at my attempt, so far its just flash banner at the top, a horizontal navigation bar consisting of 6 links.
then another 6 links in the left vertical column.
i have 3 CSS, Header_CSS, Navbar, Left_Column the flash banner has no CSS assigned to it, The horizontal links below the flash banner are assigned to .NavBar (header)
and the left hand column has .Left_Column assigned to it. (content)
and nothing in the footer yet.
<!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>
<link href="Header.css" rel="stylesheet" type="text/css" />
<link href="Navbar.css" rel="stylesheet" type="text/css" />
<link href="left column content.css" rel="stylesheet" type="text/css" />
</head>
<body>
<object classid="clsid
27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="770" height="150" class="header_CSS"><param name="movie" value="file:///C|/Documents and Settings/msimons/Desktop/testing.swf" />
<param name="quality" value="high" /><param name="SCALE" value="noborder" />
<embed src="file:///C|/Documents and Settings/msimons/Desktop/testing.swf" width="770" height="150" scale="noborder" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>
</object>
<div class="Navbar" id="header">Home | Antennas and Masts | Radio Comms | Pneumatic Masts | Links and Downloads | Contact Us</div><!--header-->
<div class="Left_Column" id="content">
<div class="Left_Column" id="content">Meeting Standards </div>
<div class="Left_Column" id="content">World Markets </div>
<div class="Left_Column" id="content">Customer Services </div>
<div class="Left_Column" id="content">The Future </div>
<div class="Left_Column" id="content">Location</div>
<div class="Left_Column" id="content">Job Vacancies </div>
<div class="Left_Column" id="content"></div>
<!--content-->
<div id="footer"></div><!--footer-->
</div><!--wrapper-->
</body>
</html>
306 TD Slut
Re: trying to get my head around CSS!! AAARRRRGH!!!!!
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>Untitled Document</title>
<link href="Header.css" rel="stylesheet" type="text/css" />
<link href="Navbar.css" rel="stylesheet" type="text/css" />
<link href="left column content.css" rel="stylesheet" type="text/css" />
</head>
<body>
<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" class="header_CSS">
<param name="movie" value="[URL="file:///C|/Documents"]file:///C|/Documents[/URL] and Settings/msimons/Desktop/testing.swf" />
<param name="quality" value="high" /><param name="SCALE" value="noborder" />
<embed src="[URL="file:///C|/Documents"]file:///C|/Documents[/URL] and Settings/msimons/Desktop/testing.swf" width="770" height="150" scale="noborder" quality="high" pluginspage="[URL="http://www.macromedia.com/go/getflashplayer"]http://www.macromedia.com/go/getflashplayer[/URL]" type="application/x-shockwave-flash"></embed>
</object>
<div class="Navbar" id="header">Home | Antennas and Masts | Radio Comms | Pneumatic Masts | Links and Downloads | Contact Us</div><!--header-->
<div class="Left_Column" id="content">
<div class="Left_Column" id="content">Meeting Standards </div>
<div class="Left_Column" id="content">World Markets </div>
<div class="Left_Column" id="content">Customer Services </div>
<div class="Left_Column" id="content">The Future </div>
<div class="Left_Column" id="content">Location</div>
<div class="Left_Column" id="content">Job Vacancies </div>
<div class="Left_Column" id="content"></div>
<!--content-->
<div id="footer"></div><!--footer-->
</div><!--wrapper-->
</body>
</html>
306 TD Slut
Re: trying to get my head around CSS!! AAARRRRGH!!!!!
okay then.lol.
just doing a couple of things then i'll post it up again hopefully less confusing.
is there an easier way of moving the css to one css file other than deleting them and re making them?
i managed to get the six links down the left side and a column on the right but there is like a 600px gap between the two columns.. arrgh
okay then.lol.
just doing a couple of things then i'll post it up again hopefully less confusing.
is there an easier way of moving the css to one css file other than deleting them and re making them?
i managed to get the six links down the left side and a column on the right but there is like a 600px gap between the two columns.. arrgh
306 TD Slut
Re: trying to get my head around CSS!! AAARRRRGH!!!!!
right. i messed it up for a minute there. take a look at this.
i lost the right hand column now, and dont quite understand whats going on with the wrapper.
right. i messed it up for a minute there. take a look at this.
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>Untitled Document</title>
<style type="text/css">
<!--
.Right_Column {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
float: right;
width: 400px;
height: 400px;
}
.Footer {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
color: #000099;
background-color: #EEEEEE;
width: 770px;
text-align: center;
}
.Left_ColumnCopy {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
color: #000099;
background-color: #EEEEEE;
width: 130px;
float: none;
height: 20px;
padding: 4px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #000066;
}
.Navbar {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: normal;
width: 770px;
height: 20px;
float: none;
text-align: center;
letter-spacing: 0.1em;
color: #000066;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #000066;
padding-top: 2px;
}
.header_CSS {
height: 150px;
width: 770px;
position: relative;
background-position: center center;
word-spacing: 1em;
}
-->
</style>
</head>
<body>
<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" class="header_CSS">
<param name="movie" value="[URL="file:///C|/Documents"]file:///C|/Documents[/URL] and Settings/msimons/Desktop/testing.swf" />
<param name="quality" value="high" /><param name="SCALE" value="noborder" />
<embed src="[URL="file:///C|/Documents"]file:///C|/Documents[/URL] and Settings/msimons/Desktop/testing.swf" width="770" height="150" scale="noborder" quality="high" pluginspage="[URL="http://www.macromedia.com/go/getflashplayer"]http://www.macromedia.com/go/getflashplayer[/URL]" type="application/x-shockwave-flash"></embed>
</object>
<div class="Navbar" id="header">Home | Antennas and Masts | Radio Comms | Pneumatic Masts | Links and Downloads | Contact Us</div><!--header-->
<div class="Left_ColumnCopy" id="content">Meeting Standards </div>
<div class="Left_ColumnCopy" id="content">World Markets </div>
<div class="Left_ColumnCopy" id="content">Customer Services </div>
<div class="Left_ColumnCopy" id="content">The Future </div>
<div class="Left_ColumnCopy" id="content">Location</div>
<div class="Left_ColumnCopy" id="content">Job Vacancies </div>
<div id="content"></div><!--content-->
<div class="Footer" id="footer">footer</div>
<!--footer-->
</div><!--wrapper-->
</body>
</html>i lost the right hand column now, and dont quite understand whats going on with the wrapper.
Re: trying to get my head around CSS!! AAARRRRGH!!!!!
css is great, dead easy once you get into it actually. I've been slowly using it to build up my site. Can't beat changing a few lines in one document to totally change your whole site. Esspecially good once your site starts to grow.
This is my effort http://www.malkybaby.com
Although right now im having a nightmare trying to sort my pic gallery, but i'll get there.
css is great, dead easy once you get into it actually. I've been slowly using it to build up my site. Can't beat changing a few lines in one document to totally change your whole site. Esspecially good once your site starts to grow.
This is my effort http://www.malkybaby.com
Although right now im having a nightmare trying to sort my pic gallery, but i'll get there.
306 TD Slut
Re: trying to get my head around CSS!! AAARRRRGH!!!!!
nice site, i think i have a long way to, guess i only started yesterday. how do you get the shadow effect?
Adam,
heres what it looks like so far:
i want a column to the right of the links on the left side. when i pasted the code to divide it into columns it didnt work and in the 'design' mode it had html highlighted in yellow.
and here is the code for that screen shot
cheers matey
nice site, i think i have a long way to, guess i only started yesterday. how do you get the shadow effect?
Adam,
heres what it looks like so far:
i want a column to the right of the links on the left side. when i pasted the code to divide it into columns it didnt work and in the 'design' mode it had html highlighted in yellow.
and here is the code for that screen shot
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>Untitled Document</title>
<style type="text/css">
<!--
.Right_Column {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
float: right;
width: 400px;
height: 400px;
}
.Footer {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
color: #000099;
background-color: #EEEEEE;
width: 770px;
text-align: center;
}
.Left_ColumnCopy {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
color: #000099;
background-color: #EEEEEE;
width: 130px;
float: none;
height: 20px;
padding: 4px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #000066;
clear: left;
}
.Navbar {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: normal;
width: 770px;
height: 20px;
float: none;
text-align: center;
letter-spacing: 0.1em;
color: #000066;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #000066;
padding-top: 2px;
}
.body {
margin: 0 auto 0 auto;
padding: 0px;
background-color:#FFFFFF;
background-position: top;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.7em;
text-align: left;
}
.header_CSS {
height: 150px;
width: 770px;
position: relative;
background-position: center center;
word-spacing: 1em;
}
-->
</style>
</head>
<body>
<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" class="header_CSS">
<param name="movie" value="[URL="file:///C|/Documents"]file:///C|/Documents[/URL] and Settings/msimons/Desktop/testing.swf" />
<param name="quality" value="high" /><param name="SCALE" value="noborder" />
<embed src="[URL="file:///C|/Documents"]file:///C|/Documents[/URL] and Settings/msimons/Desktop/testing.swf" width="770" height="150" scale="noborder" quality="high" pluginspage="[URL="http://www.macromedia.com/go/getflashplayer"]http://www.macromedia.com/go/getflashplayer[/URL]" type="application/x-shockwave-flash"></embed>
</object>
<div class="Navbar" id="header">Home | Antennas and Masts | Radio Comms | Pneumatic Masts | Links and Downloads | Contact Us</div><!--header-->
<div class="Left_ColumnCopy" id="content">Meeting Standards </div>
<div class="Left_ColumnCopy" id="content">World Markets </div>
<div class="Left_ColumnCopy" id="content">Customer Services </div>
<div class="Left_ColumnCopy" id="content">The Future </div>
<div class="Left_ColumnCopy" id="content">Location</div>
<div class="Left_ColumnCopy" id="content">Job Vacancies </div>
<div id="content"></div><!--content-->
<div class="Footer" id="footer">footer</div>
<!--footer-->
</body>
</html>cheers matey
20VT Clio & 9-5 HOT
Re: trying to get my head around CSS!! AAARRRRGH!!!!!
right mate, first off looks like you have your CSS at the top of your html. all you need to do to combine whats in both your CSS docs is to copy all of whats in one of them, and paste it into another.
You were right in the first place with the links to the css doc, rather than the syles in the top of the html as above.
you dont need to repeat thinks such as font size, weight, family etc eaither. just set them up once in the 'body' area in your CSS doc and they will cascade all the way through your page. if certain DIVS require different fonts, etc then just add those to that DIV property only.
Definitely getting the hang of it tho pal, just split your css from your html and your on the right track again. the problem with dreemweaver is if you use their toolbars to add fonts, width etc, then it tends to add the styles in the top of the html rather than in a seperate stylesheet. It really is worth spending the extra time doing it all manually and simply using dreamweaver to see how it looks and to manage your sites etc. its worth using it to type text etc, but not for formatting.
to split the above you would need the following (note the bits in red. dont forger to add a title to your doc, add the link to the CSS file (wherever you keep it) and also dont use links to flash objects that are local. always keep within your website folder. in dreamweaver you need to define a new site, and create a folder somewhere on your pc with all the stuff for this website inside it. Dreamweaver then pretends that this is online and adds all the correct links to the flash, images, etc ,etc. otherwise when its online it will be looking for files on the viewers C drive which wont exist so it wont work.
HTML:
CSS - body has no '.' or '#' just simply body. samwe with html, p, h1, h2, etc, etc. text align also needs to be 'center' if you want the page centred. no need for background position as you dont have a background image either. its also advisable to do things in order they are displayed. so wrapper would be under the body for example. noticed you are missing wrapper actually. you need tha as its the outline to the whole site and defines the width etc. Also anything else on the whole site sits within it so it all works in relation to each other. you can see from your screenshot there isnt a wrapper sitting around all of your other work.
you would want something like:
Also items such as header and footer can use '#' as they are unique so ID's not classes. this is simply splitting your css from html. iv not changed anything other than the '.' from body.
right mate, first off looks like you have your CSS at the top of your html. all you need to do to combine whats in both your CSS docs is to copy all of whats in one of them, and paste it into another.
You were right in the first place with the links to the css doc, rather than the syles in the top of the html as above.
you dont need to repeat thinks such as font size, weight, family etc eaither. just set them up once in the 'body' area in your CSS doc and they will cascade
all the way through your page. if certain DIVS require different fonts, etc then just add those to that DIV property only.Definitely getting the hang of it tho pal, just split your css from your html and your on the right track again. the problem with dreemweaver is if you use their toolbars to add fonts, width etc, then it tends to add the styles in the top of the html rather than in a seperate stylesheet. It really is worth spending the extra time doing it all manually and simply using dreamweaver to see how it looks and to manage your sites etc. its worth using it to type text etc, but not for formatting.
to split the above you would need the following (note the bits in red. dont forger to add a title to your doc, add the link to the CSS file (wherever you keep it) and also dont use links to flash objects that are local. always keep within your website folder. in dreamweaver you need to define a new site, and create a folder somewhere on your pc with all the stuff for this website inside it. Dreamweaver then pretends that this is online and adds all the correct links to the flash, images, etc ,etc. otherwise when its online it will be looking for files on the viewers C drive which wont exist so it wont work.
HTML:
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>[B][COLOR=Red]Untitled Document[/COLOR][/B]</title>
[COLOR=Red][B]<link href="/css.css" rel="stylesheet" type="text/css" />[/B][/COLOR]
</head>
<body>
<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/s...rsion=7,0,19,0[/URL]" width="770" height="150" class="header_CSS">
<param name="movie" value="[B][COLOR=Red][URL="file:///C%7C/Documents"]file:///C|/Documents[/URL] and Settings/msimons/Desktop/testing.swf"[/COLOR][/B] />
<param name="quality" value="high" /><param name="SCALE" value="noborder" />
<embed src="[B][COLOR=Red][URL="file:///C%7C/Documents"]file:///C|/Documents[/URL] and Settings/msimons/Desktop/testing.swf[/COLOR][/B]" width="770" height="150" scale="noborder" quality="high" pluginspage="[URL="http://www.macromedia.com/go/getflashplayer"]http://www.macromedia.com/go/getflashplayer[/URL]" type="application/x-shockwave-flash"></embed>
</object>
<div class="Navbar" id="header">Home | Antennas and Masts | Radio Comms | Pneumatic Masts | Links and Downloads | Contact Us</div><!--header-->
<div class="Left_ColumnCopy" id="content">Meeting Standards </div>
<div class="Left_ColumnCopy" id="content">World Markets </div>
<div class="Left_ColumnCopy" id="content">Customer Services </div>
<div class="Left_ColumnCopy" id="content">The Future </div>
<div class="Left_ColumnCopy" id="content">Location</div>
<div class="Left_ColumnCopy" id="content">Job Vacancies </div>
<div id="content"></div><!--content-->
<div class="Footer" id="footer">footer</div>
<!--footer-->
</body>
</html>you would want something like:
Code:
#wrapper {
width: 680px;
height: auto;
text-align: left;
background-color?, etc, etc,
Code:
body {
margin: 0 auto 0 auto;
padding: 0px;
background-color:#FFFFFF;
background-position: top;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.7em;
text-align: left;
}
.Right_Column {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
float: right;
width: 400px;
height: 400px;
}
.Footer {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
color: #000099;
background-color: #EEEEEE;
width: 770px;
text-align: center;
}
.Left_ColumnCopy {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
color: #000099;
background-color: #EEEEEE;
width: 130px;
float: none;
height: 20px;
padding: 4px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #000066;
clear: left;
}
.Navbar {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: normal;
width: 770px;
height: 20px;
float: none;
text-align: center;
letter-spacing: 0.1em;
color: #000066;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #000066;
padding-top: 2px;
}
.header_CSS {
height: 150px;
width: 770px;
position: relative;
background-position: center center;
word-spacing: 1em;
}
Last edited:
306 TD Slut
Re: trying to get my head around CSS!! AAARRRRGH!!!!!
better matey?
really appreciate this dude, i'd like to buy u a pint, whats ur paypal address lol..
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="../SMC with CSS/CSS SMC.css" rel="stylesheet" type="text/css" />
</head>
<body class="CSS">
<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" class="header_CSS">
<param name="movie" value="../SMC with CSS/testing.swf" />
<param name="quality" value="high" /><param name="SCALE" value="noborder" />
<embed src="../SMC with CSS/testing.swf" width="770" height="150" scale="noborder" quality="high" pluginspage="[URL="http://www.macromedia.com/go/getflashplayer"]http://www.macromedia.com/go/getflashplayer[/URL]" type="application/x-shockwave-flash"></embed>
</object>
<div class="Navbar" id="header">Home | Antennas and Masts | Radio Comms | Pneumatic Masts | Links and Downloads | Contact Us</div><!--header-->
<div class="Left_ColumnCopy" id="content">Meeting Standards </div>
<div class="Left_ColumnCopy" id="content">World Markets </div>
<div class="Left_ColumnCopy" id="content">Customer Services </div>
<div class="Left_ColumnCopy" id="content">The Future </div>
<div class="Left_ColumnCopy" id="content">Location</div>
<div class="Left_Column" id="content">Job Vacancies </div>
<div id="content"></div><!--content-->
<div class="Footer" id="footer"><a href="#">About Us</a> | <a href="#">Site Map</a> | <a href="#">Privacy Policy</a> | <a href="#">Contact Us</a> | <span class="style1">©2006 South Midlands Communications Ltd</span></div>
<!--footer-->
</body>
</html>better matey?
really appreciate this dude, i'd like to buy u a pint, whats ur paypal address lol..
20VT Clio & 9-5 HOT
Re: trying to get my head around CSS!! AAARRRRGH!!!!!
better yes. you dont need to assign classes AND ID's to half your items though, just have an ID if tehre is only one occurance, and a class if there are more than one.
also advisable not to use spaces in file/folder names like in your css link as when its online it messes up.
dont forget to stick your wrapper to start at teh top of the body, and end at teh bottom of ya footer. stick you 'body' text-align property to center and see it align in the middle of the screen!
better yes. you dont need to assign classes AND ID's to half your items though, just have an ID if tehre is only one occurance, and a class if there are more than one.
also advisable not to use spaces in file/folder names like in your css link as when its online it messes up.
dont forget to stick your wrapper to start at teh top of the body, and end at teh bottom of ya footer. stick you 'body' text-align property to center and see it align in the middle of the screen!
20VT Clio & 9-5 HOT
Re: trying to get my head around CSS!! AAARRRRGH!!!!!
give this a go, should look like this:
clicky
thats basicaly what u need to get going, with the layout structure. Study the html and css and play about with the css slightly and see how things change about. best way to learn is trial and error.
HTML:
CSS:
ok i best get some work done at work today now lol!!
give this a go, should look like this:
clicky
thats basicaly what u need to get going, with the layout structure. Study the html and css and play about with the css slightly and see how things change about. best way to learn is trial and error.
HTML:
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>Furry Cups webpage</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
header to go here
</div><!--header-->
<div id="navbar">Home | Antennas and Masts | Radio Comms | Pneumatic Masts | Links and Downloads | Contact Us
</div><!--navbar-->
<div id="content">
<div id="menu">
<ul>
<li><a href="#">Homepage </a></li>
<li><a href="#">Company Profile </a></li>
<li><a href="#">Our Capabilities</a></li>
<li><a href="#">Our Products</a></li>
<li><a href="#">Joint Ventures</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">News</a></li>
</ul>
</div><!--leftcolumn-->
<div id="rightcolumn">main content goes here </div><!--rightcolumn-->
<br class="clearsides" /></div><!--content-->
<div id="footer">footer goes here </div>
<!--footer-->
</div><!--wrapper-->
</body>
</html>
Code:
/* CSS Document */
body {
margin: 0 auto 0 auto;
padding: 0px;
background-color: #CCCCCC;
background-position: top;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.7em;
text-align: center;
}
.clearsides {
display: block;
clear: both;
height: 1px;
overflow: hidden;
}
#wrapper {
width: 770px;
height: auto;
position: relative;
text-align: center;
background-color:#FFFFFF;
margin: 20px auto 0 auto;
border: 1px solid #CCCCCC;
}
#header {
height: 150px;
width: 770px;
position: relative;
border-bottom: 1px solid #CCCCCC;
}
#navbar {
font-size: 110%;
width: 730px;
height: auto;
position: relative;
text-align: left;
letter-spacing: 0.1em;
color: #000066;
border-bottom: 1px solid #CCCCCC;
padding: 5px 20px 5px 20px;
}
#content {
width: 730px;
height: auto;
position: relative;
padding: 10px 20px;
clear: both;
text-align: left;
}
#rightcolumn {
width: 440px;
height: auto;
position: relative;
float: right;
padding: 10px;
border: 1px solid #999999;
text-align: left;
}
#menu {
width: 230px;
height: auto;
position: relative;
float: left;
padding: 10px;
border: 1px solid #999999;
}
#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 {
padding: 5px;
margin: 0;
display: block;
text-decoration: none;
background-color: #CCCCCC;
}
#menu ul li a:hover {
display: block;
text-decoration: none;
background-color: #0099FF;
}
#footer {
width: 770px;
height: 150px;
text-align: center;
background-color: #0066CC;
position: relative;
}ok i best get some work done at work today now lol!!
Last edited:
306 TD Slut
Re: trying to get my head around CSS!! AAARRRRGH!!!!!
i like that. alot neater than mine. i need to neaten up my html etc and understand it more. im gonna try and neaten mine up etc and refer to yours for help etc.. the right column id like to be split into sections, top section being news and second being events with a line to divide them. then another flash anim on the right hand side.
just been told they want to use flash menus too, like on www.hilomast.com
i like that. alot neater than mine. i need to neaten up my html etc and understand it more. im gonna try and neaten mine up etc and refer to yours for help etc.. the right column id like to be split into sections, top section being news and second being events with a line to divide them. then another flash anim on the right hand side.
just been told they want to use flash menus too, like on www.hilomast.com
172, Tiguan
Re: trying to get my head around CSS!! AAARRRRGH!!!!!
Heres one i've just done. http://sites.assertis.net/testing/wsmr/index.html
Still under development and built using our content management system.
It will fully resize in IE and Firefox (increase/decrese text size and see what happens)
Furry_cup, you are getting there - (Craig your a legend! I paid good money for a CSS book lol!) - try reducing the size of your css, i.e. you don't need to specify font tags in every class, try doing it once in the body tag instead.
Heres one i've just done. http://sites.assertis.net/testing/wsmr/index.html
Still under development and built using our content management system.
It will fully resize in IE and Firefox (increase/decrese text size and see what happens)
Furry_cup, you are getting there - (Craig your a legend! I paid good money for a CSS book lol!) - try reducing the size of your css, i.e. you don't need to specify font tags in every class, try doing it once in the body tag instead.
20VT Clio & 9-5 HOT
Re: trying to get my head around CSS!! AAARRRRGH!!!!!
yeh once you get the hang of it you'll be laughing mate!
Jon, nice site that pal, very clean and professional looking.
iv got 3 more sites needing doing, but I cant be arsed at the mo with spending most of my free time doing the angelworks one lol! the ex bird wants one doing for free too the cheeky git!
yeh once you get the hang of it you'll be laughing mate!
Jon, nice site that pal, very clean and professional looking.
iv got 3 more sites needing doing, but I cant be arsed at the mo with spending most of my free time doing the angelworks one lol! the ex bird wants one doing for free too the cheeky git!
20VT Clio & 9-5 HOT
Re: trying to get my head around CSS!! AAARRRRGH!!!!!
with using DIVS there is a little trick you need to use.
If you look in my CSS above there is a '.clearsides' property.
at the end of your content, before the footer, you need to add a BR with the class as 'clearsides.
this makes sure that the page goes over the rest of your content, otherwise it will all sit on top of each other!
in my code its like this:
<br class="clearsides" />
and this is what it looks like without it:
http://www.craig-adams.co.uk/testing/furrycup/index2.html
with using DIVS there is a little trick you need to use.
If you look in my CSS above there is a '.clearsides' property.
at the end of your content, before the footer, you need to add a BR with the class as 'clearsides.
this makes sure that the page goes over the rest of your content, otherwise it will all sit on top of each other!
in my code its like this:
<br class="clearsides" />
and this is what it looks like without it:
http://www.craig-adams.co.uk/testing/furrycup/index2.html
furry_cup said:
306 TD Slut
Re: trying to get my head around CSS!! AAARRRRGH!!!!!
li><a href="#">Homepage </a></li>
<li><a href="#">Company Profile </a></li>
<li><a href="#">Our Capabilities</a></li>
<li><a href="#">Our Products</a></li>
<li><a href="#">Joint Ventures</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">News</a></li
is there a specific reason why you used <li> and <a characters, could i use any letter i wanted like <ab><c href="#">News</c></ab
li><a href="#">Homepage </a></li>
<li><a href="#">Company Profile </a></li>
<li><a href="#">Our Capabilities</a></li>
<li><a href="#">Our Products</a></li>
<li><a href="#">Joint Ventures</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">News</a></li
is there a specific reason why you used <li> and <a characters, could i use any letter i wanted like <ab><c href="#">News</c></ab
20VT Clio & 9-5 HOT
Re: trying to get my head around CSS!! AAARRRRGH!!!!!
<li> is for lists. I find them easie to create menu's using CSS as you can make rollovers work nicely for them if you add 'block' properties. see my cs above.
<a href> <a> is a web link/URL the # is there cos i dont know your actual links. Sorry if that got confusing with the #'s you need to use in CSS
Basically using a # as the address of the link, makes teh link active, but doesnt go anywhere. that way you can test out rollovers or links in a webpage.
a genuine link would be like this:
a list of html tags here. you'll prob never use the majority of them though, i dont.
http://www.w3schools.com/tags/default.asp
<li> is for lists. I find them easie to create menu's using CSS as you can make rollovers work nicely for them if you add 'block' properties. see my cs above.
<a href> <a> is a web link/URL the # is there cos i dont know your actual links. Sorry if that got confusing with the #'s you need to use in CSS
Basically using a # as the address of the link, makes teh link active, but doesnt go anywhere. that way you can test out rollovers or links in a webpage.
a genuine link would be like this:
Code:
<li><a href="contactus.html">Contact Us</a></li>
or
<li><a href="http://www.google.co.uk">google link</a></li>a list of html tags here. you'll prob never use the majority of them though, i dont.
http://www.w3schools.com/tags/default.asp
306 TD Slut
Re: trying to get my head around CSS!! AAARRRRGH!!!!!
thanks, thats one thing i did know! that # activate the links. im guessing also in that line you could add the target location _blank, _parent etc..
Ive started fresh writing the whole page again then going to go through and create the CSS using the help you've given me! thanks for this mate.
thanks, thats one thing i did know! that # activate the links. im guessing also in that line you could add the target location _blank, _parent etc..
Ive started fresh writing the whole page again then going to go through and create the CSS using the help you've given me! thanks for this mate.
20VT Clio & 9-5 HOT
Re: trying to get my head around CSS!! AAARRRRGH!!!!!
it is, but its just a fix for DIV positioning.
if you break up a line of text at the bottom of your 'content' area with the <br> and assign it the 'clearsides' property then it ensures the page unfolds and displays correctly. its not to seperate things really, just to ensure everything sits underneath where its suppose to.
if you dont then the height of the 'content' doesnt stretch to fit ya content and other divs in. regardless if they are positioned relively or not or what margins are assigned.
if you set a fixed height for the content of the page then it works fine, but fixed height for page content isnt a good idea as im sure you know.
You dont have to use br, you can use a DIV with the clearside class if you prefered. Just my preference.
Thats the only problem (well its not a major problem its a 10 second fix) with using DIVS as pure layout.
IE doesnt require it, but FF and Opera do as well as other browsers.
this is the page above with and without. test them in IE and FF to see
with
without
it is, but its just a fix for DIV positioning.
if you break up a line of text at the bottom of your 'content' area with the <br> and assign it the 'clearsides' property then it ensures the page unfolds and displays correctly. its not to seperate things really, just to ensure everything sits underneath where its suppose to.
if you dont then the height of the 'content' doesnt stretch to fit ya content and other divs in. regardless if they are positioned relively or not or what margins are assigned.
if you set a fixed height for the content of the page then it works fine, but fixed height for page content isnt a good idea as im sure you know.
You dont have to use br, you can use a DIV with the clearside class if you prefered. Just my preference.
Thats the only problem (well its not a major problem its a 10 second fix) with using DIVS as pure layout.
IE doesnt require it, but FF and Opera do as well as other browsers.
this is the page above with and without. test them in IE and FF to see
with
without
Last edited:
