PDA

View Full Version : CSS Format Help!!


X Z A C X
09-21-2009, 10:16 AM
hi peeps,

i have made a website using the old format of frames. i now want to make this website again using CSS

this is a picture of the website

http://www.flickr.com/photos/xzacx/3940861740/

need help urgently



ty

X Z A C X

Corrosive
09-21-2009, 10:29 AM
Do you have a specific question around this or is it just a random plea for help.

X Z A C X
09-21-2009, 10:36 AM
this is a bit of both i need help with css in General :confused:



X Z A C X

Corrosive
09-21-2009, 11:19 AM
It might be an idea if you make a start and then come back and ask some specific questions. Happy to help but that's like saying 'I want to build a house'. Try the in-built Dreamweaver CSS Layouts and then come back once you've pulled it apart.

X Z A C X
09-21-2009, 11:33 AM
ok ill try that ty



X Z A C X

X Z A C X
09-22-2009, 07:26 AM
so ive looked at some tut's and i have found how to create CSS for the background. now i want to make the banner sort of thing thats blue as u can see in the pic so how do i do this??
http://www.flickr.com/photos/xzacx/3940861740/

Corrosive
09-22-2009, 07:39 AM
Looking logically at the image you have provided I would suggest that you make the background in the blue and the create a banner and scrolling content section from the brown.

X Z A C X
09-23-2009, 06:33 AM
ok so i am trying to make the txt area now so this is the code i have made and i am trying to make a left and right text area what have i done wrong?


<!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>Elegantly Plastered Home</title>
<style type="text/css">
<!--
body {
background-color: #66CCFF;
}
-->
</style>
<link href="CSS/Layout.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">
<div id="logo"><a href="index.html"><img src="Images/Elegantly plastered logo.jpg" width="632" height="223" border="0" /></a></div>
</div>
<div id="bodyArea">

<div id="left"></div>

<div id="right">

</div>

</div>




</body>
</html>

Corrosive
09-23-2009, 08:01 AM
The HTML looks fine to me. Now you have to position your divs using CSS to get the correct layout.

X Z A C X
09-23-2009, 09:33 AM
where should i start? i think that its just compressed so how will make it bigger?



X Z A C X

Corrosive
09-23-2009, 10:25 AM
Can you post what you have in your CSS/Layout.css stylesheet please?

X Z A C X
09-23-2009, 11:08 PM
http://www.flickr.com/photos/xzacx/3948393629/

if that doesnt work

http://www.flickr.com/photos/xzacx/3948393629/

Corrosive
09-24-2009, 06:01 AM
OK, the flikr photo shows a list of your styles but doesn't show me what rules your styles have applied to them. You can copy and paste your stylesheet here. That would be very useful about now :)

X Z A C X
09-24-2009, 07:37 AM
* {
margin: 0px;
padding: 0px;
}
#wrapper {
background-color: #592600;
height: 230px;
width: 800px;
}
#wrapper {
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #592600;
border-left-color: #592600;
}
#wrapper #logo {
}
#wrapper #bodyArea #left {
height: 500px;
width: 550px;
float: left;
}

Corrosive
09-25-2009, 11:28 AM
* {
margin: 0px;
padding: 0px;
}
#wrapper {
background-color: #592600;
height: 230px;
width: 800px;
}
#wrapper {
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #592600;
border-left-color: #592600;
}
#wrapper #logo {
}
#wrapper #bodyArea #left {
height: 500px;
width: 550px;
float: left;
}

You don't really need to include the '#wrapper' and and '#bodyArea' in the selectors unless you intend to use them elsewhere. Try something like;

* {
margin: 0px;
padding: 0px;
}
#wrapper {
background-color: #592600;
height: 230px;
width: 800px;
}
#wrapper {
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #592600;
border-left-color: #592600;
}
#logo {
}
#left {
height: 500px;
width: 550px;
float: left;
}
#right {
width: 250px;
float: left;
}


and work from there.

X Z A C X
09-26-2009, 10:59 AM
ok so ive done that and it works! tyvm ok but now i want to make the little blue bit at the top

This Is What It Looks Like

http://www.flickr.com/photos/xzacx/3955600374/

This Is What I want
http://www.flickr.com/photos/xzacx/3940861740/

any thoughts?

Thanx in advance


X Z A C X

Corrosive
09-28-2009, 07:26 AM
Try using margins either on the header area or the columns to create a gap for the blue to fill.

X Z A C X
09-28-2009, 07:36 AM
ok, i will try that now. what do you think is the most professional looking button style to use? i used flash buttons before but now i want to try something different

X Z A C X

