SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    Dec 2006
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question is this possible?

    Hi everyone!

    I am trying to improve my portfolio site by adding an ornament style border around the CSS boxes. I was wondering if its even possible to code this design!?

    I want to put a "stylish" border around my dynamic content container. The height of the container is not defined because the blog entries change the height. I dont want to adjust the border image every time I enter a blog entry. I have a feeling the border wont stay in the correct position every time the height changes.

    This is how I imagine it could be done but these are only guesses:
    1. Have the border image extend beyond the top of the screen and every time the container drags down or up so does the image?
    2 Can I attach the image to border so it moves with it ?

    This is a mock up of the borders around the container:


    Can someone tell me if this is even possible? If yes please point me in the right direction

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, that design is possible to code in X/HTML and CSS.

    I would probably use a full width wrapper <div> and place the the background image for one side on it and the image other on <body>. Then you use "background-position:left bottom" for the left one and "background-position:right bottom" for the right one.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think it's possible. You'll just have to mirror the image so that it can tile properly.

    Too bad my development machine is dead, otherwise I'd be able to tell you for certain.

  4. #4
    SitePoint Addict
    Join Date
    Dec 2006
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok thanks I will try this! I found a tutorial here: http://www.communitymx.com/content/a....cfm?cid=A8BBA
    Hopefuly this will do the job!

    Dan Schulz - Have you got an example of mirroring the image? I cannot find something on google


    I have another question
    On the url below you can see my website:
    http://www.webdesignhull.lincoln.ac....er/blog_test2/

    What I want to do is make the menu buttons more attractive by adding curves on the corners... I know I can just make some rollover image buttons but I want to keep it pure CSS.

    If you rollover the link that says "view" in the mini menu for quick work links you can see a speech bubble pop up with curved corners. This effect uses CSS and JS.. The curved corners are done in CSS using this:
    Code:
    div.nicetitle {
    	-moz-border-radius-bottomleft: 10px;
    	-moz-border-radius-bottomright: 10px;
    	-moz-border-radius-topleft: 10px;
    	-moz-border-radius-topright: 0;
    	-moz-opacity: .87;
    	}
    I have tried adding -moz-border-radius-topleft: 10px; to the CSS menu but it didnt do anything:

    Code:
    li#home_menuc {
    	height: 25px;
    	width: 5em;
    	margin-top: 1px;
    	float: left;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-size:10px;  
    	cursor: default; 
    	position: relative; 
    	background-color: #aaa; 
    	display:block;
    	margin-left: 30px;
    	text-align: center;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    	}
    I also noticed the radius effect doesnt work in ie6 it just shows right angles and not curved corners..

    Does anyone know if this effect can be done using another CSS method?

  5. #5
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That won't work as is cross-browser (meaning Opera and Safari, for starters - two of the "Big Four" browsers that should always be tested against). I'd look into using "Sliding Doors" here instead. Yeah, you'll have to use background images, but at least the design will still work (and won't look funny) when images are turned off while the styles are still being applied.

    http://www.alistapart.com/articles/slidingdoors
    http://www.alistapart.com/articles/slidingdoors2

  6. #6
    SitePoint Addict
    Join Date
    Dec 2006
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok thanks for the advice Dan Schulz!
    I found this tutorial on sliding doors: http://alistapart.com/articles/slidingdoors/
    I did my drop down menu using alistapart tutorial: http://www.htmldog.com/articles/suckerfish/example/

    I need to merge the two somehow hm..

    Dan do you have an example of "mirror the image so that it can tile properly." ?

  7. #7
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not right now (I'm on my brother's computer halfway across town right now).


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •