The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> First Website - Help needed.
phrazer
post Aug 19 2014, 06:47 PM
Post #1





Group: Members
Posts: 7
Joined: 19-August 14
Member No.: 21,425
Hi there.

I am attempting to craft my own website for the first time ever using HTML and CSS. I have sliced a layout and am using Dreamweaver to flesh things out. Things have been going well but i find myself with a few unsolvable problems that are most certainly very basic to anyone here i presume blush.gif

I will list these problems below

1. Footer does not appear in actual browsers but does inside dreamweaver.
2. I am attempting to have 3 images inside a div beside each other horizontally and i want to link to other sites from them, i cant seem to do this properly. (icons for youtube twitch etc)
3. I have tried to embed a video using youtube's embed iframe code and it seems to be breaking things. ( i have used css to margin it correctly and it looks fine in dreamweaver, again not so much in actual browsers)
4. I have tried to set a repeating background pic to no avail. I then tried to set a flat background colour too and it didn't work either (in both my HTML <body> and CSS)

My site is uploaded at http://unleasheddarkness.atspace.co.uk/

Here is my CSS:[i]

body {
margin:0px;
padding:0px;
}

#banner {
margin:0 auto;
width:956px;
height:450px;
background:url(images/banner.jpg) no-repeat
}

#links {
margin-left:1;
width:669px;
height:57px;
background:url(images/links.jpg) no-repeat
}


#wrap {
width:956px;
height:1000px;
background:url(images/content_bg.jpg) repeat-y;
margin:0 auto;
}

#left_content {
float:left;
width:669px;
height:100%;
}

#right_content {
float:right;
width:287px;
height:100%;
}

#footer {
margin:0 auto;
width:956px;
height:35px;
background:url(images/footer.gif) no repeat;
clear:both;
}

#youtube {
width:99px;
height:82px;
background:url(images/youtube.gif) no-repeat;
}

#twitch {
margin:-84px 0 0 99px;
width:94px;
height:82px;
background:url(images/twitch.gif) no-repeat;
}

#armory {
margin:-84px 0 0 190px;
width:94px;
height:82px;
background:url(images/armory.gif) no-repeat;
}

#highlights {
width:287px;
height:199px;
background:url(images/Highlighted.gif) no-repeat;
}

#video {
width:252px;
height:142px;
margin:38px 20px 0 20px;
}

#progress {
width:287px;
height:141px;
background:url(images/progress.gif) no-repeat;
}

#recruitment {
width:287px;
height:162px;
background:url(images/recruitment.gif) no-repeat;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Aug 20 2014, 04:24 AM
Post #2


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
1. You have an error in the CSS for the footer. It's no-repeat with a hyphen. Validators will help you find errors: WDG HTML Validator, W3C CSS Validator.

2. Set the images directly inside the A tags, without the DIVs. Or set them as background of each A tag. Give the A tags a width/height.

3. Use a padding-top instead of the margin-top you have now.
Now you know that WYSIWYG doesn't mean what it says. Rely on what you see in a browser.

4. You mean the background-image for #wrap, I suppose. It seems that that image has been uploaded the wrong way (should be binary) or it has the wrong permission ( http://www.elated.com/articles/understanding-permissions/ ). As I get an error page when trying to view it directly in my browser.

This post has been edited by Frederiek: Aug 20 2014, 04:25 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
phrazer
post Aug 20 2014, 08:14 AM
Post #3





Group: Members
Posts: 7
Joined: 19-August 14
Member No.: 21,425
Thank you so much. blush.gif

You solved all my problems really, the background image i was talking about was actually for the web site (instead of it being flat white i wanted to put a repeating image there). I guess i have a new problem with the #wrap to solve also tongue.gif

While we are discussing #wraps. I have set a height of 1000px on it for the moment. I plan on using a news posting content system called cutenews (unsure if there is a better way of allowing log ins for people to post news but it seems to be what i'm looking for).

The issue i have with the #wrap is if i set the height to 100% it does not show up at all. How can i make it so that my wrap background repeats depending on if my left content or right content divs expand?


Sorry if these questions are terribly basic but there's just so much involved in learning all this just now im trying hard to find answers myself.

This post has been edited by phrazer: Aug 20 2014, 08:16 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Aug 20 2014, 10:55 AM
Post #4


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
There is no background-image or background-color assigned to BODY. Add it to the CSS if you want. And if it's an image, use repeat. See also http://htmlhelp.com/reference/css/color-background/ .

Cutenews looks like a CMS system. I'm not familiar with any CMS. I write my own codes in a dedicated text-editor.

For the #wrap, I'd say, rather than setting that div to 1000px, have a look at the following links:
http://css-discuss.incutio.com/wiki/Hundred_Percent_Height
http://css-discuss.incutio.com/wiki/Any_Column_Longest
http://css-discuss.incutio.com/wiki/Footer_Info

http://ryanfait.com/resources/footer-stick...bottom-of-page/
http://www.cssstickyfooter.com

Usually the sticky footer links already use a 100% height solution.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
phrazer
post Aug 20 2014, 11:09 PM
Post #5





Group: Members
Posts: 7
Joined: 19-August 14
Member No.: 21,425
body {
background:url(images/bg_repeat.gif);
margin:0px;
padding:0px;
height: 100%;
}


#wrap {
width:956px;
background:url(images/content_bg.jpg) repeat-y;
margin:0 auto;
min-height: 100%;
}



Thanks . I just cant get the #wrap background to repeat like i want. i read what you posted but i must be skipping over something.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Aug 21 2014, 02:35 AM
Post #6


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
You only forgot to set HTML to height: 100%; also, as you did for BODY.
Use it like this:
CODE
html, body {
    height: 100%;
}

body {
    background:url(images/bg_repeat.gif);
    margin:0px;
    padding:0px;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
phrazer
post Aug 21 2014, 08:30 AM
Post #7





Group: Members
Posts: 7
Joined: 19-August 14
Member No.: 21,425
It is strange in that it goes so far as to repeat so much and then it just stops.

http://unleasheddarkness.atspace.co.uk/



CODE

html, body {
    height: 100%;
    }

body {
    background:url(images/bg_repeat.gif);
    margin:0px;
    padding:0px;
    }
    
#banner {
    margin:0 auto;
    width:956px;
    height:450px;
    background:url(images/banner.jpg) no-repeat;
    }
    
#links {
    margin-left:1;
    width:669px;
    height:57px;
    background:url(images/links.jpg) no-repeat;
    }
    
    
#wrap {
    width:956px;
    background:url(images/content_bg.jpg) repeat-y;
    margin:0 auto;
    min-height: 100%;
    }
    
#left_content {
    float:left;
    width:669px;
    height:100%;
    }
    
#right_content {
    float:right;
    width:287px;
    height:100%;
    }
    
#footer {
    margin:0 auto;
    width:956px;
    height:35px;
    background:url(images/footer.gif) no-repeat;
    clear:both;
    }
    
#youtube {
    width:99px;
    height:82px;
    background:url(images/youtube.gif) no-repeat;
    }
    
#twitch {
    margin:-84px 0 0 99px;
    width:94px;
    height:82px;
    background:url(images/twitch.gif) no-repeat;
    }
    
#armory {
    margin:-84px 0 0 190px;
    width:94px;
    height:82px;
    background:url(images/armory.gif) no-repeat;
    }
    
#highlights {
    width:287px;
    height:199px;
    background:url(images/Highlighted.gif) no-repeat;
    }
    
#video {
    width:252px;
    height:142px;
    padding:40px 0 0 20px;
    }
    
#progress {
    width:287px;
    height:141px;
    background:url(images/progress.gif) no-repeat;
    }
    
#recruitment {
    width:287px;
    height:162px;
    background:url(images/recruitment.gif) no-repeat;
    }



}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Aug 22 2014, 03:34 AM
Post #8


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
Try another structure, like these:
http://matthewjamestaylor.com/blog/equal-h...ns-2-column.htm
https://gist.github.com/nanchu/5017298
Or search yourself for "2 column equal height and sticky footer css".

In the last one, you only have to set the #side div after the #content div, to have the small column on the right.

And, I think you should slice your image in two and set these as background-images to the left and right columns. The left one is black, so you don't even need an image for that. And the white parts could be white borders set in CSS.

This post has been edited by Frederiek: Aug 22 2014, 03:35 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 22 2014, 05:40 AM
Post #9


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
If you move footer inside #wrap, #wrap will expand (because of the clear you have on #footer). Or use another way to clear the floats.

