Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by Abby

  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.
  16. I'm creating a rollover image gallery using purely CSS and HTML. Here's the page in progress.Is there a way to set a max-height for the images that are taller than the browser window or staging area? Or is it possible to reduce those images in size, and have it work across all browsers? If that's impossible, is there a way I can make it overflow:auto, so the extra-large images get clipped at the bottom?I'd appreciate specific code or examples from other websites. Thanks for any help.
  17. I'm creating an image gallery using purely CSS and HTML. Here's the page in progress. Is there any way to make the large image stay visible after its hover state, or when the thumbnail link is clicked? If that's not possible, how can I make the image open in a pop-up window sized to its exact width and height?If you can think of any good webpage examples, please point me in the right direction.
  18. Holy crap!!! The problem had nothing to do with code. I'd resized the page using Windows CTRL -, and my FF browser apparently saved that info for that page.
  19. I'd rather not make these pages live yet, but while testing it on my local computer, I'm encountering a really mysterious and frustrating problem. I don't even know what section of the code to paste here, since I have absolutely no clue what's causing it.The same set of CSS and HTML works fine for four pages. But for the fifth page, all the fixed elements (the left menu, specifically) shrink.I've ruled out everything obvious. I'm not using percentages. The fixed elements are exactly the same in the pages that work, and the page that doesn't work.My best guess is it's a conflict between style sheets. But I've systematically tested every style-defined element--removed them and put them back--and nothing affects the problem.Is there any known bug that would cause this?The CSS (excerpt): body {width:100%;height:100%;font-size:100%;font-family:'Trebuchet MS', Helvetica, sans-serif;text-align:left;color:#ffc;background-color:#003;}img {border:none;}ul, div, a, p, h1, h2, h3, h4, h5, h6 {padding:0; margin:0;}.center {display:block;text-align:center;margin:0;padding:0;overflow:visible;}.small {font-size:85%;}.dark {color:#003;}a {color:#aff; outline:none;}a:hover {color:#6fb;}#home { /* home flower */width:132px;height:127px;position:fixed;top:2px;left:0;z-index:2;padding:0;margin:0;}#home a {display:block;width:132px;height:127px;padding:0;margin:0;outline:none;}#fade {position:fixed;top:0; left:0;z-index:0;width:150px;height:100%;padding:0;margin:0;}#decobox {position:fixed;top:120px; left:0;z-index:1;width:147px;height:437px;padding:0;margin:0;}#hometext {display:block;color:#ffc;font-size:80%;position:fixed;top:2px; left:2px;z-index:2;padding:0;margin:0;}#sitemap {width:142px;position:fixed;bottom:2px; left:2px;z-index:2;padding:0;margin:0;}#sitemap a { display:block; color:#000; font-size:95%; text-decoration:none;}#sitemap a:hover { display:block; color:#ffc;} /* left menu */#menu {font-size:100%;font-weight:bold;width:142px;height:auto;position:fixed;top:136px; left:0;z-index:4;padding:0;margin:0 0 0 2px;}#menu ul {list-style:none;}#menu li {color:#000;padding-left:4px;margin:0 0 4px;}#menu li a, #menu li a:link {color:#000;font-weight:bold;text-decoration:none;outline:none;}#menu li a:visited {color:#000;}#menu li a:hover {color:#ffc;}#menu li a:active {color:#600;} #menu ul.sub { list-style-position:outside; list-style-image:none; padding-left:10px; overflow:hidden; } #menu ul.sub li.current a{ background-color:#af7; font-weight:bold; padding-left:5px; padding-right:5px; } #menu ul.sub li.current a:hover{ color:#000; font-weight:bold; } #menu ul.sub li { padding-left:16px; background:transparent url('../images/menu/bullet1.png') no-repeat; background-position:0; margin:0; } #menu ul.sub a { font-weight:normal; text-decoration:none; } #menu ul.sub a:hover { color:#ffc; font-weight:bold; } The HMTL: <div><img id="fade" src="images/bg/cyanfade.png" alt="fade"></div><div><img id="decobox" src="images/bg/decobox.png" width="147px" height="437px" alt="decobox"></div><div id="hometext">HOME</div><div id="home"><a href="http://art.abbygoldsmith.com"><img src="images/menu/i_homefl.png" width="132px" height="127px" alt="art home"></a></div><ul id="menu"> <li>ANIMATION <ul class="sub"> <li><a href="testanimation.html">Demo Reel</a> <li><a href="testsprites2.html">Sprite Art</a> <li><a href="teststudentfilms.html">Short Films</a> <li><a href="test3dgames.html">3D Games</a> <li class="current"><a href="testflash.html">Flash</a> <li><a href="">Résumé</a> </ul> <li><a href="" title="Illustrations">ILLUSTRATION</a> <li><a href="" title="Concept Art">DESIGN</a> <li><a href="" title="Life Sketches">FINE ART</a> <li><a href="" title="Aliens">FREE STUFF</a></ul><div id="sitemap"><a href="http://abbygoldsmith.com/sitemap" title="sitemap">Sitemap</a></div>
  20. I'm redesigning my art website. Here's some mockups I've done in Photoshop.Questions for Feedback: * Does the sidebar menu look appealing and navigable? * Is it possible to make a fade out background inside a container (as shown in the sidebar menu)? * Should the copyright footer go in the sidebar menu, or at the bottom of each page? * Should the sitemap link be part of the footer, or part of the sidebar menu? * Please suggest improvements. Thanks!
  21. Wirehopper: Thanks. That tells me a lot of what I want to know. Thanks to the rest of you, too. I figure I might try Wordpress somewhere down the road, but I'm not sure if it's worth knowing, if I'm already comfortable with HTML and CSS. On the other hand, I hear of web developers who use Wordpress in addition to their own HTML/CSS.
  22. Abby

    horizontal image lists

    Thanks! But there's some strange math in there. I had to add extra width in order to keep the list items from wrapping. I'm not sure why. Here's my new CSS (which worked to center the horizontal image lists):.center {width:80%;text-align:center;padding:0;margin:0;overflow:visible;}.down, .across, .acrossb {list-style:none outside none;}ul.across, ul.acrossb {text-align:center;margin:0 auto;}ul.across {width:1180px; height:129px;}ul.acrossb {width:800px; height:400px;}ul.across li, ul.acrossb li { display:inline-block; /* IE7-8 */ float:left; /* IE6-7 */ }ul.across li {width:190px;}ul.acrossb li {width:247px;} As you can see, the (6) list items in .across are 190px, and the (3) list items in .acrossb are 247px. Their total widths should be 1140px and 741px, respectively. However, I had to make them 1180px and 800px to keep the last item from wrapping. Any idea why this happens? Here's my page.
  23. It's a pretty cool site! so you will have to bare with meIt should be bear, not bare.
  24. Abby

    1st Website

    Very cool! Don't make the logo on the home page a link (clickable), since it goes nowhere.The artist in me doesn't like the use of screen real estate. It's a lot of verticalness with a lot of empty space on either side. But a lot of web pages do that, and I'm all about liquid layout ... but I'm so new to web design, maybe there's a reason to avoid liquid layout which I'm not aware of. So ignore my rambling.The link text inside the transparent box is very hard to read ... it's indigo against a black background. You might want to switch it to light gray or something. Same for the link:visited state. Dark purple is hard to see against black.The form should not open in a new window (for those of us who use tabs), and it should include a link back to the home page.
  25. I'm really new to (serious-ish) web development, and I've never used Wordpress or any content management system, although I did briefly fool around with various demos of Drupal and Joomla on the open source CMS site.I've ignored CMS because 1) I'm comfortable with HTML and getting okay with CSS, 2) I want total control over my website, without any weird restrictions, 3) I don't want to add any bulky software to my computer, and 4) I don't feel like researching new software, or figuring out how it works.It seems like everyone on this forum has decided to go with code instead of a CMS ... or do you use a CMS in addition to your code? What are your reasons for choosing code instead of CMS? In my particular case, what would you recommand, and why?Thanks. I'm grateful for all the help on this forum.
  • Create New...