Author Topic: web development  (Read 2207 times)

Offline diagostimo

  • Ethereal Devastator
  • ****
  • Posts: 257
  • LV: 20
    • View Profile
web development
« on: May 15, 2012, 02:40:53 PM »
hey guys, i have been assigned a assesment at college to produce a website for a buisness purpose, im not very farmiliar with web building but after messing around im getting the hang of it, so im using dreamweaver to build my website with, the main trouble im having at the minute is choosing what size to draw my images at, take this image for example:

(click to show/hide)

this is a mock up of the top border of the page, the trouble im having is getting it to stay centered when opened in a browser, the way i have tried to do it is give it  have so many pixel offset on the left and right according to my resolution(i have a notebook so the resolution is pretty low) but when i open the html on another comp with a higher resolution i end up with a horrible gap on the right hand side, i know its due to the resolution difference, im just wondering if there is a way for me to force the image to stay centered no matter the resolution?

also for reference what image programs do people use? i have been using fireworks as its great for creating textures and shapes, but i feel it lacks actual control over the images, or im just not good enough with it yet :P

Offline G_G

  • Green Gmod Game_Guy AKA G4 AKA hyper-G AKA G-force
  • Global Moderator
  • Chaos Ultimate
  • ****
  • Posts: 6585
  • LV: 407
  • Gender: Male
    • View Profile
Re: web development
« Reply #1 on: May 15, 2012, 03:05:49 PM »
Just use some simple CSS. Say you have your div.
Code: [Select]
#your_div {
    background-image: url("path/to/image.png");
    width: 1016px;
    height: 134px;
    margin-left: auto;
    margin-right: auto;
}

This should center it.

Offline diagostimo

  • Ethereal Devastator
  • ****
  • Posts: 257
  • LV: 20
    • View Profile
Re: web development
« Reply #2 on: May 16, 2012, 01:43:03 AM »
ok i tried to implement what you said for its need, heres the div:

Code: [Select]
div1 {
margin-left: auto;
margin-right: auto;
}

<div class="div1" id="div1">
<img src="topborder.png" width="920" height="134" />
<img src="mainpage.png" width="920" height="34" />
<img src="mainpagebottom.png" width="920" height="34" />
</div>

i have three images inside the div, the top border, the main page and the bottom of the main page, so im not entirely sure how i would implement that top part of the setup where you put the image name and width and height, the width are the same for each as they are meant to line up , but the heights differ, thanks for your input so far :D

edit: no worries i have solved getting it to center align, god bless youtube video's :)
« Last Edit: May 16, 2012, 02:58:03 AM by diagostimo »

Offline G_G

  • Green Gmod Game_Guy AKA G4 AKA hyper-G AKA G-force
  • Global Moderator
  • Chaos Ultimate
  • ****
  • Posts: 6585
  • LV: 407
  • Gender: Male
    • View Profile
Re: web development
« Reply #3 on: May 16, 2012, 03:08:16 AM »
Your CSS syntax is messed up. First of all, you either need to have your CSS code in a <style> tag or you need to have it in a separate .css file and load it through a <link> tag. Second, you can't just have "div1". You either need to make it a class or an ID. Like so.
Code: [Select]
/* This is an ID */
#div1 {
}
/* This is a class */
.div1 {
}

IDs
Each element can have only one ID
Each page can have only one element with that ID

Classes
You can use the same class on multiple elements.
You can use multiple classes on the same element.

Moving on, you didn't follow my CSS code. First of all, lets point out your image tags, the only time you need to define the "width" and "height" attributes are when you're resizing the image. You don't need to define the default width and height. Second, lets point out on how you plan on doing this. What it looks like to me is you're trying to create a basic layout like so.

TOP OF PAGE
CONTENT
BOTTOM OF PAGE

Which is fine, but you should try and do it differently. What I'd recommend is creating 4 IDs. A main wrapper, a header, a content, and a footer. Something like this would work just fine.
Code: [Select]
<style>
#wrapper {
width: 920px;
margin-left: auto;
margin-right: auto;
}

#header {
/* Define styles here */
}

#content {
/* Define styles here */
}

#footer {
/* Define styles here */
}
</style>

<div id="wrapper">
<div id="header">
<img src="topborder.png" />
</div>
</div>

That code is tested and the topborder should be centered. If you need help with CSS and HTML, http://www.w3schools.com/css/default.asp w3schools is an amazing site for just that.

Offline diagostimo

  • Ethereal Devastator
  • ****
  • Posts: 257
  • LV: 20
    • View Profile
Re: web development
« Reply #4 on: May 16, 2012, 05:18:29 AM »
ye i figured i was messing the id and class recognition up as my settings wernt doing anything, i managed to get it to work by creating a div tag called wrapper, then created a seperate css code that the div tag used as a rule like so:
Code: [Select]
@charset "utf-8";
/* CSS Document */


#html. body {
margin-top: 0px;
}


#wrapper {
height: auto;
width: 920px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}

then i just build my site inside the div :)

Offline G_G

  • Green Gmod Game_Guy AKA G4 AKA hyper-G AKA G-force
  • Global Moderator
  • Chaos Ultimate
  • ****
  • Posts: 6585
  • LV: 407
  • Gender: Male
    • View Profile
Re: web development
« Reply #5 on: May 16, 2012, 05:32:26 AM »
I'm trying to figure out what you're achieving with this.
Code: [Select]
#html. body {
margin-top: 0px;
}

What you did here was basically creating a class within an ID. And it seems to me you're trying to edit tags. To simply edit the body, all you need is:
Code: [Select]
body {
}

Now if you need to edit a class within a specific tag, then you can follow it with an extension. For example, say you wanted class "heading" to look different in paragraph tags, all you would need to do is:
Code: [Select]
.heading {
/* Styles here */
}

p.heading {
/* Different styles here */
}

Then you have this HTML code:
Code: [Select]
<div class="heading">Test</div>

<p class="heading">Test</p>
Then anytime the "heading" class is assigned to a paragraph tag, it'll look different than if it was in any other tag. If any of that didn't make sense lemme know.

Offline diagostimo

  • Ethereal Devastator
  • ****
  • Posts: 257
  • LV: 20
    • View Profile
Re: web development
« Reply #6 on: May 16, 2012, 05:41:53 AM »
i dont know what im achieving with it, when watching a youtube video to figure out how to do it the guy added that code, i thought it was fixing the body to the top border, heres the video i follewed in the method i used:
http://www.youtube.com/watch?v=GOB4HWF0HnE
it is actually useless, i just removed it and it did nothing :P