|
HTML - Layout Issues
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? Similar TutorialsI have designed my site with Divs nesting and divs floating left and right to get a strict layout. It is flawless in firefox / safari but when I open it in IE it seems that some borders are enlarged or something because objects are obviously sent to the next line because their width exceeded that of the parent div. http://www.nativboardriding.com/media.htm check out how the video and div box won't fit on the same page in IE but work fine in the other browsers. How can i prevent this? what have i done wrong?! http://maysonline.sandlerltd.co.uk if you go to "advice & guidance" menu or any other menu except the home page, basically most of the pages seem to be very odd in IE7 but in IE8 - its fine! any ideas?! What am I missing? I have a problem with my home page. It is sitting closer to the left side than my other pages and I cannot figure out why! You can see it at http://www.photo-bliss.net/beta username is trial password is demo If you switch between the home page and the other pages, you can see it. Any suggestions would be greatly appreciated. Thanks Morning everyone. I am having a problem with getting a table containing flash files and images to align correctly in IE. The site looks fine in Chrome and FF but in IE there is a slight space between the two columns of flash buttons on the left-hand side and the image on the upper-right. This happens in IE 7 and the 8 beta. The site is: http://www.kidsnightonbroadway.com Many thanks in advance for any assistance you can provide. Andy Hello, I've been having trouble laying out my website. I'm quite new to HTML, so if you could give me the simplest answer possible it would be appreciated. As of right now I have an image aligned to the top of my page, and two side by side tables underneath it. However, although the tables are aligned the way I want them in Mozilla Firefox (the tables being directly under the image), when I display my site in Internet Explorer the tables are beside the image. I found that I could insert page breaks until the image fit where I wanted it in Internet Explorer, then, however, the tables were further away from the image in Mozilla firefox. If anyone could tell me how to fix this problem it would be most appreciated. Cheers, Dancing Pancake http://recwar.exofire.net/ i know the code is horrible, i used a mix of MS word, frontpage, and dreamweaver, so please dont bite my head off on that, this post is simply about a crossbrowser layout issue. I was able to position everything the right way in dreamweaver. I got a few screenshots from http://browsershots.org/ and its showing completely messed up in ie6, and slightly wonky in ie7 & ie8. the main problem is the text/image in the middle is somehow ending up in the bottom right corner of the page in IE. Also ie6 doesnt seem to like the transparent background on my title/banner/logo. Can anyone figure out a way to at least get the text box in the right spot for IE? Hello all! This is my first website, and of all the languages I've had to start learning to produce it, HTML is by far the most infuriating. My site is www.B3-Office.com and the issue is the layout. It is completely wrong on every page. If you look in the source it should show that my top nav bar is set to be only 94 px in width per cell (10 cells), slightly larger than some of the text therein. The "Contact" text is supposed to be far left. Then the rest of the site, the pages are just all messed up in formatting, looking nothing like it does in my WYSISWYG program (DreamWeaver CS4). I have 4 pages in this format: home, contact, aboutus, and privacy. None of which are working properly. HELP! What am I missing? I would also appreciate your feedback on my work. Thanks so much!!! I am coding in PHP, but I don't think that should have anything to do with it. My problem appears to have to do with the HTML. I am using a 15x15 jpg as a submit button, but I have many of them in a table one per cell with no borders or spacing, so there are many of these submit buttons right next to each other in a grid. The problem is that though the cells are set to be 15x15, the page is displaying them in cells that are 15x27 with the jpg aligned to the top, though the source code does not reflect the 27 figure. I have set the width and height attribute on every cell and image. Is there something I should be looking for to ensure all of my code places the images in the right size and placement? There is no CSS in play with this part of the site. Thanks! Hi all, Help on this would clear up this headache. I am using relative position to put this flash component flush with the right side of the layout. However, in different screen resolutions it still moves. Why is this? for ref: www.burnthisforyourfriends.com Here's the code: <html> <head> <title>Burn This for Your Friends, show dates, music, media, downloads and store</title> </head> <body bgcolor="#000000"> <center><img src="http://img704.imageshack.us/img704/3791/burnthisheader.jpg" /> <br /><a href="http://www.burnthisforyourfriends.com/index.html"><img src="http://img704.imageshack.us/img704/686/mainnavigationplacehold.jpg" alt="Home" border="0" /></a><a href="http://www.burnthisforyourfriends.com/releases.html"><img src="http://img704.imageshack.us/img704/686/mainnavigationplacehold.jpg" alt="releases" border="0" /></a><a href="http://www.burnthisforyourfriends.com/artists.html"><img src="http://img704.imageshack.us/img704/686/mainnavigationplacehold.jpg" alt="artists" border="0" /></a><a href="http://www.burnthisforyourfriends.com/studio.html"><img src="http://img704.imageshack.us/img704/686/mainnavigationplacehold.jpg" alt="studio" border="0" /></a><a href="http://www.burnthisforyourfriends.com/gallery.html"><img src="http://img704.imageshack.us/img704/686/mainnavigationplacehold.jpg" alt="gallery" border="0" /></a><a href="http://www.burnthisforyourfriends.com/bookinginfo.html"><img src="http://img704.imageshack.us/img704/686/mainnavigationplacehold.jpg" alt="bookinginfo" border="0" /></a><a href="http://www.burnthisforyourfriends.com/press.html"><img src="http://img704.imageshack.us/img704/686/mainnavigationplacehold.jpg" alt="press" border="0" /></a><a href="http://www.burnthisforyourfriends.com/store.html"><img src="http://img704.imageshack.us/img704/686/mainnavigationplacehold.jpg" alt="store" border="0" /></a><a href="http://www.burnthisforyourfriends.com/contactus.html"><img src="http://img704.imageshack.us/img704/686/mainnavigationplacehold.jpg" alt="contactus" border="0" /></a> <br /><img src="http://img514.imageshack.us/img514/9773/flashplaceholderred.png" /><img src="http://img163.imageshack.us/img163/8006/flashplaceholdergreen.png" /><img src="http://img340.imageshack.us/img340/4820/flashplaceholderyellow.png" /> </center> <div style="position: relative; top: 20px; left: 659px;"> <p> <script type="text/javascript" src="js/swfobject.js"></script> <script type="text/javascript"><!-- Hello, I made a very simple table layout (with photoshop and imageready) and its my very first time making this type of layout so I'm having a little trouble with the coding. I haven't added a style.css file to it, except for maybe the css that wraps my navigation to a certain width. Here is the url: http://rezina.awardspace.com/layout01 I can't seem to align the images correctly. My friend told me that one of the images was not sliced correctly, so I sliced it but .. it kind of fixed the right side, and not the left. Also, the extra.jpg (which is the outside background-the stripes) seems to repeat itself both vertically and horizontally, is there a way to fix that? Thanks. =)) oh. oops. I just read the rules, sorry for the vague title. I would try changing it to be more specific but I don't know how.. Hey all, I'm new here, and I love the layout of this website! I like the bright colors! Anyway... I created a website layout/site in Photoshop CS 5. The website: www.thegarbagedump.net I saved it as a html & images.. The issue I am having is when you click one of the bottons I want it to open the html document and display it within that square area with the border around it. I know I probably need a frame to do this, however I dont know how to add a frame, and it appears photoshop saved it in tables.. Could you please review the html source, and tell me how/where to add a frame, and make the Home, About, Domains button appear within that square area with the border? Thank You, Justin Hi All, I'm a beginner to all this HTML coding and have designed a page. Each problem I've encountered I've been able to search the web for and then paste and amend HTML code. My problem is I am adding an image to create a curve in a table but for some reason the right side of the table is indented by a pixel or two. I've tried changing margins etc but nothing works I've wasted hours trying to resolve this and come here as a last resort. See table titled company at link below http://one.fsphost.com/darrenguy/ Please help! 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! 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. 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! 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... 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'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% |
|||||||