this is my first asp.net site that i write
I want to have simple form with 5 textbox line that the user will be able to write in
and one button that the user will be able to press when he finish his data input.
Each textbox that i adding i automaticly jump to the left side of the form.
How can i control the place that it will will be shown ?
You should probably do that with a simple css script.
You can add a css page/script to your solution. And then add that in the header of the page. But you could also use something like this on the top of your .asp page :
<style type="text/css">
.style1
{
position:absolute;
left:12%
top: 50px;
}
</style>
Block elements can be aligned by setting the left and right margins to auto. Setting the left and right margins to auto specifies that they should split the available margin equally. The result is a centered element:
margin-left:auto;
margin-right:auto;
Read about Horizontal Alignment.
Put the textboxes into a div with centered text:
<div style="text-align: center;">
...
</div>
In order to understant web development, you need to know basic concepts of HTML and CSS.
I would recommend you to learn some HTML and CSS first, you can google it or go to w3schools.
Everything will be easier.
Related
I created a jsFiddle which shows the chosen-select control being 'truncated' by it's parent div. And even though the overflow is set to hidden for the y-axis, it's showing the scroll bar anyway when clicking on the chosen-select control.
The height of this parent div is fixed and set to 200px, and needs to remain this way.
How can I make chosen-select go over the parent div when clicked upon?
EDIT: jsFiddle updated with more CSS.
If I comment the div.content, it doesn't mess up the layout.
The chosen-select control is now on top of the 4th header. In this fiddle I can still select the chosen-select control, but in my application I can't.
Is there something I need to do for the header's positions?
EDIT2: jsFiddle. I just noticed that the chosen-select control stays on its place when heading 1/2 are sliding up. For the record, this doesn't happen in my application.
What does happen, is when you slide up the 3rd heading, chosen-select control is visible until it's slided up all the way. Unlike the other heading's, where the input's are slowly hiding.
Simply add this CSS class:
Added border to show you the definition of your other box is staying fixed.
div.content {
position:absolute;
}
View Here: http://jsfiddle.net/SinisterSystems/e62Wu/3/
When you select position:absolute, you are effectively telling it to ignore the constraints of your fixed parent div and be able to bound outside the box.
Does this answer the question? I can elaborate further if you'd like.
EDIT:
absolute positioning will remove it from the flow of the rest of the document and treat it as if it didn't exist (it displays where you tell it to, but will not modify other element flow).
Try just adding a spacer like so:
CSS:
div.filler {
height:30px;
}
HTML:
...
<div class="filler">
<div class="content">
<select class="chosen-select">
...
FIDDLE: http://jsfiddle.net/e62Wu/7/
ANOTHER Edit:
Try this:
JS Fiddle: http://jsfiddle.net/SinisterSystems/e62Wu/10/
Add CSS:
.hider {
position:static;
}
Add ID in HTML:
<div id="dropper" class="heading">header 3 <span class="glyphicon glyphicon-chevron-up pull-right"></div>
Add jQuery if/else:
if($this.attr('id')==='dropper'){
$('.content').toggleClass('hider').toggleClass('content');
}
I added
border: 1px solid black;
to the parentbox, and removed "overflow: hidden" and the dropdown stays in front of the div.
It was not based on any prior knowledge, just dumb luck. I was trying to figure out the exact borders of the divs...oh well.
It's always something...
I'm using the Twenty Fourteen theme in my WordPress web site. On one of the pages I want to add images on the left side of the content area (menu sidebar is to the left of that) such that the text wraps around the image.
I have added two images (near the third and fourth H4 tags, if you take a look at the page) and both of the images are being forced behind the left sidebar due to the theme's -168px margin-left setting on the image's parent figure element.
On the page, if you use an Element Inspector/FireBug/whatever, you'll see the images nested in figure elements in the code and that it's way off to the left behind the sidebar. In the Rules viewer, it's showing a margin-left: -168px on classes ".full-width .site-content .wp-caption.alignleft"
I added my own class to the images to try to offset the margin by using margin-right: 168px, but it's not having an effect, presumably because the -168 left margin setting is on an element that is a parent of the image.
I don't want to select all figure elements to offset that -168px - I may want that for other figures - I don't know. WP adds an ID to each image, but I don't want to have to select each and every image ID (unless that's the only way), so how do I handle this?
Thanks for anyone's help.
Remove the .alignleft class from the figure's html.
This will remove the margin.
To get the text to flow around the figure you need to give it a property of float: left and add some right and left margin to make it look a bit nicer.
html for the figure (your image) should read:
<figure id="attachment_10" style="width: 88px; float: left; margin: 0 20px 0 10px;" class="wp-caption">
I'd say you should look at styling elements in css stylesheets as opposed to defining your styles in html.
A book for you would be:
HTML & CSS: Design and Build Web Sites
By Jon Duckett
Its what I used when I first started CSS. Its got all you'll most likely need for a while and very beginner friendly...
After some more fiddling around looking at the CSS and trying some settings I realized that I kind of answered my own question. I said that the figure element that the image is in has a setting of margin-left: -186px;. All I had to do was add my own CSS: figure { margin-left: 0px; }. Why I didn't see that sooner, I don't know...
I've made a JSFiddle to show what I'm working with:
http://jsfiddle.net/BA6hJ/
#rightcolumn {
width: 50%;
float: left;
In the #rightcolumn, everything is floated left, but the PayPal forms appear on top of one another instead of next to one another. Is there a reason why this is happening? Something to do with the tag in general? Not quite sure.
Also, is there a way to position things side by side in the right column if everything is floated left?
Thank you for any help!!
Demo Fiddle
You could use the CSS:
form[action='https://www.paypal.com/cgi-bin/webscr']{
display:inline-block;
}
I would tend to recommend replacing the [action= selector with a class assigned to the forms for this specific purpose however.
As long as the parent container is wide enough, the forms will display side by side.
You should use float on the form it self like this -
<form style="float:left" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
http://jsfiddle.net/BA6hJ/1/
I am trying to create a simple black box that spans the top of my web page.
Currently I have this:
<canvas id="block" align="center" height="250" width="5000"
style="border:1px solid #000000;background:#ffffff;position:absolute;top:-100px;z-index:10;">
Initially I tried making it a percentage, but it's far too complex for me.
I need to prevent the box from causing the page to scroll to the sides.
I'm sure this is a very simple thing, probably the main issue I am having is not knowing what to search for.
I have been googling for 2 hours now.
Yo can simply use overflow:hidden
example:
<div style="overflow:hidden; width:200px; height:200px;position:relative;"></div>
Watch the demo: jsFiddle Live Demo
I am trying to create a simple black box that spans the top of my web page.
If you're trying to accomplish this then all you need to do is the following:
<div style="background-color:#000;height:10px;width:100%;"></div>
and place it directly under your opening <body> tag.
I'm confused as to why you are setting width:5000px; on a canvas, if you're expecting to make a canvas element wider than the viewport and still not allow scrolling then you need to set overflow:hidden on the body element.
body {
overflow:hidden;
}
If the unwanted scrolling is due to user pressing arrow keys in your application, then you should be telling the browser that you are handling the arrow keys yourself by executing:
event.preventDefault();
in the handler for keyboard events.
Additionally html {overflow: hidden} might work too.
I'm having a tuff time centering the navigation of my website with the content body. I'd like the navigation to center with that instead of the browser because it looks like its a bit left of the content body and doesn't quite look right.
Is that possible. http://www.bryananthonylewis.com/ Just a simple blog with Twitter Bootstrap.
I think you're on the wrong track here..
a quick scan using chromeinspect shows me you use span8 offset 2 for your main content (the first element within your container element right beneath #modal-contact), and i think you're main content is a bit to the right and not the header to the left.
my quick fix:
remove the offset,
and get a css style on that content with:
float: none;
margin: 0 auto; /*replace 0 for top margin*/
putting a width to the container as Pankaj suggests might work too, although you might loose dynamic width changes provided by bootstrap this way... didnt check so i might be wrong on that part
update
another update to clarify
remove previous fix.
in the container element right beneath your #modal-contact add a wrapping div,
not at the top of your page like i think you did...
<div class="container">
<div class='row'>
<div class="span8 offset2">
blogcontent here
</div>
</div>
<div>
woops code tags were missing here
i get a feeling this should do the same thing.
and i also believe that the header needs the same fix. but i'm not 100% sure, so pls try and comment if it works or not. this update is based on the official docs
bootstrap documentation
if things don't work, forget about my suggestion and stick to what works
There is no problem with your header. Actually your content below is not centered and this is happening because of unwanted div with classes "span8 offset2 middle" right under div.container. Fix this by removing that div altogether and overriding .container in your css file by
.container {
width:777px;
}
an example of same edits inside web inspector of chrome
If you refer to the following screenshot:
You will see that everything is lining up perfectly except, the icon does not have a width that is calculated in the centering. You obviously want the icon TO have width.
So how can we do that?
Perhaps add something to the i tags like so:
i {
display: inline-block;
width: 14px;
height: 14px;
line-height: 14px;
vertical-align: text-top;
}
UPDATE:
The screenshot above points to the problem. After a media query, the site goes into tablet mode and the navigation is off. Now, back to work!