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.
Related
I am trying to convert an existing element in my HTML page to a link, the element has additional css functions to scale it when you hover your mouse over it.
<!DOCTYPE html>
<html>
<head>
<style>
.lefthotbarbtn{
float:left;
padding:12px;
font-family:Verdana,sans-serif;
transition:0.3s;
}
.lefthotbarbtn:hover{
float:left;
padding:12px 32px;
font-family:Verdana,sans-serif;
background-color:#d3d3d3;
border-radius:69px;
color:#0f0f0f;
font-family:Verdana,sans-serif;
}
.contactusbtn{
float:right;
padding:12px;
background-color:white;
border-radius:69px;
color:black;
font-family:Verdana,sans-serif;
transition:0.3s;
}
.contactusbtn:hover{
float:right;
border-radius:0px;
padding:12px 24px;
background-color:#d3d3d3;
border-radius:69px;
color:#0f0f0f;
font-family:Verdana,sans-serif;
}
</style>
</head>
<body>
<div class="lefthotbarbtn">Home</div>
<div class="lefthotbarbtn">Who Are We?</div>
<div class="lefthotbarbtn">Products</div>
<div class="lefthotbarbtn">Help!</div>
<div class="contactusbtn">contact us</div>
</div>
</body>
</html>
I have tried various ways of converting each individual into a link without deleting existing information but whenever I did, the text would either disappear or move. What I want to be able to do is simply have the text as a link without changing the appearance of it and I can't figure out how.
Please mention the things you have tried in future.
I'll say a few things:
If all you want is to make them into link simply use the a link tag.
To me it seems like your building a header. Use nav with ul li with a. Keeps things clean and generally good practice.
If you want to go down this route you can can convert div to a and then use css to design the a however you like.
But If there is a problem with that try you can also do this (Not a good idea in general, why?):
<div class="lefthotbarbtn">Who Are We?</div>
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 :)
So this is the code. I am not sure what problem there is. So first there is internal and 2nd one below there is inline, which is working. I think the problem is the image because inline css is working fine with other images but not with just one (Capture.png).
<!DOCTYPE html>
<html>
<style> <!-- this is where I am adding the internal css -->
body{
padding: 0px;
margin: 0px;
}
.cap{ <!-- this is the class for the image -->
position: absolute;
height:100px;
width:200px;
left:150px;
}
</style>
<body>
<div class="cap"><img src="Capture.png"/></div>
</body>
</html>
But this works!
<div class="cap"><img src="Capture.png" style=" position: absolute;
height:100px;
width:200px;
left:150px;"/></div>
The code below works because the style is being applied directly to the image.
<div class="cap"><img src="Capture.png" style=" position: absolute;
height:100px;
width:200px;
left:150px;"/>
</div>
Notice that the .cap class is for the div that contains the image, not the image itself. The image in the code below isn't working because the CSS you wrote is being applied to the div and not to the image.
<div class="cap"><img src="Capture.png"/></div>
The following piece of code selects the image. You're styles should be applied to the image using the code below.
<style>
.cap img { <!-- notice the change from ".cap" to ".cap img" -->
position: absolute;
height:100px;
width:200px;
left:150px;
}
</style>
I hope this answers your question. I recommend reading more into CSS Selectors to get a better understanding of how they work. Happy coding!
Your'e not selecting the image with the css because .cap is the div that houses the img - to apply the CSS to the image within that - you will need to target it. Either by applying a class to the image or targetting it within the containing div (using .cap img...). As a rule - it is always best to apply styling in the CSS rather than inline styling.
The reason the inline version worked is because that styling is applied directly to the image.
To use the inline style rule - add img to the .cap as shown below.
.cap img{
position: absolute;
height:100px;
width:200px;
left:150px;
}
This is a login form that I am creating and it already has an image (some logo). I would like to add some background image for the same page to make it beautiful. Unfortunately my CSS does not help me to do it. What should I do to add a background image to my web page when there is already an image
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Login
</title>
<link rel="stylesheet" type="text/css" href="css/Login.css">
</head>
<body >
<header >
<h1>Loan Management System </h1>
</header>
<!--This is the image -->
<img src="Images/logo_large.jpg" height="200px" width="200px" title="Logo" class="logo">
<form>
<label>Username</label>
<input type="text" name="username"/>
<label>Password</label>
<input type="password" name="password"/>
<button type="submit" name="login">Login</button>
</form>
</body>
</html>
CSS
header
{
position:absolute;
font-size:13px;
color:#000040;
text-shadow:5px 5px 5px #CCCCD9;
margin-top:80px;
margin-left:280px;
}
body
{
position:relative;
font-family:Georgia,serif;
background-color:#A52A2A;
background-image:url(Images/login2.jpg);
}
.logo
{
position:absolute;
display:block;
padding:5px;
}
form
{
position:absolute;
width:300px;
height:300px;
border:5px solid #194775;
border-radius:20px;
margin-top:161px;
margin-left:362px;
box-shadow:2px 2px 2px #194775;
}
label,input
{
display:block;
margin-top:25px;
margin-left:55px;
}
label
{
font-weight:700;
}
input
{
width:200px;
height:2em;
border:2px solid #036;
border-radius:10px;
}
input:hover
{
border-radius:10px;
border-color:#FF8A00;
}
input:focus
{
background-color:#DBDBFF;
}
button
{
display:block;
margin-top:25px;
margin-left:55px;
width:90px;
height:40px;
color:#FFF;
border:2px solid #000;
border-radius:10px;
background-color:#243D91;
}
button:hover
{
background-color:#0FCCF0;
border-color:#003D91;
}
I'm posting this as an "answer" because it's simply too long for a comment. As I mentioned in my comments, css paths to urls are parsed relative to the directory where the css is stored rather than the directory of the page that includes it. As an example:
You have a website with a root and 2 subfolders, CSS and Images. Your directory structure might look like:
mypage.html
myotherpage.html
CSS\styles.css
CSS\layout.css
Images\login.jpg
Images\login2.jpg
If mypage.html has a reference link to styles.css, then any url images that are included from styles.css will need to be referenced from the CSS directory.
background-image: url(Images/login2.jpg);
/* This fails because there is no CSS\Images directory */
background-image: url(../Images/login2.jpg);
/* This works because that is the natural path to the Images directory from CSS */
To avoid this confusion, I prefer to use absolute paths in my css whenever possible, but this becomes understandably difficult when you have a potential to cross domain or protocol boundaries. If you have multiple domains pointing to the same site folder, then you'll have a style reference from myfirstsite.com to mysecondsite.com and this may be inappropriate (particularly if branding is an issue). You may also have an https part of the site that would then have a reference to a non-https version of the site which would create ssl errors/alerts.
Well, the obvious suspect would be that you check the path to the image.. If thats alright then you might want to have a look at the z-index property of CSS. It deals with the way images are ordered in vertical space..You can read about it here ..In your case the body background would be at the back(z-index:0) and then the logo at the front(z-index:1) .
I think as mentioned on the comments. You should check your path to see if it renders.
Check out my Fiddle
body{
position:relative;
font-family:Georgia,serif;
/* I have used background-color property and it gets applied, but I really do not want it*/
background-color:brown;
/* Here is my background image.But it is not applied in the page */
background-image:url("https://mozorg.cdn.mozilla.net/media/img/firefox/os/bg/1400/birthday.jpg");
}
So far, I only have a div that would contain this information. As for the content inside, I'd love some help or guidance on how I could elegantly use HTML with CSS to format the information here.
What HTML elements would you use? What I have trouble with is setting that blue gradient there. Do I set it as a background image? Any suggestions?
This is just a simple example for myself, I'm trying to get more familiar with CSS. Thank you for your time.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
.card {
min-width:250px;
border-radius:10px;
background-color:#09f;
padding:10px;
border:3px solid #03f;
font-family:Sans-Serif;
display:inline-block;
}
.avatar {
border:1px solid #000;
}
.card h1 {
display:inline;
vertical-align:top;
font-size:1.2em;
font-weight:bold;
}
.info {
clear:both;
}
.title {
font-weight:bold;
float:left;
}
.value {
float:left;
margin-left:20px;
}
</style>
</head>
<body>
<div class="card">
<img src="http://en.gravatar.com/userimage/16359447/fc9081765352a27b17cdbf4c24fe3544.jpeg" class="avatar">
<h1>Thomas Shields</h1>
<div class="info">
<span class="title">Info #1:</span>
<span class="value">Value #1</span>
</div>
<div class="info">
<span class="title">Info #2:</span>
<span class="value">Value #2</span>
</div>
<div class="info">
<span class="title">Info #3:</span>
<span class="value">Value #3</span>
</div>
</div>
</body>
</html>
http://jsbin.com/ajevap/2/edit
If you need me to explain any of it, comment and i'll udpate the answer.
I would use images lists spans and divs to separate everything. The best way you can think about html and css is html is the steel i-beams of the webpage. The create the structure but attribute nothing more than that. Then css is the walls, speckle, and paint. So when you look at the design you have you should think about what the "building structure" would be.
Probably an image on top, than a name. The user name is probably by it's self. lastly there is a list of further user info.
<div>
<img>
<span>
<ul>
<li>
<span>
<span>
would be an acceptable structure. Now to create your style you need to move and position things like you want.
div {
height
width
position: relative
div img {
position
height
width
div span {
postion
color
text-decoration
div ul {
position
color
div ul li
color
This could get you an the basic structure of the image you provided depending on what you actually provide to each argument.
http://jsfiddle.net/efortis/s9zSN/2