(basic) Website help, please (:

JulieKemer · 05-15-2012, 11:10 PM

Hi everybody! (:

I'm new here. created a profile to get some help with an university project!
I've to make a product, which is a website! I have designed it and everything in photoshop, which i'm quite good at . but oh my gosh, coding? I need help. I don't know how to make the text do what i want it to do! lol!

somebody want to help me, please? we can make a deal i make some photoshop work for you or illustrator then (: I am a quite creative girl at this point and studied this too.

I designed the homepage so far and tried coded it, but it's not the same 100% and i think i'm using DIV's wrong :/

here's the layout (:
add me on msn if you are kind to help!

j.kemer@hotmail.com

lots of love to the kind people who wanna help (:

Excavator · 05-15-2012, 11:36 PM

Hello JulieKemer,
This doesn't look overly complicated and you should be able to get some help here. We are limited in how much we can do for you since it is a project for a class -

Quote:

1.5) No homework assignments - Do not post your entire homework assignment and request that other members do it for you. This is considered cheating, and your thread may even be used by your school to prove your guilt. Now, you may ask for advice or help on a specific aspect of your assignment that you're having trouble with. Use common sense as far as what's acceptable in terms of soliciting help with homework assignments.

Can you post the code you've already got? A link to the test site is always best since there are images we wouldn't have otherwise.

syco__ · 05-16-2012, 03:36 AM

Really good graphics and would love to see it turned to a site. Post some code and ill be sure to help you out.

BuildMyWeb · 05-16-2012, 06:04 PM

agreed, this is great design. love it. you might want to get a little more detailed with what youve got/tried and need help with. you might get lucky and get some help here for free. ive been reading here occasionally in recent past and it seems like a helpful community. ive searched a few good solutions on these forums.

if that fails, go the paying/bartering route.

JulieKemer · 05-16-2012, 06:30 PM

Hi again and thx for the replies!

I have big problems with the footer, dunno how to make it stick to the bottom beneath the rest :@

So far the footer is now obviously beneath what you can see in the browser and overlaps the other (wrapper thingy) content if the screen/browser window is small. and zoom also messes up..
dunno i have done, to be honest lol..

but I have uploaded the html, css and all the images to a zip

would love it if somebody would give some feedback and help with the footer!

and btw, i don't know why i am using both class and div? my CSS is full of definitions to the front page div's, which will be different on other pages. so what should i do when making the other pages? make another CSS?

http://www.filefactory.com/file/138z...ingWebsite_zip

I didn't know how else to upload it, so i put it all into a zip with my homepage so far

but here is the HTML tho:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="stylesheet.css" rel="stylesheet" type="text/css" media="all" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>

<body>

<div id="wrapper">
<div id="flags"></div>
<a href="index.html" id="logo"></a>

<div id="navigation">
	<a href="index.html" id="home"></a> 
    <a href="anniversary.html" id="anniversary"></a>
	<a href="attractions.html" id="attractions"></a>
    <a href="history.html" id="history"></a>
    <a href="future.html" id="future"></a>
	<a href="information.html" id="information"></a>
</div>

<div id="menuline"></div>

<div id="content">
<img src="images/indeximage.png" class="indeximage" alt="Images of herning" height="415" width="630"/>

	<div id="textfield1">
	<h1>Herning is turning 100 years</h1>
	<h5>Visit Herning during the 100 days of celebration. The city will be full of events, special attractions, concerts and much more!<br/><br/> Read more about the anniversary <a href="anniversary">here</a></h5>
	</div>

	<div id="textfield2">
	<h2>Attractions you have to see!</h2>
	<img src="images/direction_icon.png" class="textfield2-3_icon" alt="Attractions" height="93" width="91"/>
    
		<div class="textfield2-3inside">
        <p>Herning offers something for the whole family and for the indivitdual in each age. Everything from the Heart Museums to Danmark’s best awarded Shopping Center. </p>
		</div>
        
    <a href="attractions.html" class="textfield2-3_button"><img src="images/attractions_button.gif" alt="View the attractions here" height="20" width="171"/></a>
	</div>

<img src="images/textfield_divider.gif" class="textfielddivider" alt="_" height="140" width="2"/>

  	<div id="textfield3">
	<h2>Events during the anniversary</h2>
	<img src="images/calendar_icon.png" class="textfield2-3_icon" alt="Events" height="94" width="69"/>

		<div class="textfield2-3inside">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
		</div>
        
	<a href="anniversary.html" class="textfield2-3_button"><img src="images/events_button.gif" alt="View the event calendar" height="20" width="171"/></a>
    </div>

</div>
</div>
<div id="footer">
<img src="images/footer_glow.png" class="footerglow" alt="_" height="200" width="1000"/>
	
<div id="footercontent">
    
    	<div id="footercontent1"><h4>How to find Herning</h4>
        <img src="images/footer_line.png" class="footerline" alt="_" height="2" width="300"/>
        </div>
        
        <div id="footercontent2"><h4>Accomodation in Herning</h4>
        <img src="images/footer_line.png" class="footerline" alt="_" height="2" width="300"/>
        </div>
        
        <div id="footercontent3"><h4>Stay in touch</h4>
        <img src="images/footer_line.png" class="footerline" alt="_" height="2" width="300"/>
        </div>
    
	</div>
</div>

    
</body>
</html>

aaand css:

Code:

@charset "UTF-8";
/* CSS Document */

p {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	color: #363636;
	line-height: 18px;
}

a { /* a er links. Følgende er farve, størrelse og liniehøjde på links */
	text-decoration:inherit; /* text-decoration angiver om der skal være understreg eller andet på teksten. None giver ingen dekoration. */
	color:#1b978d;
}

a:hover { /* definerer linket når musen er over */
	color: #666;
	text-decoration:none;
}

h1 {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:40px;
	font-weight:normal;
	color:#1b978d;
	
}

h2 {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:30px;
	font-weight:normal;
	color:#474747;
	line-height: 0px;
	
}

h4 {
	font-family: Verdana, Geneva, sans-serif;
	font-size:18px;
	color:#cfcfcf;
	font-weight:normal;
}

h5 {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 16px;
	color: #363636;
	font-weight: normal;
	line-height: 22px;
}
	
	
body {
	background: #e8e8e8 url(images/textilebackground.gif) repeat;
}



#wrapper { /* dette er container div'en (boks). Den skal indeholde alle andre div'er på sitet */
	width: 1000px; /* definerer bredden af div'en */
	height: auto; /* definerer højden */
	position: absolute;
	top: 0px;
	margin-left: -500px; /* THE WAY TO CENTER DIV'S */
	left: 50%; /* THE WAY TO CENTER DIV'S */
	float:left;
	
}

#flags {
	background-image:url(images/Flags.png);
	width: 360px;
	height: 90px;
	position: absolute;
	top: 0px;
	left: 640px;
}

#logo, #logo:hover {
	width: 180px;
	height: 180px;
	position: absolute;
	top: 55px;
	left: 0px;
}
	
