How to move text along with the browser - layout

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

Related

Unknown empty space in layout, how to remove it?

I have simple grid layout. 3 columns, 3 rows. Rows are set 400px 400px 100px just for demo.My monitor resolution is 1920x1080 (doesn't matter). On main page there won't content just informations. I'd like remove the empty space under the grid, cuz there is no reason for. I dont know how. It makes my other parts buggy. For better understanding i insert image below.
I checked also <body> but it's not this case.
There is no way to delete it
This is the default HTML and cannot be done unless you override it with an object or change the background color so that it is not white.

How to fit SVG viewport to elements cointained, like default <div> behaviour?

Slowly losing my sanity... I've tried every search term I can think of, but can't find anything about what would seem to be exceedingly simple.
All I want is for the size, aka viewport, of my SVG to fit the containing elements.
I specifically don't want it to scale, crop, meet, slice, zoom or anything else. I just want it to behave like a default div.
The SVG will then be placed inside a div with a max-height and overflow:auto. When the SVG expands beyond the max-height of the containing div I will be able to scroll the div to see the whole of the SVG.

How to change tabs' strings orientation?

When use TabPane with tabs placed on sides the tabs' headers and strings rotates and has vertical orientation. Is there any way to place tabs' string horizontally when use TabPane with the right/left sided tabs?
Put string as label into graphic node. Graphic node can be rotated (there is a rotate graphic property of the tabpane)
Specifically, instead of tab.setText("Text") use tab.setGraphic(new Label("Text")), and look at TabPane.rotateGraphic property.
If you want implementation via fxml : then yes, it is possible. You need to specify attribute rotateGraphic of tabPane, if needed, and set property graphic of a tab to a new instance of label, and that is all. Mostly all you can do via java-code, you can repeat via fxml.
Talking about tabMinWidth - I think, you should look at binding expressions here :
http://docs.oracle.com/javafx/2/api/javafx/beans/binding/Bindings.html
Specifically, I think, you should be interested in max() method - you need to have max of widths of all tabs.
I have done in this way ...
Set following CSS for Tab pane in .CSS file
-fx-tab-min-width: 30px;
-fx-tab-max-width: 30px;
-fx-tab-min-height: 130px;
-fx-tab-max-height: 130px;
After that set label in Tab graphics,Set Min Width for label (Must require)

Overlapping <div>'s with floats

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)

Anchor HTML DIV tag to right of screen

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">...

Resources