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>
Related
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]
Hello Im having problems with foundation 6. In my footer there is a social list with 4 icons(phone, email, twitter, facebook) I cant get them to stay centered on resize. On my PC it seems fine, however, uploaded onto the web and viewed on my phone(nexus 6) the icons are off center to the left. here is my footer code
<footer>
<!--social icons should be centered -->
<div class="row">
<div class="large-3 medium-centered columns">
<ul class="menu social">
<li>
<a href="http://www.twitter.com">
<i class="fi-social-twitter"></i>
</a>
</li>
<li>
<a href="http://www.facebook.com">
<i class="fi-social-facebook"></i>
</a>
</li>
<li>
<a href="tel:12345678901 ;="">
<i class="fi-telephone"></i></a>
</li>
<li>
<a href="mailto:info#example.com">
<i class="fi-mail"></i>
</a>
</li>
</ul>
</div>
</div>
<p class="text-center copyright"> All Rights Reserved Final FInal 2016.</p>
</footer>
The site is www.gastromob.com. I could really use some suggestions on how to improve this site. I'm having several problems, but I'd like to fix this one first, thanks.
The class medium-centered that you use is meant to center a column within a row; it does not center the text inside that column.
Foundation 6 recommends using the <div class="menu-centered"> wrapper around the <ul class="menu">. If you're using Flexbox, you don't need the wrapper and can add the .align-center class to the ul element instead. Please click here for more information.
Using the row and column wrapper seems unnecessary here.
You could write your code this way to achieve what you need:
<footer>
<div class="menu-centered">
<ul class="menu">
<li>
<a href="http://www.twitter.com">
<i class="fi-social-twitter"></i>
</a>
</li>
<li>
<a href="http://www.facebook.com">
<i class="fi-social-facebook"></i>
</a>
</li>
<li>
<a href="tel:12345678901">
<i class="fi-telephone"></i>
</a>
</li>
<li>
<a href="mailto:info#example.com">
<i class="fi-mail"></i>
</a>
</li>
</ul>
</div>
<p class="text-center copyright"> All Rights Reserved Final FInal 2016.</p>
</footer>
By the way, href="tel:12345678901 ;="" is incorrect and should be href="tel:1234567890" instead.
I've also looked at your site, and noticed that you set a fixed height for the element <div id="overlay">. As a result, when viewing the site on a small device, this overlay spills over and covers the elements below it. You should simply remove the fixed height to solve this problem.
The boat logo also obstructs the view when shrinking the size of the screen. You may want to make it responsive as well.
Other than that, all the other elements are responsive and look good!
So, I have this list contained within a specific id. I only want to manipulate the link colors for this specific id, which is #icon-header. So here is the problem:
I want the whole li element to be the link, but instead of having the background color change on hover, I want all of the text elements to to the color #2BA6CB. And no matter where the user clicks, I want the whole li element to be the link.
So, I was wondering if there was something wrong with where I am putting the a tag, and also what your suggestions were for the css of it all.
The i tag is a webfont. I need that to change with the h4 and the p tag all at the same time when the user hovers over the li.
Any help would be amazing. Here is the html:
<div class="row hide-for-small" id="icon-header" align="center">
<ul class="large-block-grid-6 small-block-grid-1 medium-block-grid-6">
<li></li>
<li>
<a href="#">
<i class="fi-male size-60"></i>
<h4>Ready</h4>
<p>Create a personal health and fitness profile.</p>
</a>
</li>
<li>
<a href="#">
<i class="fi-checkbox size-60"></i>
<h4>Set</h4>
<p>Set goals and chart your progress.</p>
</a>
</li>
<li>
<a href="#">
<i class="fi-upload-cloud size-60"></i>
<h4>Go</h4>
<p>Upload your exercise data from anywhere.</p>
</a>
</li>
<li>
<a href="#">
<i class="fi-graph-bar size-60"></i>
<h4>Learn</h4>
<p>View real results and develop healthy patterns.</p>
</a>
</li>
<li></li>
</ul>
</div>
You need to give the a-tag the dimensions (width & height) of the li Element instead of styling the li Element. Then you will have the effect, that you can click the whole highlighted area instead of only the link.
To give an inline element like ´a´-Tag a width and height you need to give it ´display:block;`.
Make the 'a' tag display: block in the css. Note that wrapping an anchor tag around block level elements is only allowed in html5. Older specs explicitly disallow it.
I am having issues with my navigation collapsing into the body of my site and I would prefer it to remain fixed when the browser window is re-sized. I have tried adjusting the min/max-widths of the bootstrapresponsive.css but it still seems to disappear into the body. Any help would be amazing. Cheers! I have posted the code below:
<div class="navbar" style="padding-bottom:0px;">
<div class="navbar-fixed-top">
<div class="container" style="width: auto;">
<div id="logo"><img src="images/CoHlogo.jpg" class="logoImage";></div>
<div class="nav-right">
<!--Social Networking-->
<a class="socialNav" href="mailto:info#classroomofhope.org?subject=Website Inquiry"><img src="img/social/mail.png"/></a>
<a class="socialNav" href="http://www.youtube.com/user/Classroomofhope" target="_blank"><img src="img/social/youtube.png"/></a>
<!-- Twitter
<a class="socialNav" href="https://twitter.com" target="_blank"><img src="img/social/twitter.png"/></a> -->
<a class="socialNav" href="https://facebook.com/ClassroomOfHope" target="_blank"><img src="img/social/facebook.png"/></a>
<!--Google plus
<a class="socialNav" href="https://google.com" target="_blank"><img src="img/social/googleplus.png"/></a> -->
<!--Donate Button -->
<img src="img/donate_header.png" class="donateImage";>
</div>
<div class="nav-collapse" id="nav-collapse">
<ul class="nav" id="nav">
<li class="dropdown" id="about">ABOUT US
<ul class="dropdown-menu">
<li id="values">OUR VALUES</li>
<li id="journey">OUR JOURNEY SO FAR</li>
<li id="founder">MEET THE FOUNDER</li>
</ul>
</li>
<li id="education">WHY EDUCATION?</li>
<li id="projects">PROJECTS</li>
<!--<li id="media">MEDIA CENTER</li>-->
<li id="donate">DONATE</li>
<li id="contact">CONTACT US</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Removal of the class .nav-collapse from one of the <div> elements solves this problem. As the name of the class suggests, an element with this class will become hidden on smaller screen sizes (I think below widths of 979px is what the stylesheet says?), by receiving height:0 and overflow:hidden via media query.
Here's a JSFiddle (with externally-loaded Bootstrap CSS) that demonstrates how layout would appear without this class. Try resizing the Result pane to see how it would look at different screen sizes.
I hope this is what you were looking for! If not, let me know and I'll be happy to help further.
(Edit:) On taking a look at your live environment, I can now see that when you say "collapse", you mean the navigation links break to a new line as the parent element becomes too small. This is standard behaviour for floated elements. To stop this from happening, you can try applying min-width:1200px or something to that effect to the .container element (inside of .navbar-fixed-top). Hope this helps!
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: