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.
Related
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>
I am making a footer for our project. How do I make it so that when I zoom in the webpage, the "Follow us on Facebook" will go on top of the footer info? I am sorry for some mistakes that you may find in my code. Suggestions and corrections will greatly appreciated.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Pamana Beach Resort </title>
<link rel="icon" type="image/png" href="icon.png">
<style>
div#fixedfooter {
position:fixed;
bottom:0px;
left: 0px;
width:100%;
height: 70px;
background:#00ADEF;
}
#footer-info {
background-color: #00adef;
width: 50%;
margin-left: 50px;
margin-top: 10px;
float: left;
}
#footer-infotext {
color: #FFFFFF;
font-family: footer-info;
font-size: 90%;
text-align: center;
float: left;
}
#social {
margin-top: 10px;
margin-right: 30px;
background-color: #00adef;
float: right;
widht: 400px;
}
#sociallogo {
width: 50px;
height: 50px;
}
#socialtext {
float:left;
font-family: footer-info;
padding-right: 10px;
color: #FFFFFF;
}
#font-face {
font-family: footer-info;
src: url(GOTHIC.ttf);
}
#font-face {
font-family: footer-infoBold;
src: url(GOTHICB.ttf);
}
#bold-info {
font-family: footer-infoBold;
font-size: 100%;
}
</style>
</head>
<footer>
<div id="fixedfooter" >
<div id="footer-info">
<p id="footer-infotext">Designed by <span id="bold-info">CMSC 2 Students | Pamana Beach Resort </span> © Copyright 2016, All Rights Reserved.</p>
</div>
<div id="social">
<p id="socialtext">FOLLOW US ON FACEBOOK</p>
<img id="sociallogo" src="social.png">
</body>
</html>
Major points:
Close your tags! You didn’t close your footer and some div-elements.
Put the “social”-div first, so it gets on top when the view gets
smaller.
From the id “fixedfooter” delete the “height” attribute.
Otherwise, the footer will not be big enough to show all the info on
small screens.
Use #media to change your code according to the screen-size.
Please look at the code snippet below to see all the changes. I hope it helps.
* {} #fixedfooter {
position: fixed;
bottom: 0px;
background: #00ADEF;
text-align: center;
}
#footer-info {
background-color: #00adef;
width: 30%;
margin-top: 10px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#footer-infotext {
color: #FFFFFF;
font-family: footer-info;
font-size: 90%;
text-align: center;
float: left;
}
#social {
margin-top: 10px;
background-color: #00adef;
width: 400px;
margin-left: auto;
margin-right: auto;
}
#sociallogo {
width: 50px;
height: 50px;
}
#socialtext {
float: left;
font-family: footer-info;
padding-right: 10px;
color: #FFFFFF;
}
#font-face {
font-family: footer-info;
src: url(GOTHIC.ttf);
}
#font-face {
font-family: footer-infoBold;
src: url(GOTHICB.ttf);
}
#bold-info {
font-family: footer-infoBold;
font-size: 100%;
}
#media(min-width: 768px) {
#footer-info {
width: 40%;
margin-left: 50px;
}
#social {
float: right;
margin-right: 30px;
margin-left: 50px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Pamana Beach Resort</title>
<link rel="icon" type="image/png" href="icon.png">
</head>
<body>
<footer>
<div id="fixedfooter">
<div id="social">
<p id="socialtext">FOLLOW US ON FACEBOOK</p>
</div>
<div id="footer-info">
<p id="footer-infotext">Designed by <span id="bold-info">CMSC 2 Students | Pamana Beach Resort </span> © Copyright 2016, All Rights Reserved.</p>
</div>
</div>
</footer>
</body>
</html>
What you need is to place your "Follow us on facebook" on top of your other element and float it right at high resolutions. I've created this fiddle to demonstrate it. However you might need to adjust the resolution breakpoint in the #media query to fit your needs.
I'm just getting started on HTML5 and CSS3 (working through The Odin Project) and the first project is to duplicate the Google homepage. I was able to get everything set up, but it seems like my CSS is somehow preventing my header links from acting like links. You can't click on them and the hover effects don't work.
They work fine on my footer and my nav text-decoration is applied, so I'm not sure what's making it act like it's not a link. I've only tested it in Chrome, so I'm not even worried about compatability issues yet. Am I doing the HTML5 wrong? Or is it some kind of weird rule like you can't use hover effects with inline-block or something? I'm not familiar enough with it yet to have learned all those nuances yet...
Here's the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Google</title>
<link rel="stylesheet" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
</head>
<body>
<nav>
<ul>
<li>+Mara</li>
<li>Gmail</li>
<li>Images</li>
<li><img src="images/options.png" width="35px"></li>
<li><img src="images/bell.png" width="35px"></li>
<li><img src="images/plus.png" width="35px"></li>
<li><img src="images/photo.jpg" width="40px" class="rounded_img"></li>
</ul>
</nav>
<div class="container">
<img class="logo" src="https://www.google.com/images/srpr/logo11w.png" width="320px"/>
<center><form action="#" method="post" name="google_search_form">
<input type="search" name="googlesearch" class="search"><br/><br/>
<input type="submit" value="Google Search" class="button">
<input type="submit" value="I'm Feeling Lucky" class="button">
</form></center>
</div> <!--End container-->
<footer>
<ul>
<span class="left"><li>Advertising</li></span>
<span class="left"><li>Business</li></span>
<span class="left"><li>About</li></span>
<span class="right"><li>Settings</li></span>
<span class="right"><li>Terms</li></span>
<span class="right"><li>Privacy</li></span>
</ul>
</footer>
</body>
</html>
And the CSS:
.container{
position: relative;
vertical-align: middle;
}
.logo {
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 270px;
clear: right;
}
.search {
width: 650px;
height: 35px;
margin-top: 40px;
font-size: 27px;
background: url('images/voice.gif') 97% 50% no-repeat;
opacity:0.6;
background-size: 17px;
border: blue solid 1px;
}
.button {
font-family: Helvetica, Roboto, sans-serif;
font-weight: bold;
color: black;
background: #f2f2f2;
border: #d6d6d6 solid 1px;
border-radius: 2px;
width: 140px;
height: 40px;
}
nav {
width: 600px;
height: 30px;
font-size: 1em;
font-family: Helvetica, Roboto, sans-serif;
font-weight: lighter;
text-align: center;
position: relative;
float: right;
}
nav ul {
height: auto;
padding: 0;
margin: 0;
}
nav li {
display: inline-block;
padding: 10px;
vertical-align: middle;
}
.atext {
text-decoration: none;
color: black;
}
.atext: hover {
text-decoration: underline;
background-color: yellow;
}
.aicon {
opacity: 0.6;
}
.aicon:hover {
opacity: 1.0;
}
footer {
width: 102%;
height: 40px;
left: -20px;
right: -20px;
font-size: 1em;
font-family: Arial, sans-serif;
position: absolute;
bottom: 0;
background: #f2f2f2;
border: #d6d6d6 solid 1px;
}
footer ul {
height: auto;
padding: 0;
margin: 0;
}
footer li {
display: table-cell;
padding: 10px;
vertical-align: middle;
}
footer li a {
text-decoration: none;
color: gray;
}
.left {
float: left;
margin-left: 20px;
}
.right {
float: right;
margin-right: 20px;
}
.rounded_img {
border-radius: 20px;
}
Any help will be greatly appreciated. Thanks!
Oh, and I haven't even started on JavaScript yet, so I'd like to avoid JavaScript if possible!
Here is a fiddle: http://jsfiddle.net/Lvfmwhvu/
The problem is your container element, if you remove the position relative it will work, but not sure if it will be maintained in the same position, but you can check it and modify your css accordingly:
.container{
vertical-align: middle;
}
Hope this helps.
Your main container isn't clearing the floated navbar. Because it falls later in your document, it has a higher layer index and covers the navbar. Try this:
.container {
...
clear: both;
}
Demo
I have been recently designing some content which needs to be side by side and have the height automatically resize, but the height doesn't resize. The div doesn't expand to the size of the items inside of it. Is there a way to allow the div to expand to the size of the elements inside of it?
CSS
* {
padding: 0px;
margin: 0px;
}
body {
font-family: 'Metrophobic', sans-serif;
background-color: #c5c5c5;
background-image: url('../images/noise.png');
}
#container {
width:900px;
background-color: #dbdbdb;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
box-shadow: 0px 0px 5px black;
}
.center_align {
display: inline-block;
margin-left: auto;
margin-right: auto;
}
#header {
height:80px;
font-size: 60px;
padding: 10px;
text-align: center;
}
#menu {
width:900px;
height:50px;
margin-top: 10px;
margin-bottom: 10px;
background-color: #cacaca;
}
.menu_link {
width:224px;
height:50px;
text-align: center;
font-size: 35px;
float: left;
opacity: 0.3;
background-color: #cacaca;
}
.menu_divider {
width: 1px;
height: 50px;
background-color: #dbdbdb;
float:left;
}
#content {
width: 900px;
height: auto;
padding: 10px;
font-size: 20px;
height: auto;
}
.line_container {
margin-top:5px;
margin-bottom:5px;
}
#footer {
width:900px;
height:22px;
padding-top:2px;
text-align: center;
font-size: 14px;
color:black;
}
a:link {
color:black;
text-decoration: none;
}
a:visited {
color:black;
text-decoration: none;
}
a:hover {
color:black;
text-decoration: none;
}
a:active {
color:black;
text-decoration: none;
}
a.link:link {
color:#21525e;
}
a.link:visited {
color:#21525e;
}
a.link:hover {
color:#307f91;
text-decoration: underline;
}
a.link:active {
color:#307f91;
text-decoration: underline;
}
HTML
<html>
<head>
<title>Home</title>
<link rel="shortcut icon" href="../images/favicon.ico" />
<link href="http://fonts.googleapis.com/css?family=Metrophobic" rel="stylesheet" type="text/css" />
<link href="../css/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.icon {
width:100px;
height:100px;
border: 3px solid white;
border-radius:25px;
margin-left:10px;
margin-right:10px;
background-position: center center;
background-size: 100px 100px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<div class="center_align">
<img src="../images/header_icon.png" alt="header_icon" width="80" height="80" style="margin-right:20px;float:left;" />
<div style="height:80px;float:left;">Title</div>
</div>
</div>
<div id="menu">
Home
<div class="menu_divider"></div>
Tutorials
<div class="menu_divider"></div>
About
<div class="menu_divider"></div>
Contact
</div>
<div id="content">
<div style="width:900px;">
<div class="icon" style="background-image:url('image.jpg');float:left;"></div><div style="float:left;margin-top:20px;">I'm a freelance Web, Iphone, and Game developer.</div>
</div>
</div>
<div id="footer">
© Cameron
</div>
</div>
</body>
</html>
Looks like the problem is that the #footer element isn't properly cleared. Add clear: both; to #footer. This pushes the cleared element below the floated elements, and should functionally result in the same visual fix.
The "container div" basically "forgets" that it is the container for them, so simply add an overflow:auto; to make it remember.
I also tend to add zoom:1 for IE.
The problem is that you are floating elements, and that causes problems with wrapping divs per default (pretty much...).
Here is a working solution, where overflow:hidden is added to the wrapping div: http://jsfiddle.net/s2dxw/2/
The float issue is pretty confusing, and has had a couple of solutions in the past. Here's a good read regarding floats in HTML: http://css-tricks.com/all-about-floats/
Alternatively, you can put some element with the rule clear: both; inside and at the end of the wrapping div.
I have a series of images I would like to display horizontally on my website, using CSS and divs. I've looked at several posts about how to display images horizontally already and I wasn't able to get any of them to work.
Here's the code from the page I'm referring to:
<head>
<link rel=StyleSheet href="style.css" type="text/css" media=screen>
<style>
div.imageBox {
float: left;
margin-right: 10px;
}
div.imageBox p {
text-align: center;
}
</style>
</head>
<body>
<?php include 'header.php'; ?>
<div id="content">
<div id="container">
<div class="imageBox">
<img src="image" width="800" height ="600">
</div>
<div class="imageBox">
<img src="image" width="600" height ="450">
</div>
<div class="imageBox">
<img src="image" width="800" height ="450">
</div>
</div>
</div>
</body>
and here's the code for the style sheet:
body{
font-family: helvetica, arial, sans-serfif;
font-size: 14px;}
div#menu {
display: inline;
text-align: center;
width: auto;
top: 20px;
margin-left: 10%;
margin-right: 10%;
background: transparent;
height: 10px;
position: fixed;
}
div#menu ul {
margin: 0;
display: block;
}
div#menu ul li {
padding-right: 55px;
display: inline;
}
div#content {
padding-top: 40px;
text-align: center;
}
div#container{
float: left;
display: inline;
height: 800px;
width: 0px;
}
a:link {
text-decoration: none;
color: #000;
}
a:active {
text-decoration: none;
color: #000;
}
a:visited {
text-decoration: none;
color: #000;
}
a:hover {
text-decoration: underline;
color: #000;
}
Is there perhaps an easier way for me to do this?
Thanks for your help!
Try to change
div#container{
float: left;
display: inline;
height: 800px;
width: 0px;
}
into
div#container{
float: left;
display: inline;
height: 800px;
white-space: nowrap;
}
add:
div.imageBox {
float: left;
margin-right: 10px;
display:inline;
}
You're using divs which are block elements when you should be using something inline.
Images will align next to each other. If you need the divs, you can give them the style display: inline to make them behave in the same way. You can also use float: left, but that will make things harder in most cases.
You can apply styles like margins and borders to images too, so you may not need the divs. Although I'm not sure how you want it to look exactly.
Here is the example: http://jsfiddle.net/hobobne/d5sYM/
<html>
<head>
<style>
img {width: 100px; height: 100px;}
.imageBox {display: inline-block; border: 1px solid grey; background: silver; padding: 4px; text-align: center; font-size: 10px;}
</style>
</head>
<body>
<div class="imageBox">
<img src="http://screenshots.en.softonic.com/en/scrn/80000/80669/easter-icons-5.jpg"><br>
Image 1
</div>
<div class="imageBox">
<img src="http://l-userpic.livejournal.com/82523298/2181918"><br>
Image 2
</div>
<div class="imageBox">
<img src="http://www.jellymuffin.com/icons/emo/images/30.jpg"><br>
Image 3
</div>
</body>
</html>