I don't even know where to start on this one. When I resize below 1600px the site breaks 100% even though it has media queries in place to resize/hide/move elements. But to pinpoint one issue that eludes me, I have a logo in an id that is set to a height of 175px and width to auto. At any browser size it's always a height of 564px. Check out some code below:
img #fpa-logo {
bottom: -25px;
height: 175px;
margin-left: 12.5%;
position: absolute;
width: auto;
}
<div class="row">
<div class="col-sm-12 nav" id="nav-w-back">
<div class="col-sm-5 fLeft">
<img src="../images/FPA-logo-new150-02.png" alt="FPA Logo" id="fpa-logo">
</div>
<div class="col-sm-7">
<ul class="nav fRight" id="nav-ul">
<li>Home</li>
<li>Services<span style="font-size: .75em"> ▼</span>
<ul>
<li>Personalized Care</li>
<li>Health Care Services</li>
</ul>
</li>
<li>Links<span style="font-size: .75em"> ▼</span>
<ul>
<li>Patient Information and Forms</li>
<li>Patient Friendly Sites</li>
</ul>
</li>
<li>Staff Bios</li>
<li>Careers</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
If you're interested in more code - the test site is: http://fpacny.com/index_test.php where you can play with the sizing etc. At this point you would likely notice that the main image background only resizes properly when an inline HTML style addition of:
style="height: auto; width: 100%;"
is added. Otherwise, that breaks too.
Why won't my linked CSS override this? I've never had this issue on any website I've developed and it is driving me absolutely nuts!
JSFiddle: https://jsfiddle.net/hjo8pLxe/
You need to write
img#fpa-logo
to target the logo.
Edit: Just saw you are using bootstrap 4: Why not use the "img-fluid" class on the image? Then it won't get too big and scale down automatically if the row/column gets smaller.
<img class="img-fluid" {...} >
Or do you need any special behaviour, other than automatic resizing?
And you should also look more into the column features of bootstrap, you are using a lot of position: absolute in your css which is not needed at all for your design and would prevent a lot of errors if you would use bootstrap instead.
Change your ccs to
img#fpa-logo {
bottom: -25px;
height: 175px;
margin-left: 12.5%;
position: absolute;
width: auto;
}
Related
Hello all I'm trying to add a logo to my navigation bar using HTML and CSS I have managed to get an image loaded on to my nav bar but it is way to big as seen in the picture.
<div class="nav">
<div class="container">
<ul class="pull-left">
<img src="images/test.png">
<li>Home</li>
<li>How to</li>
</ul>
<ul class="pull-right">
<li>Sign Up</li>
<li>Log In</li>
<li>Help</li>
</ul>
<div class="clear"></div>
</div>
</div>
Well, there are several options.
First is to resize your image with any of editors like Photoshop and others.
Second is to set your image width and height via css:
.pull-left img {
display: block;
width: 30px; /* here put your width */
height: 30px; /* here put your height */
}
But if your logo image not going to scale to it's initial size according to your design and media queries, you should take the first approach. It will reduce file size as well.
I am using the pagination component in bootstrap, the pagination itself is simple:
<ul class="pagination">
<li class="disabled"><span aria-hidden="true">«</span></li>
<li class="active">1 <span class="sr-only">(current)</span></li>
</ul>
However I want to show the metadata like total pages, total records beside the pagination, and I want the information can be aligned at middle by the pagination control.
And I can not add the page information inside the ul element since it is generated by a third-party library.
I have tried this:
http://plnkr.co/edit/abVwf6rnluYKiOOzXNrt?p=preview
As shown it does not align as expected.
And it seems that I can set the padding or margin for the div.pageinfo or set the height and line-height, but I wonder if this is possible without harding coding
The Problem
There are two main issues to contend with:
One issue blocking you from being able to move your blocks around is that you had the wrapping div with an inline-style of display: inline-block and Bootstrap classes like pull-left which were forcing your elements to display as they were.
The need for IE8 support will make it difficult at best to provide the same experience for your users without a hit to the performance of your site.
Recommendation
The expectation to have websites render identically in IE8 as to their modern counterpart is more or less unreasonable in this day and age. The number of hoops you'll have to jump through to do that is pretty insane. Bootstrap itself is also deprecating IE8 support as of Bootstrap 4. The only way I'd see a reasonable case for this is if there was Google Analytics data to show that a majority of your users are on IE8.
So the best thing you can do is to either (1) recommend that the pagination items are limited to X number so that it fits a certain width and update the fixed width every time something is added, or (2) accept graceful degradation of your site on IE8 in order to provide a better experience for what I am assuming is the majority of your users on modern browsers.
Solution: Modern Browsers
The easiest way to achieve what you want is to utilize flexbox. I've removed any unnecessary class names and included the simplest code sample below (that would primarily work in Chrome). The code with all the prefixes can be found in the demo, but this should get you what you want (minus IE8 and IE9).
Code (Demo)
HTML
<div class="text-center">
<div id="nav">
<div class="pageinfo">Total:xxx 1/xx</div>
<div>
<ul class="pagination">
<li class="disabled">
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="active">
1 <span class="sr-only">(current)</span>
</li>
</ul>
</div>
</div>
CSS
#nav {
display: flex;
justify-content: center;
align-items: center;
}
.pageinfo {
margin-bottom: 5px;
margin-right: 10px;
}
Update: IE8 Solution
Here is a demo for an IE8 alternative that utilizes blocks in order to achieve the effect. However, while I know that you specifically requested not to hard code the size of the elements, that is not something (to my knowledge) that can be avoided due to the need to support legacy browsers like IE8.
The key thing to understand is that legacy browsers are far less intelligent than their modern counterparts. The only other alternative I can think that you can try is to use JavaScript to determine the width of the element dynamically, but it begins to be a lot of effort and impacts performance as well.
HTML
<div class="text-center">
<div id="nav">
<div class="pageinfo">Total:xxx 1/xx</div>
<div>
<ul class="pagination">
<li class="disabled">
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="active">
1 <span class="sr-only">(current)</span>
</li>
</ul>
</div>
</div>
</div>
CSS
#nav {
display: block;
width: 200px;
margin: 0 auto;
}
#nav div {
display: block;
}
.pageinfo {
float: left;
margin-right: 10px;
margin-top: 8px;
}
.page-menu {
float: left;
}
.page-menu ul {
margin: 0;
padding: 0;
margin-top: 2px;
}
I hope you are looking for something like below,
/* Styles go here */
.mata-data {
display: inline;
position: absolute;
margin-top: 27px;
margin-left: 25px;
}
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap#3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="text-center">
<div>
<div class="mata-data">Total:xxx 1/xx</div>
<div class="container pull-left">
<ul class="pagination">
<li class="disabled"><span aria-hidden="true">«</span></li>
<li class="active">1 <span class="sr-only">(current)</span></li>
</ul>
</div>
</div>
</div>
</body>
</html>
My website has some serious issues when you resize it to the medium and small views. It looks great at full screen and mobile view but has some serious issues in the browser when you shrink it down to medium and below. I've used foundation but also mixed in some non-foundation code that I think is causing some issues, such as the container. I also suspect there is something wrong with the top nav bar, because that looks off at shrunk views as well. There is a lot of code to look at but i will post some snippets here as well as link to the main site so you can look through the full code.
Here is some of the top bar and also I have a container which is not part of the grid which might be throwing things off, as well as a weird header element that I coded some css for and if removed throws it off as well. Basically, my code is a bit of a mess, and I will be cleaning it up best I can once I figure out what is causing a lot of this mess up when the browser is resized. (ps. to see the rest of the code and css, please visit www.omegadesignla.com and inspect element, or ask me to paste a specific part, thanks! )
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<span><img class="logo" src="img/primarylogo.png"><span>
</li>
<li class="toggle-topbar menu-icon">
Menu
</li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li>About us</li>
<li>Contact us</li>
<li class="has-dropdown">
Services
<ul class="dropdown">
<li>Print Media</li>
<li>Web Development</li>
<li>Promotional Items</li>
<!-- <li class="active">Active link in dropdown</li> -->
</ul>
</li>
</ul>
</section>
</nav>
<div class="container">
<header>
<div class="row">
<div class="large-3 medium-3 small-6 small-centered columns"> <!-- large centered -->
<a id="topbutton" href="#" class="button large radius button">Take the tour!</a>
</div>
</header>
From debugging your site with firebug i see that the logo in the left top corner is a png with 720px width. Although you have class .logo width: 40% it makes the .title-area 720px width which breaks the layout.
try following additions to css:
.title-area {
max-width: 40%; //or whatever you need for your layout. px will work there, too
}
.title-area .logo {
width: 100%;
height: auto;
}
I'd also rewize the png to the needed size to save some kB to download.
I hope that helps.
Answered
I begin to think I am losing my mind...
Currently I'm trying to set up a simple top navigation which is margin-0-auto-ed in the header. It contains five children <li>-elements with each a width of 200px. If I can still calculate correctly, that equals 1000px in width.
But to hold all children the top <ul>-element requires 1016px width. I just don't get where this comes from. All margins, paddings etc. are removed by a CSS Reset.
Code is as follows:
HTML
<div id="header-wrapper">
<div id="header">
<ul id="head-menu">
<li class="head-menu-item">Navlink</li>
<li class="head-menu-item">Navlink</li>
<li class="head-menu-item">Navlink</li>
<li class="head-menu-item">Navlink</li>
<li class="head-menu-item">Navlink</li>
</ul>
</div>
</div>
CSS
#header-wrapper { width: 100%; height: 56px; position: relative }
#header { width: 100%; height: 56px; background: #111; position: absolute; }
#head-menu { width: calc(5*200px); margin: 0 auto;}
.head-menu-item { display: inline-block }
.head-menu-item-link { display: inline-block; padding: 20px; width: calc(200px - 40px); text-align: center }
Update 29.09.13
If anyone wonders, instead of commenting out the white spaces or going for some negative left-margins, I just used this syntax:
</li><li class="head-menu-item">Navlink
</li><li class="head-menu-item">Navlink
That has done it easily, without altering the code too much and keeps it clean.
The problem is inline elements add a extra space between each other because of the empty space on your html ( even a simple line-break ) here is your fix jsfiddle
HTML
<div id="header-wrapper">
<div id="header">
<ul id="head-menu">
<li class="head-menu-item">Navlink
</li><!--
--><li class="head-menu-item">Navlink
</li><!--
--><li class="head-menu-item">Navlink
</li><!--
--><li class="head-menu-item">Navlink
</li><!--
--><li class="head-menu-item">Navlink
</li>
</ul>
</div> </div>
display:inline-block is inserting spaces in between the li's (that is, displaying the white space shown in the HTML). You can see this more clearly if you put a background color on the li's.
or else if you just want your html to look neat, you can add a negative margin to the display:inline-block elements (to account for the gaps between them in html code), but it would work only if you have a kinda fixed layout, which rarely changes, and you are too adamant to mess up your code by removing spaces or adding comments
I don't have enough 'reputation' to comment, but I would like to restate something Vinícius Moraes said, WHITE SPACES in you code ie...
<div id="foo"></div>
<div id="bar"></div>
<div id="thing"></div>
as seen here by putting on different lines (creating a coded white space) can make a a dramatic effect, where putting...
<div id="foo"></div><div id="bar"></div><div id="thing"></div>
can create the desired effect, as I found after spending several hours wondering why my three 's where next lining when positioned perfectly with a jquery resize. Thank you again Vinícius Moraes for pointing out this rookie mistake.
I want the vertical border of the vertical tab to run on the whole page instead of finishing off where the tabs end.
however since I have given border-right on the tab it ends
with the last tab that is trending. Giving border-right to the content makes sure the height of the border is right but it spoils the spacing between tab and content.
HTML :-
<div class='tabbable tabs-left'>
<ul class='nav nav-tabs'>
<li class='active'>
All
</li>
<li>
New
</li>
<li>
Featured
</li>
<li>
Ending Soon
</li>
<li>
Trending
</li>
</ul>
</div>
This is not default Bootstrap behavior so you will have to modify the css a little. For this to work, the vertical tab <ul> and all of its parents should have the property height: 100%.
For html and body I would apply the styling directly but for the <div> and <ul> I would use custom class so as not to modify the Bootstrap classes to maintain expected behavior for eventual future use in other layouts.
Here is a demo.
The css to add:
html{
height: 100%;
}
body{
height: 100%;
}
.tabbable.tabs-left.full-height{
height: 100%;
}
.nav.nav-tabs.full-height{
height: 100%;
}
The html to modify:
<body>
<div class='tabbable tabs-left full-height'>
<ul class='nav nav-tabs full-height'>
...........