EDIT: I've made a few changes, based on suggestions, but the problem is persisting on IE, and I don't think I'm doing anything too fancy for IE. I'm not sure what's getting lost in translation.
I'm working on an assignment for class, where we're using html & css to make a web page.
I'm trying to create a horizontal nav bar at the top of a web page, and I've gotten the navbar to behave mostly how I'd like. The problem is that I want the text of the link snug against the bottom of the nav bar, but the area of the link is doing one of two things depending on how I approached the problem (EDIT: Now only happening in internet explorer).
My first instinct was to use vertical-align, but I have since read in 5 or 6 threads that it does not work on inline elements.
I have toyed around with altering the height and line height, to try and get an alignment that works (text at the bottom of the link), but that has ended up pushing the text, AND the area of the of the link down past the nav bar.
I've also tried toying with the padding-bottom, to try and see if I can adjust that, and one way or another, and I've only been able to push the link further upward with that.
I've been researching around for something that can help me find a fix, and I've found a lot of articles that are close but no cigar.
Some of the things I've looked at are (woops I guess I can only post two links):
Why anchor tag does not take height and width of its containing element
There was one about empty space beneath certain fonts, and there were several about tables, and several about vertical alignment.
This is where I'm at so far: http://jsfiddle.net/brezzen/w09q7h7y/2/
html:
<body>
<header>
<nav class="header">
<ul>
<li>Contact</li>
<li>Values</li>
<li>About</li>
<li>Home</li>
</ul>
</nav>
</header>
<article>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br /> bleep blorp bloop
</article>
</body>
css:
/* Debugging */
*
{
border: 1px solid red;
} */
/* Blocking & Defaults */
header, article, aside, figure, figcaption, hgroup, section, nav
{
display: block;
}
*
{
font-family: 'Kozuka Gothic Pro EL', 'Kozuka Gothic Pro', Myriad, Helvetica, sans-serif;
font-size: 100%;
color: white;
padding: 0px;
margin: 0px;
}
/* Body */
body {
background-color: #bbffff;
font-weight: normal;
position: relative;
min-width: 1000px;
max-width: 2000px;
}
/* All Navigation */
nav {
position: absolute;
right: 0;
top: 0;
width: 100%;
height: 82px;
background-color: #7396ff;
border-bottom: 3px solid #bbbbbb;
}
nav ul {
position: absolute;
bottom: 0;
right: 0;
left: 0;
padding-right: 10%;
list-style-type: none;
font-size: 125%;
}
nav ul li {
display: inline-block;
vertical-align: bottom;
float: right;
}
nav ul li a {
color: white;
text-decoration: none;
}
I don't know what's goin on, but the empty space hanging under the text is huge, so it's hard for me to believe that it's just a font quirk. I thought that moving text around inside of the area of the link would be a lot easier than this, and I think I've gotten in over my head here. Any help, or direction toward a good resource would be greatly appreciated.
line-height You are increasing the font-size to 125% and there is a "height" of each line of text that affects this. (http://jsfiddle.net/w09q7h7y/3/)
nav ul {
position: absolute;
bottom: 0;
right: 0;
left: 0;
padding-right: 10%;
list-style-type: none;
font-size: 125%;
line-height: 1;
}
There are several ways to align an element vertically. If it is only one line of text within an element, the easiest way is to set the line-height the same with the height of the element.
It is not a good practice to use % to set the font-size. Instead, use px, em, or rem.
nav ul {
height: 1.5rem;
}
nav li {
margin: 0;
padding: 0 0.4rem;
height: 1.5rem;
line-height: 1.5rem;
font-size: 1rem;
}
Depending on how you organize your CSS, you might want to add styles to the anchor like this
nav li a {
margin: 0;
padding: 0 0.4rem;
height: 1.5rem;
line-height: 1.5rem;
font-size: 1rem;
}
as well. Pay attention to specificities.
Related
I'm super new to coding, and I can't for the life of me figure out why the hero image covers the other content, even using z-index.
Here is what the web page should look like but the hero image covers the logo, top nav bar, and header/description text about the first castle.
body {
margin: 0;
padding: 0;
}
* {
font-family: 'Open Sans', sans-serif;
}
header,
footer,
main {
width: 1040px;
margin: 0 auto;
}
h1 {
font: 700 30px 'Roboto Slab', serif;
z-index: 1;
position: absolute;
display: inline-block;
}
header p {
font: 18px/1.2 'Open Sans', sans-serif;
}
header ul {
font-size: 15px;
line-height: 1.2;
}
h2 {
font-size: 17px;
font-weight: 700;
line-height: 1.2;
margin: 0;
padding: 0;
}
div p {
margin: 0;
}
main p {
font-size: 13px;
line-height: 1.2;
}
h2,
main div p {
color: #fff;
}
footer ul {
display: inline-block;
margin: 0 auto;
list-style: none;
}
footer li,
header li {
float: left;
padding: 0 20px;
}
footer a {
font-size: 15px;
color: #666;
text-decoration: none;
transition: color .4s;
}
header ul {
display: block;
list-style: none;
}
header a {
color: #fff;
text-decoration: none;
transition: color .4s;
}
footer a:hover {
color: #000;
}
footer a:focus {
color: #000;
}
header a:hover {
color: #000;
}
header a:focus {
color: #000;
}
footer nav {
position: absolute;
top: 760px;
left: 460px;
}
main div:nth-of-type(1) {
display: block;
position: absolute;
left: 126px;
top: 658px;
}
main div:nth-of-type(2) {
display: block;
position: absolute;
left: 472px;
top: 658px;
}
main div:nth-of-type(3) {
display: block;
position: absolute;
left: 817px;
top: 658px;
}
main div {
background-color: rgba(0, 0, 0, 0.4);
padding: 10px 0px 5px 10px;
width: 310px;
}
.img1 {
position: absolute;
top: 0;
right: 110px;
z-index: 1000;
}
.img2 {
display: block;
float: left;
margin: 320px 10px 100px 15px;
}
.twitter {
position: absolute;
display: block;
top: 0px;
right: -335px;
}
.facebook {
position: absolute;
display: block;
top: 0px;
right: -295px;
}
/*.logo {display: block; position: absolute; top: 0; left: 0;
z-index: 2;}*/
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<!-- oxygwen, July 17, 2020 -->
<title>Castle Explorers European Tours</title>
<meta charset="utf-8" />
<meta name="description" content="The home page for Castle Explorers, a tour company that takes travelers to see famous castles in Europe." />
<link rel="stylesheet" type="text/css" href="main.css" />
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght#700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#400;700&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav>
<img src="http://via.placeholder.com/300" width="124" height="55" alt="Castle Explorers" />
<ul>
<li>UPCOMING EVENTS</li>
<li>SCHEDULE TOURS</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
<main>
<h1>Moritzburg Castle</h1>
<p>Enjoy the grandeur of this Baroque palace located on a beautiful lake in Germany.</p>
<img class="img1" src="http://via.placeholder.com/300" width="1040" height="400" alt="Moritzburg Castle" />
<img class="img2" src="http://via.placeholder.com/300" width="320" height="300" alt="Mont Saint Michel Abbey" />
<img class="img2" src="http://via.placeholder.com/300" width="320" height="300" alt="Eilean Donan Castle" />
<img class="img2" src="http://via.placeholder.com/300" width="320" height="300" alt="Neuschwanstein Castle" />
<div class="div1">
<h2>Mont Saint-Michel Abbey</h2>
<p>Visit the Normandy coast and this magical castle from the middle ages.</p>
</div>
<div class="div2">
<h2>Eilean Donan Castle</h2>
<p>Explore the 13th century castle of Clan Mackenzie where three sea lochs meet.</p>
</div>
<div class="div3">
<h2>Neuschwanstein Castle</h2>
<p>Be enchanted by the Bavarian castle that was the inspiration for Cinderella's Castle at Disney World.</p>
</div>
</main>
<footer>
<nav>
<ul>
<li>Privacy</li>
<li>Legal Notices</li>
<li>Press</li>
</ul>
<img class="facebook" src="facebook.png" width="17" height="24" alt="facebook link" />
<img class="twitter" src="twitter.png" width="26" height="24" alt="twitter link" />
</nav>
</footer>
</body>
</html>
Specs:
Summary
You are coding the home page for Castle Explorers.
Use any combination of positioning, float, and the box model to create the layout.
This layout could draw from any of the material in the course.
Specifications
Name the HTML5 file index.html
All of the CSS will be in an external file referenced via a link tag; naming this main.css or styles.css is a typical file name for a stylesheet used by an entire website (if we were to build out the site, which will not be happening, all the CSS would go into this one file).
In the head region of the page include a comment with your name and the date.
Provide a good meta description.
The attached screenshots provide the title tag value to use.
This layout is fixed width centered. It is 1040 pixels wide. Disable margin and padding on body (set them to 0).
Two Google Web Fonts are used. 'Moritzburg Castle' uses Roboto Slab and has a weight of 700. All other text uses Open Sans and is either 400 or 700 for weight.
As noted in the summary, your approach to this will involve any combination of positioning, float, and box model.
The graphics are all in the attached zip archive and screenshots are provided for Firefox, Chrome, and Edge.
As you explore the screenshots you may want to use a graphics program such as Paint.NET to determine placement of text, graphics, etc. There is a free version of that software you can download. Mac users could try Pinta. There are also dozens of other options. Some people like to use the Perfect Pixel browser extension to overlay a screenshot over your rendering.
'Moritzburg Castle' is an h1 that is 30px and has font-weight 700. As noted previously, it is the only text using Roboto Slab. The default line-height is fine to use there.
The text below it is 18px Open Sans with 1.2 line-height.
The top navigation is an unordered list. Text size is 15px with 1.2 line-height.
The text for the series of 3 castles (for their names) are h2 that are 17px, 700 font weight, and 1.2 line-height.
The text below those castle name h2's are 13px with 1.2 line-height.
I recommend using rgba(0,0,0,0.4) to create the transparency for the h2's and their additional text. The padding there is 10px on all sides except the right-hand side, which is 5px.
The footer links are also an unordered list, but because they are centered you may want to display those list items as inline-block. There is 40px between them, but keep in mind that inline-block will render a single space if it exists in the code, so eliminating white space between list items is recommended.
The footer links are 15px and their color is #666.
The top navigation and the footer links all change to #000 on hover and focus; give them a CSS transition of: color .4s ease-in
The social media icons don't need to be an unordered list; they can just be a pair of anchors containing the images. There is 15px of space between the icons, but if they are displayed inline-block remember to eliminate white space between those anchors to avoid introducing extra space.
All links will use href="#". The linked elements are:
Logo
Top Navigation
All four castle photos
Footer Navigation
Social media icons
Make sure that image alt attribute values are appropriate and descriptive.
HTML structural elements (header, main, footer, nav) need to be used appropriately.
Any ideas? Getting desperate because it's due in a few hours...thanks!
h1 {
font: 700 30px 'Roboto Slab', serif;
z-index: 1;
position: relative; << Change to this
display: inline-block;
.img1 {
position: absolute; << Remove this
top: 0;
right: 110px;
z-index: 1000;
This happens to you because you are using position: absolute; for your image along with the H1 text which makes the image appear above other elements you just have to remove that image position: absolute; and insert your h1 tag into the image div itself or make it position: relative;
Tell me if this fixes your issue I checked it with chrome dev tools :D
I want to have to click on a hamburger menu icon and then have the list display beneath my icon. I set up my hamburger menu icon with this style
.menu-btn div {
position: absolute;
left: 100%;
top: 64%;
padding-right: 8px;
margin-top: -0.50em;
line-height: 1.2;
font-size: 18px;
font-weight: 200;
vertical-align: middle;
z-index: 99;
}
.menu-btn span {
display: block;
width: 20px;
height: 2px;
margin: 4px 0;
background: #989da1;
z-index: 99;
}
The menu of options taht should appear after you click on the hamburger menu is
<div class="responsive-menu">
<ul id="menu">
<li>Vote</li>
<li>Search</li>
<li>About</li>
<li>Log In</li>
</ul>
</div>
but I'm unclear how to set up the style of the hamburger menu so taht it appears directly under the hamburger menu when you click on it. Right now, its appearing centered at the top of the screen -- https://jsfiddle.net/wtp1k57b/1/ . How do I set up such a style?
PS - I'm looking for a solution that doesn't rely on hard-coding numeric (e.g. top: 27px) pixel values. Certainly its good to get things to work in my little Fiddle, but in my broader application I can't guarantee how big or small that hamburger menu will be.
I would like to show a completely different approach without using display: flex.
HTML
Your approach uses too many wrappers in my opinion. You can definitely reduce the amount of divs. Moreover, you should always try to use semantic tags over general tags like div or ul. Consider looking at this article.
Hence, as #scooterlord already mentioned, you should use a button for the hamburger icon. Moreover, I recommend to use a nav instead of a list.
CSS
First of all, you should bundle the attributes for the same selector at the same place for the purpose of improved clarity. You should not have three sections where you apply the universal selector, but combine it into one. Moreover, do not set the box-sizing to a specific value, but rather set it to inherit, so you can always override this value for a specific element without having to do it for all of its children. Furthermore, I do not understand what you want to achieve with margin: 0 auto on all elements and body. It does not make any sense for me.
Since you do not want to use absolute positioning, I would strongly advise you to avoid using pixels as a measuring unit. They behave badly if some people change their default font-size because of poor eyesight or other reasons. Instead, consider to apply relative units like rem, em or %. By setting the root element's font-size to 62.5% you are still able to calculate as if you were using pixels (1rem = 10px).
As I already mentioned, I avoided to use display: flex for such a trivial thing. I do not understand why it should be used at this point. Therefore, I also had to change the positioning of the menu button. The navigation could be easily positioned using percentages for top and left.
As a side note: You should really try to only post the relevant CSS code - the first step for me was to remove all the irrelevant parts of it.
Final Solution
This is my final solution without Flexbox, without fixed sizes and without absolute positioning using px:
$('.menu-btn').click(function() {
$('nav').toggleClass('nav-open');
});
* {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
font-size: 62.5%;
}
body {
font: 1.6rem/1.4 Benton Sans, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, Tahoma, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
}
header {
width: 100%;
background-color: orange;
text-align: center;
padding: 1rem;
position: relative;
}
nav {
display: none;
width: 30rem;
padding: 5rem;
background-color: #ededed;
position: absolute;
right: 5%;
top: 100%;
}
.nav-open {
display: block;
}
nav a {
display: block;
width: 100%;
text-align: center;
padding: 1.4rem 1.6rem;
text-decoration: none;
cursor: pointer;
font-size: 2.2rem;
color: #000;
}
nav a:hover {
background-color: #111;
color: #fff;
}
.menu-btn {
position: absolute;
right: 5%;
top: 50%;
margin-top: -1.1rem;
display: inline-block;
cursor: pointer;
border: none;
outline: none;
background-color: transparent;
}
#media only screen and (min-width: 500px) {
.menu-btn, nav {
display: none !important;
}
}
.menu-btn span {
display: block;
width: 2rem;
height: 0.2rem;
margin: 0.4rem 0;
background: #989da1;
z-index: 99;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<h2>Page Title</h2>
<button class="menu-btn">
<span></span>
<span></span>
<span></span>
</button>
<nav>
Vote
Search
About
Log In
</nav>
</header>
Or see this fiddle.
Use the css properties: top and right to set the position of the element under your icon.
#menu
{
position: absolute;
top: 48px;
right: 2px;
background: #ededed;
list-style-type: none;
}
Use this CSS for your menu - no margin, and the position defined by the top and right settings:
#menu {
position: absolute;
width: 300px;
margin: 0;
padding: 50px;
background: #ededed;
list-style-type: none;
-webkit-font-smoothing: antialiased;
top: 50px;
right: 0;
}
https://jsfiddle.net/meuexde6/
I left out the transition for the testing, but you should basically animate the right parameter from -100px to 0 to achieve what you seemed to have in mind.
ADDITION AFTER COMMENT:
To define the position of the menu in relation to the button, you have to apply position: relative to their common parent element, .mobile-nav. The position values of an element with position: absolute always relate to the first ancestor which has position: relative.
I changed the values in my updated fiddle accordingly to these:
#menu {
position: absolute;
width: 300px;
margin: 0;
padding: 50px;
background: #ededed;
list-style-type: none;
-webkit-font-smoothing: antialiased;
top: 40px;
right: -32px;
}
Updated fiddle: https://jsfiddle.net/meuexde6/1/
If you really want the menu to stick directly to the button (hard to say - it has no borders), just adjust the top and right values as needed.
HTML5 Semantic Elements.
details > summary {
padding: 2px 6px;
width:12px;
border: none;
list-style: none;
}
details > summary::-webkit-details-marker {
display: none;
}
ul{
list-style: none;
margin-left:0;
padding-left:0;
}
<details>
<summary>☰</summary>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</details>
So, here goes. I know you are asking for a solution to a specific problem, I solved it alright, but I couldn't help noticing that you are struggling with your code. You must simplify the way you think and your code will become leaner. The purpose of this forum is to help others become better, right? :)
HTML
It is good practice to keep the menu toggle button OUTSIDE of the menu - will solve a lot of issues - check below.
It is not semantically right to use anything else rather than a button for the toggle function, so, why not use a button here? I also removed unnecessary clutter from your code, like some divs and the id - the id could be traded with the class, your call. I also removed .mobile-nav because it is not needed at all.
<button class="menu-btn">
<span></span>
<span></span>
<span></span>
</button>
<div class="responsive-menu">
<ul id="menu">
<li>Vote</li>
<li>Search</li>
<li>About</li>
<li>Log In</li>
</ul>
</div>
CSS
I absolutely positioned the menu-btn on the top right corner, and gave it a width equal to the #pageTitle height (which I set at 50px - a gold standard) to keep it rectangular; it should be a rule of thumb that the toggle buttons are rectangular and always the same height as the top navigation bar - in this case the before-mentioned id. The same I did for the .responsive-menu. I absolutely positioned it as shown below. The changes allowed me to remove a lot of css styling - now obsolete - like for example the absolute positioning of the ul menu inside the .responsive-menu.
.menu-btn {
position:absolute;
display:block;
right:0;
top:0;
width:50px;
height:50px;
background:yellow;
border:none;
padding:16px;
}
.responsive-menu {
position: absolute;
top: 50px;
right: 0;
display: none;
}
Javascript
By years of practice I realized that the most efficient way to toggle a menu instead of adding and removing classes is to add a class on the body tag; this can help heaps if you want to restyle anything else on the page depending on wether your menu is opened or not.
$('.menu-btn').on('click', function() {
$('body').toggleClass('responsive-menu-open');
});
Here is a working jsfiddle: https://jsfiddle.net/scooterlord/4atafhge/
I could have done a lot of other things in order to simplify the code even further - remove unnecessary ids and classes since most elements are considered unique and could be targeted using descendant classes, eg .responsive-menu ul, etc. After a lot of practice, you'll manage to think simpler and produce code with a smaller footprint.
Edit: Concerning the fact that you don't like the absolute pixels for alignment here is a trick.
Giving a fixed height to the parent container, equal to the toggle button's -in this case '#pageTitle' and setting its position to relative allows you to use top:100% to properly place the responsive menu exactly below the button (which is essentially the same height):
#pageTitle {
display: flex;
height: 50px;
position:relative;
}
.responsive-menu {
position: absolute;
top: 100%;
right: 0;
display: none;
}
Here is an updated fiddle: https://jsfiddle.net/scooterlord/4atafhge/1/
Edit: Natalia, I gave it some thought and here is what I came up with. I created an absolutely positioned .menu-wrapper, inside of which I placed the button and the responsive menu with float:right and no positioning - aka they are positioned statically. No more pixel values! YAY!
.menu-wrapper {
position:absolute;
top:0;
right:0;
}
.menu-btn {
float:right;
...
}
.responsive-menu {
float:right;
clear:both; // to clear the .menu-btn and sit exactly below it
...
}
Here is a working fiddle: https://jsfiddle.net/scooterlord/4atafhge/2/
I have a goal that I'm trying to accomplish with HTML and CSS only: With an inline list of links that grow in size upon hover and change fonts (this has caused odd issues before),
A) Hovering one link shouldn't upset other links.
B) Keep it dynamic to avoid tailoring the CSS to each new link.
C) If margin: 0 20px 0 20px, that should be from the ends of the text -- This looks much cleaner, as it makes the spacing constant between links (see example for what should not be done). Fixed width containers usually violate this.
D) Upon hover, the text should stay vertically and horizontally centered in place.
E) Please try to keep it HTML and CSS only. If it includes JS or JQ, it would be more difficult to implement to to my lack of knowledge about the languages and the fact that the JSFiddle is just a stripped down example instead of my actual page.
My best right now fits the first two and last criteria without meeting the third, and it uses tables (I know):
JSFiddle
Or code:
<table><tr>
<td><div>ONE</div></td>
<td><div>TWO</div></td>
<td><div>THREE</div></td>
<td><div>FOUR</div></td>
<td><div>FIVE</div></td>
</tr></table>
And...
div:hover {
font-size: 130%;
font-family: comic sans ms;
}
div {
width: 10px;
margin: 0 30px 0 30px;
height: 20px;
}
The issue is that the margin is being measured from the div, not the text, making it so I'd have to tailor the margin to each link. Additionally, hovering will make it seem like the font / link moves down and to the right, violating guideline D.
This Works dynamically as long as the text isn't too long, but hovering upsets other links. It also violates D.
Any help would be appreciated.
Vertical alignment for inline text is handled easily with the line-height property. Make sure that for both the normal and large font-sizes the line height is the same. Eg. for normal text I used line-height: 1.5em, for the large text I used font-size: 130%; line-height: 1.15385em;. 1.30 × 1.15385 = 1.50
The main issue I see is that when hovering the browser needs the text in the original size for the layout, but it also needs the text in bigger size for display. One solution I see is duplicating the link text and show only one version depending on hover state:
HTML:
<ul>
<li><span>link 1</span><span>link 1</span>
<li><span>link 2, with some long text</span><span>link 2, with some long text</span>
<li><span>link 3</span><span>link 3</span>
</ul>
CSS:
ul, li {margin: 0; padding: 0;}
li { list-style-type: none; display: inline-block; line-height: 1.5em; }
li { border: 1px dotted red; position: relative; }
li a span:first-child { padding: 0 30px; }
li a span:last-child { position: absolute; width: 100%; left: 0; font-size: 130%; line-height: 1.15385em; text-align: center; visibility: hidden; }
li:hover a span:first-child { visibility: hidden; }
li:hover a span:last-child { visibility: visible; }
http://jsfiddle.net/g16Ldusx/2/
Instead of duplicating the link text in HTML, I would probably duplicate it using some javacript.
If you don't want the duplication and really don't want javascript, you can use the :before and :after pseudo-elements instead, and put the link text in a HTML5 data attribute. Not sure how good the browser support for this one is though.
HTML:
<ul>
<li>
<li>
<li>
</ul>
CSS:
ul, li {margin: 0; padding: 0;}
li { list-style-type: none; display: inline-block; line-height: 1.5em; }
li { border: 1px dotted red; position: relative; }
li a:after { content: attr(data-text); padding: 0 30px; }
li:hover a:after { visibility: hidden; }
li:hover a:before { content: attr(data-text); position: absolute; width: 100%; font-size: 130%; line-height: 1.15385em; text-align: center; }
http://jsfiddle.net/kyad4tfh/
Also, note that requirements A and C may conflict with each other. The margin between elements needs to be big enough to accomodate for the increased width of the text.
Following simple list, where in every h4, there is a span at the end.
<ul class="items">
<li>
<h4>Prevent LineBreakOfPlus <span class="goto">o</span>
</h4>
</li>
<li>
<h4>Digital Signage <span class="goto">o</span></h4>
…
</ul>
Screenshot of the page's source:
The CSS for the span looks like this …
.items .goto {
font-family: 'QuaySans-Icons';
font-size: 1.6em;
position: relative;
float: right;
}
The final thing looks like this:
The problem I have with this is that when decreasing the width of the browser window (I'm working on a responsive webdesign) the span-icon is breaking into the next line.
Do you have any creative solution or idea on how to prevent this from happening?
Kind regards and thank you in advance,
Matt
If you want the icon to keep inline with the last word in your text line, you can simply do:
<ul class="items">
<li>
<h4>Prevent LineBreakOfPlus<span class="goto">o</span></h4>
</li>
<li>
<h4>Digital Signage<span class="goto">o</span></h4>
</li>
</ul>
and the CSS might be:
.items {
list-style: none;
margin: 0;
padding: 0;
}
.items li {
border-bottom: 1px solid gray;
margin: 0;
padding: 0;
}
.items h4 {
margin: 0;
}
.items .goto {
background-color: gray;
font-size: 1.6em;
margin-left: 10px; /* optional */
}
If there is no white space between your work and the span, the motif will simply follow the word if the li element is forced to flow into a second line.
You can use margin-left to create visual spacing or insert a   entity before the span, quite a few ways to do. The details depend a bit on what effect you want.
Fiddle: http://jsfiddle.net/audetwebdesign/VsBet/ (two examples of how to do it)
Keeping Icon Right Justified
Here is one approach to pinning the icon to the right of the h4 element:
.ex2.items h4 {
position: relative;
line-height: 1.5;
outline: 1px dotted blue;
padding-right: 2.00em;
}
.ex2.items .goto {
background-color: wheat;
line-height: 1.00;
font-size: 1.6em;
position: absolute;
right: 0;
bottom: 0.0em;
height: 1.00em;
width: 1.00em;
outline: 1px dotted red;
}
Use absolute positioning of the span to keep it to the right and bottom of h4. If h4 forms to line, the icon will follow the second line. You may need to adjust the positioning depending on the icon size. If you allow the icon to grow in size, you may get other issue in extreme cases. I might fix the icon to a px height or width (or a max value). Finally, set some padding-right in h4 to prevent the icon from overlapping the text as the window gets smaller.
Note I explicitly specified line-height values to accentuate the issue around not knowing the height of the icon. You may need to adjust these to vertically position the icon.
Decrease your font-size when you have less space. I guess you have the problem in media with max-width:480px. I found decreasing the font-size a good alternative to keep the design consistent in responsive sites
I've mocked it up on the demo, however it is a bit raw.
.items {
padding:0;
margin:0;
/*width:180px;*/
}
.items li {
border: 1px solid red;
list-style-type: none;
position: relative;
}
.items h4 {
margin:0; padding:0; font-size:16px; padding-right:10px;
}
.items .goto {
margin-top: -10px;
position: absolute;
right: 0;
top: 50%;
}
DEMO
Check the following link and decrease the width of browser.
RESULT
This is what the weird view looks like, in Chrome on OS X on first load:
That blue bar running right across the screen is actually the navigation bar that should be at the top of the screen. See below.
This is what the original view looks like, and this is what it reverts to - once I scroll down (so that portion of the screen disappears) and scroll back up:
Edit1: I don't even know what code to post, if any because it is kinda random. If you ask some questions though, maybe something might jump out and I will know what code to either post or look at.
Thanks.
Edit2: Here is the code for the div#navigation:
<div id="navigation">
<div id="quota-info">
Plan: Chameleon<br />
# of Projects: 2 / 20<br />
# of Clients: 2 / 15<br />
Storage: 10.8 MB / 10.0GB <br />
</div>
<div id="user-info">
<span class="username">Hi Test</span><br />
Name: Test User<br />
Email: test#abc.com<br />
Last Logged In: about 2 hours ago<br />
</div>
<ul>
<li><img src="logo.png" /></li>
<li id="dashboard">Dashboard</li>
<li id="settings">Settings</li>
<li id="logout">Logout</li>
</ul>
</div>
Here is the CSS:
#navigation {
font-family: Verdana, Arial, sans-serif;
font-size: 13px;
background: #2d343f;
background-image: url('../images/nav-textured-bg.png');
background-repeat: repeat;
padding: 5px 5px;
margin: 0px auto;
position: relative;
height: 75px;
}
#navigation a {
text-decoration: none;
padding: 10px 15px;
display: inline;
height: 35px;
line-height: 35px;
color: #c6c8cb;
}
#navigation ul {
width: 100%;
margin: 0 auto;
text-align: center;
}
#navigation li {
width: 100%;
display: inline;
list-style-type: none;
}
#navigation li img {
position: relative;
top: 15px;
}
Edit 3:
Here is another screenshot of how it looks when I scroll up. The top navigational bar is still there. This blue thing is not even the menu, it's like a screenshot of it. When I hover over the menu links, they don't work.
You have to create a reduction. Start with a copy of the actual page and then remove stuff not related to the problem, one by one, until it disappears. Then you'll see what's causing it, whether it's a browser bug and what you can do to fix it.
PS: If it's a browser bug, don't neglect to report it. It's a web developer's responsibility.
I would start by cleaning up some of your CSS.
#navigation {
font-family: Verdana, Arial, sans-serif;
font-size: 13px;
background: #2d343f;
background-image: url('../images/nav-textured-bg.png');
background-repeat: repeat;
padding: 5px 5px;
margin: 0px auto; <--- see below
position: relative;
height: 75px;
}
this should be margin:0 since it's a block element. Block elements take up the entire line, so trying to center it makes no sense.
#navigation a {
text-decoration: none;
padding: 10px 15px;
display: inline; <--- conflict (see below)
height: 35px; <--- conflict (see below)
line-height: 35px;
color: #c6c8cb;
}
Inline elements can't have a width or height applied to them, but some browsers when you try to will automatically convert any inline element to inline-block for you. If that is what you want, you should specify it, otherwise drop the height.
#navigation ul {
width: 100%;
margin: 0 auto; <-- see below
text-align: center;
}
Centering an item with 100% width does not make sense here
#navigation li {
width: 100%; <--- conflict
display: inline; <--- conflict
list-style-type: none;
}
#navigation li img {
position: relative;
top: 15px;
}