|
CSS - How To Make Images That Are Right Aligned With The Web Page Window?
How to make images that are right aligned with the web page window?
Anyone helps? Thanks in advance. Similar TutorialsWow I REALLY hate CSS. For hours I have been trying to figure this out: Here is some HTML Code:
<td>
<div class="linksbar">
<div class="linkstext">
link - link - link - link
<img src="imagelink.jpg">
<img src="imagelink2.jpg">
</div>
</div>
</td>
[CODE]
the CSS
[CODE]
.linksbar {
height: 28px;
background-image: url(bg.jpg);
}
.linkstext {
vertical-align: middle;
line-height: 28px;
font-weight: bold;
color: white;
}
First problem: in Chrome, the text rests at the bottom of the div. I want it in the middle. Second problem: in IE it looks like a mess. The text is sort of in the middle (more towards the bottom). the image links are at the very top. The image link height is like 20 or something. You'll have to bear with me on the CSS, the file is a mess. I couldn't get it to do what I want, so I had to copy the file from someplace else, so there's alot of code commented out. The HTML is much cleaner though! The issue is in the image above is that the 'Contact' and 'Back to Projects' images are too high in Safari. In IE and Firefox they're placed correctly. All the other images on the rest of the site line up fine, as you can see with the JW logo, Resume link, and even the bar across the screen All the images are in their own < li > (I think it's weird myself, but it works). And the placement is done in the CSS. Code:
<li id="ResumeHigh"><a href="resume.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('resume','','images/resume_rollover.gif',1)"><img src="images/resume.gif" name="resume" border="0" id="about" /></a></li>
<li id="ContactHigh"><a href="contact.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','images/contact_rollover.gif',1)"><img src="images/contact.gif" name="contact2" border="0" id="contact2" /></a></li>
<li id="BackHigh"><a href="index.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Back','','images/back_to_proj_rollover.gif',1)"><img src="images/back_to_proj.gif" name="Back" width="141" height="9" border="0" id="Back" /></a></li>
And the CSS Alignment: Code:
#ResumeHigh {left:550px; top: 62px; width: 141px; height: 11px;}
#ContactHigh {left:550px; top: 78px; width: 141px; height: 11px;}
#BackHigh {left: 550px; top: 101px; width:141px; height:9px;}
Full Pages: http://www.jerrywatersarchitect.com/sample/contact.asp http://www.jerrywatersarchitect.com/sample/jw2.css Any ideas whats causing the 'Contact' and 'Back to Projects' to be a few pixels too high? I appreciate any help you can provide. Not sure if this should go in HTML forum or here, but there is CSS involved, so... Anyways, have a page here with 3 images aligned right. (Currently they are floated right, but problem originally was seen with aligned right, changed to css float and problem is the same). http://www.4for4.com/draft_board/to...r_id=HOTSTOVE13 I only see the issue in Chrome, but in Chrome if I refresh the browser, about every third or forth time the text will not wrap around one of the bottom 2 images in the main content area (Hancock & Theron). The text will just lay over the top of the image. If I refresh it will work again, but randomly will not render correctly over one of the two images that is aligned right. Is this just a weird Chrome rendering issue? Or is there some property I can add to the image that will force this to not happen? Thanks a lot. I'm currently creating a simple website using css and its looks fine in IE however the nav bar is not aligned with everything else in Firefox. Sorry i'm new at CSS, thanks for the help in advance. Here is the site: insightchirocare.ca Here is the css code: Code: /* CSS Document */
*{
padding:0;
margin:0;
width: auto;
}
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
background-repeat:repeat-x;
background-color:#ffffff;
padding:0;
margin:0;
}
#container {
width:800px;
margin:auto;
padding-top: 30px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
/* HEADER IMAGE */
#header{
background-repeat:no-repeat;
background-image: url(images/header.gif);
height: 150px;
width: 800px;
float:left;
margin:300 px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 3px;
padding-left: 0px;
}
/* HEADER BACKGROUND IMAGE END */
/* NAVIGATION */
#nav{
width:800px;
float:right;
height:30px;
margin-top: 0px;
margin-left: 0px;
margin-bottom: 0px;
margin-right: 40px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 3px;
padding-left: 0px;
}
.menu ul{
padding:0;
margin:0;
list-style-type:none;
list-style:none;
display:inline;
}
.menu li{
padding-right:0px;
margin:0 0px 0 0;
height:30px;
list-style-type:none;
list-style:none;
display:inline;
float:left;
}
span{
display:none;
}
#home a{
background:url(images/nav_bar/home.gif);
width:74px;
height:30px;
display:block;
}
#home a:hover {
background:url(images/nav_bar/home_gr.gif);
width:74px;
height:30px;
display:block;
}
#home a:active {
background:url(images/nav_bar/home_gr.gif);
width:74px;
height:30px;
display:block;
}
#about_us a{
background:url(images/nav_bar/about_us.gif);
width:82px;
height:30px;
display:block;
}
#about_us a:hover{
background:url(images/nav_bar/about_us_gr.gif);
width:82px;
height:30px;
display:block;
}
#about_us a:active{
background:url(images/nav_bar/about_us_gr.gif);
width:82px;
height:30px;
display:block;
}
#first_visit a{
background:url(images/nav_bar/first_visit.gif);
width:81px;
height:30px;
display:block;
}
#first_visit a:hover{
background:url(images/nav_bar/first_visit_gr.gif);
width:81px;
height:30px;
display:block;
}
#first_visit a:active{
background:url(images/nav_bar/first_visit_gr.gif);
width:81px;
height:30px;
display:block;
}
#gonstead_chiro a{
background:url(images/nav_bar/gonstead_chiro.gif);
width:162px;
height:30px;
display:block;
}
#gonstead_chiro a:hover{
background:url(images/nav_bar/gonstead_chiro_gr.gif);
width:162px;
height:30px;
display:block;
}
#gonstead_chiro a:active{
background:url(images/nav_bar/gonstead_chiro_gr.gif);
width:162px;
height:30px;
display:block;
}
#faq a{
background:url(images/nav_bar/faq.gif);
width:71px;
height:30px;
display:block;
}
#faq a:hover{
background:url(images/nav_bar/faq_gr.gif);
width:71px;
height:30px;
display:block;
}
#faq a:active{
background:url(images/nav_bar/faq_gr.gif);
width:71px;
height:30px;
display:block;
}
#kid_chiro a{
background:url(images/nav_bar/kids_chiro.gif);
width:124px;
height:30px;
display:block;
}
#kid_chiro a:hover{
background:url(images/nav_bar/kids_chiro_gr.gif);
width:124px;
height:30px;
display:block;
}
#kid_chiro a:active{
background:url(images/nav_bar/kids_chiro_gr.gif);
width:124px;
height:30px;
display:block;
}
#testimonials a{
background:url(images/nav_bar/testimonials.gif);
width:105px;
height:30px;
display:block;
}
#testimonials a:hover{
background:url(images/nav_bar/testimonials_gr.gif);
width:105px;
height:30px;
display:block;
}
#testimonials a:active{
background:url(images/nav_bar/testimonials_gr.gif);
width:105px;
height:30px;
display:block;
}
#contact_us a{
background:url(images/nav_bar/contact_us.gif);
width:101px;
height:30px;
display:block;
}
#contact_us a:hover{
background:url(images/nav_bar/contact_us_gr.gif);
width:101px;
height:30px;
display:block;
}
#contact_us a:active{
background:url(images/nav_bar/contact_us_gr.gif);
width:101px;
height:30px;
display:block;
}
/* NAVIGATION END*/
/* LEFT_CONTENT*/
#left_content {
height: 450px;
width: 500px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #757171;
margin-top: 0px;
margin-left: 0px;
float: left;
margin-right: 5px;
background-color:ffffff;
}
/* LEFT_CONTENT END*/
/* REG_CONTENT*/
#reg_content {
height: auto;
width: 800px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #757171;
margin-top: 0px;
margin-left: 0px;
background-color:#ffffff;
}
/* REG_CONTENT END*/
/* RIGHT_CONTNET*/
#right_content{
height: 450px;
width: auto;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #757171;
padding: 0;
margin-top: 0px;
margin-left: 0px;
margin-bottom: 0px;
margin-right: 0px;
background-color:#e3e3e3;
}
/* RIGHT_CONTENT END*/
h1 {
padding:0;
margin:0;
font-size:16px;
color:#008bcf;
font-family: Verdana;
font-weight: normal;
}
h2 {
padding:0;
margin:0;
font-size:12px;
color:#008bcf;
font-family: Verdana;
font-weight: normal;
}
p {
padding:0;
margin:0;
font-size:12px;
color:#757171;
font-family: Verdana;
}
/* FOOTER*/
#footer {
padding : 0;
width: 800px;
height: 40px;
background: url(images/footer.gif);
margin-top: 2px;
margin-right: auto;
margin-bottom: 30px;
margin-left: auto;
}
/* FOOTER END*/
.clearfloats {clear:both;}
A:link {
text-decoration: underline; color: #008BCF;
}
A:visited {
text-decoration: underline; color: #008BCF;
}
A:active {
text-decoration: underline; color: #18fa07;
}
A:hover {
text-decoration: underline; color: #18fa07;
}
Can it be done with just CSS? I have a table of data where the text in the data cells wraps and fills the td cell with several lines of text. This is OK when the browser window is a "normal" size, but if someone is viewing with a widescreen monitor I would like the table to get wider and make the cell contents not wrap the text. Or if they are viewing with a small monitor I want it to wrap even more (table would get smaller). Can this be done with CSS, or do I need to do something with javascript? I deleted the other posting as it take too long to work on it and it doesn't work. So, I got the other code from google search and decided to use it. There, I rearrange, redo, customzie the scripts to make it work better. Now I have one problem. See the class "wrapper" that make use of the height. I when I have it set at 100%, the footer extend too far down and the vertical scroll bar appear at the right. This is not what I want. I figure maybe it's because of the float that the browser doesn't know the real height of the header and footer. Can anyone help? I would really apppreciated it. Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
background-color: #FFFF00;
border-top: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-right: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-left: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-bottom: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
}
html {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
width: 100%;
}
table {
border: 0px solid #000000;
border-collapse: collapse;
border-spacing: 0px;
}
#columnleft {
margin: 0px;
padding: 0px;
width: 10%;
height: 100%; /* Required by IE to inherit from wrapper (IE Hack) above */
background-color: #0000FF;
border-top: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-right: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-left: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-bottom: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
/* position: absolute; */
float: left;
}
#columnright {
margin: 0px;
padding: 0px;
width: 10%;
height: 100%; /* Required by IE to inherit from wrapper (IE Hack) above */
background-color: #0000FF;
border-top: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-right: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-left: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-bottom: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
/* position: absolute; */
float: right;
}
#footer {
margin: 0px;
padding: 0px;
width: 100%;
height: 65px;
background-color: #FFCC00;
border-top: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-right: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-left: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-bottom: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
/* position: relative; */
}
#clearfooter {
clear: both;
}
#header {
margin: 0px;
padding: 0px;
width: 100%;
height: 65px;
background-color: #FFCC00;
border-top: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-right: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-left: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-bottom: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
/* position:relative; */
}
#main {
margin: 0px;
padding: 0px;
width: 79.8%; /* #columnleft + #main + #columnright = 100% width, but take away 0.02% for the #main due to for some browser's inaccurate mathetical rendering, such as 100.1% or 100.2% which cause the Right Column to jump to the bottom, so 99.8 % total width is better as it make the browser's glitch not be that noticeable. Just add some background color to the #wrapper so that the color can match either the #main or #columnright */
height: 100%; /* Required by IE to inherit from wrapper (IE Hack) above */
background-color: #FFFFFF;
border-top: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-right: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-left: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-bottom: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
/* position: relative; */
float: left;
}
#wrapper {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
/* min-height: 80%; */ /* Might not be needed, it's an IE Hack... */
background-color: #FF0000;
border-top: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-right: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-left: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-bottom: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
/* position: relative; */
}
/* IE Hack - Layout REQUIRES a height here to work */
/*
* html #wrapper {height: 100%;}
*/
</style>
</head>
<body>
<div id="header">Header Text</div>
<div id="wrapper">
<div id="columnleft">Left Text</div>
<div id="main">Center Content</div>
<div id="columnright">Right Text</div>
</div>
<div id="clearfooter"></div>
<div id="footer">Footer Text</div>
</body>
</html>
Thanks, FletchSOD Hi. 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 Is there a way I can have a div on my page that does not expand the window area (creating scrollbars) when the browser window is too small? I ask because I have a three-column layout, but the left and right columns are merely aesthetic-- they hold no content. The center column is 1000px, which is my limit. So if a user has a screen resolution of 1024 pixels wide, I don't want the left and right columns to cause there to be scrollbars. If my far-left and far-right column divs weren't a set width, that would solve my problem-- but then I need multiple background-images, which is only compatible with Safari. I could also make the <body> have "overflow:hidden", getting rid of scrollbars altogether... but then the valuable content on the middle column would be hidden if the browser window is too small-- plus you wouldn't be able to scroll down! Any ideas? works in FireFox, page looks the same no matter how u resize the window: http://img63.imageshack.us/img63/3264/firefoxview.png looks bad in IE: http://img63.imageshack.us/img63/8986/ieview.png css: Code: body
{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#content
{
height: 100%;
width: 100%;
position:absolute;
z-index:2;
}
img#bg
{
width:100%;
height:100%;
position:absolute;
z-index:1;
}
img#titleimg
{
width:100%;
height:100%;/*new*/
}
img#mainmenuimg
{
text-align:center;
width:30%;
height:100%;/*new*/
}
img#analogskillsimg
{
width:40%;
height:60%;
}
img#programmingimg
{
float:right;
vertical-align:bottom;
width:40%;
height:60%;
}
img#analogskillstext
{
vertical-align:bottom;
width:40%;
height:100%;/*new*/
}
img#programmingtext
{
float:right;
width:40%;
height:100%;/*new*/
}
table.introlayout
{
width:100%;
height:100%;
}
td.introtitle
{
width:100%;
height:10%;
}
td.skillpics
{
vertical-align:bottom;
width:100%;
height:70%;
}
td.skilltext
{
vertical-align:top;
width:100%;
height:10%;
}
td.menu
{
text-align:center;
width:100%;
height:10%;
}
xhtml: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Patrick Allard's Very Graphic Website</title> <link rel="stylesheet" type="text/css" href="main.css" /> </head> <body> <img src="backgroundfire2.gif" alt="background image" id="bg" /> <div id="content"> <table class="introlayout"> <tr> <td class="introtitle"> <img src="titlemaxfontgreyredfire.gif" alt="background image" id="titleimg" /> </td> </tr> <tr> <td class="skillpics"> <img src="analogskillspic.jpg" alt="background image" id="analogskillsimg" /> <img src="programmingpic.jpg" alt="background image" id="programmingimg" /> </td> </tr> <td class="skilltext"> <img src="analogskillsmaxfontblackbluefire.gif" alt="background image" id="analogskillstext" /> <img src="programmingmaxfontblackbluefire.gif" alt="background image" id="programmingtext" /> </td> </tr> <td class="menu"> <img src="mainmenumaxfontblackbluefire.gif" alt="background image" id="mainmenuimg" /> </td> </tr> </table> </div> </body> </html> Hi guys I'm having a little problem with a <table> based website Please check the following image Each circle in the image attached is a separate image file, and I must make each image to be inside design. My problem is that the images doesn't fit in the <td> area, so well... Is there a way I can make the images float over the table ? I mean, a decent way to do this without having to convert entire design form <tables> to <divs> (PS: I'm still learning tableless designs) Thanks a lot in advance 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 I've had this problem before but figured I'd finally write for suggestions. When tables that are aligned to a certain position of text, say to the right of the text, have style="margin-left: 10px" to avoid running right into the text, in I.E. that margin gets applied to the first line of the text as well. Easier to show: http://wandp.american.edu/community_events.php Notice the indentation in the text in IE that isn't in Firefox. I think what I did as a workaround before is give the table a white left border, or make an extra table column. Would like to avoid either (the border part because I might decide to change the background colo or use this in several apps). Any thoughts? Thanks, Jeremy Hi, i'm working on this search box but I can't get the 3 elements perfectly aligned, the bottom of the elements should be aligned. What I have is: Search: <input> <img> Search is <label>, input is a normal input text box, <img> is used instead of submit. The problem is, that the <img> is about 5px higer than the other two. The Search label and input are middle aligned. Does anyone have a solution for this positioning problem? A link with workarounds would be useful. Thanx. I've had this problem before but figured I'd finally write for suggestions. When tables that are aligned to a certain position of text, say to the right of the text, have style="margin-left: 10px" to avoid running right into the text, in I.E. that margin gets applied to the first line of the text as well. Easier to show: http://wandp.american.edu/community_events.php Notice the indentation in the text in IE that isn't in Firefox. I think what I did as a workaround before is give the table a white left border, or make an extra table column. Would like to avoid either (the border part because I might decide to change the background color or use this in several apps). Any thoughts? Thanks, Jeremy Hi all, Not sure if I'm aligning the container of this page properly: http://ntcjapan.com/languages/arabic/ The page is right-aligned and displaying correctly on all browsers except I.E. 5.0 On IE 5.0, the container remains on the left of your screen, not on the right. Due to arabic text, etc., the direction of the body is rtl The CSS (note the "container" div at the end, plus its margin): Code:
body {
height:100%;
margin: 0px;
padding: 0;
background: #FFFFFF url(../../../images/0_bg_body.jpg) no-repeat fixed -5px 100px;
}
body {
font-family: "Simplified Arabic", "Arabic Transparent", "Traditional Arabic", "Arial (Arabic)", "Times New Roman (Arabic)", "AGA Arabesque", "NaskhTT", "Akhbar MT", "Courir New (Arabic)", "Decotype Naskh", "Mudir MT", "Simplified Arabic fixed", "Tahoma (Arabic)", "Andalus", "Monotype Koufi", "Decotype Naskh Extension", "Decotype Naskh Special", "Decotype Naskh Swashed", "Decotype Naskh Variants", "Decotype Naskh Thuluth", "Simplified Arabic backslanted", "Traditional Arabic Backslanted", Arial,Helvetica,sans-serif;
line-height:19px;
font-size: 13pt;
font-weight:bold;
}
p {
direction:rtl;
}
div {
text-align:right;
direction:rtl;
}
#container {
margin: 0 0 0 auto;
text-align: left;
width: 762px;
background: url(../images/0_bg_right.gif) repeat-y fixed top right;
min-height: 100%;
height: auto;
direction: ltr;
}
I suppose I need an additional style for IE 5.0 and 5.5 - to tell those browsers to align the container to the right. Any ideas? Thanks in advance! http://206.169.23.2/index3.htm http://206.169.23.2/style3.css The borders are not aligning correctly. Hi everybody, I'm sure there is a very simple solution to this layout problem but I haven't been able to fix it. My design displays perfectly in Firefox but is out of place by 40px in IE. URL The CSS in question is certainly this div: Code: #sub-content ul li a {
...
margin-left: -40px;
position: relative;
}
I've tried various IE hacks, such as the ones mentioned on Centricle, e.g: Code: div>#sub-content ul li a {
margin-left:0px;
}
But to no avail. Would a CSS guru mind helping me out? I've been trying to tweak the styling on hxxp://beecycle-co-uk.domain-ref.http.xenon.lon.periodicnetwork.com/Products.aspx?category=2&product=8 for a while now, and for some reason that page's #wrappper is aligned left, not center. I've picked through each element but I can't see any reason for it to do that. Am I missing something? If you take a look here http://www.challengeyourdiet.com/login you may notice that the page does not go all the way down on big screens. I would like my footer to automatically fall to the bottom of the page no matter what screen size someone has. Any ideas? Thanks! |
|||||||