|
CSS - Website Alignment On Bigger Resolutions
Hi,
Theres something wrong with the #sidenotes bar, as you can see, it sticks out to the far end of the browser on bigger resolutions, how do I fix that? [IMG]img.photobucket.com/albums/v336/Toniee/screeny-1.jpg[/IMG] The CSS for the #sidenotes a Code: #sidenotes {
float:right;
width:180px;
}
This is how it's suppose to look: [IMG]browsershots.org/png/full/cd/cddbe6b9915e63ef4bdfc40848d77706.png[/IMG] What do I have to change to get it back next to the other bar? Thanks Similar TutorialsOk, I've completed w3c validation, there were about 33 errors and it now shows green, saying the page was validated. However, the website is not aligned properly, I'm not sure if it's css or html. Can you guys help me further to getting it aligned and proper? Site: aspekt.blogdns.com/ahs/layout2/index2.php Thanks again for all the help guys. //index2.php Code:
<?php
include 'header.php';
include 'blocks.php';
?>
<div id="maincontent">
<table width="875" cellspacing=0 cellpadding=0 border=0>
<tr>
<td valign="top" bgcolor="#e5e5e5">
<strong>Welcome</strong>
<p>
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
dolor sit amet.
</p>
</td>
</tr>
</table>
</div>
</body>
</html>
// header.php Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>AHS v2</title>
<link rel="stylesheet" href="css/main.css" type="text/css">
<link rel="stylesheet" href="css/menu-style.php" type="text/css">
<script type="text/javascript" src="css/menu.php"></script>
</head>
<div id="pagewrapper">
<div id="header">
<a href="/"></a>
</div>
<table border='0' cellspacing='0' cellpadding='0'width="875">
<tr>
<td colspan="2">
<div id="nav">
<ul id="udm" class="udm">
<li><a tabindex="10" title="Students" class="nohref">Students</a>
<ul>
<li><a tabindex="10" title="Alumni" href="">Alumni</a></li>
<li><a tabindex="10" title="Blue Pride" href="">Blue Pride</a>
<ul>
<li><a tabindex="10" title="Overview" href="">AHS Music</a></li>
<li><a tabindex="10" title="Overview" href="">Athletics</a></li>
<li><a tabindex="10" title="Overview" href="">Boosters Club</a></li>
<li><a tabindex="10" title="Overview" href="">Community Service</a></li>
</ul>
</li>
<li><a tabindex="10" title="Student Work Drop Down" class="nohref">Student Work</a>
<ul>
<li><a tabindex="10" title="AHS Music" href=""><i>Eagles Eye</i></a></li>
<li><a tabindex="10" title="Athletics" href="" target="_blank">Jewelry</a></li>
<li><a tabindex="10" title="Boosters" href="">Multimedia</a></li>
</ul>
</li>
</ul>
</li>
<li><a tabindex="10" title="Parents" class="nohref">Curriculum</a>
<ul>
<li><a tabindex="10" title="" href="">AHS Rubrics</a></li>
<li><a tabindex="10" title="" href="">Career and Technical Programs</a></li>
<li><a tabindex="10" title="" href="" target="_blank">Guidance</a></li>
<li><a tabindex="10" title="" href="">NEASC</a></li>
<li><a tabindex="10" title="" href="">Program of Studies</a></li>
</ul>
</li>
<li><a tabindex="10" title="Community" class="nohref">Information</a>
<ul>
<li><a tabindex="10" title="" href="">Announcements</a></li>
<li><a tabindex="10" title="" href="">Blue Notes</a></li>
<li><a tabindex="10" title="" href="">Calendar</a></li>
<li><a tabindex="10" title="" href="">Contact Information</a></li>
<li><a tabindex="10" title="" href="">Directions</a></li>
<li><a tabindex="10" title="" href="">Handbook</a></li>
<li><a tabindex="10" title="" href="">Health Center</a></li>
<li><a tabindex="10" title="" href="">Mission Statement</a></li>
<li><a tabindex="10" title="" href="">Parent Connection</a></li>
<li><a tabindex="10" title="" href="">Summer Reading</a></li>
</ul>
</li>
<li><a tabindex="10" title="Utilities" href="">Contact</a></li>
</ul>
</div>
</td>
</tr>
</table>
</div>
// blocks.php Code:
<div id="blockcontent">
<table align="right">
<tr>
<td valign="top" width="200">
<table cellspacing=0 cellpadding=4 border=0>
<tr bgcolor="#cccccc"><td>
<strong>Account Login</strong>
<p align="left">
<form name="login" method="post" action="login.php">
<br>
<div align="left">
Username: <input name="myusername" type="text" id="myusername">
<br>
Password: <input name="mypassword" type="text" id="mypassword">
<br></div><br>
<input type="submit" name="Submit" value="Login">
</form>
</td></tr>
<tr><td><img src="/Graphics/blank.gif" height=1 width="200" ALT=""></td></tr>
<tr bgcolor="#cccccc"><td>
<a style="font-weight:bold;" href="/calendar/">Calendar of Events</a><p />
<center>
<table class="calendar">
<tr>
<td align="center" valign="top"> </td>
<td align="center" valign="top" class="calendarHeader" colspan="5">December 2006</td>
<td align="center" valign="top"> </td>
</tr>
<tr>
<td align="center" valign="top" class="calendarHeader">S</td>
<td align="center" valign="top" class="calendarHeader">M</td>
<td align="center" valign="top" class="calendarHeader">T</td>
<td align="center" valign="top" class="calendarHeader">W</td>
<td align="center" valign="top" class="calendarHeader">T</td>
<td align="center" valign="top" class="calendarHeader">F</td>
<td align="center" valign="top" class="calendarHeader">S</td>
</tr>
<tr>
<td align="center" valign="top" class="calendar"> </td>
<td align="center" valign="top" class="calendar"> </td>
<td align="center" valign="top" class="calendar"> </td>
<td align="center" valign="top" class="calendar"> </td>
<td align="center" valign="top" class="calendar"> </td>
<td align="center" valign="top" class="calendar"><a class="calendar" onMouseOut="kill();" onMouseOver="popup('<strong>Events on
12/1/2006</strong>03:00 pm Testing javapopup event <br/>','#ddd','0');">1</a></td>
<td align="center" valign="top" class="calendar">2</td>
</tr>
<tr>
<td align="center" valign="top" class="calendar">3</td>
<td align="center" valign="top" class="calendar">4</td>
<td align="center" valign="top" class="calendarToday">5</td>
<td align="center" valign="top" class="calendar">6</td>
<td align="center" valign="top" class="calendar">7</td>
<td align="center" valign="top" class="calendar">8</td>
<td align="center" valign="top" class="calendar">9</td>
</tr>
<tr>
<td align="center" valign="top" class="calendar">10</td>
<td align="center" valign="top" class="calendar">11</td>
<td align="center" valign="top" class="calendar">12</td>
<td align="center" valign="top" class="calendar">13</td>
<td align="center" valign="top" class="calendar">14</td>
<td align="center" valign="top" class="calendar"><a class="calendar" onMouseOut="kill();" onMouseOver="popup('<strong>Events on
12/15/2006</strong>11:00 am Testing javapopup event <br/>','#ddd','0');">15</a></td>
<td align="center" valign="top" class="calendar">16</td>
</tr>
<tr>
<td align="center" valign="top" class="calendar">17</td>
<td align="center" valign="top" class="calendar">18</td>
<td align="center" valign="top" class="calendar">19</td>
<td align="center" valign="top" class="calendar">20</td>
<td align="center" valign="top" class="calendar">21</td>
<td align="center" valign="top" class="calendar">22</td>
<td align="center" valign="top" class="calendar">23</td>
</tr>
<tr>
<td align="center" valign="top" class="calendar">24</td>
<td align="center" valign="top" class="calendar">25</td>
<td align="center" valign="top" class="calendar">26</td>
<td align="center" valign="top" class="calendar">27</td>
<td align="center" valign="top" class="calendar">28</td>
<td align="center" valign="top" class="calendar">29</td>
<td align="center" valign="top" class="calendar">30</td>
</tr>
<tr>
<td align="center" valign="top" class="calendar">31</td>
<td align="center" valign="top" class="calendar"> </td>
<td align="center" valign="top" class="calendar"> </td>
<td align="center" valign="top" class="calendar"> </td>
<td align="center" valign="top" class="calendar"> </td>
<td align="center" valign="top" class="calendar"> </td>
<td align="center" valign="top" class="calendar"> </td>
</tr>
</table>
<br />
<a href="/eventRequest/">Submit an Event</a>
</center>
</td></tr>
<tr><td><img src="/Graphics/blank.gif" height=1 width="200" ALT=""></td></tr>
<tr bgcolor="#dddddd"><td>
<strong>Box number 2</strong>
<br><br>
Loreum Ipsum
</td></tr>
<tr><td><img src="/Graphics/blank.gif" height=1 width="200" ALT=""></td></tr>
<tr bgcolor="#cccccc"><td>
<strong>Site Statistics</strong>
<p align="left">
<a href="/visiting/">Visitors:</a><br />
<br />
</p>
<p align="left">
<strong>Session Information:</strong><br />
0 minute, 0 second<br />
Language: English<br />
</p>
<p align="left">
<strong>Page Generation:</strong><br />
Generated in 0 seconds
</p>
</td></tr></table>
<p />
</td>
</tr>
</table>
</div>
Hello, I have been writing a web page as a project for a course using XHTML. I have tested it with several browsers, including IE, Netscape, and Opera and validated its source code and CSS Style sheet. The site works at 1024 X 768 resolution. My problem is that if I minimize the window or change the screen resolution size every div element gets switched around and the display is destroyed. The page is currently located at http://student.flvs.net/html/millety/mod8/index2.htm . Please tell me how to fix this. The links on the page do not work as they should, so only look at the oage I have linked to. I would like the color behing the navigation to run in a vertical band all the way to the bottom of the page. The footer is supposed to be all the way at the bottom and the main text's background color should not appear under it, which is part of my current problem. Thank you in advance for your help. I have a tab bar that sits on top of two div columns. The bar is supposed to sit in the center of the top of the left column. I can achieve this perfectly via Code: position: absolute; top: 16%; left: 30%; The problem here lays in the fact that anyone NOT running my screen resolution is telling me that it's not where it's supposed to be. How can I put this where it needs to be, regardless of who is viewing it, and how crappy their PC might be? http://www.invalidheart.org/carrie/ it doesn't work in anything but my resolution... can anyone help me fix this? I've had a huge hard time with this layout making it fit right, i tried using all css and i couldn't get it to fit. any suggestions? Hi I really need help I've added new template to my site and it's custom template(means it was on my web site provider) BUT logo area is too small And I also can't get rid of the picture that's in header and that came with template The biggest problem is that I can't move logo area UP it's in same line always,it just increases down,when I try to make it bigger I have NO idea about CSS coding so I really don't know how to fix it HELP!!! Good Day, Trying to setup the font sizes for my site. In higher resolutions, everything seems to look acceptable. When I view the page on a low resolution screen, everything seems ridiculously large. Is there anyway to set the styles up to relieve this problem? Best, Colin Hey, A while back i wanted to make a personal PHP based addressbook, just for my own use, very simple without much layout. But later i decided to expand the functionality and layout a bit. Now i ended up with a nice result (in my opinion) however only for Firefox in the resolution 1024x768. Most of the problems have to do with the positioning of the div's of which my page consist. The page is divided like this: Without borders between the div's. This is how it looks in Firefox which im ok with: http://img529.imageshack.us/img529/9766/ffkg1.jpg And it looks like this in IE: http://img371.imageshack.us/img371/2332/iezn0.jpg I used the following classes for the divs (i only post the relevant parts of the classes that has to do with the positioning): -EDITED- deleted the css code in this post. The new updated code is in my new post. I've spented alot of time to get the divs in the right position just for Firefox when i started this site. Can anybody help me with this? I want to specify everything in percentages to make it look right in all resolutions , however this doesnt seem to work yet but i first want to know how to make my pages look good in IE too. thanks in advance. 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? I have been having a problem with my CSS. I want to make my visited links just a big bigger than my unvisited links so that the users can know where they been Code:
#mainCategories a:link{
font-size:.55em;
}
#mainCategories a:visited{
font-size:.65em;
}
#mainCategories a:hover{
font-size:.65em;
}
#mainCategories a:active{
font-size:.65em;
}
it changes size on a:hover but not on a:visited Hi I have an image positioned on my page with this Code: .notpos {
overflow: visible;
position: absolute;
visibility: visible;
z-index: auto;
height: auto;
width: auto;
left: 170px;
top: 20px;
}
The problem is when a different screen resolution is used the image moves .......... can anyone help please? Hi; Could anyone tell me How to make the words(Australia, lawer, other..and so on) bigger from the select boxs ? Thanks Code: <form name="search_form" id="sf" action="search_p1.php" method="get"> <div> <span class="search_form">Country:</span> <select name="country" id="country" onchange="setStates();"> <option value="Australia">Australia</option> </select> <span class="search_form">state:</span> <select name="province_state_territories" id="state" onchange="setCities();"> <option value="">Please select a area</option> </select> </div> <div> <span class="search_form">city:</span> <select name="city" id="city"> <option value="">please choose a city</option> </select> <span class="search_form">area:</span><input type="text" name="area" size="10"> <span class="search_form">business type:</span> <select name="business_type"> <option value="solicitor">lawer</option> <option value="other">other</option> </select> </div> <div> <input type="submit" id="search_submit" name="search_submit" value="submit"></div> </form> I have a few div on my page and the ones that have long lines or URL's are expanding width-wise. Code: <div style="width: 300px;">MyVeryLongLineThatCanAndMostLikelyContainsURLs</div> I would like that the div keeps the same width, as the height is not a problem as the div contains other text, causing it to grow downwards anyway, and allow the line to break up with out causing any possible hyperlinks that are in the text to fail if clicked. what happens is that the div grow wider to allow the long line to show inside. Greetings. I have an annoying strange behaviour with MSIE 6.0 (unfortunately, this is the official browser in our company..). When a div object appears (with a list of valid values), select tags will stay in front. With Firefox 2.0 and Safari this doesn't arrives.. all is perfect. I am working on Windows XP sp2. I prepared a simple page to show you, but here I cannot insert urls nor images.... :-( I will be very happy to receive your feedback. Safe paths, Stefano I would like to pop up the text, that is, make it bigger when the user hovers on it. but the problem everytime the text gets bigger, the whole row moves and the surrounding texts gets displaced. any idea ? tutorial? let me know if i need to explain more. HI, I'm trying to get a line of text to lineup with a textbox using css. The code I have is as follows: Code:
.row {
height: 30px;
vertical-align: text-top;
}
.formField {
border: 1px solid #666;
width: 150px;
background: #FFFFFF;
color: #000000;
}
<body>
<div class="row">
xxxxx: <input type="text" class="formField">
</div>
</body>
The textbox is sitting just above the text. How can I get them lined up properly? I have two columns (menu and content) and would like them to be horizontally aligned to the center sensitive to the size of the browser and relative to each other. I have figured out how to do this with the content column (right one) but I'm having trouble doing this with the menu column. I would like it to be equally space relative to the placement of the content column. Any help would be appreciated. Here's the code: Code: / { margin: 0; padding: 0; }
body { font-size: 12px; font-family: Helvetica Neue, Arial, Verdana, sans-serif; background: #F2F2F2; }
body.section-1 { }
body.section-2 { }
body.section-3 { }
a:link { text-decoration: none; } a:active { text-decoration: none; } a:visited { text-decoration: none; color: #666; } a:hover { background-color: black; color: #f2f2f2; } a img { border: none; }
#menu { width: 130px; overflow: hidden; top: 40px; position: fixed; height: 100%; background-color: #e6e6e6; text-align: left; margin: 0px 0px 0 0px 180px; left: 12%; }
#menu ul { list-style: none; margin: 0px; }
#menu ul li.section-title { }
#content { height: 150%; width: 700px; margin: 0 0 0 300px; top: 40px; position: relative; background-color: white; overflow: auto; padding: 15px; margin-left: auto; margin-right: auto; } .container { padding: 0px; }
#content p { width: 400px; margin-bottom: 15px; }
p { margin: 0 0 9px 0; } h1 { font-size: 32px; } h2 { font-size: 24px; } h3 { font-size: 16px; } h4 { font-size: 12px; }
#img-container { margin: 0; padding: 0; }
#img-container p { width: 400px; margin: 0; padding: 0 0 12px 0; } #once { clear: left; }
Hello... Here is the site I'm having issues with ralphwall.com I'm noticing that it only happends in IE6 and not other browsers. It's shifting my float:right; column down the page. Here is the code in my css. Could anyone please help? I'm starting to pull my hair out. Thanks in advance. body{ cursor:url("assets/mouse.cur"); background-color:#20110A; overflow:hidden; font-family:Georgia, "Times New Roman", Times; font-size:14px; color:#FEF5E0; } a:link{ color:#FEF5E0; background-color:#7E5F33; } a:visited{ color: #FEF5E0; background-color: #7E5F33; } a:hover{ color: #7E5F33; background: #FEF5E0; } img{ border:0; } ul{ list-style-type:square; } #header{ float:left; width:90%; padding-left:5%; padding-right:2.5%; } #header h1{ font-family:Georgia, "Times New Roman", Times; font-size:36px; font-style:italic; color:#7E5F33; } #topnav{ float:right; width:95%; padding-right:2.5%; text-align:right; border-top: solid #7E5F33; } .hovermenu ul{ padding-left: 0; margin-left: 0; height: 16px; } .hovermenu ul li{ list-style: none; display: inline; } .hovermenu ul li a{ padding: 2px .5em; text-decoration: none; float: right; color: #FEF5E0; background-color: #7E5F33; border: 2px solid #7E5F33; } .hovermenu ul li a:hover{ background-color: #20110A; border-style: outset; } html>body .hovermenu ul li a:active{ /* Apply mousedown effect only to NON IE browsers */ border-style: inset; } #left{ float:left; width:20%; padding-left:5%; padding-right:2.5%; } #right{ float:right; width:60%; padding-left:5%; padding-right:2.5%; text-align:left; verticle-aling:top; } #right h1{ font-family:Georgia, "Times New Roman", Times; font-size:24px; font-style:italic; color:#7E5F33; } #footer{ float:right; width:95%; padding-right:2.5%; font-style:italic; text-align:right; } Hi, I am trying to convert my table design to CSS and building the bare structure now but having some troubles with the alignment/layout. I want to move the left and right columns under the header div. but with float: left, they keep sticking to each other. here is the link: http://www.internationalnannies.com/test/ here is my CSS: Code:
/* Structure setup */
#header {
background-color: Aqua;
}
#body {
background-color: grey;
}
#leftColumn {
background-color: silver;
float: left;
width: 150px;
position: relative;
}
#rightColumn {
background-color: blue;
float: left;
width: auto;
position: relative;
}
#footer {
background-color: pink;
clear: both;
position: relative;
}
#photo {
background-color: grey;
margin-right: 5px;
float: left;
position: relative;
}
#headerRightContent {
background-color: red;
position: relative;
float: left;
}
/* *********************************** */
and here is my html: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>index</title>
<style type="text/css">
@import "styles.css";
</style>
</head>
<body>
<div id="header">
<div id="photo"><img src="images/noImage.gif" width="120" height="160" alt="noImage (1K)" /></div>
<div id="headerRightContent">right content</div>
</div>
<div id="body">
<div id="leftColumn">left</div>
<div id="rightColumn">right</div>
</div>
<div id="footer">footer</div>
</body>
</html>
Can someone do a quick review of this and comment? Thanks, Edwinx |
|||||||