here, i want to place Notification and profile link to right side and home assignment, my course, student, message to left side. I made one div and through CSS i put it in center position and width to some %. Now, I want to place left side link and some space and right side link. how it can be done in a single div.
enter image description here
You can have 3?
<div class="header">
<div id="left">
<--!Whatever code you wrote for the home, assignment, myCourse, student, and message buttons!-->
</div>
<div id="right">
<--!Whatever code you wrote for the notification and profiles button!-->
</div>
</div>
Does that count as one div? I can't think of another way to do it, but I really don't know that much either so others probably know.
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav-right {
float: right;
}
</style>
</head>
<body>
<div class="topnav">
Home
MyCourse
Student
Assignment
Message
<div class="topnav-right">
Notification
Profile
</div>
</div>
</body>
</html>
Related
This will be an easy question for you to answer. I'm making a Google Clone Homepage, and I'm trying to connect my CSS and HTML. For some reason it isn't working.
My HTML and CSS are in the same folder so that's not the problem. In my HTML sheet, I've already linked to the external CSS stylesheet as well. The HTML code is below.
<style>
<link rel="stylesheet" type="text/css" href="googleduplicate.css"/>
</style>
I'm expecting to see my HTML change because of my CSS, but I don't see that.
You can find my full HTML code: https://codeshare.io/ay3yrw
And full CSS here: https://codeshare.io/GABLnN
link tag is used directly inside the head tag
It must be like this:
<head>
<link rel="stylesheet" type="text/css" href="googleduplicate.css"/>
</head>
I check your code and I found three main reasons why your CSS doesn't work properly.
1. link tag
As many others mentioned, you need to remove the <style> ... </style> tag from the <head> tag and use the <link> tag directly inside of it.
2. Not id but class
Your HTML and CSS have many errors. For example, you are styling in the CSS file:
.top left links {
...
}
Here .top is defined as a class but in your HTML code you defined it as an id, check this line:
<!-- Containing Top Left Links on Nav Bar -->
<div id="top left links">
...
</div>
<!--Containing Top Right Links on Nav Bar-->
<div id="top right links">
...
</div>
Remember that an id should be unique therefore you should change id attributes with class attributes.
3. No white spaces
In your CSS file all your definitions are incorrect:
.top left links {
...
}
From this definition, we know that .top is a class, but left and links are representing tags. And we all know that where is no <left> nor <links> tags they should be represented as classes. Also, remember that you concatenate them when you want to refer to a single element with multiple classes and you separate classes by a white space when you want to refer to a descendant element.
So the correct definition will be without white spaces:
.top.left.links {
...
}
Finally, I did some modification on the CSS file for the .search1 class. Check this code:
/* Google Duplicate CSS */
.top.left.links {
float: left;
color: #718090;
text-align: left;
padding: 30px;
margin: auto;
list-style-type: none;
}
.top.left.links a:hover {
text-decoration: none;
}
.top.right.links {
float: right;
color: #718090;
text-align: right;
padding: 30px;
margin: auto;
list-style-type: none;
}
.top.right.links a:hover {
text-decoration: none;
}
#ham_menu {
height: 24px;
width: 24px;
float: right;
}
.search1 {
background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#f1f1f1));
background-image: -webkit-linear-gradient(top, #f5f5f5, #f1f1f1);
-webkit-border-radius: 2px;
-webkit-user-select: none;
color: #5F6368;
height: 36px;
line-height: 27px;
background-color: #f2f2f2;
border: 1px solid #f2f2f2;
border-radius: 4px;
cursor: pointer;
font-family: arial, sans-serif;
font-size: 14px;
margin: 11px 4px;
min-width: 54px;
padding: 0 16px;
text-align: center;
}
.bottom.left.links,
.bottom.right.links {
list-style-type: none;
color: #718090;
padding: 30px;
margin: auto;
font-size: 13px;
}
.bottom.left.links {
float: left;
}
.bottom.right.links {
float: right
}
.footer {
position: fixed;
min-width: 980px;
z-index: 103px;
height: 64px;
background-color: lightgray;
}
<!--Header Menu of Page -->
<header>
<!-- Containing Top Left Links on Nav Bar -->
<div class="top left links">
About
Store
</div>
<!--Containing Top Right Links on Nav Bar-->
<div class="top right links">
<li>Gmail</li>
<li>Images</li>
<li>Sign In</li>
</div>
</header>
<!--Top Right Ham Menu-->
<img id="ham_menu" src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png" class="right">
<!--Actual Google Image, Search Form, and Buttons-->
<center>
<img src="http://www.google.com/logos/doodles/2019/us-teacher-appreciation-week-2019-begins-4994791740801024-2x.jpg" alt="Happy US Teacher Appreciation Week 2019!" class="center">
<form class="search" input type="text"> </form>
<button class="search1" type="submit" value="Google Search" style="visibility">
Google Search
</button>
<button class="search1">
I'm Feeling Lucky
</button>
<p>We're supporting teachers inspiring the next generation.</p>
</center>
<!--Footer Links-->
<footer>
<div class="bottom left links">
Advertising
Business
</div>
<div class="bottom right links">
<li>Privacy</li>
<li>Terms</li>
</div>
</footer>
Remove the style tag from the beginning and end of the link tag, like the following
<link rel="stylesheet" type="text/css" href="googleduplicate.css"/>
Remove the style tag from the beginning and end of the link tag, like the following
<link rel="stylesheet" type="text/css" href="googleduplicate.css"/>
and in this condition make sure your HTML file and CSS file need to be in same folder.
Please, remove the <script> tag so that you can reference this CSS file.
I have tried Position:fixed/static/relative/absolute... still overlapping on the body & sometimes the footer(blocking other parts of the body).
Image:
/* Footer */
footer {
background: #444;
}
.h-sec {
font: 22px Arial, Helvetica;
}
.sec {
font: 9px, Arial, Helvetica;
}
#f-nav a {
color: #F4F4F4;
}
#f-nav .current {
color: #A9A9A9;
text-decoration: underline;
}
.a-void {
color: #000000;
}
<footer>
<section class="f-sec1">
<h5>CAD | Tech Website©</h5>
<br>
<div id="f-nav">
Home
Services
Contact
About us
</div>
</section>
<section>
Donate :)
</section>
</footer>
for the full code(Error in images): https://jsfiddle.net/s0nk37cg/ - IT WILL LOOK FINE BUT IT IS BECAUSE THERE IS NO IMAGE, PLEASE LOOK AT THE IMAGE OR MAKE YOU OWN IMAGE TO BE CLEAR AND UNDERSTANDABLE
Try this:
Step 1 - Add the below to your css:
.clearfix:after {content:""; display:table; clear:both;}
Step 2 - Changes in your html:
Change:
<section id="container" >
- to -
<section id="container" class="clearfix">
see if that help, you might have to tweek your margins and/or padding though
Simple fix for this problem is to give a margin-bottom value to your body element to avoid overlap at the end of the page or scroll. provide the value depending on the height of your footer.
ETA: Thanks for all the help, everyone! These all worked beautifully. Thanks so much for your time!
I'm coding a newsletter (live preview here and my goal for it here) and am trying to get the navigation buttons ('Join Meet Learn Support') to sit about halfway down the logo. When I try top-margin in the navButtons class I'm not seeing any success. I suspect it's a display issue, but I'm not sure --- changing from inline to inline-block didn't really help.
<!DOCTYPE html>
<html>
<head>
<title>The Leaflet</title>
<style>
div
{
display: inline;
}
a
{
text-decoration: none;
}
p
{
text-align:left;
margin-left: 130px;
margin-right: 130px;
max-width: 600px;
}
#logo /* This sets the width for the New Leaf logo at the top. This should not change.*/
{
position:relative;
}
#navButtons
{
position:relative;
right:-240px;
}
#announcementImage
{
margin-left: 120px;
margin-right: 120px;
}
a.joinButton
{
margin-left:40%;
color:white;
background-color: #f7853e;
font-size: 30px;
}
a.navButton
{
color:#494541;
font-size: 22px;
}
</style>
</head>
<body>
<div id="logo"> <! --- Sets up the logo --->
<img src ="images/NLNewsletterLogo.png">
</div>
<div id="nav buttons"> <! --- Navigation Bar--->
<a class = "joinButton" href="url">Join</a>
<a class = "navButton" href="url"> Meet </a>
<a class = "navButton" href="url">Learn </a>
<a class = "navButton" href="url">Support </a>
</div>
<br>
<br>
<br>
<br>
<br>
<div id ="announcementImage"><! --- Lead Image-->
<img src="images/announcementGraphic.png">
</div>
<div id = "announcementText">
<p>Thrive Week is in full swing here at the Leaf. So far, we've had Sharon Perry, head of the State
College Area School District Career Center, help participants identify which of 34 traits,
including the special quality of woo, are strengths they employ in various settings so they can
work smarter. Then Anna Gokieli, owner of Tru Meditation and Yoga, got us staying present and
peaceful even in situations that often trigger stress. Will Snyder brought it home last night by
showing how making art and making money don't have to conflict.
Have a comment on a workshop you've attended or a session you'd like to see in our remaining
Design and Launch weeks? Galen would love to hear from you!</p>
</div>
</body>
Try this
#logo {
display: inline-block;
vertical-align: middle;
}
#nav {
display: inline-block;
vertical-align: middle;
width: 100%;
}
I think what your looking for is:
#logo {
vertical-align: middle;
}
Try adding bottom of something like 60px to div with id nav buttons.
Since this element is position: relative, it's placement can be controlled with left, right, top, bottom, like so:
#nav#buttons {
bottom: 50px;
}
Floating the logo left, and adding margin to the #nav will do the trick.
#logo { float: left; }
#nav {margin-top: 80px; width: 100%; display: inline-block; }
h1.title { clear: left; }
You're almost there. Inline-Block is what I'd use with absolute positioned nav, but you have a generic div {position:inline;} that applies to everything on the page inside of a div. You should be more specific for your logo and nav and just get rid of the generic styling by giving each a class like <div class="WHATEVER"> so you can target the div you want to work on.
Then try this:
#logo {
width: 240px;
display: inline-block;
#nav buttons {
margin: 0px 0px 0px 80px;
display: inline-block;
position: absolute;
top: 80px;}
I have created a page with a series of buttons. All the buttons have a height of 65 pixels.
Some of the buttons have fallen out of alignment due to "word-wrap", see linked image.
CSS:
div {
width: 1250px;
margin: 0 0 5px 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
h1 {
font-size: 14pt;
font-weight: bold;
font-style: italic;
margin: 0 0 5px 0
}
div button {
height: 65px;
font-size: 11pt;
text-align: center;
margin: 0;
padding: 0 3px 0 3px;
border: none;
color: white;
white-space: normal;
}
The rest of my CSS just affects the color of the buttons.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="Stylesheet" href="styles/home.css"/>
</head>
<body>
<div id="header">
<h1>Process Framework</h1>
</div>
<div id="row1">
<button>Manage Strategy</button><!--
--><button>Manage Stakeholder</button><!--
--><button>Manage Risk</button><!--
--><button>Manage Manage Governance & Compliance</button><!--
--><button>Manage Financial Performance</button>
</div>
<div id="row2">
<button>B.2 Develop New Business</button><!--
--><button>A.1 Manage E&P Mid Term Plan</button><!--
--><button>A.2 Manage Reputation</button><!--
--><button>A.3 Manage E&P Management System</button><!--
--><button>A.4 Manage Legal Entity</button><!--
--><button>A.5 Govern Non-Operated Ventures</button><!--
--><button>A.6 Opportunity Maturation and Project Delivery</button>
</div>
<div id="row3">
<button>C.1 Exploration</button><!--
--><button>C.2 Development</button><!--
--><button>C.3 Production & Maintenance</button><!--
--><button>C.4 Abandonment</button>
</div>
<div id="row4">
<button>D.1 Manage Asset</button><!--
--><button>D.2 Manage Hydrocarbon Resource Volumes</button><!--
--><button>D.3 Manage Integrated Activity Planning</button><!--
--><button>D.4 Manage Activities</button><!--
--><button>D.5 Manage Risk</button><!--
--><button>D.6 Manage Processes</button><!--
--><button>D.7 Manage and Deploy Technology</button><!--
--><button>D.8 Information Management</button>
</div>
<div id="row5">
<button>E.1 Legal</button><!--
--><button>E.2 Finance & Controlling</button><!--
--><button>E.3 Procurement</button><!--
--><button>E.4 HR</button><!--
--><button>E.5 HSSE</button><!--
--><button>E.6 Communication</button><!--
--><button>E.7 Information Technology</button>
</div>
<div id="footer">
</div>
</body>
</html>
Any help would be greatly appreciated.
Thanks in advance.
You should define to your button the vertical alignement. If you really want to keep the display inline-block. Otherwise float: left; do the job without reseting the space between button with comment <!----> (so better for maintainability).
button { vertical-align: middle;}
Put your buttons in an un-styled unordered list and let the list do the aligning for you.
<ul>
<li><button></li>
<li><button></li>
...
</ul>
CSS:
ul, li {
list-style:none;
margin:0;
padding:0
}
li {
float:left
}
Add vertical-align: middle; to the buttons.
I have the following HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://www.rtwilson.com/robintheme/style.css" />
</head>
<body>
<div id="branding">
<div id="blog-title">
<h1>Robin's Blog</h1>
</div>
<div id="logo-div" style="float:right; display:inline;">
<img class="logo" src="http://rtwilson.com/academic/mugshot.jpg" height=100px>
</div>
<h1 id="blog-description">A PhD student talking about interesting things</h1>
</div>
</body>
</html>
I am trying to get the image to display to the right of both of the h1's but without creating a gap between the h1's. That is, I would like the top of the image to be aligned with the top of the first h1, the image to be on the right, and the spacing between the h1's to be exactly how it would be without an image there.
I thought it could do this by floating the image to the right and setting the display property to inline, but I've tried this and there is a gap between the h1's.
How can I fix this?
Fiddle: http://jsfiddle.net/9vRLH/
Demo: http://jsfiddle.net/9vRLH/embedded/result/
Try the below css and HTML: Please se inline Css in image div.
#blog-title {
float: left;
font-family: 'Droid Serif',serif;
font-size: 40px;
font-weight: 400;
}
#blog-description {
clear: left;
float: left;
font-family: 'Droid Serif',serif;
font-size: 20px;
}
<div id="blog-title">
<h1><a rel="home" title="Robin's Blog" href="http://127.0.0.1:8888/wordpress/">Robin's Blog</a></h1>
</div>
<div style="float: right; display: inline;" id="logo-div">
<img height="100px" src="http://rtwilson.com/academic/mugshot.jpg" class="logo">
</div>
<h1 id="blog-description">A PhD student talking about interesting things</h1>
I'd float the image right and give the divs some right-margin, like this:
<div id="branding">
<img class="logo" style="float:right;" src="http://rtwilson.com/academic/mugshot.jpg" height="100">
<div id="blog-title" style="margin-right: 110px;">
<h1>Robin's Blog</h1>
</div>
<h1 style="margin-right: 110px;" id="blog-description">A PhD student talking about interesting things</h1>
</div>
Fiddle: http://jsfiddle.net/Qch6u/
I recommend something like the following for these reasons:
The HTML is more concise (less elements), and reflects better the intent of your titling--a main title with a subtitle description. Generally, one should only have a single h1 tag on a page, and this places both the relevant pieces into a single tag. A search engine will now read it as a single title "Robin's Blog A PhD student talking about interesting things" instead of as two items "Robin's Blog" ... "A PhD student talking about interesting things."
Since you want the image to not interfere at all with the text, then using absolute positioning to effect that makes sense, as it will never cause any gaping in the text, nor reposition itself down the page. Of course, it is then good to at least give a min-width to keep from any overlap of the image to the text.
HTML
<div id="branding">
<h1>
<a id="blog-title" href="http://127.0.0.1:8888/wordpress/" title="Robin's Blog" rel="home">Robin's Blog</a>
<span id="blog-description">A PhD student talking about interesting things</span
</h1>
<img src="http://rtwilson.com/academic/mugshot.jpg" >
</div>
CSS
#branding {
padding-right: 110px;
position: relative;
min-height: 100px;
font-family: 'Droid Serif',serif;
min-width: 200px;
}
#branding img {
height: 100px;
position: absolute;
top: 0;
right: 0;
}
#blog-title {
color: black;
font-size: 40px;
font-weight: 400;
text-decoration: none;
}
#blog-description {
display: block;
font-size: 20px;
}