Jump to content

How do you suggest I do it?

Coreper

By Coreper,
in Websites, Design and Code

 Share

Recommended Posts

Coreper Newbie

Coreper

Posted
  • Author
Posted

ok, it looks a bit better now, but i still cant get them on their place:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns=&quot;http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Coreper - Online Portfolio</title>

<style type="text/css">

<!--

body {

background-image: url(images/bg_mainframe.png);

margin-left: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

}

#HeaderUpCornerLeft {

float: left;

background-image: url('images/header/Menu_Corner_Left.png');

width: 20px;

height: 146px;

clear:none;

}

#HeaderUpCornerRight {

float: right;

background-image: url('images/header/Menu_Corner_Right.png');

width: 20px;

height: 146px;

clear:none;

}

#HeaderUpMiddle {

float: none;

background-image: url('images/header/Menu_Bar.png');

width: 958px;

height: 238px;

clear:none;

}

#HeaderUp {

float: none;

width: 100%;

background-image: url('images/header/Menu_Stretch.png');

height: 146px;

clear:none;

}

#Header {

overflow: visible;

width: 100%;

min-width:998px;

clear:none;

}

#Button_Portfolio {

padding-left:300px;

padding-top:7px;

clear:none;

width:45%;

}

#Button_Home {

padding-right:300px;

padding-top:87px;

clear:none;

width:45%;

}

-->

</style>

</head>

<div id="Header" align="center">

<div id="HeaderUp">

<div id="HeaderUpCornerLeft"></div>

<div id="HeaderUpCornerRight"></div>

<div align="center" id="HeaderUpMiddle">

<div id="Button_Portfolio">

<a href="portfolio.html"><img src="images/buttons/Button_Portfolio.png" alt="Button_Portfolio" name="Portfolio" width="116" height="66" align="left"/></a></div>

<div id="Button_Home">

<a href="index.html"><img src="images/buttons/Button_Home.png" alt="Button_Home" name="Home" width="116" height="66" align="left"/></a></div>

</div>

</div>

maybe this is important: i also want to add 3 buttons on the right, and my logo in the middle

all of these will become button you can click on, with mouse over images

Link to comment
Share on other sites
  • Replies 74
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Posted Images

Coreper Newbie

Coreper

Posted
  • Author
Posted

yeah, as you can see here:

<div id="Button_Portfolio">

<a href="portfolio.html"><img src="images/buttons/Button_Portfolio.png" alt="Button_Portfolio" name="Portfolio" width="116" height="66" align="left"/></a></div>

<div id="Button_Home">

<a href="index.html"><img src="images/buttons/Button_Home.png" alt="Button_Home" name="Home" width="116" height="66" align="left"/></a></div>

</div>

it might be important to know that:

-these two buttons [Portfolio, Home] need to be on the left

-a logo needs to be in the middle

-three other buttons need to be on the right {as you can see here [ignore the red lines] }

-the buttons on the right need to be 46 pixels from eachother

-the buttons on the left need to be 2 pixels from eachother

-the logo should overlap the button on its left with 43 pixels

-the logo should overlap the button on its right with 50 pixels

i hope this helps [you and me ;)]

Link to comment
Share on other sites
Mike567 Newbie

Mike567

Posted
Posted

I'm sure I've said this before, ideally what you want is a div box for the left side of the page and one for the right, so the left one can have home and portfolio in, and the other can have another 2 or what ever.

then the home can have in the CSS align:left; and the portfolio align:right;.

If it helps I normally do sketches to figure out where I want to place everything and then put boxes around them for layout, most pro designers will start out this way they don't normally put boxes around things though.

Link to comment
Share on other sites
Mike567 Newbie

Mike567

Posted
Posted

<div id="leftbox">

<div id="Button_Portfolio">

<a href="portfolio.html">

<img src="images/buttons/Button_Portfolio.png" alt="Button_Portfolio" name="Portfolio" width="116" height="66"/>

</a>

</div>

<div id="Button_Home">

<a href="index.html">

<img src="images/buttons/Button_Home.png" alt="Button_Home" name="Home" width="116" height="66"/>

</a>

</div>

</div>

<div id="rightbox">

<div id="Button_3">

<a href="3.html">

<img src="images/buttons/Button_3.png" alt="Button_Portfolio" name="Portfolio" width="116" height="66"/>

</a>

</div>

<div id="Button_4">

<a href="4">

<img src="images/buttons/Button_4.png" alt="Button_Home" name="Home" width="116" height="66"/>

</a>

</div>

</div>

Ideally you want to keep as much stuff out of the actual html as possible and place it in CSS.

This is why you see pages with layout.css and style.css, I've come across a lot more before though but yeah it makes it faster at loading pages and makes your life simpler.

so in the CSS you can add to:

Button_Portfolio

align:left;

and to

Button_Portfolio

align:right;

do the same for button 3 & 4

I just read over it again, I was sure I said this before, what you've done is made button_portfolio and home 45% what you want is the leftbox and right box at 45%, so you want to change the button_portfolio etc to a width of 166 by 66.

You're getting there though :).

Link to comment
Share on other sites
Coreper Newbie

Coreper

Posted
  • Author
Posted

ok, this is what ive got now:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns=&quot;http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Coreper - Online Portfolio</title>

<style type="text/css">

<!--

body {

background-image: url(images/bg_mainframe.png);

margin-left: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

}

#HeaderUpCornerLeft {

float: left;

background-image: url('images/header/Menu_Corner_Left.png');

width: 20px;

height: 146px;

clear:none;

}

#HeaderUpCornerRight {

float: right;

background-image: url('images/header/Menu_Corner_Right.png');

width: 20px;

height: 146px;

clear:none;

}

#HeaderUpMiddle {

float: none;

background-image: url('images/header/Menu_Bar.png');

width: 958px;

height: 238px;

clear:none;

}

#HeaderUp {

float: none;

width: 100%;

background-image: url('images/header/Menu_Stretch.png');

height: 146px;

clear:none;

}

#Header {

overflow: visible;

width: 100%;

min-width:998px;

clear:none;

}

#Button_Portfolio {

padding-left:300px;

padding-top:7px;

clear:none;

}

#Button_Home {

padding-right:300px;

padding-top:87px;

clear:none;

}

#Button_Info {

padding-right:300px;

padding-top:87px;

clear:none;

}

#Button_About {

padding-right:300px;

padding-top:87px;

clear:none;

}

#Button_Links {

padding-right:300px;

padding-top:87px;

clear:none;

}

-->

</style>

</head>

<div id="Header" align="center">

<div id="HeaderUp">

<div id="HeaderUpCornerLeft"></div>

<div id="HeaderUpCornerRight"></div>

<div id="HeaderUpMiddle" align="center">

<div id="leftbox" width="45%">

<div id="Button_Portfolio" align="left">

<a href="portfolio.html">

<img src="images/buttons/Button_Portfolio.png" alt="Button_Portfolio" name="Portfolio" width="116" height="66"/>

</a>

</div>

<div id="Button_Home" align="right">

<a href="index.html">

<img src="images/buttons/Button_Home.png" alt="Button_Home" name="Home" width="116" height="66"/>

</a>

</div>

</div>

<div id="rightbox" width="45%">

<div id="Button_Info" align="left">

<a href="info.html">

<img src="images/buttons/Button_Info.png" alt="Button_Info" name="Info" width="116" height="66"/>

</a>

</div>

<div id="Button_About" align="center">

<a href="about.html">

<img src="images/buttons/Button_About.png" alt="Button_About" name="About" width="116" height="66"/>

</a>

</div>

<div id="Button_Links" align="right">

<a href="Links.html">

<img src="images/buttons/Button_Links.png" alt="Button_Links" name="Links" width="116" height="66"/>

</a>

</div>

</div>

</div>

</div>

</body>

</html>

</body>

and this is what it looks like: not like it should:

websitesk6.png

btw: would it be possible to export all my css to a file, now?

Link to comment
Share on other sites
Mike567 Newbie

Mike567

Posted
Posted

Ok thats simple, yeah its easier to put it in a CSS file in my opinion.

So what you need to do is put the button heights in the CSS e.g.

Button_About

