I am trying to use Flex Boxes in order to style a nav bar on my website. I'm not sure what I'm doing wrong, but there's default properties being applied on my UL. I have attached screenshots and code snippets below.
Image of Issue (spacing)
Inherited Properties?
HTML
<body>
<div class="container">
<header class="navbar">
<img id="icon" src="logo.png" alt="logo" href="#index">
<nav>
<ul>
<li>Menu</li>
<li>Combos</li>
<li>Reservation</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</nav>
<img id="cart" src="cart.png" alt="cart" href="#cart">
</header>
</div>
</body>
CSS
* {
font-family: Montserrat, sans-serif;
text-transform: uppercase;
text-align: center;
color:white;
}
body {
background: #FF9292;
}
.container {
width: 100%;
min-height: 100vh;
padding-left: 8%;
padding-right: 8%;
box-sizing: border-box;
overflow: hidden;
}
.navbar{
margin-top: 2.5%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#icon {
width: 65px;
cursor: pointer;
}
#cart {
width: 25px;
cursor: pointer;
}
nav ul li {
list-style: none;
display: inline-block;
}
nav ul li a {
text-decoration: none;
color: white;
font-size: 14px;
}
nav ul li a:hover {
color: #3f3e3e;
}
Those are not inherited properties, but the default styles supplied by your browser, the so-called user agent stylesheet.
The styles in a user agent stylesheet are typically applied to all elements on the page, and are used to provide a basic layout and appearance for the page.
The purpose of a user agent stylesheet is to provide a consistent and predictable default appearance for web pages, so that all users have a similar experience when viewing web pages. The styles in a user agent stylesheet are typically based on the default styles provided by the World Wide Web Consortium (W3C), the organization that sets standards for the web.
User agent stylesheets can vary depending on the web browser that is being used. Different web browsers can have different default styles for the same HTML elements, so the appearance of a webpage can vary depending on which web browser is used to view it.
For example, the default font size and font family for a p element may be different in Chrome and Firefox. In Chrome, the default font size for a p element may be 16 pixels, and the default font family may be Arial, sans-serif, whereas in Firefox, the default font size for a p element may be 15 pixels, and the default font family may be Verdana, sans-serif.
You'd need to manually override those styles in your case.
To make this easier, people, especially back in the day, started using so-called "CSS Resets" which are boilerplate stylesheets that set all of those values to 0, so you have a de-facto standard without worrying about cross-browser styles and don't need to override such values.
what are you expecting from this code
if you are thinking why 'li' are aligned horizontally without adding display: flex; in 'ul' then it is because you added display:inline-block; in 'li'.
Related
My spans with hover work on a tablet (my iPad) and desktop computer. However, on my phone the CSS styling disappears, while I understand that hover effects don't really "work" on phones/touch screens but part of the CSS is hiding the span when not hovered over.
HTML:
<section id="proj1">
<a href="EJ.html">
<img id="c" src="img/rjcover.jpeg">
</a>
<span id="one">
Envisioning Justice
<br>
<br>
May 2020
</span>
</section>
CSS:
span {
display: none;
position: absolute;
font-size: 10px;
padding: 5px;
text-transform: uppercase;
z-index: 1;
font-family: 'Darker Grotesque', sans-serif;
font-size: 25px;
background-color: #FAD714;
color: white;
width: 75%;
margin-top: -190px;
}
#proj1:hover #one {
display: block;
}
#proj2:hover #two {
display: block;
}
#proj3:hover #three {
display: block;
}
#proj4:hover #four {
display: block;
}
http://iam.colum.edu/students/riley.jakusik/designbyriley/
that is the link to it live.
You should always take into consideration what will create the best user-experience. If you are setting display:none on your span element and then displaying that element on hover you are creating a situation for users who are on a device that does not support the hover state that will not be the best experience for them. One possible solution would be to use a hover media query. This way you can specify styling that will apply to users that are on a device that supports that feature, and if not you can specify a fallback for users that are on a device that does not:
#media (hover: hover) {
#one {
display: none;
}
#proj1:hover #one {
display: block;
}
}
The CSS #supports rule will also be a useful tool to familiarize yourself with.
EDIT: And thank you to #SandeshSapkota for pointing out that hover state is still supported in many mobile devices, but I think that it is useful to familiarize yourself with the aforementioned hover media query as it is a useful tool in many situations. A better approach to your issue may be to instead implement a media query that tests for viewport width, and if it is smaller than say 641px, which is the value that Foundation uses to detect mobile devices then just show the span element by default:
#media (max-width: 641px) {
#one {
display: block;
}
This query means that if the device in question has a viewport width at a maximum of 641px then apply the styles.
I'm currently trying to mimic this layout using HTML/CSS. Attached is what it should look like on Desktop and Mobile. For mobile, I'm not 100% sure the best approach for this. Notice how the image comes before "Bowers & Wilkins".
The layout is 100% browser width btw. My initial thought was to use flex boxes for this...but I'm not 100% sure if it's the right approach. I'm currently pretty new to using flex boxes.
Simplest way would probably be to float the image to the right at desktop res (initially shown in a single column in the demo when you run the below snippet - effectively mobile res. If you switch to full page mode, you should see the element order change so the image floats to the right):
body {
font-family: Arial, sans-serif;
background-color: #aaa;
padding: 1em;
font-size: 14px;
}
h1,
h2,
p {
margin: 0;
color: #fff;
}
/* float image to the right, half the width of the viewport */
img {
float: right;
margin-left: 1em;
width: 50vw;
}
h1 {
font-size: 1.25em;
font-weight: normal;
}
h2 {
text-transform: uppercase;
font-size: 1em;
}
#media only screen and (max-width: 767px) {
/* at mobile res, remove the float so the image appears back between the headings */
img {
float: none;
margin-left: 0;
margin-bottom: .75em;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css" />
<h1>Exclusive offers from our partners</h1>
<img src="http://lorempixel.com/output/technics-q-c-200-200-4.jpg" />
<h2>Bowers & Wilkins</h2>
<p>It's one thing to dress well for your party. It's another thing to host it well ...</p>
I would definitely recommend bootstrap as a good solution for this. They have pre-built CSS classes that can pull and push and rearrange objects like this automatically.
Here the classes would be class="col-md-6 col-md-push-6" and class= "col-md-6 col-md-pull-6"
I am learning how to code HTML and CSS, and I decided to make my own website in the process.
My question is: how would I align smaller text to a bigger object, for example, links to different pages on my website neatly aligned under my full name with the links flush to the of the beginning and end of my full name?
I know describing it may have been a bit confusing, so here's an image of what I mean:
Any suggestions?
Thanks!
You can approximate the look and design regardless of the header length, but in the end, CSS doesn't offer as precise typographical tools as you'd need and you will have to nudge the percentages one way or another once you know the length of your actual text.
Sample Jsfiddle
HTML:
<div id="container">
<h1>Large Title Here Etc</h1>
<div id="sub">
<span>music</span>
<span>film</span>
<span>web</span>
<span>photo</span>
</div>
</div>
CSS:
body {
text-align: center;
}
#container {
display: inline-block;
}
h1 {
font-size: 2em;
}
#sub {
font-size: 1em;
display: table;
width: 120%;
box-sizing: border-box;
margin: 0 -10%;
}
#sub span {
display: table-cell;
padding: 0 2%;
}
links flush to the beginning and end of my full name
Get out of the habit of thinking this way as you design websites. This will lead to endless headaches and frustrations for you, as it depends on browser rendering (and possibly rendering bugs), the user's font size, the user's font, and loads of other factors you cannot control. Instead of going for 'pixel precision', the idea is simply to make it look as good as you can on most things.
When designing things like this, consider the markup first. What is the structure of what you're actually writing? In your linked image, Full Name looks to me like a header (perhaps h1), while menus like that are normally done as styled unordered lists (ul) these days. Below is an example of how I might make something similar to what is in your image.
Here is the markup:
<div id="container">
<h1>Full Name</h1>
<ul>
<li>music</li>
<li>film</li>
<li>web</li>
<li>photo</li>
</ul>
</div>
and the CSS used, with comments:
#container { border: 1px solid; }
h1 {
margin-bottom: 0;
text-align: center;
}
ul {
margin: 0.5em;
/* remove default padding inserted by browser */
padding-left: 0;
/* no bullets */
list-style-type: none;
/* this works on inline objects, not just text */
text-align: center;
}
li {
/* hybrid of inline and block; obeys text-align */
/* Also note this does not work in IE <9. Workarounds exist. */
display: inline-block;
padding: 3px;
}
And here is the end result: http://jsfiddle.net/3PLgz/1/
This is driving me a bit nuts...I'm working on a site and trying to get a <ul> to render consistently across Safari (v 7.0.1) and Firefox (v 25.0.1). I've simplified the CSS and HTML just about as much as I can... there is still a difference in the distance between the "job title" (the <a> tag) and "location" (the <p> tag) of several pixels between the two browsers.
Fiddle is at http://jsfiddle.net/7BZGU/7/
Here's my code -- is there something obvious I'm doing wrong? I understand browsers render stuff differently, but I'm not sure why two modern browsers have such a difference when dealing with pretty vanilla code...
HTML
<div id="main">
<div id="current-openings">
<h3>Current Openings</h3>
<ul>
<li>
Junior Risk Reporting Analyst
<p>Chicago, IL</p>
</li>
<li>
Trading Data Analyst
<p>Houston, TX</p>
</li>
</ul>
</div>
</div>
CSS
#current-openings {
margin: 30px 0 10px 50px;
font-family: Verdana;
}
#current-openings h3 {
font-size: 25px;
}
#main ul {
margin: 15px 0 0 0;
line-height: 5px;
}
#main ul li {
list-style-type: none;
padding: 4px 0 25px 21px;
}
#main p {
font-size: 11px;
font-style: italic;
}
I did a couple things that helped the spacing be pretty close!
I removed the line height from your ul: having such a low line height will create a jumble of text once the text wraps)
set the paragraph's margin automatically by doing this:
margin: 10px 0px;
I believe what you are trying to do is align the bullet image, correct? To do this it is best to use:
background-position: 0px 10px;
Doing this eliminates the need for line height anyway!
This helps by overriding the initial paragraph styles and setting them specifically, so it works across multiple browsers.
Hope this helps!
I'm working on a website, and it works perfectly in Chrome/Firefox, but I'm experiencing two issues in IE8 and 9.
In IE9, the navigation menu in the header doesn't display.
In IE8, the entire header is screwed up. The title, subtitle, and navigation menu all appear above the main header image instead of on top of it. (Click here to see what it looks like).
I'm sure these are really simple fixes, I just couldn't find them. Thanks in advance.
Edit for code. HTML:
<div class="heightWrapper">
<h1 class="birthofahero"><?php bloginfo( 'name' ); ?></h1>
<h2 class="jennasue"><?php bloginfo( 'description' ); ?></h2>
<img src="/resources/images/header.jpg" alt="StartLivingNow | Inspiring a Generation" />
<nav class="topNavigationMenu">
<ul>
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Media</li>
<li>Newsletter</li>
<li>Partnership</li>
<li>Contact</li>
</ul>
</nav>
</div>
CSS
.heightWrapper {
height: 100%; /* To position the navbar at the bottom of the div */
margin-bottom: -.4em; /* A magic number, for some reason. */
}
.topNavigationMenu {
float: left;
position: relative;
bottom: 3.9em;
margin-bottom: -3.9em;
z-index: 100; /* test */
}
.topNavigationMenu li, .topNavigationMenu a {
float: left;
}
.topNavigationMenu li a {
font-family: 'Open Sans', Arial, sans-serif;
font-size: 2em;
font-weight: bold;
text-decoration: none;
color: #004080;
float: left;
padding: .2em .4em;
}
.topNavigationMenu li a:hover, .topNavigationMenu li a:active {
background-color: #004080;
color: #fff;
}
Fix for navigation menu in IE9
Apply position:relative to your heightWrapper and
Apply position:absolute to .topNavigationMenu (You already have bottom: 0 set). You should also remove the float:left from .topNavigationMenu.
As for the IE8 issues, neither header nor nav are HTML 4 elements, and IE 8 doesn't support HTML 5. Try including modernizer (http://modernizr.com/) in the head section of the page, or another HTML5 shiv. That should allow you to style them in IE7/8.
IE8
The reason is your layout. In your layout, there are 3 things:
h1
h2
menu
Now for the h's, you have used fonts not present in browers, or computers using #font-face. Internet Explorer doesn't support many CSS3 commands such as #font-face, causing your menu to be on the top.
The Solution:
Make the whole header a image and then put the menu.
IE9
I don't know but most probably the same. And don't forget about checking errors.