My goal is to have a div for few images (it worked so far), the div for some text on the right side and other div for text on the bottom as well.
When I add text into the missedletters div it somehow goes down not sure why. I think there might be something with display:inline-block
that causes the mess, but I can't figure out what is it.
The CSS that matters:
body {
background-color: #303030;
font-family: 'Source Code Pro', monospace;
font-size: 28px;
}
body .arena {
min-height: 400px;
height: 50%;
width: 50%;
margin: auto;
margin-top: 11.5%;
background-color: darkseagreen;
border-radius: 15px;
}
.poorguy {
display: inline-block;
vertical-align: top;
margin-top: 12px;
min-width: 360px;
/* not sure if shouldn't be longer, but fits into it*/
min-height: 300px;
/* so i'll check it out in the process*/
bottom: 0px;
}
.missedletters {
vertical-align: top;
display: inline-block;
margin-top: 12px;
min-height: 320px;
min-width: 190px;
left: 0px;
bottom: 0px;
word-wrap: break-word;
}
.correctletters {
min-height: 80px;
vertical-align: top;
word-wrap: nowrap;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="background">
<div class="arena">
<div class="poorguy">
</div>
<div class="missedletters">
</div>
</div>
</div>
</body>
</html>
You just need to add a max-width/width to your missedletters div. You could use float: left; instead of display: inline-block;
Related
I'm fairly new here so apologies if this has already been answered somewhere else, I can't seem to find anything about this specific issue though.
I've been struggling to get rid of a huge whitespace that appears next to each webpage I create that is almost the same size as the webpage. It doesn't extend below the page or have any affect on positioning of objects no the page; when I center things they go where I want them to.
Any help would be hugely appreciated.
Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body {
font-family: 'Raleway', sans-serif !important;
font-style: normal;
font-variant: normal;
margin: auto;
margin-left: auto;
margin-right: auto;
color: #013A51 !important;
}
div.a {
position: relative;
top:-30px;
}
div.c {
position: relative;
left: 1000px;
top: -120px;
}
div.b {
position: relative;
top: -60px;
}
.header {
padding: 5px;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
width: 100%;
height: 90px;
text-align: left;
background: #C5E8F6;
}
</style>
</head>
<body>
<div class="header">
<div class="a">
<p style="font-size:36px"><b style="color: rgb(0, 229, 158)">Some</b>Text</p>
</div>
<div class="b">
<p style="font-size:15px">Some | <b>Text</b></p>
</div>
<div class="c">
<p style="font-size:15px">SomeText</p>
</div>
</div>
</body>
</html>
This is only happening in Chrome, not Firefox or IE -
I have three images with text overlayed. The three images are responsive, and take up the full width of the browser window. Here's a screenshot:
When I resize the window to make it narrower, somehow, the html is becoming smaller than the size of the page. For example, here:
This only happens very quickly before the window seems to readjust, and everything is fine. However, I'd still like to fix it.
I've tried using a flexbox footer instead of the vh method but that didn't help.
My HTML and CSS are below. A note about the HTML - I'm sure there is another way to get the three pictures to fit together without any whitespace besides cramming the HTML all together like it is - sorry for being a hack. But that's not the source of the problem, as far as I can tell - it happens when there is only one picture as well.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<link href="styles/index-footer-test-750.css" type="text/css" rel="stylesheet">
<title>Good Boy Dog Care</title>
</head>
<body>
<div class="index-content">
<div id="we-love-dogs-one"><img id="we-love-dogs-one-image" src="images/cute-dog-one-cropped.jpg"><div id="we-love-dogs-one-text"><p>WE</p></div></div><div id="we-love-dogs-two"><img id="we-love-dogs-two-image" src="images/cute-dog-two-cropped.jpg"><div id="we-love-dogs-two-text"><p>LOVE</p></div></div><div id="we-love-dogs-three"><img id="we-love-dogs-three-image" src="images/cute-dog-three-cropped.jpeg"><div id="we-love-dogs-three-text"><p>DOGS</p></div></div>
</div>
<div class="footer">
</div>
</body>
</html>
And CSS:
* {
box-sizing: border-box;
margin: 0;
}
.index-content {
min-height: calc(100vh - 2em);
padding: 0;
margin: 0;
}
.footer {
height: 2em;
background-color: rgba(240, 100, 60, 1);
width: 100%;
cursor: default;
}
#we-love-dogs-one {
width: 34%;
display: inline-block;
margin: 0;
position: relative;
text-align: center;
}
#we-love-dogs-one-image {
width: 100%;
height: auto;
display: block;
float: left;
}
#we-love-dogs-one-text {
left: 0;
position: absolute;
width: 100%;
color: white;
top: calc(50% - 17px);
font-size: 1.5em;
display: inline-block;
font-family: "Montserrat";
}
#we-love-dogs-two {
width: 33%;
display: inline-block;
margin: 0;
position: relative;
text-align: center;
font-family: "Montserrat";
}
#we-love-dogs-two-image {
width: 100%;
height: auto;
display: block;
float: left;
}
#we-love-dogs-two-text {
left: 0;
position: absolute;
width: 100%;
color: white;
top: calc(50% - 24.5px);
font-size: 2em;
display: inline-block;
font-family: "Montserrat";
}
#we-love-dogs-three {
width: 33%;
display: inline-block;
margin: 0;
position: relative;
text-align: center;
}
#we-love-dogs-three-image {
width: 100%;
height: auto;
display: block;
float: left;
}
#we-love-dogs-three-text {
left: 0;
position: absolute;
width: 100%;
color: white;
top: calc(50% - 17px);
font-size: 1.5em;
display: inline-block;
font-family: "Montserrat";
}
Any help would be appreciated. Thanks!
cliffgallagher# , try using divs to auto resize rather than hardly setting the width or height per image, here is an example post: How do I auto-resize an image to fit a div container.
img {
max-width: 100%;
max-height: 100%;
}
.portrait {
height: 80px;
width: 30px;
}
.landscape {
height: 30px;
width: 80px;
}
.square {
height: 75px;
width: 75px;
}
Portrait Div
<div class="portrait">
<img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>
Landscape Div
<div class="landscape">
<img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>
Square Div
<div class="square">
<img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>
I have some HTML/CSS.
The entire page is 1000 pixels by 1000 pixels and is wrapped by a box. For alignment purposes, I'm temporarily placing a solid black border around everything that I will make hidden or invisible later. There is an image on the top left (#Logo), followed by a div box (#Upper_Left) just to the right of the logo.
I want to use absolute positioning to put things up against the top or bottom edge of the #Upper_Left div box. In this case the h1 title goes along the top of the box and some other text ["Search:____________[drop][drop]" - placeholder for a search bar] goes along the bottom-left of the div box. In my HTML/CSS code, the "Search:____________[drop][drop]" text appears at the bottom left of the browser, not the #Upper_Left div box.
How do I make the text position be relative to the div box?
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
margin: 0px;
padding: 0px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
* {
border-style: solid;
border-color: black;
border-width: 1px;
}
#Entire_Page {
max-width: 1000px;
max-height: 1000px;
min-width: 1000px;
min-height: 1000px;
}
#Logo {
float: left;
width:104px;
height:118px;
}
#Upper_Left {
display: inline;
float: left;
max-width: 500px;
max-height: 118px;
min-width: 500px;
min-height: 118px;
}
#Title {
display: inline;
font-size: 3em;
}
#bottom_left {
position: absolute;
bottom: 0px;
left: 0px;
}
</style>
</head>
<body>
<div id="Entire_Page">
<img id="Logo" src="logo.png" alt="logo">
<div id="Upper_Left">
<h1 id="Title">Title (Up Top)</h1>
<div id="bottom_left">
Search:____________[drop][drop]
</div>
</div>
</div>
</body>
</html>
Add position: relative;.
#Upper_Left {
position: relative;
display: inline;
float: left;
max-width: 500px;
max-height: 118px;
min-width: 500px;
min-height: 118px;
}
http://codepen.io/anon/pen/xZwNam
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Meriniuc Răzvan - Dumitru</title>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<div id="header">
<h3>
Cv
</h3>
</div>
<div id="footer"></div>
</body>
</html>
.left {
border-radius: 10px;
background-color: green;
height: 310px;
width: 75px;
float: left;
margin-top: 65px;
}
.right {
border-radius: 10px;
background-color: blue;
height: 310px;
width: 50px;
float: right;
margin-top: 65px;
}
#header {
position: fixed;
height: 65px;
background-color: red;
width: 720px;
border-radius: 10px;
display: block;
}
#footer {
clear: both;
height: 65px;
width: 720px;
background-color: black;
border-radius: 10px;
}
h3 {
margin: auto;
}
With "margin:auto".
Without "margin:auto"
I am learning HTML and CSS and have tried to create a CV page, but my header won't center. I have read about this problem and the general solution seems to make the header display as a block, but it still doesn't work.
Could you please explain why this code does not center my header and offer a possible solution? Thank you in advance!
Auto margins centre the element. They don't centre the inline content of it.
The header is centred. The text "Cv" is aligned to the left of the header.
To centre that, use text-align.
Use text-align: center; The h3 tag contains text.
h3 {
text-align: center;
}
As a homework for school I'm creating a website but a div
.container {
padding: 0px;
margin: 0px;
border: 0px;
position: absolute;
top: 70vw;
width: 100vw;
} is getting out the window, because of this the h1.titolo {
font-family: musei;
color: #555555;
font-size: 4vw;
text-align: center;
display: block;
margin: 0 auto;
}put inside it makes the h1 and a
form
.map {
display: block;
margin: 0 auto;
} put inside the div aswell, not centered on all resolutions.
Why doesn't the div is a little bit larger instead of taking the excat width of the window even if i wrote 100vw?
Here's the full HTML/CSS code
.immag {
max-width: 100%;
height: auto;
position: absolute;
top: 0px;
left: 0px;
}
.map {
display: block;
margin: 0 auto;
}
.titolo {
font-family: musei;
color: #555555;
font-size: 4vw;
text-align: center;
display: block;
margin: 0 auto;
}
.container {
padding: 0px;
margin: 0px;
border: 0px;
position: absolute;
top: 70vw;
width: 100vw;
}
.border {
background-color: #ebebeb;
margin: 0 auto;
width: 300px;
border-style: ridge;
border-color: #00c4ff;
border-width: 1vw;
width: 20vw;
height: auto;
}
#font-face {
font-family: musei;
src: url(font-titolo-musei.otf);
}
html {
overflow-y: scroll;
}
.over {
overflow-y: hidden;
width: 200vw;
}
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="shortcut icon" href="favicon.ico" >
<title>1CE</title>
</head>
<body>
<img src="Senza%20titolo-1.jpg" class="immag">
<div class="container">
<div class="border">
<h1 class="titolo">MUSEI</h1>
</div><br>
<iframe class="map" src="https://mapsengine.google.com/map/embed?mid=zi8GElmpTlNo.kJ3GnRl1X08c" width="640" height="480"></iframe>
</div>
</body>
</html>
Using 100vw will always make the site take up the entire viewport, however a scrollbar is also part of the viewport and will make what is displayed smaller than the actual viewport. using width:100% will solve your problem with the scrollbar being in the way.