That said, I don't see the #wrap background at all and I haven't figured out why.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Aug 22 2014, 11:21 AM
Post #10


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
Oops, I didn't think of that. Good catch!

Surely you do see the background, as it's a 1px high repeat-y image mainly black, with a purple gradient on the right side that goes behind the right column. But trying to open that image in the browser returns an error page. I didn't see anything when viewing it in the resources, but managed to download it anyway to do tests.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
phrazer
post Aug 22 2014, 06:43 PM
Post #11





Group: Members
Posts: 7
Joined: 19-August 14
Member No.: 21,425
I really cant thank both of you enough for all the help. I will keep in mind the dual column CSS method in future as it seems better overall.

the footer inside the #wrap sorted my problems. I should only have a few more things to iron out before my site is ready to be populated.

My main issue now is related to my CMS news posting php script. Basically i am using a CMS to post news and i want it to appear in my div "left_content". The CMS is very noob friendly and it comes with an integration wizard that provides me with the php code to insert in my index. I tried to place it in my div and made sure i changed my index to .php. Basically it destroyed my layout but sure enough the news feed was present.


CODE
<?php

    $number = 5;
    include("/srv/disk11/1714890/www/unleasheddarkness.atspace.co.uk/news/show_news.php");

?>


The number 5 is just there to be called upon to show how many news stories to show at once.


Any ideas on how i contain the news inside this left div guys?


Another problem is in the embed flash banner i made. it looks fine on my pc and the dimensions are idential to div i made but for some reason it seems to have poor quality (see the text that is blurred out).


Anyway thanks again!

This post has been edited by phrazer: Aug 22 2014, 06:45 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 22 2014, 07:45 PM
Post #12


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
QUOTE(Frederiek @ Aug 22 2014, 06:21 PM) *

Oops, I didn't think of that. Good catch!

Surely you do see the background, as it's a 1px high repeat-y image mainly black, with a purple gradient on the right side that goes behind the right column. But trying to open that image in the browser returns an error page. I didn't see anything when viewing it in the resources, but managed to download it anyway to do tests.


Maybe it stopped earlier than I thought. Can't check now. On the other hand I could open the image directly just fine. wacko.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 22 2014, 07:46 PM
Post #13


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
QUOTE(pandy @ Aug 23 2014, 02:45 AM) *

QUOTE(Frederiek @ Aug 22 2014, 06:21 PM) *

Oops, I didn't think of that. Good catch!

Surely you do see the background, as it's a 1px high repeat-y image mainly black, with a purple gradient on the right side that goes behind the right column. But trying to open that image in the browser returns an error page. I didn't see anything when viewing it in the resources, but managed to download it anyway to do tests.


Maybe it stopped earlier than I thought. Can't check now. On the other hand I could open the image directly just fine. wacko.gif


No, that wasn't it because the image didn't show up when I changed the page as I suggested either. I do see the image at the updated page now though. Quaint.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 22 2014, 07:49 PM
Post #14


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
QUOTE(phrazer @ Aug 23 2014, 01:43 AM) *

Any ideas on how i contain the news inside this left div guys?


Have you tried putting the PHP code you posted there?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
phrazer
post Aug 22 2014, 08:14 PM
Post #15





Group: Members
Posts: 7
Joined: 19-August 14
Member No.: 21,425
yeah actually it seems the amended wrap and foot thing solved that problem too biggrin.gif.

It's all going so smooooth smile.gif


...except that banner.swf quality of course sad.gif


here is how it looks when uploaded on its own.

http://www.swfcabin.com/open/1408753607


you can see my website version is distorted somehow.

size of div is exactly the size of .swf
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 22 2014, 08:31 PM
Post #16


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Afraid I don't know much about flash. I don't think I see any difference between the flash on your site and this one. But I'm really useless at spotting small differences, so maybe there is a difference anyway.

Oh, Untitled document isn't a very cool title. tongue.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
phrazer
post Aug 22 2014, 08:42 PM
Post #17





Group: Members
Posts: 7
Joined: 19-August 14
Member No.: 21,425
yeah i have lots to do still. I'll check back in over the weekend and see what problems i can toss your way biggrin.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 22 2014, 08:54 PM
Post #18


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
The logo is cool though.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Aug 23 2014, 03:01 AM
Post #19


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
I don't see any difference either in the two flash files.

BTW, the news isn't readable, as it is black text on a black background.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 19th April 2024 - 08:02 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC