|
HTML - Slicing Issues
I am designing my first web site with a PSD file. I have sliced it and there are no issues there. Except that around each image that was sliced and is now a hyperlink to another page, there is a border. I do not want this border there. Is there anyway to get rid of it? By the way, I am using XHTML transitional and CSS. If I need to use something else then please let me know. Thanks
Similar Tutorialscould someone explain to me what exactly slicing is, in making a website? Is it used in alot of sites? Is it a good practice? Hi, I want to use this website layout http://devisefunction.com/2010/01/12...-in-photoshop/ and have downloaded the PSD file. But when I open it, its got lots of guidelines on it and I'm not sure what these are for. Do they mean that I should slice the website in vertical slices from left to right? I've always done it using horizontal slices from top to bottom but I've never downloaded someone else's PSD like this before. Thanks. Im using this template and completely rebuilt it and the psd file i posted the link for is the index/home page, the thing is I want the navigation bar and foot navigation to be text and linked but i dont know how to do that. everything is so confusing when I slice it up in photoshop and save it to html and open it in dreamweaver and its a disaster. can someone help or possibly downloaded the psd file i provided and do it for me? please i need help! thank you in advance! [PSD Index file] http://rapidshare.com/files/232258440/index.psd.html Ok, I am trying to make a newsletter for my company, and I was given a psd file to work with. I am supposed to slice it up and make it into an html document, and upload the sliced images onto website to host them. So far this has not been a problem. I sliced the psd file accordingly, and converted it into an html file with images using a photoshop function. Next I hosted all of the files and when I used a html text bed generator to test out the index file everything went well and the image came up fine. However heres my problem: I am suppsoed to use this newsletter client to send out the newsletters called joomla! This program only allows you to paste html or xhtml or css. So I take the index file and copy and paste. It brings up the image, however the image is not well connected and the images are not lined up properly. What should I do to fix this? I have to have this finished today, so any help would be awesome! (Here is my index.html code) Code: <html> <head> <title>USA</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <!-- ImageReady Slices (USA.psd) --> <table id="Table_01" width="600" height="667" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="5"> <img src="http://1lacrosse.com/images/newsletter/us/oct/images/index_01.jpg" width="600" height="109" alt=""></td> </tr> <tr> <td rowspan="4"> <img src="http://1lacrosse.com/images/newsletter/us/oct/images/index_02.jpg" width="64" height="558" alt=""></td> <td colspan="3"> <img src="http://1lacrosse.com/images/newsletter/us/oct/images/index_03.jpg" width="467" height="142" alt=""></td> <td rowspan="4"> <img src="http://1lacrosse.com/images/newsletter/us/oct/images/index_04.jpg" width="69" height="558" alt=""></td> </tr> <tr> <td rowspan="3"> <img src="http://1lacrosse.com/images/newsletter/us/oct/images/index_05.jpg" width="160" height="416" alt=""></td> <td> <img src="http://1lacrosse.com/images/newsletter/us/oct/images/index_06.jpg" width="153" height="156" alt=""></td> <td> <img src="http://1lacrosse.com/images/newsletter/us/oct/images/index_07.jpg" width="154" height="156" alt=""></td> </tr> <tr> <td> <img src="http://1lacrosse.com/images/newsletter/us/oct/images/index_08.jpg" width="153" height="148" alt=""></td> <td> <img src="http://1lacrosse.com/images/newsletter/us/oct/images/index_09.jpg" width="154" height="148" alt=""></td> </tr> <tr> <td colspan="2"> <img src="http://1lacrosse.com/images/newsletter/us/oct/images/index_10.jpg" width="307" height="112" alt=""></td> </tr> </table> <!-- End ImageReady Slices --> </body> </html> http://www.farewell-travel.com/newsl...rch2012_2.html Why does this look like crap in Internet Explorer? (Specifically talking about the "Highlights" box) It looks fine in firefox but not on IE. I've tried everything to fix it, I don't know what to do! The width dimensions for some reason are way off. It bloats up to 272px when it should be 200px! Please help! Thanks -Please note this is an e-mail newsletter, that is the reason I'm using tables! Arg... IE is bugging me as usual.... Now I've been working on the fantasy football site the past few days getting ready for the fantasy season... but when I look at the site on IE we have a few issues going on... here they a 1. text rendering on the image switcher... why does the text look bold? The info there is using the default font-size of 13px which I set... I'm assuming that probably has something to do with it. 2. The poll part 1 Why on earth is the question indented 6px? The links in the "newest articles" section are set to indent 6px... but I set that on the list... the question of the poll isn't even in a list and it somehow got indented... 3. More crappy text rendering on the poll answers... now I'm seeing the results because I voted and the text looks absolutely horrendous... no idea why either. Any help with these IE crazy things would be greatly appreciated... thanks! Hello! I'm having quite a problem implementing multiple backgrounds into my website. Simply put I want to have a top bar, that will function as header, and a bottom bar, that will function as a footer. I've tried the following solution but it just doesn't seem to work. The div id "bgBottomDiv" just won't show. I was hoping someone could help me out. HTML: HTML Code: <body> <div id="wrapper"> <div id="bgBottomDiv"> "Content goes here " </div> </div> CSS: Code: #wrapper{
position:relative;
margin:0 auto;
width:1100px;
}
body {
background-image:url(/images/Styler_top.png);
background-attachment: scroll;
background-repeat: repeat-x;
background-position: top;
font-family: arial;
color: #111111;
font-size: 0.75em; /* 12px/16=0.75 em */
word-spacing: 2px;
line-height: 175%;
}
#bgBottomDiv{
background-image: url(images/Styler_top.png);
background-repeat: repeat-x;
background-position: bottom;
}
Thanks in advance! Right then... Problem is, uploaded website, thought that it was ok, checked in Firefox, Safari and even icab... did not check IE (rookie) and did IE have problems? Of course. Basically Some of pics are not showing up - mainly in the shop and one or two on the main pages. I cannot work out how to fix, def not broken links, really boring I know, but can anyone help? Link to site: http://www.thefrenchpantry.co.uk much appreciated... I'm experiencing an issue when using DIVs in DIVs.. I have a container-DIV and a content-DIV, and I would like the container-DIV to stretch vertically as necessary based on how much content is in the content-DIV. Code: <html>
<header>
<style type="text/css">
#divContainer{
position:absolute;
top:10px;
left:10px;
height:100%;
width:200px;
background-color:#CCC;
}
#divContent{
position:absolute;
top:10px;
left:10px
width:180px;
background:color:#BBB;
}
</style>
</header>
<body>
<div id="divContainer">
<div id="divContent">
<!-- Fill me with content -->
</div>
</div>
</body>
</html>
This is basically the code I'm using... whenever the content amount pushes the divContent lower than the bottom of the divContainer, it just overflows out and down the page. What am I doing wrong? Edit: OOPS I set height to 100px on the divContainer, it was supposed to be 100% Alright, so I have this site on which I need a certain part of the site (the content part where the main text bit is) to extend down to the bottom (and preferably no longer), so that if the window is smaller or bigger the text will still just go all the way down to the bottom of the page, and when the text is further down that div will have a scrollbar so you can scroll through the text. The main issue is making it so the end of the div is always on the bottom of the page. (I've tried height=100% on that div but then it just goes below the bottom for some reason.) This is the site. And here's the code: Code: CSS:
div.main { position: absolute;
top: 181px;
left: 110px;
width: 510px;
height: 1500px;
background: url("images/Content Box Bit.png"); }
div.news { position: absolute;
top: 25px;
left: 15px;
width: 494px;
height: 372px;
overflow-x: hidden;
overflow-y: auto; }
Code: HTML:
<div class="main">
<img src="images/News and Updates.png"><div class="news">
<span class="f4"><?php include('sitemapbase.php'); ?></span></div>
</div>
The reason the height of main=1500px is that that's not gonna be scrollable anyway, and I just added a random value to assure that went to the bottom no matter what. Thanks for any help. Wasn't really sure where to put this, sorry if it's the wrong place.. EDIT: Just encountered an additional issue, being that the navigation menus (to the left) look off in IE. The background seems not to start where the div starts. Suggestions? I have a page I created in dream weaver. It displays fine in IE7, but in IE6 it does not. Here is a link to the page: Problem Page If anyone has any ideas, I'd really appreciate it. hello all, Firstly happy new year to one and all. I have a problem i have only been useing html and css a month so this will prob be eaisy for you lot 2 answer but the page i am designing looks great in ff but all my images and <div>'s are out of alingment in IE. i am useing position absolute to put them were i want them e.g <div style="border-style: solid;position:absolute;top:79px;left:130px;width:711px;height:30px;font-size:40%;font-style:italic;text-align:center;background-color:#8B0000;font-size:20px;""> <a href="mmgallery.html"target="blank">GALLERY</a>/<a href="mmhygine.html"target="blank">HYGINE</a>/<a href="mmaftercare.html"target="blank">AFTERCARE</a>/<a href="mailto:ceddolls@ntlworld.com?subject=Tattoo!!">CONTACT</a> </div> can u help? I've been working on this simple single column layout for a while, and it was working just fine until the end, and for some reason, the top of the table is giving a problem, and the header isn't showing properly. http://akito.clavis-sama.com/ Any clue how to get rid of that portion right at the top? Hello, Having issuse with the browsers. Firefox I am all good but when I look at IE7 one page stops reading my CSS. I have NO idea y. PLEASE HELP!!! Recently made a post concerning tables versus divs, and now I have a site where I think I need to do divs, but not sure how to approach using percentages for the sizing. http://www.pigseldesign.com/cravings.jpg This is the layout. Ideally, I'd like for the middle strip to be vertically centered no matter the browser window height. My guess is to have 3 divs (top, middle, bottom) with 100% and if possible, set the percentages for height so that the top and bottom remain the same ratio of size. If it affects anything, the middle strip is going to be a slideshow Flash object. Any hints for sizing? ok hiya im wondering if you can sort my problem out? i recently set up a forum for a gaming clan and i have thought of a design that i like but there is a problem.... i have designed a background which can be seen he http://img177.imageshack.us/img177/3...imgcopylm8.jpg btw the middle isnt orange only for thsi sample i made. the only problem is it works perfectly for the resolution of my screen (1280x800) but not on my pc which is 1024x768. because of this it throws the whole of the forum out of line on a different resolution screen. the code for this background is in the css stylesheet but i was wondering if there was a code i could use that would display a different picture depending on the screen resolution i.e. i could rado the image several times to fit each screen resolution. if not gthen is there anyway of haveing a background with those 2 bits on the sides that will work in all of the resolutions?? his is how i want my site to look and how the sides should be and this is how it shows at 1280x800: this is perfect until you view it at any other resolution.lol like this resolution(1024x768): is there anyway of making it look like the top on all of the resoltuions? the link to the site i want to use it on is: www.gusoldiers.forumn.net here is the cxode im currently using (for this part): * { margin: 0px; padding: 0px; } html { background-color: #000001; font-size: 100%; height: 100%; } #min-width { min-width: 750px; } body { background-color: #cce3f3; background: url('http://img177.imageshack.us/img177/339/backgroundimgcopylm8.jpg') repeat-x; background-attachment: fixed; font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif; font-size: 62.5%; /* This sets the default font size to be equivalent to 10px */ margin: 0px 0px 0px 0px; padding: 0px; border-color: #862121; border-width: 0px 0px 0px 0px; border-style: solid; } { font-size: 10px; height: auto; padding: 10px 0px; scrollbar-face-color: #; scrollbar-highlight-color: #; scrollbar-shadow-color: #; scrollbar-3dlight-color: #; scrollbar-arrow-color: #; scrollbar-track-color: #; scrollbar-darkshadow-color: #; } * html .conteneur_minwidth_IE { /* Hack IE min-width */ padding-left: 750px; } * html .conteneur_container_IE { /* Hack IE min-width */ margin-left: -750px; position: relative; } * html .conteneur_minwidth_IE, * html .conteneur_container_IE, * html .conteneur_layout_IE { /* Hack IE min-width */ height: 1px; } #wrap { width: 80%; margin: 0px auto; background-color: #1a1a1a; background-image: url(""); background-repeat: repeat-x; background-attachment: fixed; border-color: #46494b; border-width: 0px 0px 0px 0px; border-style: solid; padding: 5px; } #wrapnav { width: 800%; margin: 0; background-color: #ECECEC; border-width: 1px; border-style: solid; border-color: #A9B8C2; Hey guys, First post. Glad to see such an active forum. Can someone check out http://www.karmasfortune.com/ohiopainclinic/ I'm trying to get rid of the top margin between the very top and the div.. so that I can utilize the top portion of the background image as a menu system. I tried putting the top-margin: 0px in my div container, but it won't budge. Thanks in advance.. I have a page with three Iframes, I just want to jump from one Iframe to another by giving accesskey. Can anyone tell me how to give accesskey to iframes to move from one iframe to another. Thanks in advance.... Regards, Mukti I've been working on a site and just starting working with frames, I don't know a whole lot about HTML but there's so much stuff online about it that I've been getting by fine. Anyways, I pretty much want every page on the site to use frames, with the same menu frame on the one side for every page and then different stuff on the right side for different pages. I did this for one page and it worked fine (the page is 20% menu and 80% home page), but when I tried doing it on a second page things got weird. The page is like 80% of the home page on the right side, and on the 20% side there are two frames, one being the menu and the other being the About section. Here's the page in question. The HTML is probably really sloppy...Sorry. |
|||||||