web development

Started by diagostimo, May 15, 2012, 08:40:53 am

Previous topic - Next topic

diagostimo

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:

Spoiler: ShowHide


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

G_G

Just use some simple CSS. Say you have your div.
#your_div {
    background-image: url("path/to/image.png");
    width: 1016px;
    height: 134px;
    margin-left: auto;
    margin-right: auto;
}


This should center it.

diagostimo

May 15, 2012, 07:43:03 pm #2 Last Edit: May 15, 2012, 08:58:03 pm by diagostimo
ok i tried to implement what you said for its need, heres the div:

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 :)

G_G

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.
/* 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.
<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.

diagostimo

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:
@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 :)

G_G

I'm trying to figure out what you're achieving with this.
#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:
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:
.heading {
/* Styles here */
}

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


Then you have this HTML code:
<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.

diagostimo

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