...

View Full Version : How to move an image outside the boundries of the parent div tag



kwdamp
06-30-2011, 10:12 PM
I've been working hard to brush up on my CSS coding and have made a lot of progress getting rid of the tables in my layouts. However, I'm stuck on something.

I'm trying to move a graphic left 30 px so that it leads into the text block like a bullet (but without causing only the first like to be indented).

I'm trying to do it by creating a second div class for the object and using the code:

.list-button{
position:relative;
left:-30;
}

However, I can't get it to work. Is this the correct way to solve this problem? And if so, what am I doing wrong?

The full page is here: http://www.infolists.com/testnew.htm

Sammy12
06-30-2011, 11:16 PM
-50px;

you should try and set the img as a background though.

ul {
background: url('bullet.png') no-repeat 5px left;
padding-left: (width of the img);
}

if you used an unordered list. I think it would be ideal here.

Rowsdower!
06-30-2011, 11:21 PM
If you use a <ul> element (with <li> elements for each item in the list) then you can apply the list-style-image (http://www.w3schools.com/css/pr_list-style-image.asp) style to do this for you just like a normal bulleted list.

Nice work so far on updating to tableless layout! Your markup right now uses div elements, but unfortunately is still completely devoid of paragraphs, lists, spans, dt/dd pairs, and such things where they ought to logically appear. Instead you're using a lot of <br /> tags to cut off lines and space things out. You'll need to get used to using "semantic" markup and then adding padding/margins to elements to get the spacing you want.

Plus you will still need to validate your page:
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.infolists.com%2Ftestnew.htm&charset=%28detect+automatically%29&doctype=Inline&group=0&ss=1&verbose=1

Let me know if you get stuck with implementing the <ul> transition.


And P.S. Negative margins are a bad idea 99% of the time. My advice is to avoid them unless you're trying to completely hide something from sight.

kwdamp
07-01-2011, 04:09 AM
Sammy12 -- Wow, can't believe i left that off and didn't catch it. Guess that's what I get for working 10 hours straight.

Rowsdower -- Thanks for the continued advice. I guess I should have clarified that the text in the box was all just copied and pasted from the old page. Other than my single attempt to move that graphic.

I will try the list strategy for the layout though.

One other question I had: Is it ok that I'm defining the width of those div boxes as a %? It seems to work fine until I start messing with the padding. Then it does some funky things and makes life more difficult.

But because all of this information will be database generated and constructed on the fly (the actual pages are php, I'm just trying to rework the layout in a basic html page before I re-implement it), I have to have a template that can handle all possible things that might get thrown at it.

shankar.adodis
07-01-2011, 09:15 AM
Hello ,
You cant use a margin inside table .

instead you can use a div inside the table and provide margin to move that div

this would be ok to move the graphics inside table.

Sammy12
07-02-2011, 11:23 PM
One other question I had: Is it ok that I'm defining the width of those div boxes as a %? It seems to work fine until I start messing with the padding. Then it does some funky things and makes life more difficult.

But because all of this information will be database generated and constructed on the fly (the actual pages are php, I'm just trying to rework the layout in a basic html page before I re-implement it), I have to have a template that can handle all possible things that might get thrown at it.

If your are looking to set the page as % (ie: left column { 40%; float: left } right column { 60%; float: left; }, then you are using a liquid layout http://www.maxdesign.com.au/articles/liquid/, which is advised for a little more advanced scripters. For beginning scripters, a fixed 960px; margin: auto; is advised.

For boxes WITHIN the columns:
Inless you are looking to reuse this "class" in different sizes (ie: comment box, thumbnails for videos) I would stick with px since % will become difficult if you want to use borders. You will find that you have to use a wrapper div to make a border.

Here is an applicable % use for a comment:



ul#profile.comment {
width: 240px;
}

ul.comment li {
height: 80px;
}

ul.comment .img {
float: left;
width: 20%;
}

ul.comment .text {
float: left;
width: 80%;
}

ul.comment .img img {
width: 90%;
height: 90%;
padding: 2%;
}






<ul id="profile" class="comment">
<li>
<div class="img">
<img src="images.jpg"/>
</div>
<div class="text">
</div>
</li>
<li></li>
<li></li>
</ul>


inless you are planning to reuse the "comment" in multiple sizes, I would not recommend using % for widths and heights. If you noticed, if you wanted to use a larger comment than the "profile" page, you could adjust the height and width of just the ul and li, and the image and text would sustain their same aspect ratios.

btw: suprised that you got that URL before a cybersquatter



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum