This is what i want to make: http://www.prikachi.com/images/743/5697743V.png
But when i try to make it i get this: http://www.prikachi.com/images/742/5697742I.png
How can i make it possible? I don't use tables.
There are good examples how to make webpage with metro theme but i don't want to use jQuery or JavaScript.
Sorry if there is similar question but i can't find it. Thanks :)
style.css
#font-face{
font-family: OpenSans;
src: url("opensans-light.ttf");
}
body{
background-color: #260930;
font-family: OpenSans;
}
header{
color: white;
font-size: 48px;
}
footer{
text-align: center;
color: white;
font-size: 12px;
}
.content{
height: 80%;
overflow: hidden;
}
.content .items{
padding: 0 20px;
position: relative;
overflow: hidden;
}
.icons{
position: relative;
top: 50%;
left: 50%;
}
.box{
float: left;
position: relative;
margin: 8px;
padding: 8px;
background: #555;
text-decoration: none;
cursor: pointer;
overflow: hidden;
color: #fff;
background: #00a8ec;
z-index: 9;
width: 240px;
height: 128px;
}
.box:hover{
opacity: 0.85;
}
.box span{
color: white;
position: absolute;
left: 5px;
bottom: 5px;
font-size: 15px;
font-weight: normal;
z-index: 8;
}
.box img{
position: absolute;
left: 50%;
top: 50%;
margin-left: -32px;
margin-top: -32px;
z-index: 7;
}
.box img.cover{
position: absolute;
margin: 0 auto;
top: 0px;
left: 0px;
width: 100%;
z-index: 6;
}
.photos{
width: 512px;
height: 288px;
}
.width1{width: 120px;}
.height1{height: 120px;}
index.html:
<!DOCTYPE HTML>
<html>
<head>
<title>Metro theme site</title>
<link rel="stylesheet" href="style.css"/>
<meta charset="windows-1251"/>
</head>
<body>
<div class="content">
<div class="items">
<a href="#" class="box" style="background: #f58d00;">
<span>Firefox</span>
<img src="images/firefox.png" alt="" />
</a>
<a href="#" class="box" style="background: #d68a3a; top: auto;">
<span>About me</span>
<img src="images/aboutme.png" alt="" />
</a>
<a class="box photos" style="box-align: start;" href="#">
<span>Photos</span>
<img class="cover" src="http://www.hdwallpapersarena.com/wp-content/uploads/2012/04/HD-wallpaper-2.jpeg" alt="" />
</a>
<a href="http://www.facebook.com/megapro189" target="_blank" class="box width1 height1" style="background: #3b5a9b;">
<span>Facebook</span>
<img src="images/facebook.png" alt="" />
</a>
<a href="#" class="box width1 height1" style="background: #f21d1d;">
<span>Projects</span>
<img src="images/projects.png" alt="" />
</a>
<a href="#" class="box width1 height1" style="background: #00aaf1;">
<span>Skype</span>
<img src="images/skype.png" alt="" />
</a>
<a href="#" class="box width1 height1" style="background: #00aaf1;">
<span>Skype</span>
<img src="images/skype.png" alt="" />
</a>
<a href="#" class="box width1 height1" style="background: #00aaf1;">
<span>Skype</span>
<img src="images/skype.png" alt="" />
</a>
</div>
</div>
</body>
</html>
You should also tell us the browser used...
If you use chrome or firefox with firebug, open the debugger (ctrl+shift+j with chrome) and try to edit style in live, to localise your problem.
DEMO
HTML
<div id="top-left">
<div id="ff">Firefox</div>
<div id="am">About me</div>
</div>
<div id="top-right">
<div id="bp">Box Photos</div>
</div>
<div id="bottom">
<div id="fb">Facebook</div>
<div id="pj">Projects</div>
<div class="sk">Skype</div>
<div class="sk">Skype</div>
<div class="sk">Skype</div>
</div>
CSS
#top-left, #top-right {
float:left;
}
#bottom {
clear:both;
}
#ff, #am, #bp {
margin:16px 8px;
padding:8px;
height:128px;
width:240px;
}
#ff {
background-color:orange;
}
#am {
background-color:tan;
}
#bp {
height:288px;
width:512px;
background-color:blue;
}
#fb, #pj, .sk {
margin:0px 8px;
padding:8px;
height:120px;
width:120px;
float:left;
}
#fb {
background-color:navy;
}
#pj {
background-color:maroon;
}
.sk {
background-color:lightblue;
}
Related
I'm trying to center three div boxes within one large one. A grid is going to be 3 wide and auto height.
.t-box920g {
width: 960px;
height: auto;
background: #121212;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 20px;
position: relative;
overflow: auto;
border: 1px dotted #363636;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
}
.i-box {
width: 279px;
height: 209px;
background: #ffffff;
margin-right: auto;
margin-left: auto;
float: left;
display: inline;
text-align: justify;
}
.i-pbox {
width: 276px;
height: 206px;
background: #121212;
border: solid 2px #ffffff;
margin-left: auto;
margin-right: auto;
text-align: justify;
}
#i-imageconstrain {
width: auto;
height: auto;
max-width: 276px;
max-height: 206px;
min-width: 276px;
min-height: 206px;
overflow-x: hidden;
overflow-y: hidden;
}
<div class="t-box920g">
<div class="i-box">
<div class="i-pbox">
<a data-fancybox="gallery" href="images/gallery/sample1.jpg">
<img id="i-imageconstrain" src="images/gallery/sample1.jpg" border="0" />
</a>
</div>
</div>
<div class="i-box">
<div class="i-pbox">
<a data-fancybox="gallery" href="images/gallery/sample2.jpg">
<img id="i-imageconstrain" src="images/gallery/sample2.jpg" border="0" />
</a>
</div>
</div>
<div class="i-box">
<div class="i-pbox">
<a data-fancybox="gallery" href="images/gallery/sample3.jpg">
<img id="i-imageconstrain" src="images/gallery/sample3.jpg" border="0" />
</a>
</div>
</div>
</div>
Everything works as planned EXCEPT for the content of t-box920g being left justified. I've tried a lot of combos and none have worked so far. Got a suggestion? I'll let you know if I tried already.
Tried text-align, align-content, align-items, margin: auto in combinations for all css.
I expect it to be center justified with nice even spacing. Actually is all left.
Use flexbox.
You can read more about how to use it here and here if you like to learn through games.
This question was asked and answered on Stack Owerflow already more than once, for instance here.
.t-box920g {
display: flex;
justify-content: space-between;
align-items: center;
}
.t-box920g .i-box {
background-color: blue;
width: 32%;
}
<div class="t-box920g">
<div class="i-box">
<div class="i-pbox">
<a data-fancybox="gallery" href="images/gallery/sample1.jpg">
<img id="i-imageconstrain" src="images/gallery/sample1.jpg" border="0" />
</a>
</div>
</div>
<div class="i-box">
<div class="i-pbox">
<a data-fancybox="gallery" href="images/gallery/sample2.jpg">
<img id="i-imageconstrain" src="images/gallery/sample2.jpg" border="0" />
</a>
</div>
</div>
<div class="i-box">
<div class="i-pbox">
<a data-fancybox="gallery" href="images/gallery/sample3.jpg">
<img id="i-imageconstrain" src="images/gallery/sample3.jpg" border="0" />
</a>
</div>
</div>
</div>
I am trying to get 4 images to line up with text centered under them. I have been able to get them close but they are still aligning slightly off. I am still trying to get the hang of HTML 5, and have tried to find some others that have had the same issue but have not had much luck. Any advice would be great since I have hit a brick wall. I will attach a screen shot of my page.
#navigation {
height: 40px;
font-size: 20px;
font-family: Verdana;
font-weight: bold;
text-align: center;
background-color: #000000;
}
main {
margin: 0 210px 0 160px;
padding: 1px 10px 20px 10px;
background-color: #FFFFFF;
display: block;
color: #000000
}
body {
background-color: #FFFFFF;
margin: 0;
}
header {
background-color: #000000;
color: #FFFFFF;
text-align: right;
box-sizing: border-box;
display: block;
height: 120px;
padding: 0 20px;
border-bottom: 2px solid;
}
aside {
display: block;
box-sizing: border-box;
float: right;
width: 150px;
}
footer {
display: block;
box-sizing: boreder-box;
font-size: .70em;
color: #FFFFFF;
background-color: #000000 padding-top: 10px;
clear: both;
}
#container {
background-color: #969696;
color: #000000;
min-width: 960px;
font-family: Verdana, Arial, sans-serif;
}
#navigation ul {
height: auto;
padding: 5px 20px;
margin: 1px;
}
#navigation li {
display: inline;
padding: 50px;
}
#navigation a {
text-decoration: none;
color: #FFFFFF;
}
body {
background-color: #969696;
}
side {
display: block;
box-sizing: border-box;
float: right;
width: 150px;
}
#rose {
overflow: hidden;
}
.imageContainer {
float: left;
margin-right: 250px;
margin-left: 20px;
}
p {
text-align: center;
}
.imageContainer2 {
float: center;
margin-right: 250px;
margin-left: 20px;
}
p {
text-align: center;
}
<!DOCTYPE html >
<html lang="en">
<head>
<title>St. Pete Flower Market</title>
<meta charset="utf-8">
<link rel="stylesheet" href="test.css">
</head>
<body>
<div id="container">
<header role="banner">
<span>Search</span>
<h1>St. Pete Flower Market</h1>
</header>
<nav>
<div id="navigation">
<ul>
<li><a class="navigation" href="index.html">Home</a></li>
<li><a class="navigation" href="contact.html">Contact Us</a></li>
<li><a class="navigation" href="occasions.html">Occasions</a></li>
<li><a class="navigation" href="flowers.html">Flowers</a></li>
<li><a class="navigation" href="giftbaskets.html">Gift Baskets</a></li>
<li><a class="navigation" href="deals.html">Deals</a></li>
<li><a class="navigation" href="aboutus.html">About Us</a></li>
</ul>
</div>
</nav>
<section id="side">
</section>
<aside role="complementary">
</aside>
<main>
<div id="rose">
<h1><img src="roses.jpg" width="100%" height="300px">
</div>
</h1>
<div class="image123">
<div class="imageContainer">
<img src="sunnydays.jpg" height="300" width="300" />
<p>This is image 1</p>
</div>
<div class="imageContainer">
<img class="middle-img" src="flowerdeal.jpg" / height="300" width="300" />
<p>This is image 2</p>
</div>
</div>
< <div class="image1234">
<div class="imageContainer2">
<img src="sunnydays.jpg" height="300" width="300" />
<p>This is image 1</p>
</div>
<div class="imageContainer2">
<img class="middle-img" src="flowerdeal.jpg" / height="300" width="300" />
<p>This is image 2</p>
</div>
</main>
<footer> fjiefjwiofjewfjiewofjewo</footer>
</div>
</body>
</html>
There are some errors in your code:
the h1 tag inside the div #rose is actually closing outside it. consider getting rid of the h1 tag in the first place, unless you need a title with the top image.
A similar error is div class="image1234" closing outside the main tag.
My solutions (which seems to work fine) is to get rid of the css for both the image containers, add an outer div and set its css to display:flex; and justify-content: space-around;
that worked for me
<div id="newDiv">
<div class="image123">
<div class="imageContainer">
<img src="sunnydays.jpg" height="300" width="300" />
<p>This is image 1</p>
</div>
<div class="imageContainer">
<img class="middle-img" src="flowerdeal.jpg" / height="300" width="300" />
<p>This is image 2</p>
</div>
</div>
<div class="image1234">
<div class="imageContainer2">
<img src="sunnydays.jpg" height="300" width="300" />
<p>This is image 1</p>
</div>
<div class="imageContainer2">
<img class="middle-img" src="flowerdeal.jpg" / height="300" width="300" />
<p>This is image 2</p>
</div>
</div>
</div>
the css:
#newDiv {
display:flex;
content: space-around;
}
have a look here for more info:
https://www.w3schools.com/css/css3_flexbox.asp
[This is what I want to do: ](
https://developers.google.com/maps/documentation/javascript/?csw=1#Custom_Controls)
What is the floating window called? (which says base maps, with drop down list.)
It's not over lay, nor infowindow, what is it?
It's a div, which they've styled to float over the map pane. If you inspect the element you can see:
<div class="open visible" id="panel">
<div class="mtam-title">
<div id="panel-title">Base Maps</div>
</div>
<div id="panel-body">
<div class="banner basemaps-banner">
<div class="g-plusbtn">
<div id="___plusone_1" style="text-indent: 0px; margin: 0px; padding: 0px; background: transparent none repeat scroll 0% 0%; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; display: inline-block; width: 24px; height: 15px;">
<iframe title="+1" data-gapiattached="true" src="https://apis.google.com/u/0/se/0/_/+1/fastbutton?usegapi=1&annotation=none&size=small&origin=https%3A%2F%2Fembed-dot-more-than-a-map.appspot.com&url=https%3A%2F%2Fembed-dot-more-than-a-map.appspot.com%2Fdemos%2Fbasemaps&gsrc=3p&ic=1&jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.en_GB.tbkZX74SaQs.O%2Fm%3D__features__%2Fam%3DAQ%2Frt%3Dj%2Fd%3D1%2Ft%3Dzcms%2Frs%3DAGLTcCOYzemCn6PkYhgzRa3g2KtXX0dBpg#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh&id=I0_1433919884595&parent=https%3A%2F%2Fembed-dot-more-than-a-map.appspot.com&pfname=&rpctoken=31017501" name="I0_1433919884595" id="I0_1433919884595" vspace="0" tabindex="0" style="position: static; top: 0px; width: 24px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 15px;" scrolling="no" marginwidth="0" marginheight="0" hspace="0" width="100%" frameborder="0"></iframe>
</div>
</div>
</div>
<div class="section section-text">
<p>
For the last decade, we've obsessed over building great maps—maps that are comprehensive, accurate, and easy to use.
</p>
</div>
<div class="section">
<div class="tabs"><a class="active" href="#">Base Maps</a>Styled Maps</div>
</div>
<div class="">
<div>
<h2>Go Further</h2>
<ul style="display: block;">
<li><a class="active" href="/demos/basemaps/new-york">New York</a></li>
<li>Hong Kong</li>
<li>Search</li>
</ul>
<ul style="display: none;">
<li>Sydney</li>
<li>Tokyo</li>
<li>San Francisco</li>
</ul>
</div>
</div>
</div>
</div>
and also:
#panel.visible {
right: 20px;
}
#panel.open {
top: 20px;
}
.section-demos #panel {
display: block;
}
#panel {
position: absolute;
z-index: 1000;
top: 0px;
right: -500px;
width: 270px;
background: #FFF none repeat scroll 0% 0%;
border-radius: 5px;
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.61);
display: none;
}
I have the following HTML/css simple code on this site www.habitacionalkids.com.ar on chrome there is no problem but when I open it on FF or IE I have one divs missing. I'm using very similar code on other sites and works fine BUT I don't know why is not working here.
CSS
html, body, #wrapper, images {
height:100%;
width: 100%;
margin: 0px;
padding: 0px;
border: 0px;
background-color:#143d36;
}
img {
margin: 0px;
padding: 0px;
border: 0px;
display: block;
/*display: inline-block;*/
}
.center {
width: 800px;
height: 600px;
position: absolute;
left: 50%;
margin-left: -400px;
}
.center_mini{
margin: 0px;
padding: 0px;
border: 0px;
}
.center_mini_float{
float:left;
margin: 0px;
padding: 0px;
border: 0px;
}
HTML
<div class="center">
<div class="center_mini">
<img src="images/img_01.png" width="800" height="470" alt="bg">
</div>
<div class="center_mini">
<div class="center_mini_float">
<img src="images/img_02.png" width="364" height="130" alt="bg">
</div>
<div class="center_mini_float">
<div class="center_mini">
<div class="center_mini_float">
<img src="images/img_03.png" width="35" height="33" alt="bg">
</div>
<div class="center_mini_float">
<img src="images/img_04.png" width="34" height="33" alt="bg">
</div>
</div>
<div class="center_mini">
<img src="images/img_06.png" width="69" height="97" alt="bg">
</div>
</div>
<div class="center_mini_float">
<img src="images/img_05.png" width="367" height="130" alt="bg">
</div>
</div>
</div>
It appears that the missing div is just floating to the right of its sibling rather than below it. Try adding this:
.center_mini {
clear: both;
}
Used to Overflow:hidden; as like this
.center_mini{overflow:hidden;}
and Second option is this
.center_mini:after {
clear: both;
content: "";
display: table;
overflow: hidden;
}
This will do the trick for you. Add this line of code to your css.
.center_mini img{
float:left;
}
demo: http://jsfiddle.net/57M68/. I have tried a lot of things like float, margin, padding but I can't get the textbox to align vertically in the center of the black strip. Please help. The code:
html:
<body class="claro" data-maq-flow-layout="true" data-maq-comptype="desktop" data-maq-ws="collapse" style="margin-top:0" data-maq-appstates="{}" id="myapp">
<div id="top_bar">
<div style="width: 900px; height:50px; margin-left: auto; margin-right: auto;">
<a href="/" class="logo logo_a">
<div class="logo">
</div>
</a>
<div style="display:inline-block"> <input type="text" ></input></div>
</div>
</div>
<div id="top_bar_divider"></div>
<div data-dojo-type="dijit.layout.BorderContainer" persist="false" gutters="true" style="min-width: 1em; min-height: 1px; z-index: 0; width: 600px; height: 687px; margin-left: auto; margin-right: auto;" design="headline">
<div data-dojo-type="dijit.layout.ContentPane" extractContent="false" preventCache="false" preload="false" refreshOnShow="false" region="center" splitter="false" maxSize="Infinity">
</div>
</div>
</body>
js:
require([
"dijit/dijit",
"dojo/parser",
"maqetta/space",
"maqetta/AppStates",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/form/TextBox"
]);
css:
html,body {
height: 100%;
width: 100%;
}
.logo_a{
background:url("icon1.png");
}
.logo{
width:60px;
height:50px;
display:inline-block;
}
.logo_a:active{
background-position:0 1px;
}
#top_bar{
padding:0px;
background: -webkit-linear-gradient(#464646, #121212);
background: -moz-linear-gradient(#464646, #121212);
background: -ms-linear-gradient(#464646, #121212);
background: -o-linear-gradient(#464646, #121212);
background: linear-gradient(#464646, #121212);
color: #ccc;
text-shadow:none;
height:50px;
width:100%;
}
#top_bar_divider{
background-color:#1ba0e1;
height:4px;
width:100%;
}
You just need to add vertical-align: middle to your input div and to .logo_a:
.logo_a {
background:url("icon1.png");
vertical-align: middle;
}
http://jsfiddle.net/57M68/1/
The HTML goes like this
<body class="claro" data-maq-flow-layout="true" data-maq-comptype="desktop" data-maq- ws="collapse" style="margin-top:0" data-maq-appstates="{}" id="myapp">
<div id="top_bar">
<div style="width: 900px; height:50px; margin-left: auto; margin-right: auto;">
<a href="/" class="logo logo_a">
<div class="logo">
</div>
</a>
<div id="text"> <input type="text"></div>
</div>
</div>
<div id="top_bar_divider"></div>
<div data-dojo-type="dijit.layout.BorderContainer" persist="false" gutters="true" style="min-width: 1em; min-height: 1px; z-index: 0; width: 600px; height: 687px; margin- left: auto; margin-right: auto;" design="headline">
<div data-dojo-type="dijit.layout.ContentPane" extractContent="false" preventCache="false" preload="false" refreshOnShow="false" region="center" splitter="false" maxSize="Infinity">
</div>
</div>
</body>
And the css is added to the existing demo--
#text{display:inline;}
#text input{position:relative;
top:-43px;
left:110px;}