I am trying to add background color to my page, and padding the paragraphs, and divisions. But its not working. I would appreciate it if you could go through the code and explain whats wrong. Any tips on how I should do it, or what I can learn from or follow will be appreciated too. Thanks!
<!DOCTYPE html>
<html>
<head>
<title>Jake's Coffee Shop</title>
<meta charset="utf-8">
<style>
<! CSS For Menu > p {
background-color: black;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 50px;
background-color: #f1f1f1;
}
#UnorderedList li {
display: inline-block;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a:hover {
background-color: #555;
color: navajowhite;
}
</style>
</head>
<body>
<h1>Jake's Coffee Shop</h1>
<div id="MenuBar">
<ul id="UnorderedList">
<li> Home
</li>
<li> Menu
</li>
<li> Music
</li>
<li> Jobs
</li>
</ul>
</div>
<div id="content">
<p>
<div>Come In And Experience...</div>
<br>
<div>
<img src="images.jpeg" alt="Heartmelting Coffee Picture">
</div>
<br>
<ul id="ItemMenu">
<li>Specialty Coffee And Tea</li>
<li>Freshly Made Sandwiches</li>
<li>Bagels, Muffins, And Organic Snacks</li>
<li>Music And Poetry Readings</li>
<li>Open Mic Nights</li>
<li>...</li>
</ul>
</div>
</p>
<footer>
<address>23 Pine Road <br>Nottingham, NGI 5YU <br>0115 9324567 <br></address>
<p>Copyright © 2011 Jake's Coffee House</p>
<p> yahoo#ratul_shams.com
</p>
</footer>
</body>
</html>
Here is a properly formatted and indended code. Your html comment was wrong notated and you nested a <div> inside a <p>, thats not allowed (see this question). Plus: Don't use <br> tags to create vertical space - use the margin property on divs to achieve that.
p {
background-color: black;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 50px;
background-color: #f1f1f1;
}
#UnorderedList li {
display: inline-block;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a:hover {
background-color: #555;
color: navajowhite;
}
<h1>Jake's Coffee Shop</h1>
<div id="MenuBar">
<ul id="UnorderedList">
<li>
Home
</li>
<li>
Menu
</li>
<li>
Music
</li>
<li>
Jobs
</li>
</ul>
</div>
<div id="content">
<div>Come In And Experience...</div>
<div>
<img src="images.jpeg" alt="Heartmelting Coffee Picture">
</div>
<ul id="ItemMenu">
<li>Specialty Coffee And Tea</li>
<li>Freshly Made Sandwiches</li>
<li>Bagels, Muffins, And Organic Snacks</li>
<li>Music And Poetry Readings</li>
<li>Open Mic Nights</li>
<li>...</li>
</ul>
</div>
<footer>
<address>
23 Pine Road <br>
Nottingham, NGI 5YU <br>
0115 9324567 <br>
</address>
<p>Copyright © 2011 Jake's Coffee House</p>
<p>
yahoo#ratul_shams.com
</p>
</footer>
Related
I'm trying to achieve a solution where a horizontal line appears to the left of the text but the text remains centre aligned. Please see image below.
I've also added my mark-up below. I'm currently using Bootstrap 4.
<div class="text-center nav-items">
<ul>
<div class="pb-5">
<li>
<h2 class="sidebar-first-item">About</h2>
</li>
<p>Behind the brand // Meet the team</p>
</div>
<div class="pb-5">
<li>
<h2>Our Work</h2>
</li>
<p>Take a look at our marvelous creations</p>
</div>
<div class="pb-5">
<li>
<h2>Services</h2>
</li>
<p>Learn more about what we can do for you</p>
</div>
<div class="pb-5">
<li>
<h2 class="sidebar-last-item">Contact</h2>
</li>
<p>Get in touch today. Let's make some magic</p>
</div>
</ul>
</div>
Use pseudo-elements to do so:
.sidebar-first-item {
position: relative;
}
.sidebar-first-item:before {
content: '';
position: absolute;
width: 45%;
height: 5px;
background-color: red;
top: 50%;
left: 0%;
}
CodePen: https://codepen.io/manaskhandelwal1/pen/xxEaQYg
First cleanup your html, a <ul> list may not have children other than <li>, <script> or <template> elements (see The Unordered List element). Hence remove the div's inside the <ul> and add their classes to the <li>.
A solution to your design problem is to add a element before and after your anchor elements, size them (width) with a percentage you like and set a min-width for the anchor, so you have a nice responsive layout also on small devices. This creates an equal width red line
If you want the red line to align with the width of the text, you can make your anchor non-breaking white space and a set a padding, so the red line comes as close as defined in the padding towards the text.
.redline,
.spacer {
width: 100%;
height: 3px;
display: inline;
background-color: red;
}
.spacer {
height: 0px;
}
li {
display: flex;
align-items: center;
}
li a {
margin: 0 auto;
border: 0px solid gold;
padding: 0 20px;
white-space: nowrap;
}
li p {
width: 100%; margin:-50px 0 50px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="text-center nav-items">
<ul>
<li class="pb-5">
<span class="redline"></span>
<a href="#">
<h2 class="sidebar-first-item">About</h2>
</a>
<span class="spacer"></span>
</li>
<li>
<p>Take a look at our marvelous creations</p>
</li>
<li class="pb-5">
<span class="redline"></span>
<a href="#">
<h2>Our Work</h2>
</a>
<span class="spacer"></span>
</li>
<li>
<p>Behind the brand // Meet the team</p>
<li>
</ul>
</div>
This is where a CSS pseudo element can come into play! A pseudo element can be used to place designs before or after an element.
I added a class called horizontal-line to your h2.
<div class="text-center nav-items">
<ul>
<div class="pb-5">
<li>
<h2 class="horizontal-line sidebar-first-item">About</h2>
</li>
<p>Behind the brand // Meet the team</p>
</div>
<div class="pb-5">
<li>
<h2>Our Work</h2>
</li>
<p>Take a look at our marvelous creations</p>
</div>
<div class="pb-5">
<li>
<h2>Services</h2>
</li>
<p>Learn more about what we can do for you</p>
</div>
<div class="pb-5">
<li>
<h2 class="sidebar-last-item">Contact</h2>
</li>
<p>Get in touch today. Let's make some magic</p>
</div>
</ul>
The CSS will look like this.
.horizontal-line {
position: relative;
}
.horizontal-line::before {
content: "";
display: block;
width: 60px;
height: 2px;
position: absolute;
top: 50%;
left: 35%;
border-radius: 30px;
background-color: #DE657D;
}
By adding the pseudo element it will know to place it before any content with that class name. In this case, we are leaving content blank and placing in
https://jsfiddle.net/rc463gb8/1/
https://imgur.com/eAgppZ4
https://imgur.com/GdUnQax
the part inside the red square is making problems.
The css classes used here look like this:
.overflowHidden{
overflow: hidden;
}
.floatLeft{
float: left;
}
.floatRight{
float: right;
}
.floatAuto{
float: auto;
}
.alignLeft {
text-align: left;
}
.alignRight {
text-align: right;
}
.alignCenter {
margin-left:auto;
margin-right:auto;
}
.alignJustify{
text-align: justify;
}
.summaryListStyle{
/*padding-left: 25%;*/
list-style-position: outside;
}
the markup looks like this
<h6 class = "alignLeft">Preisberechnung:</h6>
<ul class = "alignJustify">
<li class="summaryListStyle">
<span class="floatAuto alignLeft">{{ car.basemodel.name }}:</span>
<span class="floatRight">{{ car.basemodel.price }} €</span>
</li>
<li class="summaryListStyle">
<span class="floatAuto alignLeft">{{ car.edition.name }}:</span>
<span class="floatRight">{{ car.edition.price }} €</span>
</li>
<li class="summaryListStyle" *ngFor="let extra of car.edition.extras">
<span class="floatAuto alignLeft">{{ extra.name }} (gehört zur Edition):</span>
<span class="floatRight">{{ extra.price }} €</span>
</li>
<li class="summaryListStyle" *ngFor="let extra of car.extras">
<span class="floatAuto alignLeft">{{ extra.name }}:</span>
<span class="floatRight">{{ extra.price }} €</span>
</li>
</ul>
<div *ngIf="discount != 0.00">
Die Preise für Sonderausstattungen sind um {{ discount }}% reduziert.
</div>
<div class="summaryTotalPriceStyle exposedVerticallyTop">
Gesamtpreis: {{ price }} €
</div>
I tried multiple mixtures of the above shown css classes on the HTML elements, some worked better, some worse, but there was none which did the job perfectly. At some zoomlevel, the thing always crashed. I think this problem is connected to the use of the float property, but unfortunately I didnt find any other way to make the SPAN elements inside the LI elements move to the right. text-align property didn't have any effect, it didnt move the respective any further to the right.
See my snippet code and let me know
.panel{
width: 270px;
background:grey;
padding:15px;
}
ul{
padding-left:50px;
}
ul li{
margin-bottom:5px;
list-style-position: outside;
}
ul li .content{
display: flex;
justify-content: space-between;
align-items: flex-end;
}
ul li > .content span:first-of-type{
max-width:80%;
}
ul li > .content span:last-of-type{
white-space:nowrap;
}
<div class="panel">
<ul>
<li>
<div class="content">
<span>Text 132456:</span>
<span> 26 €</span>
</div>
</li>
<li>
<div class="content">
<span>Lorem ipsum 123465:</span>
<span>25 000 €</span>
</div>
</li>
<li>
<div class="content">
<span>Lorem ipsum lorem ipsum lorem lorem:</span>
<span> 659 €</span>
</div>
</li>
</ul>
</div>
The content from my html document is overlapping my navbar.
I have tried to add margins to my .main-nav in css but it did not work.
The example code has "Hello World" on top of my nav bar. I want to have a new section that starts right below the main navbar without using
.main-nav{
float:right;
list-style: none;
margin-top: 25px;
margin-bottom: 50px;
}
.main-nav li{
display: inline-block;
margin-left: 15px;
}
.section-test{
margin-top: 200px;
}
<body>
<nav>
<div class="row">
<img src="{% static 'resources/img/logo-transparent.png' %}" class="logo" alt=" Logo">
<ul class="main-nav">
<li>About</li>
<li>Log In</li>
<li>Get a Demo</li>
</ul>
</div>
</nav>
<section class="section-test">
<h3>hello world</h3>
</section>
</body>
use clear:both; on section-test class
/* Styles go here */
.main-nav{
float:right;
list-style: none;
margin-top: 25px;
margin-bottom: 50px;
}
.main-nav li{
display: inline-block;
margin-left: 15px;
}
.section-test{
clear: both;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<nav>
<div class="row">
<img src="{% static 'resources/img/logo-transparent.png' %}" class="logo" alt=" Logo">
<ul class="main-nav">
<li>About</li>
<li>Log In</li>
<li>Get a Demo</li>
</ul>
</div>
</nav>
<section class="section-test">
<h3>hello world</h3>
</section>
</body>
</html>
As you are using float: right on your nav element, it is out of the flow. What that means is that the nav parent doesn't takes it's height into account.
You have multiple solutions here. The first one is to apply an overflow:hidden to the nav element to force it to grow, to use a clear element as mentioned by Punith Jain, or simplify your markup and get rid of the floating with the usage of flexbox!
.row {
display: flex;
}
.main-nav{
text-align: right;
flex: 1;
}
.main-nav li{
display: inline-block;
margin-left: 15px;
}
<nav>
<div class="row">
<img src="{% static 'resources/img/logo-transparent.png' %}" class="logo" alt=" Logo">
<ul class="main-nav">
<li>About</li>
<li>Log In</li>
<li>Get a Demo</li>
</ul>
</div>
</nav>
<section>
<h3>hello world</h3>
</section>
I'm trying to get the text (Home, About Us, Cheese) etc to display to the right of the social media icons, so that the base of the text is aligned with the base of the icons and they appear on the same line.
How do I do this?
My code is in fiddle here http://jsfiddle.net/pnX3d/
<div class="grid_5" id="social_icons">
<img src="img/facebook.png" alt="Click to visit us on Facebook">
<img src="img/twitter.png" alt="Click to visit us on Twitter">
<img src="img/pinterest.png" alt="Click to visit us on Pininterest">
<img src="img/email.png" title="Click to contact us" alt="Contact us">
</div>
<nav class="topmenu omega">
<ul>
<li>Home |</li>
<li>About Us |</li>
<li>Cheeses</li>
</ul>
</nav>
I have achieved that with the following code:
.container-header{
line-height: 1.22;
}
#social_icons {
padding: .5em;
display: inline-block;
}
.topmenu li {
display:inline-block;
font-size: 1.5em;
text-align: right;
}
.topmenu.omega{
float:right;
}
ul{
margin: 0;
}
li>a
{
font-size: 20px;
}
<div class="container-header">
<div class="grid_5" id="social_icons">
<img src="img/facebook.png" alt="Facebook">
<img src="img/twitter.png" alt="Twitter">
<img src="img/pinterest.png" alt="Pininterest">
<img src="img/email.png" title="Click to contact us" alt="Contact us">
</div>
<nav class="topmenu omega">
<ul>
<li>Home |</li>
<li>About Us |</li>
<li>Cheeses</li>
</ul>
</nav>
</div>
Add float: left to #social_icons and .topmenu li.
Here's a demo: http://jsfiddle.net/ZsJbJ/.
Hope that helps!
These changes in your CSS should do the trick:
#social_icons {
padding: .5em;
line-height: 1.22;
float:left;
vertical-align:bottom;
}
.topmenu li {
display:inline-block;
font-size: 1.5em;
text-align: right;
line-height: 1.22;
float:left;
vertical-align:bottom;
}
Float the .topmenu to right and #social_icons to the left. Give padding-left:0; for the ul and give display:inline-block for .topmenu. Please check it in fiddle
http://jsfiddle.net/pnX3d/10/
Thanks for your input, but I actually ended up using the following. As this isn't a production site and I'm only experimenting I wanted to use flex columns. The below actually reduces the code required as well.
HTML
<div id="social_icons">
<img src="img/facebook.png" alt="Click to visit us on Facebook">
<img src="img/twitter.png" alt="Click to visit us on Twitter">
<img src="img/pinterest.png" alt="Click to visit us on Pininterest">
<img src="img/email.png" title="Click to contact us" alt="Contact us">
<nav class="topmenu omega">
<ul>
<li>Home |</li>
<li>About Us |</li>
<li>Cheeses</li>
</ul>
</nav>
</div>
CSS
#social_icons {
padding: .5em;
line-height: 2.7;
-webkit-columns: 150px 2;
font-size: 1.2em;
}
.topmenu li {
display:inline-block;
}
I am fairly new to web development and I have been trying to create a site, so far I have managed to do a navigation menu and a logo. My issue is that after thoroughly trying many tutorials and posts I have been unable to resolve my issue.
I want to align my logo with my navbar so that the logo is on the left hand side and the navbar is in line with the logo but on the right hand side, with both of them next to each other.
next questions is how to create a drop down menu for some of navbar tabs?
thankyou
My html is as follows
<!DOCTYPE html>
<html>
<head>
<title>S3ntry Aust Transport</title>
<link href="navbarlog.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container" id="Layout1" style="overflow: auto; ">
<header>
<div id="menu">
<img src="logo.JPG" style="float: left; " alt="logo" name="logo" width="571"
height="176" id="logo"></a>
</div>
</header>
<ul>
<li><a id="nav-index" class="first" href="%E2%80%9D#%E2%80%9D">Home</a></li>
<li><a id="nav-aboutus" href="%E2%80%9D#%E2%80%9D">About Us</a></li>
<li><a id="nav-ourservices" href="%E2%80%9D#%E2%80%9D">Our Services</a></li>
<li><a id="nav-environment" href="%E2%80%9D#%E2%80%9D">Environment</a></li>
<li><a id="nav-latestnews" href="#">Latest News</a></li>
<li><a id="nav-contactus" class="last" href="%E2%80%9D#%E2%80%9D">Contact Us</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
and the css part is as follows
ul {list-style-type:none; margin:0 auto; width:640px; padding:0; overflow:hidden;}li
{float:left;}
ul li a {display:block; text-decoration:none; text-align:center; padding:22px 20px 22px
20px;font-family:Arial; font-size:8pt; font-weight:bold; color:#000000; text-
transform:uppercase; border-right:1px solid #607987; background-color:#FFFFFF; text-
transform:uppercase; letter-spacing:.08em}
ul li a:hover {background-color:#3b6a85; color:#a2becf}
ul li a.first {border-left:0}
ul li a.last {border-right:0}}
#header ul li {
list-style: none;
display:inline-block;
float:right
}
logo.JPG
{
vertical-align:middle;
float:left
}
If you were to restructure your HTML, moving your 'ul' into the header, it's very easy.
<header>
<div id="logo">
<img src="logo.JPG" style="float: left; " alt="logo" name="logo" width="571" height="176" id="logo">
</div>
<div id="menu">
<ul>
<li><a id="nav-index" class="first" href="%E2%80%9D#%E2%80%9D">Home</a></li>
<li><a id="nav-aboutus" href="%E2%80%9D#%E2%80%9D">About Us</a></li>
<li><a id="nav-ourservices" href="%E2%80%9D#%E2%80%9D">Our Services</a></li>
<li><a id="nav-environment" href="%E2%80%9D#%E2%80%9D">Environment</a></li>
<li><a id="nav-latestnews" href="#">Latest News</a></li>
<li><a id="nav-contactus" class="last" href="%E2%80%9D#%E2%80%9D">Contact Us</a></li>
</ul>
</div>
</header>
and the CSS needed
header { width: 700px; }
#logo { float: left; }
#menu { float: right; }
#menu ul { padding: 0; margin: 0; }
Here is a JSFiddle showing it working: http://jsfiddle.net/STu89/
I've also removed a which wasn't opened and stripped out various /div which weren't matched.