I'm trying to make a simple footer box with some text on the left and some text on the right however when I set the right bit of text to float: right; it only goes about 60% of the way to the right.
Apologies if this is super simple but I've been looking at it forever and just can't get it.
Here's my CSS and HTML code for reference. (ignore the empty classes, they're for later)
CSS:
#import url(https://fonts.googleapis.com/css?family=Oswald:400,700,300);
html {
font-family: 'Oswald', sans-serif;
font-weight: 300;
font-size: 20px;
background-image: url('images/backgrounds/wallpaper.jpg');
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
color: RGBA(255,255,255,0.6);
}
body {
width: 70%;
margin: auto;
background-color: RGBA(200,200,200,0.4);
border-width: 1px;
border-style: solid;
border-color: #FFFFFF;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
padding-bottom: 20px;
padding-top: 10px;
border-radius: 6px;
}
div {
width: 95%;
margin: auto;
background-color: RGBA(50,50,50,0.95);
}
.alignleft {float: left;}
.alignright {float: right;}
.header {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.main {
}
.footer{
margin: auto;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
padding-top: 10px;
padding-bottom: 5px;
padding-left: 15px;
padding-right: 15px;
}
.footerText {
font-size: 13px;
color: RGBA(255,255,255,0.3);
width: 350px;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Site for Things and Stuff</title>
<!-- Style Sheets/Scripts/Misc Stuff -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class='header'>HEADER TEST HEADER TEST</div>
<div class='main'>MAIN CONTENT TEST MAIN CONTENT TEST</div>
<!-- Footer -->
<div class='footer'>
<p class="footerText alignleft">No images are owned by this website unless specified.
<br><br>To recieve help with an issue on the website or other matters, please use the contact button above.</p>
<p class="footerText alignright">Test test test</p>
<div style="clear:both"></div>
</div>
</body>
</html>
Add text-align:right; in .alignright class
.alignright {
float: right;
text-align:right;
}
Related
I want to lift the navigation links in my header section. They all are in a div class "links" which is under div class "headers".
But the margin-bottom property doesn't have any impact.
So to check whether there is any change in position I made the border around the div class "links".
But when border appeared all the navigation links are shown out of the box.
Also there is no impact of margin-bottom on the border box.
Jsfiddle: http://jsfiddle.net/L2k67eyx/
PLEASE let me know whats wrong with my code? Also is there any rules I must know when does margin properties work?
CODE Snippet:
body{
height: 100vh;
margin: 0px;
}
.header{
background-color: white;
height:50%;
overflow: hidden;
font-style: "Roboto";
font-size: 25px;
border-bottom: 2px solid;
border-bottom-color: #cccccc;
}
.content{
position: relative;
background-color: white;
height: 90%;
overflow-y: auto;
}
.logo{
float: left;
left: 0px;
padding-right: 50px;
}
#logo:hover{
background: transparent;
}
.links{
display: block;
float: right;
margin-right: 10px;
margin-bottom: 10px;/*NOT WORKING*/
/*right: 100px;*/
border-style:solid;
border-color: black;
outline-style: solid;
outline-color: green;
}
a{
position: relative;
right: 0px;
top: 25px;
padding-left: 10px;
padding-right: 10px;
color:black;
letter-spacing: 2px;
font-weight: 200;
text-decoration: none;
}
a:hover{
background-color:#cccccc;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
<link rel="stylesheet" type="text/css" href="home.css">
<title>Home Page</title>
<style type="text/css">
</style>
</head>
<body>
<div class="header">
<div class="logo">
<img id="logo"src="logo.png" alt="Logo">
</div>
<div class="links">
Home
Offers
Login
Register
Contact
About
</div>
</div>
<div clear="both"></div>
<div class="content">
</div>
<script type="text/javascript" src="home.js"></script>
</body>
</html>
you should to remove margin top:0px in tag a style to be
a{
position: relative;
right: 0px;
top: 0px;
padding-left: 10px;
padding-right: 10px;
color:black;
letter-spacing: 2px;
font-weight: 200;
text-decoration: none;
}
This is a demo image
The CSS Constraints to be applied are
The web page should have
Constrainnts Table
h3
The text inside h3 tag - Cascading Style Sheet
With a margin for the top as 10% , the text to be aligned to center and the font size xx-large and style “Arimo” with the color of #FFFFFF
<!DOCTYPE html>
<html>
<head>
<title>Capgemini</title>
<style type="text/css">
#home{
border-style: solid;
margin-top: 15px;
margin-bottom: 10px;
margin-left: 15%;
margin-right: 10%;
height: 550px;
width: 900px;
background-color: #D9D9D9;
}
header{
text-align: center;
color: #990000;
font-size: 25px;
}
p{
text-indent:8%;
word-spacing: 40px;
color: #FFFFFF;
background-color: #990000;
margin-left: 90px;
margin-right: 90px;
}
#intro{
border-style: solid;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 15%;
margin-left: 15%;
height: 400px;
width: 600px;
background-color: #525252;
}
h2{
text-align: center;
color: #FFFFFF;
font-size: xx-large;
}
h3{
margin-top: 10%;
text-align: center;
font-size: xx-large;
font-family: "Arimo";
color: #FFFFFF;
}
table,tr{
color: #FFFFFF;
font-family: "Arimo";
margin-top: 10px;
margin-left: 10px;
text-align: left;
}
footer{
text-align: center;
color: #990000;
}
</style>
</head>
<body>
<section id="home">
<header>Web Programming Learning</header>
<p>HOME MATERIALS COMPETITION PASTYEARS ABOUT</p>
<section id="intro">
<h2>CAPGEMINI</h2>
<h3>Cascading Style Sheet</h3><br>
<table>
<tr>
<th>Compreshensive curriculum</th>
<th>Insightful Guest Lectures</th>
<th>interaction with sponsors</th>
<th>$30,000+in Total Prizes</th>
</tr>
</table>
</section>
<footer>
Copyright © 2017 teknoturf
</footer>
</section>
</body>
</html>
The above code showing an error after evaluating as:
CSS applied for the h3 tag is incorrect. Check with the requirement Specification
false
What could be the error, though everything matches with the given constraints?
Your specifications aren't clear. The top margin should be 10% of what? What your code does is give a margin of 10% of the width of the containing block. Read W3 specifications
It could be 10% of the height of the element, 10% of normal margin? Hard to tell.
Your h3 tag seems correct, problem lies elsewhere. Read the description carefully and check the constraints once again. Happens with me as well!
Remove the quotes from "Arimo". It works then.
If the error shows "CSS failed for idName is incorrect" then for this particular question try changing the text inside h2 tag as "LEARN TO LEAD" as specified in the demo image.
<h2>LEARN TO LEAD</h2>
instead of
<h2>CAPGEMINI</h2>
Try to run the code written below. I think this should work or you can visit capegemini css handson solution
<!DOCTYPE html>
<html>
<head>
<style>
#home {
border-style: solid;
margin-top: 15px;
margin-bottom: 10px;
margin-left: 15%;
margin-right: 10%;
overflow: hidden;
height: 550px;
width: 900px;
background-color: #D9D9D9;
}
#intro {
border-style: solid;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 15%;
margin-right: 15%;
overflow: hidden;
height: 400px;
width: 600px;
background-color: #525252;
}
header {
text-align: center;
font-size: 25px;
color:#990000;
}
p
{
text-indent: 8%;
word-spacing: 40px;
color:#FFFFFF;
background-color:#990000;
margin-left: 90px;
margin-right: 90px;
}
h2
{
text-align: center;
font-size: xx-large;
color:#FFFFFF;
}
h3
{
text-align: center;
font-size: xx-large;
color:#FFFFFF;
margin-top: 10%;
font-family: Arimo;
}
table
{
color:#FFFFFF;
font-family: Arimo;
margin-top: 10px;
margin-left: 10px;
}
footer
{
text-align: center;
color:#990000;
}
</style>
</head>
<body>
<section id="home">
<header>Web Programming Learning</header>
<p>HOME
MATRIALS
COMPETITION
PASTYEARS
ABOUT
</p>
<section id="intro">
<h2>CAPGEMINI</h2>
<h3>Cascading Style Sheet</h3>
<table>
<tr><td>Comprehensive curriculum</td><td>Insightful Guest
Lectures</td><td>interaction with sponsors</td><td>$30,000+in Total
Prizes</td></tr>
</table>
</section>
<footer>Copyright © 2017 teknoturf</footer>
</section>
</body>
</html>
newbie to HTML & CSS here with only 2 weeks learning under my belt. I'm trying to replicate the Google web page and although I have managed to center the "Google" logo and the searchbar underneath it, i've done it using margin-top and margin-left properties. I did try margin: 0 auto; with some other properties but could not get anything to work. The times when I did manage to center the logo using different properties, it wasn't fully central on the page. Basically what i'm saying is that the way i've done it works, but I know it isn't the most efficient way of making these two elements central on the page and it certainly doesn't represent a responsive webpage.
Would anyone mind having a look at the code i've pasted below and offer advice on the best way to go about this? I've included the whole HTML and CSS code, incase anyone wishes to load the site in Notepad etc. Many thanks in advance!
<!DOCTYPE html>
<head>
<title>Google</title>
<link href="stylesheet.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="nav">
<ul>
<li id="sign-in">Sign in</li>
<li id="grid-list">
<center><img src="grid-list.jpg"/></center>
</li>
<li id="images">Images</li>
<li id="gmail">Gmail</li>
</ul>
</div>
<div class="main">
<img src="logo.jpg" alt="Google"/>
<p id="searchbar"></p>
</div>
</body>
* {
box-sizing: border-box;
}
div.nav li {
display: inline-block;
font-family: Helvetica;
font-size: 13px;
width: auto;
float: right;
color: #414042;
}
#gmail {
margin-right: 15px;
margin-top: 7px;
padding: 0;
}
#images {
margin-right: 22px;
margin-top: 7px;
padding: 0;
}
#sign-in {
margin-right: 22px;
padding: 7px 13px;
background-color: #1789E8;
color: white;
border-radius: 2px;
font-weight: bold;
height: auto;
text-align: center;
}
#grid-list {
margin-right: 22px;
margin-top: 7px;
}
.main img {
margin-left: 536px;
margin-top: 182px;
}
#searchbar {
border: 1px solid #E8DAEB;
border-radius: 2px;
padding: 0;
text-align: center;
margin-left: 390px;
margin-right: 375px;
margin-top: 21px;
height: 46px;
width: 585px;
}
To center an image you can use text-align:center; on the parent element. For the searchbar you can use margin:0 auto; as long as the search bar has a defined width:
* {
box-sizing: border-box;
}
div.nav li {
display: inline-block;
font-family: Helvetica;
font-size: 13px;
width: auto;
float: right;
color: #414042;
}
#gmail {
margin-right: 15px;
margin-top: 7px;
padding: 0;
}
#images {
margin-right: 22px;
margin-top: 7px;
padding: 0;
}
#sign-in {
margin-right: 22px;
padding: 7px 13px;
background-color: #1789E8;
color: white;
border-radius: 2px;
font-weight: bold;
height: auto;
text-align: center;
}
#grid-list {
margin-right: 22px;
margin-top: 7px;
}
.main {
padding-top:182px;
text-align:center;
}
#searchbar {
border: 1px solid #E8DAEB;
border-radius: 2px;
padding: 0;
text-align: center;
margin:21px auto 0;
height: 46px;
width: 585px;
}
<!DOCTYPE html>
<head>
<title>Google</title>
<link href="stylesheet.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="nav">
<ul>
<li id="sign-in">Sign in</li>
<li id="grid-list">
<center><img src="grid-list.jpg"/></center>
</li>
<li id="images">Images</li>
<li id="gmail">Gmail</li>
</ul>
</div>
<div class="main">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google"/>
<p id="searchbar"></p>
</div>
</body>
For the searchbar you should be using an input rather than a p(paragraph). Another tip is that instead of defining margin-top, margin-right, margin-bottom, margin-left, you can use the shorthand margin. The first value is the top margin, next is right margin, then bottom, then left.
If you want the top/bottom and right/left margins to be the same, respectively, you can define 2 values(first being top and bottom and second being right and left). If you want to define a different top and bottom margin but use the same margin for left/right you can define 3 values(first being top, second being right/left and third being bottom).
For example:
margin-top:20px;
margin-right:50px;
margin-bottom:20px;
margin-left:50px;
can be written as
margin:20px 50px;
Or the following:
margin-top:50px;
margin-right:100px;
margin-bottom:20px;
margin-left:100px;
can be written as:
margin:50px 100px 20px;
Same thing goes for padding.
you can't use pixels to set margin!
you have to set margin of the main class to 50% of page height and width like this:
(to resolve problems change percent of size and margin to fit 100%)
* {
box-sizing: border-box;
}
div.nav li {
display: inline-block;
font-family: Helvetica;
font-size: 13px;
width: auto;
float: right;
color: #414042;
}
#gmail {
margin-right: 15px;
margin-top: 7px;
padding: 0;
}
#images {
margin-right: 22px;
margin-top: 7px;
padding: 0;
}
#sign-in {
margin-right: 22px;
padding: 7px 13px;
background-color: #1789E8;
color: white;
border-radius: 2px;
font-weight: bold;
height: auto;
text-align: center;
}
#grid-list {
margin-right: 22px;
margin-top: 7px;
}
.main {
padding-top:50%;
padding-left:50%;
}
#searchbar {
border: 1px solid #E8DAEB;
border-radius: 2px;
padding: 0;
text-align: center;
margin:21px auto 0;
height: 46px;
width: 585px;
}
img{
margin-left:50%;
}
html , body{
height:100%;
width:100%;
}
<!DOCTYPE html>
<head>
<title>Google</title>
<link href="stylesheet.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="nav">
<ul>
<li id="sign-in">Sign in</li>
<li id="grid-list">
<center><img src="grid-list.jpg"/></center>
</li>
<li id="images">Images</li>
<li id="gmail">Gmail</li>
</ul>
</div>
<div class="main">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google"/>
<p id="searchbar"></p>
</div>
</body>
The problem I am having is I am trying to stop the text overflowing from the right, I have tried setting padding-right to try and address the issue but still no luck. How can I go around this?
Here is my html, css file.
.html
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<link rel="stylesheet" href="css/testing.css" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700' rel='stylesheet' type='text/css' />
<style type="text/css">
/* Importing Nomralized CSS */
#import url('css/normalize/normalize.css');
</style>
</head>
<body>
<div id="container">
<div class="header"></div>
<div class="content-main-top" id="dpb">
<p class="para">
Our new website is currently under<br/> development. It won't take long, please
</p>
<span id="clr" class="size" style="margin-top: 60px;"><h1 style="margin-top: 4px; margin-bottom: 3px;">sit tight!</h1></span>
<p class="para" style="margin-bottom: 10px; color: #808285; margin-top: 30px; font-weight:">
Fill in your email address and we<br/>
will let you know when we launch.
</p>
<input type="email" class="bubble_email"><input type="submit" name="sub" value="Notify me!" class="button">
</div>
<div class="chairs" id="dpb"></div>
<!-- end of container -->
</div>
<!-- Begin Footer -->
<div id="footer">
<!-- Start Container -->
<div id="container">
<!-- Footer Content -->
<div class="content-main-bottom">
<p id="clear_footer">
<span style="color: #808285; font-weight: bolder; line-height: 30px; font-size: 17px;">Get in touch</span><br/>
<!-- Tweet Pic -->
<span class="para">Phone: </span><span style="color: #808285; font-weight: bolder">0845 130 8022</span><br/>
info#titanhealthcare.co.uk
</p>
<p style="font-weight: lighter; font-size: 13px; color: #939598">
© Titan Healthcare Limited 2014. All rights reserved.
</p>
</div>
<!-- End of content for footer -->
</div>
<!-- End of Container -->
</div>
<!-- End of footer -->
</body>
</html>
body {
font-family: 'Open Sans', sans-serif;
}
.para {
color: #7c7b7b;
font-size: 15px;
margin-bottom: 0px;
margin-top: 6px;
}
.para_b {
color: #808285;
}
/*Misc ID'S */
#clr {
color: #34a4b5;
}
/*Size class*/
.size {
font-size: 43px;
}
.button {
background-color:transparent;
outline: none;
border: 0px solid;
margin-left: 1px;
color: #34a4b5;
font-weight: bold;
}
a:link {
color: #34a4b5;
text-decoration: none;
}
#dpb {
display: inline-block;
float: left;
}
#clear_footer {
clear: both;
padding-top: 30px;
}
#container {
width: 980px;
margin: 0 auto;
}
#footer {
background-image: url('img/bottom_bar.jpg');
width: 100%;
height: 3px;
clear: both;
}
.content-main-bottom {
padding-bottom: 10%;
}
/* Images .classes */
.header {
background-image: url('img/titan_header.jpg');
background-repeat: no-repeat;
padding-top: 40px;
/*Size properties */
width: 980px;
height: 143px;
}
.bubble_email {
background-image: url('img/speech_bubble.jpg');
background-repeat: no-repeat;
/*Size properties*/
width: 244px;
height: 49px;
/*Misc Prop*/
background-repeat: none;
border: none;
outline: none;
padding-top: 0px;
margin-top: 6px;
padding: 0 6px;
}
.chairs {
background-image: url('img/titan_chairs.jpg');
background-repeat: no-repeat;
/*Size properties*/
width: 559px;
height: 400px;
margin-left: 50px;
margin-top: 40px;
}
.tweet {
background-image: url('img/tweet_button.jpg');
background-repeat: no-repeat;
/*Size properties*/
width: 368px;
height: 72px;
float: right;
}
Thank you
Okay so the issue here is that you need to understand that when you add padding-right:20; and the width is set to 244px then your input field then becomes 264px wide with a right padding of 20px, not 244px with a right padding of 20px as you would assume. So, to fix your issue you need to add a right padding of e.g. 10px and make the width of your input 234px.
Basically as long as your input width + padding-left + padding-right is equal to the width of your background image you will get the desired effect.
Solution (assuming your image is 250px wide):
.bubble_email {
background-image: url('img/speech_bubble.jpg');
background-repeat: no-repeat;
height: 49px;
background-repeat: none;
border: none;
outline: none;
margin-top: 6px;
width: 238px;
padding: 0 6px;
}
Note the width being 238 + a padding of 6 on the left and 6 on the right = 250px.
Hope this helps.
Put the sppech bubble image in one class, like so:
.speechBubbleImage {
background-image: url('img/speech_bubble.jpg');
}
Then put the rest in another class, and change the width, like so:
.innerSpeechBubble
{
background-repeat: no-repeat; /*Size properties*/
width: 200px; /* This is what you change */
height: 49px; /*Misc Prop*/
background-repeat: none; /* This is redundant and I recommend don't use this */
border: none;
outline: none;
padding-top: 0px;
margin-top: 6px;
padding: 0 6px;
}
Without the img/speech_bubble.img image, its hard to tell you what width to put.
Now use this in HTML, like so
<div class='.speechBubbleImage">
<input type="email" class="innerSpeechBubble">
</div>
<input type="submit" name="sub" value="Notify me!" class="button">
This should work. Let me know what you get. And give the image if possible, so that i can put the exact width.
.bubble_email
{
background-image: url('img/speech_bubble.jpg');
background-repeat: no-repeat; /*Size properties*/
width: 244px;
height: 49px; /*Misc Prop*/
background-repeat: none;
border: none;
outline: none;
padding-top: 0px;
margin-top: 6px;
padding: 0 6px;
}
You just decrease the width to 240 or less in .bubble_email
OR
Add padding-right: 15px; or more in .bubble_email
OR
Stretch the background image like,
background-size:260px 50px;
background-repeat:no-repeat;
Try to Use overflow hidden that may solve this problem.
I'm creating a website which enables reservation of hour-long blocks. I'm trying to get the style right.
This is what it should look like:
And here is the code I've written so far:
<html>
<head>
<title></title>
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400" rel="stylesheet" type="text/css" />
<style type="text/css">
body
{
font-family: 'Source Sans Pro';
font-weight: 300;
margin-left: 25px;
margin-right: 25px;
margin-top: 10px;
margin-bottom: 10px;
}
#header
{
height: 50px;
width: 100%;
}
.block
{
background-color: #e5e5e5;
display: inline-block;
width: 275px;
height: 35px;
}
.block-sideline
{
background-color: #999999;
display: inline-block;
margin-right: 5px;
width: 5px;
height: 35px;
}
.block-span
{
margin-left: 5px;
margin-right: 5px;
}
.block-hours
{
color: #000000;
}
.block-status
{
}
.block-notavailable .block-sideline
{
}
</style>
</head>
<body>
<div id="header">
<img id="header-logo" src="header-logo.svg" height="50px" width="125px" />
</div>
<div id="content">
<h2>Sunday, December 1, 2013</h2>
<div class="block">
<div class="block-sideline">
</div>
<span class="block-hours">6:00 AM – 7:00 AM</span>
<span class="block-status">Not available</span>
</div>
</div>
</body>
Right now, this is what it looks like in IE:
So, now, when I float the hours and the sideline left with float: left; and the status right with float: right;, it looks like this:
Right now the margins and colors are not important, but how can I center the text inside the div and allow it to float at the same time? Also, in the screenshot above, the margins are not showing on the right side. Why is this?
Here is the CSS
.block-sideline
{
background-color: #999999;
display: inline-block;
margin-right: 5px;
width: 5px;
height: 35px;
float:left;
}
.block-hours
{
float:left;
line-height:225%;
color: #000000;
}
.block-status
{
float:right;
line-height:225%;
}
Basically add floats and line-height.