Overclock.net banner

1 - 16 of 16 Posts

·
Registered
Joined
·
1,163 Posts
Discussion Starter · #1 ·
So I'm trying to build my parents a website for real estate.

At first I used a online WYSIWYG editor that uses HTML tables and that worked great, except the website took over 30 seconds to load...

So I switched to using Dreamweaver CS4 and CSS, which I know nothing about.

I am trying to build a template for all the pages to use, but I'm having issues.

The website looks great on my monitor and resolution (23" 1900 x 1080) but when viewed on my moms netbook or dads laptop (1024 x 768) the navigation bar (buttons) are not placed correctly.

I used margins and positioning to change the position of the div tables... I have a CSS rule set up for each div tag so I can edit them separately.

How can I make the website look okay all all resolutions???
What is the correct way to position DIV tags/images using dreamweaver and CSS?

Thanks guys
 

·
Banned
Joined
·
1,453 Posts
Quote:


Originally Posted by Ktmrida4life
View Post

So I'm trying to build my parents a website for real estate.

At first I used a online WYSIWYG editor that uses HTML tables and that worked great, except the website took over 30 seconds to load...

So I switched to using Dreamweaver CS4 and CSS, which I know nothing about.

I am trying to build a template for all the pages to use, but I'm having issues.

The website looks great on my monitor and resolution (23" 1900 x 1080) but when viewed on my moms netbook or dads laptop (1024 x 768) the navigation bar (buttons) are not placed correctly.

I used margins and positioning to change the position of the div tables... I have a CSS rule set up for each div tag so I can edit them separately.

How can I make the website look okay all all resolutions???
What is the correct way to position DIV tags/images using dreamweaver and CSS?

Thanks guys


Use percentage widths rather than pixels. Problem solved...dun dun dun.
 

·
Not new to Overclock.net
Joined
·
5,123 Posts
Quote:


Originally Posted by Ktmrida4life
View Post

How can I make the website look okay all all resolutions???


Quote:


Originally Posted by godsgift2dagame
View Post

Use percentage widths rather than pixels. Problem solved...dun dun dun.

What he said is a good way.
Other than that you could design the page to be small...

If you do want to deal with a set size, you should probably consider making it the laptop/netbook screen width. I forget what the average resolution is, but that's what you want to stick with. You might have a big monitor, but most people don't.
For this reason, I make most of my web pages on my laptop so I can get a good idea how it would look on the average screen.

Develop it for the smaller screen and it should still look ok on bigger screens.
 

·
Registered
Joined
·
1,163 Posts
Discussion Starter · #6 ·
Quote:

Originally Posted by godsgift2dagame View Post
Use percentage widths rather than pixels. Problem solved...dun dun dun.
OHHHHHHH okay and how exactly do I go about that in dreamweaver?

Also guys, if anyone has ANY criticism (mainly advice please?) on the appearance of the website please tell me... the website link is www.thebelkrealtygroup.com

Their real estate agents.. I havent done any text or anything yet, I'm really just trying to get a main template set that looks good then I will add text, maybe more flash, etc.

If anyone could help with the appearance of the website and how to make it look better/fancier and how to do the % widths thing that would be awesome.. you guys are the best
 

·
Registered
Joined
·
20 Posts
Some advice (No idea how much experience you have and whether or not you are coding or using the user interface in Dreamweaver)

Check out W3schools.com has a lot of information on coding for a many web languages easy to understand great from beginning to advanced

As a first thought for colors...since the blues are so close were you trying to match them?... think about a greater contrast or blending the colors together. Also when picking colors ask yourself "If I were painting a house this color would this other color go with it?"

Also since the nature of the website will probably have pictures you may want to think do the pictures go with background color does it enhance the experience of the person visiting the site...On a side note to this some people have slow connections might want to make thumbnails and say a pop-up gallery in something like css and JavaScript..

I tend to avoid flash because although it looks awesome many times people will just leave if it loads slow of their browser does not support it.

Support as many browsers as you possibly can along with resolutions.. does it look the same in Firefox and internet explorer how about old versions of internet explorer (People really should upgrade.)

The previous posts about percentages should be in the css file and should say something about width or height or something to that effect it may look like this:

item-width:xxxpx; change the pixels to a percentage that should help with your resolution problem you may have to hunt and keep changing them one by one until you find the ones that are messing with your page. Another thing you can get is firebug its a live editing addon for firefox it won't save the web page but you can see what code is controlling the look on your page.

Overall I think by doing the main template first you have put yourself in the right position just remember less is more and if you use someone else's code for any scripts that they are open to use and that you cite the author.
 

·
Registered
Joined
·
3,844 Posts
Quote:


Originally Posted by Ktmrida4life
View Post

OHHHHHHH okay and how exactly do I go about that in dreamweaver?

Also guys, if anyone has ANY criticism (mainly advice please?) on the appearance of the website please tell me... the website link is www.thebelkrealtygroup.com

Their real estate agents.. I havent done any text or anything yet, I'm really just trying to get a main template set that looks good then I will add text, maybe more flash, etc.

If anyone could help with the appearance of the website and how to make it look better/fancier and how to do the % widths thing that would be awesome.. you guys are the best


what i prefer to do the most is when i design sites i like to set a box width of 900px wide, which fits within the min average monitor size and incapsulate it with another div tag making it center throughout all screen resolutions. Its called nesting, a sample code:

HTML

Code:
Code:
CSS

Code:
Code:
#content {
margin: 0px;
padding: 0px;
width: 900px;
height: 900px;
background-color: #660000;
}
place each one of the codes in notepad, save, and you will understand. As far as the design, i will have to get back to you on that.
 

·
Registered
Joined
·
1,163 Posts
Discussion Starter · #10 ·
Heres what the code looks like as of right now..

Index.html

Code:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->

Belk Realty Group

    [URL=index.html][IMG alt="logo"]http://www.overclock.net/images/header3sm.png[/IMG][/URL]

[URL=index.html][IMG]http://www.overclock.net/images/homebtnup.png[/IMG][/URL]

 

[URL=listings.html][IMG]http://www.overclock.net/images/listingsbtnup.png[/IMG][/URL]

 

[URL=about_us.html][IMG]http://www.overclock.net/images/aboutusbtnup.png[/IMG][/URL]

 

[URL=contact.html][IMG]http://www.overclock.net/images/contactbtnup.png[/IMG][/URL]

        [MEDIA=youtube]ressinstall[/MEDIA]
          <!--<![endif]-->

 

 

 

 

 

 
And heres the layout.css code

Code:

Code:
* { 
margin: 0px;
padding: 0px;
}
#wrapper {
background-color: transparent;
width: 800px;
height: 259px;
margin-right: auto;
margin-left: auto;
}
#wrapper #logo {
background-color: transparent;
background-image: url(transparent);
padding: 10px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}

