|
CSS - Image Moving Across The Page When Re Sizing Browser
Hello,
I have my XHTML code in CSS to insert an image at the top like this: Code: <div id="award">
<img src="images/award.gif" alt="Year Award" />
</div>
#award
{
position: absolute;
top: 30px;
left: 400px;
z-index: 99;
}
When I resize my browser this image just changes its position and moves across the page. And all my content is set to auto margin on left and right. How do I make it fix into a position and wont change during resizing or the browser? Similar TutorialsHi everyone, I've been fixing my blog's CSS issues, and managed to figure out everything expect for 1 thing: If you re-size the browser's window or use CTRL+mouse scroll to zoom in/out, you will notice that the nav menu doesn't follow the rest of the layout, but gets positioned on its own somehow. URL : howtohollywoodvideo dot com Here's my CSS for the layout. Header Logo Nav Menu #header { background: url(images/header-bg.jpg) bottom left repeat-x; width: 100%; float: left; } #header-left { /* For the Logo */ width: 490px; float: left; padding: 5px 0 5px 0; #navigation { width: 100%; float: left; color: #fff font-color: #fff; font-size: 18px; font-family: Verdana; } What is the solution for my problem? I tried position: properties, but nothing could make the menu get re-sized the same way as the rest of the layout. Is there anyway to stop someone from changing the text size with their browser? Before everyone starts shouting "NO DON'T DO THIS!", I don't want to do it for everything. I have some buttons that are created with CSS and lose the formating when the text size is changed. I tried adding: Code: font-size:8pt; but that didn't work. Isnt it annoying when you have created a fantastic design with unordered list menus, its looks very fantastic then you open it up on someone elses browser and the design breaks because they have increased/descreased the text size through the browser. One alternative to this is to use text sizes that prevent modifying the text size through browser. However, this doesnt FIX the problem, it only prevents it which means old lady wont be able to read your site. My main problem is the fact that I have background images and when I increase text size, the text increases, but the background images to steatch with the content. Anyway to fix this? Hi, Here's the site I'm working with: http://www.cjfusion.com I want to get that image centered on the browser window and then depending on how big the viewers screen is, the browser will cover up the left and the right. I hope that makes sense. I almost want it to be fluid, but I'm unsure how to do that. Ask questions if this doesnt make sense. Its hard to explain. -CJ Is there any way to scale the size of a background image? I know there probably isn't but I thought I would ask. I would like the background image of a div to be a gradient that scales in proportion to the size of the div. I've thought about doing this using a expression type css rule where I have a backround DIV rather than it being the background of the div but older ie 5.0 doesnt seem to like those. Any thoughts? Let me know if you would like me to explain more.... Yes I know IE has a gradient filter but id rather not use Proprietary code Help I just can't get this thing to size. I've tried all sort of stuff This is so simple I must be missing something obvious. Here is what I want: on the left the rss feed link. to it's right the legend link with a button background behind it. I've gotten stuff like this to work before so I must be missing something. Here is what it does: The RSS feed link is fine, but the problem is the bg graphic is truncating and I want all of it to show. It also cuts it off in the vertical direction. Here is the current code (may change again by the time you look at it though!) Code: <a href="rss/calrecent.rss" ><img src="images/feed-icon-14x14.png" height="14" width="14" alt="rssfeed" border="0" /> Calendar FEED </a>
<span id="lar1" style="background: url(images/leg-button.gif) top left no-repeat; height: 31px; width: 183px; " ><a href="#" onclick="return dynpop('genrelegend',600,700);" style="text-align: center;"> Legend</a> </span>
I tried putting the background on the <a> element and setting its size with a style. and making it a#lar1 but that didn't work. So my latest try would be to size a span element. Here is the style of lar1 span#lar1 { height: 31px; width:183px; } Here it is in situ http://demo.tixrus.us/calendar.php Thanks I know I've made this kind of thing work before so what stupid thing am I missing in my blindness and frustration?? Thanks, and the one who answers will probably be Kravvitz but anybody can take a swing at it. GO SOX! So my code works fine in webkit(Safari/Chrome), and it almost works in Firefox. If you want to try it out for yourself, just make sure you use a large image, like 500x500 pixels or larger so you can see what I mean. In the tutorial I watched they were able to make it work in Firefox, and the video is almost 1yr old, so it should work. Code:
<html>
<head>
<title>Background Size and Images</title>
<style>
body { background: blue;
margin: 0;
padding: 0; }
#container { background: white;
width: 75%;
height: 600px;
padding: 50px;
margin: 1em auto; }
#container div { background: tan;
border: 1px solid;
margin-right: 50px;
float: left; }
#container #one { width: 80%;
height: 100px;
background: url(samplesample.png) no-repeat;
-webkit-background-size: 100%;
-moz-background-size: 100%; }
#container #two { width: 150px;
height: 50px;
background: url(samplesample.png) no-repeat;
-webkit-background-size: 150px 50px;
-moz-background-size: 150px 50px; }
#container #three { width: 100px;
height: 250px;
background: url(samplesample.png) repeat;
-webkit-background-size: 25px 25px;
-moz-background-size: 25px 25px; }
</style>
</head>
<body>
<div id="container">
<div id="one">
</div>
<div id="two">
</div>
<div id="three">
</div>
</div>
</body>
</html>
I'm trying to make up a thumbnail page that shows pics in a row at a constant height. I don't want the images distorted so the width will vary. I tried: Code: img.proj_thumb {border-style:none; height:75px; width:auto}
Ths worked on mylaptop, but fails on the server - see the attached pics. Any suggestions? ok basically this is an accessibility thing, i dont want users (disabled) to read the links first page after page and i have read that i can place the links at the bottom but style them with css so they appear on top. i am trying to do something like this but my page just gets messed up if i move the links to below. page layout: Code: <div> //overall <div>//top> <div>side Links/menu <div>contents <div>footer Hi I want to make a three column page. I will divide this page into three portions later with php. header, footer and mainbody and will use them as includes in a single page. for now I am making the home page. I want the footer area (div) to push downward automatically according to the contents of the main area. But it is not working. I placed <br> to do it manually but it is not the desired way. here is my CSS code Code: /* CSS Document */
div.head {
width: 1000px;
text-align: center;
}
div.container {
width: 1000px;
border: 0px;
position: absolute;
left: 11%;
}
div.lef {
width: 150px;
float:left;
/* border: 1px solid green;*/
}
div.cen {
width: 500px;
float:left;
/* border: 1px solid red; */
text-align: left;
}
div.rig {
width: 150px;
float:left;
/*border: 1px solid black;*/
}
div.bot {
width: 800px;
height: 30px;
font-size: 14px;
font-weight: bold;
text-align: center;
background-color: #996633;
color: white;
position: absolute;
left: 10%;
}
p.bodytxt {
font-size: 12px;
font-family: verdana;
color: black;
line-height: 150%;
margin: 2px 2px 2px 2px;
}
and here is the html code Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="/styling.css" />
</head>
<body>
<div class="head"> <img class="head" src="/images/header.gif">
</div>
<div class="container">
<div class="lef">left column text goes here</div>
<div class="cen">
<p class="bodytxt"> center column text goes hereasdasdasd as das d asd as
das d as das d asdasdas d asd as da sd as da sd sad asdasdas dasdasdasd
as das das d a sdas dasdasdas dasdasdasdasdasdas dasd asdasdasdasdas dasdasdasdsadasdas
dasdasdasdasdasdas d asd as d asd as d asd as d asd as d asd as dasd asdasdasdasdasdasdasd
das das d a sdas dasdasdas dasdasdasdasdasdas dasd asdasdasdasdas dasdasdasdsadasdas
dasdasdasdasdasdas d asd as d asd as d asd as d asd as d asd as dasd asdasdasdasdasdasdasd
</p>
</div>
<div class="rig">right column text goes here</div>
</div>
<br><br><br><br><br><br><br><br><br><br>
<div class="bot">footer</div>
</body>
</html>
thank you Hello, I need a little help... When moving an image over the top of another image it leaves a white space where the image was in the flow. How do I get the trailing content to flow into the space where the image was. Even though the image moves where I want, it still seems to occupy the space where it was? PHP Code: echo "<IMG SRC='http://www.golfleague.us/gifs/splash.gif' width='150' height='90' STYLE='position: relative; top: -133px; left: 380px; margin:0; z-index:1'>"; Thanks for your help. The link below looks perfect in ie8. However the div for #maincontent and the div for #footer do not align correctly in >ie8, FF or Chrome. All edges should be touching with no gray background showing through. As I'm sure you can tell, I started with a Dreamweaver template, could the code or comments the application adds could be causing the problem. ht tp://w ww.wildsheep.org/jhg/footer/new/ Thanks in advance!! -yankinmyhairout I have made a style sheet and an html homepage. I want everything to expand with the browser and I want the <div> tags . 1) How can you center the css style sheet. Like I have the background, then I have <div> tags that display the header, content areas and footer. I want the header content areas and footer centered in the browser and also to expand with the browser if it is made smaller or larger. If you need the code let me know. Hi guys, I've been working on my CSS for a short while now. I'm attempting to get a "layout" for my site that I can work with, and I thought that a table-less layout was the way to go. I had a few problems initially with CSS and posted some code on here, and was lucky enough to get the help of an expert. He pointed out that I needed Doctypes, character sets and so on and helped me get started. I spent a "bit" of time at work doing a bit more to the page and was really pleased with the result - see attachment. I know it is currently quite crude (and the colours are appauling!) but it's practice. I then took my work home and opened it on my computer, and it has fallen apart AGAIN. I cannot believe that it can look so different in the SAME browser on different computers. At home I am using IE 6.0.2900... on WinXP SP2 At work I am using IE 5.50 on Windows 2000 SP4 I am getting so frustrated that everything in CSS seems to involve having little "extra bits" here and there to make work in each browser (or the same browser, different versions!), when the whole idea was to reduce coding and make life easier. I know that I have not posted any code, which could make helping me out difficult....but just by looking at the images below, does it look like I need a simple "hack" (whatever they are!) - ChiefWigs spoke about using an <! IF IE... comment to help out. Or should I look at just reducing everything by a pixel or two to make it fit...and just accept that gaps will be slightly larger on other browsers? It might be worth noting that I am using absolute dimensions (px) for the panels and menu holders...but relative widths (em) for things like the hyperlink boxes... I'm getting really depressed about the whole CSS thing, its already putting me off continuing to learn . If anyone could offer me help I would be very grateful. Regards, Porky Im new to CSS but can some one advise how i spread my image across a who page? At present once i have designed my web page in photoshop and flash i'am struggling to spread the image across my web browser. I seem to be having a gap to my left and right once i centre my image. I have my site centred in the browser window, yet if you resize the window (as if emulating 800 x 600 or smaller) then the scroll bar appears on the right as it should. But the web page has the top section cut off and is not accessible, is this my code? or is this because of the size of the web site? The page can be viewed he http://www.spanishguitar.co.uk If you make your height of your browser window smaller, you will see that the top of the site gets cut off. How can I fix this? My css for this is: Code:
#PageDiv {
position:absolute;
left: 50%;
top: 50%;
width: 770px;
height: 600px;
margin-top: -300px; /* half of the height */
margin-left: -385px; /* half of the width */
border: 1px solid #000;
}
When I preview my page in firefox on my Mac, (via Dreamweaver's Preview function), I can see the main logo image fine. However, when I uploaded the page and image correctly, I only get a blank area. I think this is a css issue, but I can't figure it out. http://alpineec.com/TEST/index.php Any thoughts? CSS Code:
*
{
padding: 0em;
margin: 0em;
}
body
{
background-color:#999999;
padding: 35px 0px 35px 0px;
}
body,input
{
font-size: 10pt;
font-family: "georgia", "times new roman", serif;
color: #333333;
}
p
{
line-height: 1.5em;
margin-bottom: 1.0em;
text-align: justify;
}
a
{
color: #B96D00;
text-decoration: underline;
}
a:hover
{
text-decoration: none;
}
h3 span
{
font-weight: normal;
}
h3,h4
{
display: inline;
font-weight: bold;
background-repeat: no-repeat;
background-position: right;
}
h3
{
font-size: 1.7em;
padding-right: 34px;
background-image: url('images2/db1.gif');
}
h4
{
font-size: 1.2em;
padding-right: 28px;
background-image: url('images2/db2.gif');
}
.contentarea
{
padding-top: 1.3em;
}
img.left
{
position: relative;
float: left;
margin: 0em 1.8em 1.4em 0em;
}
img.right
{
position: relative;
float: right;
margin: 0em 0em 1.8em 1.8em;
}
.post .details
{
position: relative;
top: -1.5em;
font-size: 0.8em;
color: #787878;
}
.post ul.controls
{
clear: both;
}
.post ul.controls li
{
display: inline;
font-size: 0.8em;
}
.post ul.controls li a
{
background-repeat: no-repeat;
background-position: left;
padding: 0em 1.0em 0em 20px;
}
.post ul.controls li a.printerfriendly
{
background-image: url('images2/icon-printerfriendly.gif');
}
.post ul.controls li a.comments
{
background-image: url('images2/icon-comments.gif');
}
.post ul.controls li a.more
{
background-image: url('images2/icon-more.gif');
}
.box
{
position: relative;
background: #FDFCF6 url('images2/boxbg.gif') repeat-x;
left: -1.5em;
top: -1.5em;
padding: 1.5em;
border-bottom: solid 1px #E1D2BD;
margin-bottom: 1.0em;
}
ul.linklist
{
list-style: none;
}
ul.linklist li
{
line-height: 2.0em;
}
#upbg
{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 275px;
background-color:#999999;
z-index: 1;
}
#outer
{
z-index: 2;
position: relative;
/*
The width value below controls the overall width of the design. By default it's set to 82%
(so it'll take up 82% of the browser window's width). You can set it to a different percentage
value (70%, 90%, etc.) or even a pixel value (760px, 800px, etc.) to enforce a fixed width.
*/
width: 700px;
border: solid 1px #fff;
background-color: #fff;
margin: 0 auto;
}
#header
{
position: relative;
width: 100%;
background: #5a5a5a;
}
#headercontent
{
position: absolute;
bottom: -56px;
padding: 0em 2.0em 1.3em 2.0em;
left: 274px;
}
#headercontent h1
{
font-weight: normal;
color: #fff;
font-size: 2.5em;
}
#headercontent h1 sup
{
color: #777;
}
#headercontent h2
{
font-size: 1.0em;
font-weight: normal;
color: #aaa;
}
#menu
{
position: relative;
background: url('images2/menubg.jpg') repeat-x top left;
height: 20px;
padding: 0em 1.0em 0em 1.0em;
}
#menu ul
{
position: absolute;
top: 2px;
}
#menu ul li
{
position: relative;
display: inline;
}
#menu ul li a
{
padding: .5em 1.0em 0.9em 1.0em;
color: black;
text-decoration: none;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
}
#menu ul li a:hover
{
text-decoration: none;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color: #FE3D00;
}
#menu ul li a.active
{
text-decoration: none;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color: #FE3D00;
}
#content
{
padding: 0em 2.0em 0em 2.0em;
}
#primarycontainer
{
float: left;
margin-right: -18.0em;
width: 100%;
}
#primarycontent
{
margin: 1.5em 22.0em 0em 0em;
}
#secondarycontent
{
margin-top: 1.5em;
float: right;
width: 18.0em;
}
#footer
{
position: relative;
height: 2.0em;
clear: both;
padding-top: 5.0em;
background: #fff url('images2/border2.gif') repeat-x 0em 2.5em;
font-size: 0.8em;
}
#footer .left
{
position: absolute;
left: 191px;
bottom: 1.2em;
z-index: 10;
}
#footer .right
{
position: absolute;
right: 2.0em;
bottom: 1.2em;
}
pre {
padding:10px;
border: 1px dotted #eee;
background-color:#f9f9f9;
}
#photodiv {
background-repeat: no-repeat;
}
#aboutBLOCK{padding-left:40px;}
/* PHOTO GALLERY */
#pg {
border:2px dotted #666;
padding:5px;
padding-top:15px;
}
#pg ul {
list-style:none;
left: 10px;
padding:0;
margin:0;
position:relative;
float:left;
}
#pg ul li {
display:inline;
float:left;
margin:0 0 8px 8px;
}
#pg ul li a {
display:block;
width:90px;
height:90px;
text-decoration:none;
border:1px solid #000;
}
#pg ul li a img {
display:block;
width:90px;
height:90px;
border:0;
}
#pg ul li a:hover {
white-space:normal;
border-color:#336600;
background-color:#323E20;
}
#pg ul li a:hover img {
position:absolute;
left: 290px;
top:110px;
width:300px;
height: 300px;
border:1px solid #000;
}
#pg ul li a span {display:none}
#pg ul li a:hover span {
display:block;
position:absolute;
left:9px;
top:110px;
width:270px;
height:auto;
font-size:12px;color: black;
}
Hi there. I would like to show some panoramas. My panos vary in size but all are wider than one screen can show (lets say 1800x200px). Am still working with such small screens 1024px ;-) So horizontal scrolling is necessary (that's ok so far). On top and on bottom of the pano I want to show a border. The borders should be visible from far left to far right end of the pano. The upper border works already (even with fixed background image). See the attachment "css.zip": Code: <style type="text/css">
<!--
body {
background-color: black;
margin: 50px 0;
background-image: url(stribes_01.gif);
background-repeat: repeat-x;
background-attachment: fixed;
}
img {
margin: 10px;
}
-->
</style></head>
<body>
<img src="eyecatcher03.jpg" width="1800" height="200" />
</body>
</html>
So I would like to have the bottom border work, too. It should go from far left to far right of the pano having the same distance from pano than top border does have. I know that it is possible to repeat a background image like this: Code: background-image: url(stribes_02.gif); background-repeat: repeat-x; But the image is only repeated up to the right browser border. There will be a remaining gap from browser border to far right end of pano. Is there a way to realise this? Any idea is highly appreciated. Thanks. tigercat. |
|||||||