#logo {
	background-image:url(images/logo.png);
}

#logo:hover {
	background-image:url(images/logohover.png);
}

#navigation {
	width: 700px;
	height: 50px;
	position: absolute;
	top: 120px;
	left: 300px;
	float: left;
}
	
#home {
	background-image: url(images/menu_01.gif);
	float: left;
	width: 91px;
	height: 50px;
}

#home:hover {
	background-image: url(images/menuhover_01.gif);
	float: left;
	width: 91px;
	height: 50px;
}


#anniversary {
	background-image: url(images/menu_02.gif);
	float: left;
	width: 140px;
	height: 50px;
}

#anniversary:hover {
	background-image: url(images/menuhover_02.gif);
	float: left;
	width: 140px;
	height: 50px;
}


#attractions {
	background-image: url(images/menu_03.gif);
	float: left;
	width: 135px;
	height: 50px;
}

#attractions:hover {
	background-image: url(images/menuhover_03.gif);
	float: left;
	width: 135px;
	height: 50px;
}


#history {
	background-image: url(images/menu_04.gif);
	float: left;
	width: 99px;
	height: 50px;
}

#history:hover {
	background-image: url(images/menuhover_04.gif);
	float: left;
	width: 99px;
	height: 50px;
}

#future {
	background-image: url(images/menu_05.gif);
	float: left;
	width: 99px;
	height: 50px;
}

