I'm trying to position two images and running into difficulties. I want the 'Welcome!' speech bubble to be just to the left of the logo.
Can someone help me with this?
Here is my code:
html {
background-color: #FFFFFF;
}
img {
width: 100px;
height: 150px;
}
#logo {
margin: auto;
width: 10%;
}
#welcome {
margin: auto;
width: 10%;
}
#popUp {
width: 50px;
height: 50px;
}
<! DOCTYPE html>
<html>
<head>
<title>Placehold</title>
<link rel="stylesheet" href="css/stylesheet.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
</head>
<body>
<div id='logo'>
<img src="http://i1377.photobucket.com/albums/ah72/michaelbarley1/logo_zpsopheofmw.png" alt="logo">
</div>
<div id='welcome'>
<img id='popUp' src="http://i1377.photobucket.com/albums/ah72/michaelbarley1/welcome_zps3xaw6gge.png" alt="welcome">
</div>
</body>
</html>
An easy fix would be to switch the ordering of the HTML so that the welcome bubble div is before the logo div. All you will have to do then is float each div to the left.
html {
background-color: #FFFFFF;
}
img {
width: 100px;
height: 150px;
}
#logo {
margin: auto;
width: 10%;
float:left;
}
#welcome {
margin: auto;
width: 10%;
float:left;
}
#popUp {
width: 50px;
height: 50px;
}
<! DOCTYPE html>
<html>
<head>
<title>Placehold</title>
<link rel="stylesheet" href="css/stylesheet.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
</head>
<body>
<div id='welcome'>
<img id='popUp' src="http://i1377.photobucket.com/albums/ah72/michaelbarley1/welcome_zps3xaw6gge.png" alt="welcome">
</div>
<div id='logo'>
<img src="http://i1377.photobucket.com/albums/ah72/michaelbarley1/logo_zpsopheofmw.png" alt="logo">
</div>
</body>
</html>
Related
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Closed 5 years ago.
I want do center my image horizontally and vertically but I just can center horizontally, at the same time I want this responsive,can anyone help me ? enter code here
.video{
width: 100%;
height: 500px;
background-color: peru;
position: absolute;
}
.moldura{
display: block;
width: 50px;
margin-right: auto;
margin-left: auto;
margin-top: auto;
margin-bottom: auto;
border: 1px solid black;
}
.moldura img{
width: 50px;
}
<!DOCTYPE html>
<html>
<head>
<title>TESTE</title>
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
<div class="video">
<div class="moldura">
<img src="https://lh4.ggpht.com/SKQHLsT8xsNpXeL5si4bBqSNqdy8Qbvzk15J3qWTp55AnnkbNO6-vBJhIBTQxyq16YE=w300">
</div>
</div>
</body>
</html>
Have you tried using flex boxes?
EDIT: As per comment, no i didn't know about using "align-items", works well, I've edited the snippet accordingly! :)
.video{
display:flex;
justify-content: center;
align-items: center;
flex-direction:column;
height:250px;
background-color: peru;
}
.moldura{
}
.moldura img{
height:50px;
border:1px solid black;
}
<!DOCTYPE html>
<html>
<head>
<title>TESTE</title>
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
<div class="video">
<div class="moldura">
<img src="https://lh4.ggpht.com/SKQHLsT8xsNpXeL5si4bBqSNqdy8Qbvzk15J3qWTp55AnnkbNO6-vBJhIBTQxyq16YE=w300">
</div>
</div>
</body>
</html>
There you are:
.video{
width: 100%;
height: 500px;
background-color: peru;
position: absolute;
}
.moldura{
display: block;
width: 50px;
border: 1px solid black;
/* Here is the important code*/
position: relative;
top: 50%;
left: 50%;
transform:translate(-50%, -50%);
}
.moldura img{
width: 50px;
}
<!DOCTYPE html>
<html>
<head>
<title>TESTE</title>
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
<div class="video">
<div class="moldura">
<img src="https://lh4.ggpht.com/SKQHLsT8xsNpXeL5si4bBqSNqdy8Qbvzk15J3qWTp55AnnkbNO6-vBJhIBTQxyq16YE=w300">
</div>
</div>
</body>
</html>
Added line-height css property.
.video{
width: 100%;
height: 500px;
background-color: peru;
position: absolute;
}
.moldura{
display: block;
width: 50px;
margin:0 auto;
line-height:500px;
height:100%;
}
.moldura img{
width: 50px;
vertical-align:middle;
}
<!DOCTYPE html>
<html>
<head>
<title>TESTE</title>
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
<div class="video">
<div class="moldura">
<img src="https://lh4.ggpht.com/SKQHLsT8xsNpXeL5si4bBqSNqdy8Qbvzk15J3qWTp55AnnkbNO6-vBJhIBTQxyq16YE=w300">
</div>
</div>
</body>
</html>
I want to have the right column of the main body to be split into two. At the moment I only would like a bottom border showing as an outline but can't get it to work. It is the #map section that I would like to change.
I have tried a couple of different things but can't figure it out, I have probably just missed something but I can't figure out what.
HTML Code:
<!DOCTYPE HTML>
<style>
* {
margin: 0;
}
html, body {
height: 100%;
}
.mainSect {
height: 200%;
background-color: #FEDB00;
margin-left: 5%;
margin-right: 5%;
margin-bottom: 5%;
opacity: .6;
position: relative;
margin-top: -12px;
border: 2px solid black;
}
#news {
position: absolute;
width: 70%;
height: 100%;
border-right: 2px solid black;
}
#map {
position: absolute;
width: 20px;
height: 20px;
margin-left: 600px;
border-bottom: 2px solid black;
}
</style>
<html>
<head>
<title>Waitemata FC - NEWS </title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="nav">
NEWS
<a href="index.html">TEAMS
<ul class="subMenu">
<li>Juniors</li>
<li>Youth</li>
<li>Seniors</li>
</ul>
</a>
REGISTRATION
GALLERY
SPONSORS
ABOUT
</div>
<div class="imgSect">
<img class="logo" src="img/logo.png" alt="Waitemata AFC Logo" />
<p class="name">WAITEMATA AFC </p>
</div>
FaceBook Page
<div class="mainSect">
<div id="news">
</div>
<div class="map">
<p>test </p>
</div>
</div>
<footer>
</footer>
</body>
</html>
First, to divide the main body, you must have a container section and inside it to have the right & left columns,
For Ex:
<body>
<div class="container">
<div class="left-column"></div>
<div class="right-column">
<div class="column-header">
</div>
</div>
</div>
</body>
<style type="text/css">
body {
width: 100%;
height: auto;
}
.container {
width: 1200px;
/*for ex. height:auto;*/
padding-right: 20px;
padding-left: 20px;
}
.left-column {
width: 70%;
/*or in px;*/
height: auto;
float: left;
}
.right-column {
width: 30%;
height: auto;
float: left;
}
.column-header {
width: 100%;
height: 50px;
/*change it as you wish;*/
}
</style>
I have a header with an image and an "hamburger" icon for a mobile navigation menu. What I am simply trying to do it display my logo at approx 75% of the available screen with the menu icon to the far right.
I have a master div container and then within it i have 2 divs which has the logo in the left div and menu icon in the right. For some reason I cannot get the menu to stay on the right in the same div container. Any suggestions?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
#container {
width: 100%;
max-width: 100%;
border: 0px;
margin: 0px;
padding: 10px;
background-color: blue;
}
#logoContainer {
width: 75%;
max-width: 75%;
border: 0px;
margin: 0px;
background-color: blue;
}
#logo {
width: auto;
max-width: 90%;
min-width: 90%;
}
#menu {
float: right;
}
#mobileMenu {
width: 100%;
background-color: green;
color: white;
display: none;
}
</style>
</head>
<body>
<div id="container">
<div id="logoContainer">
<img id="logo" src="content/logo.png"/>
</div>
<div id="menu">
<button type="button"><span>Menu</span></button>
</div>
</div>
<div id="mobileMenu">some content</div>
</body>
</html>
give specific width to both #logoContainer and #menu with display:inline-block;
#logoContainer{
width:75%;
display:inline-block;
}
#menu{
width:25%;
display:inline-block;
text-align: right;
}
#menu button{
margin-right:10px
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
#container {
width: 100%;
max-width: 100%;
border: 0px;
margin: 0px;
padding: 10px;
background-color: blue;
}
#logoContainer {
width: 75%;
max-width: 75%;
border: 0px;
margin: 0px;
background-color: blue;
}
#logo {
width: auto;
max-width: 90%;
min-width: 90%;
}
#menu{
float: right;
}
#mobileMenu {
width: 100%;
background-color: green;
color: white;
display: none;
}
</style>
</head>
<body>
<div id="container">
<div id="logoContainer">
<img id="logo" src="content/logo.png" />
</div>
<div id="menu">
<button type="button">
<span>
Menu
</span>
</button>
</div>
</div>
<div id="mobileMenu">
some content
</div>
</body>
</html>
How about using media queries to make the logo appear. With my example, I've set the display on #logo to "none" . With my media query, whenever the page reaches a min-width of 800px it will display the #logo element.
<div id="container">
<div id="logoContainer">
<img id="logo" src="content/logo.png" />
</div>
<div id="menu">
<button type="button">
<span>
Menu
</span>
</button>
</div>
</div>
<div id="mobileMenu">
some content
#container {
width: 100%;
max-width: 100%;
border: 0px;
margin: 0px;
padding: 10px;
background-color: blue;
}
#logoContainer {
width: 75%;
max-width: 75%;
border: 0px;
margin: 0px;
background-color: blue;
}
#logo {
display:none;
width: auto;
max-width: 90%;
}
#menu{
float: right;
}
#mobileMenu {
width: 100%;
background-color: green;
color: black;
display: none;
}
#media (min-width:800px){
#logo{display:block;}
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body{
margin: 0px;
}
#container {
box-sizing: border-box;
width: 100%;
max-width: 100%;
border: 0px;
margin: 0px;
padding: 10px;
background-color: red;
}
#logoContainer {
float: left;
width: 75%;
max-width: 75%;
border: 0px;
margin: 0px;
background-color: blue;
}
#logo{
max-width: 75%;
border: 0px;
margin: 0px;
}
#menu{
height: 10px;
width: 25%;
float: right;
background: yellow;
}
#mybtn{
float: right;
}
#mobileMenu {
display: inline;
background-color: green;
color: white;
}
</style>
</head>
<body>
<div id="container">
<div id="menu">
<button type="button" id="mybtn">
<span>
Menu
</span>
</button>
<div id="mobileMenu">
some content
</div>
</div>
<div id="logoContainer">
<img id="logo" src="content/logo.png" />
</div>
</div>
</body>
</html>
i want the "slideshow" and "destination" divs to have the colored backgrounds on top f the "mainheader" "maincontent" and "content" divs. but the background is not visible. here is my code. The text in the slideshow and destination divs is visible but the background is not.
HTML
<!Doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div class="content">
<header class="mainheader">
<a href="#">
<img src="#" alt=""/><h1>HEADER</h1>
</a>
<nav>
<ul>
<li>blank</li>
<li>blank</li>
<li>blank</li>
<li>blank</li>
</ul>
</nav>
</header><!--mainheader-->
<div class="maincontent">
<div name="slideshow">
<img sr ="#" alt=""/><h2>Slideshow</h2>
</div><!--slideshow-->
<div name="destinations">
<h2>Destinations</h2>
<div><!--destination-->
</div><!--maincontent-->
</div> <!--CONTENT-->
</body>
</html>
CSS
body {
align-content: center;
margin: 0px;
}
.content {
margin: 0px;
width: 100%;
height: 1000px;
background-color: brown;
}
.mainheader {
width: 100%;
height: 30%;
color: white;
background-color: #4949bf;
align-self: center;
}
.mainheader nav ul li {
list-style: none;
display: inline;
}
.maincontent {
background-image: url(img/transparent.png);
width: 80%;
position: relative;
margin-left: 10%;
margin-right: 10%;
margin-top: -10%;
}
.slideshow {
box-shadow: green;
width: 70px;
height: auto;
position: absolute;
}
.destinations {
background-color: orange;
width: 30px;
height: auto;
position: absolute;
}
Your html is incorrect. Instead of class you have used name. Change these lines <div name="slideshow"> <div name="destinations"> like this <div class="slideshow"> <div class="destinations">.
And change box-shadow to background-color
.slideshow {
box-shadow: green;
like this
.slideshow {
background-color: green;
I am trying to make a homepage divided into two halves. The page should look like this page - two images should be responsive, they should cover full screen without white spaces on sides, images should be clickable. And I would appreciate if it could be written just in HTML and CSS without JavaScripts.
Everything I have got now is:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="body">
<div id="production" class="column half">
<h1>production</h1>
</div>
<div id="label" class="column last">
<h1>label</h1>
</div>
</div>
</body>
</html>
and css
.body { overflow: hidden; margin: 0; width: 100%; height: 100%;}
.column { float: left; }
.half { height: 100%; width: 50%; }
.last { height: 100%; float: none; width: auto; }
#production { background-image:url(bgprod.jpg); }
#label { background-image:url(bglabel.jpg); }
Thanks for any help.
I sketched up something quickly that you can use. This meets your requirements given that the images are proportional to the screen size.
The html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="col-half">
<img class="responsive-image" src="test.jpg" />
</div>
<div class="col-half">
<img class="responsive-image" src="test.jpg" />
</div>
</div>
</body>
</html>
And the css:
html, body {
margin: 0 0 0 0;
padding: 0 0 0 0;
}
.container {
width: 100%;
height: 100%;
}
.col-half {
margin: 0;
padding: 0;
float: left;
max-width: 50%;
height: 100%;
}
.responsive-image {
max-height: 100%;
max-width: 100%;
height: auto;
width: auto;
}