|
CSS - Get A Div To Wrap Tight Around And Image But Stay Central
Ok here is the problem I have...
I have 3 DIVS.... DIV 1 is a container the centers the contents DIV 2 I want to wrap tight around an image DIV 3 I want floating over the image say 100px from the top of DIV2 and 80px left. Currently DIV 2 is as wide as it's container (DIV1). and therefore DIV 3 isn't positioned over the correct part of the image. If I made DIV 2's position absolute then DIV 2 wraps the image tightly and correctly, but it now is shown on the far left of DIV 1, and I want it in the center. here is the HTML i have... <div id="div1" align="center"> <div id="div2"> <img alt="fddsffsd" src="image.jpg"/> <div class='div3'></div> </div> and here is my CSS... #div2 {position: relative} .div3 { position:absolute; width: 80px; height: 80px; top: 100px; left:20px; background-image: url(transparent.png); } Similar TutorialsSo I have 5 image rollovers onmouseover() all in a row with the following css and javascript. Currently, the left-most image rollsover just fine, but when I try to rollover the others, the image that comes to replace the rolledover one gets put in the left-most spot instead of right on top of the image that was rolledover. I can't use absolute positioning because the whole webpage is centered according to window size. Help is greatly appreciated. Here's the link: create.byu.edu/newsite CSS: Code: div.info
{ float:left;
display:inline;
margin-left:0px;
margin-top:35px;
}
div.team
{ float:left;
display:inline;
margin-left:0px;
margin-top:35px;
}
div.work
{ float:left;
display:inline;
margin-left:0px;
margin-top:35px;
}
div.sites
{ float:left;
display:inline;
margin-left:0px;
margin-top:35px;
}
div.news
{ float:left;
display:inline;
margin-left:0px;
margin-top:35px;
}
javascript: Code: var image1 = new Image();
image1.src = "images/info.jpg";
var image2 = new Image();
image2.src = "images/infoblue.jpg";
var image3 = new Image();
image3.src = "images/team.jpg";
var image4 = new Image();
image4.src = "images/teamblue.jpg";
var image5 = new Image();
image5.src = "images/work.jpg";
var image6 = new Image();
image6.src = "images/workblue.jpg";
var image7 = new Image();
image7.src = "images/sites.jpg";
var image8 = new Image();
image8.src = "images/sitesblue.jpg";
var image9 = new Image();
image9.src = "images/news.jpg";
var image0 = new Image();
image0.src = "images/newsblue.jpg";
function roll(img_name, img_src) {
document[img_name].src = img_src;
}
HTML: Code: <div class="info">
<a href="info.php" onmouseover="roll('info', 'images/infoblue.jpg')" onmouseout="roll('info', 'images/info.jpg')">
<img src="images/info.jpg" border="0" alt="infogray" name="info">
</a>
</div><!--info-->
<div class="team">
<a href="team.php" onmouseover="roll('info', 'images/teamblue.jpg')" onmouseout="roll('info', 'images/team.jpg')">
<img src="images/team.jpg" border="0" alt="teamgray" name="team">
</a>
</div><!--team-->
<div class="work">
<a href="work.php" onmouseover="roll('info', 'images/workblue.jpg')" onmouseout="roll('info', 'images/work.jpg')">
<img src="images/work.jpg" border="0" alt="workgray" name="work">
</a>
</div><!--work-->
<div class="sites">
<a href="sites.php" onmouseover="roll('info', 'images/sitesblue.jpg')" onmouseout="roll('info', 'images/sites.jpg')">
<img src="images/sites.jpg" border="0" alt="sitesgray" name="sites">
</a>
</div><!--sites-->
<div class="news">
<a href="news.php" onmouseover="roll('info', 'images/newsblue.jpg')" onmouseout="roll('info', 'images/news.jpg')">
<img src="images/news.jpg" border="0" alt="newsgray" name="news">
</a>
</div><!--news-->
On my website, the left nav. bar is made using a list. The list has a border round top, bottom, right & left, and has a blue hover colour. The list however, does not display tight up against each other, and takes a line between each list item. I'd like it to be right above and below one another rather than a gap in between. You can view the list on the site, HERE. The CSS for the nav. bar is: Code: /*-----LEFT MENU-----*/
#leftcontent {
width: 120px;
}
#leftcontent ul {
margin-left: 8px;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}
#leftcontent a {
padding: 0px;
padding-left: 2px;
padding-top: 1px;
padding-bottom: 1px;
background-color: #fff;
border: 1px solid #ccc;
text-decoration: none;
display:block;
}
#leftcontent img {
display:inline;
padding:0;
border:0;
margin:0;
}
#leftcontent a:link, #navlist {
color: #000;
text-decoration: none;
}
#leftcontent a:visited {
color: #000;
}
#leftcontent a {
color: #000000;
}
#leftcontent a:hover {
background-color: #369;
display:block;
color: #fff;
}
#leftcontent img a:hover{
display:inline;
padding:0;
border:0;
margin:0;
}
/*----END LEFT MENU----*/
Note: The img hover, bg colour etc. is so it does not use the same properties as when I open the page up in my content management system it uses small icons, which would use the list properties if I did not define it as an image. Please just ignore it. Cheers. I'm having problems with keeping the border of an div tight in against the div's content. At the following URL http://alphaworks.co.uk/problems/box/ I want the next and prev divs to be a little larger than the text inside them and then the outer prev_next div should be a little bigger than the two divs inside it but not stretching to the width of the page as it does now. Can someone show me the error of my ways? Thanks, Geoff i am trying to use CSS to position an embeded .swf rotating cube so that it is always at the bottom of a webpage and is unaffected by scrolling. i've managed to make it start out at the bottom but it always scrolls up with the scroll bar. i realize ie6 has trouble with fixed postioning, so i was wondering if anyone had any ideas on how to get around it without using javascript? here's my page: http://www.myspace.com/marx0i0 and here are some examples of what im trying to do: http://bonrouge.com/test/fixed.htm http://www.howtocreate.co.uk/fixedPosition.html finally, here is my code: <embed allowScriptAccess="never" allowNetworking="internal" SRC="http://www.geocities.com/marx0i0/untitled.swf" HEIGHT=200 WIDTH=200 STYLE= "position: absolute; center:0px; bottom: 0px; overflow: auto;" WMODE= "transparent"> thanks very much for any help! i was able to have the image button links hover and change colors using 2 different image buttons, however i came to realize that i want to have the hovered image stay active once the button is clicked. can someone assist me with this? this is what my code looks like: Code:
a:hover#index {
background: url("./images/home-red.png") 0 0 no-repeat;
}
a:hover#howto {
background: url("./images/howtobuild-red.png") 0 0 no-repeat;
}
a:hover#installation {
background: url("./images/installation-red.png") 0 0 no-repeat;
}
a:hover#design {
background: url("./images/dande-red.png") 0 0 no-repeat;
}
a:hover#dean {
background: url("./images/deansblog-red.png") 0 0 no-repeat;
}
a:hover#forum {
background: url("./images/userforum-red.png") 0 0 no-repeat;
}
a:hover#plan {
background: url("./images/planbike-red.png") 0 0 no-repeat;
}
a:hover#search {
background: url("./images/search-red.png") 0 0 no-repeat;
}
a#index, a#design, a#howto, a#installation, a#dean, a#forum, a#plan, a#search {
width: 86px;
height: 27px;
float: left;
margin-top:6px;
position:relative;
left: 115px;
}
a#index {
background: url("./images/home-grey.png");
}
a#design {
background: url("./images/dande-grey.png");
}
a#howto {
background: url("./images/howtobuild-grey.png");
}
a#installation {
background: url("./images/installation-grey.png");
}
a#dean {
background: url("./images/deansblog-grey.png");
}
a#forum {
background: url("./images/userforum-grey.png");
}
a#plan {
background: url("./images/planbike-grey.png");
}
a#search {
background: url("./images/search-grey.png");
}
Is there a way to have texts wrap an image? For example, I want to have a small image 120x146 jpeg image aling top left on the page. I then want the texts to start from the top next to the image on the right side of the image just like in MS Word. Is this possible? ljCharlie Greetings, How do you make a paragraph wrap around an image that is floated to the right or left? And what I mean here is not placing the image in a specific place in the middle of the paragraph code and then floating it, but wrapping text that comes from a tag like <p>$paragraphContent$</p> around an image that is floated left or right. Like basically, you don't know what exactly the text of the paragraph is, but whatever the text will be like, you want it wrapped around the image, and the image to be nicely placed in the middle of that paragraph. And can you do this with a number of paragraphs inserted in a <div> tag for instance? I mean just one image for all those paragraphs, to be placed neatly in the middle? Thanks for anyone taking the time to help and give tips. Thanks for taking the time to read my quesiton. I have an image, that if I use float: I can get the text to wrap around the image, but if I try to position the image and get the text to wrap, it doesn't. The text just shows up underneath the image. Instead of using float, I've tried display: block; but that didn't help. What do I need to change so that I can get the text to wrap around the image? Thanks, Brad Image is in textbox1 CSS: Code: .textbox1 {
height: 180px;
width: 280px;
font-size: 20px;
padding: 3px;
position: absolute;
top: 55px;
left: 15%;
border-style: solid;
border-color: red;
border-width: 2px;
/*display: block;
float: left;*/
}
CSS: Code:
.news {
background-color:#eaeaea;
border: solid 1px #999;
width: 500px;
margin-top: 10px;
}
.news img {
float: left;
padding: 10px 0 10px 10px;
}
.news p {
float: right;
width: 350px;
margin: 0;
padding: 10px 10px 10px 0;
}
HTML: Code: <div class="news"> <img src="http://album-images.lala.com/servlet/ArtWorkServlet/432627039265781052/l" width="120" height="180" /> <p>One of the most impressive flights ever has to be landing at Male airport in the Maldives. As the plane descends, stretching before you is a sea of azure blue reefs and atolls. The engines ease off and the plane gently floats down, almost skimming the water before finally touching down. Male airport sits on it's own private Atoll so transfers to your hotel are either by speedboat or, if you're lucky, by sea plane. Beats descending into Heathrow airport and then fighting your way to the train or bus station any day.</p> </div> Logically, a grey box should wrap around it. Can anyone explain to a CSS newbie why this doesn't work? I've been trying to centrally position my site pages in IE6 but despite using what seems to be the correct and accepted code (though perhaps not as the case may be), in IE6 the site pages keep aligning left. In IE7/8, FF etc. the alignment is centered and fine. The CSS I'm using is: /* global to standardise padding etc. */ * { padding:0; margin:0; border:0; line-height:0; } body { margin: 0; padding: 0; text-align: center; background: #ffffff; font-family:Arial, Helvetica, sans-serif; overflow:auto; height:100%; } #container { width: 1002px; background: #ffffff; margin: 0 auto; text-align: left; height:auto; } This CSS works fine (in IE6) on another site, i.e centers ok. Some articles talk about IE6 being funny with XHTML doctypes, so I swapped it for an HTML Transitional doctype- but that wouldn't work either. Any ideas as to how I can make the site centered properly in IE6? As far as I can tell the above code should work- but doesn't... I'm new to css and have been impressed with the way you can make style changes to a whole site by just altering one stylesheet (if you've set if up right). My question is, can css or xhtml be used to do that with content? I want to create a site with a Nav column floated on the left hand side of every page, but I'm worried I'd have to change hundreds of pages if i ever added/altered the column. Is there any way I can get every page to pull a table/other-xhmtl from one source, maybe by putting something in the stylesheet? Thanks. Hi all, I made a recent post having trouble with a three column layout. Its not really had much attention however it wasn't really clear what i was asking. I wanted the two outside columns which only contained background images to be hiden in the background from the viewpoint. You can see my original post here, it includes two diagrams: http://forums.devshed.com/css-help-...ion-584924.html Now I have edited the layout to a single column and used the images on the sides as borders. I am still having the same problem so I am now wandering if I can force the browser to centre on the main column... This would leave overhang on ether side but its only images to make the site look better. Currently the site will look good using a wide resolution but on standard 1024x768 i want the centre of the column to be in the middle of the browser window on load. Can I do it with css? javascript or ajax? If in javascript or ajax could you please like me a tutorial or something as i have no ability in those categories! Any help is great. Cheers. Hi all. I'm experiencing a strange error. I have a central content div acting as a wrapper for content to sit central to the page. The start of my CSS file is as follows: Code:
*
{
padding: 0;
margin: 0;
}
html
{
height: 100%;
margin: 0 0 1px 0;
}
body
{
height: 100%;
text-align: center;
}
#wrapper
{
position: relative;
min-height: 100%;
height: auto !important;
height: 100%;
width: 750px;
margin: 0 auto;
text-align: left;
padding: 200px 0 50px 0 !important;
padding: 200px 0 0 0;
}
Now, whenever I click to the right of this central wrapper div in Firefox, the whole of the content is selected. Anybody know why this is or how I can stop it? Hello, I have two columns, one is on the left and another in the middle (center). Left column is where I want it to be, central column is also aligned properly, however, it is below left column. I want it to be on the same level as left. See here see how it got below ? It is XHTML validated and CSS is fine too (some background color warnings). Plz help me to make central column go up. Thanks. hi folks, i am redesigning my homepage and i have one little problem in IE. The footer i have will not stay down at the bottom of the screen in IE. Firefox works just fine like usual. Here is the original site Here is the new design I changed the design, so that it is easier to read and scroll - some people reviewed my page and i think that makes sence. if someone could help me with that problem, that would be great .... i think IE puts the footer right underneath the navigationbox to the left, thats why it is up there .... i tried to set the position of the footer 'fixed', but it didn't look right in FF nor IE (when scrolling it somehw moved with the overall picture) the footer in the CSS is called #verify ..... Thank you Basically on this page here -> http://www.prxa.info/area51/profile.php?info=1 The copyright molds into the right column and i wish it to stay below both the left and right, how would i go about doing that? Hi. I have two DIVs. One below another. When the top one expands, i want it to push down the bottom one. When the bottom one expands, i want it to be just below the top one (open or closed) and always expand to the bottom of the containing DIV. Problem is that when i expand the bottom one, it goes to the end of the body tag, not the bottom of the containing DIV. Help? Thanks. Code:
<div style="width: 14em; border: solid 1px green; height:515px;">
<div id="nav_round" style="width: inherit;">
<div id="nav_ctl" style="width: 13em; background-color: #C3D9FF; padding:5px;">
<span style="float: left;">
<img id="nav_arrows" src="http://www.trezoro.com/icons/btn_down.gif" onclick="expCollapse('nav_wrapper', 'nav_arrows');"
style="padding-left: 5px; cursor: pointer;" /></span><center>
<span><b>Quick Calendar</b></span></center>
</div>
<div id="nav_wrapper" style="width: 13em; background-color: #C3D9FF; padding:5px 5px 5px 11px;">
</div>
</div>
<div style="border: solid 1px red; width: auto;
margin-top: 10px; margin-right: 15px;" id="video_round">
<div id="video_ctl" style="width: inherit; background-color: #C3D9FF;">
<span style="float: left;">
<img id="video_arrows" src="http://www.trezoro.com/icons/btn_down.gif" onclick="expCollapse('video_wrapper', 'video_arrows');" style="padding-left: 5px; cursor: pointer;" />
</span>
<center>
<span><b>Videos</b></span></center>
</div>
<div id="video_wrapper" style="width: inherit; height:100%; padding: 0px 3px 3px 3px; background-color: #C3D9FF;">
<div style="background-color: White; width: 100%; overflow-y:scroll; overflow-x:hidden;">
<div style="width: 100%; padding: 5px;">
<div id="reel1">
<img src="../images/default.jpg" style="cursor: pointer; border: solid 1px brown;" /></div>
<div style="padding-left: 10px; vertical-align: top;">
<span style="float: left; width: 100%;">test</span> <span style="float: left; width: 100%;">
test</span> <span style="float: left; width: 100%;">test</span> <span style="float: left;
width: 100%;">test</span> <span style="float: left; width: 100%;">test</span>
<span style="float: left; width: 100%;">test</span>
</div>
<script type="text/javascript" language="javascript">
new Draggable('reel1',{clone:true, revert:true});
Droppables.add('day_grid', {
accept: 'products',
onDrop: function(element)
{ $('shopping_cart_text').innerHTML =
'Dropped the 'element.alt + ' on me.'; }});
</script>
</div>
<div id="hrule" style="margin-left: 10px; margin-right: 10px; border-bottom: solid 1px #eaeaea;">
</div>
<div style="width: 100%; padding: 5px;">
<span>
<img src="../images/default.jpg" style="border: solid 1px brown;" /></span><span
style="padding-left: 10px; vertical-align: top;">test</span>
</div>
<div id="Div1" style="margin-left: 10px; margin-right: 10px; border-bottom: solid 1px #eaeaea;">
</div>
<div style="width: 100%; padding: 5px;">
<span>
<img src="../images/default.jpg" style="border: solid 1px brown;" /></span><span
style="padding-left: 10px; vertical-align: top;">test</span>
</div>
<div id="Div2" style="margin-left: 10px; margin-right: 10px; border-bottom: solid 1px #eaeaea;">
</div>
<div style="width: 100%; padding: 5px;">
<span>
<img src="../images/default.jpg" style="border: solid 1px brown;" /></span><span
style="padding-left: 10px; vertical-align: top;">test</span>
</div>
<div id="Div3" style="margin-left: 10px; margin-right: 10px; border-bottom: solid 1px #eaeaea;">
</div>
<div style="width: 100%; padding: 5px;">
<span>
<img src="../images/default.jpg" style="border: solid 1px #eaeaea;" /></span><span style="padding-left: 10px;
vertical-align: top;">test</span>
</div>
<div id="Div4" style="margin-left: 10px; margin-right: 10px; border-bottom: solid 1px #eaeaea;">
</div>
<div style="width: 100%; padding: 5px;">
<span>
<img src="../images/default.jpg" style="border: solid 1px gray;" /></span><span style="padding-left: 10px;
vertical-align: top;">test</span>
</div>
<div id="Div5" style="margin-left: 10px; margin-right: 10px; border-bottom: solid 1px #eaeaea;">
</div>
<div style="width: 100%; padding: 5px;">
<span>
<img src="../images/default.jpg" style="border: solid 1px gray;" /></span><span style="padding-left: 10px;
vertical-align: top;">test</span>
</div>
<div id="Div6" style="margin-left: 10px; margin-right: 10px; border-bottom: solid 1px #eaeaea;">
</div>
<div style="width: 100%; padding: 5px;">
<span>
<img src="../images/default.jpg" style="border: solid 1px gray;" /></span><span style="padding-left: 10px;
vertical-align: top;">test</span>
</div>
<div id="Div7" style="margin-left: 10px; margin-right: 10px; border-bottom: solid 1px #eaeaea;">
</div>
<div style="width: 100%; padding: 5px;">
<span>
<img src="../images/default.jpg" style="border: solid 1px gray;" /></span><span style="padding-left: 10px;
vertical-align: top;">test</span>
</div>
<div id="Div8" style="margin-left: 10px; margin-right: 10px; border-bottom: solid 1px #eaeaea;">
</div>
<div style="width: 100%; padding: 5px;">
<span>
<img src="../images/default.jpg" style="border: solid 1px gray;" /></span><span style="padding-left: 10px;
vertical-align: top;">test</span>
</div>
<div style="width: 100%; padding: 5px;">
<span>
<img src="../images/default.jpg" style="border: solid 1px gray;" /></span><span style="padding-left: 10px;
vertical-align: top;">test</span>
</div>
<div id="Div9" style="margin-left: 10px; margin-right: 10px; border-bottom: solid 1px #eaeaea;">
</div>
</div>
</div>
</div>
</div>
I've been trying to implement a footer on the site I'm working on, and I want it to stay at the bottom of the page. If there's content that pushes down, I want the footer at the bottom of the content. I've been trying to implement the method described by these two sites: http://www.sitepoint.com/forums/showpost.php?p=1239966&postcount=3 http://www.themaninblue.com/writing/perspective/2005/08/29/ but I'm having a hard time with the longer content page. Here's two examples on the site I'm working on that I have up and nearly ready. Short page: http://windrivers-gsp.com/WRK/index.php Long page: http://windrivers-gsp.com/WRK/hclub.php or http://windrivers-gsp.com/WRK/dams.php As you can see, the footer won't go to the bottom of the longer content on the long page, and I can't figure out why. I believe I've cleared everything, even implementing the PIE/Aslett clearfix on the container div. I think I'm just to the point where I need some more experienced eyes to take a glance and point out where I must have missed something. Any help is greatly appreciated! Oh, BTW, here's the addy for my CSS: http://windrivers-gsp.com/WRK/wrkCSS.css And yes, I know there's a nasty hack in place currently for the navigation menu. I'm working on that after I get the footer problem fixed. Like when I make a field.. <fieldset> <fieldset> How can I then make something like, when typing in <text> it'll stay in a locked field. And when clicking "Save" it will send the text to my email? Please help. Would be really cool with a code below. |
|||||||