you will put the height:whateverpx and width:whateverpx the div tag is just setting its default to what ever it feels is required because you havent said what to use.

You need to do same for left and right box in the css just put width as 45% and height the same as the buttons.

Then you should be done on the buttons.

Link to comment
Share on other sites
Coreper Newbie

Coreper

Posted
  • Author
Posted

this is my code now:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns=&quot;http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Coreper - Online Portfolio</title>

<style type="text/css">

<!--

body {

background-image: url(images/bg_mainframe.png);

margin-left: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

}

#HeaderUpCornerLeft {

float: left;

background-image: url('images/header/Menu_Corner_Left.png');

width: 20px;

height: 146px;

clear:none;

}

#HeaderUpCornerRight {

float: right;

background-image: url('images/header/Menu_Corner_Right.png');

width: 20px;

height: 146px;

clear:none;

}

#HeaderUpMiddle {

float: none;

background-image: url('images/header/Menu_Bar.png');

width: 958px;

height: 238px;

clear:none;

}

#HeaderUp {

float: none;

width: 100%;

background-image: url('images/header/Menu_Stretch.png');

height: 146px;

clear:none;

}

#Header {

overflow: visible;

width: 100%;

min-width:998px;

clear:none;

}

#Button_Portfolio {

padding-left:300px;

padding-top:7px;

clear:none;

height:66px;

width:116px;

}

#Button_Home {

padding-right:300px;

padding-top:87px;

clear:none;

height:66px;

width:116px;

}

#Button_Info {

padding-right:300px;

padding-top:87px;

clear:none;

height:66px;

width:116px;

}

#Button_About {

padding-right:300px;

padding-top:87px;

clear:none;

height:66px;

width:116px;

}

#Button_Links {

padding-right:300px;

padding-top:87px;

clear:none;

height:66px;

width:116px;

}

-->

</style>

</head>

<div id="Header" align="center">

<div id="HeaderUp">

<div id="HeaderUpCornerLeft"></div>

<div id="HeaderUpCornerRight"></div>

<div id="HeaderUpMiddle" align="center">

<div id="leftbox" width="45%">

<div id="Button_Portfolio" align="left">

<a href="portfolio.html">

<img src="images/buttons/Button_Portfolio.png" alt="Button_Portfolio" name="Portfolio" width="116" height="66"/>

</a>

</div>

<div id="Button_Home" align="right">

<a href="index.html">

<img src="images/buttons/Button_Home.png" alt="Button_Home" name="Home" width="116" height="66"/>

</a>

</div>

</div>

<div id="rightbox" width="45%">

<div id="Button_Info" align="left">

<a href="info.html">

<img src="images/buttons/Button_Info.png" alt="Button_Info" name="Info" width="116" height="66"/>

</a>

</div>

<div id="Button_About" align="center">

<a href="about.html">

<img src="images/buttons/Button_About.png" alt="Button_About" name="About" width="116" height="66"/>

</a>

</div>

<div id="Button_Links" align="right">

<a href="Links.html">

<img src="images/buttons/Button_Links.png" alt="Button_Links" name="Links" width="116" height="66"/>

</a>

</div>

</div>

</div>

</div>

</body>

</html>

</body>

but it still doesnt look ok:

websiteto7.png

what am i doing wrong here?

btw: if i put the css styles in a file, how should that be handled in the code?

Link to comment
Share on other sites
Coreper Newbie

Coreper

Posted
  • Author
Posted

thanks

i added more to the CSS:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns=&quot;http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Coreper - Online Portfolio</title>

<style type="text/css">

<!--

body {

background-image: url(images/bg_mainframe.png);

margin-left: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

}

#HeaderUpCornerLeft {

float: left;

background-image: url('images/header/Menu_Corner_Left.png');

width: 20px;

height: 146px;

clear:none;

}

#HeaderUpCornerRight {

float: right;

background-image: url('images/header/Menu_Corner_Right.png');

width: 20px;

height: 146px;

clear:none;

}

#HeaderUpMiddle {

float: none;

background-image: url('images/header/Menu_Bar.png');

width: 958px;

height: 238px;

clear:none;

}

#HeaderUp {

float: none;

width: 100%;