#wrapper #body {
background-repeat: repeat-x;
height: 500px;
width: 650px;
margin-right: auto;
margin-left: 75px;
margin-top: 20px;
background-color: transparent;
background-image: url(../images/bg4sm.png);
font-size: 24px;
padding: 0px;
float: left;
position: fixed;
}
#wrapper #body #slideshow {
}

#wrapper #navigation {
float: none;
height: 200px;
width: 140px;
padding: 0px;
position: absolute;
margin-top: 20px;
margin-bottom: 0px;
margin-left: 20px;
left: 0px;
top: 183px;
font-size: 9px;
}
a img {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
Ill save these two files as a backup and start screwing with percantages.. like in math, all the widths of the page should equal 100% total right? Thanks guys for all the help.. and if anyone can come up with a more appropiate color scheme to match the logo (clouds) that would be awesome as I'm currently not digging the background of the body or the background.

Okay, heres what the code looks like now.

Index.html

Code:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->

Belk Realty Group

    [URL=index.html][IMG alt="logo"]images/header3sm.png[/IMG][/URL]

[URL=index.html][IMG]images/homebtnup.png[/IMG][/URL]

 

[URL=listings.html][IMG]images/listingsbtnup.png[/IMG][/URL]

 

[URL=about_us.html][IMG]images/aboutusbtnup.png[/IMG][/URL]

 

[URL=contact.html][IMG]images/contactbtnup.png[/IMG][/URL]

        [MEDIA=youtube]ressinstall[/MEDIA]
          <!--<![endif]-->

 

 

 

 

 

 
And heres the layout.css

Code:

Code:
* { 
margin: 0px;
padding: 0px;
}
#wrapper {
background-color: transparent;
width: 50%;
height: 259px;
margin-right: auto;
margin-left: auto;
}
#wrapper #logo {
    display: block;
    margin-left: auto;
    margin-right: auto 
