I'm trying to make the above text (home help customer etc) similar to the one below Home and all in green box with white text and hover effect but I am unable to add the green background and make the words display similar to the once below with a hover effect I have tried some things out but it did not help me out and also I have tried a lot to move the cart to the top right to make it look like a normal shopping website but it didn't work if you guys see any mistakes or suggestions to make it better I would really appreciate it as I am a beginner https://imgur.com/2Bhxzs2
Help fix the top header please refer the image link as it shows were exactly is the green box and all thank youthe image has the header of the website were there are different buttons like guest customer help etc and I am trying to make it like the one underneath in the green box with a hover effect
<html>
<head>
<title>Rajeshri Traders </title>
<link href="CSS/style.css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="subheader">
<div class="container">
<p> CCTV Supplier</p>
Guest Consumer Download App
Help
</div>
</div>
<!--==main header==-->
<div id="main-header">
<!--logo-->
<div id="logo">
<span id="ist"></span><span id="iist"> Rajshri Traders</span>
</div>
<!--==search area==-->
<div id="search">
<form action="">
</form>
<input class="search-area" type="text" placeholder="Search here">
<input class="search-btn" type="submit" value="SEARCH">
<!--="user-menu"==-->
<div id="user menu">
</div>
<li>Cart
<li>Login
</div>
</div>
</div>
<!----=====navigation bar==--->
<div id="navigation">
<nav>
Home
New Arrivals
Products
Deals
Accesories
Order
</nav>
</div>
</div>
</body>
</html>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
#wrapper {
font-family: tahoma;
}
/*logo styling*/
#main-header {
width: 100%;
height: 125px;
background: #93A7FF;
display: flex;
flex-wrap: no-wrap;
}
#main-header > div {
flex: 1 1 0;
}
#ist {
color: black;
font-size: 65px;
font-weight: bold;
margin-left: 15px;
font-family: fantasy;
}
#iist {
color: black;
font-size: 45px;
font-weight: bold;
margin-left: 15px;
font-family: fantasy;
}
/*searchinga area styling*/
#search {
padding: 20px;
margin-left: 50px;
text-align: center;
}
.search-area {
width: 350px;
height: 30px;
background: #fff;
border: none;
border-radius: 10px;
padding-left: 15px;
}
.search-btn {
width: 65px;
height: 34px;
border-radius: 10px;
border: none;
color: #fff;
background: brown;
margin-left: 15px;
}
/*this is for user menu styling*/
#user-menu {
margin-top: 20px;
margin-right: 20px;
text-align: right;
}
#unser-menu ul {
list-style-type: none;
width: 100%;
}
#user-menu li {
display: inline-block;
padding: 0px 10px;
}
#main-header > div {
flex: 1 1 0;
}
/*this style is for navigation bar */
#navigation{
width: 100%;
height: 35px;
background: #1aaa1a;
float: left;
box-shadow: 10px 14px 45px 3px #1aaa1a;
}
nav{
width: 1200px;
margin: 0 auto;
}
nav a{
margin-left: 35px;
color: white;
text-decoration: none;
}
nav a:hover{
color:#000;
transition: all .7s ease;
}
To give a background colour to your 'home, help, customer etc' text, you need to refer to the element in which they are all included. In this case, they are all contained within the .container class. So by adding styling to the .container class, you'll be adding styling to the div containing the text in question.
Simply add a background colour to the .container class like this:
.container {
background: #1aaa1a;
}
As for the hover effect, you can specify the effect you want for each link of the 'home, help, container etc'. For example, if you want to change the colour of the text when you hover on it, you can do something like this
.container a:hover {
color: black;
}
The .container a is how you reference the links contained in your .container class.
Alright.So you need to see what styling you have applied to the text in the green box. you need to copy the styling you use in #navigation which is the container for everything in the green box. You have included your links in the green box in a nav element, you have then styled the nav element as follows:
nav{
width: 1200px;
margin: 0 auto;
}
nav a{
margin-left: 35px;
color: white;
text-decoration: none;
}
nav a:hover{
color:#000;
transition: all .7s ease;
}
You need to style your links in the .container div in the same way. The easiest way to do this would be to include your home, help, customer links in a nav element as follows:
<div class="container">
<p> CCTV Supplier</p>
<nav>
Guest Consumer
Download App
Help
</nav>
</div>
Related
Ok I'm recreating a PSD I found online for practise. In the header there is a search bar and button. To the right of the button there is extra content taking up space, which I can't get rid of.
I have added a jsfiddle
https://jsfiddle.net/jb7j6ysz/
Please ensure the preview is expanded to the left as much as possible
<!DOCTYPE html>
<html>
<head>
<title>Education Compaony</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<div class="branding">
<h2>Education Department</h2>
<h5>A free PSD template</h5>
</div> <!-- /.Branding -->
<div class="directory">
<div class="search">
<input type="text">
<input type="submit" value="Search">
</div> <!-- /.Search -->
<div class="index">
<ul>
<li>A - Z index | </li>
<li>Studenet Login | </li>
<li>Staff Login </li>
</ul>
</div> <!-- /.Index -->
</div> <!-- /.Directory -->
</div> <!-- /.Header -->
</body>
</html>
/* Font Import */
#import url('https://fonts.googleapis.com/css?family=Lora');
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.header{
height: 95px;;
background-color: #FCD05D;
color: #3A302E;
font-family: 'Lora', sans-serif;
}
.branding {
float: left;
margin-left: 200px;
}
.branding h2 {
margin-top: 10px;
text-transform: uppercase;
font-size: 28px;
}
.branding h5 {
margin-top: -20px;
font-size: 16px;
}
.directory {
float: right;
margin-right: 200px;
}
.search {
background-color: black;
border: 5px solid black;
border-radius: 8px;
padding: 1px 0px 5px 12px;
}
.search input[type=text] {
background-color: #FCD05D;
border-radius: 3px;
}
.search input[type=submit] {
background-color: #595657;
color: #FCD05D;
border: 2px solid #595657;
border-radius: 3px;
}
.index ul {
list-style-type: none;
text-decoration: none;
margin-top: -0;
}
.index li {
margin-top: -20px;
font-size: 14px;
display: inline-flex;
word-spacing: 1px;
}
The extra space is coming from the ul where your links are. Since the width is auto, the list section has a greater width than your search section so the search section takes on that width.
You can set padding: 0 to the ul list to reduce some of the space. It has a natural padding to the left. This will still leave some space on the right because of the length of your list. You can set width to the search area to prevent the list from wrapping. Or you could make the search section float left but you will need to adjust padding to make it look symmetrical
Here is an example
https://jsfiddle.net/jb7j6ysz/3/
.search {
background-color: black;
border: 5px solid black;
border-radius: 8px;
padding: 1px 12px 5px 12px;
float: left;
}
.index ul {
list-style-type: none;
text-decoration: none;
margin-top: 0;
padding: 0;
}
I used float for the new fiddle and added padding 0 to the ul. Also adjusted the padding on .search
The index div is in the way. Update your css with this
.index{
position: absolute;
display:block;
left: 40%;
}
The extra space is coming because of your Ul items. Add this in your css
ul{
padding-left:0px;
}
I think your problem is to do with the width of the .index div. Both it and your search bar are contained within the same .directory div. Because both are block-level elements with their width set to the default auto, they take on the width of their parent, which in this case is set by the largest child, the .index div.
By setting the search bar to display: inline-block;, it will only take up as much width as it needs.
.search {
...
display: inline-block;
}
Additionally, the ul used for the .index div has padding-left by default, which you may want to set otherwise.
I am a beginner in coding, and I have to create a website for a school project. I tried to resolve the problem myself but it just don't work.
I wanted to add a search bar to my website so I followed a tutorial, and it worked on a blank new html page, but when I copied paste on my html page project I have this lightgray frame that comes around the search bar , where does it come from and what to delete/change ? thank you :)
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
Created on : 01-mars-2017, 14:52:23
Author : jonathan
*/
/* syling my paragraphs */
div {
font-family:Times New Roman;
}
body {
font-family: Arial;
background-color: white;
}
p {
color: darkgreen;
font-size:30px;
font-family:Arial;
}
.highlight {
color:darkgray;
}
/* styling navigation */
#search {
width: 200px;
padding: 7px;
}
#submit {
padding: 7px;
background: #669999;
color: white;
margin-letf: -5px;
cursor: pointer
}
#submit:hover {
background:#333;
transition: all 0.40s;
}
.header-logo {
display:block;
height:240px;
width:240px;
background:url(images/wolf.png) no-repeat;
text-indent:50%;
white-space: nowrap;
overflow: hidden;
margin: 0 auto;
}
nav {
border-bottom:2px solid black;
border-bottom-color: #669999;
}
li{
display:inline-block;
text-align: center;
margin-right:20px;
}
nav a:link, nav a:visited {
color:gray;
font-size:15px;
text-decoration: none;
}
nav a:hover {
background-color: #99ddff;
}
nav a:active {
background-color: yellow
}
/* Bordered form */
form {
border: 3px solid #f1f1f1;
}
/* Full-width inputs */
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* Set a style for all buttons */
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
/* Extra style for the cancel button (red) */
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
/* Center the avatar image inside this container */
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
}
/* Avatar image */
img.avatar {
width: 40%;
border-radius: 50%;
}
/* Add padding to containers */
.container {
padding: 16px;
}
/* The "Forgot password" text */
span.psw {
float: right;
padding-top: 16px;
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title> HTML by Jo</title>
<meta charset="UTF-8">
<meta name="description" content="I by mistake deleted all the files
so i'm starting all over again">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="wolf.css">
</head>
<body>
<!-- navigation -->
<header>
<h1>
<a class="header-logo" href="http://localhost:8383/Grey%20wolf/index.html"></a>
</h1>
</header>
<nav>
<div style="text-align:center">
<ul>
<li>Login</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul></div>
<form action="https://google.com">
<input type="text" placeholder="Search..." maxlength="20" id="search">
<input type="submit" value="Go!" id="submit">
</form>
</nav>
<!-- the content -->
<div>TODO write content</div>
<p>Here is a paragraph.</p>
<p class="highlight">Another paragraph.</p>
<h3 class="highlight">this is a heading h3</h3>
link to codeacademy
</body>
</html>
Your form has this property set there:
form{
border: 3px solid #f1f1f1;
}
To fix it change it to:
form{
border: 0;
}
or try using the parent element which is the better way to go,
nav form{
border: 0;
}
thanks for your answers it works :)
I tried to modify the different borders but I have actually not seen that one :/
and now I try to add pictures but the browser doesn't show them what should I do ?
I place this before a paragraph :
<img src="images/model1.jpg" alt="model women 1">
<img src="images/model2.jpg" alt="model women 2">
<img src="images/model3.jpg" alt="model women 3">
Have you even taken a look to your CSS? It's fairly commented
/* Bordered form */
form {
border: 3px solid #f1f1f1;
}
It appears to be the border of nav. Try the following CSS:
nav {
border-bottom: none;
}
I am trying to create a 3 column webpage. My bullets for the unordered and ordered lists are not aligning with the corresponding text in the column. Also, for my middle column the text is scrunched together. How do I space the paragraphs apart?
* {
font-family: Melvetica;
margin: 0px;
padding: 0px;
}
body {
background-color: #6B6A67;
}
#container {
width: 920px;
background-color: white;
padding: 10px;
margin-left: auto;
/*will center your page*/
margin-right: auto;
/*will center your page*/
}
h1,
h2 {
text-align: center;
}
li {
text-align: center;
padding: 5px;
}
h4 {
padding: 5px;
text-align: center;
}
/*To style an ID within an ID under it use the parent ID--start with header then call the ID you want to select*/
#container #header {
height: 80px;
background-color: #ADA9A0;
padding-top: 20px;
padding-left: 10px;
padding-right: 20px;
margin-bottom: 5px;
/*To add empty space to bottom of the element*/
}
#container #navigation {
margin-top: 5px;
background-color: #ADA9A0;
color: white;
padding-top: 5px;
padding-bottom: 5px;
border: 2px solid #ADA9A0;
}
#container #content {
background-color: #D9D5CE;
min-height: 300px;
margin-top: 5px;
margin-bottom: 5px;
/*To add empty space to bottom of the element*/
}
#container #content #sidebar1 {
background-color: #ADA9A0;
float: left;
width: 25%;
min-height: 300px;
margin-bottom: 3px;
}
#container #content #column1 {
background-color: white;
min-height: 300px;
margin-bottom: 3px;
width: 50%;
float: left;
margin: 0;
}
#container #content #sidebar2 {
background-color: #ADA9A0;
float: right;
width: 25%;
min-height: 300px;
margin-bottom: 3px;
}
#container #footer {
padding-top: 1px;
border-top: 1px solid black;
}
.CR {
text-align: left;
position: fixed;
}
.Instructor h4 {
text-align: right;
position: fixed right;
}
/*NAV LINKS - add an "a" to style items under the ID'S*/
#container #navigation a {
color: white;
text-decoration: none;
/*gets rid of the underlining effect*/
padding-top: 5px;
padding-bottom: 6px;
padding-left: 10px;
padding-right: 10px;
}
/*To add a hover put a:hover*/
#container #navigation a:hover {
color: red;
background-color: white;
}
#container #content #left {
font-family: Arial;
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="HTML.CSS.css" />
<title>My Portfolio</title>
</head>
<body>
<div id="container">
<div id="header">
<h1> CIS 2336- Internet Applications </h1>
<h2> DeVoll </h2>
</div>
<div id="navigation">
Home
HTML/CSS
PHP
</div>
<div id="content">
<div id="sidebar1">
<h4> Instuctor: Natalia Fofanova </h4>
<ul>
<li>Lectures</li>
<li>Syllabus</li>
<li>Helpful Videos</li>
</ul>
</div>
<div id="column1">
<h2> HTML and CSS </h2>
<p>HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets) are two of the core technologies for bulding a website.
<p>
<p>HTML provides a structure for the page by using "Hypertext" which refers to the hyperlinks that an HTML page may contain. Also, "Markup language" refers to the way tags are used to define the page layout and elements within the page.</p>
<p>CSS provides the visual layout of web pages. They can be used to define text styles, table sizes, and other aspects of Web pages that previously could only be defined in a page's HTML. CSS helps Web developers create a uniform look across
several pages of a Web site. Instead of defining the style of each table and each block of text within a page's HTML, commonly used styles need to be defined only once in a CSS document.</p>
</p>
</div>
<div id="sidebar2">
<h4> Homework and Projects </h4>
<ul>
<li>Module 1</li>
<li>Module 2</li>
<li>Module 3</li>
<li>Welcome Button</li>
<li>2-column Webpage</li>
</ul>
</div>
</div>
<footer>
<div id="footer">
<div class="CR">
<h4> Copyright 2016 </h4>
</div>
<div class="Instructor">
<h4>Copyright Natalie Fofanova </h4>
</div>
</footer>
</body>
</html>
Declare a line-height to the 2nd section.
Example
#second p {
line-height: 20px;
}
http://www.w3schools.com/cssref/pr_dim_line-height.asp
p{
text-align: justify;
text-align-last: left;
padding-left: 10px;
padding-right: 10px;
}
Add this to your CSS hope it will work
As your code should change like the below code:
#content ul{
margin:0;
padding:0;
display:block;
}
#content ul li {
text-align: center;
padding: 0px;
list-style-type:none;/* if you really wants bullets remove this line*/
}
* {
font-family: Melvetica;
margin: 0px;
padding: 0px;
}
body {
background-color: #6B6A67;
line-height:20px;
}
#column1 p{padding:4px;}
.clearfix{clear:both;}
To change your min-height should be min-height: 320px; instead of 300px.
You want to more clarity in this question. please tell me we will suggest some more points.
i will update your code jsfiddle.
Demo
p{
padding: 0 0 10px 0;
}
just padding down would make sure space between all paragraph
I have posted some of this code before, trying to get the sidebar links in the right places and look a special way, I have decided to go in a different direction with that. What I need now is know what I am supposed to do to get the div that I have labeled "content" next to the sidebar instead of below it. I've tried everything. The sidebar and the content div are in the same div together and I've tried displaying in inline, inline-block. Nothing works. I just want them next to each other and level. Can you help me out again? Thanks so much!
Code displayed here: http://jsfiddle.net/eNUpJ/11/
HTML
</div>
<div id="wholething">
<div id="sidebar">
<h3>Navigation Links</h3>
<div id="sidelinks">
<div id="buttons">Home
</div>
<div id="buttons">Biography
</div>
<div id="buttons">News
</div>
<div id="buttons">Music
</div>
<div id="buttons">Contact
</div>
</div>
</div>
<div id="content">
<p>News stuff and things</p>
</div>
</div>
</body>
CSS
#sidebar {
background: #464646;
width: 250px;
height: 500px;
margin-left: 50px;
border-radius: 15px;
position: relative;
}
h3 {
font-family:'Coda', cursive;
color: white;
background: #6B6B6B;
font-size: 24px;
text-align: center;
padding: 15px 0 8px 0;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
#sidelinks {
font-family:'Armata', sans-serif;
width: 250;
font-size: 25px;
text-decoration: none;
color: white;
background-color: #4D4D4D;
padding: 10px;
line-height: 40px;
}
#buttons a {
text-decoration: none;
color: white;
}
#content {
position: relative;
width: 750px;
border-radius: 15px;
background: #464646;
}
#wholething {
display: inline;
}
Give both #content and #sidebar float: left. You should also remove display:inline from #wholething. Also, you should know that if you want to add anything below the #content and #sidebar - for instance, a footer, with a copyright statement or such - you'll need to give it clear:both, which will force it to be below the two floated divs.
In each list item I have a text box within a div element.
<html>
<body>
<!-- Window -->
<div id="sample_container_id">
<div class="bucket" id="defaultBucket">
<h3>Default Bucket</h3>
<input type="button" value="Add" class="button">
<div class="innerBucket">
<ul id="tasks">
<li>
<div class="TaskDiv">
<input type="text" class="TaskTextInput">
</div>
</li>
<li>
<div class="TaskDiv">
<input type="text" class="TaskTextInput">
</div>
</li>
<li>
<div class="TaskDiv">
<input type="text" class="TaskTextInput">
</div>
</li>
</ul>
</div> <!-- innerBucket -->
</div> <!-- defaultBucket -->
</div>
</body>
</html>
This is the result:
body
{
background-color: #F8F8F8;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-weight: normal;
line-height: 1.2em;
margin: 15px;
}
h1, p
{
color: #333;
}
#sample_container_id
{
width: 100%;
height: 400px;
position: relative;
border: 1px solid #ccc;
background-color: #fff;
margin: 0px;
}
.innerBucket
{
width: 290px;
height: 355px;
margin-top: 40px;
margin-left: 5px;
position: relative;
background-color: white;
}
.bucket
{
width: 300px;
height: 400px;
background-color: #ddd;
position: absolute;
}
.bucket h3
{
float: left;
padding-left: 10px;
padding-top: -10px;
}
.bucket ul
{
margin: 0;
padding-left: 30px;
position: relavtive;
list-style: none;
}
.bucket ul li
{
margin: 0;
padding: 0;
text-indent: 0.5em;
margin-left: -0.5em;
display: block;
position: relative;
}
.bucket .button
{
background-color:#fbb450;
border:1px solid #c97e1c;
float: right;
margin: 5px;
display:inline-block;
color:#ffffff;
font-family:Trebuchet MS;
font-size:17px;
font-weight:bold;
padding:2px 11px;
text-decoration:none;
text-shadow:0px 1px 0px #8f7f24;
}
Result
As you may notice the first item is indented, and I would like the list items to all be aligned on the left. How do I fix this with the CSS (there probably is a lot of things wrong with my CSS, I was trying everything)?
EDIT
I added some more code. You should be able to replicate the problem now.
I didn't want to post a wall of code :)
Solution
I found the solution to the problem. The problem was actually the <h3> element. The bottom margin was forcing the first element off to the side.
Adding this fixed the problem:
.bucket h3
{
...
margin-bottom: 0;
}
Don't float the divs, if you do make sure to clear them or you get
what FakeRainBrigand got in his pen.
Spell relative right For that
matter take the positioning out of that code, it's pointless.
list items by definition are block elements, you don't need to declare
that either.
Close your input tags.
The float is likely the issue, pushing the divs against some invisible element.
.TaskDiv
{
margin: 0;
padding: 0;
}
ul
{
margin: 0;
padding-left: 30px;
list-style: none;
}
ul li
{
margin: 0;
padding: 0;
text-indent: 0.5em;
margin-left: -0.5em;
}
Example: http://jsfiddle.net/calder12/Yw4tB/
I found the solution to my own problem. The issue was the margin of the header forcing the div over (see the end of my question). The solution was simple once I figured that out.
Simply adding this to the h3 styling fixed my problem:
margin-bottom: 0;