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 :)
Related
I am learning HTML and CSS. But this thing is getting on my nerves. I have tried everything to solve this thing but unable to do so. I am practicing with a sample website.
Main issue i Am trying to apply this logo which I marked under a rectangle above two ".divs". Sorry I am newbie and don't know how to properly. I am attaching my coding below of css.
I need to put those two divs below this image.
I am newbie so don't know how to paste code. This thing is new for. please any help would be appreciated. enter link description here
Okay, Well its hard to see without the images actually being included on the codepen.
I've gone through your code and eliminated the syntax errors/spelling mistakes etc and made it abit cleaner, so hopefully it will work for you, if not if you can provide images on the codepen it would make it alot easier.
HTML:
<body>
<div class="image">
</div>
<div id="wrapper">
<header>
<div class="headerbox1"></div>
</header>
<div class="banner">
<div class="headerbox2"></div>
</div>
</div>
</body>
</html>
CSS:
body {
background:#BCBCBC;
}
#wrapper {
height:2278px;
width:1600px;
background:#ABFF7E;
margin: 0 auto;
}
header{
width:1600px;
height:57px;
background:#FF1D21;
margin: 0 auto;
}
.headerbox1{
width:1600px;
height:57px;
background:#EDE8E9;
margin: 0 auto;
}
}
.banner{
width:1600px;
height:559px;
background:url(../../Images/alpha.jpg);
}
.headerbox2{
width:1600px;
height:63px;
background:rgba(0,0,0,0.4);
margin: 0 auto;
}
.image {
width:219px;
height:185px;
background:url(../../Images/logo%20spotless.png);
display: inline-block;
margin: 0 auto;
}
I could see no relevant reason for you to use the <td> tags in your html, especially as you don't have a table in there, so i have took them out.
Hope this helps, If not your need to provide images aswell.
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.
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'm a little new to web programming and have looked far and wide trying to fix this problem on my own but for the life of me I cannot figure it out, I greatly appreciate any and all help.
I'm basically making a navigation bar and I attempt to have it link to my other html pages but it's not working. I use the following code.
HTML
<header>
<div class="banner"> <!-- contains main banner and logo -->
<a href="index.html" id="logo">
<img src="images/newlogo.png" alt="blahblah">
</a>
</div>
<div id="nav-bar">
<ul class="nav">
<li>Home</li>
<li>Schedule</li>
<li>Register</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</header>
CSS
header {
border-top: 12px solid #9e2630;
width: 100%;
background: #fff;
left: 0;
top: 0;
z-index: 200;
height: 115px;
margin-bottom: 130px;
}
header #logo img {
padding-top: 35px;
display: block;
margin-left: auto;
margin-right: auto;
}
header ul {
float: left;
position:relative;
left:50%;
min-height: 60px;
margin-top: 30px;
}
header ul li {
margin: 0;
padding: 0;
list-style: none;
float: left;
position:relative;
left:-50%;
/*height: 45px;*/
}
header ul li a {
font: normal normal normal 18px/20px 'Century Gothic', sans-serif;
text-align: center;
color: #9e2630;
/*height: 43px;*/
}
header .nav li a:hover{
background-color: #9e2630; color:#FFFFFF;
}
header ul li a.current{
background-color: #9e2630; color:#FFFFFF;
}
The link in the logo works fine. The link in the contact also work fine, there's no problem when I link to an element on the page. The other four links do not work. I've also tried setting the href to an "http" address but that didn't work either. I've run all of these tests in DreamWeaver's browser preview function (IE and Chrome) as well as on a remote server with no difference in results.
I also noticed the z-index in the header is set to 200 (this is sample code I'm working with) which I understand plays a role in how elements are layered. I tried fiddling with that to no avail. What do you guys think?
Edit1: here's what my file structure looks like
file structure
Also here's the template I've been using
template
Edit2: Ok guys I found the problem was a JS file called jquery.singlePageNav.min.js
unfortunately when I disable this file I lose the nice image slider I had on my web page but the links work again, so now I have to fix that :p
Thanks for your help everybody!
From the plugin's documentation, by default it will override all links, which is clearly not what you want here. However there is a filter option which can override this behavior:
'filter' - By default, the plugin will be applied to all links within the container, use this to filter out certain links using jquery's built in filter method (e.g. ':not(.external)')
Therefore I suggest adding a class to all the links you don't want to be single-page-nav-ized, then initializing with the filter option:
HTML
<header>
<div class="banner"> <!-- contains main banner and logo -->
<a href="index.html" id="logo">
<img src="images/newlogo.png" alt="blahblah">
</a>
</div>
<div id="nav-bar">
<ul class="nav">
<li>Home</li>
<li>Schedule</li>
<li>Register</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</header>
JavaScript
$(document).singlePageNav({filter: ':not(.external)'});
Give proper path to your pages
<li>Home</li>
<li>Schedule</li>
<li>Register</li>
<li>About</li>
<li>Contact</li>
be sure that all your .html pages in the correct folder. As for now you are linking to html pages in the same folder, so if you dont have them there , you wont be able to open them like this. you have to navigate to the other links from your index.html. Ill explain: if you have a folder "sites" and you have all your .html documents there, it should work the way you did. BUT if in your folder "sites" you only have your index.html and the other sites are in a subfolder "sub-sites" you will have to navigate there first. As posted in answer no. 1
I have this stylesheet:
*{
padding: 0px;
margin: 0px;
}
a{
background:yellow;
}
and this webpage:
Home
About
Contact
Results in:
How do I make those anchor tag to "touch" each other,removing that unwanted space in-between?
thanks
Luca
You need to remove the whitespace (in this case the newline) between your tags. Some browsers render it as a space.
You can use this trick to get rid of the space:
HTML:
<div id="test">
Home
About
Contact
</div>
CSS:
#test { font-size:0; }
#test a { font-size:16px; background:yellow; }
Live demo: http://jsfiddle.net/quucy/
I think I might find a pretty cool way to solve it :-). I started with the fact of using <!-- comments --> to fill empty < span >s etc.
So if you want to keep your anchor-on-a-new-line structure and do not want the spaces between them... simply open a block comment on the end of the line and end it on the new line just before new < anchor >
Like this:
<div id="test">
Home<!--
-->About<!--
-->Contact
</div>
and DEMO: http://jsfiddle.net/Lukis/reZG2/1/
The space between the links might be produced by newline characters you have in your code but it really depends in which browser you get this behavior (some browser ignore these characters some do not).
Try putting all three tags in a single line and without spaces between them.
HomeAboutContact
How about puting them in ul/li structure?
#test li {
background:yellow;
float: left;
list-style: none;
}
<ul id="test">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
All the above answers show some neat ways of getting rid of that unwanted whitespace but I don't see the one I've been using for almost a decade; so here's another simple solution to your very old problem for people who still wrestle with that whitespace -- use float!
HTML:
<div id="test">
Home
About
Contact
</div>
CSS:
#test {
overflow:hidden;
/* this isn't really required here but helps;
or use your preferred method for clearfix */
}
#test a {
float:left;
background: yellow;
}
jsfiddle:
http://jsfiddle.net/fjj7dsyx/2/
You can use flexbox:
div {
display: flex;
}
<div>
Home
About
Contact
</div>
Or if you use Bootstrap:
<div class="d-flex">
Home
About
Contact
</div>