Hi I'm making a site for a project and can't resize or change anything in a logo that I have.
I don't really know what am I doing wrong.
Here's the part with html and when I try to select the logo in css , it won't change in any way.( I've tried to change it's position to the right of navbar,but it still sticks to the left)
*{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.logo {
float: right;
}
header {
background-color: #c4c4c4;
}
nav {
float: right;
}
nav ul {
margin: 0,auto;
padding: 0,auto;
list-style: none;
}
nav li {
display: inline-block;
margin-right: 2ex;
padding: 5ex;
}
nav a {
color: #ffffff;
font-weight: 600;
font-size: 4ex;
text-decoration: none;
}
<html>
<div id="wrapper">
<div id="imports">
<meta charset="UTF-8">
<link rel="stylesheet" href="testsite.css">
</div>
<header>
<div id="menu">
<img src="https://dummyimage.com/100x100/000/fff.png" alt="logo">
<home>
<nav class="menu">
<ol>
<li>Home</li>
<li>About Me</li>
<li>Skills</li>
<li>Contact</li>
</ol>
</nav>
</home>
</div>
</header>
</html>
I think your .logo class is missing from img
<img src="Logo.png" alt="logo" class="logo">
give img tag logo class
<img src="Logo.png" alt="logo" class="logo">
Related
I have this problem when i want to put some text in my body or place something like a div or a section there , the text goes above the navbar which is in header.I tried to put a margin top to the body but it only made a bigger gap between the top.
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.logo {
float: left;
height: auto;
width: auto;
}
body{
background-color: #444064;
margin-top:10ex;
}
nav {
float: right;
margin-bottom: 50px;
}
nav ul {
margin: 0,auto;
padding: 0,auto;
list-style: none;
}
nav li {
display: inline-block;
margin-right: 2ex;
padding: 5ex;
}
nav a {
color: #ffffff;
font-weight: 600;
font-size: 4ex;
text-decoration: none;
}
nav a:hover {
color: #a34963;
}
section{
text-align: center;
margin-top: 5ex;
}
h1{
font-size: xx-large;
}
<html>
<div id="wrapper">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="testsite.css">
</head>
<header>
<div id="menu">
<img src="Logo.png" alt="logo" class="logo">
<home>
<nav class="menu">
<ol>
<li>Home</li>
<li>About Me</li>
<li>Skills</li>
<li>Contact</li>
</ol>
</nav>
</home>
</div>
</header>
<body>
Hello world
</body>
</div>
</html>
Please help me
You have many issues with your code as you have an invalid HTML structure. however the issue you have is: nav { float: right; } that causes you navbar to float and as such the content can flow around the nav element and be displayed above. If you remove the line it not happen anymore.
However, I strongly recommend to get back to some decent tutorials and start at the basics. Like I said your HTML structure is an invalid mess. Some css declarations are incorrect/unnecessary as well (e.g. webkit prefix for box-sizing). Also don't use float as styling technique. Use a modern solution like flexbox or css-grid.
Last but not least, this is how the html structure should look like.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.logo {
float: left;
height: auto;
width: auto;
}
body {
background-color: #444064;
margin-top: 10ex;
}
nav {
margin-bottom: 50px;
}
nav ul {
margin: 0 auto;
padding: 0 auto;
list-style: none;
}
nav li {
display: inline-block;
margin-right: 2ex;
padding: 5ex;
}
nav a {
color: #ffffff;
font-weight: 600;
font-size: 4ex;
text-decoration: none;
}
nav a:hover {
color: #a34963;
}
section {
text-align: center;
margin-top: 5ex;
}
h1 {
font-size: xx-large;
}
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="testsite.css">
</head>
<body>
<header>
<div id="menu">
<img src="Logo.png" alt="logo" class="logo">
<home>
<nav class="menu">
<ol>
<li>Home</li>
<li>About Me</li>
<li>Skills</li>
<li>Contact</li>
</ol>
</nav>
</home>
</div>
</header>
<div id="wrapper">
Hello world
</div>
</body>
</html>
I'm trying to position elements in a header displayed as flexbox so that an image (logo) on the left will be vertically aligned to the bottom of a nav on the right. Seems easy enough, however I also have a search button that needs to be positioned about the nav. When I do this the search button seems to push the nav below the baseline of the flexbox and no amount of padding or negative margins seems to fix it.
The logo is contained inside a div that takes up 40% of the screen width and the nav inside a div that takes up 60%. I've taken a screenshot and to illustrate I've added a red background to the logos container div.
Code is below:
<body>
<header class="pageHead">
<div class="logoBox">
<img class="logo" src="images/Logo.png">
</div>
<div class="headRight">
<nav id="mainNav">
<i class="fas fa-search searchIcon"></i>
<li class="active">Products</li>
<li>Support</li>
<li>About</li>
<li>Contact</li>
<li class="orange">Partners</li>
</nav>
</div>
</header>
</body>
body {
background-color: #f7f7f7;
}
header.pageHead {
display: flex;
align-items: baseline;
padding: 30px 10%;
color: #555;
}
.logoBox{
width: 40%;
}
.headRight {
width: 60%;
}
nav#mainNav {text-align: right;}
nav#mainNav li {
display: inline-block;
padding: 0 0 0 2em;
font-size: 1.2em;
font-family: 'Open Sans', sans-serif;
letter-spacing: 0.1em;
}
.searchIcon {
width: 100%;
text-align: right;
}
Any help would be greatly appreciated. Thanks.
You can tried this.
body {
background-color: #f7f7f7;
}
header.pageHead {
display: flex;
align-items: center;
padding: 30px 10%;
color: #555;
}
.logoBox{
width: 20%;
background: red;
}
.headRight {
width: 80%;
}
nav#mainNav {text-align: right;display: flex;}
nav#mainNav li {
display: inline-block;
padding: 0 0 0 2em;
font-size: 1.2em;
font-family: 'Open Sans', sans-serif;
letter-spacing: 0.1em;
}
.searchIcon {
width: 100%;
text-align: right;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header class="pageHead">
<div class="logoBox">
<img class="logo" src="images/Logo.png">
</div>
<div class="headRight">
<nav id="mainNav">
<i class="fa fa-search searchIcon"></i>
<li class="active">Products</li>
<li>Support</li>
<li>About</li>
<li>Contact</li>
<li class="orange">Partners</li>
</nav>
</div>
</header>
</body>
</html>
I am currently designing a simple web page which will consist of a logo, a horizontal navbar to the right of that, a full width image with a fixed height underneath and if on a certain page, an extra horiontal navbar underneath. Something like this:
HTML
<img src="img/imgicon.jpg" />
<nav id="mainnav" style="float: right />
<img src="img/fixedimg" style="width: 100%; height: 30%; />
<nav id="secondnav" />
The problem I have is that the fixed image is always full size and not fixed. I've tried using a parent container (div) and setting a fixed height on that, however the image always goes full size. The only solution I could find is setting the position of the image to absolute but then the nav bar underneath is hidden under the image, and I don't want to use 20 <br> to get it underneath.
What would be the best possible way to solve this?
Here's a snippet:
body {
font-family: cambria;
margin: 0;
}
/*TOP NAVBAR */
#topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
float: right;
height: 71px;
}
#topnav li {
margin-top: 13px;
float: right;
}
#topnav li a {
display: block;
padding-top: none;
padding: 14px 16px;
text-decoration: none;
font-weight: bold;
color: #4d4d4d;
margin-right: 3px;
}
#topnav li a:hover {
color: blue;
}
.active1 {
color: blue;
}
/*SECONDARY NAVBAR */
#secondnav {
float: left;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #666666;
border-bottom: 5px solid #8c8c8c;
width: 100%;
}
#secondnav li {
float: left;
}
#secondnav li a {
display: block;
padding-top: none;
padding: 14px 16px;
text-decoration: none;
color: white;
margin-right: 3px;
font-weight: bold;
}
#fullwidth {
width: 100%;
}
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="stylesheet/stylesheet.css" />
<title>Website</title>
</head>
<body>
<!--LOGO-->
<div style="width: 100%; height: 71px;">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Intel-logo.svg/2000px-Intel-logo.svg.png" style="float: left; margin-left: 150px; height: 71px; width: 220px;" />
<!--MAIN NAV-->
<ul id="topnav">
<li>LOGIN
</li>
<li>GALLERY
</li>
<li>CONTACT
</li>
<li>INFORMATION
</li>
<li>HOME
</li>
</ul>
</div>
<div style="height: 5%; width: 100%;">
<img src="http://images.freecreatives.com/wp-content/uploads/2016/04/Blue-Scratched-Textured-Background.jpg" alt="welcome" style="width: 100%; height: 5px%;" />
</div>
<!--SECONDARY NAV-->
<ul id="secondnav">
<li>HOME
</li>
<li>HOME
</li>
<li>HOME
</li>
<li>HOME
</li>
<li>HOME
</li>
</ul>
</body>
</html>
As you can see from the snippet, even though the image is set to small it goes full size, as if I haven't set any attributes at all.
Use css and give the img a class
#fixed {
width: 100% height: 30%;
}
<img src="img/imgicon.jpg">
<nav id="mainnav" style="float: right;>
<img class=" fixed; src="img/fixedimg,png">
<nav id="secondnav"></nav>
I have a logo on top left of my website. And I'm trying to put navigation menu vertically aligned to the right side of the logo. But it always appear at the bottom of the logo. I tried float:left.
I guess it's a simple thing but I can't do it. I may need a wrapper. What am I doing wrong here?
Here is my code:
.logo {}
#topnav {
width: 100%;
vertical-align: middle;
}
nav ul {
background: #FFFFFF;
padding: 0 10px;
list-style: none;
position: relative;
float: left;
display: inline-table;
font-size: 90%;
color: #666666;
}
<div class="container">
<div class="logo">
<img src="assets/images/logo.png" alt="" width="250" height="120" />
<div class="topnav">
<nav>
<ul>
<li>Home</li>
<li>Photos</li>
</ul>
</nav>
</div>
</div>
Do it simply by adding float: left to logo class like that: http://jsfiddle.net/dssHf/
I has also restructured your HTML code because it was been invalid.
<div class="container">
<div class="logo"><img src="http://placehold.it/250x120" alt="" /></div>
<div class="topnav">
<nav>
<ul>
<li>Home</li>
<li>Photos</li>
</ul>
</nav>
</div>
</div>
.container {
clear: both;
}
.logo {
float: left;
}
.logo img {
width: 250px;
height: 120px;
}
.topnav {
margin-left: 260px;
}
Change .logo to this:
.logo img {
float:left;
}
http://jsfiddle.net/87KCt/4/
CSS is cascading style sheets. That means a few things but here cascading means that the styles for class .logo cascade into img tags only.
I'm coding my new portfolio and the navigation on it is in the wrong place and I can't figure out why.
http://i26.tinypic.com/25psi10.png
I want the text to be inline with the lines on the sides but instead it's moved to the right and down and I can't figure out why it's done this.
This is the relevant coding:
body {
padding: 0px;
margin: 0px;
background:url('images/Background.png');
font-family: century gothic;
}
#nav a {
text-decoration: none;
color: white;
}
#container {
margin: 0 auto;
width: 960px;
}
#logo {
background:url('images/Logo.png');
height: 340px;
width: 524px;
float: left;
margin-left: 0px; <!--check-->
}
#nav {
background:url('images/Nav_Container.png');
width: 427px;
height: 33px;
float: right;
margin-top: 100px;
padding: 0px;
}
#main_nav li {
list-style: none;
display: inline;
font: 18px century gothic, sans-serif;
color: white;
margin-right: 18px;
padding: 0px;
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<title>MozazDesign Portfolio</title>
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
</div><!--end logo-->
<div id="nav">
<ul id="main_nav">
<li>home</li>
<li>about me</li>
<li>gallery</li>
<li>blog</li>
<li>contact</li>
</ul><!--end main nav-->
</div><!--end nav-->
</div><!--end header-->
</div>
</body>
</html>
What happens when you decrease the margin-right: 17px;
I believe to your last element you should add less margin-right
You should try to decrease the "font-size: 18px;" and/or "margin-right: 17px;" until the text is positioned as you desire.
[update] Also try to add
#main_nav { float: left; }
to have better control over the position of your links. [update]
It's most likely default padding/margins on your ul and li items. Try zeroing everything out in your CSS like so and then adding it back slowly until you find the point where the menu layout breaks:
#main_nav,
#main_nav li {
margin: 0;
padding: 0;
list-style: none;
}
#main_nav li {
display: inline;
margin-right: 17px; /* lower this value and see if that fixes the layout */
font: 18px century gothic, sans-serif; /* specify a fall back font that's at least the same type as century gothic */
color: white;
}
Instead of adding margin-right, try inserting invisible spacers, like so:
<div id="nav">
<ul id="main_nav">
<li>home</li>
<li> </li>
<li>about me</li>
<li> </li>
<li>gallery</li>
<li> </li>
<li>blog</li>
<li> </li>
<li>contact</li>
</ul><!--end main nav-->
</div><!--end nav-->
That way you don't wind up with unneeded spacing at the end. Give the spacers classnames if you like and set their size until they're just right.