folks.
Today,I decided to install firefox and test my navigation bar out on firefox instead of google chrome. Firefox shows a random space ontop while chrome doesn't. Anyone know what the problem is and how to fix it?
This is what firefox looks like compare to chrome.(Sorry for the bad quality, I resized it bad.)
If it matters, this is the code i'm using:
<html>
<head>
<title>Blitz</title>
<style>
body{
margin: 0px;
padding:0px;
}
.Blitz{
background-color:#2DDEDE;
padding:0px;
margin:0px;
border-color:black;
}
.Navigationbar{
height:40px;
width:500px;
background:#a7e8ee;
border:none;
}
.Navigationbar li{
display:inline;
}
.Navigationbar a{
color:black;
text-decoration:none;
}
</style>
</head>
<body>
<div class="Blitz">
<h1><center>Blitz</center></h1>
<ul>
<div class="Navigationbar">
<li>Home</li>
<li>Forums</li>
<li>Blog</li>
<li>Featured</li>
<li>Sign up</li>
<li>Login</li>
</ul>
</div>
</div>
<div class="information">
<!--Information about the site here. Pictures to go with that-->
</div>
</body>
</html>
This issue is occurring because the margin-top of your header is poking out of the top of your div, and is not just due to newlines or whitespace in your HTML.
To prevent the margin of your header element from sticking out of the top of your div and affecting positioning, use overflow: auto; on your .Blitz element.
JSFiddle Example: https://jsfiddle.net/9676k73g/
Try taking out the newlines on your navigation so that it's all in one line in your HTML. It might look messy, but I have discovered in the past that an annoying space will render in some browsers just because the HTML is nicely formatted.
Related
currently I'm making a nav bar for a product landing page. And I can't get this " Johns auto service " to get placed near the car picture. When I try to add h1 or p tags then it pushes down out of the div. But when I dont add anything it stays there. So what is the best way to place it in the center right side of the picture like a logo I mean ( like a stackoverflow logo). Thanks for help. And if there's anything I should change please tell me because I'm still learning this and any advice would be appreciated .
body {
margin:0;
}
#header {
display:flex;
max-height:50px;
}
#nav-bar {
width:40vw;
justify-content:space-around;
align-items:center;
}
.image {
width:60vw;
background-color:gray;
}
#header-img{
width:50px;
}
ul {
padding: 0;
list-style-type:none;
display:flex;
justify-content:space-between;
}
<html>
<head>
</head>
<body>
<header id="header">
<div class="image">
<img id="header-img" src="http://clipart.9file.net/770ddeaed8e20e0b205be28ee31cdd9e/cliparts/225/medium/c1493845e027eb29be10ed911d0a015a.png">
Johns auto service
</div>
<nav id="nav-bar">
<ul>
<li>Location</li>
<li>How it works</li>
<li>Pricing</li>
</ul>
</nav>
</header>
</body>
</html>
You should add display:inline-block to your p tag or h1 or whatever. So it stays inside the parent.
#header p {
display: inline-block;
}
I made an example, if this answers your question (not sure though messy request)
https://codepen.io/anon/pen/XBBGrJ
Greets
As far i can see you didn't declare your .css file in the head of the document.
Add in the head of your document.
styles.css can be anything you named your . css file.
You can check this fiddle
https://jsfiddle.net/Minal4/fvuojp8x/3/
If any questions please feel free to ask :)
i tried to make a custom navbar since the standart navbar isnt really what i desire. It looks too casual so i try instead of using for the navbar, images.
I cant get them 4 images to line up in a row.
I saw there are 2 types of making it, once is defining a class through CSS and the other one is directly in the index.html. Are there any difrences in those 2 methodes?
Help would be super appericated. I tried like 30 websites with parts of the code but it seems like nothing is working im wondering what i do wrong.
greeting Queen
.navbar {
max-width:960px;
text-align:center;
}
.home {
position:relative;
display: inline-block;
float:left;
padding:10px;
}
.search {
position:relative;
display: inline-block;
pading:10px;
}
.logo {
position:relative;
display: inline-block;
float:right;
margin-right:50%;
padding:10px;
}
.partner {
position:relative;
display: inline-block;
float:right;
margin-right:50%;
padding:10px;
<body>
<div class="navbar">
<div class="navbar-special">
<ul class="nav">
<li class="home"><img src="http://i.imgur.com/GryNQfZ.png" /></li>
<li class="search"><img src="http://i.imgur.com/NfURGQL.png" /></li>
<li class="logo"><img src="http://i.imgur.com/sIwbaop.png" /></li>
<li class="partner"><img src="http://i.imgur.com/Ry9hIzC.png" /></li>
</div> <!-- div closing navbar -->
</div><!-- div closing navbar -->
</body>
http://jsfiddle.net/n32koz7q/1/
As it applys to styling, there are a few caveats which make putting styles in an index.html or an external stylesheet different.
Putting styles in an external stylesheet will (everything else held constant)...
—create a new HTTP request, and the external style sheet will be loaded after the index.html page (given that this page requests the stylesheet).
—change the order at which styles are applied. For example, if you have.
index.html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
hello world!
</body>
</html>
<style>
.body {color:black;}
</style>
and mystyle.css:
body {
color: white;
}
the body would have a css property of color:black, since that style was loaded last. You can read about this here.
There are a few other differences, but these are probably the ones that are particular to your current use case.
As for your original question: here is an updated fiddle:
http://jsfiddle.net/n32koz7q/2/
You had a lot of unnecessary styling. I would start here, and then build up. Basically, the most basic CSS that your are going to use to get elements to sit inline, in this case, will look like so:
.navbar {
max-width:960px;
text-align:center;
}
li {
display:inline-block;
padding: 10px;
}
Essentially you just want those li elements to sit inline.
Good luck!
Just add the following code:
.navbar-default {
background-color:red;
}
This should get you going.
I have this html with a wordpress theme
div class="fullWidthDarkBlue">
<div class="hpRentArrears">
<section id="black-studio-tinymce-8" class="widgetcontainer widget_black_studio_tinymce"><div class="textwidget"><h2>Rent Arrears</h2>
<p>Does ...t on your behalf.</p>
</div>
</section>
</div>
<div class="clearer"></div>
</div>
<div id="footer">...
And some css like this:
#footer {
margin-top:0px;
border:none;
}
.fullWidthDarkBlue {
width:100%;
background:#365162;
padding-top:30px;
}
.hpRentArrears {
width:346px;
float:left;
background:#f2f1ed;
border:2px solid #a7cfdb;
}
.hpRentArrears p {
margin:0;
}
.clearer {
clear:both;
}
All works well except in FF there is a gap between the bottom of the dark blue box and the footer. I find I can remove this gap by putting a border onto the #footer - but I don't really want to
What's causing the gap and how do I get rid of it?
I tested your piece of code, its working fine in ff, safari and chrome. Must be the footer inside element that is throwing some margin.
Share your code and i will fix it.
I try to replace site menu created on flash with simple menu with image and links. I do it with CSS. Background image inserts with CSS value: background: url(/image.png), and menu is just list of <a> tags (with CSS style to display it white and without underline and so on). It works fine on google chrome and IE and looks like this:
Here is header.php code (this is menu block and it's inserted on page with php include_once):
<div id="menu_container">
<div id="menu_top_level">
О компании
Новости
Вакансии
Контакты
</div>
<div id="menu_medium_level">
Тарифы
Автопарк
Корпоративным клиентам
Технологии
</div>
</div>
Here CSS code:
#header_main {color:white; width:100%; height:76px; background: #000 url(/common/images/menuimage2.png) no-repeat center top;}
#menu_container {width: 1000px; text-align: left; }
#menu_container a {color:white;}
#menu_top_level {font-size: 14px; line-height: 17px;padding-left: 50px; float:left; clear:both;margin-top: 15px;}
#menu_top_level a {text-decoration: none; float:left; margin-right:20px;}
#menu_medium_level {font-weight:bold; font-size: 16px; line-height: 17px;padding-left: 50px; float:left; clear:both;margin-top: 10px;}
#menu_medium_level a {float:left; margin-right:20px;}
CSS connects wiht link in <head> tag:
<link rel="stylesheet" type="text/css" href="/common/css/style.css" />
Menu block inserts on page with PHP code:
<div align="center">
<div id="header_main">
<?php include_once($_SERVER["DOCUMENT_ROOT"]."/common/tmp/header.php"); ?>
</div>
The problem is that some browsers (firefox, safari on mac) first time display menu incorrect, like this:
(CSS style for <a> tag and background image did not work). All other parts of page displays with correct style from CSS file.
when user updates page it displays then correctly always.
Also, I can't get this error on firefox on my others machines and when I clear cache.
The question is, how to change code to be sure that it always will work correctly on any browser?
give the a tag a display of block
display: block;
to get it to work on moz you could allways use this(try not to though). it all the stuff that happens inside these curly brackets will only render in mozilla.
#-moz-document url-prefix() {
}
I'm having a little trouble having this behave exactly as I want across all browsers, but I swear I've done this before:
<!html>
<head>
<style type="text/css">
div { width:300px; }
ul { list-style:none; margin:0; padding:0; }
li { margin:0.25em 0.5em 0.25em 0; background:transparent url(http://cdn.iconfinder.net/data/icons/basicset/pencil_16.png) no-repeat scroll 0 0; float:left; }
a { padding-left:24px; }
</style>
</head>
<body>
<div>
<ul>
<li>Amazon</li>
<li>Barnes & Noble</li>
<li>Books-A-Million</li>
<li>Borders</li>
<li>Indie Bound</li>
<li>Powell's</li>
</ul>
</div>
</body>
This looks fine and dandy in most modern browsers, but in IE 6 and 7, the "Books-A-Million" link wraps.
I'd like to have the list items variable width and wrapping to new lines, but the links inside not wrapping. I can't figure out the magic combination of display types and CSS browser hacks to make it work. Has anyone tackled this issue before?
Add white-space: nowrap; to the a tags