I want my logo on the left side and navigation bar on the right side.
I tried img outside nav class and it did align to left but i want nav and my logo together. How do i do this? Thank you.
Here is my Code:
.img {
text-align: left;
background-position: left;
}
.nav {
border-bottom: 1px solid lightgray;
text-align: right;
line-height: 70px;
height: 70px;
}
<div class="nav">
<img src="images/logo.png" alt="" height="40px" width="80px" style="margin-left: 5px; text-align: left;">
<label for="toggle"> ☰ </label>
<input type="checkbox" id="toggle">
<div class="menu">
Home
Gallery
Contact
Share
Useless
</div>
</div>
Try writing the attached code, it will surely work but if it doesn't let me know in the comments, I will try my best to help you.
In this code I have have made a new <div> and added float:left; to it and removed some inline and internal CSS.
Your code was not getting the job done because you have added opposite properties to parent (.nav) element and child (menu) element.
.img {
float: left;
}
.nav {
border-bottom: 1px solid lightgray;
line-height: 70px;
height: 70px;
}
.menu{
float: right;
}
<!DOCTYPE html>
<html>
<head>
<title>Nav</title>
</head>
<body>
<div class="nav">
<div class="img">
<img src="images/logo.png" alt="" height="40px" width="80px" style="margin-left: 5px;">
<label for="toggle"> ☰ </label>
<input type="checkbox" id="toggle">
</div>
<div class="menu">
Home
Gallery
Contact
Share
Useless
</div>
</div>
</body>
</html>
just use float to align content left or right
.img {
float: left;
}
.nav {
border-bottom: 1px solid lightgray;
line-height: 70px;
height: 70px;
}
.menu{
float: right;
}
<!DOCTYPE html>
<html>
<head>
<title>Nav</title>
</head>
<body>
<div class="nav">
<div class="img">
<img src="images/logo.png" alt="" height="40px" width="80px" style="margin-left: 5px;">
<label for="toggle"> ☰ </label>
<input type="checkbox" id="toggle">
</div>
<div class="menu">
Home
Gallery
Contact
Share
Useless
</div>
</div>
</body>
</html>
Here's a good solution. The checkbox (#toggle), I think, will be hidden by default.
.img {
text-align: left;
background-position: left;
}
.nav {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid lightgray;
text-align: right;
line-height: 70px;
height: 70px;
}
.nav label {
margin-right: auto;
}
#toggle {
display: none;
}
<div class="nav">
<img src="images/logo.png" alt="" height="40px" width="80px" style="margin-left: 5px; text-align: left;">
<label for="toggle"> ☰ </label>
<input type="checkbox" id="toggle">
<div class="menu">
Home
Gallery
Contact
Share
Useless
</div>
</div>
Related
Im having issues with aligning my 6 images in 2 rows of 3. - 1, 2, 3
4, 5, 6
At the moment they are in 3 rows. The first 2 images are in the centre of the page, while the others are all on the 3rd line. Not sure if its an issue with the div tags or the css. Im using flexbox at the moment but I know theres also grid layout
Please can you advise? Thanks very much
* {
margin: 0
}
a:link {
text-decoration: none;
color: black;
}
nav {
background-color: pink;
text-align: right;
width: 100%;
height: 160%;
height: 300px;
}
li {
list-style: none;
display: inline-block;
padding: 90px;
font-family: cursive;
text-decoration: none;
position: relative;
color: white;
}
li a {
text-decoration: none;
color: white;
}
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly
}
.rounded {
border-radius: 20%;
}
button {
border-radius: 20%;
margin: 10px;
width: 90px;
height: 50px;
border-style: none;
background-color: white;
}
<!DOCTYPE html>
<html>
<body>
<head>
</head>
<header>
<nav>
<button><a href="/Volumes/Untitled/coding/Cart.html" class="rounded">Go to
Cart</a></button>
<button>Shop</button>
<ul>
<img src="images/Logo2.jpeg" alt="my logo" class="rounded" width="160px" />
<li>HOME</li>
<li>SHOP</li>
<li>BLOG</li>
<li>ABOUT</li>
<li>CONTACT US</li>
</ul>
</nav>
</header>
<h3>
Welcome to Luminous Butter. We dont sell Butter we do sell vintage, Customised and pre-loved Fashion Original Artwork Plus, we have a great blog which has original stories and writing to keep you entertained
</h3>
<div class="container">
<div class="image">
<img src="images/Fred.jpeg" alt="accessories" class="rounded" width="280px">
</div>
<div class="container">
<div class="image">
<img src="images/BlackonBlack.jpg" alt="photography" class="rounded" width="500px">
</div>
<div class="container">
<div class="image">
<img src="images/Boy.jpeg" alt="fashion" class="rounded" width="300px">
</div>
<div class="container">
<div class="image">
<img src="images/Campbell.jpeg" alt="footwear" class="rounded" width="400px">
</div>
<div class="container">
<div class="image">
<img src="images/Scandal.jpeg" alt="jewellery" class="rounded" width="300px">
</div>
<div class="container">
<div class="image">
<img src="images/bowie-big.jpeg" alt="art" class="rounded" width="300px">
</div>
</div>
You forgot to close your a inside your button. Also, as mentioned in the comments you cannot have an img as a direct child to a ul that is not nested in a li. So I nested it in a li and removed the default padding-inline-start to keep the same structure. Then I went down to your rows and simplified it so it is two rows of 3 as requested. Please see how I simplified the rows below:
* {
margin: 0
}
a:link {
text-decoration: none;
color: black;
}
nav {
background-color: pink;
text-align: right;
width: 100%;
height: 160%;
height: 300px;
}
li {
list-style: none;
display: inline-block;
padding: 90px;
font-family: cursive;
text-decoration: none;
position: relative;
color: white;
}
li a {
text-decoration: none;
color: white;
}
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly
}
.rounded {
border-radius: 20%;
}
button {
border-radius: 20%;
margin: 10px;
width: 90px;
height: 50px;
border-style: none;
background-color: white;
}
<header>
<nav>
<button>Go to Cart</button>
<button>Shop</button>
<ul>
<li style="padding: 0;">
<img src="logo.png" alt="my logo" class="rounded" width="160px">
</li>
<li>HOME</li>
<li>SHOP</li>
<li>BLOG</li>
<li>ABOUT</li>
<li>CONTACT US</li>
</ul>
</nav>
</header>
<h3>
Welcome to Luminous Butter. We dont sell Butter we do sell vintage, Customised and pre-loved Fashion Original Artwork Plus, we have a great blog which has original stories and writing to keep you entertained
</h3>
<div class="container">
<img src="https://dummyimage.com/100/000/fff" alt="accessories" class="rounded" width="280px">
<img src="https://dummyimage.com/100/000/fff" alt="photography" class="rounded" width="500px">
<img src="https://dummyimage.com/100/000/fff" alt="fashion" class="rounded" width="300px">
</div>
<div class="container">
<img src="https://dummyimage.com/100/000/fff" alt="footwear" class="rounded" width="300px">
<img src="https://dummyimage.com/100/000/fff" alt="jewellery" class="rounded" width="300px">
<img src="https://dummyimage.com/100/000/fff" alt="art" class="rounded" width="300px">
</div>
No matter what I attempt, I cannot seem to get the divisions within the header element to line up instead of stack. I wanted the logo to float left, while the social media icons and the search bar float left. Also, I want the search bar icon (magnifying glass) to also fall inline with the text area.
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<title>Maj's Php Project 2022</title>
<!-- Jquery Link -->
<!-- CSS Stylesheet Link -->
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<!-- Bootstrap Links -->
<!-- Metadata Information -->
<!-- Website Comment Information -->
</head>
<body>
<div id="wrapper">
<header>
<div id="logo">
</div>
<div id="social-media-icons">
<img src="img/fb.png" />
<img src="img/fb.png" />
<img src="img/fb.png" />
<img src="img/fb.png" />
</div>
<div id="search-bar">
<img src="img/search.png" width="25px" height="25px" />
<form action="#" method="POST">
<input type="text" placeholder="Search" name="search" id="search" />
<input type="submit" value="GO" name="submit" id="submit" />
</form>
</div>
<nav>
<ul>
<li>HOME</li> |
<li>HOME</li> |
<li>HOME</li> |
<li>HOME</li> |
<li>HOME</li> |
<li>HOME</li>
</ul>
</nav>
</header>
And here is the CSS:
/* GLOBALS */
/* ELEMENT */
body {
background-color: white;
}
header {
width: 960px;
background-color: #336699;
border-radius: 15px;
padding: 10px;
}
main {
background-color: #33FF99;
border-radius: 15px;
padding: 10px;
color: #330099;
}
li {
display: inline;
padding: 5%;
}
li > a {
text-decoration:none;
color: #33CC99;
}
li > a:hover {
color: #330066;
}
footer {
background-color: #336699;
border-radius: 15px;
padding: 10px;
color: #33CC99;
}
header {
display: inline-block;
}
/* IDS */
#wrapper {
border-radius: 15px;
width: 960px;
clear: both;
margin: 0 auto;
padding-top: 5px;
}
#logo {
width: 100px;
height: 100px;
margin: 5px;
margin-top: 5px;
background-color: white;
border-radius: 15px;
}
#search-bar {
display: inline;
float: right;
}
#social-media-icons {
float: right;
}
/* CLASSES */
I need all the divs in the to align inline, but floating the elements is not working. What am I missing! PLease and thank you.
You may wish to make it easier on yourself and utilize either Bootstrap or Flexbox because those tools can help you with alignment desires. With Bootstrap, you'll need to include external resources like bootstrap css; with Flexbox, it's already there. My preference is Flexbox because it provides more flexibility.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I mocked up a quick example using your code and making slight additions and modifications. I also presume you wanted the social media icons and the search functionality to float "right" instead of "left". If not, that's easy enough to change.
HTML
<body>
<div id="wrapper">
<header>
<div class="header-utility">
<div id="logo"></div>
<div class="social-media-icons">
<img src="img/fb.png" />
<img src="img/fb.png" />
<img src="img/fb.png" />
<img src="img/fb.png" />
</div>
<div class="search-bar">
<form action="#" method="POST">
<img src="img/search.png" />
<input type="text" placeholder="Search" name="search" class="search-input" />
<input type="submit" value="GO" name="submit" id="submit" class="search-submit" />
</form>
</div>
</div>
<nav>
<ul>
<li>HOME</li> |
<li>HOME</li> |
<li>HOME</li> |
<li>HOME</li> |
<li>HOME</li> |
<li>HOME</li>
</ul>
</nav>
</header>
</div>
</body>
CSS
/* GLOBALS */
/* ELEMENT */
body {
background-color: white;
}
header {
width: 960px;
background-color: #336699;
border-radius: 15px;
padding: 10px;
}
main {
background-color: #33FF99;
border-radius: 15px;
padding: 10px;
color: #330099;
}
li {
display: inline;
padding: 5%;
}
li > a {
text-decoration: none;
color: #33CC99;
}
li > a:hover {
color: #330066;
}
footer {
background-color: #336699;
border-radius: 15px;
padding: 10px;
color: #33CC99;
}
/* IDS */
#wrapper {
border-radius: 15px;
width: 960px;
clear: both;
margin: 0 auto;
padding-top: 5px;
}
#logo {
width: 100px;
height: 100px;
margin: 5px;
margin-top: 5px;
background-color: white;
border-radius: 15px;
}
/* CLASSES */
.header-utility {
display: flex;
align-items: center;
}
.social-media-icons {
flex-grow: 1;
text-align: right;
padding-right: 30px;
}
.search-input,
.search-submit {
padding: 0px;
height: 25px;
}
Feel free to play around with the mock as you desire. https://jsfiddle.net/9g6ms7pz/
I am trying to write my contact page, it's for a personal website that I write as part of a project for school. I am trying to display little logos of certain social media sites, and my profile name/mail address next to the images. I have set up an unordered vertical list, I have elements for each individual < li > tag and here comes the problem: Facebook, for example, works fine. The logo is there, and a link to my profile next to it, with the text perfectly aligned vertically right in the center. The problem comes with paragraphs. For my Yahoo Mail address, for example, I cannot provide a link to my profile, so I instead just write my address as simple text between < p >< /p > tags. This text will not align. I don't know what to do. I've been trying stuff out and looking for solutions all over the internet for hours and nothing works. I do admit my HTML and CSS experience is very limited, but please help me. I will attach both my HTML code and the CSS file and I hope someone will take the time to see how they render and maybe help me out. Thanks in advance!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="Description" content="Pagina de contact">
<meta name="author" content="Matei Popa">
<link rel="stylesheet" type="text/css" href="css/contactstyle.css">
</head>
<body>
<div class="container">
<ul>
<li>
<div class="navlink">
<div class="img">
<a href="https://www.facebook.com/matei.popa.332" target="_blank">
<img class="image" src="img/contact-pg/facebooklogo.jpg" alt="Logo
Facebook">
</a>
</div>
<a href="https://www.facebook.com/matei.popa.332" target="_blank">
Matei Popa
</a>
</div>
</li>
<li>
<div class="navlink">
<div class="img">
<a href="https://www.instagram.com/matei.popa.332/" target="_blank">
<img class="image" src="img/contact-pg/instagramlogo.jpg" alt="Logo
Instagram">
</a>
</div>
<a href="https://www.instagram.com/matei.popa.332/" target="_blank">
matei.popa.332
</a>
</div>
</li>
<li>
<div class="navlink">
<div class="img">
<a href="https://twitter.com/mateiutz2001" target="_blank">
<img class="image" src="img/contact-pg/twitterlogo.jpg" alt="Logo Twitter">
</a>
</div>
<a href="https://twitter.com/mateiutz2001" target="_blank">
#mateiutz2001
</a>
</div>
</li>
<li>
<div class="navlink">
<div class="img">
<img class="image" src="img/contact-pg/yahoomaillogo.jpg" alt="Logo Yahoo
Mail">
</div>
<div class="paragraph">
<p>alex.matei1808#yahoo.com</p>
</div>
</div>
</li>
<li>
<div class="navlink">
<div class="img">
<img class="image" src="img/contact-pg/gmaillogo.jpg" alt="Logo Gmail">
</div>
<div class="paragraph">
<p>
mattx1829#gmail.com
</p>
</div>
</div>
</li>
</ul>
</div>
<!-- add Phone number, Yahoo Mail, Gmail, Whatsapp, Skype, Reddit, Quora -->
</body>
</html>
Css:
#font-face
{
font-family: Sansation;
src: url(../font/Sansation_Regular.ttf)
}
body
{
background-color: #000;
width: 100%;
height: 100%;
margin: 0;
}
div.container
{
padding-top: 50px;
padding-left: 40px;
margin: 60px;
align-content: flex-start;
}
ul
{
list-style-type: none;
}
li
{
flex-direction: row;
width: 100%;
display: flex;
float: left;
height: 50px;
}
div.navlink
{
display: flex;
flex-direction: row;
width: 100%;
float: left;
text-align: left;
font-family: Sansation;
font-size: 24px;
padding: 10px;
}
a:link
{
color: #FFFFFF;
text-decoration: none;
background-color: transparent;
}
a:hover
{
color: #D1DC19;
background-color: transparent;
text-decoration: underline;
}
a:visited
{
color: #E47507;
background-color: transparent;
text-decoration: none;
}
a:active
{
color: red;
background-color: white;
text-decoration: underline;
}
div.img
{
display: flex;
flex-direction: row;
float: left;
align-content: center;
overflow: hidden;
}
div.paragraph
{
display: table;
margin: 0 auto;
color: #FFFFF;
font-family: Sansation;
padding-left: 0px;
width: auto;
height: 100%;
float: left;
overflow: hidden;
align-content: center;
text-align: center;
}
p
{
height: 100%;
vertical-align: top;
align-content: center;
}
.image
{
vertical-align: middle;
padding-right: 15px;
width: 30px;
height: 30px;
}
How it looks like now
You can provide a link for your Yahoo email address using mailto:youremail#address.com.
See: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_links_mailto
Your snippet of code for that li would then be:
<li>
<div class="navlink">
<div class="img">
<a href="https://twitter.com/mateiutz2001" target="_blank">
<img class="image" src="img/contact-pg/yahoomaillogo.jpg" alt="Logo Yahoo Mail"></a>
</div>
alex.matei1808#yahoo.com
</div>
</li>
I have some css issues. I'm trying to remove the space between a image and a label, and it does not work.
This is what I have:
And this is what I want:
I have problems with removing the space below he pictures and the same problem with the labels and the other div below them. In the same time I do not know how to position inline the headers from the footer.
This is my fiddle with my html and css:
https://jsfiddle.net/cwd6qw3o/
div img {
display: inline-block;
height: 30%;
width: 23%;
}
div.subtitle {
background-color: #333333;
color: white;
display: inline-block;
margin-top: 0;
text-align: left;
width: 23%;
}
div.subcolor {
background-color: #ba0927;
display: inline-block;
height: 5px;
width: 23%;
}
div.footer {
display: inline-block;
background-color: #e6e6e6;
width: 100%;
height: 5%;
}
Please tell me what i am doing wrong :).
Thanks !
I think it is not a good structure in your HTML,why not wrap your item in the same li such as
<ul>
<li>
<img src="~/Content/cont1.png"/>
<p>Bosch Car Service</p>
</li>
<li>
<img src="~/Content/cont2.png"/>
<p>Afspraak Proefrit</p>
</li>
<li>
<img src="~/Content/cont3.png"/>
<p>Afspraak onderhoud</p>
</li>
<li>
<img src="~/Content/cont4.png"/>
<p>Routebeschrijiving</p>
</li>
</ul>
You can remove spaces with the following CSS:
div {
font-size: 0;
}
div.subtitle {
font-size: 1rem;
}
Live preview: JSFiddle
Additional styling is necessary.
please try below code
div::after {
content: "";
width: 60%;
}
.image-div {
float: left;
width: 100%;
}
div img {
float: left;
height: 30%;
margin-right: 1%;
width: 23%;
}
div.subtitle {
background-color: #333333;
color: white;
float: left;
margin-right: 1%;
margin-top: 0;
text-align: left;
width: 23%;
}
.sub-div {
float: left;
width: 100%;
}
div.subcolor {
background-color: #ba0927;
float: left;
height: 5px;
margin-right: 1%;
width: 23%;
}
<body>
<img src="~/Content/slide1.png" id="slide" />
<div class="image-div">
<img src="http://dummyimage.com/200x200/000/fff"/>
<img src="http://dummyimage.com/200x200/000/fff" />
<img src="http://dummyimage.com/200x200/000/fff" />
<img src="http://dummyimage.com/200x200/000/fff" />
</div>
<div class="sub-div">
<div class="subtitle">
Bosch Car Service
</div>
<div class="subtitle">
Afspraak Proefrit
</div>
<div class="subtitle">
Afspraak onderhoud
</div>
<div class="subtitle">
Routebeschrijiving
</div>
</div>
<div>
<div class="subcolor" id="sub1"></div>
<div class="subcolor" id="sub2"></div>
<div class="subcolor" id="sub3"></div>
<div class="subcolor" id="sub4"></div>
</div>
<div class="footer">
<div class="images">
<img src="~/Content/fb.jpg"/>
<img src="~/Content/contact.jpg"/>
<img src="~/Content/route.jpg"/>
</div>
<div class="information">
<div class="contact">
<h1>Houman BVBA</h1>
<label>Boterstraat 6</label>
<label>B-2811 Hombeek (Mechelen)</label>
<label>Tel. 015 41 39 39</label>
<label>Fax. 015/43 24 40</label>
</div>
<div class="schedule">
<h1>Openingsuren</h1>
<label>Maandag: 9u-12u|13u-18u</label>
<label>Dinsdag: 9u-12u|13u-18u</label>
<label>Woensdag: 9u-12u|13u-18u</label>
<label>Donderdag: 9u-12u|13u-18u</label>
<label>Vrijdag: 9u-12u|13u-18u</label>
<label>Zaterdag: 9u-12u|13u-18u</label>
</div>
</div>
</div>
</body>
I have 6 icon, I want to display them as vertically, and before icon there is one red bar, will show the user mouse over effect, something like this :
how can I show this effect in CSS ?
what i try is this :
<div style="width: 20%; float: right";>
<div>
<div style="width: 20%; float: left; width: 26px; height: 26px">
<img src="../../../Images/red_rectangle.png" /></div>
<div style="width: 80%; float: right; width: 26px; height: 26px">
<img src="../../../Images/Diploma_24.png" title="Education" /></div>
</div>
<div>
<div style="width: 20%; float: left; width: 26px; height: 26px">
<img src="../../../Images/red_rectangle.png" /></div>
<div style="width: 80%; float: right; width: 26px; height: 26px">
<img src="../../../Images/Medal_24.png" title="Membership" /></div>
</div>
</div>
but by default i dont want to show red bar,
///*/// when mouse over : show red bar icon
when click on icon, :- i also want to remain show red bar , until user don't click on other icons
DEMO: http://jsfiddle.net/gvee/PcgaA/2/
HTML
<img src="http://placekitten.com/26/26" />
<img src="http://placekitten.com/26/26" />
<img src="http://placekitten.com/26/26" />
CSS
img {
border-left: 2px solid transparent;
padding-left: 2px;
margin: 5px;
}
img:hover {
border-left-color: red;
}
Here is an example using ::after to create a psuedo element. The div elements will need replaced with img tags.
CSS
.selection{
width: 30px;
height: 30px;
border: 3px solid black;
margin: 4px;
}
.selection:hover::before{
content: ' ';
width: 5px;
background: red;
height: 30px;
display: block;
position: relative;
left: -10px;
}
HTML
<div id="container">
<div class="selection"></div>
<div class="selection"></div>
<div class="selection"></div>
<div class="selection"></div>
</div>
JS Fiddle: http://jsfiddle.net/3RJJe/1/
try this in ur CSS file
CSS styling:
img {margin-left:5px;}
img:hover {border-left:5px solid #f00}
Note: this is just generalized CSS, u will need to have specific CSS syntax.
<div>
<div>
<img src="../../../Images/red_rectangle.png" />
</div>
<div>
<img src="../../../Images/Diploma_24.png" title="Education" />
</div>
</div>
But this would be a better idea:
<ul class="my-menu">
<br>
<li>
<img src="../../../Images/red_rectangle.png" />
</li><br>
<li>
<img src="../../../Images/Diploma_24.png" title="Education" />
</li><br>
</ul>
CSS styling:
.my-menu li img {margin-left:5px; border-left:5px solid #fff}
.my-menu li img:hover {border-left:5px solid #f00}