I need to design a landscape page for mobile Web app like this: (CSS3 and jQuery allowed)
A, C and E share same width in percentage (maybe 50%, maybe more or less).
B, D and F to fill the remaining width..
Headers A and B to stick at top.
Containers C and D to fill the middle part.
Footers E and F to stick to the bottom of the viewport.
I need to setup header and footer with fixed heights in pixels or percentage and they will contain absolute positioned images or DIV tags.
The C container will receive various tags with absolute positioning in percent (from left or right, top or bottom of that container).
I need the D container to receive long text with overflo-Yw and the content must be scrollable with finger gesture (Android / iPhone) whithout the rest of the page being scrolled.
Does some CSS guru have a sample to show, with similar design?
The HTML
<div class="left">
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
</div>
<div class="right">
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
</div>
THE CSS
.left,.right{
float:left;
width:48,5%
}
.left{
margin:0 3% 0 0;
}
.header{
height:20px;
width: 100%;
}
.content{
height:500px;
width: 100%;
}
.footer{
height:20px;
width: 100%;
}
Related
This is a hard one to explain, so I'll do my best.
As it stands now, I have a wrapper div that has the iceberg image as it's background. It's styled in that the background image sizes to fit the user's screen. Within that wrapper div, I have two .rows, each containing a column.
Now the tricky part: I want one row to just span the top of the water, with the other spanning the bottom of the water. Here's a rough concept.
Right now these rows are given a min-height to match that horizon, however when the user resizes their screen or has a different browser width than my dev environment, of course it doesn't work the same.
Now, how can I go about getting these rows to match heights with the background image? I had considered slicing the image into two, but I imagine there's got to be a much more resourceful way. Here's the CodePen I'm working with: http://codepen.io/jwindeknecht/pen/qOqwPp
If you can offer any advice or if I can clear anything up, let me know! Thanks.
<div class="hero">
<div class="row over">
<div class="large-6 large-offset-6 columns">
<div class="inside">
<h1>Hello World</h1>
</div>
</div>
</div>
<div class="row under">
<div class="large-6 large-offset-6 columns">
<div class="inside">
<h1>Hello World</h1>
</div>
</div>
</div>
</div>
.hero {
background: url(http://i.imgur.com/fdRuNIF.jpg) center top no-repeat;
background-size: cover;
min-width: 100%;
div {
display: table;
.inside {
display: table-cell;
vertical-align: middle;
}
}
}
.over div { min-height: 275px; }
.under div { min-height: 275px; }
Okay! I figured this out. I know the dimensions of the image, so I had the min-height of the row set to a certain percentage of the the width of the image.
e.g. The image is 1500px wide. The row that covers just the horizon is 300px high. Therefor the min-height of the row is set to 20vw.
So regardless of the background image width, the height of the row matches up due to using the vw. Here's a pen example: http://codepen.io/jwindeknecht/pen/RWyBGW
And the new code is simple:
.over div { min-height: 275px; }
to
.over div { min-height: 20vh; }
I have two divs, .left and .right in a .container div All of which widths are set in % and when I resize my browser the blocks resize too but the text <p> doesn't. Why is that?
Here's a link http://jsfiddle.net/TomasRR/WuNL3/10/
I have stated that .left and .right should always be 400px width when container gets 800px with this command
#media only screen and (max-width: 800px) {
.left, .right {
width: 400px;
}
however when resizing from browser's max width till 800px I want my text in .right resize too, I mean drop down on another line, so I could see the full sentence.
<div class="cont">
<div class="left">
<h1>Programming and fuss</h1>
<h2><em>by Tomas R. </em></h2>
<p>MY TOP 3 PAGES:</p>
TWITTER
WIKIPEDIA
VICE
</div>
<div class="right">
<p>"An ounce of practice is generally worth more than a ton of theory." <span>E. F. Schumacher.</span></p>
</div>
</div> <!-- .cont -->
the .left doesn't interest me. How to fix the text in .right is my question.
Your white-space:nowrap; entry in the css for your cont class is where the problem lies. This stops your paragraph from wrapping within the div
If you want the 2 divs to sit side by side, use float:left; and float:right;
To combat the problem with the right div dropping below the left div, you need to use width: calc(50% - 4px); for each div as you have borders around the divs of 1px thickness. If you adjust the border thickness you will need to adjust the pixels subtracted.
Your white-space:nowrap; entry in the css for your cont class is where the problem lies. This stops your paragraph from wrapping within the div
If you want the 2 divs to sit side by side, use float:left; and float:right;
I'd use float:left instead and also use a container element to keep the widths as 50% and not need use calc to compensate for the borders
<!-- HTML -->
<div class="left">
<div class="container">
Foo
</div>
</div>
<div class="right">
<div class="container">
Foo
</div>
</div>
/* CSS */
.cont {
width:100%;
}
.right .container { border:1px solid black; }
.right {
width:50%;
height:200px;
float:left;
}
.left .container { border:1px solid red; }
.left {
width:50%;
height:200px;
float:left;
vertical-align:top;
}
Demo
If you want them to always take up half of the width, you just have to remove the media query that you have that sets a set width when the browser is small
Demo
As a front end designer, I would recommend that at some point you use media queries to have the sections on top of each other when the screen is small so that it is responsive and readable on small screens, like this
I am using a 12 column 960 px grid system for a site. My client wants to accept advertisements to both sides of the site as can be seen from the screenshot I took from another site.
Problem 1:
I thought of having an external div host the container_12 div. In that case I could have given it a background image via css and have that image within an anchor tag to redirect the user to the advertisement owner's page when clicked on it.
this is my code:
<div style="width:100%; height:100%; min-height:100%; position:fixed; z-index:999; overflow:auto; background-image:url('img/960.png');"></div>
<div class="container_12" style="z-index:1;">
<div class="grid_12 rowAdd bgE">
<div class="txtA" style="line-height:25px;">ADD ROW</div>
</div>
</div>
</div>
which produces the outcome in picture 1. The container_12 is not centered and the contents of it are not clickable at all.
Problem 2:
My client also wants to have adjacent divs both at right and left to host some other ads. Divs should be 220 pixels wide. He also wants the divs either be 'fixed' or 'absolutely positioned'. I am lost as I couldn't have the first problem solved yet. I would appreciate your help.
Picture 1:
Sidebars
Codepen Demo
Basic HTML
<div class="container">
</div>
<div class="left"></div>
<div class="right"></div>
Basic CSS (width some colors for visual reference)
.container {
width:960px;
margin: 0 auto;
background-color: #c0ffee;
height:600px;
}
.left, .right {
position:absolute;
height:600px;
width:220px;
top:0;
}
.left {
right:50%;
margin-right:480px;
background-color: grey;
}
.right {
left:50%;
margin-left:480px;
background-color: red;
}
Here is my problem, I am using a layout that has a sticky footer (using the cssstickyfooter.com method). inside my container div i have a content div that has four other divs inside of it. like so:
<div class="container">
<div class="content">
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>
</div>
</div>
<div class="footer"></div>
In order for the sticky footer to work correctly all of the divs need to have position:relative; set, because the divs will have content that will be different lengths and they need to re-size accordingly. however where my dilemma begins is that i need to have divs 1-4 have position:absolute; set, so that they will stack on top of each other having the same (x,y) position.
is there any way to achieve what i need?
I recommend Ryan Fait's sticky footer, works very well!
* {
margin: 0;
}
html,
body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
/* This line and the next line are not necessary unless you need IE6 support */
height: 100%;
margin: 0 auto -20px;
/* the bottom margin is the negative value of the footer's height */
}
.footer,
.push {
height: 20px;
/* .push must be the same height as .footer */
}
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body>
I typically just use the following to "stick" a div to the bottom of the page (or container):
.footer {position:absolute;bottom:0;left:0;}
Once you set position to absolute, it becomes independent of external divs and their position/dimensions.
I have a absolutely position div that is overlapping a containers background due to it having a larger height. This div is sharing the container with a body div that's sitting happily to the left of it.
Is there a way to extend the container to be the height of the absolutely positioned div, rather than the body content?
Or should I just float the divs side by side and chuck a <div style="clear: both"></div> at the bottom of the two? Seems like a messy hack to get a container to extend :/
EDIT: Comments don't seem to like code structure. So I'll edit it into here as well.
The layout is:
<div id="content">
<div class="container">
<div id="header"></div>
<div id="main">
<div id="column-1"></div>
<div id="column-2"></div>
</div>
</div>
</div>
#content has a repeated background and #container sets the fixed width of the page. #header sits up to for the links and #main holds the two columns which have the main content for the page. I can't get those two columns to sit next to each other (float / absolutely) whilst having the #content's background repeat down below them
With this layout:
<div id="content">
<div class="container">
<div id="header"></div>
<div id="main">
<div id="column-1"></div>
<div id="column-2"></div>
</div>
</div>
</div>
your basic CSS should be something like:
html, body, div { margin: 0; padding: 0; border: 0 none; }
body, #content { height: 100%; }
#main { overflow: hidden; }
#column-1 { float: left; width: 300px; }
#column-2 { float: left; width: 600px; }
You said you wanted the background image appearing below the content. From this I assume you mean you want the page to be full screen height (minimum).
The point of absolute positioning is that it removes the element from the normal flow so no you can't have it's "container" extend to include it because technically it has no container.
Absolute positioning has its place but 9 times out of 10 I get better results with a float-based layout. But I can't really say more without more information.