SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Apr 2003
    Location
    canada
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can this site have a fluid layout???

    Hi All,

    Working on a site which I have posted at http://www.clhdesigns.com/intercept I have just threw up some basic images in an html page to start. My question is with this half red circle can I actually make this site a fluid layout so it resizes despite screen size to fit the entire width of the screen. I think the half red circle here is key.

    Thanks
    Chris
    Your Websites Your Way!!
    www.clhdesigns.com

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,104
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Yes, it can be done, perhaps not exactly as you want, though. I would have the big circle as a background image on the body. But to have the white chunk out of it, I would place a text box over the top of it with a white background. that would mean that if text expands, so will the white box. (The only alternative would be to fix a height on the white box and have scroll bars for overflow.

    As for the red half-square on the left, though, it looks a bit inflexible, as resized text will overlap it a bit, so I'd rethink that.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    As for the red half-square on the left, though, it looks a bit inflexible, as resized text will overlap it a bit, so I'd rethink that.
    I had done something similar to that once before which was able to expand with the text.

    It was simply a left border with two spans AP'd at top and bottom.

    Expanding Text Bracket

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,104
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Nice work, Ray!
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    I had done something similar to that once before which was able to expand with the text.

    It was simply a left border with two spans AP'd at top and bottom.

    Expanding Text Bracket
    Simply beautiful!
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    SitePoint Addict
    Join Date
    Apr 2003
    Location
    canada
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For just the backgroud alone, the white background and red half circle, what would the css code look like for that?

    here is the fixed width code I have for that
    Code:
    *
    {
    	margin: 0;
    	padding: 0;
    }
    
    body {
    	margin: 0px auto;
    	font: 62.5% Arial, Helvetica, sans-serif; 
    	background: #ECEDF2;
    }
    
    #wrapper {
    	width:1630px;
    	min-height:1020px;
    	margin:0px auto;
    	text-align:left;
    	background:url(../images/bg.png) no-repeat;
    	overflow:hidden;
    }
    
    #header{
    	background:url(../images/header.png) no-repeat;
    	width:1620px;
    	height:80px;
    	margin:70px 0px 0px 0px;
    	overflow:hidden;
    }
    
    #content{
    	background:#fff;
    	margin:30px 0px 0px 180px;
    	width:1091px;
    	height:579px;
    }
    
    p{
    	font-size:1.4em;
    	font-family:Arial, Helvetica, sans-serif;
    	line-height:2.0em;
    	color:#868686;
    }
    Help is appreciated thanks for the idea on the expanding text box will that box work seeing as I will be using font-replacement techniques?
    Your Websites Your Way!!
    www.clhdesigns.com


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
  •