Float left to align elements horizontal [closed] - html

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I have left and right arrow buttons on both sides of the main content.
I set buttons as input type="button" and turn them into block element by display:block
and they all have float:left.
The thing is that they are placed in a desired position but with other elements on a different line like navigation menu, the buttons get pushed up/down to another row.
Can someone please take a look at my working sample here? JS BIN

Your question is not descriptive enough. I think you mean that the divs moves up to be in-line with menu. That is what I observed. I modified your code so that divs will start after menu and << button.
<ul class="nav-step">
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ul>
<input class="left" type="button" value="<<" />
<div style="clear:both;"></div>
<div class="pg-wrapper">
<div class="current" id="pg1">
<label>First</label>
<input type="text" />
</div>
<div id="pg2">
<label>Second</label>
<input type="text" />
</div>
<div id="pg3">
<label>Third</label>
<input type="text" />
</div>
</div>
Observe :
<div style="clear:both;"></div>
Hope this will be of some help.

Related

Why do we use div sometimes and sometimes not? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
Why is div written before an id in the first example? (please look below) and not written before class="my-form"> in the second example (please look below)? sometimes we use div and sometimes not. Can you give me the reason?
First example:
<div id="sidebar">
<p>Lorem ipsum dolor sit amet </p>
</div>
Second example:
<form class="my-form">
<div class="form-group">
<label>Name: </label>
<Input type="text" name="name">
</div>
<div class="form-group">
<label> Email </label>
<input type="text" name="email">
</div>
<div class="form-group">
<label>Message</label>
<textarea name="message"></textarea>
</div>
<input class="button" type="submit" value="Submit" name="">
</form>
You are writing HTML here.
In HTML you use tags to declare the elements of your document.
When you want to specify a first-order heading u can use the tag h1 like so:
<h1>My Headline</h1>
And that will be rendered as a heading by your browser.
So what about that div?
A div is just another html element, that describes a block on your page.
You can use divs for grouping and structuring other elements.
What about class?
In HTML you can use attributes to declare additional properties for your elements. One of those attributes is the class-attribute. It is used to tell your browser, which CSS-class(es) to use for styling an element.
Here I made up a css-class with the name "red-color" that assigns red color to its elements. In the html-code I use the class-attribute to use that style-class for the second heading.
.red-color {
color: red;
}
<h1>Default style heading</h1>
<h1 class="red-color">Custom style-class heading</h1>
You never use any attribute without an element (tag).
What about the intensions of your instructor?
Nobody knows, but you can ask your instructor.

Bootstrap radiobuttons in the same line [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
How can I make a radio-inline group of radiobuttons to align in the same line without stacking the class?
http://codepen.io/pablocgdev/pen/RKroZq
I was able to put the radiobuttons in the same line in your example just by adding the following css code:
.funkyradio-success {
display: inline-block;
}
Since your radiobuttons are inside a div, you need to make sure they don't have display:block (their default value) so that they can be rendered in the same row.
<div class="funkyradio">
<label class="radio-inline"> <p>Output</p>
<div style='display:inline;' class="funkyradio-success">
<input type="radio" name="radio" id="radio6" />
<label for="radio6">P123F</label>
</div>
<div style='display:inline;' class="funkyradio-success">
<input type="radio" name="radio" id="radio7" />
<label for="radio7">ASDF</label>
</label>
</div>
If you add the style display: inline to your div tags like I did, that should get you to the desired result. I used inline css but you might want to add it to your css file. display: inline will use only the amount of space necessary to hold your element.

bootstrap will not print [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I added bootstrap last minute, before I added it, page printed correctly. Now, it does not. Ive looked at the other answers to this question, but none seemed to directly apply to me.
<div class="row">
<div class="col-md-12">
<h2><span>Palette</span></h2>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<div class="pri-circle circle" data-palette-name="primary" id="color1"></div>
<div>
<form>
<input type="text" placeholder="#" data-picker-for="#color1" class="theme" />
</form>
</div>
</div>
<div class="col-sm-2">
<div class="pd-circle circle" data-palette-name="primary-dark" id="color2"></div>
<div>
<form>
<input type="text" placeholder="#" data-picker-for="#color2" class="theme"/>
</form>
</div>
</div>
</div>
If you added it last minute I suspect you added your bootstrap.css file last minute as well. If you have custom CSS that overrides bootstrap default you need to make sure your costum CSS file parses after bootstrap.css, so make sure your file order in your header is correct.

I have a link that I want to open in a new tab. As it is in a <div> I am unsure how to do this - I am new to php coding [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 8 years ago.
Improve this question
This is the code I currently have, that opens the link in the same page. I want to modify this to make it open in a new tab.
<div class="big-button" ">
<input type="submit" value="Link name" />
</div>
Use target="_blank" in your anchor
Use this :
<div class="big-button" ">
<input type="submit" value="Link name" />
</div>
I think you need this
<a href='URL' target='_blank'>xyz</a>
Give the your url as href attribute and give target attribute as _blank. It will open in new window
<input type="button" value="Click Me!" onclick="window.open('http://google.com')" />
Hint:
target="_blank" is not validate W3C.
Use this code in a tag:
onclick="window.open(this.href); return false;"

Match appearance of buttons [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I have two buttons (both working btw..I just need to change the appearance of them to match)
First button opens a print preview page, the second button opens the web browser print dialogue screen. I want to change the second button to match the first.
Is there anyway I can use a HREF on the second button and use an onclick...so it will use the same template for the button instead of fixing this through css?
First Button:
<div style="width:100%; text-align:right">
<a href='#Url.Action("Index", "Route", new { id = Id })'>
<button>Print Preview</button>
</a>
</div>
looks like:
second button:
<div style="width:100%; text-align:right">
<br />
<input type="button" value="Print" onclick="window.print();" />
</div>
looks like:
try this
<div style="width:100%; text-align:right">
<br />
<a onclick="window.print();">
<button>Print</button>
</a>
</div>