|
HTML - Divs Become Misaligned With Smaller Resolutions
so i'm working on my new site and everything seemed to be working find until i got to the 8th image
since the image is wide instead of a scroll arrow appearing to scroll the page over, the image just collapses below my other divs to fit. can anyone help me fix this? thanks in advance guys this is the website http://www.paulodourado.com/x_milk.html and this is the page where I encounter problems http://www.paulodourado.com/thrice.html Similar TutorialsIt's a simple problem. I have a set of anchors that are the navigation for my site. They are very simply rendered as CSS-styled text with links. There's no Javascript (Not controlling the basic layout in any case). The issue is that the "link" (The clickable area) is displaced vertically from the associated text. I'm guessing that this is a rendering bug in Firefox, but I'd like to be sure that I've not just done something stupid first. In any case, the site in question is http://portfolio.hoovesofdestiny.co.uk. The links are those at the top of the page. The pages all validate according to the W3C, as does the CSS. Jon Hi guys, I got a quick question. I can't for the life of me understand why the youtube, facebook and twitter images below absolutely insist on having a few pixels of space to the bottom of it's line. It makes it so the following link-text seem to be too low on the line in comparison to the image. If you see in the lower left corner of www.leveldance.com you can see what i mean. Any ideas? (I have no padding added in the css) Thanks a million in advance! HTML Code: <div class="left_col_container">
<div><img src="images/navigation/sociables_headline.png" alt="Join Our Community!"/></div>
<p style="margin-top: 5px; margin-bottom: 0px">Join the newsletter!</p>
<style type="text/css">.af-form {margin:0 !important;}</style>
<script type="text/javascript" src="http://forms.aweber.com/form/36/693624936.js"></script>
<div style="margin-top: 5px">
<a class="sociables" href="http://www.facebook.com/leveldance" target="_blank"><img src="images/sociables/faceBook-icon.png" class="no_border" alt="Find us on Facebook!"/></a><a class="sidebutton" href="http://www.facebook.com/leveldance" target="_blank"> Find us on Facebook!</a>
</div>
<div style="margin-top: 5px">
<a class="sociables" href="http://www.twitter.com/leveldance" target="_blank"><img src="images/sociables/twitter-icon.png" class="no_border" alt="Follow us on Twitter!"/></a><a class="sidebutton" href="http://www.twitter.com/leveldance" target="_blank"> Follow us on Twitter!</a>
</div>
<div style="margin-top: 5px">
<a class="sociables" href="http://www.youtube.com/user/leveldancenyc" target="_blank"><img src="images/sociables/youtube-icon.png" class="no_border" alt="See us on YouTube!"/></a><a class="sidebutton" href="http://www.twitter.com/leveldance" target="_blank"> See us on YouTube!</a>
</div><br/>
</div> <!-- left_col_container end -->
www.intoleranceclothing.com So this is not my expertise to say the least. My page looks fine on my resolution at home (1280x768) but of course does not look as intended on any other resolution. I have a few problems I'm trying to learn how to fix or control. 1) If you click the images of the shirts I want the popup to be centered in the x position and slightly below y center so the "Intolerance Clothing" still shows when the large picture is up. What would be the easiest way to go about this? Is there a way to set absolute position measured from the center of the page or how would I go about this? 2) Kind of along the same lines. The smaller pictures of the shirts align right up to the background image edges in my resolution. How can I go about positioning them so they are always the same location even if the resolution changes. Basically if the resolution gets bigger I'd like everything to just stay as is and add more black solid space around the image. 3) Another smaller change I'd like to make is currently the viewer has to click the larger image for it to close and they cannot bring up another lager image until it is closed. What do I need to modify to allow the larger image to be replaced by a new one if a different shirt is clicked? Thanks for any suggestions on where to go read or look to help solve these issues or if someone is kind enough to point me in the right direction. Looks fine. Does not look fine. The first picture was fine because it was viewed with a 1024x768 resolution(which is the resolution that I'm working on my website with). However, any higher resolutions, and you'll see that the video goes out of place and moves too much to the right(second pic). I need to make it so that the video scales with all resolutions so it stays in place like in the first picture, no matter what the resolution is. Can anyone tell me how to fix this? Please be specific, i.e. what code? Thank you. Hi guys, Been struggling with this for a few days so here's to hoping someone with a better knowledge of HTML can help me out! I've recently put up a little website to (hopefully) get a bit of freelancing work, but noticed when I checked it on a friend's computer that it looks really screwy on resolutions other than the one on my own computer. As in, everything gets scrunched up in the corner leaving a good half of the screen blank. I know the way around this is usually to convert sizes from pixels to percentages in the HTML code, but the inlet frame on the website refuses to cooperate with the percentage-based sizes. I really want this website to fit all resolutions so it looks professional & the way it should. Can anyone help me?? The website's at http://solar-flare.biz so you can get the code there. It's probably a bit of a mess coz I made it with Frontpage then tweaked it manually to get the background to stretch.... but anyway. Massive kudos in advance to anyone who can fix the code!!! Cheers Mateusz Here's my hypothetical scenario... I have an image map (1000px by 1000px) divided into smaller squares (lets say ten images horizontally by ten images vertically, adding up to one hundred images all together), each linked to a corresponding HTML information file. Now, when talking about download speeds, would it be more efficient for me to use one big image as a map, or should I use one hundred smaller, individual images, each as a link? I don't have anything that would allow me to reliably test the download speeds of both variations, and my site won't be up on the Internet until it is finished (or somewhere close to it). Hi! I'm having a problem with my website on larger screens. My website looks fine on my 1024 by 768 screen, but when I check it on higher resolution screens, all the content is stuck in the upper left corner leaving a big void on the right. How would I make my content appear in the middle of the screen like most modern websites? Or is there another solution that somebody can propose? Thank you for your time! Hi, I am a photographer and am trying to build my own site. Am using dreamweaver 8 and am ok using it, but my html is a little rubbish. have been developing my site, www.robertallenweddingphotography.co.uk, however just realised i have been developing at 1024x768 but if you look at the site at a lower or higher resolution it looks v.bad. Have read a few bits and pieces about using % instead of set pixels?! but am a bit lost! Can any body point me in the right direction? Basically want to end up with a site that looks 'correct' to as many people as possible! Thanks Rob I'm making a website on my mac and when I view it it looks fine, but when I view it on my windows px on 1080x720 res it has everything moved to the right some and even the sizes are wrong. But when I change my res to 1280 x 1080 it looks how it does on my mac (which is 1280 x 800 res). I'm guessing the resolutions are effecting the site's margins and size attributes. Is there a way to fix this? Hi, My website, when viewed on my blackberry, is coming out all wrong - assume it is because of the smaller screen size on a phone. However, when I downloaded the initial template (which I have made a lot of html and css changes to), the mod-slide didn't flow down the page as it does now. Please could anyone help. The website is www.auxus.co.uk Thanks, Ishveen Hi tell me if it's not the right place to post this question but I would like to know how to make my website look the same in all screen resolutions and for all browsers. Right now it looks fine in the 800x600 and 1024x768 resolutions for all the major browsers but when I view it with a 1366x768 resolution all the pages are skewed to the left in firefox and only some pages are centered in IE8. Here's the site : http://www.lost-vision.com/ Code for the "contact me" page that isn't centered in both browsers in 1366x768 resolution : Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Your description goes here" />
<meta name="keywords" content="your,keywords,goes,here" />
<meta name="author" content="Your Name" />
<link rel="shortcut icon" href="img/favicon.ico">
<link rel="stylesheet" type="text/css" href="andreas06.css" title="andreas06" media="screen,projection" />
<title>Contact Me</title>
<style type="text/css">
<!--
body {
background-color: #191919;
margin:0 auto;
padding-left: 11.2%;
padding-right: 11.2%;
}
-->
</style></head>
<body>
<div align="center">
<div id="container">
<a id="top"></a><p class="hide">Skip to: <a href="#nav">site menu</a> | <a href="#leftside">section menu</a> | <a href="#content">main content</a></p>
<div id="sitename">
<h1> </h1>
</div>
<div id="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="affiliates.html">Links</a></li>
<li><a href="contact.html">Contact me</a></li>
<li><a href="empty.html"> </a></li>
</ul>
<p class="hide"><a href="#top">Back to top</a></p>
</div>
<div id="wrap1">
<div id="wrap2">
<div id="leftside">
<p class="soft"> </p>
<p class="soft"> </p>
<p class="soft"> </p>
<p><!-- Begin ShoutMix - http://www.shoutmix.com -->
<iframe title="shoutbox_balistik" src="http://www6.shoutmix.com/?shoutbox_balistik" width="140" height="400" frameborder="0" scrolling="auto">
<a href="http://www6.shoutmix.com/?shoutbox_balistik">View shoutbox</a>
</iframe>
<!-- End ShoutMix --></p>
</div>
<div id="content">
<h1> </h1>
<p><strong>E-mail:</strong></p>
<p> <a href="mailto:maitre_mechant@msn.com">maitre_mechant@msn.com</a></p>
<p><a href="mailto:balistik94@gmail.com">balistik94@gmail.com</a></p>
<p> </p>
<p><strong>On other sites:</strong></p>
<p><a href="http://balistik94.livejournal.com/">LiveJournal</a></p>
<p><a href="http://www.youtube.com/user/balistik94">Youtube</a></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p class="intro center"> </p>
<p class="intro center"> </p>
<p class="hide"><a href="#top">Back to top</a></p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Thanks in advance for your help. Im designing a new site and I was kind of wondering a few things that I was hoping to get some answers to. I wasnt sure where this should be posted so if its in the wrong spot please accept my appology. So I do know I want to do alot of css and make it look very professional. 1) I remember at one time that you should make the site big enough to accomidate an 800x600 resolution. But considering that 1024x768 and bigger is pretty common place should I be scaling up to that or still stay at 800x600? I'm trying to create a page where there is a centered background image, and two div's, one on the left and one on the right, all aligned properly. I tested it by syncing it to my website, and I -think- it displays correctly. However it definitely does not display correctly in Dreamweaver, as in Dreamweaver my central background image is slanted to the left for some reason. Can someone please check my code to make sure it has this layout? (Background image centered, with one section on left and one on right, two sections has same size and same distance from background image) But in Dreamweaver it shows up like this, so I'm worried it might not display correctly on computers with different resolutions: Code: <!DOCTYPE HTML>
<html>
<head>
<!-- Create container type object containing background image with interactive image links layered on top. -->
<!-- Objects are centered on screen. Sub-image positions are relative to container -->
<style>
#container {
display: block;
margin-left: auto;
margin-right: auto;
position: relative;
border:none;
width: 380px;
height: 633px;
background-image: url("pictures/mainmenu.png");
background-position:center;
}
#container img {
position: absolute;
border:none;
left: 65px;
width: 245px;
height: 53px;
}
<!-- the three buttons -->
#image1 {top: 225px}
#image2 {top: 300px}
#image3 {top: 375px}
</style>
<meta charset="utf-8">
<LINK href="style.css" rel="stylesheet" type="text/css">
<title>Main Playlist</title>
</head>
<body>
<br>
<br>
<div id="wrap">
<div id="left"><a href="ContactInfo.html" style="color:#000">Profile</a></div>
<div id="right">Upcoming works</div>
<div id="container">
<a href="song1.html"><img src="pictures/button-hualuowuyuan.png" alt="song1" id="image1" /></a>
<a href="song2.html"><img src="pictures/button-river.png" alt="song2" id="image2" /></a>
<a href="song3.html"><img src="pictures/button-snow.png" alt="song3" id="image3" /></a>
</div>
</div>
</body>
</html>
CSS: Code: @charset "utf-8";
/* CSS Document */
body {
margin:10px;
padding:10px;
background-image: url(pictures/audigrandpiano.jpg);
background-repeat:no-repeat;
background-position:right bottom;
}
img.center{
display: block; margin-left: auto; margin-right: auto;
}
#wrap {
position:relative;
min-height:100%;
}
#left {
float:left;
width:300px;
height:500px;
text-align:center;
}
#right {
float:right;
width:300px;
height:500px;
text-align:center;
}
Really appreciate it Hi there. So I don't need it for 800x600, only the sizes over 1024x768. Basically I made this template which I need to be able to be re-sized when in your browser. I thought I did this right, however I forgot about other resolutions other than 1024x768. When in higher res, the tables break a little and from what I can make out just get a little larger. What I can't work out is how to make them all work properly most large resolutions? Link to the template is he http://www.ruthlessintent.com/penguins/ My webpage: http://beamsvillepharmacy.com/site/index.html Fits my browser perfectly, however when viewed on other computers with a lower resoultion, the page doesn't fit and is too large. How can I edit my code, or go about making it automatically fit with different resolutions? (Right now it's all simple width="" height="", and that's how I was fitting it) Thanks. Hi all, I was wondering if someone could help me. I want a border around the entire page. It works fine in IE at all resolutions, but breaks in FF. I explicitly stated html and body heights to be 100% but that doesn't help. I should be able to spot the error, but its escaping me. Can someone please look at my code and tell me if you see anything? Thanks Rick --- The HTML: HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>San Jose Cell Phones</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body style="font-family:verdana,tahoma, sans-serif;">
<div style="margin-left:3%;">
<h1 style="font-size:4pt;color:#ffffff;">San Jose Cell Phones ringtones AT&T Yahoo dsl satellite 408 calling dish network</h1>
<div align ="center">
<img src="images/sanjose.png" alt="san jose" style="width:195px;height:39px; vertical-align:middle;" />
<img src="images/smallcellphone.jpg" alt="san jose cell phones logo" style="width:72px; height:204px; padding:20px; vertical-align:middle;" />
<img src="images/cellphones.png" alt="cell phones" style="width:246px;height:39px; vertical-align:middle;" />
</div>
<h4>Choose Service</h4>
<div class="container">
<ul id="navSquare">
<!-- CSS Tabs -->
<li><a class="active" href="index.html">Cellular</a></li>
<li><a href="ringtones.html">Ringtones</a></li>
<li><a href="phonecards.html">Phonecards</a></li>
<li><a href="dishnetwork.html">Dish Network</a></li>
<li><a href="dsl.html">DSL Service</a></li>
</ul>
</div>
<hr align="center" width="33%" />
<br clear ="all" />
<div style="float:left;color:#006699;width:250px;">
<div style="background-color:#006699;color:#ffffcc;margin-top:30px;height:10px;padding:3px 10px 3px 10px;border:1px solid black;border-bottom:0px;">Hi</div>
<div style="line-height:1.3em;padding:10px;text-align:justify;background-color:#FFFFCC;border:1px solid black;">
<p style="font-size:11pt;font-weight:600;padding-top:10px;">The Original Online Prepaid<br />
Domestic and International<br />
Calling Cards Superstore</p>
<p><strong>Save up to 80% on long distance calls</strong>
<br />
We hand-pick our phone card selection to offer the best of both low cost and reliability. Don't be fooled by other's low teaser rates. We pioneered instant email calling card delivery in 1999, with over 600,000 sold as of September 2006!
<br /><br />
<strong>How to use this web site</strong> Use Get Best Rates to choose your phone card, then receive your virtual phone card purchase by email. For a physical card, print the email containing the card image. Login to your account 24 hours a day to check PIN information or to reorder</p>
</div>
</div>
<div style="color:#ffffcc;float:left;clear:none;margin-left:20px;width:460px;">
<div style="background-color:#006699;margin-top:30px;height:10px;padding:3px 10px 3px 10px;border:1px solid black;border-bottom:0px;">FINDING
THE BEST PHONE CARD</div>
<div style="float:right;clear:none;padding-top:10px;padding-left:3px;padding-right:3px;width:209px;height:158px;">
<script type="text/javascript" language="JavaScript" src="http://www.kqzyfj.com/placeholder-1405157?target=_top&mouseover=N">
</script>
</div>
<div style="padding:10px 5px 30px 5px;text-align:justify;background-color:#7691d4;border:1px solid black">
<p style="font-size:14pt;padding-left:5px;margin-bottom:-5px;">Is your need for</p>
<p style="line-height:1.5em;white-space:nowrap;font-size:.75em;">
<font face="Arial">► </font> International calls from the U.S.?<br />
<font face="Arial">► </font> International calls to the U.S.?<br />
<font face="Arial">► </font> Calling within the U.S.?<br />
<font face="Arial">► </font> Calls while traveling?<br />
<font face="Arial">► </font> Specific recommendations?<br />
<font face="Arial">► </font> Wireless/cell phone refill PINs?
</p>
</div>
</div>
<!--
<div align="center">
<p class="sectionheading"><a name="phonecards" id="phonecards">Phone Cards</a></p>
<a href="http://www.kqzyfj.com/3566vpyvpxCFEKIDFLCEDGDGMLF" target="_blank" onmouseover="window.status='http://www.zaptel.com';return true;" onmouseout="window.status=' ';return true;">
<img src="http://www.lduhtrp.net/o4101r6Az42ORQWUPRXOQPSPSYXR" alt="Buy the best phone cards at San Jose Cell Phones" width="300" height="250" border="0"/></a></div>
<br />
<hr align="center" width="25%" />
<div style="text-align:center;margin:0 auto;margin-top:25px;"><a class="button" href="#top">Top of Page</a></div>
<br />-->
</div>
</body>
</html>
The CSS: Code: html,body
{
height:100%;
}
body
{
background-color:#ffffff;
border: 2px #279DA4 solid;
font-family:'Berlin Sans FB Demi', 'Berlin Sans FB', Verdana,'Trebuchet MS',tahoma, sans-serif;
font-size:10pt;
}
.container
{
width: 500px;
padding: 5px;
margin:0 auto;
border: 1px solid #ccc;
background: #fff;
margin-bottom:10px;
}
I am trying to move my title text further to the right. However, when I do (by adding more  , the title breaks into another line instead of moving further to the right. I have tried manipulating the margin px, but it isnt changing. I am not familiar with manipulating floating text. How do I accomplish this? Here is my current code: <td align="center" valign="top"><table width="655" border="0" cellspacing="0" cellpadding="0"> <div style="background:url(/offices.jpg);margin:0;"><br/><br/><span style="float:right;margin:0px 150px 198px 0px;"><font type="Arial Narrow" size="5"><b> &nbs p; &n bsp; <font color="#4E4848">My title</font></b></font> </span> Hello, I've got a pesky bug that I can't figure out... I'm designing a website for a record store and the width is a little larger than 800px.. on larger screens, it loads just fine.. however when I try to load it on a smaller screen and scroll to the right (to see the info that is cut off) all of the background colors of my elements continue to be cut off. This does not occur when I start with a small window on a big screen and resize... hope that makes some sort of sense here's the site I placed an image in the backround of a table on my page. It looks fine on my computer with a square monitor set at 1024x768 pix. When I viewed it on another monitor, a wide screen it displayed about half of my image to the right of where I placed it in the table. Can this be corrected so the image looks correct in all screen resolutions? Here is a link to the page in question. It's the motor in the upper left. The image name is: log2.gif http://cb750sandcastonly.com/new/ Thank You. |
|||||||