LukeV Posted March 19, 2008 Share Posted March 19, 2008 Hi everyone. I'm making a website, something I can play around with. Now I'm handy with photoshop but when it comes to coding I hit a brick wall. I really want to learn but watching video tutorials isn't helping me much. I need a hands on approach. So I dove right into it.This is how I want my website to look like: linkSorry for the large file size. It's just a single image. It doesn't do anything. Now if you take a look at my first design here you'll see that it sort of works but it doesn't really do much. This isn't enough. (I am aware of the broken links).I need the site to wrap around my content, stretch as necessary. After learning some php I'm hoping I could make that "Site Journal" thing and maybe some other web based applications. I should be able to add php applications if the site is designed whit css right?So basically I really need alot of help here. I have no clue where to start Link to comment Share on other sites More sharing options...
shalendar Posted March 19, 2008 Share Posted March 19, 2008 thats a very nice design. uh.. what is it that your wanting? what is your question? Link to comment Share on other sites More sharing options...
LukeV Posted March 19, 2008 Author Share Posted March 19, 2008 Yes I'm sorry my question was very vague. Well how do I go about turning that design into a valid css design. Something that is more flexible. Specifically, just want the white background to wrap around the content I put in it. Also I want some nice rollover effects for the menu but I don't know how to implement the code. If I could get a link to a tutorial that explains just that that'd be grant. The tutorials for css on w3schools are a bit too overwhelming. There are alot of things that I just don't need to know which really sets me back.Thanks. Link to comment Share on other sites More sharing options...
jlhaslip Posted March 20, 2008 Share Posted March 20, 2008 One step at a time.Here is a link to show what can be done with menus and rollovers. That site has a lot of good effects for menus. Browse around it and pick one.http://www.cssplay.co.uk/menus/neon_menu.html#nogo Link to comment Share on other sites More sharing options...
Synook Posted March 20, 2008 Share Posted March 20, 2008 By the way, welcome to W3Schools Link to comment Share on other sites More sharing options...
LukeV Posted March 20, 2008 Author Share Posted March 20, 2008 I've been to that website before actually. Where does it tell you exactly how to make the rollover? I don't see any instructions :\And hey Synook its me Luke from msn (Tutorial sys guy) Whats up? Link to comment Share on other sites More sharing options...
Synook Posted March 20, 2008 Share Posted March 20, 2008 And hey Synook its me Luke from msn tongue.gif (Tutorial sys guy) Whats up?I noticed I'm doing good what about you?Where does it tell you exactly how to make the rollover?You have to look in the source, the code is shown there. It is:<style type="text/css"> /* remove the margin and bullets, set the padding for this demo only*/.neon {margin:0 0 50px 0; padding:25px 0 100px 15px; list-style:none; background:#000; width:720px;} /* display the list items inline with a right margin to space the buttons. Use this to pre-load the hover image */.neon li {display:inline; float:left; background:url(neon_on.gif);}/* style the links and place the background image to start from left edge */.neon li a {display:block; height:32px; float:left; background:url(neon_off.gif); text-decoration:none; font-size:10px; font-family:arial, sans-serif; letter-spacing:1px; line-height:36px;}/* style the b element to posiition it to the right by 20 pixels and even out the text with 20 pixel right padding */.neon li a b {margin:0 0 0 40px; display:inline; float:left; height:32px; background:url(neon_off.gif) right top; padding:0 40px 0 0; color:#fff;}/* style the link hover and the link hover b to replace the background image - border:0 needed for IE6 to work */.neon li a:hover, .neon li a:hover b {border:0; background-image:url(neon_on.gif); cursor:pointer; color:#000;}.neon li a.current, .neon li a.current b, .neon li a.current:hover , .neon li a.current:hover b {background-image:url(neon_on.gif); color:#000; cursor:default;}</style> and <ul class="neon"> <li><a href="#nogo"><b>HOME</b></a></li> <li><a href="#nogo"><b>ABOUT US</b></a></li> <li><a href="#nogo"><b>PRIVACY POLICY</b></a></li> <li><a class="current" href="#nogo"><b>CONTACT US</b></a></li> <li><a href="#nogo"><b>LINKS</b></a></li> </ul> Link to comment Share on other sites More sharing options...
LukeV Posted March 20, 2008 Author Share Posted March 20, 2008 Wow...Synook I can't thank you enough I had to change a few things but the site looks great! Not much left to do now :)Though I can't figure out how I can add text over the footer. I need to add a some buttons and links on the footer but whenever I try to make a div it just ends up under or on top of the footer. Anyone know how I can do this?Check it out guys Here! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.