#future:hover {
	background-image: url(images/menuhover_05.gif);
	float: left;
	width: 99px;
	height: 50px;
}


#information {
	background-image: url(images/menu_06.gif);
	float:left;
	width:136px;
	height:50px;
}

#information:hover {
	position:absolute;
	background-image: url(images/menuhover_06.gif);
	float:left;
	width:136px;
	height:50px;
}

#menuline {
	background-image: url(images/menuline.png);
	position:absolute;
	top: 180px;
	right: 0px;
	width: 830px;
	height: 6px;
	z-index: -1;
}

#content {
	position: absolute;
	width: 1000px;
	height: auto;
	top: 240px;
	left: 0px;
	margin: 0px;
	padding: 0px;
}

.indeximage {
	position: absolute;
	top: 20px;
	left: 370px;
}
	
#textfield1 {
	position:absolute;
	width: 340px;
	height: 415px;
	top: 0px;
	left: 0px;

}

#textfield2, #textfield3 {
	position:absolute;
	width: 470px;
	height: 145px;
	top: 460px;
}

#textfield2 {
	left: 0px;
}

.textfield2-3_icon {
	position:absolute;
	left: 0px;
	bottom: 0px;
	float: left;
}

.textfield2-3inside {
	position:absolute;
	top: 50px;
	left: 90px;
}

.textfielddivider {
	position:absolute;
	left: 499px;
	top: 460px;
}

#textfield3 {
	left: 530px;
}

.textfield2-3_button {
	position:absolute;
	right: 0px;
	bottom: 0px;
}

#footer, #footercontent, #footercontent1, #footercontent2, #footercontent3 {
	position:absolute;
}

#footer {
	background:#313131 url(images/footer_background.gif) repeat;
	height: 200px;
	width: 100%;
	position: absolute;
	left: 0px;
	bottom: -200px;
	z-index: 1;
}

.footerglow {
	position:absolute;
	bottom: 0px;
	margin-left: -500px; /* THE WAY TO CENTER DIV'S */
	left: 50%; /* THE WAY TO CENTER DIV'S */
	z-index: 2;
}

#footercontent {
	top: 0px;
	margin-left: -500px; /* THE WAY TO CENTER DIV'S */
	left: 50%; /* THE WAY TO CENTER DIV'S */
	z-index: 3;
}

.footerline {
	position:absolute;
	top: 50px;
	left: 0px;
	
}


#footercontent1, #footercontent2, #footercontent3 {
	top: 10px;
	width: 300px;
	z-index: 4;
	
}

#footercontent1 {
	left: 0px;
}

#footercontent2 {
	left: 350px;
}

#footercontent3 {
	left: 700px;
}

JulieKemer · 05-16-2012, 06:36 PM

Quote:

Originally Posted by Excavator

Hello JulieKemer,
This doesn't look overly complicated and you should be able to get some help here. We are limited in how much we can do for you since it is a project for a class -

Can you post the code you've already got? A link to the test site is always best since there are images we wouldn't have otherwise.

Thanks for letting me know, but I have asked my teacher and he said I can get all the help i can get

SpaceNinja151 · 05-16-2012, 07:00 PM

I guess someone helped you write the code so far, because if you knew to use absolute positioning, you would already know what the difference is between a DIV and a Class...so anyway what exactly are you looking to do? If you want to post one problem at a time, I and I'm sure others on here would be glad to help.

You asked if you would need a new CSS for each new page. I can hopefully explain a little that might help you out.

