I am trying to do this:
and mine looks like this:
Not the most beautiful thing.
My questions are:
We have a header with logo, search bar, menus and a button. How can i stack them all inline?
On the div with the background image - how can I position the headline like the one in the original site?
1) Have a look at the Navbar component documentation. Items should already be inline if implemented correctly. You can use the navbar-left and navbar-right classes to position items in the navbar.
2) You'll notice the large centre text starts at the same position as the navbar logo. This is because of the container class. I suggest you analyse some examples to see how to correctly implement the container.
After that, if you're still struggling add your styles.css to your pastebin post or better still create a Codepen - this would allow someone to be more helpful.
1- you can write float:left; or float:right; ? look for this float
2-for position an element you must create a relative div later inside create absolute div.. and you can specify settlement coordinates with top right bottom left.. look here position
I would say float is not good practice to use . Unless you really have no choice to use.
But based on how I look at it.
It's achievable using flex.
Put a display:flex on your main div
Then as for your other elements . Use display:flex-grow
It's advantageous using flex. , not only it wil solve your problem. It makes your site responsive.
Cheers
[![if you need all navigation item in one line. you have to make display:inline-block,for navigation.
change your code to:
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 nav-wrap">
<ul class="pull-left"><li></li>
</ul>
<ul class="pull-left">
<li class="formSearch">
<input type="text" placeholder="Find Freelancers" id="searchButton">
</li>
<li>Browse</li>
<li>How it works</li>
</ul>
<ul class="pull-right">
<li>
<a href="#" class="signupHover">
<span class="icon signup"></span>
<a href="#">Sign Up
</a>
</a>
</li>
<li>
<a href="#" class="loginHover">
<span class="icon login"></span>
Login
</a>
</li>
</ul>
<button type="button" id="buttonHeader">Become a freelancer</button>
</div>
/*add below css*/
.nav-wrap ul li{display:inline-block;}][1]][1]
Related
I am trying to add a div tag to show after the <ul>. But the div keeps showing alongside the list items.
I have tried putting the <ul> to block display, and even wrapping it with a block level div tag, but the other div element still shows along side. Can anyone please help me fix this? Thanks!
<section id="sub_nav_wrapper">
<div>
<ul class="unordered_style_nav">
<li class="sub_nav_list_item"> Job Overview </li>
<li class="sub_nav_list_item"> Job Description </li>
</ul>
</div>
<div class="job_info_container">
This element should show below the ul class above
</div>
I think you should use
#elementId {
clear: both;
}
to achieve the goal.
You could change the css of one or the other to dominate the row or just put a <br> tag underneath the first <div>.
I am facing a big css problem
I made a MDI system in html/jquery.
Inside the window clientzone I add html code with an ajax request and the use of the append method.
All is working fine.
My problem is about the code Inside the client zone.
You can see it here : http://jsfiddle.net/2P4Mb/1/
<div id="windowClientZone" style="height:300px; background-color:red; overflow:hidden;">
<div id="ajaxHtmlAppendedCode">
<h1>Title</h1>
<div id="ContentToBescrolled" style="overflow:scroll; background:yellow;">
<ul id="MediaExplorer" class="gallery">
<li class="DraggableItem">
<div/>
</li>
<li class="DraggableItem">
<div/>
</li>
<!-- ... -->
<li class="DraggableItem">
<div/>
</li>
<li class="DraggableItem">
<div/>
</li>
</ul>
</div>
</div>
I have a content made with two parts : a title, and a wrap panel based upon an UL with floating.
I want the ul control to be scrollable and the title stay always visible.
i tried a lot of things with overflow/position asbolute but i not able to find a solution.
the ul zone is always greater than the window client zone.
Is there a way of making that easily ?
Thanks for your help
I am using jQuery Mobile to create my mobile application. I have a plus button which appears like this:
The issue is that it is down, touching the list item. How do I make the button positioned midway between the list item and the horizontal line above it? I attempted to use absolute positioning using css, which did not work.
Here is my code:
<span style="float:left;color:black;font-weight:bold;font-size:24px"><label for="newpostbutton">Posts</label></span>
<span style="float:right;"></span>
<br>
<ul data-role="listview" data-inset="true" id="threads">
<li>No conversations :(</li>
</ul>
Any help would be appreciated :D
nshah, you can always give your button a negative margin-top and play around with the numbers. But it looks like there is probably more going on with the default button styles. I would look there first.
margin-top: -15px;
The floated elements needed to be cleared.
div {
overflow:hidden;
}
<div>
<span style="float:left;color:black;font-weight:bold;font-size:24px"><label for="newpostbutton">Posts</label></span> <span style="float:right;"></span>
</div>
<ul data-role="listview" data-inset="true" id="threads">
<li>No conversations :(
</li>
</ul>
http://jsfiddle.net/g9UM4/2/
I'm having problems trying to align an image with a header inside a navigation menu. Ideally, everything should be align at the bottom. I have created a jsfiddle to reproduce the issue:
http://jsfiddle.net/graphicsxp/j2t9R/
<nav style="float: left">
<ul class="menu">
<li>
<a href="index.html" class="logo">
<img src="img/logo.png" alt="" class="brand logo_def" width="125" height="39" /></a>
</li>
<li>
<h4 >Sam</h4>
</li>
</ul>
<div class="clear"></div>
</nav>
<nav>
<ul class="menu">
<li class="current-menu-parent">ACCUEIL
</li>
<li>PAGES
</li>
</ul>
<!-- .menu -->
<div class="clear"></div>
</nav>
</div>
</header>
as is:
to be:
I solved the problem using your code, and honestly I couldn't tell you what I changed because there is way to much code going on for such a simple task. Here it is anyway
I also took the liberty of making a new one, showing how simple your code could look
Simple, clean, easy to read. All done with one <div>, and an unordered list.
Simplifying your code and making it easy to read should be a primary goal in coding no matter what, but it also helps users answer your questions quicker, easier, and better help you with questions you have.
Temp fix can be as:
add css for h4 element.... better to give id and then add.
I have seen your fiddle, please put below code in your css
h4{
margin-top:150px;
}
or
(Give id=hompageheaderUserName to h4 of sam)
h4#hompageheaderUserName
{
margin-top:150px;
}
Change width a/c to your need.
Screenshot from fiddle:
So at the top of my page I have a title and a facebook logo. Here's a working example: fiddle
So everything is in a neat row at the top of the page. However, I want the logo and the text Join us on... to be on the right side, and the heading stays where it is. I've tried adding class="pull-right" to the 2nd and 3rd <li> elements, like this. But you can see how that really screws up the vertical alignment. Other than the alignment that's how I want it to look.
Any ideas on how to fix the alignment?
You can apply the pull-right on the li. Also, H4 will cause a break so, you should put the img and "Join Us..." inside the H4.
Try this:
<ul class="inline">
<li><h3 class="muted">Heading</h3></li>
<li class="pull-right">
<div class="media">
<h4 class="media-heading">
<a href="#">
<img src="http://cache.boston.com/universal/site_graphics/facebook/facebook_logo_36x36.png" style="max-width:100%;" alt="Join us on Facebook" />
</a>
Join Us on Facebook
</h4>
</div>
</li>
</ul>
you should add another element and give it "pull-right" class. Your join us code should be in that .
So you should have like this;
<ul>
logo
</ul>
<ul class="pull-right">
join us
</ul>