background-image: url('images/header/Menu_Stretch.png');

height: 146px;

clear:none;

}

#Header {

overflow: visible;

width: 100%;

min-width:998px;

clear:none;

}

#leftbox {

width:45%;

}

#rightbox {

width:45%;

}

#Button_Portfolio {

padding-left:300px;

padding-top:7px;

clear:none;

height:66px;

width:116px;

text-align:left;

}

#Button_Home {

padding-right:300px;

padding-top:87px;

clear:none;

height:66px;

width:116px;

text-align:right;

}

#Button_Info {

padding-right:300px;

padding-top:87px;

clear:none;

height:66px;

width:116px;

text-align:left;

}

#Button_About {

padding-right:300px;

padding-top:87px;

clear:none;

height:66px;

width:116px;

text-align:center;

}

#Button_Links {

padding-right:300px;

padding-top:87px;

clear:none;

height:66px;

width:116px;

text-align:center;

}

-->

</style>

</head>

<div id="Header" align="center">

<div id="HeaderUp">

<div id="HeaderUpCornerLeft"></div>

<div id="HeaderUpCornerRight"></div>

<div id="HeaderUpMiddle" align="center">

<div id="leftbox" width="45%">

<div id="Button_Portfolio" align="left">

<a href="portfolio.html">

<img src="images/buttons/Button_Portfolio.png" alt="Button_Portfolio" name="Portfolio" width="116" height="66"/>

</a>

</div>

<div id="Button_Home" align="right">

<a href="index.html">

<img src="images/buttons/Button_Home.png" alt="Button_Home" name="Home" width="116" height="66"/>

</a>

</div>

</div>

<div id="rightbox" width="45%">

<div id="Button_Info" align="left">

<a href="info.html">

<img src="images/buttons/Button_Info.png" alt="Button_Info" name="Info" width="116" height="66"/>

</a>

</div>

<div id="Button_About" align="center">

<a href="about.html">

<img src="images/buttons/Button_About.png" alt="Button_About" name="About" width="116" height="66"/>

</a>

</div>

<div id="Button_Links" align="right">

<a href="Links.html">

<img src="images/buttons/Button_Links.png" alt="Button_Links" name="Links" width="116" height="66"/>

</a>

</div>

</div>

</div>

</div>

</body>

</html>

</body>

this is what i see in DreamWeaver:

http://img211.imageshack.us/img211/8675/website1lz6.png

and this is how the site looks like:

http://img522.imageshack.us/img522/589/website2fl1.png

Link to comment
Share on other sites
  • 2 weeks later...
Mike567 Newbie

Mike567

Posted
Posted

wooo Opera good!

Supprised it looks different in opera as well.

it just involves doing some IE hacks.

I can't help you out their I don't exactly run MS anymore sorry.

http://www.positioniseverything.net/articl...7-dehacker.html

Just remember don't overly modify it that is where you got in trouble in the first place, when I said change something you kept the old part their and added the other part causing a lot of confliction in the code.

Ideally with css hacks you will just be making another sheet style, all you need to do is copy the other one call it like iehack.css and modify the values untill it looks right.

Link to comment
Share on other sites
Mike567 Newbie

Mike567

Posted
Posted

Its possible I did it perfectly fine on Kubuntu under Firefox, I've added a screenshot below.

Its just the difference of having a faster loading time and a professional method of coding Vs old school coding and slower loading times.

Once you make it in tables its really hard to edit anything.

Personally I say go with whats easiest to you and if you want to get into CSS layouts then begin smaller, your jumping into the deep end I would say.

post-9385-1213287608_thumb.jpg

Link to comment
Share on other sites
Coreper Newbie

Coreper

Posted
  • Author
Posted

well, not perfectly...very good though:

-the buttons need to be further seperated from eachother

-the buttons need to be positioned further away from the center

-you forgot the "Links" button the right part of the header

but you think i should let this go and make what i can do the best?

if so, do you know this:

is is possible to do the following:

when the mousecursor goes over an image [lets say, 400x300 px], it needs to change into another image [with a size of 300x400] > a mouseover image

but is it possible to apply a mouseover image which isnt the same size as the original image?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. Privacy Policy

  I accept