CSS means Cascading Style Sheets - and the Cascading part means that you define one style and it can govern the look of a majority of elements, and then you get more specific as you go along - the elements will inherit the original style and then the specific styles get applied. So for instance if you wanted some large green buttons and some small green buttons, you could color all buttons green, then have more specific styles as you need them to make the actual sizes of the buttons. But you don't need to say green in every style, if you know what I mean. So you define the broader styles and then get down to the specifics.

So you might need new styles for each page, but you should be able to get most of them done with a minimum of styles. So for instance on line 80 you have the dimensions and position of the logo, then after that you have specific styles for the rollover image for when you hover over the logo. You didn't need all the original styles on #logo:hover because you already had them on #logo.

You said you are having problems with getting the footer to stick under the rest - but it looks alright in the files you sent. How did you want it to look?

JulieKemer · 05-16-2012, 07:11 PM

Thx alot for the detailed reply SpaceNinja!

And I didn't get help yet actually.

I will try shorten up my codes then if I don't have to repeat i.e. in logo:hover

how about my usage of div in div's? is that a proper way to do it? I feel like I have used DIV's everywhere for everything

are you sure the footer is right? it is just placed under the scrool bar, so if u make your browser very small, and scroll then you wont see more content, but only the scroll bar

i guess i didn't use the positioning correctly. Hmm, any thoughts?

- Julie

COBOLdinosaur · 05-16-2012, 08:57 PM

Just a couple of comments. No you are not using too many divs. If it was an HTML5 page that would be the case, but for the XHTML type you are using it is not best proactice, but still acceptable.

The biggest problems I see sort term and especially long term is how you are positioning element. Using position:absolute is for extreme situations and special effects, using it for general positioning will make it very difficult to maintain or change the page.

Positioning should be set using a combination of natural listing position, floats and margins.

The bit about collect way to center is is incorrect an will not work except in ver specific situations. The correct way to center a div in its container is to specify a width and margin:auto that will center the div and keep it centered if the page size or resolurion changes.

I'm not sure what you want with the footer. If you want it to be at the bottom of the page content then just list it as the last element. If you want it at the bottom of the screen and always visible, then use position:fixed instead of position:absolute.

JulieKemer · 05-16-2012, 09:31 PM

Quote:

Originally Posted by COBOLdinosaur

Just a couple of comments. No you are not using too many divs. If it was an HTML5 page that would be the case, but for the XHTML type you are using it is not best proactice, but still acceptable.

The biggest problems I see sort term and especially long term is how you are positioning element. Using position:absolute is for extreme situations and special effects, using it for general positioning will make it very difficult to maintain or change the page.

Positioning should be set using a combination of natural listing position, floats and margins.

The bit about collect way to center is is incorrect an will not work except in ver specific situations. The correct way to center a div in its container is to specify a width and margin:auto that will center the div and keep it centered if the page size or resolurion changes.

I'm not sure what you want with the footer. If you want it to be at the bottom of the page content then just list it as the last element. If you want it at the bottom of the screen and always visible, then use position:fixed instead of position:absolute.

I want the footer to be sticked, how should I exactly code that - putting it in the end? hmm..

Is it bad making the website like this with all the divs and position: absolute? i dont know how to code it otherwise hmm.. we won't be updating the site really as it is only for a short term anniversary

COBOLdinosaur · 05-17-2012, 04:48 PM

If you just want it on the end of the page then just make it the last element before the </body> If you want it set to the bottom of the window and to stay ther when the page is scrolled then use:

Code:

#footer {
	background:#313131 url(images/footer_background.gif) repeat;
	height: 200px;
	width: 100%;
	position: fixed;
	left: 0px;
	bottom: 0px;
	z-index: 10;
}

As for the absolute positioned divs; this is just a one off so doing it that way will work. If you are going to do more in the future you need to learn CSS and HTML, and one of the best site to work through all this stuff is http://www.w3schools.com/

JulieKemer · 05-25-2012, 10:28 PM

Thanks everybody alot for the help! I have recreated the footer into this and made it all work now

but i use position absolute too much i know..