So am I an Idiot? Or is this layout super tricky?

Hey everyone,
Besides the header and footer, I have the 4 obvious divs that make up the desktop layout as seen here: http://postimg.org/image/k678ro8qp/
The twitter widget (which is its own div) is float: right. The other three divs are float:left. The problem is that the twitter widget comes at the beginning of the HTML work flow(under the header), so when I created the Phone media query, the twitter widget stacks first under the header... which is obviously undesirable. I looked for a CSS solution to push it against the footer and couldn't find one that didn't involve absolute positioning. I don't want to injure the responsive design of the site.
So I thought I'd just move the Twitter container div to the end of the HTML workflow (before the footer), that way it will stack on top of the footer in Phone query; and yes, this solves the Phone Media query problem; but then this happened to the Desktop layout: http://postimg.org/image/sd3twzo75/
I think I've tinkered out all possibilities that it's a padding, margin, clear, math-width problem (defiantly not this) issue. Using DW's inspect yields no obvious culprit either.
Does anyone know of a CSS solution that will keep the integrity of the unbroken Desktop layout; and in the Phone query, push the twitter widget down to bypass the other three divs and stack on top of the footer; with either of the two HTML structures, or if you there's a third, more cleaver way to arrange the HTML/apply cleaver CSS to accomplish this?
Thanks in advance for the help guys, this seems like such a stupid thing to get stuck on, much appreciated.

Well I can't put the site up live yet (If there's a way to create a link that other people can't find let me know), but here's the HTML code (of the unbroken desktop layout) Followed by the CSS code (same unbroken structure).
HTML Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<! --[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<title>Inside Juan Pablo</title>
<link href="_css/styles_no_wrapper.css" rel="stylesheet" type="text/css">
<link href="_css/MQuery.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="headercontainer">
<header><h1>Inside Juan Pablo</h1><h2>... A Portal for World Class Reporting</h2>
<h4>
<a href="index.html" title="Home">Home</a> |
<a href="blog/bloghome.html" title="An Accursed Life: A Blog">An Accursed Life: A Blog</a> |
<a href="articles/articlehome.html" title="Mitch Conners Reporting">Mitch Conners Reporting</a></h4>
</header></div>
<div id="welcomediv"><h1>The Newest of the News</h1>
</div>
<div id="twittercontainerindex">
<a class="twitter-timeline" href="https://twitter.com/insidejuanpablo" data-widget-id="558421982627131392">Tweets by @insidejuanpablo</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getE lementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.j s";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<div id="blogspotcontainer">
<aside><figure><img src="_images/For Web/croped-thumbs.jpg"></figure></aside>
<article><h1> Blog</h1>
<section>
<h2>Saturday November 29; I believe I'm being haunted</h2>
<h3>by Juan Pablo</h3>
<p>I was minding my own business, working on this website, when what felt like the wrinkled, calloused hands of an hold man, grab me on the shoulder. There is a mirror hanging on the wall just to the left of my workspace; and when I looked it, you won't bellieve what I saw... <a href="#">more</a></p>
</section>
</article>
</div>
<div id="articlecontainer">
<article>
<div id="articleheadingcontainer">
<h1>Breaking Stories</h1>
</div>
<section>
<aside><figure><img src="_images/For Web/The_Femme_Fatale.jpg"></figure></aside>
<h2>Dolphins Storm the Beaches</h2>
<h3>by Juan Pablo</h3>
<P>Dolphins create breathing apparatises and storm Japanese beaches in retaliation...<a href="#">more</a></P>
</section>
<section>
<aside><figure><img src="_images/For Web/sunrise-over-barcelona-3.jpg"></figure></aside>
<h2>An Advacacy for Polluion; it makes for Beautiful Sunsets</h2>
<h3>by Juan Pablo</h3>
<P>The PPM(parts per Million) of carcinogentic particulates might be dangeriously high; but damn, do they make for beautiful sunsets...<a href="#">more</a></P>
</section>
<section>
<aside><figure><img src="_images/For Web/massive-volcano.jpg"></figure></aside>
<h2>The World Quavers with Respect; New Gravy Recipet</h2>
<h3>by Juan Pablo</h3>
<p>At 2:30 PM MT, there was a small foreshock that registered in the Aikian Fault lin in California...<a href="#">more</a></p>
</section>
<section><aside><figure><img src="_images/For Web/ragnarock.jpg"></figure></aside>
<h2>Samsung's new Galaxy 5 achieve sentient conscienceness; Beware of Skynet!</h2>
<h3>by Juan Pablo</h3>
<p> </p>
<p>Usually in the provinece of Kioki Japan, the the large Samsung manufacturing plant, there is a great rabble of congratulations when the first shipment of rolled off the assemblyline and put into planes for world wide distribution; but this time, there was only an ominous silence. Little did they know what had unleashed through out the world, now distrubiting itself throughout the world like a malignent cancer, an unstable apocolypse... <a href="#">more</a></p>
</section>
</article>
</div>
<div id="footercontainer"><footer><h5>Inside Juan Pablo</h5>
<h4><a href="#">Contact</a></h4>
</footer></div>
</div>
</body>
</html>
CSS:
***Desktop**
#welcomediv {
padding: 1% 0% 1% 0%;
position: relative;
width: auto;
background-color: rgba(0,0,0,.7);
max-height: 300px;
min-height: 300px;
max-width: 77%;
min-width: 77%;
float: left;
#blogspotcontainer {
float: left;
max-width: 35.5%;
min-width: 35.5%;
padding: 1%;
position: relative;
width: auto;
background-color: rgba(0,0,0,.7);
max-height: 700px;
overflow-y: scroll;
min-height: 700px;
#articlecontainer {
float: left;
max-width: 35.5%;
min-width: 35.5%;
padding: 1%;
position: relative;
width: auto;
background-color: rgba(0,0,0,.7);
max-height: 700px;
overflow-y: scroll;
min-height: 700px;
#twittercontainerindex {
background-color: rgba(0,0,0,.8);
position: relative;
float: right;
min-width: 25%;
max-width: 25%;
padding: 1% 0% 3% 0%;
max-height: 1000px;
min-height: 1000px;
***Phone MQ**
#welcomediv {
padding: 1% 0% 1% 0%;
position: relative;
width: auto;
background-color: rgba(0,0,0,1);
max-height: 300px;
overflow-y: scroll;
min-height: 300px;
max-width: 100%;
min-width: 100%;
float: left;
clear: none;
margin-right: 0em;
z-index: 100;
#blogspotcontainer {
background-color: rgba(0,0,0,1);
clear: both;
max-width: 98%;
z-index: 100;
padding: 1%;
#articlecontainer {
background-color: rgba(0,0,0,1);
clear: both;
max-width: 98%;
padding-top: 1%;
z-index: 100;
min-width: 98%;
#twittercontainerindex {
background-color: rgba(0,0,0,.8);
position: relative;
overflow-y: hide;
max-height: 0px;
min-height: 0px;
z-index: -2000;
max-width: 98%;
padding: 1%;

Similar Messages

Box model experts, why wouldnt this layout allow for a container div to fully expand?

Box model experts, why wouldnt this layout allow for a container div to fully expand?
Please see attached jpg.
Live site is at http://www.theminnternet.com/

You have an answer for the height issue, you may also be interested in this article that talks about cutting down on the stylesheet size... you have a lot of styles in your stylesheet that can really be trimmed down by using shorthand rules.
http://www.communitymx.com/content/article.cfm?cid=A43B828960590F55

How can I reproduce this layout?

Hello everyone, I'm very new and green to photoshop and indesign. Can anyone please tell me how I can reproduce this layout, with the text following the curve of the man's frame? My friend who did it says she drew the curve in using the pen bezier tool, but she works in quark and i don't know how to reproduce this in indesign or photoshop. Thanks so very much everyone. Oh, and I indesign cs5.

Hi,
In Photoshop, you'll need to create a closed path that sets the bounds for your text to fill. Then with the type tool, click inside the shape and type away.
LInk to Help that explains basics of shapes and paths.
http://bit.ly/aKu3EO
Enter type inside a closed path
Select the Horizontal Type tool .
Position the pointer inside the path.
When the type tool is surrounded by dashed parentheses , click to insert text.
Here's the relevant Help document for In Design:
http://bit.ly/aV4SUW
I hope that helps get you started.
regards,
steve

This.layout with two pages and cover sheet

Hello @all,
in the documentation for the "doc properties" and "layout" section I only find the following strings:
SinglePage
OneColumn
TwoColumnLeft
TwoColumnRight
TwoPageLeft
TwoPageRight
I set it for the active document with the following command in my JavaScript:
this.layout = "TwoPageLeft";
But what is the right entry/string, if I want the "two pages view" with an "single page"-cover sheet?
That means, I need a command/string for my document where only the first page is in the middle and alone and the other pages (starts at the second page) must be two next two each other.
Regards,
Jessi

And i suppose i could suppress any other fields from page one based on the same flag. But ideally as they layout is common i was hoping not to have to do a subreport to lay it all out again.
Could i not based on a flag on the group footer or header say if this flag is true start a new page and then on the feilds the ones i want to hide or show say something like if page two and x is ture then show or hide as need be??

How would you slice this layout?

I am new to fireworks and I don't know where to begin slicing this layout into css and images. Are there any good tutorials?
Any help is greatly appreciated,
Michal
Full size: http://driverlawfirm.com/draft6.png

In your original graphic, the background (behind the logo and all the content boxes) is a gradient from a medium grey to almost white. You have drop shadows behind all your content boxes. The drop shadows are partially transparent. Because the shadows are transparent, the background gradient will show through it. The color of the background and the shadow will blend and be darker at the top of the each box than at the bottom.
I don't understand why your corners are darker in your screen captures, that does not make sense from what your image looks like. Unless you have transparent slices and placed the slice shown in purple behind the top and bottom slices as well? If so, the top and bottom slices are full width and do not need the additional background. For each box, you should have:
[div with top slice background, untiled] [end div]
[div for content wtih purple slice background, tiled vertically] [end div]
[div with bottom slice background, untiled] [end div]
So...two points.
1) If you want to have a transparent shadow over a full-page gradient, you need to either use PNG32 and probably learn how to code that for IE 6 or use PNG8 and not worry about IE 6. (IE 6 does not show semi-transparent pixels in PNG32 wtihout special coding, so your shadow won't be visible unless you make an effort.)
2) If you don't want to go to all that hassle, and you want to have a nice-looking drop shadow, then you need to revise your design so that the page area behind the content regions is a solid color. Then, you merely export an image where the shadow color is flattened against the background color. Then, you could use PNG24 or JPG.

