all right so ive produced a layout throughout photoshop, and coded the vast majority of site, except the control keys which i have no idea how to carry out. heres what the layout seems as if. http: //img67. imageshack. us/my. phpimage=testjv1. jpg
and heres what ive obtained so far
what it seems as if in firefox (havent got it to be effective in IE, i have no idea how hopin possible get some benefit that aswell):
http: //img405. imageshack. us/my. phpimage=untitledak5. jpg
this ccs:
body backdrop: #1D1D1D url(images/background. jpg) repeat-x; perimeter: 0px; color: #1E1E1E; font-family: font-family: Arial, Geneva, Helvetica, sans-serif, Tahoma; #border wider: 700px; margin: 0 car; #content width: 598px; margin-top: 200px; margin-left: 50px; #main background-image: url(images/content. png); min-height: 200px; margin-top: -5px; #text placement: absolute; margin-top: 0px; margin-left: 18px; wider: 310px; min-height: 100px; #news placement: relative; margin-top: 0px; margin-left: 370px; wider: 195px; min-height: 100px; h1 margin-top: -10px; font-family: Tahoma; color: #d38030; font-size: 18px; font-weight: vivid; p margin-top: -10px; font-family: Tahoma; color: #FFFFFF; font-size: 12px;
and this html:
<! DOCTYPE html PUBLIC " -//W3C//DTD XHTML YOU. 1//EN" " http: //www. w3. org/TR/xhtml1/DTD/xhtml1-transitional. dtd" > < html> < head> < title> GENIUS Designs< /title> < meta http-equiv=" Content-Type" content=" text/html; charset=iso-8859-1" /> < link rel=" stylesheet" href=" Portfolio_files/style. css" type=" text/css" > < /head> < body> < div id=" border" > < div id=" content" > < img src=" Portfolio_files/images/header. jpg" alt=" header" width=" 598" height=" 110" > < img src=" Portfolio_files/images/top. png" alt=" top" width=" 598" height=" 39" > < div id=" main" > < div id=" text" > < h1> Testing Home< /h1> < p> Testing Internet site. < /p> < /div> <! -- end text --> < div id=" news" > < p> < br> Testing news. < /p> < /div> <! -- end news --> < /div> <! -- end main --> < img src=" Portfolio_files/images/bottom. png" alt=" bottom" width=" 598" height=" 41" /> < /div> <! -- end content --> < /div> <! -- end border --> < /body> < /html>
as you can see the buttons employ a pattern overlay, so if i cut a student button and use that for every one, when it joins it’ll look awful, so i have cut the full strip of buttons and the top bar but i have no idea how to computer code that. and can it be even possible to perform it like that
update: also i wouldnt mind keeping the buttons change colouring or shade and also w/e when hovered above, and the similar colour or colour when on that page so the user knows which page these are on. any help on doing which will be appriciated in addition.
with thanks
This is a new situation where we need to visit the actual web site, not a. jpg impression.
You may have to upload this to your website and give us a website link.
Even when we copy your HTML and CSS, we do not have any images.
Be sure in your HTML DOCUMENT < head> area you define the particular content type.
< meta http-equiv=" Content-Type" content=" text/html; charset=iso-8859-1" />
Your IE difficulties will mostly be in connection with margins.
yeah i had been trying to add the website yet i dont learn how, i have wamp5 but dont realize how to get the web page up so people could see. could you convey to me how
Maybe you have a real hosting account That could be best, or ue a free of charge hosting site when needed.
nah i dont have a real 1, are you able to suggest any free of charge ones
aha i’ve one of a bit ago, heres this link http: //test1234. bravehost. com/index. html
What’s that!
< h1> Testing Home< /h1> BCOLOR=" Red" < t> /COLOR/BTesting Internet site. BCOLOR=" Red" < /t> /COLOR/B < /div> <! -- end text --> < div id=" news" > BCOLOR=" Red" < t> /COLOR/BTesting reports. COLOR=" Red" B< /t> /B/COLOR
Maybe an individual mean < p>
< h1> Testing Home< /h1> BCOLOR=" Blue" < p> /COLOR/BTesting Internet site. BCOLOR=" Blue" < /p> /COLOR/B < /div> <! -- end text --> < div id=" news" > BCOLOR=" Blue" < p> /COLOR/BTesting reports. COLOR=" Blue" B< /p> /B/COLOR
For the buttons to your menu… I would cut them on their own.
t margin-top: -10px; font-family: Tahoma; color: #FFFFFF; font-size: 12px;
its this i didnt know what else to decide to put there so i just had the form named t. dunno if thats great or not im simply a newbie but the idea works
used to do have it seeing that p but is not < p> to get a new paragraph and also something and erm to the buttons like when i said theres your pattern overlay so only cut them seperately they are going to not fit mutually.
t isn’t a element this exit. You are unable to just create components or attributes. It’s essential to use the 1 the are specified through the W3 (and don’t utilize the ones that have a D within the Depr. column. Those are deprecated and shouldn’t be used.
all right ill change this back: S
right now there its changed, any assist with the buttons
Wait, if you would like specific styles intended for blocks of word, use a < div> or perhaps < span> that has a class or identity on it. Discover some CSS.
Erm… which usually buttons
i just now started like weekly ago, im attempting…. jesus. i have 5 VARIOUS buttons but theres the pattern overlay in them so easily cut 1 available and use that every time they join it wont fit, it will look odd, so how would i start making it not necessarily look odd. heres the link again to get a pic of my personal layout, the buttons are at the top.
http: //img67. imageshack. us/my. phpimage=testjv1. jpg
Need to make sure it properly a bit more have any challenges. I’ve done this particular often enough and never had any challenges. Just take note of the pixel info where by you stop.
all right ill give this a shot
also any support on making the buttons have a hover over outcome, or would you suggest sticking to the basics during my level
: have a good laugh: a slight hover effect will be nice and not that difficult to make is always to change the color from the orange bar to help white or something simple prefer that.
Using this technique here — Pure CSS rollovers not having Javascript – you merely need 1 image with both states and then you use CSS in order to display it and follow this guide on image rollovers while using the same method.
all right ive had any go at this and its kinda worked, only my links are spreading downwards and never accross. erm heres this css i used
#buttons placement: absolute; width: 598px; top: 120px; #nav ul placement: absolute; margin: 0; padding: 0; list-style: none; #nav li wider: 120px; height: 65px; background-image: url(images/button. jpg); background-repeat: no-repeat; perimeter: 0px; #nav a font-family: Tahoma; text-decoration: none; display: block; color: #c7c5c5; text-align: heart; padding-top: 12px; font-size: 14px; #nav li: float background-image: url(images/button_hover. jpg); background-repeat: no-repeat;
and this html
<! DOCTYPE html PUBLIC " -//W3C//DTD XHTML YOU. 1//EN" " http: //www. w3. org/TR/xhtml1/DTD/xhtml1-transitional. dtd" >
< html>
< head>
< title> GENIUS Designs< /title>
< meta http-equiv=" Content-Type" content=" text/html; charset=iso-8859-1" />
< link rel=" stylesheet" href=" Portfolio_files/style. css" type=" text/css" >
< /head>< body>
< div id=" border" >
< div id=" content" >
< img src=" Portfolio_files/images/topbar. png" alt=" topbar" width=" 598" height=" 19" >
< div id=" buttons" >
< div id=" nav" >
< ul>
< li>
< a href=" #" > Home< /a> < /li>
< li>
< a href=" #" > About< /a> < /li>
< li>
< a href=" #" > Portfolio< /a> < /li>
< li>
< a href=" #" > Services< /a> < /li>
< li>
< a href=" #" > Contact< /a> < /li>
< /ul>
< /div> <! -- end buttons -->
< /div> <! -- end nav -->
< img src=" Portfolio_files/images/header. jpg" alt=" header" width=" 598" height=" 110" >
< img src=" Portfolio_files/images/top. png" alt=" top" width=" 598" height=" 39" >
< div id=" main" >
< div id=" text" >
< h1> Testing Home< /h1>
< p> Testing Internet site. < /p>
< /div> <! -- end text -->
< div id=" news" >
< p>