I'm trying to make a page with two overlapping div's, one aligned to the left with the float:left attribute, and the other next to it, but overlapping by means of a negative margin.
Despite all this, I just get text as my output when I preview in browser from Dreamweaver. Problem is, it looks exactly how I want it in DW's preview pane.
Here is the jsFiddle, and how it looks in Dreamweaver.
Try swapping positions of the #img div, and the #titlebar div; AND make sure both are set to 'float:left'.
(#img div first, then #titlebar div in the HTML)
Related
The scroll of the list is going crazy when I scroll and it keeps jittering afterwards even if I don't do anything) as you can see here: https://imgur.com/SdgMf7f (sorry embedding that gif doesn't work here)
I made a minimal example where it happens in:
https://codesandbox.io/s/4r2q3omv1w
I did pass the style to the rows.
Also, if you change the height and width of the list to get the values from Autosizer, then the list doesn't appear, even though this looks exactly like in the example.
Any ideas how to fix these two problems?
EDIT: it seems that it works a little better in Firefox, still a little jumpy in my own code though and the codesandbox's scroll still isn't perfect. (it's super jumpy in chrome, even in incognito).
It seems the problem was related to 2 issues:
Not delegating height and width from <AutoSizer> to the <List>
Row height was defined as 50 but the actual rendered height was more -
From the docs: Note that it is very important that rows do not have vertical overflow. It would make scrolling the list difficult (as individual items will intercept the scroll events)
Here's a working example: https://codesandbox.io/s/jppm1mmo83
I'd like to figure out how I can get my text to move along with the browser. Right now my site looks like this: http://simplysweet.shukuya.com/test/. The divs are absolute, but I've tried relative, static, etc... and can't seem to get the text to move along with the image/layout.
To have your text scroll with the rest of the page you simply need for your divs to be relatively positioned (the default.)
Setting the width of your div to 100% will make it occupy all of the available space in the layout just outside that item, (and so-on up to the root of the document.)
If you want to maintain a "centered" block that is left aligned, use:
margin: auto
on whatever div is just beneath the root of the document.
Use min-width property along with positioning for both div
I have the problem that the text on three UIButtons gets wrapped to several lines in the Interface Builder, but when I run the code, the text is larger than the button and in one line only. I tried setting NSLineBreakMode and NSTextAlignment, but both didn't help.
In the Interface Builder it looks correctly like this: http://imgur.com/WplkqQV while on the simulator it looks like this: http://imgur.com/0YPpEfU. Any ideas?
Thanks in advance.
There is certainly something very odd about your example; I can't reproduce it. You must be doing something to the buttons that you have not described in the information provided by your question. If you set up your button line break mode to be Word Wrap (in the nib), and if your constraints are sensible so that the button can get wider in landscape and narrower in portrait, then it will wrap in portrait and not in landscape, which I believe is what you want. Here are screen shots of a button in the Simulator on my machine (ignore the actual widths of the buttons; it's only an example; what's important is the text wrapping):
The real problem, however, is the height. You'll notice that that isn't changing. This is because a round rect button has an intrinsic height value. If you want the height to change, to make more vertical room for the wrapped text, you will probably need to subclass or intervene in the layout process after rotation. For example, I get pretty nice results like this:
-(void)viewDidLayoutSubviews {
CGRect f = self.button.bounds;
if (UIInterfaceOrientationIsLandscape(self.interfaceOrientation))
f.size.height = 44;
else
f.size.height = 60;
self.button.bounds = f;
}
I'm using LaTeX and I would like to have vertical rule along left side of page, topmargin to bottommargin, 0.5in from the left edge of the page. I want this on every page, so I assume that means it must somehow be tied to the header or the footer?
I've made no progress at all, so I need help with (1) making the full-length rule itself and (2) making it happen automatically on every page of the document.
Can someone tell me how to do that?
I got a working answer to my question on the Latex Community forum: http://www.latex-community.org/forum/viewtopic.php?f=5&t=9072&p=34877#p34877
The answer I got uses the 'Background' package and this code:
\documentclass{article}
\usepackage{background}
\usepackage{lipsum}% just to generate filler text for the example
\SetBgScale{1}
\SetBgAngle{0}
\SetBgColor{black}
\SetBgContents{\rule{.4pt}{\paperheight}}
\SetBgHshift{-9cm}
\begin{document}
\lipsum[1-90]
\end{document}
Works great and was easy to adjust to put one vrule in left margin area and one in the right margin area.
There could be a LaTeX package to do this for you, but I'm more of a TeX person, so I tried to come up with a TeX solution (not always the best idea to mix plain TeX with LaTeX but I think I have it working).
Try this. Box 255 is the box register that TeX places the page contents into before the page is output. What I've done is taken the existing output routine, and changed it to insert into box 255: a 0-height, 0-width infinitely shrinkable-but-overflowing set of boxes containing a rule that is the height of the page, 0.4pt thick and with any luck, half an inch away into the left. The existing contents of box 255 is then added after this rule. Then I call the previous output routine which outputs the page (which now includes a rule), and also the headers and footers.
\newtoks\oldoutput
\oldoutput=\expandafter{\the\output}%
\output{%
\setbox255\vbox to 0pt{%
\hbox to 0pt{%
\vsize\ht255%
\vbox to \ht255{%
\vss
\hbox to -0.5in{%
\hss
\vrule height \ht255 width 0.4pt%
}%
}\hss
}\vss
\box255%
}%
\the\oldoutput
}%
Put it before your \begin{document} command. This might not solve your problem completely, but hopefully it should get you started. Here's a great page for learning about TeX primitives and built-in things.
Have a look at the eso-pic package. From memory, what you want would look like this:
\AddToShipoutPicture{%
\setlength\unitlength{1in}%
\AtPageUpperLeft{%
\put(0.5,\topmargin){\vrule width .5pt height \textheight}%
}%
}
It's not clear in your question if you want the line to span the text area or the whole paper height. Depending on the case, you have to replace \topmargin and \textheight by the correct values, either 0pt or whatever your top margin is, or by \paperheight. See the geometry package if you don't already use it for how to control those dimensions.
I have a site that has 2 DIV tags, one floats left the other floats right. The left DIV contains text for the page, the other DIV is used to display a video.
When I have text in the left DIV that fits the entire width of the screen the video shows up where I want it. However, a few pages have very little text and cause the video to show up in the right-center of the screen. I want to anchor this DIV to the right of the screen regardless of how much text is shown. I don't seem to get this problem in lower resolutions, it occurs more in the higher resolutions (such as 1280x1024). You can see an example on these pages:
http://www.quilnet.com/TechSupport.aspx - Positions the right DIV where I want it regardless of the resolution.
http://www.quilnet.com/ContactUs.aspx - Makes the right DIV closer to the center in higher resolutions. I want it in the position of the page TechSupport.aspx.
I am trying to refrain from using the width parameter because I want it to be resolutionally compliant. I don't want my viewers to have to move a scroll bar left and right.
Any ideas?
Thanks!
Since you have a table based layout, just put an 'align' attribute with a value of 'right' on the right hand TD tag, like this:
<td align="right" valign="top">...