How would i go about implementing this?
i know how to do the header and footer and ive done a layout before where i just floated empty divs on both sides at a % of the width to keep center content centered no matter what but, for this the curved side part is eventually going to have a image i dont want distorted as well as a image in the tan part i dont want distorted.
how does fb achieve there landing page the way it is? that seems pretty close to what id prob have to do .
That image link didn’t work. Could you post a link showing what you have tried, or at least post your code? (Try to post in in one file, with the CSS in the <head>, for easy testing.)
If you look closely, you’ll see avoids the curve all together, the have a simple vertical gradient ( white- light blue)… on top of which they put the map. by doing a curve you pain yourself into a corner.
that being said, you have 2 options. split the sidesinto two divs floated side by side and make a HUGE bg image, for the curve part. since the content of the lading page ( assuming it is similar to FB) is small… you just need to cover yourself in the odd case that the user enlarges his/her fonts ( an option which is no longer widely available anyways).
same markup, but instead of a huge bg image… redesign the image to fade into a solid color at the top and bottom and add that color to the background: attribute.
this could be more question of thinking about graphic design that can be readily implemented with the code
this the structure I meant in add in my previous post …
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<title>sample</title>
<style type="text/css">
.wrapper{float:left; background: url(phprough.png) no-repeat right center #e9e2c8; width:60%}
.wrapper .inner{float:right; background: #191917; width:66.6666%; margin-right:-66.6666%}
#leftSideContent {float:right; margin-right: 124px;}
#rightSideContent {float:left;}
/* lets assume now your site is fixed width 960px;*/
.wrapper {min-width:576px;}
#rightSideContent{ width:384px;}
#leftSideContent{width:452px;/*tthis takes into account the added margin*/}
</style>
</head>
<body>
<div class="wrapper">
<div class="inner">
<div id="rightSideContent"> content</div>
<!--inner--></div>
<div id="leftSideContent"> conetnt</div>
<!--wrapper--></div>
</body>
</html>
ht
Better version of the layout image explained .
and i dont think im following you with how you went about what you just posted.im gonna try it out right now and see if that helps me understand.im primarily a programmer and graphic designer and ive been cramming hardcore the past 2 months. i know this stuff is simple but, im just not in the right mindset tonight.
here is a REVISED solution and explanation:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<title>sample</title>
<style type="text/css">
.wrapper{overflow:hidden; background:#e9e2c8; }
.wrapper .inner{float:right; width:40%; background:url(phprough.png) no-repeat left center #191917;}
#leftSideContent {float:left; width: 150%; margin-left:-150%; }
#rightSideContent {float: left; width:100%}
/* lets assume now your site is fixed width 960px;*/
.wrapper {min-width:960px;}
#rightSideContent{ width:260px;/*this takes into account the added margin*/ padding-left:124px; color:#fff }
#leftSideContent{width:576px; margin-left:-576px}
</style>
</head>
<body>
<div class="wrapper">
<div class="inner">
<div id="leftSideContent"> conetnt<br>content<br>dbdbdbdbdconetnt<br>content<br>dbdbdbdbd<br></div>
<div id="rightSideContent"> content<br>dbdbdbdbd RIGHT</div>
<!--inner--></div>
<!--wrapper--></div>
</body>
</html>
1)I used two wraps (.wrapper and .inner) as we need to create equal height columns. Other method are available for EHCs, but because the WIDTH of our content is undetermined, I thought I would use this technique.
I chose the percentages arbitrarily here. essentially following this formula:
width of color band (tan|black)/width of the image provided*100=%
I made a slice containing only the “)” shape of your design. this image turned out to be 124px wide…
OK NOW FOR THE FUN PART…
5.) so that it stacks above that bg color, we need an .INNER div, which will act as the black field. since the back area was on the right of your design and covered roughly 40% of the width… we float this element right and assign it a width of 40%. This creates an edge. If you put sample conet and stop to look at it now you will see two areas side by side. Bring in the image of the “)” as a bg image for .inner put it on the left -center so that it displays on the edge we have just created and, vertically centered to the content.
#leftSideContent, #rightSideContent are floated so that we can better use margin to position them. Essentially #leftSideContent is 150% (of 40%…which gives us 60%, the space we had left unused when we made .inner width:40%).We use a negative margin to suck it out side it’s parent and onto that space we had made for it… this also makes room for #rightSideContent to occupy 100% of its parent ( or 40% of the screen) as we had planed)
because you may want a fixed width site and not fluid, I added some extra rules after that:
.wrapper {min-width:960px;}… essentially keeps it working if the user shrinks the view port to less than 960px;
#rightSideContent{ width:260px;/this takes into account the added margin/ padding-left:124px; color:#fff }
#leftSideContent{width:576px; margin-left:-576px}
both of these are values calculated by multiply our original percentages by 960px.
So I admit I started this kinda late and am a bit groggy, so my explanation doesn’t seem to be worded as eloquently as I had hoped. but I hope you can understand the basis of my solution now and tweak it according to your needs.
==:)
Id like to start off by saying thank you for helping me, i really appreciate it.
like i said im primarily a programmer/graphic designer and i only dabble in css so idk if im missing something or doing something wrong but, the right ) doesn’t seem to float to the right and stick the way i visioned it.
this is better than what i had previously so its a start but, is it just not possible to have it stick the way i want it to regardless of monitor size?
You are welcome.
What do you mean stick to the right? I guess I was thing of a page effect in which the content was , in a sense, “centered” around the “)” shape. I suppose if you want it to be “sticky” to the right side of the SCREEN, you could give it { position:fixed ; right:0; top:50%; margin-top:(-half of your objects height… if so desired)} Note that this doesn’t work on IE6…
just to clarify it a little bettter what im imagining, as you zoom out the right side should stick, the size of the right side is fixed but, it moves with the zoom, sticking tightly to the right side. the only thing i want to get bigger when you zoom out is the tan content area.
give what those property’s? (bear with my im a complete newb with css )
There are 4 kinds of positioning in CSS, 3 of them are interesting and one of those 3 can be simpliefied to being a "specific instance of the the other. The 4 kinds are:
static
relative
absolute
fixed
is the default behaviour. nothing really interesting to say here, excempt maybe that it comes in handy to use position:static if you wanna reset or negate teh effects of the other three.
position reltaive doesnt actually move the space the element takes just where it is displayed. imagine you have a 100px X100px block, if you give it position relative; left:50px. the object will appear 50px FROM the left of where it would have normally appeared, (there will also be a gap of those 50px and the ovject will be covering 50px INTO (over) the ebjoect that foollow it)… In technical terms, the bobject is still in the flow, just displayed elswere
by contrast absolute positioning is just that … based on the LAST containing parent to have Abs. or Rel. position you can place the object ANYWHERE. Pretty cool? The downsiide to this is that the object is outside the normal flow so it doesnt affect the size or position of any objects before or after.
FIXED is like Abs. except instead of being placed relative to any parent it is placed relative to the view port window. something postioned :fix top:0 left:0 would be placed at the top left corner of the viewport… (top:0 ; right:0 wuld place it at the top right) and it will remain there EVEN IF YOU SCROLL, since its position is calculated by the window iself and not by where its parent is, consequently it really isnt affected by anything.
now… I am wondering ZOOM? how are you imaging people are going to be zooming in or out of an HTML doc???
CTRL & + or - zooms a html page .
if you go to facebook.com (without logging in) and zoom in and out you quickly notice a few things.
i want a identical duplicate of what theyve done with the addition of my right “)” piece that will need to stick to the right side of the screen no matter what.
I am not seeing that on FB, unless… I expressly zoom on fonts only.
I noticed the following instead:
The blue header height stays the same. Simple enough to do just give your header a FIXED height… So if zoom enough , the text spills out, failing in my eyes…
there is nothing special about the footer, all they did was make it the last item in the source code and match the background color of the page to the bg color of the footer. BTW, I wasnt including either of those in my code… just the “tricky” middle part…
AFIK, FF and older browsers are the only one that do text only zoom; do you have a sample site up?
As far as fixing the height of the middle part, and spacing use PX values instead of EMs or % … though is normally not considered good practice, it should achieve what you want…In other words, instead of form p{ margin:.5em 5%} do p{ margin:20px 10px}
I decided to take a differnt guess at what I thought you were trying to accomplish and made the following assumptions:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<title>sample</title>
<style type="text/css">
p {margin:0; padding:0} /* part of a reset*/
.wrapper{background:#e9e2c8; padding-right:324px; background:#e9e2c8; min-width: 636px;text-align: center ; }
#leftSideContent { width:100%; height:597px; display:inline-block;}
#rightSideContent {float: right; background:url(phprough.png) no-repeat left center #191917; height:597px; width: 200px; padding-left:124px;; margin-right:-324px; color:#fff}
#leftSideContent { dipslay:inline-block; text-align: center}
form p{text-align:left; padding:10px 0 ; margin:0; overflow: hidden}
form { width: 600px; margin:0 auto; padding:0; font-family: helvetica, arial, san-serif;}
label, input{height:12px; padding:5px; float:left; }
label{width:140px; }
input{border:1px solid #aaa;margin-left:8px;width:430px;}
.sub, label {text-align: right;}
</style>
<!--[if IE lt7]>
<style type="text/css">
#leftSideContent {display:inline;}
</style>
<![endif]-->
</head>
<body>
<div class="wrapper">
<div id="rightSideContent"> content<br>dbdbdbdbd RIGHT<br>
<img height="100" width="100" src="7605l.jpg" border="1">
<img height="100" width="100" src="7605l.jpg" border="1">
<img height="100" width="100" src="7605l.jpg" border="1">
<img height="100" width="100" src="7605l.jpg" border="1">
</div>
<div id="leftSideContent">
<p><img height="200" width="600" src="7605l.jpg" border="1"></p>
<form action="#" method="get">
<p> <label for="some1">Infoname: </label><input name="some1" type="text"></p>
<p> <label for="some2">Infoname: </label><input name="some2" type="text"></p>
<p> <label for="some3">Infoname: </label><input name="some3" type="text"></p>
<p class="sub"> <button type="submit">Come in!</button></p>
</form>
</div>
<!--wrapper--></div>
</body>
</html>
I hope that is closer to what you were intending.