What I am trying to do is center my title in the middle of the page. It is inline with the search bar and is centering based off of the distance from the edge of the search bar to the other side. How can I make it so it ignores where the search bar is? https://jsfiddle.net/nyvxhb4h/, so in the jsfiddle the nav menu is centered, so the title should be right above it. Thanks -Kyle
Here is the problem area I think incase jsfiddle link stops working:
#head {
margin: 2% auto 2% auto;
text-align: center;
}
#head h1 {
display: inline;
}
<div id="head">
<h1> Title </h1>
<form action="test.asp" style="float:right; margin-right: 3%;">
<input type="text">
</form>
</div>
Move your form before the h1 and update its CSS to position:absolute; right:0. https://jsfiddle.net/nyvxhb4h/1/
<div id="head">
<form action="test.asp" style="position:absolute; right:0; margin-right: 3%;">
<input type="text">
</form>
<h1> Title </h1>
</div>
Related
What I need to do is a bit complicated to explain, but I'll do my best. I need to fit 3 different divs in one page, but my left div needs to have more space than the others, so aligning side by side is impractical, as is one on top of each other. I need one bigger div on the left, and the other two stacked on top of each other on the right. But I can't merge these two divs into one and float it. Because I need the top one to be vertically aligned on top of the left one, and the bottom one vertically aligned on bottom of the left one, while these 2 (top and bottom) need to be aligned on their right. Not sure if I was able to explain, so here is an image illustrating what I want to accomplish:
So, you see, left one taking most of the space, smaller ones aligned on top and bottom, while also aligned on their right side, and a blank space between then. Here's the code I already have:
<div style="display: inline-block;">
<h3>Left Div</h3>
<input type="text" name="name">
<input class="button" type="submit">
</div>
<div style="display: inline-block; vertical-align: top; width: auto; padding-left: 20px">
<h3>Top right div</h3>
<input type="text" name="name2">
</div>
<div style="display: inline-block; vertical-align: bottom; width: auto; padding-left: 20px;">
<h3>Bottom right div</h3>
<input type="text" name="name3">
<input class="button" type="button" onclick="window.location.replace('url')" value="Cancel">
</div>
I'd also like to say that in the middle of the way (when I only had 2 divs) it was working the way I wanted to, the problem arose when I added the third div, so I think that's where the problem is at. Please note that I'm new to html, I'm sorry if this is just a simple fix.
I think the key is the equal height part, which you can use CSS3 flexbox to solve it. For the right side top / bottom divs, you can wrap the two divs into another div. See the simple demo below.
jsFiddle
div {
border: 1px solid aqua;
}
.container {
display: flex;
}
.left, .right {
flex: 1;
}
.right {
display: flex;
flex-direction: column;
justify-content: space-between;
}
<div class="container">
<div class="left">
<h3>Left Div</h3>
<br><br><br><br><br><br><br><br><br><br>
</div>
<div class="right">
<div>
<h3>Top right div</h3>
</div>
<div>
<h3>Bottom right div</h3>
</div>
</div>
</div>
this is just the way you want it to be.... as the images..
<html>
<head>
<style>
#i{
background-color:"red";
width:700px;
height:600px;
float:left;
}
#a{
background-color:"black";
width:600px;
height:300px;
float:right;
position:relative;
display:inline;
}
#b{
background-color:"blue";
width:600px;
height:250px;
float:right;
margin-top:50px;
position:relative;
display:inline;
}
</style>
</head>
<body>
<div id = "i">
<p>hello</p>
</div>
<div id = "a">
<p>hello</p>
</div>
<div id = "b">
<p>hello</p>
</div>
</body>
</html>
One way is to use negative margin. The inline-block element is what's making it difficult to have multiple divs on the same vertical axis, because both are lining up with the larger div. This works for what you're asking:
<div id = "left" style="display: inline-block;">
<h3>Left Div</h3>
<input type="text" name="name">
<input class="button" type="submit">
</div>
<div id = "top-right" style="display: inline-block; vertical-align: top; width: auto; padding-left: 20px">
<h3>Top right div</h3>
<input type="text" name="name2">
</div>
<div id = "bottom-right" style="display: inline-block; vertical-align: bottom; margin-left: -182px">
<h3>Bottom right div</h3>
<input type="text" name="name3" >
<input class="button" type="button" onclick="window.location.replace('url')" value="Cancel">
</div>
fiddle: https://jsfiddle.net/an9ra3mb/2/
I'm newbie with HTML and CSS. I'm struggling with (horizontal) element alignement and I would appreciate any help provided.
This is what I got so far:
http://jsfiddle.net/vayacondios2015/umpk0xht/
HTML
<div class="mainbody">
<h2>This is uppercase title</h2>
<div class="right">
Link1
Link2
</div>
<div class="left">
<form>
<label for="textarea">This is a comment about textarea</label><br>
<textarea rows="10" cols="80" placeholder="Example" autofocus required></textarea><br>
<label for="textarea"><span>Note</span>: You can only use <span>this</span> word in textarea!</label><br>
<input type="submit" value="Send"><br><br>
</form>
</div>
<div class="middle">
Link3
<select><option>Select1</option></select>
<select><option>Select2</option></select><br><br>
</div>
</div>
<div class="mainbody">
TOP
<img> Home<br>
©Company
</div>
CSS in a link jsfiddle above (couldn't attach it properly).
This is how I would like it to be:
http://i.stack.imgur.com/VCWcL.jpg + centered on the page.
I'm looking forward for HTML semantic correction also, if you have some extra time and will.
Try these css. I will help you check this link https://jsfiddle.net/35sgma83/
.middle {
text-align: center;
}
div.mainbody {
text-align: center;
}
I would highly recommend getting to grips with HTML and CSS. I won't add specific links as there are thousands upon thousands of excellent resources all over the web.
However to help you I have modified the HTML so it's a little more structured:
<div class="mainbody">
<h2>This is uppercase title</h2>
<div class="right">
Link1
Link2
</div>
<div class="left">
<form>
<label for="textarea" class="form-label">This is a comment about textarea</label><br>
<textarea rows="10" cols="80" placeholder="Example" autofocus required></textarea>
<span class="note"><strong>Note</strong>: You can only use <strong>this</strong> word in textarea!</span><br>
<input type="submit" value="Send" class="submit"><br><br>
</form>
</div>
<div class="middle">
Link3
<select><option>Select1</option></select>
<select><option>Select2</option></select><br><br>
</div>
</div>
<div class="mainbody">
TOP
<img> Home<br>
©Company
</div>
You'll notice that the text area has a class, the note that appears under it also has been put into a span. I felt it better to use the <strong> tag when highlighting the bold text. You could go one step further and add a class in your CSS just for bold text. That will allow for re-usability.
I altered the CSS so that the container div which has .mainbody has the text aligned in the center. The rest of the changes are:
div.mainbody
{
text-align: center;
}
div.mainbody h2{
text-transform: uppercase;
text-align: center;
}
div div.right{
text-align: right;
float: right;
}
div div.left form label{
text-align: left;
}
.form-label, .note
{
float: left;
}
textarea {
width: 100%;
}
.submit {
clear: both;
display: block;
}
I think that satisfies your picture. Check out the fiddle here: http://jsfiddle.net/phyjauhc/1/
HTML semantic correction
Can be done via the w3c Markup Validation Service
Add below css
div.middle {
text-align: center;
}
div.ft_body {
text-align: center;
}
And change bottom div class name to ft_body and update cols="80" to cols="100%" for textarea
I'm trying to get 'ADD' and the search box to sit next to each other, side by side and align them right.
I've checked out other answers and I have implemented an inline-block solution, they sit side by side (but for some reason it's not working on the fiddle). How can I align the elements to the right of their parent?
<div class="span6">
<h2 class="pull-left">TITLE</h2>
</div>
<nav class="span6">
<form action="/gateway" method="get">
<input name="search" size="10" type="search" placeholder="Search" results=5>
</form>
<a class="btn" href="/add">ADD</a>
</nav>
Fiddle
JSFiddle does not use SCSS by default. Expand the Languages menu on the left and choose "SCSS" instead of "CSS". This should result in the elements aligning side-by-side.
To align the nav to the right, make both span6's 50% width and float/text-align the nav right.
.span6{
float: left;
width: 50%;
}
nav{
float: right;
text-align: right;
...
}
Fiddle
Erik Gillepsie is right. Here is your Fiddle in CSS structure and with the correct HTML input tag: http://jsfiddle.net/6MY8g/
<input name="search" size="10" type="search" placeholder="Search" results=5 />
Edit: to align right (only the second div), add a class "right" to your div and make it float right.
Try This : just replace your code with this
<div class="span6">
<h2 class="pull-left">ARTICLE MANAGER</h2>
</div>
<nav class="span6">
<form action="/gateway" method="get">
<input name="search" size="10" type="search" placeholder="Search" results=5>
<a class="btn" href="/add">ADD</a>
</form>
</nav>
So, if i'm understanding you correctly you want the title "Article Manager" and the search box and the ADD link to all be on the same line. AND, you want the "Article Manager" to be on the left, and the search and add group aligned to the right, correct?
Create a container for your row, and put everything in it, and give it 100% width so it spans the entire width of the page. Then float the title to the left, and float the search box group to the right. Done and done.
<div class="header-container">
<div class="span6 title">
<h2 class="pull-left">ARTICLE MANAGER</h2>
</div>
<nav class="span6 search">
<form action="/gateway" method="get">
<input name="search" size="10" type="search" placeholder="Search" results=5>
</form>
<a class="btn" href="/add">ADD</a>
</nav>
</div>
http://jsfiddle.net/9p2VM/7/
Your CSS is not well-formed in the fiddle. Without changing a line of code in the fiddle ie. by just indenting the CSS properly, your code works fine.
This is how your CSS is:
.span6{
float: left;
}
nav{
white-space: nowrap;
.btn{
display: inline-block;
}
form{
margin: 0;
padding: 0;
display: inline-block;
input[type=search] {
margin: 15px 0 0 0;
}
}
}
Change it to:
.span6 {
float: left;
}
nav.span6 {
white-space: nowrap;
float:right;
}
.btn {
display: inline-block;
}
form {
margin: 0;
padding: 0;
display: inline-block;
}
input[type=search] {
margin: 15px 0 0 0;
}
And it works fine. See here->http://jsfiddle.net/9p2VM/8/
Hope this helps!!!
I am trying to design a header using bootstrap. I want to put a logo at the top, to the right of it, that is, at the header. And I want to place a bootstrap search bar at the right of the entire header. I've tried to float the search bar right, but however it gets placed right after the header text. So the image, header text and the search bar come one after the other and hence when I keep minimizing the browser window, they do not stack properly either according to bootstrap's responsive layout.
<div class="container">
<img src="http://www.computerclipart.com/computer_clipart_images/cartoon_computer_and_books_0521-1004-3015-4128_SMU.jpg" height="90" width="120" />
<h1 class="logo"> Resource Directory
<form class="form-search pull-right">
<div class="input-append">
<input type="text" class="span2 search-query">
<button type="submit" class="btn">Search</button>
</div>
</form>
</h1>
</div>
<div class="container">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<div class="container" style="width: auto">
<!-- Nav Bar Contents goes here, removed it to minimize the code -->
</div>
</div>
</div>
</div>
<div class="container">
<div class="hero-unit">
<h2><center>XYZ University - Academic Resource Directory</center></h2>
Welcome to the Academic Resource Directory of XYZ University. All the resources related to academics can be found here!
</div>
<hr>
<footer>
<p>© Copy 2012</p>
</footer>
</div>
And here is another custom made css file I added.
h1 {
font-size:1.8em;
}
h2 {
font-size:1.4em;
}
img {
float: left;
}
.logo {
font:2.5em Arial;
margin:0 0 10px 0;
padding-top: 35px;
width:auto;
color:#000;
height: 70px;
float: left;
}
body {
background: #fff;
font-family:Arial;
font-size:0.8em;
}
.clear {
clear:both;
}
When I try to float right, sometimes it comes in between the text and the image too or below the text. I want image at the left, text to the right of the image and search bar at the right end of the header aligned along the text. Please help me design my header.
You have the search form enclosed in your <H1>. Fix this then move forward with your CSS changes.
<h1 class="logo"> Resource Directory <!-- </h1> should be here -->
<form class="form-search pull-right">
<div class="input-append">
<input type="text" class="span2 search-query">
<button type="submit" class="btn">Search</button>
</div>
</form>
</h1><!-- Move </h1> so your form isn't enclosed -->
I am working on a photo gallery, each thumbnail is in its own DIV and floated to the left in a containing DIV. It has been displaying properly up until vertical thumbnails entered the equation. Now, when the next row should start, the first item of the following row is to the left of the last vertical DIV (thumbnail), rather than flush to the left of the containing DIV.
alt text http://tapp-essexvfd.org/images/capture1.jpg
Here is the CSS:
#galleryBox {
width: 650px;
background: #fff;
margin: auto;
padding: 10px;
text-align: center;
overflow: auto;
}
.item {
display: block;
margin: 10px;
padding: 20px 5px 5px 5px;
float: left;
background: url('/images/content_bottom.png') repeat-x scroll bottom #828282;
}
and the HTML:
<div id="galleryBox" class="ui-corner-all">
<div id="file" class="ui-corner-all">
<form name="uploadPhoto" id="uploadPhoto" method="post" action="" enctype="multipart/form-data">
<p><label for="photo">Photo:</label><input type="file" name="photo" id="photo"/></p>
<p><label for="caption">Caption: <small>Optional</small></label><input type="text" id="caption" name="caption"/></p>
<p align="center"><input type="submit" value="Upload" name="send" id="send" class="addButton ui-state-default ui-corner-all"/></p>
</form>
<a name="thumbs"></a>
</div>
<div class="item ui-corner-all">
<a href="http://tapp-essexvfd.org/gallery/photos/201004211802.jpg" class="lightbox" title="test1">
<img src="http://tapp-essexvfd.org/gallery/photos/thumbs/201004211802_thumb.jpg" alt="test1"/></a><br/>
<p><span class="label">test1</span></p>
</div>
<div class="item ui-corner-all">
<a href="http://tapp-essexvfd.org/gallery/photos/201004211803.jpg" class="lightbox" title="test3">
<img src="http://tapp-essexvfd.org/gallery/photos/thumbs/201004211803_thumb.jpg" alt="test3"/></a><br/>
<p><span class="label">test3</span></p>
</div>
</div>
You can use Inline-Blocks as described in this article:
The Inline-Block Thumbnail Gallery
The article solves the same exact problem you are having with thumbnails.
I also found this simple example using inline-block thumbnails. Note how the thumbnails wrap nicely and remain vertically aligned within their line.
UPDATE:
Here is another detailed article that tackles this problem with the inline-block:
Cross-Browser Inline-Block
As you can notice from these articles, it is a bit tricky to make it work cross-browser.
Two options:
Set a maximum height for the thumbnail DIVs, so that they layout correctly, regardless of whether they are horizontal or vertical.
Use "clear: left" to reset the float on the thumbnail DIV next to the vertical.
The default behavior appears correct, based on what happens when text flows around a floated DIV. Based on what you're trying to do, I would choose option #1.
you could try using css table displays for your divs...
ie.
#galleryBox {
display: table;
...
}
.item {
display: table-cell;
...
}
.row {
display: table-row;
}
so you'd have to add another div to wrap around the items in each row
<div id="galleryBox">
<div class="row">
<div class="item">image</div>
<div class="item">image</div>
<div class="item">image</div>
<div class="item">image</div>
</div>
<div class="row">
<div class="item">image</div>
<div class="item">image</div>
<div class="item">image</div>
<div class="item">image</div>
</div>
</div>