I have a validation control elements in ASP.NET which they needs to be inside form tag in order to work, that's why I'm doing silly things with positioning div which includes validation controls but I can't get it to work. Please check my two images:
Here is my current layout. Gray div is actually div whre validation controls are. Because as you see this site has plenty of space so I want to position gray div on the left side, just like you will see in second image.
I've already positioned like shows upper image (with properties: top, left, position absolute), but if I resize browser window, gray div will overlay centered div ( will stay on the same spot ). Check following image to see what I mean:
This is a very easy answer! Give your body a min-width.
body {
min-width: 1000px;
}
You will have to find out what the brown div and gray div equal plus a little room to give space between them.
If you want it to happen only on a certain page then use this java script if statement.
if(document.location.href === 'pageURL.com') {
$('body').css('min-width', '1500px');
}
to find page URL go into a web console and type in document.location.href and it will give you the exact url.
Related
What I am trying to do is similar to an image map - in reverse. I have a large image (over 2000x2000) and want to give links to coordinates on the image. There are items in the image that I would like users to be able to jump directly to with having to scan over the whole image manually. Is this possible with either CSS or HTML by adding links to coordinates or adding anchors to the image? I would use js if that was an option as well.
Interesting. The notion of jumping to a position on a web browser window is limited in general. Here are some general possibilities, without specific implementation details:
You could treat it as a sprite image, and use JavaScript/jQuery to change the image coordinates so that the point of the image you are interested in moves to the the top left of a div positioned on the page. But the portion of the image above and to the left of that point would not be visible.
You could define it as a background image in a div, and define an invisible table or invisible fixed-position divs within that div, and link to specific divs or cells in that overlay. In this case, a y-coordinate in the image where the div or cell is positioned would probably move to the top of the browser window, but horizontal positioning would be problematic. If the div or cell you target is off the screen to the right or left, the page would shift to expose it, but I don't thing that you could guarantee where the specific x-coordinate would be positioned. Also, if the target is near the bottom of the web page, that target point will not move to the top. But this solution wouldn't require JavaScript/jQuery - it would just mean linking to element ID's on the page.
This is almost the same as #2... You could overlay the image with divs and/or a table at higher z-levels, and link to those divs or table cells.
You could use JavaScript/jQuery to position a fixed-size div with visible borders so that its upper-left corner is at the position in the image that you are interested in. I think you'd still have to link to that div in order to make sure that it is visible in the current viewport.
You should be able to lay out a form over the image and move the cursor to fields on the form. I think that the form could be transparent so that the cursor appears to be moving around on the image. But you'd need be confident that the data entry cursor is sufficiently visible on top of the image to be useful.
the chat div is breaking the bottom of the border line when im not hovering over it. cant seem to find a solution so any help or advice? thank you.
CODE: http:/jsfiddle.net/7wf912Lt/
As extended comments should be avoided on Stackoverflow - in case the Fidddle already looks like the required layout, just the necessary steps in case it's not so clear how it's done:
The top link is just a <div> on top of the embedded swf. The swf is wrapped in a <div> with float:left; the left and right link are also wrapped in a <div> with float: left. Therefore all divs are positioned in one row. To clear the float, I've just added a <div> with clear:left;. In addition, the width and height of the container have to be increased a bit so everything fits. Last step will be to reduce the margin: left of the container, so the content will be displayed centered. There are different solutions to display content centered, but I guess you'll have no problem to fix the rest.
For the Fiddle I just increased the height of .chat to 550px, the extra 50px are needed to have the additional height for the top link. Otherwise the swf would be displayed breaking the bottom border / partly outside of the box.
Update: Question was changed from displaying links around an embedded swf (which is solved) into the follow-up issue that the swf breaks the bottom border when it's not hovered. Problem is that link provided in question doesn't display the swf chat, therefore the mentioned problem is not solvable. Already added the CodePen-CSS into an updated Fiddle and only changed the height of .chat from 500px into 550px to provide enough space for the added links, and swf doesn't display like described. Further information to be added to the question is from which browser the screenshot was taken as I've only tested with Firefox and there it displays as intended.
Update2: As updated Fiddle by OP displays the described problem, should be fixable by adjusting css. The problem is located in the left link with the position set to 200px; if set to 0 before hover, the chat is displayed in the border when the height is set to 550px instead of 500px.
Update 3: Adjusted Fiddle like follows: changed the left link to position: absolute;, so it's taken out of the flow and won't interfere with the chat window. Otherwise the chat would be pushed down on hover when the left link is displayed on hovering chat as both share the same position for some seconds. Also reduced the margin-left of the chat so it's displayed centered. Fiddle: Fiddle
I guess you won't have any problems to e.g. adjust the padding or margins if you want more or less distance between the links and the border.
In case this works as intended would be kind to follow this step - Stackoverflow , otherwise just add possible issues to your question.
I have designed a simple website. The only thing left is to make a small box on the left. But I want to be always visible even when I scroll down. It's use will be something like a small ad. ![floating box][1]
Can you post an example or two? what css is needed for this? (if it's needed)
unfortunately I can't post any images because of I am a new user (I am not allowed to.. and this kinda frustrating)
But I will post an image as soon as possible.
You should apply position: fixed to this box.
Fixed Positioning
An element with fixed position is positioned relative to the browser
window.
It will not move even if the window is scrolled.
Here's a sample: http://www.w3schools.com/css/tryit.asp?filename=trycss_position_fixed
You can read more about CSS positioning here: http://www.w3schools.com/css/css_positioning.asp
Here's a jsFiddle that I baked for your that shows how you can get this working: http://jsfiddle.net/leniel/8ub7s/2/
You can see that even when you scroll, the title is still visible and if you hover it, the ad box will show. Just adapt the CSS to your needs as you want it floated to the left. :)
I am working on my portfolio and I am having an issue with the project description shifting the images on the left downward when the browser resize. A picture of the issue here: click here When you resize the browser the text will shift over and move the images down. I've tried setting min-width but that doesn't help the text nor the image div to make sure it doesn't resize at a certain point.
Here is a sample link to the page itself: [click here][2]
I tried adding min-widths to a image element but that doesn't work either. I do not want to use absolute position as it will overlap on top on resize. Any thoughts or suggestions?
You have an image that is 1052px wide, which is in a UL element that has a margin-left of 1.5em. Your description box is 350px. Basically your #imagewrapper div needs to be equal to or wider than all of these elements.
Right now that's about 1422px. It will change if the effective font size for your UL.imagewrap-pad changes.
That's a pretty wide web site. You probably should make it a bit narrower if you're making it for general viewing, especially with all the tablets etc out there now.
Anyway, the code you want is
#imagewrapper
{
width:1422px;
margin:0 auto;
}
The second line makes it center on the screen.
P.S - get Firebug for Firefox, or use similar tools in chrome. They let you endlessly experiment with styles to find out what works for you.
To solve the problem just set the "width" property in #imagewrapper :
#imagewrapper {
width: 1430px;
}
Have You tried setting up width attr on the parent element to around 1800px?
div#imagewrapper {
width:1800px;
}
It will put a scroll bar at the bottom of Your browser, but if You want to put such a big image beside that text then You do need a lot of space. Just keep in mind that it won't fit in users monitors.
To make it look nice I guess You should apply that attribute to the body tag.
I am a new learner of html and jquery.
Please help me how I can create an overlay div which covers my whole screen, including the background image as well. I was able to create an overlay div but it does not covers my whole screen, instead it covers my container div and if i increase the width it stretches to right side but left part remains uncovered.I put my overlay div in the outer most div but still on increasing the width it gives extra width to right side only and left part remains uncovered.
.
My wrapper div has a background image for the whole screen but my overlay div is not able to cover left part of my container div. Please help me.
thanks
HP
take a look at the blockUI plugin
http://jquery.malsup.com/block/
lots of different styles available!
the page blocking example is what you need, it works with a div or a html string for the message while the overlay is shown.
I got the answer.
YOu can put margin:auto; Now, your browser will take care of it and it will occupy the whole screen.