background-color: transparent;
background-image: url(transparent);
width: 120%;
height: 162px;
padding: 10px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}

#wrapper #body {
background-repeat: repeat-x;
height: 500px;
width: 45%;
margin-right: auto;
margin-left: 4%;
margin-top: 20px;
background-color: transparent;
background-image: url(../images/bg4sm.png);
font-size: 24px;
padding: 0px;
float: left;
position: fixed;
}
#wrapper #body #slideshow {
}

#wrapper #navigation {
float: none;
height: 200px;
width: 140px;
padding: 0px;
position: absolute;
margin-top: 2%;
margin-bottom: 0px;
margin-left: 2%;
left: 10%;
top: 183px;
font-size: 9px;
}
a img {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
The website now looks okay in different resolutions, except the stupid header is kinda squished on 1024 x 768 res and its not centered! Ive tried centering it using the

Code:

Code:
margin-left: auto;
    margin-right: auto
thing but its not working.
 

·
Premium Member
Joined
·
8,951 Posts
Quote:


Originally Posted by Ktmrida4life
View Post

Code:
Code:
margin-left: auto;
    margin-right: auto
thing but its not working.

If you're trying to center something horizontally on the screen, use:

Code:
Code:
margin: 0 auto;
This will horizontally center your div, and from there if you need to move the div up or down, add margin-top: (whatever)%; or margin-bottom: (whatever)%;

Then again, your code wasn't working because there was no semi-colon after margin-right: auto.
 

·
Registered
Joined
·
1,163 Posts
Discussion Starter · #12 ·
Quote:


Originally Posted by ImmortalKenny
View Post

If you're trying to center something horizontally on the screen, use:

Code:
Code:
margin: 0 auto;
This will horizontally center your div, and from there if you need to move the div up or down, add margin-top: (whatever)%; or margin-bottom: (whatever)%;

Then again, your code wasn't working because there was no semi-colon after margin-right: auto.

Well it still isnt working, and neither is yours.

WTH is wrong with my code.. someone examine it in dreamweaver or something
 

·
Registered
Joined
·
947 Posts
Not trying to be mean here, but if I were a professional I would want a very professional looking site... no matter what job I were doing (first impressions). Yours definitely looks good for an amateur, but lacks that feel of a professionally built site. There are tons of places where you can just buy a template for maybe $60 and then alter it to your needs. These always look very professional and are cheap!

http://www.top1000templates.com/business-templates/

I can definitely see you wanting to built a website for fun though and having a real world need for it makes it that much more fun
.
 

·
Premium Member
Joined
·
8,951 Posts
Ok, I can't really figure out your code, or what's going wrong as I'm missing a lot of your files (javascript files, flash files, etc.).

I can't really debug it with just the html and css files.

It's so much easier to learn to code by hand, rather than using Dreamweaver. Because when things like this happen, it's hard to know what's going on because you're not the one writing the code, Dreamweaver is.
 

·
Registered
Joined
·
1,163 Posts
Discussion Starter · #15 ·
Quote:

Originally Posted by ImmortalKenny View Post
Ok, I can't really figure out your code, or what's going wrong as I'm missing a lot of your files (javascript files, flash files, etc.).

I can't really debug it with just the html and css files.

It's so much easier to learn to code by hand, rather than using Dreamweaver. Because when things like this happen, it's hard to know what's going on because you're not the one writing the code, Dreamweaver is.
Not really looking to buy a template or code by hand ( I know some though ) but I did find a free real estate template online that I like and is VERY easy to edit.. I'm going to ask my parents and see what they think.

http://www.templatemo.com/preview/te...96_real_estate
 

·
Registered
Joined
·
3,844 Posts
Also a heads up that I found out. When you just use all div instead of setting the HTML in a class you can set weird bug effects. I found this out when I div'd some buttons and used the psedo class and it would not completely enable the effect. A heads up for you. And the body tag can be taken out and placed in ur css file
 
1 - 16 of 16 Posts
Top