|
CSS - Page Content Misaligned When Window Is Resized
Hello all
I have a page that uses css for the layout. The issue that I can not figure out how to fix is when someone re-sizes their browser the page content is all resized. How would I lock th positions of each span on the page so even if they resize (smaller) the browser the span's will stay where they are when the page is fully maximized on the users screen? I hope it is clear what I am asking. I tried puttin like a float tag but that does not work at all. Thanks all Jason Similar TutorialsHi. I have recently 'finished' my website, currently at http://www.aslo50.dsl.pipex.com I have positioned the images of the album cover absolutely (http://www.aslo50.dsl.pipex.com/music.htm) but they are jumping about when the browser window is resized. They are also overlapped on browser windows with different screen resolutions. The Navigation Buttons are also stacking and overlapping in this manner although they are just positioned in flow. I would be really grateful for any help you can offer. Thanks So this site is having a bit of trouble in WinIE 6.0. If you resize the window after you load the page, the dark brown area behind the content sort of gets stuck on the right. I'm wondering if it might have something to do with the javascript I had to do to get IE to recognize fixed backgrounds. Any ideas? Site: http://dev.sabotagemedia.com/firstclass/ CSS: http://dev.sabotagemedia.com/firstclass/_css/style.css Hi, I have the following horizontal navigation bar: Code: ul#List
{ list-style-type:none;
margin:0;
padding:0;
width:956px;
font-size:13px;
font-weight:bold;
}
ul#List li
{ display:inline;
}
ul#List li a
{ text-decoration:none;
padding:5px 0;
width:100px;
background:#000000;
color:#FFFFFF;
float:left;
text-align:center;
border-left:1px solid #fff;
}
ul#List li a:hover
{ background:#ADFF2F;
color:#000000;
}
<ul id="List" style="position:absolute;left:0px;top:90px;">
<li><a style="width:91px;" href="">something something</a></li>
............ </ul>
The trouble is when the window is resized (maximized or minimized) at certain points the last list overflows and appears on the next line. How can I prevent this, that is, keep the list on one line when the window is resized. Note I have tried using position:relative and putting the above inside <div> but neither solution worked. If the above code cannot be modified I wonder if someone has a horizontal navigation bar that does what I want. I will be very grateful for all help. Here's how the footer looks now: And here's the desired result: Any ideas? It'll have to be cross-browser friendly (even IE6, god help me). Thanks! Good day, I'm hoping to have this content right up against the top of the browser window. I've played around with padding values, but they don't seem to do anything and I'm unsure of what to try next. Any advice appreciated. Code: #sectionHeader {
width: 800px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
}
Code: <body> <div id="sectionHeader"> <img src="images/header.jpg" alt="Welecome to Doctor Martin's Site" width="800" height="321" border="1" /> </div> </body> I'm having a problem in IE6 when I make the browser window narrow so that all the images cannot fit horizontally. The page is at: URL In other browsers Firefox win/mac, Safari, things work ok if I make the browser window narrow so that some of the images in the right section (#section1) will not fit. The images get clipped and a horizontal scroller appears. But in IE6/Win, the whole table of images gets dropped down. I thought the issue was related to: Internet Explorer and the Expanding Box Problem URL But trying overflow:hidden; in #section1 did not help. Any help would be greatly appreciated. Thanks- YamaMon When content exceeds the window size, the fixed footer covers it. The center div has a min-width, the right div covers it when the window is resized to smaller than the min. (Also, center div drops in IE). I have googled these issues and searched the archives. I've tried many different techniques for getting these things in order, and this is the closest I've gotten so far. What I want: 1.A footer that sticks to the bottom of the viewport if there is not enough content AND stays below the container when the container is longer than the viewport. 2. The center div to be liquid with a min-fixed width and the right div to move along the edge of the center div and not cover it when viewport is sized smaller than the center div's min width. Here is a simplified version of the HTML (none of the extra divs that are used to make rounded corners) 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> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Troubleshooting</title> <link rel="stylesheet" href="layout8.css" type="text/css" /> <link rel="stylesheet" href="round.css" type="text/css" /> </head> <body> <div id="header"> <div id="masthead"></div> <div id="topnav"><div class="searchbar">Search</div> <div class="homebar"><span>Home </span></div></div> </div> <div id="container"> <div id="left"></div> <div id="right"></div> <div id="content"></div> </div> <div class="clear"> </div> </div> <div id="footer"></div> </body> </html> I think there's too much CSS to post here, but everything can be found at: www. observera. com/troubleshootingpage/index. htm CSS @ layout.css and round.css I appreciate any help you can offer Em We are now inching towards a final page. Something happened at the top of the page though; the photo of me used to be closer to the banner jpg and the text Photographs by award winning film sound editor Michael Redbourn used to be to the right of it. There is an image here which might better explain what I mean.. //i43.tinypic.com/347csua.png Page code is here .. //paste.pocoo.org/show/207983/ Second problem is that the menu at the bottom was centered until I added top and bottom margins after which it moved to the left. Thanks for the ongoing help, Mike Hello, My header (please click here ) looks good on IE7 but not on FF and IE6 I'm trying to learn CSS. I've taken great pains to get everything right. My pages all validate and they look correct on Firefox and mostly correct on Chrome. However IE is all over the place. If you view the below pages side by side on Firefox and IE, the following occur (in order of importance): - the top main box is pushed below where the left boxes end - the upper-right drop-down stuff is totally off in the weeds (Chrome also looks like IE) - "Recipes" tab isn't borderless on the bottom edge - left boxes are the wrong size and push "Clear List" out of bounds - search button is off in relation to search box mcrackan.com/recipes/csstest.htm mcrackan.com/recipes/css/default.css (Sorry about the non-links. I'm apparently not allowed to post click-able links yet.) Can anyone point me in the right direction for whatever I'm doing wrong? - Dinah Hello, What's wrong with my logo? I have created the logo with no white background but seems like it has , thus my css behind this? default.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> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="css/comersus.css" type="text/css" rel="stylesheet" /> <title>Untitled Document</title> </head> <body> <div id="header_top"> <!--begin of header_top--> <img class="bck_green" src="images/bck_green.jpg" alt=""/> <img class="bck_dark" src="images/bck_dark.jpg" alt=""/> <img class="um_logo" src="images/um_logo.jpg" alt=""/> </div> </body> </html> css Code: #header_top {
width:721px;
height:116px;
}
.um_logo {
position:absolute;
float:left;
z-index:1;
background:url(../images/um_logo.jpg);
width:93;
height:90;
}
.bck_green {
float:left;
background:url(../images/bck_green.jpg) repeat-x;
width:337px;
height:116px;
}
.bck_dark{
float:right;
background:url(../images/bck_dark.jpg) repeat-x;
width:383px;
height:116px;
}
-sorry this is photoshop related , link is not accessible anymore Hi, I made an intranet webpage using PHP, MySQL, some JavaScript (collapsible 'windows') and CSS. In IE8 it looks like the image on the left. In Firefox 3.6 it looks like the image on the right. The rows are actually separate div elements, with tables inside them; this seemed to be the only way I could get the collapsible animation script to work without error. Without subjecting myself to the humiliating scrutiny of my appalling coding, is there any obvious tip towards making the table on the left appear a little more like the table on the right? The reason why I want to use IE8 to view this page is, in part, to take advantage of its ability to link to folders on the file system - something that Firefox cannot do (at least not without some customizing). I hope that makes sense and, as always, any help appreciated. My form's Submit and Reset buttons are centered and aligned properly in Firefox and Opera, but ,of course, look ridiculous in Internet Exploder 7 - aligned center, but stacked vertically with the Submit button on top of the Reset. My form markup is below - can you tell me how to apply correct CSS to make my buttons behave in IE? If it matters, keep in mind that my form appears in the page's center column. The left column is floated left and the right column is floated right. Code:
<div id="directory">
.
<ul>
<li>
<input class=\"submit\" name=\"submitButton\" type=\"submit\" value=\"Let's see 'em\" />
<input class=\"submit\" type=\"reset\" value=\"Clear the Form\" />
</li>
</ul>
.
</div>
and here's the applicable styling already in place:
#directory fieldset {
margin:1.5em 0 0 0; padding:0;
}
#directory legend {
margin:0;
padding-left:15px;
font-weight:bold;
}
#directory fieldset ul {
list-style-type: none;
padding: 1em 1em 0 1em;
}
#directory fieldset ul li {
padding-bottom: 1em;
}
Do any questions get answered here? How would I get a simple input form to align with a submit button? You can see the problem at: bit.ly/ovFGhR The CSS txt file: bit.ly/nMyP45 My CSS I think is telling the input text box to be a part of the paragraph above and the button sits below, misaligned. Please help!! I am attempting to create a website for a hockey company, however I am at a loss with how to get the effects that I want. I am a novice web designer, and have tried so many different ways of coding this site. Frames, tables, and recently looked up a tutorial on slices in photoshop. My issue is that I am loading everything as an image and I'm afraid that my load time is going to be a lot more than it needs to be. Also, I can't get text and preview images to overlay the background where I want them to. I am trying to use AP elements, but since I have the website centered and the elements are an absolute value, depending on your window size the elements are misplaced. I am open to any and all suggestions as to how I should go about making this website while maintaining the style. I have a feeling I'm not going about this the most efficient way. I tried posting a link to the site but apparently new users can't post URLS?? If you are willing to help me out I'd really appreciate it, let me know how to get you the address. Thanks in advance! Hi, Hope someone here can help me, having trouble with IE - there's a surprise! - and block elements, more specifically <p> and <ul>. As you can see from he http://dvxl.servehttp.com/Sites/Development/InfoCAP/Sites/dynamic/ .. the first line of the top paragraph has a larger line height than the rest, same with the top <li> of the <ul>. The xhtml is empty of styles, and the only styles applied to these elements a Code:
#main_content p {
margin-top: 0px;
margin-bottom: 15px;
color: #306EB1;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.7em;
text-align: justify;
text-justify: newspaper;
}
#main_content ul li {
color: #306EB1;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.7em;
list-style-type: square;
}
#main_content li {
line-height: 15px;
}
In Firefox the line heights are consistant, am I missing something? Thanks I am at a total loss on this one. I'm trying to create a simple inline unordered list menu - no problems there - I've done that plenty of times. However, this time I would like my menu to have a border around it instead of being a plain box. As soon as I add the 'border-style:solid' modifier to the div, the text misaligns straight down, roughly 15px lines, out of the box. This happens on Firefox (and apparently on Opera as well, though I haven't checked that one myself). At this point I've stripped the page to bare bones, switched from transitional to strict, tried float vs not, tried margins vs 0 margins, and padding vs 0 padding, relative vs absolute, and attempted to manually shift the text through negative positions as well. No joy. Css: Code: /* Navigation */
#nav {
width: 821px;
height: 18px;
border: 1px;
border-style: solid;
border-color:red;
}
#nav ul {
}
#nav li {
display:inline;
float:left;
background-color:#9E0C0C;
text-align:center;
color:white;
font-family: arial, san-serif;
font-size: 14px;
font-variant: small-caps;
}
and page: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" > <link href="style.css" rel="stylesheet" type="text/css" media="screen"> </head> <body> <div id="nav"> <ul> <li>Home</li> <li>XXX</li> <li>XXX</li> <li>CCC</li> <li>HHH</li> <li>JJJ</li> <li>kkk</li> <li>KKK</li> </ul> </div> </body> </html> (As I said, I've stripped it to absolutely nothing else.) Any suggestions would be welcome. (ETA: Also tried changing text size in case a too-large font size was making the text 'pop out' of the box. That is also not it.) I have finally got my page set up as required. There is one minor niggle. The footer sits at the bottom of the page when the browser is maximised and has no content. If the browser is not maximised or the content introduces scroll bars the footer is bumped up one pixel in IE. How can I get around this? The footer CSS is below, if you require any more CSS let me know which elements (roughly) as there is a lot of it. PHP Code: #wrap { margin-left: auto; /*center the wrapper CSS2 compliant (all except IE*/ margin-right: auto; margin-top: -21px; width: 760px; top: 21px; min-height: 100%; position: relative; left: 0px; background-image: url(../images/content_bg.gif); text-align: left; } * html #wrap { height:100%; padding-bottom: -20px; } #clear_footer { clear: both; height: 21px; overflow: visible; z-index: 1999; /*background-color: green; Used for demonstration purposes only, remove after testing*/ } #contain_footer { left: 0; margin-top: -21px; width: 100%; height: 21px; background-color: red; background-image: url(../images/contain_footer_bg.gif); padding-bottom: 0px; z-index: 2002; } #footer { position: absolute; bottom: 0; margin: 0 auto; width: 760px; height: 21px; line-height: 21px; vertical-align: center; background-image: url(../images/footer_bg.gif); z-index: 1999; } Perhaps this should go into a Javascript or PHP but I wasn't quite sure. I want to declare a navigation bar's text to a fixed height of 12px which I think is rather easy for MOST anyone to read. What I'm having to do is because the site owner wants a "tabbed" appearance, I'm using images for the sides and will make the background of the text various colors (depending on if their active or not). If a visitor to the site, however, has their text style zoomed, that will considerably disrupt the apparent "image" of the tabs and make it look screwey. Text must be used for SEO so making the tabs a full image is not an option. Any advice? Sorry if this should have gone to a different forum. Thanks. Tim Supposing I have an image that is 200x200 pixels, and I have a div that is 100x100 pixels. I want to place the image inside the div AND have all 4 corners of the image visible. How do I do this? The idea is to fit the image inside the div without the image looking like it got "cut off" on any of its edges. I tried simply changing the CSS width and height but that did not achieve the desired effect. I'm hoping I won't need 4 divs, one for each corner? |
|||||||