Hi guys,
i have some issues
i got an assignment, to create a website for my portfolio, now, i have a design but that's that...
i have NO experience with XHTML and CSS whatsoever, so i was wondering maybe you guys could give me a basic coded page...
the design is here: DESIGN (PDF) (<!-- m --><a class="postlink" href="http://users.pandora.be/moerbeke/Site/design/design2.pdf">http://users.pandora.be/moerbeke/Site/d ... esign2.pdf</a><!-- m -->)
there are some points to consider though...
it has to contain 3 frames (which is already in the design, the 2 big textboxes and the image on top)
the image on top is an image map, so whenever i hover over a button, i would like that a little description of that page is shown in the left-side textbox....i searched my @ss of on the net but couldn't find anything..maybe you have some luck
it has to be XHTML and CSS valid....
it has to be a linked stylesheet
I know that it is much, but i couldn't find any other place with such talented coders, i mean you guys really know what you are doing, and i know that the demands are high, but i guess for you guys it's just an hour work or so...
i would be very gratefull if any of you could help me on this one...
ByeSo is it a homework assignment or something similar?
And the problem is that you do not know the subject?
So I guess the only way to solve the problem is to learn what you need to know to accomplish the task, right?
Now if you have any particular questions while you learning, you are welcome to stop by and ask for advice.i do know the subject, i need to create a website to display my portfolio, the problem is that i know nothing about XHTML and CSS....
i'm a designer, not a coder......
now my teacher said that i should look on these kinds of forums for helpnow my teacher said that i should look on these kinds of forums for help
The keyword there is help not to have someone else do the job for you.
There are plenty of good people here who would be willing to help youAnd if graphics design is ALL you are interested in and is ALL that is required for your coursework (which does not seem to be the case) you are welcome to hire me to make an HTML document from your design...
... and on a side note... no offense... but if you claim to be a designer, should not you know what a padding is?I have no idea what padding is....sorry for that
but here is what i have....but doesn't work
<!-- m --><a class="postlink" href="http://www.thenoodleincident.com/tutorials/box_lesson/basic4.html">http://www.thenoodleincident.com/tutori ... asic4.html</a><!-- m -->
it's kinda the layout i want...but i never get it right...
here's my html code and css code i already have
the idea is to get the banner in the top box and the box width should be the image width + i need to get some border to surround the complete site
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Wout Cambier" />
<meta name="keywords" content="cursus HTML, webdesign, Arteveldehogeschool, Grafische en digitale Media, opleiding GB, website ontwerp, website opbouw, portfolio, portfoliosite, lodo, design" />
<meta name="description" content="Portfoliosite of Wout Cambier" />
<meta name="robots" content="all" />
<title>Wout Cambier Portfolio</title>
<link rel="stylesheet" href=http://www.webdeveloper.com/forum/archive/index.php/"css/style.css" type="text/css" />
</head>
<body>
<div id="top">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/banner.jpg" usemap="#banner" border="1" />
</div>
<div id="left">
<p>1</p>
</div>
<div id="left">
<p>1</p>
</div>
<map id="banner">
<area coords="113,24,179,73" href=http://www.webdeveloper.com/forum/archive/index.php/"home.htm" shape="rect" alt="tekst" />
<area coords="213,24,279,73" href=http://www.webdeveloper.com/forum/archive/index.php/"about.htm" shape="rect" alt="tekst" />
<area coords="313,24,379,73" href=http://www.webdeveloper.com/forum/archive/index.php/"werken.htm" shape="rect" alt="tekst" />
<area coords="413,24,479,73" href=http://www.webdeveloper.com/forum/archive/index.php/"contact.htm" shape="rect" alt="tekst" />
</map>
</body>
</html>
CSS
body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-family: verdana, arial, helvetica, sans-serif;
color: #ccc;
background-color: #333;
}
a {
text-decoration: none;
font-weight: bold;
color: #ccc;
outline: none;
}
a:visited {
color: #ccc;
}
a:active {
color: #ccc;
}
a:hover {
color: #ccc;
text-decoration: underline;
}
.ahem {
display: none;
}
strong, b {
font-weight: bold;
}
p {
font-size: 12px;
line-height: 22px;
margin-top: 20px;
margin-bottom: 10px;
}
/* weird ie5win bug: */
h1 {
font-size: 24px;
line-height: 44px;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
}
h2 {
font-size: 18px;
line-height: 40px;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
}
h3 {
font-size: 16px;
line-height: 22px;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
}
h4 {
font-size: 14px;
line-height: 26px;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
}
h5 {
font-size: 12px;
line-height: 22px;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
}
h6 {
font-size: 10px;
line-height: 18px;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
}
img {
border: 0;
}
.nowrap {
white-space: nowrap;
font-size: 10px;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
/* must be combined with nobr in html for ie5win */
}
.tiny {
font-size: 9px;
line-height: 16px;
margin-top: 15px;
margin-bottom: 5px;
}
#top {
margin: 20px 20px 0px 20px;
padding: 10px;
border: 5px solid #ccc;
background-image: url(banner.jpg);
height: 100px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
height: 70px;
}
html>body #top {
height: 70px; /* ie5win fudge ends */
}
#left {
position: absolute;
top: 120px;
left: 0px;
margin: 20px;
padding: 10px;
border: 5px solid #ccc;
background: #666;
width: 150px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 120px;
}
html>body #left {
width: 120px; /* ie5win fudge ends */
}
#middle {
margin: 20px 190px 20px 190px;
padding: 10px;
border: 5px solid #ccc;
background: #666;
}
#right {
position: absolute;
top: 120px;
right: 0px; /* Opera5.02 will show a space at right when there is no scroll bar */
margin: 20px;
padding: 10px;
border: 5px solid #ccc;
background: #666;
width: 150px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 120px;
}
html>body #right {
width: 120px; /* ie5win fudge ends */
}
pre {
font-size: 12px;
line-height: 22px;
margin-top: 20px;
margin-bottom: 10px;
}Before you start thinking about layout, you need to get you (X)HTML right:
- proper header elements instead of <div id="top">
- LIST of links for navigation, not an image map
Until your HTML page is usable without any styling information, there is no point in going any further.
Once you have gotten it, look at this page that demonstrates proper and improper ways of achieving the basic 3 column layout: <!-- w --><a class="postlink" href="http://www.vladdy.net/demos/elementsizing.html">www.vladdy.net/demos/elementsizing.html</a><!-- w -->
And one more thing for your future posts: if you want to get more replies provide a link people can click on and see what is going on, not a bunch of code they have to spend time on putting together...Hi Vladdy (and All),
Before you start thinking about layout, you need to get you (X)HTML right:
- proper header elements instead of <div id="top">
- LIST of links for navigation, not an image map
Until your HTML page is usable without any styling information, there is no point in going any further.
Once you have gotten it, look at this page that demonstrates proper and improper ways of achieving the basic 3 column layout: <!-- w --><a class="postlink" href="http://www.vladdy.net/demos/elementsizing.html">www.vladdy.net/demos/elementsizing.html</a><!-- w -->
And one more thing for your future posts: if you want to get more replies provide a link people can click on and see what is going on, not a bunch of code they have to spend time on putting together...
WOW! I just went and looked, and saved a copy of your source. I was just crowing because I got a sort of fluid layout that works fairly well at a couple of different resolutions, in four current browsers.
But your article has tons of information I could really study! And will! I do hope you'll continue, as it says at the bottom of our page.
I'm just learning from knowing nothing at all, to build myself a web site; it's made me seasick many, many times, and I couldn't have begun without an awful lot of help from here (and one book, and - quite a lot from the W3C validators, and a few other sources).
I've changed my basic layout maybe six times, while my site gets bigger and bigger (haha) - so many test pages, so many hilarious errors, some of which crack me up so much I have to keep them around for a while.
But you give me a whole new approach! I'm still converting from my previous layout to a new one, and I'm not in a hurry to edit all those pages all over again, so trying yours will wait at least a little while.
Especially, I thought your analysis of why things work the way they do, and how certain choices affect usability and other factors - was really excellent. So I bookmarked your page, and I hope you won't take it down!
Thanks!
Sun, 17 Apr 2005 18:08:28I'm glad it was helpfull and thought-provoking.
I'm not sure when I will find time and inspiration to further elaborate on the topic, but if you have any particular questions regarding that page and methods used there, I will be happy to discuss them.
i have some issues
i got an assignment, to create a website for my portfolio, now, i have a design but that's that...
i have NO experience with XHTML and CSS whatsoever, so i was wondering maybe you guys could give me a basic coded page...
the design is here: DESIGN (PDF) (<!-- m --><a class="postlink" href="http://users.pandora.be/moerbeke/Site/design/design2.pdf">http://users.pandora.be/moerbeke/Site/d ... esign2.pdf</a><!-- m -->)
there are some points to consider though...
it has to contain 3 frames (which is already in the design, the 2 big textboxes and the image on top)
the image on top is an image map, so whenever i hover over a button, i would like that a little description of that page is shown in the left-side textbox....i searched my @ss of on the net but couldn't find anything..maybe you have some luck
it has to be XHTML and CSS valid....
it has to be a linked stylesheet
I know that it is much, but i couldn't find any other place with such talented coders, i mean you guys really know what you are doing, and i know that the demands are high, but i guess for you guys it's just an hour work or so...
i would be very gratefull if any of you could help me on this one...
ByeSo is it a homework assignment or something similar?
And the problem is that you do not know the subject?
So I guess the only way to solve the problem is to learn what you need to know to accomplish the task, right?
Now if you have any particular questions while you learning, you are welcome to stop by and ask for advice.i do know the subject, i need to create a website to display my portfolio, the problem is that i know nothing about XHTML and CSS....
i'm a designer, not a coder......
now my teacher said that i should look on these kinds of forums for helpnow my teacher said that i should look on these kinds of forums for help
The keyword there is help not to have someone else do the job for you.
There are plenty of good people here who would be willing to help youAnd if graphics design is ALL you are interested in and is ALL that is required for your coursework (which does not seem to be the case) you are welcome to hire me to make an HTML document from your design...
... and on a side note... no offense... but if you claim to be a designer, should not you know what a padding is?I have no idea what padding is....sorry for that
but here is what i have....but doesn't work
<!-- m --><a class="postlink" href="http://www.thenoodleincident.com/tutorials/box_lesson/basic4.html">http://www.thenoodleincident.com/tutori ... asic4.html</a><!-- m -->
it's kinda the layout i want...but i never get it right...
here's my html code and css code i already have
the idea is to get the banner in the top box and the box width should be the image width + i need to get some border to surround the complete site
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Wout Cambier" />
<meta name="keywords" content="cursus HTML, webdesign, Arteveldehogeschool, Grafische en digitale Media, opleiding GB, website ontwerp, website opbouw, portfolio, portfoliosite, lodo, design" />
<meta name="description" content="Portfoliosite of Wout Cambier" />
<meta name="robots" content="all" />
<title>Wout Cambier Portfolio</title>
<link rel="stylesheet" href=http://www.webdeveloper.com/forum/archive/index.php/"css/style.css" type="text/css" />
</head>
<body>
<div id="top">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/banner.jpg" usemap="#banner" border="1" />
</div>
<div id="left">
<p>1</p>
</div>
<div id="left">
<p>1</p>
</div>
<map id="banner">
<area coords="113,24,179,73" href=http://www.webdeveloper.com/forum/archive/index.php/"home.htm" shape="rect" alt="tekst" />
<area coords="213,24,279,73" href=http://www.webdeveloper.com/forum/archive/index.php/"about.htm" shape="rect" alt="tekst" />
<area coords="313,24,379,73" href=http://www.webdeveloper.com/forum/archive/index.php/"werken.htm" shape="rect" alt="tekst" />
<area coords="413,24,479,73" href=http://www.webdeveloper.com/forum/archive/index.php/"contact.htm" shape="rect" alt="tekst" />
</map>
</body>
</html>
CSS
body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-family: verdana, arial, helvetica, sans-serif;
color: #ccc;
background-color: #333;
}
a {
text-decoration: none;
font-weight: bold;
color: #ccc;
outline: none;
}
a:visited {
color: #ccc;
}
a:active {
color: #ccc;
}
a:hover {
color: #ccc;
text-decoration: underline;
}
.ahem {
display: none;
}
strong, b {
font-weight: bold;
}
p {
font-size: 12px;
line-height: 22px;
margin-top: 20px;
margin-bottom: 10px;
}
/* weird ie5win bug: */
h1 {
font-size: 24px;
line-height: 44px;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
}
h2 {
font-size: 18px;
line-height: 40px;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
}
h3 {
font-size: 16px;
line-height: 22px;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
}
h4 {
font-size: 14px;
line-height: 26px;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
}
h5 {
font-size: 12px;
line-height: 22px;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
}
h6 {
font-size: 10px;
line-height: 18px;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
}
img {
border: 0;
}
.nowrap {
white-space: nowrap;
font-size: 10px;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
/* must be combined with nobr in html for ie5win */
}
.tiny {
font-size: 9px;
line-height: 16px;
margin-top: 15px;
margin-bottom: 5px;
}
#top {
margin: 20px 20px 0px 20px;
padding: 10px;
border: 5px solid #ccc;
background-image: url(banner.jpg);
height: 100px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
height: 70px;
}
html>body #top {
height: 70px; /* ie5win fudge ends */
}
#left {
position: absolute;
top: 120px;
left: 0px;
margin: 20px;
padding: 10px;
border: 5px solid #ccc;
background: #666;
width: 150px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 120px;
}
html>body #left {
width: 120px; /* ie5win fudge ends */
}
#middle {
margin: 20px 190px 20px 190px;
padding: 10px;
border: 5px solid #ccc;
background: #666;
}
#right {
position: absolute;
top: 120px;
right: 0px; /* Opera5.02 will show a space at right when there is no scroll bar */
margin: 20px;
padding: 10px;
border: 5px solid #ccc;
background: #666;
width: 150px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 120px;
}
html>body #right {
width: 120px; /* ie5win fudge ends */
}
pre {
font-size: 12px;
line-height: 22px;
margin-top: 20px;
margin-bottom: 10px;
}Before you start thinking about layout, you need to get you (X)HTML right:
- proper header elements instead of <div id="top">
- LIST of links for navigation, not an image map
Until your HTML page is usable without any styling information, there is no point in going any further.
Once you have gotten it, look at this page that demonstrates proper and improper ways of achieving the basic 3 column layout: <!-- w --><a class="postlink" href="http://www.vladdy.net/demos/elementsizing.html">www.vladdy.net/demos/elementsizing.html</a><!-- w -->
And one more thing for your future posts: if you want to get more replies provide a link people can click on and see what is going on, not a bunch of code they have to spend time on putting together...Hi Vladdy (and All),
Before you start thinking about layout, you need to get you (X)HTML right:
- proper header elements instead of <div id="top">
- LIST of links for navigation, not an image map
Until your HTML page is usable without any styling information, there is no point in going any further.
Once you have gotten it, look at this page that demonstrates proper and improper ways of achieving the basic 3 column layout: <!-- w --><a class="postlink" href="http://www.vladdy.net/demos/elementsizing.html">www.vladdy.net/demos/elementsizing.html</a><!-- w -->
And one more thing for your future posts: if you want to get more replies provide a link people can click on and see what is going on, not a bunch of code they have to spend time on putting together...
WOW! I just went and looked, and saved a copy of your source. I was just crowing because I got a sort of fluid layout that works fairly well at a couple of different resolutions, in four current browsers.
But your article has tons of information I could really study! And will! I do hope you'll continue, as it says at the bottom of our page.
I'm just learning from knowing nothing at all, to build myself a web site; it's made me seasick many, many times, and I couldn't have begun without an awful lot of help from here (and one book, and - quite a lot from the W3C validators, and a few other sources).
I've changed my basic layout maybe six times, while my site gets bigger and bigger (haha) - so many test pages, so many hilarious errors, some of which crack me up so much I have to keep them around for a while.
But you give me a whole new approach! I'm still converting from my previous layout to a new one, and I'm not in a hurry to edit all those pages all over again, so trying yours will wait at least a little while.
Especially, I thought your analysis of why things work the way they do, and how certain choices affect usability and other factors - was really excellent. So I bookmarked your page, and I hope you won't take it down!
Thanks!
Sun, 17 Apr 2005 18:08:28I'm glad it was helpfull and thought-provoking.
I'm not sure when I will find time and inspiration to further elaborate on the topic, but if you have any particular questions regarding that page and methods used there, I will be happy to discuss them.