I am a beginner, and I am trying to get this to work.
How do I position the link to the right side of the connect text?
I want the text links to be inline but to the right.
.footer {
grid-area: footer;
margin-top: 38px;
margin-left: 100px;
margin-right: 100px;
height: 700px;
}
.footer-text {
padding: 200px 100px;
font-family: "Khula", sans-serif;
font-size: 80px;
color: #222222;
}
.footer-contact {
font-family: "Khula", sans-serif;
font-size: 35px;
color: #222222;
letter-spacing: -1px;
text-decoration: none;
padding: 100px 60px;
}
ul {
list-style-type: none;
text-decoration: none;
}
<div class="footer-text">Contact</div>
<ul>
<li>Email</li>
<li>LinkedIn</li>
<li>Instagram</li>
</ul>
You can add this to the .footer-text:
display:flex;
justify-content: right;
Note that this will apply to all childs of the .footer-text div.
Please update this two class properties as like the following code:
.footer-text {
padding: 200px 100px;
font-family: "Khula", sans-serif;
font-size: 80px;
color: #222222;
display: inline-block;
}
ul {
list-style-type: none;
text-decoration: none;
display: inline-block;
}
This can be solved easily by using a wrapper div. like so,
.wrapper {
overflow: auto;
}
.footer-text {
float: left;
}
.ul {
float: right;
}
<div class="wrapper">
<div class="footer-text">Contact</div>
<ul class="ul">
<li>Email</li>
<li>LinkedIn</li>
<li>Instagram</li>
</ul>
</div>
Related
So for one of my school projects, we have to design a website using Html & CSS and I've encountered a problem where I don't know how to fit 2 logos (left & right) into the corners of my footer. I've tried to change the position, float, width etc and it doesn't seem to work, the logo always seems to not go in the place I want it to be. Sorry if this sounds amateur as I've only started doing Html & CSS a few weeks ago.
This is the current image where the logo is below my ul's and is in the incorrect position. -
This is what I want the footer to look like, it would be great to have the text on the left "Sponsored by HP omen gaming" to be a image as I may swap it out with another logo in the future. -
Thanks to anyone in advance who may be able to solve this problem for me, below would be my html & CSS code.
.footer {
background-color: #035642;
margin-top: 10px;
height: 60px;
color: #efe5d0;
text-align: center;
padding: 15px;
font-size: 100%;
font-family: Arial;
display: block;
}
.footer ul {
padding: 5px;
list-style-type: none;
text-align: center;
margin: 10px;
overflow: hidden;
}
.footer li {
text-decoration: none;
text-align: center;
font-family: arial;
font-weight: bold;
list-style-type: none;
display: inline-block;
}
.footer ul li {
display: inline-block;
}
.footer ul li a {
text-decoration: none;
padding: .2em 1em;
color: #efe5d0;
background-color: #5c755e;
text-align: center;
font-family: arial;
font-weight: bold;
}
.footer ul li a:hover {
color: #000;
background-color: #fff;
}
#footer-right {
height: 50px;
width: auto;
position: fixed;
float: right;
}
<div class="footer">
<li>WBHS ESPORTS</li>
<ul>
<li>Facebook</li>
<li>|</li>
<li>YouTube</li>
<li>|</li>
<li>Twitch</li>
</ul>
<img src="hp-omen-logo.png" id="footer-right">
</div>
Try look into flexbox. Here's a quick template to do what you want.
.footer {
display: flex;
justify-content: space-between;
}
.center {
text-align: center;
}
<div class="footer">
<p>Left</p>
<div class="center">
<p>Some text</p>
<p>Your list</p>
</div>
<p>Right</p>
</div>
I think a solution can be the use of display:flex
And to be more clean try to use also the widgets, you can see in this example how it works.
.footer {
background-color: #035642;
margin-top: 10px;
height: 60px;
color: #efe5d0;
text-align: center;
padding: 15px;
font-size: 100%;
font-family: Arial;
display: block;
}
.footer ul {
padding: 5px;
list-style-type: none;
text-align: center;
margin: 10px;
overflow: hidden;
}
.footer li {
text-decoration: none;
text-align: center;
font-family: arial;
font-weight: bold;
list-style-type: none;
display: inline-block;
}
.footer ul li {
display: inline-block;
}
.footer ul li a {
text-decoration: none;
padding: .2em 1em;
color: #efe5d0;
background-color: #5c755e;
text-align: center;
font-family: arial;
font-weight: bold;
}
.footer ul li a:hover {
color: #000;
background-color: #fff;
}
#footer-right {
height: 50px;
width: auto;
position: fixed;
float: right;
}
/*my-edit*/
#the-footer{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
align-items:center;
height: auto;
margin: 0;
padding: 10px;
}
#the-footer .widget{
width: 30%;
}
#the-footer .widget.left{
text-align: left;
}
#the-footer .widget.right{
text-align: right;
}
#the-footer .widget.center{
text-align: center;
}
#the-footer .widget .title{
font-weight: bold;
letter-spacing: 2px;
}
#the-footer .widget .logo-link{
color:#fff;
display: inline-block;
text-decoration: none;
max-width:150px;
}
#the-footer .widget .logo-link:hover{
color:#000;
}
<div class="footer" id="the-footer">
<div class="widget left">
<a class="logo-link" href="#" target="_blank">Sponsored by HP omen gaming</a>
</div>
<div class="widget center">
<div class="title">WBHS ESPORTS</div>
<ul class="footer-nav">
<li>Facebook</li>
<li>|</li>
<li>YouTube</li>
<li>|</li>
<li>Twitch</li>
</ul>
</div>
<div class="widget right">
<a class="logo-link" href="#" target="_blank"><img class="logo-footer" src="https://via.placeholder.com/60" alt="logo"></a>
</div>
</div>
You can use the display: grid property so you can separate your footer into 3 parts
You can learn about the grid property here: https://www.w3schools.com/css/css_grid.asp
For some reason my navbar is bigger than it's supposed to be. Or atleast I think it's my navbar. Whenever I remove #rect It goes away. What's the problem here?
#tagline {
font-style: italic;
padding-right: 150px;
padding-left: 10px;
}
nav {
background-color: white;
display:flex;
align-items:center;
overflow: hidden;
}
#logo {
padding-top: 8px;
padding-left: 30px;
vertical-align: middle;
}
li, li>a {
text-decoration: none;
list-style-type: none;
color: black;
display: inline-block;
float: right;
padding: 5px 10px 5px 10px;
}
li>a:hover {
background-color: #7bcc1d;
color: white;
}
.active {
background-color: #7bcc1d;
color: white;
}
#main-bg {
background-image: url('https://s15.postimg.org/ra1dhmjkb/main-bg.png');
background-size: 100% 100%;
height: 500px;
margin: 0;
}
#rect {
background-color: white;
position: relative;
top: 50px;
left: 100px;
width: 400px;
height: 400px;
text-align: center;
}
h2 {
padding-top: 15px;
margin-bottom: 0;
}
span {
margin: 0;
}
#enroll_button {
text-decoration: none;
padding: 10px 20px 10px 20px;
background-color: #7bcc1d;
color: white;
}
<nav>
<img src="https://s12.postimg.org/n0yt5tenx/lb_logo.png" id="logo" alt="logo">
<span id="tagline">Live, 1-to-1, flexible and personalized</span>
<ul id="nav-items">
<li>How it Works</li>
<li>Courses</li>
<li>Teachers</li>
<li>Enroll</li>
<li>Login</li>
</ul>
</nav>
<div id="main-bg">
<div id="rect">
<h2>3 Steps to Complete<br>Your High School Foreign<br>Language Requirement</h2><br>
<span><strong>Convenient Scheduling: </strong>Pick lessons<br>to fit your schedule.</span><br><br>
<span><strong>Interactive Courses: </strong>Learn through<br>live, personal lessons.</span><br><br>
<span><strong>Earn Approved Credits: </strong>Earn credits<br>to satisfy high school requirements.</span><br><br>
Enroll in Your Course
</div>
</div>
You haven't set #rect as a block element and the h2 margin is pulling the whole thing down.
#rect h2{margin-top:0;}
That's because of margins which set in user agent stylesheet from the browser. You can link the reset.css and set your desire margins in your own css.
I'm new to html and css and I'm trying to make a webpage.
I created 2 big buttons, each about half the size of the screen. The problem is I can't display them next to each other. Instead they are displayed one above the other.
The little piece of html is below the css of the added snippet which probably looks a bit messy.
EDIT: the idea is to create a page divided in 2 like --> http://www.masitupungato.com/ <-- but a very basic look
Here are the screenshots:
body {
background: #191B1C;
color: white;
font-family: helvetica;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li a{
color: white;
background: #2A2F30;
height: 616px;
width: 650px;
border-radius: 40px;
text-align: center;
font-size: 100px;
font-weight: bold;
text-decoration: none;
padding-top: 400px;
display: inline-block;
}
li a:hover{
background: #2FA2C4;
border: 4px solid white;
}
<div>
<ul>
<li id="left-container">Browse</li>
<li id="right-container">Upload</li>
</ul>
</div>
Add style for ul li
ul li {
float:left; //or display:inline-block;
}
body {
background: #191B1C;
color: white;
font-family: helvetica;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
ul li {
float:left
}
li a {
color: white;
background: #2A2F30;
height: 616px;
width: 650px;
border-radius: 40px;
text-align: center;
font-size: 100px;
font-weight: bold;
text-decoration: none;
padding-top: 400px;
display: inline-block;
}
li a:hover{
background: #2FA2C4;
border: 4px solid white;
}
<div>
<ul>
<li id="left-container">Browse</li>
<li id="right-container">Upload</li>
</ul>
</div>
Use display: table-cell; on the li items.
li {
display: table-cell;
}
https://jsfiddle.net/9627av37/1/
body {
background: #191B1C;
color: white;
font-family: helvetica;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li { display: inline-block;}
li a{
color: white;
background: #2A2F30;
height: 616px;
width: 650px;
border-radius: 40px;
text-align: center;
font-size: 100px;
font-weight: bold;
text-decoration: none;
padding-top: 400px;
display: inline-block;
}
li a:hover{
background: #2FA2C4;
border: 4px solid white;
}
<div>
<ul>
<li id="left-container">Browse</li>
<li id="right-container">Upload</li>
</ul>
</div>
Just add li { display: inline-block; } to the CSS and pray users have a window that wide.
You can use table with 50% width for each td and get the button inside of them like
<table width="100%" border="1">
<tbody>
<tr>
<td width="50%" align="center"><button>first</button></td>
<td width="50%" align="center"><button>second</button></td>
</tr>
</tbody>
</table>
Although this is not the best case, but you can use for your thing, best would be using bootstrap and other libraries that gives you grid system to do this.
Please look in those libraries too.
simple display:flex; should do it.
body {
background: #191B1C;
color: white;
font-family: helvetica;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
}
li a{
color: white;
background: #2A2F30;
display-inline:block;
height: 616px;
width: 650px;
border-radius: 40px;
text-align: center;
font-size: 100px;
font-weight: bold;
text-decoration: none;
padding-top: 400px;
display: inline-block;
}
li a:hover{
background: #2FA2C4;
border: 4px solid white;
}
<div>
<ul>
<li id="left-container">Browse</li>
<li id="right-container">Upload</li>
</ul>
</div>
Thank you for the quick answers guys. Both solutions worked.
If i use ul li {float: left;} the footer (wich i didnt insert in my snippet here) pops up but thats not a problem.
I had tried float: left; by writing it in my div class wich didnt work.
Anyway, thanks :)
I was just continuing with making this website and all of a sudden some of my navbar padding goes 'missing' and I can't seem to pinpoint the mistake. I've already played the detective game and commented out some of the stuff I thought was interfering. Luckily I have an original picture before the screw-up and one after. Some of the 'paragraph text' will be 'placeheld' for personal reasons and I think it's irrelevant, unless it's needed in order to fix the problem.
-Thanks.
Before and after picture: http://imgur.com/a/ts1FS
Code:
CSS:
body {
background-color: #1a1a1a;
color: #ccad00;
line-height: 1.9;
font-size: 19px;
}
p.desc{
text-indent: 50px;
}
h1 {
font-family: courier;
color: #ccad00;
}
h2 {
font-family: courier;
color: #ccad00;
text-align: center;
}
#divtitle {
width: 50%;
margin:auto;
padding-top: 50px;
text-align: center;
}
h2
{
font-family:courier;
color: #99cc00;
}
p {
line-height: 1.9
text-size: 19px;
}
#nav {
list-style: none;
font-weight: bold;
margin-bottom: 10px;
width: 100%;
text-align: center;
background-color: #ccad00;
height:40px;
}
#nav ul {
list-style-type: none;
margin: 0px;
padding: 0;
}
#nav li {
margin: 0px;
}
#nav li a {
padding: 10px;
text-decoration: none;
font-weight: bold;
color: #f2f2f2;
background-color: #ccad00;
float: left
}
#nav li a:hover {
color: #0d0d0d;
background-color: #35af3b;
}
.button {
background-color: #ffa600;
border: none;
color: #998200;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 40px;
font-family: courier;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.button:hover {
background-color: white;
color: #998200;
}
div#containerbttn {
width: 800px;
height: 100px;
margin: auto;
background-color: green;
}
ul.square{
list-style-type: square;
}
.center {
text-align: center;
}
html:
<div id="nav">
<ul>
<li>Home
</li>
<li>Center
</li>
<li>Rules
</li>
<li>References
</li>
<li>Rankings
</ul>
</div>
<div>
<div id="divtitle" >
<h1> text </h1>
</div> -->
<div id="containerbttn">
<button class="button">GET STARTED!</button>
<button class="button">FAQ</button>
<button class="button">RANKINGS</button>
</div>
<h2> Synopsis: </h2>
<div class="center">
<p class="desc"> Welcome to ***!. This is a free...
<ul class="square">
<li> some text </li>
<li> some text </li>
</ul>
<p class="desc" > text </p>
</div>
</html>
Your problem exists because you have set the height of the #nav element to 40 px. When you add the padding to your a element, you make it larger than the ul element. This can be solved easily by updating two lines of code.
First, remove from css:
#nav{ height:40px; }
Then, add to html after ul but before closing the nav div:
<div style="clear:both;"></div>
Here is a jsfiddle of your working page: https://jsfiddle.net/8o279n5r/
And here is a great answer on what the clear property does: What does the CSS rule clear: both do?
I've never seen anything stupid like that, or may be it's 2:30 am and I am hallucinating. I've made simple anchor links within the header and I am completely unable to click on them. They are just plain text and are completely non-clickable.
I'll be thankful if you can give me a hint as what/where I am not obeying the HTML/CSS daemon.
HTML
<header>
<div class="confine">
<div class="complete-head-content">
<div class="left-width-less logo-width">
<img src="./imgs/twit-logo.png" />
</div>
<div class="right-width-less">
<div class="top-header-content">
<h1 class="pres-title">Defining Twisted Strategy</h1>
</div>
<div class="lower-header-content">
<div id="navcontainer">
<ul>
<li>Meet the Hobos</li>
<li>Why me?</li>
<li>Our Work in Oblivion</li>
<li>Our Perspective</li>
<li>Our Approach</li>
</ul>
</div>
</div>
</div>
<div class="c"> </div>
</div>
</div>
</header>
<div id="contend">
... ... ...
CSS
a {
color: #EA2E49;
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: #EA2E49;
cursor: pointer;
}
header {
height: 50px;
position: absolute;
top: 0;
left: 0;
width: 100%;
display: block;
z-index: 1;
}
.complete-head-content {
width: 100%;
background-color: #a0c654;
height: 130px;
}
.left-width-less {
float: left;
background-color: #fff;
width: 15%;
text-align: center;
height: 130px;
vertical-align: middle;
}
.left-width-less img {
width : 76px;
height: 100px;
margin-top: 10px;
}
.right-width-less {
float: right;
width: 85%;
}
.top-header-content {
width: 100%;
height: 70px;
background: #437b3c url("../imgs/presentation-title-bg.jpg") no-repeat right;
}
.lower-header-content {
width: 100%;
height: 70px;
}
.logo {
cursor: pointer;
}
/* Navigation */
#navcontainer {
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
text-transform: uppercase;
margin-top: 19px;
}
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: left;
}
#navcontainer ul li { display: inline; }
#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1.7em;
color: #fff;
}
#navcontainer ul li a:hover
{
color: #fff;
background-color: #369;
}
EDIT
Thanks to Nikhil, the had a Z-index:1 which when removed fixed the bug.
Thanks.
Unless you left something out. it is working for me with and without css.
Tested in IE 8
How did you include the CSS btw?
The <div id="contend"> right next to tag had a z-index:1. This made every link in <header> tag non-clickable.
The solution was to remove the z-index property.
Hope it helps someone.