I'm working on a webpage and I want it to look like those magnets (or tiles, whatever you like to call them) in the start menu of Windows 8. After some work, I got the following:
html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<link href='http://fonts.googleapis.com/css?family=Bad+Script|Architects+Daughter|Comfortaa|Handlee' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="banner-div">
</div>
<div class="row">
<div class="magnets">
Some text
</div>
<div class="magnets">
</div>
<div class="magnets">
</div>
</div>
<div class="row">
<div class="magnets">
</div>
<div class="magnets">
</div>
<div class="magnets">
</div>
</div>
</body>
</html>
styles.css
html, body {
background:#f8e4e4;
font-family:'Bad Script';
font-size:medium;
text-align:center;
width:100%;
}
.magnets {
border:5px solid black;
height:300px;
width:300px;
text-align:center;
margin-right:2%;
margin-top:2%;
display:inline-block;
}
.row {
width:100%;
margin-top:1%;
}
But when I open it with IE, something weird happens. The first magnet (The one with Some text) does not align with the other magnets. When I delete the text and run it again it's back to normal again. It seems like that it is the text that pulls the magnet downwards. I think this is very abnormal and clearly this should not happen.
I also tried this with Google Chrome but the result is the same as that of IE.
Add overflow:hidden; in .magnetsDemo
.magnets {
border:5px solid black;
height:300px;
width:300px;
text-align:center;
margin-right:2%;
margin-top:2%;
display:inline-block;
overflow:hidden;
}
I tested the output in Chrome, Mozilla and IE, It worked fine. If you remove width:100%; from html, body , Its giving similar output
Or you could set vertical-align: bottom; on the .magnet class.
EDIT:
The reason for this is that, because the .magnet classed blocks are redefined as being inline-blocks, the blocks are treated as though they were text, so they all have their bottoms line up on a base line by default.
Whenever one of these blocks contains text, the default "anchor" to the base line shifts from the bottom of the block itself to the text inside the block, and the block itself just becomes a kind of border around the text without meaningful anchor points. To force the block to realign with its siblings, you need to override this default behaviour by explicitly defining vertical-align: bottom; on the block so that it will align to the bottom of the base line, just like text will align itself to the bottom of the base line by default, since text is also displayed inline.
Some more reading on this:
http://phrogz.net/css/vertical-align/
https://css-tricks.com/almanac/properties/v/vertical-align/
/EDIT
Link to the result: http://jsfiddle.net/e1og1m8v/, or a local runnable snippet to elaborate:
html, body {
background:#f8e4e4;
font-family:'Bad Script';
font-size:medium;
text-align:center;
width:100%;
}
.magnets {
border:5px solid black;
height:100px;
width:100px;
text-align:center;
margin-right:2%;
margin-top:2%;
display:inline-block;
vertical-align: bottom;
}
.row {
width:100%;
margin-top:1%;
}
<body>
<div id="banner-div">
</div>
<div class="row">
<div class="magnets">
Some text
</div>
<div class="magnets">
</div>
<div class="magnets">
</div>
</div>
<div class="row">
<div class="magnets">
</div>
<div class="magnets">
</div>
<div class="magnets">
</div>
</div>
</body>
Related
I want to place text over the image like the following picture shows :
HTML that I wrote is :
<body>
<div class="image_holder">
<img src="bg2.jpg" />
<div class="overlay"> </div>
</div>
<div>NHS SUB</div>
</body>
CSS :
.image_holder {
position:relative;
float:left;
}
.overlay {
position:absolute;
top:0;
background-color:rgba(34,70,118,0.7);
width:100%;
height:100%;
}
The text will automatically go after the image. What should I do to place the text over the image ?
Try this
<div class="image_holder">
<div class="overlay">NHS SUB</div>
</div>
Style
.image_holder{
background:url('img.jpg');
}
Another Way
<div class="image_holder">
<img src="img.jpg"/>
<div class="overlay">NHS SUB</div>
</div>
STYLE
.img_holder{
position:relative;
}
.img_holder img{
postion:absolute;
z-index:-1;
}
.overlay{
z-index:1;
}
Your div class's look like they should infact be ID's. ID's are unique where as class's are used across numerous elements.
Although your nested div approach will work when applying the correct styles, a more semantic (and less markup) would be using Ben's approach - code:
<div class="mydiv" style="background-image:url('bg2.jpg');">overlay text here</div>
<div>NHS SUB</div>
I've a html page with some div tags in it, I want to put my container div in center of computer screen whether I zoom-in or zoom-out.
I want to modify my html page in such a manner as www.bing.com. The homepage centers on the screen when you zoom-out, whereas, my web page continuously expands while zooming.
My HTML pagecode:
<html>
<head>
<title>
HTML test page
</title>
<style>
.horizontal{
width:100%;
height:100px;
background-color: #bbb;
}
.vertical{
width:100px;
height:70%;
background-color: #bbb;
}
#container{
margin:auto;
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id="container">
<div class="horizontal">
</div>
<div class="vertical" style="float:left;">
</div>
<div class="vertical" style="float:right;">
</div>
<div class="horizontal" style="float:left;" >
</div>
<h1 style="font-size:3em; color:Green; text-align:center;">
HTML Test page
</h1>
</div>
</body>
</html>
How to adjust my CSS code so that I can implement centralized page style same of (www.bing.com)? I want to centralize my container div on pressing Ctrl+-
I just check bing.com. It seems they change position and size of their centered div using JS. It centered while page load and the same when page is re-sized. And do not forget absolute position for #container.
<script>
$(window).resize(function() {
doResize();
}
$(document).ready(function(){
doResize();
}
function doResize() {
var windowHeight = $(window).height();
$('#container').css('top',(windowHeight - $('#container').height())/2);
}
</script>
it has something to do with you using percentages rather than say Pixels or EMs
I got it so that it is staying centered but i still have it sticking to the top of the browser.
<html>
<head>
<title>
HTML test page
</title>
<style>
.horizontal{
width:100%;
height:100px;
background-color: #bbb;
}
.vertical{
width:100px;
height:250px;
background-color: #bbb;
}
#container{
margin:auto auto;
width:750px;
height:400px;
}
</style>
</head>
<body>
<div id="container">
<div class="horizontal">
</div>
<div class="vertical" style="float:left;">
</div>
<div class="vertical" style="float:right;">
</div>
<div class="horizontal" style="float:left;" >
</div>
<h1 style="font-size:3em; color:Green; text-align:center;">
HTML Test page
</h1>
</div>
</body>
</html>
Edit possibility
you could use a MediaQuery and set the top:###px so that the rest of your page sets up with the center. but you would probably have to create several CSS Files or write a lot of CSS code to make it work
Answer to css get height of screen resolution
this answer has a link in it to media queries that takes you to w3.org Media Queries site
After looking that bing page you just referred us, I believe this is what you probably want this
<html>
<head>
<title>
HTML test page
</title>
<style>
body {
width: 100%;
height: 100%;
margin:auto;
}
#container {
vertical-align: middle;
margin:auto;
height:100%;
width:100%;
display: table;
}
span {
display: table-cell;
vertical-align: middle;
text-align:center;
font-size:5em;
color:#fff;
}
#inner {
margin:auto;
width:50%;
height:auto;
border:100px solid #bbb;
color:Green;}
</style>
</head>
<body>
<body>
<div id="container">
<div class="horizontal">
</div>
<div class="vertical" style="float:left;">
</div>
<div class="vertical" style="float:right;">
</div>
<div class="horizontal" style="float:left;" >
</div>
<span><div id="inner">HTML Test page</div>
</span>
</div>
</body>
</body>
</html>
This creates a 100px sized border to your div, which is aligned in center as you want
My page has a layout with a top, middle and bottom section (they are all divs.) So far I have only been able to get the top and bottom areas to appear correctly. Even though the content of the middle is exactly the same as the bottom it just wont appear, therefore I am assuming a simple and obvious syntax era has most likely occurred, the thing is I have spent hour reading and troubleshooting to no avail, so please help!
Here is my HTML...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Saspadidious</title>
<link rel="stylesheet" type="text/css" href="CSS\home.css">
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
</head>
<body>
<a href="home.html">
<div id="top">
<h1 class="header9">Sarspadidious</h1>
</div>
</a>
<div id="middle">
<div class="subOrange">
<h1 class="header6">Who?</h1>
</div>
<div class="subOrange">
<h1 class="header6">What?</h1>
</div>
<div class="subOrange">
<h1 class="header6">Why?</h1>
</div>
</div>
<div id="bottom">
<div class="subRed">
<a href="software.html">
<h1 class="header4">Software</h1>
</a>
</div>
<div class="subRed">
<a href="support.html">
<h1 class="header4">Support</h1>
</a>
</div>
<div class="subRed">
<a href="about.html">
<h1 class="header4">About</h1>
</a>
</div>
<div class="subRed">
<a href="news.html">
<h1 class="header4">News</h1>
</a>
</div>
</div>
</body>
</html>
And my CSS
body {
margin:0;
padding:0;
background-image:url('../Images/arches.PNG');
font-size:100%;
}
a {
text-decoration:none;
color:rgb(44,44,44);
}
#font-face {
font-family:"Mission Script";
src:url('../Other/Mission-Script.OTF');
}
#top {
position:relative;
width:90%;
margin-left:5%;
margin-right:5%;
margin-top:5%;
padding-top:4%;
padding-bottom:3%;
background-color:rgb(197,129,84);
border-color:rgb(44,44,44);
border-style:solid;
border-width:5px;
border-radius:15px;
-moz-border-radius:15px;
}
#middle {
position:relative;
width:95%;
margin-top:5%;
margin-left:2.5%;
margin-right:2.5%;
}
#bottom {
position:relative;
width:95%;
margin-top:5%;
margin-bottom:5%;
margin-left:2.5%;
margin-right:2.5%;
}
.subOrange {
position:relative;
width:26.6%;
margin-left:2.5%;
margin-right:2.5%;
padding-top:3%;
padding-bottom:3%;
background-color:rgb(255,159,72);
border-color:rgb(44,44,44);
border-style:solid;
border-width:5px;
border-radius:15px;
-moz-border-radius:15px;
float:left;
}
.subRed {
position:relative;
width:18.75%;
margin-left:2.5%;
margin-right:2.5%;
padding-top:3%;
padding-bottom:3%;
background-color:rgb(255,69,70);
border-color:rgb(44,44,44);
border-style:solid;
border-width:5px;
border-radius:15px;
-moz-border-radius:15px;
float:left;
}
.header4 {
font-family:"Mission Script";
font-size:4em;
text-align:center;
margin:0;
color:rgb(44,44,44);
}
.header6 {
font-family:"Mission Script";
font-size:6em;
text-align:center;
margin:0;
color:rgb(44,44,44);
}
.header9 {
font-family:"Mission Script";
font-size:9em;
text-align:center;
margin:0;
padding:0;
color:rgb(44,44,44);
}
So there it all is, the text in the middle div also does not display correctly, it does not become the right size or use Mission Script as its font.
EDIT: Here is a screenshot of what my browser does when it renders it.
I have figured it out! Yes the problem was simple. The page that has the problem in question is an about page, (about.html.)
During it's creation I copied and pasted much of it's code from the home page, (home.html.) What I forgot to do was link it to the new CSS sheet I created for it (about.css) as you can see in my original code above it is still linked to home.css.
I knew it was going to be obvious! THE RELIEF IS UNCANNY!
Here is the problem in code...
<link rel="stylesheet" type="text/css" href="CSS\home.css">
Change to
<link rel="stylesheet" type="text/css" href="CSS\about.css">
Thanks everyone, sorry for wasting your expertise on such an obvious error. Bloody hell.
Works fine for me on chrome for windows as well. However it fails the w3c validation for the doctype specified in your html either way, id start here http://validator.w3.org/ and make sure your markup matches the doctype you're going for.
For a start, you'll need to change this:
<a href="home.html">
<div id="top">
<h1 class="header9">Sarspadidious</h1>
</div>
</a>
to this:
<div id="top">
<h1 class="header9">Sarspadidious</h1>
</div>
Example (with "OR" as text):
The idea is that on collapse of columns—i.e.: view on mobile sized-screen—it will appear betwixt submit and Click me.
How do I add some text onto the divider between rows?
Why don't you use a .span between your two forms ?
<div class="container">
<div class="row">
<div class="span5">
form 1
</div>
<div class="span2">OR</div>
<div class="span5">
form 2
</div>
</div>
</div>
Demo (jsfiddle)
<style>
.wrapper{
width:900px;
margin:0 auto;}
.left{
min-height:300px;
width:400px;
background-color:#9F0;
float:left;}
.right{
min-height:300px;
width:400px;
background-color:#9F0;
float:right;}
.mid{
padding-top:150px;
padding-left:40px;
min-height:150px;
width:60px;
float:left;
background-color:#C00;}
</style>
<body>
<div class="wrapper">
<div class="left">SUBMIT CONTENT HERE</div>
<div class="mid">OR</div>
<div class="right">CLICK ME CONTENT HERE</div>
</div>
I think this can help you. now you can style it if you want to add vertical bar on mid you can add that bar as a background image
then you can style it or add any DIV tags to it Its your wish.. ;)
I want to make two columns page with box one (box1) and box two(box2). Then just after h2, I want to make two columns inside box2 with box2.1 and box2.2.
Here is my HTML code
<body>
<div id="box1">
<h1>Here is the box one.</h2>
</div>
<div id="box2">
<h2>Here is the box two.</h2>
<div id="box21">
<p>Here is the box2.1</p>
</div>
<div id="box22">
<p>Here is box 2.2</p>
</div>
</div>
</body>
And here is my CSS part.
#contentLeft{
float:left;
width:300px;
After that, I have no idea what to do. Tried number of ways, it didn't work. Could you please help here?
It may help you:
HTML:
<div id="box1">
<h1>Here is the box one.</h2>
</div>
<div id="box2">
<h2>Here is the box two.</h2>
<div id="box21">
<p>Here is the box2.1</p>
</div>
<div id="box22">
<p>Here is box 2.2</p>
</div>
</div>
CSS:
#box1{
float:left;
widht:50%;
background:#FF0000;
}
#box2{
float:left;
width:50%;
background:#00FF00;
}
#box21{
float:left;
width:50%;
background:#0000FF;
}
#box22{
float:left;
width:50%;
background:#e4e4e4;
}
Just for your reminder, don't use dot(.) in id or class name. You can also simplified the CSS by using the same class name in all div.
.box{
float:left;
width:50%;
}
OR the following code:
#box1, #box2, #box21, #box22{
float:left;
width:50%;
}
See the example : http://jsfiddle.net/N4hMw/2/