This ans super

< Why the "this" and "super" objects of java are non-=static? >

JoachimSauer wrote:
What would a static "this" refer to?A static this (you'd have to call it something else, say thisClass) would be treated as an alias for the class name of the enclosing class. You could use it in situations like:
private static ImageIcon = new ImageIcon(thisClass.class.getResource("img.png"));Or
private static Log log = LogFactory.getLog(thisClass.class);

This and super?

anybody knows why when I used "this" to call a subclass in a subclass and used "super" to call a subclass in a subclass the output is the same
Is there any difference with that 2? thanks..

CodeSniffer wrote:
The "super" calls the method in the first class , it ignores the same name in other subclasses, it just calls the first method declared in the first class
and the "this" calls the method just within the class
am i right?Is that description consistent with the output from this program?
class A {
    public void f() {System.out.println("A.f");}
    public void g() {System.out.println("A.g");}
    public void h() {System.out.println("A.h");}
public class B extends A {
    @Override public void g() {System.out.println("B.g");}
    public void example() {
        super.f();
        this.f();
        super.g();
        this.g();
        super.h();
        this.h();
    public static void main(String[] args) {
        new C().example();
class C extends B {
    @Override public void h() {System.out.println("C.h");}
}

This() and super() invocations in constructor bodies

Hi,
Could someone please explain why it is not allowed to explicitly
call this() or super() in a constructor body anywhere as opposed
to the first statement in the constructor (which in turn implies that
this() and super() can not be used together) ?
Also, If the constructor is a constructor for an enum type, it is a compile-time
error for it to invoke the superclass constructor explicitly. Why ?
And the last question - why it is not allowed to invoke this() or super()
with instance fields ?
Cheers,
Adrian

AdrianSosialik wrote:
Could someone please explain why it is not allowed to explicitly
call this() or super() in a constructor body anywhere as opposed
to the first statement in the constructorI think it was a language design decision. One could allow certain statements before invoking another constructor, but this would probably cause more confusion than help. So I guess it was deliberatly chosen to not allow this.
(which in turn implies that this() and super() can not be used
together) ?Yes, but if this would be permitted, it would also be harder to guarantee that a superclass constructor gets called exactly once.
Also, If the constructor is a constructor for an enum type,
it is a compile-time error for it to invoke the superclass
constructor explicitly. Why ?Could you provide a "compilable" code snippet that demonstrates this?
And the last question - why it is not allowed to invoke this()
or super() with instance fields ?As you are not able to store something in them before the invocation, they contain their default values... (the JVM allows storing values in instance fields before invoking another constructor, but it was apparently decided to not include such a thing in Java)

This and super keywords, array.length attribute

'this' and 'super' keywords and array.length attribute are declared in which java class?
and also during running of a java program how they are initialized and how they work?

'this' and 'super' keywords and array.length attribute are declared in which java class?They are not declared in any Java class, any more than the keywords 'class', 'interface', 'for', 'while', etc., are. They are defined in the grammar of the Java language, in the Java Language Specification.
and also during running of a java program how they are initialized and how they work?That's much too large a question for a forum. Try reading the Java Tutorial.

This and super keyword

what is the difference between this and super keyword?

this serves as a reference to the current object whilst super refers to the superclass of the current object.

Regarding this or super call in constructors

a call to this or super should be the first line of any constructor if we are providing them?Why cant we have them anywhere in our constructor code?

You can do this using byte code. (not advised!!)
However if you feel you want to move this() or super() there is another way to do what you have in mind.
One thing you can do is call static method in the this/super line which means you can execute code before this/super is called.

IPhoto/iWeb - am I an idiot or does this really stink this bad?

I have been using .Mac with iPhoto for a while now publishing photos to .Mac for my family to view. This use to be a wonderfully simply procedure, all integrated in iPhoto.
Now iPhoto launches iWeb for this task and I have a big issue with what happens -- iWeb uploads all the photos for all my pages every time I want to add one new page. Is this the way it's suppose to happen? Right now, I'm waiting for iWeb to finish uploading over 100 photos spread over 8 pages. It's actually uploading every page every time I add a new page. Am I an idiot and I'm missing something?
Also, iWeb should give you a clear indication that it's uploading, as in a dialog with a status.
Thanks to everyone who answers any of my questions!

Hello Scott,
I think I know what is going on here. Usually iWeb does not upload EVERY page if only something small has changed. But in your case, I bet everytime you add a page you display a new navigation menu link for the new page, right? So now you have 8 items in the navigation menu...one for each page, right? Well, what is happening here is that when you add an item to the navigation menu, you are in effect changing EVERY page because EVERY page has that darned navigation menu. Let me konw if I am way off base for you.
Let me suggest a little bit more elegant method of doing your photo pages in iWeb. Unfortunately, this may require you to revamp your whole site, but I think the results are a lot better and allow for future expandability. And it only puts a single link up on your navigation menu...call it "The Photo Gallery" or something catchy like that...."Gallery" is even better...simpler... Here's the method...
Assuming that you keep your photos organized in albums in iPhoto, here is a lovely way to AUTOMATICALLY generate photo pages AND make a nice index page that leads to all your present and future photo galleries...
Create a living, growing photo gallery
I hope you find this helpful. I think it is a particularly elegant and automatic way of doing photo galleries via iPhoto and iWeb, especially now that there is no Homepages option in the new iPhoto. iWeb is the future.

This is a tricky one in need of inspiration....

Id be very grateful if anyone could assist in this problem
Hardware
======
iPad 2
iPhone 4s
iPod 4th Gen
PC
Software
======
iTunes 10.5.1.42
iOS 5.0.1
Windows 7 sp3
Ok, heres the problem, the USB ports on my pc made a gentle "bang" noise, followed by a little puff of smoke and the smell of burnt out components and from that point on no USB devices are registering on the PC, i think we can safely say its a hardware failure as opposed to drivers !
The issue i have is that i had never set up the wi-fi sync option in itunes
Obviously, in order to activate the wifi sync, you need to connect via USB cable first, then select the option from the summary box
Im sure you can see the paradox !
Ive tried everything i know and ive drawn a blank
Does anyone have any ideas how i can connect and sync ?
If I buy a HDMi cable, can I connect my apple devices to the HDMI port on the PC and will it be recognised in itunes as if it were a USB ?
Really would appreciate any suggestions or advice
Many thanks in advance
Lee

I have never heard of a trick to use any port but a usb port for work with the iDevices. Dave is right, HDMI is not a success path. There really isn't much option but to repair the computer, or replace it. A bang, no matter how gentle, followed by a puff of smoke is pretty conclusive that major components have burned out. Repair people are very likely to tell you it isn't worth it depending on the age of the computer.
If you have a firewire port, this would be an excellent time to get an external hard drive and backup all the material on that computer. If you decide to do that, ask for info before formatting the drive, we can make suggestions so the drive will be readable by both PCs and Macs, should you decide at some time you are interested in a Mac.

My mouse seems to disappear randomly. This is super annoying. Is this a problem for others as well? I'm ready to jump ship. This is unacceptable.

When I am browsing the internet or working in word, the mouse arrow simply disapears and I cannot find for without moving it chaotically around the screen. Help! This is unaceptable.

This is the itunes forum.
You are not addressing Apple here at all.

Is this layout possible?

Hello!
Good to see there are still some iWeb lovers out there.
I'm looking for a way to create a 'horizontal' looking website in iWeb. This is a good example: http://theorydesign.ca/
Is this possible? Do I have to work with a background image or something, and how do I get it in the right place and working in different browsers? I've been wanting to create a website like this for a long time now, but never succeeded/

If you're interested in a stationary/static menu at the top like Wyodor linked you to here's another example of the same effect using Wyodor's code: Static Navbar
OT

So am I an Idiot? Or is this layout super tricky?

Similar Messages

Maybe you are looking for