I would like to know what's the best way to position buttons?
I'm trying to make this website teacher has asked me to do however I don't know how to position buttons correctly.
This is what I have:
[/img]
This is what I need to have:
src:
.css file
http://pastebin.com/3mZXzkzS
/*---------------*/ #logo {
width:167px;
height:96px;
margin-right: 200px;
float:left;
margin: 24px;
}
#info{
display: block;
float: left;
height: 175px;
width: 300px;
margin-right: 0px;
background-image: url('../images/info_box_1.png');
text-align: center;
line-height: 50px;
text-decoration: none;
}
#mang1, #uusp, #jatka {
display: block;
float: left;
height: 45px;
width: 200px;
margin-right: 0px;
background-image: url('../images/Button_black_small.png');
text-align: center;
line-height: 50px;
text-decoration: none;
margin-top:5px;
}
.kool1, .kool3 {
display: block;
float: left;
height: 50px;
width: 100px;
margin-right: 0px;
background-image: url('../images/button_test.png');
text-align: center;
line-height: 50px;
text-decoration: none;
}
#aru, #aru, #too, #teams, #sqn, #kalend, #plan{
display: block;
float: left;
height: 30px;
width: 150px;
margin-right: 0px;
background-image: url('../images/Button_3_small.png');
text-align: center;
line-height: 50px;
text-decoration: none;
margin-top:5px;
}
.kool2, .log {
display: block;
float: left;
height: 50px;
width: 100px;
margin-right: 0px;
background-image: url('../images/button_test2.png');
text-align: center;
line-height: 50px;
text-decoration: none;
}
.lEnglish, .lEstonian, .lRussian , #clear{
margin-top:25px;
text-decoration: none;
}
#tile_mid, #tile_top , #tile_mid_pt2{
margin-left: 200px;
}
.but1, .but2, .but3{
display: block;
float: left;
height: 30px;
width: 162px;
background-image: url('../images/button_test3.png');
text-align: center;
margin-right:2px;
margin-top:4px;
}
.but4, .but5 {
display: block;
float: left;
height: 30px;
width: 162px;
background-image: url('../images/button_test3.png');
text-align: center;
margin-right:2px;
margin-top:4px;
}
.kool3 {
margin-right: 0;
}
.clear {
clear: both;
}
.html file
http://pastebin.com/VQZx44PG
<base href="http://dynama.eek.ee">
<div text="#000000" style="background:#ffffff url('http://dynama.eek.ee/images/background.png') repeat scroll top center; height:1000px;">
<div id="logo"><img src="./images/logo.png"/></div>
<div class="clear"></div>
<div id="info">Information:</div>
<div class="clear"></div>
<div id="mang1">Mäng 1 AKTIIVNE</div>
<div class="clear"></div>
<div id="uusp">Uus periood</div>
<div class="clear"></div>
<div id="jatka">Jätka</div>
<div class="clear"></div>
<div id="aru">ARUANDED</div>
<div class="clear"></div>
<div id="too">TOOTED</div>
<div class="clear"></div>
<div id="teams">TIIMID</div>
<div class="clear"></div>
<div id="sqn">SQNUMID</div>
<div class="clear"></div>
<div id="kalend">KALENDAR</div>
<div class="clear"></div>
<div id="plan">QPPEPLAN M+U</div>
<div class="clear"></div>
<div id="tile_top">
<div class="kool1">
Kool 1 </div>
Kool 2
Kool 3
Log out
<img class="lEnglish" height="25px" width="45px" src="./images/Flag_eng.png"/>
<img class="lRussian" height="25px" width="45px" src="./images/Flag_rus.png"/>
<img class="lEstonian" height="25px" width="45px" src="./images/Flag_est.png"/>
</div>
<div id="tile_mid">
Button 1
Button 2
Button 3
</div>
<img id="clear" height="25px" width="45px" src="./images/clear.png"/>
<div id="tile_mid_pt2">
Button 4
Button 5
</div>
<div class="clear"></div>
</div>
Try using this code...
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dynama </title>
<link href="./css/style.css" rel="stylesheet" type="text/css">
</head>
<body text="#000000" style="background:#ffffff url('images/background.png') repeat scroll top center; height:1000px;">
<div id="logo"><img src="./images/logo.png"/></div>
<div class="clear"></div>
<div>
<div id="info">Information:</div>
<div id="tile_top">
<div class="kool1">
Kool 1 </div>
Kool 2
Kool 3
Log out
<img class="lEnglish" height="25px" width="45px" src="./images/Flag_eng.png"/>
<img class="lRussian" height="25px" width="45px" src="./images/Flag_rus.png"/>
<img class="lEstonian" height="25px" width="45px" src="./images/Flag_est.png"/>
</div>
<div id="tile_mid">
Button 1
Button 2
Button 3
</div>
<div class="clear"></div>
</div>
<div id="mang1">Mäng 1 AKTIIVNE</div>
<div class="clear"></div>
<div id="uusp">Uus periood</div>
<div class="clear"></div>
<div id="jatka">Jätka</div>
<div class="clear"></div>
<div id="aru">ARUANDED</div>
<div class="clear"></div>
<div id="too">TOOTED</div>
<div class="clear"></div>
<div id="teams">TIIMID</div>
<div class="clear"></div>
<div id="sqn">SQNUMID</div>
<div class="clear"></div>
<div id="kalend">KALENDAR</div>
<div class="clear"></div>
<div id="plan">QPPEPLAN M+U</div>
<div class="clear"></div>
<img id="clear" height="25px" width="45px" src="./images/clear.png"/>
<div id="tile_mid_pt2">
Button 4
Button 5
</div>
<div class="clear"></div>
</body>
</html>
Related
I have 2 columns of numbers that I want them to appear side by side. It works when I try using float: left but I want them to appear in the center. Without the float they appear one row then next row downwards.
body {
color: #fff;
text-align: center;
}
#roll, #roll2, #roll3, #roll4 {
width: 40px;
height: 360px;
background: #0077ee;
margin: 0 auto;
}
.roll-h {
width: 40px;
height: 120px;
margin: 0 auto;
overflow: hidden;
}
.shadow {
height: 40px;
margin: 0 auto;
transform: translateY(40px);
}
.black,
.his-h {
width: 40px;
height: 40px;
font-size: 20px;
line-height: 40px;
font-weight: 700;
text-align: center;
float: left;
}
.black {
background: black;
}
.floatleft {
float: left;
}
<div class="floatleft">
<div class="shadow"></div>
<div class="roll-h">
<div id="roll3">
<div class="black">9</div>
<div class="black">0</div>
<div class="black">1</div>
<div class="black">2</div>
<div class="black">3</div>
<div class="black">4</div>
<div class="black">5</div>
<div class="black">6</div>
<div class="black">7</div>
<div class="black">8</div>
<div class="black">9</div>
<div class="black">0</div>
</div>
</div>
</div>
<div class="floatleft">
<div class="shadow"></div>
<div class="roll-h">
<div id="roll4">
<div class="black">9</div>
<div class="black">0</div>
<div class="black">1</div>
<div class="black">2</div>
<div class="black">3</div>
<div class="black">4</div>
<div class="black">5</div>
<div class="black">6</div>
<div class="black">7</div>
<div class="black">8</div>
<div class="black">9</div>
<div class="black">0</div>
</div>
</div>
</div>
you have to add a parent (container) div around all your html with following styles:
<div style="margin:0 auto; display:inline-block">
see it here:
body {
color: #fff;
text-align: center;
}
#roll, #roll2, #roll3, #roll4 {
width: 40px;
height: 360px;
background: #0077ee;
margin: 0 auto;
}
.roll-h {
width: 40px;
height: 120px;
margin: 0 auto;
overflow: hidden;
}
.shadow {
height: 40px;
margin: 0 auto;
transform: translateY(40px);
}
.black,
.his-h {
width: 40px;
height: 40px;
font-size: 20px;
line-height: 40px;
font-weight: 700;
text-align: center;
float: left;
}
.black {
background: black;
}
.floatleft {
float: left;
}
.container {
display:inline-block;
margin:0 auto;
}
<div class="container">
<div class="floatleft">
<div class="shadow"></div>
<div class="roll-h">
<div id="roll3">
<div class="black">9</div>
<div class="black">0</div>
<div class="black">1</div>
<div class="black">2</div>
<div class="black">3</div>
<div class="black">4</div>
<div class="black">5</div>
<div class="black">6</div>
<div class="black">7</div>
<div class="black">8</div>
<div class="black">9</div>
<div class="black">0</div>
</div>
</div>
</div>
<div class="floatleft">
<div class="shadow"></div>
<div class="roll-h">
<div id="roll4">
<div class="black">9</div>
<div class="black">0</div>
<div class="black">1</div>
<div class="black">2</div>
<div class="black">3</div>
<div class="black">4</div>
<div class="black">5</div>
<div class="black">6</div>
<div class="black">7</div>
<div class="black">8</div>
<div class="black">9</div>
<div class="black">0</div>
</div>
</div>
</div>
</div>
you can center and keep items side by side using inline-block like this
.floatleft {
display: inline-block;
}
I have used flexbox already to try this, but for some reason it isn't working. On a smaller screen size, everything's centered. I tried doing justify-content: center for flexbox, but that isn't working. I will put down the code snippet as well as screen shots showing what I'm seeing. You may look at snippet, but it uses a combination of percents and pixels, so it may look weird. Can I handle simple centering without media queries? Even if I did use one, I still can't get it to center on my desktop.
html {
height: 100%;
}
body{
height: 100%;
margin: 0;
font-family: courier;
font-size: 19px;
}
#container {
min-height: 100%;
margin-bottom: -150px;
width: 100%;
}
#container:after {
content: "";
display: block;
}
#content{
display:flex;
float:left;
width: 800px;
flex-wrap: wrap;
justify-content: center;
}
#footer, #container:after{
height: 150px;
}
#footer{
background-color: #006699;
clear: both;
}
.wrap {
margin: 0 auto;
width: 100%;
display: flex;
align-items: center;
flex-wrap: nowrap;
}
.sub {
padding: 12px;
width: 32%;
height: 120px;
color: white;
border-right: solid white 1px;
}
.sub:last-child{
border: 0px;
}
#leftbar{
width: 10%;
height: calc(100vh - 150px);
background-color: black;
float:left;
}
#rightbar{
width: 10%;
height: calc(100vh - 150px);
background-color: black;
float: right;
}
#nav {
list-style: none;
font-weight: bold;
width: 100%;
text-align: center;
background: rgba(0, 102, 153, 0.4);
height: 100px;
}
#nav ul {
list-style-type: none;
margin: 0px;
padding: 0;
overflow: auto;
// background-color: #006699;
text-align: center;
}
#nav li {
margin: 0px;
display: inline-block;
}
#nav li a {
padding: 10px;
display: inline-block;
text-decoration: none;
font-weight: bold;
font-size: 30px;
color: white;
// background-color: #006699;
}
#nav li a:hover {
color: white;
text-shadow: 2px 2px 4px white;
}
.clear {
clear: both;
}
div.img {
margin: 5px;
border: 1px solid #595959;
float: left;
width: 180px;
}
div.img:hover{
border: 1px solid #b3b3ff;
}
div.img img {
width: 100%;
height: auto;
}
div.desc{
padding: 15px;
text-align: center;
}
div.head{
text-align:center;
background-color:black;
color: orange;
}
<!DOCTYPE HTML>
<html>
<head lang="en">
<link rel="stylesheet" type="text/css" href="new.css" />
<meta charset="UTF-8">
<title></title>
<style>
</style>
<script>
</script>
</head>
<body>
<div id="container">
<div id="nav">
<ul>
<li>Home</li>
<li>Works</li>
<li>About</li>
</ul>
</div>
<div class="clear"></div>
<div class="upperbox">
<div id="leftbar"> </div>
<div id="rightbar"></div>
<div id="content">
<div class="img">
<div class="head">Color Palettes</div>
<img src="purple.png" alt="the color purple">
<div class="desc">Color</div>
</div>
<div class="img">
<div class="head">Color Palettes</div>
<img src="blue.png" alt="the color blue">
<div class="desc">Color</div>
</div>
<div class="img">
<div class="head">Color Palettes</div>
<img src="yellow.png" alt="the color yellow">
<div class="desc">Color</div>
</div>
<div class="img">
<div class="head">Color Palettes</div>
<img src="brown.jpg" alt="the color yellow">
<div class="desc">Color</div>
</div>
<div class="img">
<div class="head">Color Palettes</div>
<img src="grey.jpg" alt="the color yellow">
<div class="desc">Color</div>
</div>
<div class="img">
<div class="head">Color Palettes</div>
<img src="green.png" alt="the color yellow">
<div class="desc">Color</div>
</div>
<div class="img">
<div class="head">Color Palettes</div>
<img src="red.png" alt="the color yellow">
<div class="desc">Color</div>
</div>
<div class="img">
<div class="head">Color Palettes</div>
<img src="gold.jpg" alt="the color yellow">
<div class="desc">Color</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="wrap">
<div class="sub">Lorem Ipsum</div>
<div class="sub">Lorem Ipsum </div>
<div class="sub">Lorem Ipsum </div>
</div>
</div>
</body>
</html>
erase float:left; from #content and add margin: 0 auto to it.
You can either give your #content the CSS of margin: 0 auto;, like so:
#content {
margin: 0 auto;
}
(Maybe you will also have to not float it to the left)
Or you could take a look at other modern possibilities for centering an element:
https://css-tricks.com/centering-percentage-widthheight-elements/
https://css-tricks.com/centering-in-the-unknown/
https://codemyviews.com/blog/how-to-center-anything-with-css
I can't seem to get my Div container with my images to center. I tried margin 0 auto; and adding a width.
body{
margin: 0px;
}
.main{
height: 950px;
background: url(../Images/Mountain.jpg) center center/cover no-repeat;
}
#media screen and (min-width: 1000px;){
#container{
height: 1000px;
width: 1000px;
margin: 0 auto;
}
}
.header{
margin-top: 0px;
width: 100%;
}
.logo{
float: left;
margin-top: 10px;
margin-left: 50px;
}
nav{
float: right;
margin-top: 26px;
margin-right: 50px;
}
.navBar{
color: #fff;
font-size: 20px;
margin-left: 25px;
text-decoration: none;
}
.navBar:hover{
text-decoration: underline;
}
span{
width: 100%;
}
h1{
font-size: 80px;
color: #fff;
text-align: center;
clear: both;
padding-top: 200px;
}
h2{
font-size: 36px;
color: #fff;
text-align: center;
clear: both;
margin-top: 50px;
}
/*Header Section*/
#head{
width: 100%;
height: 400px;
background: url(https://static.pexels.com/photos/6934/beach-vacation-water-summer.jpg) center center/cover no-repeat;
}
.port{
padding-top: 75px;
}
.portfolio{
width: 300px;
height: 250px;
}
.padding{
margin-left: 50px;
}
.container_port{
width: 1000px;
margin-left: auto;
margin-right: auto;
}
<!DOCTYPE html>
<html>
<head>
<title>-------</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel="shortcut icon" type="text/css" href="http://placehold.it/50x50">
<link rel="stylesheet" href="CSS/Style.css">
</head>
<body>
<div id="head">
<div class="header">
<img class="logo" src=http://placehold.it/100x100>
<nav>
<a class="navBar" href="#">Home</a>
<a class="navBar" href="#">Portfolio</a>
<a class="navBar" href="#">Blog</a>
<a class="navBar" href="#">Testimonials</a>
</nav>
</div>
<span>
<h1 class="port">Portfolio</h1>
</span>
</div>
<div id="container_port">
<div class="one">
<img class="portfolio" src="http://placehold.it/300x300">
<img class="portfolio padding" src="http://placehold.it/300x300">
<img class="portfolio padding" src="http://placehold.it/300x300">
</div>
<div class="two">
<img class="portfolio" src="http://placehold.it/300x300">
<img class="portfolio padding" src="http://placehold.it/300x300">
<img class="portfolio padding" src="http://placehold.it/300x300">
</div>
<div class="three">
<img class="portfolio" src="http://placehold.it/300x300">
<img class="portfolio padding" src="http://placehold.it/300x300">
<img class="portfolio padding" src="http://placehold.it/300x300">
</div>
<div class="four">
<img class="portfolio" src="http://placehold.it/300x300">
<img class="portfolio padding" src="http://placehold.it/300x300">
<img class="portfolio padding" src="http://placehold.it/300x300">
</div>
</div>
</body>
</html>
This should get you close:
#container_port {
text-align: center;
}
EDIT: I also just noticed that you have .container_port in your CSS above while it's clearly an ID and not a CLASS.
the image element is an inline-block element. You could change it to a block-level element or you could use margin: 0 50%;
I have some css issues. I'm trying to remove the space between a image and a label, and it does not work.
This is what I have:
And this is what I want:
I have problems with removing the space below he pictures and the same problem with the labels and the other div below them. In the same time I do not know how to position inline the headers from the footer.
This is my fiddle with my html and css:
https://jsfiddle.net/cwd6qw3o/
div img {
display: inline-block;
height: 30%;
width: 23%;
}
div.subtitle {
background-color: #333333;
color: white;
display: inline-block;
margin-top: 0;
text-align: left;
width: 23%;
}
div.subcolor {
background-color: #ba0927;
display: inline-block;
height: 5px;
width: 23%;
}
div.footer {
display: inline-block;
background-color: #e6e6e6;
width: 100%;
height: 5%;
}
Please tell me what i am doing wrong :).
Thanks !
I think it is not a good structure in your HTML,why not wrap your item in the same li such as
<ul>
<li>
<img src="~/Content/cont1.png"/>
<p>Bosch Car Service</p>
</li>
<li>
<img src="~/Content/cont2.png"/>
<p>Afspraak Proefrit</p>
</li>
<li>
<img src="~/Content/cont3.png"/>
<p>Afspraak onderhoud</p>
</li>
<li>
<img src="~/Content/cont4.png"/>
<p>Routebeschrijiving</p>
</li>
</ul>
You can remove spaces with the following CSS:
div {
font-size: 0;
}
div.subtitle {
font-size: 1rem;
}
Live preview: JSFiddle
Additional styling is necessary.
please try below code
div::after {
content: "";
width: 60%;
}
.image-div {
float: left;
width: 100%;
}
div img {
float: left;
height: 30%;
margin-right: 1%;
width: 23%;
}
div.subtitle {
background-color: #333333;
color: white;
float: left;
margin-right: 1%;
margin-top: 0;
text-align: left;
width: 23%;
}
.sub-div {
float: left;
width: 100%;
}
div.subcolor {
background-color: #ba0927;
float: left;
height: 5px;
margin-right: 1%;
width: 23%;
}
<body>
<img src="~/Content/slide1.png" id="slide" />
<div class="image-div">
<img src="http://dummyimage.com/200x200/000/fff"/>
<img src="http://dummyimage.com/200x200/000/fff" />
<img src="http://dummyimage.com/200x200/000/fff" />
<img src="http://dummyimage.com/200x200/000/fff" />
</div>
<div class="sub-div">
<div class="subtitle">
Bosch Car Service
</div>
<div class="subtitle">
Afspraak Proefrit
</div>
<div class="subtitle">
Afspraak onderhoud
</div>
<div class="subtitle">
Routebeschrijiving
</div>
</div>
<div>
<div class="subcolor" id="sub1"></div>
<div class="subcolor" id="sub2"></div>
<div class="subcolor" id="sub3"></div>
<div class="subcolor" id="sub4"></div>
</div>
<div class="footer">
<div class="images">
<img src="~/Content/fb.jpg"/>
<img src="~/Content/contact.jpg"/>
<img src="~/Content/route.jpg"/>
</div>
<div class="information">
<div class="contact">
<h1>Houman BVBA</h1>
<label>Boterstraat 6</label>
<label>B-2811 Hombeek (Mechelen)</label>
<label>Tel. 015 41 39 39</label>
<label>Fax. 015/43 24 40</label>
</div>
<div class="schedule">
<h1>Openingsuren</h1>
<label>Maandag: 9u-12u|13u-18u</label>
<label>Dinsdag: 9u-12u|13u-18u</label>
<label>Woensdag: 9u-12u|13u-18u</label>
<label>Donderdag: 9u-12u|13u-18u</label>
<label>Vrijdag: 9u-12u|13u-18u</label>
<label>Zaterdag: 9u-12u|13u-18u</label>
</div>
</div>
</div>
</body>
Im trying to put together some images together with an text under the images which will work as an menu, which should be centered horizontal under an header. The website is supposed to work as an responsive website. The HTML and CSS code is currently looking like this:
Edited
I want 5 images, each one of them shall have a text under them. And I want the my images together with the text to be centered.
HTML
<nav>
<div id="content">
<img src="ikoner/icon_90_2.png"/>
<div class="text">Utvecklingen sedan 90-talet</div>
</div>
<div id="content">
<img src="ikoner/icon_html5.png"/>
<div class="text">HTML5</div>
</div>
<div id="content">
<img src="ikoner/icon_html5video.png"/>
<div class="text">HTML5 Video</div>
</div>
<div id="content">
>img src="ikoner/icon_responsive.png"/>
<div class="text">Responsive Webdesign</div>
</div>
<div id="content">
<img src="ikoner/icon_heart.png"/>
<div class="text">Emotional Design</div>
</div>
</nav>
CSS
#content {
position: relative;
width: 15%;
display: inline-block;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#content img {
padding-top: 370px;
width: 100px;
}
.text {
font-size: 12px;
font-family: 'ciclethin';
text-decoration: none;
}
You're not aligning your "Nav" div anywhere.
So, I've changed the id="content" to classes, because IDs should be unique to the page.
Set nav element to text-align:center. Here's a fiddle, and the relevant code:
http://jsfiddle.net/cw16tkdn/2/
<nav>
<div class="content">
<img src="http://placekitten.com/g/200/200" />
<div class="text">Utvecklingen sedan 90-talet
</div>
</div>
<div class="content">
<img src="http://placekitten.com/g/200/200" />
<div class="text">HTML5
</div>
</div>
<div class="content">
<img src="http://placekitten.com/g/200/200" />
<div class="text">HTML5 Video
</div>
</div>
<div class="content">
<img src="http://placekitten.com/g/200/200" />
<div class="text">Responsive Webdesign
</div>
</div>
<div class="content">
<img src="http://placekitten.com/g/200/200" />
<div class="text">Emotional Design
</div>
</div>
</nav>
and CSS:
nav {
text-align:center;
}
.content {
display: inline-block;
text-align: center;
}
.content img {
width: 100px;
}
.text {
font-size: 12px;
font-family:'ciclethin';
text-decoration: none;
}
maybe you want this: (i have changed id=content with class=content in html code!)
.content {
position: relative;
width: 100px;
display: inline-block;
height: 520px;
text-align: center;
vertical-align:bottom;
}
.content img {
padding-top: 370px;
width: 100px;
display:block;
margin: auto;
}
.text a {
font-size: 12px;
font-family: 'ciclethin';
text-decoration: none;
}
.text {
height: 3em;
}