Corrosive
09-28-2009, 07:39 AM
I would only use HTML/CSS created buttons with maybe a background image. I keep nav as lightweight/simple as I can. Style a list and see how you get on.

X Z A C X
09-28-2009, 07:40 AM
thanx ill try that


X Z A C X

X Z A C X
09-29-2009, 07:02 AM
ok i have another question

i would like to do this to my website

http://www.flickr.com/photos/xzacx/3964709185/

(the buttons are gone BTW)

how do i put the photos there but make it so they go in a slide show??


Thanx in advance

X Z A C X

X Z A C X
09-30-2009, 07:57 AM
just one other quick question. how do i save my page as a template so i can make my other pages the same??

Corrosive
09-30-2009, 08:00 AM
just one other quick question. how do i save my page as a template so i can make my other pages the same??

Try this...

http://www.dreamweaverclub.com/dreamweaver-templates.php

It's also explained in the help files and manual ;)

X Z A C X
09-30-2009, 08:02 AM
do u know about the photos?

Corrosive
09-30-2009, 08:03 AM
Photo slideshow? Not sure...Flash or some kind of javascript solution maybe?

X Z A C X
09-30-2009, 08:06 AM
do u know how i can put them there?

X Z A C X

Corrosive
09-30-2009, 08:10 AM
Not sure I really follow you :confused: Whatever format you choose to make your slideshow you just create the HTML required to insert it using Dreamweaver. Unless you can explain further?

X Z A C X
09-30-2009, 08:15 AM
i mean how do i put the photos there because ill make it using flash buy how do i insert them?

Corrosive
09-30-2009, 08:17 AM
Ah right, I'm with you. You don't. You create the flash slideshow in a flash programme and then insert that. You use the photos in the flash programme and not Dreamweaver.

X Z A C X
09-30-2009, 08:42 AM
yes thats all well and good but how do i get it to sit in the right place?

Corrosive
09-30-2009, 08:44 AM
Using padding and margins. Put the slideshow in a div and position that.

X Z A C X
09-30-2009, 08:46 AM
ok ill try that now

X Z A C X
10-01-2009, 07:28 AM
hey, on my website i wanna have a thing so blind people can have the site read out to them do u know how to do this??

i read in a dreamweaver book it was posible but i dnt say how

any thoughts

thanx in advance

X Z A C X

Corrosive
10-01-2009, 08:43 AM
Blind people will have a screen reader on their PC. Just make sure you stick as closely as you can to web standards and they will be fine. No need to add anything to your website.

X Z A C X
10-02-2009, 09:50 AM
i told a client that i could show him how this works do u know how to do this?

Corrosive
10-02-2009, 10:38 AM
Do you mean how to download a screen reader? I have no idea as my vision is OK. Maybe have a look at the RNIB website. They are bound to have some info on it.

domedia
10-02-2009, 03:42 PM
i told a client that i could show him how this works do u know how to do this?
You did, did you..

Well better find a blind person quick and ask to borrow their screen reader.

d a v e
10-02-2009, 07:45 PM
you could try the demo of jaws
http://www.freedomscientific.com/products/fs/jaws-product-page.asp

and there's some more here if you scroll down a bit
http://www.iheni.com/screen-reader-testing/

X Z A C X
10-10-2009, 07:33 AM
how do i add image spacing?

Corrosive
10-10-2009, 07:49 AM
With margins or padding generally.

X Z A C X
10-10-2009, 08:20 AM
hi i think there are three things wrong with this code can u help?

<!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>Elegantly Plastered Home</title>
<style type="text/css">
<!--
body {
background-color: #592600;
}
#top {
height: 300px;
width: 500px;
}
#bodyArea img {
}
#bodyArea img {
left: auto;
}
-->
</style>
<link href="CSS/Layout.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="infobar" <text> we recomend google chrome </text> </div>
<div id="wrapper">
<div id="logo"><a href="index.html"><img src="Images/Elegantly plastered logo.jpg" width="632" height="223" border="0" /></a></div>
</div>
<div id="bodyArea">

<div id="top"></div>


<div id="left"></div>

<p>&nbsp;</p>
<p><img src="Images/pics/DSC00898.JPG" width="222" height="179" /></p>

</div>




</body>
</html>


X Z A C X

Corrosive
10-10-2009, 08:36 AM
Not without knowing what you are trying to achieve...no.

X Z A C X
10-10-2009, 09:59 AM
look at the info bar thing i think theres somethin wrong there i dont know why the text isnt appearing on my site

X Z A C X
10-10-2009, 10:00 AM
and the pic isn't aligned properly