Jump to content


  • Posts

  • Joined

  • Last visited

Previous Fields

  • Languages
    HTML, CSS, Flash

Contact Methods

  • Website URL
  • ICQ

Profile Information

  • Gender
  • Location
    Austin, TX, USA
  • Interests
    writing, animation, science fiction

Abby's Achievements


Newbie (1/7)



  1. Abby

    floating problem redux

    dsonesuk: Thanks again! That's very helpful, and it worked.I have a related problem page, now. Here it is. There's a blurb with position:absolute, contained inside a position:relative div. It's not working the same way, and maybe that's because it's a div (with a list inside it) instead of part of a list. When the browser window gets narrow, the blurb steps down and messes up the presentation of the thumbnail gallery. Is there any way to prevent it from stepping down? Here's the HTML: <div class="relative"><div class="blurbbgs"> Additional Information: <br><br> <ul class="donut"> <li>Two of these backgrounds were created for my novels, <a href="http://abbygoldsmith.com/writing/teaser_synopsis_Yer.shtml"><em>City of Slaves</em></a> and <a href="http://abbygoldsmith.com/writing/blurb_Illusionist.html"><em>The Illusionist</em></a>. <li>The film background layouts were created for my <a href="studentfilms.html">student films</a>. <li>The pixel-pushed <em>CalArts</em> was done at <a href="http://filmvideo.calarts.edu/">CalArts</a>. </ul></div></div> And the relevant CSS: .relative {position:relative; padding:0; margin:0;}.blurbbgs { width:400px; min-height:106px; font-size:92%; font-weight:normal; line-height:110%; background-color:#000; clear:both; position:absolute; bottom:320px; right:10px; padding:4px; border:3px groove #cfc; margin:0; overflow:auto; } Also, I appreciate anyone pointing out errors in my code, or places where it could be tighter. Thanks. As far as closing </li> tags ... my doc type is HTML, so the validator gives me error messages if I close those tags.
  2. Here's my problem page. When the browser is sized down, the captions (floated to the right) force each image down. I don't want this to happen. I would rather have the caption float over the image than force the image down.Please ... I beg ... will someone explain exactly how I might accomplish this? I think I have some kind of learning disability where floats are concerned. Here's my HTML:<div class="gallerycontainer"> <ul class="skecial"> <li> <p class="caption">Modeled for <a href="" title="Shrek: Ogres and Dronkeys">Shrek: Ogres and Dronkeys</a> for Nintendo DS, 2007.</p> <img src="images/Pig_Shrek.jpg" width="920px" height="655px" alt="low poly pig character"> <li> <p class="caption">Modeled for a forthcoming film project from <a href="">Spiderwood Studios</a>, 2009.</p> <img src="images/NeonSign3a.jpg" width="640px" height="480px" alt="high poly neon sign"> <li> <p class="caption">Modeled for a PSP game demo from <a href="">WayForward Technologies</a>, 2005.</p> <img src="images/Tank.jpg" width="1000px" height="565px" alt="low poly tank and collectible objects"> <li> <p class="caption">Personal learning assignment using 3D Studio Max.</p> <img src="images/Shuttle.jpg" width="800px" height="472px" alt="low poly shuttle"> <li> <p class="caption">Personal project using 3D Studio Max.</p> <img src="images/GothicSquare.jpg" width="640px" height="480px" alt="low poly Gothic square"> <li> <p class="caption">Personal project using 3D Studio Max.</p> <img src="images/Umdalkdan3D.jpg" width="326px" height="466px" alt="3D character model"> </ul></div> And the CSS: .gallerycontainer { /* image gallery */ background:transparent url('../images/bg/cyanfade.png') repeat-x bottom left; min-width:200px; max-width:100%; height:100%; margin-left:148px;}ul.skecial {list-style:none;}ul.skecial li {clear:both;}.caption { width:180px; float:right; position:relative; top:10px; right:180px; padding:6px; border:3px outset #700; background-color:#000; margin:0; overflow:hidden;}
  3. Abby

    Safari and Opera

    Would Safari for Windows accurately reflect what a Mac user experiences?Thanks for the advice so far.
  4. Most of the pages on my new website have a fixed footer. The HTML for it looks like this: #fixedfoot {width:90%;height:auto;color:#565;text-align:center;line-height:96%;font-size:60%;clear:both;position:fixed;bottom:0;left:0;z-index:2;margin:0 0 0 142px;padding:0;} This is fine in FF and IE8, but when I view my website on an iPad, the footer sticks in one place when I rotate the iPad or scroll around. Can anyone tell me how to get around this problem?
  5. Abby

    <a> font

    LOL! That says a lot about my ex-boyfriend ...
  6. Abby

    floating problem again

    Here's the page. (Warning: Nude drawings, may not be safe for work).I added display:inline-block, and I altered the min-width to 560px. That solves the problem for FF and IE8, but it still displays wrong in IE7. What's wrong with using a <span>? I don't know much about how CSS and HTML really work.Thanks for your help!
  7. I have a simple container with text-align:left, and other text floated on the right (with a large right margin). The right-floated text should be on the same line as the left text. It should *never* wrap to the next line. Assiging a "float:right" to this special text works fine in FF and IE8. However, it wraps to the next line when the browser window gets minimized a lot. And worse ... it wraps immediately in lower versions of IE. How do I work around this problem? I've included the relevant code, below.HTML: .blurb { min-width:200px; max-width:85%; color:#000; text-align:left; line-height:94%; font-weight:bold; background-color:#bec; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; padding:5px; margin:0 16px 6px 150px;}.blurb span {float:right; margin-right:12%;} Oh, and one more question. It looks like border-radius is not valid CSS, although it works fine in the browser tests. Is border-radius a CSS2 vs CSS3 property issue?Thanks.
  8. I have FireFox and IE8, but I don't want to install a whole ton of browsers just to test my one website-in-progress.I've been using this IE net renderer site to test it in other versions of IE. But I can't find anything similar for Safari and Opera. How do the more experienced web developers address this problem?Thanks.
  9. Abby

    Set a text?

    Can you be more specific? What section, and what's the problem?
  10. I'm afraid I don't understand. Changing these sizes doesn't limit the images to three per row. How would I do that? When I constrain the .highslide img to a specific height, some of the thumbnails become blurry, since the image files are varying heights. But at least giving them a uniform height makes them fall into line instead of wrapping in crazy rows. I guess I can go through the actual images and re-save them to all have the same height. Thanks!EDIT: I found a quicker work-around, and I just hope it works in all browsers. I set a max-height for the img, and set a ul li height that comfortably fits four rows next to the large image..highslide img { border: 2px solid silver; max-height:146px;}.highslide-gallery ul li { width: 106px; height: 150px; border: 1px solid #00cc66; background: #bbeecc; margin: 2px;}
  11. Neither suggestion is ideal. What elements are non floated? The thumbnail gallery li are all floated left (and floating them right or widening the margin doesn't help).I took out the clear:both divs in the thumbnail gallery, and you can see the result on my updated page here. In my browser, the thumbnails wrap strangely. I would like to limit them to four thumbnails per row, to prevent the poor layout when it wraps to the next line. That's why I placed the clear:both divs between every four thumbnails. A simple <br> doesn't work. Since clear:both divs doesn't work either ... is there any way to do this?Also, I wonder if the thumbnails would wrap better if they were all 100x100 instead of varying heights. Is there a way to make them all 100px x 100px in the code, or would I have to process them all through Photoshop?
  12. I'll just add a link to this page of my website. It's pure CSS and HTML, and view source might help you out. I use a background image fitted to the whole browser window, and there is also a container with some opacity on it.
  13. After all this time, I still have trouble with floats.In my life drawing gallery (warning: nude drawings, may not be work safe), I'd like to display one large image next to an image gallery of thumbnails. I've floated the large image, but no matter what I do, the thumbnails wrap below it, since they are also floated. This creates an ugly design.I want the thumbnails to stay close together. It stands to reason that either the large image or the thumbnail gallery needs to be inside its own container, but nothing I do seems to work. How can I solve this problem? Here's the relevant CSS: .gallerycontainer { background:transparent url('../images/bg/cyanfade.png') repeat-x bottom left; height:640px; margin-left:150px; margin-right:8px;}img.nude {width:630px; height:635px; float:left; clear:both;}.highslide-gallery .highslide-active-anchor img { border-color: black; visibility: visible; cursor: default;}.highslide-gallery ul { list-style-type: none; margin: 0; padding: 0;}.highslide-gallery ul li { display: block; position: relative; float: left; width: 106px; height: 106px; border: 1px solid silver; background: #ededed; margin: 2px; line-height: 0; overflow: hidden;}.highslide-gallery ul a { position: absolute; top: 50%; left: 50%;}.highslide-gallery ul img { position: relative; top: -50%; left: -50%;}html>/**/body .highslide-gallery ul li { display: table; text-align: center;}html>/**/body .highslide-gallery ul li { text-align: center;}html>/**/body .highslide-gallery ul a { position: static; display: table-cell; vertical-align: middle;}html>/**/body .highslide-gallery ul img { position: static;}.highslide-gallery ul li { width: 106px; height: 106px; border: 1px solid #00cc66; background: #bbeecc; margin: 2px;} And the HTML: <div class="highslide-gallery gallerycontainer"><img class="nude" src="images/life_drawing_006.jpg" alt="large image" title="large image"> <ul> <li> <a href="images/life_drawing_001.jpg" class="highslide" onclick="return hs.expand(this, config1 )"> <img src="thumbs/life_drawing_001.jpg" alt="Life drawing 1" title="Life drawing 1"> </a> <li> <a href="images/life_drawing_002.jpg" class="highslide" onclick="return hs.expand(this, config1 )"> <img src="thumbs/life_drawing_002.jpg" alt="Life drawing 2" title="Life drawing 2"> </a> <li> <a href="images/life_drawing_003.jpg" class="highslide" onclick="return hs.expand(this, config1 )"> <img src="thumbs/life_drawing_003.jpg" alt="Life drawing 3" title="Life drawing 3"> </a> <li> <a href="images/life_drawing_004.jpg" class="highslide" onclick="return hs.expand(this, config1 )"> <img src="thumbs/life_drawing_004.jpg" alt="Life drawing 4" title="Life drawing 4"> </a></ul><div style="clear:both"></div><ul> <li> <a href="images/life_drawing_005.jpg" class="highslide" onclick="return hs.expand(this, config1 )"> <img src="thumbs/life_drawing_005.jpg" alt="Life drawing 5" title="Life drawing 5"> </a> <li> <a href="images/life_drawing_007.jpg" class="highslide" onclick="return hs.expand(this, config1 )"> <img src="thumbs/life_drawing_007.jpg" alt="Life drawing 7" title="Life drawing 7"> </a> <li> <a href="images/life_drawing_008.jpg" class="highslide" onclick="return hs.expand(this, config1 )"> <img src="thumbs/life_drawing_008.jpg" alt="Life drawing 8" title="Life drawing 8"> </a> <li> <a href="images/life_drawing_009.jpg" class="highslide" onclick="return hs.expand(this, config1 )"> <img src="thumbs/life_drawing_009.jpg" alt="Life drawing 9" title="Life drawing 9"> </a></ul><div style="clear:both"></div><ul> <li> <a href="images/life_drawing_010.jpg" class="highslide" onclick="return hs.expand(this, config1 )"> <img src="thumbs/life_drawing_010.jpg" alt="Life drawing 10" title="Life drawing 10"> </a> <li> <a href="images/life_drawing_011.jpg" class="highslide" onclick="return hs.expand(this, config1 )"> <img src="thumbs/life_drawing_011.jpg" alt="Life drawing 11" title="Life drawing 11"> </a> <li> <a href="images/life_drawing_012.jpg" class="highslide" onclick="return hs.expand(this, config1 )"> <img src="thumbs/life_drawing_012.jpg" alt="Life drawing 12" title="Life drawing 12"> </a> <li> <a href="images/life_drawing_013.jpg" class="highslide" onclick="return hs.expand(this, config1 )"> <img src="thumbs/life_drawing_013.jpg" alt="Life drawing 13" title="Life drawing 13"> </a></ul> <div style="clear:both"></div></div> Thanks for any advice.
  14. Thanks so much! That highslide editor is awesome. I really appreciate it.
  15. Here are a few good articles on liquid layout columns using CSS and HTML:http://matthewjamestaylor.com/blog/perfect...n-left-menu.htmhttp://www.maxdesign.com.au/articles/css-layouts/two-liquid/http://inobscuro.com/tutorials/common-layout-codes-29/Without digging through all that code, it helps to set padding and margins to 0 to get rid of extra white space.
  • Create New...