An HTML page (actually an Anki card) is made of four parts:
text
images
text
images
I want everything to appear centered, one item per line, one line after the other.
However, when there are too many images, the following text overlaps the images above it.
.card {
font-family: arial;
font-size: 20px;
text-align: center;
color: black;
background-color: white;
}
.question {font-size: 24px; }
.réponse {font-size: 24px; font-weight: bold; position: ;}
.img {
display: block; margin-left: auto; margin-right: auto;
width: auto; height: auto; text-align: center;
max-width: 300px; max-height: 300px;
}
<div class=question>
{{Q2}}
</div>
{{#Q2_img}}
<br>
<div class=img>{{Q2_img}}</div>
{{/Q2_img}}
<br><br>
<div class=réponse>
{{A2}}
</div>
{{#A2_img}}
<br>
<div class=img>{{A2_img}}</div>
{{/A2_img}}
Is there a simple way to achieve what I want ?
Related
I'm creating an online store and i'm trying to edit the code to add some custom features.
My site is www.comfykitty.co
I'm trying to add "More Styles Available" centered in the line below the title (of certain products such as "Fruit Print Bed"). I have my price float: left; and sale tag float: right;
I've been trying for hours to get it to be centered but it either goes onto another line or stays left and goes under the price <div>.
I think I've added the relevant CSS and HTML code that shows what I've done. Please help me center the <p></p> on the same line with the price and sale tag. I've removed the HTML and if statements and other irrelevant code that does other things that wouldn't have been in the tags (that's why there's nothing in the tags).
.pricearea {
position: absolute;
padding-left: 5px;
width: 60px;
height: 25px;
border-radius: 5px;
background-color: #d1b3ff;
font-weight: bold;
float: left;
margin: 0 auto;
font-family: Helvetica Neue;
}
.saletag_area {
float: right;
}
<div class="pricearea">
//Code for displaying price would've been here
<p style="color: red; display: inline;">Other Styles Available</p>
<div class="saletag_area" style="display: inline;">
</div>
</div>
You can use float and then give each div an equal width:
.pricearea {
/* position: absolute; */
padding-left: 5px;
/* width: 60px; */
height: 25px;
border-radius: 5px;
background-color: #d1b3ff;
font-weight: bold;
/* float: left; */
margin: 0 auto;
font-family: Helvetica Neue;
}
.pricearea>div {
float: left;
width: 33.3333%;
}
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
<div class="pricearea">
<div class="text-left">$10</div>
<div class="text-center">Other Styles Available</div>
<div class="text-right saletag_area" style="display: inline;">save</div>
</div>
I have a page layout that I would like to make responsive. The page is currently split 50/50 down the middle vertically. I achieved this by making the Section div display as a table and the divs inside as cells. I also have an absolute positioned Title at the top-center of the page.
I would like to make is such that when the page is viewed on a smaller screen (e.g. tablet or mobile) the 50/50 split becomes horizontal, with all of the contained text centered horizontally and vertically, and with the Title remaining at the top-center of the page.
Here is my code:
html,
body,
section,
div {
height: 100%;
}
body {
color: #000000;
font-family: Cinzel, serif;
font-size: 1.25rem;
line-height: 150%;
text-align: center;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
div {
width: 50%;
padding: 1rem;
}
h1 {
font-size: 1.75rem;
}
.logo {
text-align: center;
color: red;
position: absolute;
width: 100%;
}
.container {
display: table;
height: 100%;
width: 100%;
}
.cell {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.left-half {
background: #FFFFFF;
color: #000000;
}
.right-half {
background: #000000;
color: #FFFFFF;
}
<body>
<section class="container">
<header class="logo">
<h1>Title</h1>
</header>
<div class="left-half cell">
<h1>First Half</h1>
</div>
<div class="right-half cell">
<h1>Second Half</h1>
</div>
</section>
</body>
Any help would be greatly appreciated.
Use media queries for smaller screens in which you change display: tableand display: table-cell to display: block in .container and .cell.
And definitely erase that div { width: 50%; } rule - that affects ALL divs, which you certainly won't want! (Write that 50% width into the .cell rule instead, and add a media query rule for it for smaller sizes that makes it 100%.
I have two divs displayed using display: inline-block, in order to have them next to each other. This works when neither of the divs have text in them. However, when I put text in one div, it moves it down dramatically, while the other keeps the same position. This happens regardless of what div I put the text in; if I put it in both, however, only the left div will go down.
Here's a codepen to show what I mean: http://codepen.io/anon/pen/MwEKPp
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
#main_container {
width: 1000px;
height: 95%;
margin: 0 auto;
font-size: 0px;
}
#logo {
display: inline-block;
height: 200px;
width: 200px;
background-color: aqua;
font-size: 20px;
}
#title_area {
display: inline-block;
font-size: 20px;
height: 200px;
width: 800px;
background-color: rgb(60,105,123);
font-family: "open sans";
font-size: 60px;
}
<div id="main_container">
<div id="logo_title_area">
<div id="logo">
test
</div>
<div id="title_area">
test
</div>
</div>
</div>
Entering text into the divs labelled logo and title_area will produce the effect I'm talking about.
Does anyone have any idea how to fix this? I need them to remain side-by-side regardless of their contents. Thanks in advance!
It's just missing the vertical alignment, the default value is baseline.
E {
display: inline-block;
vertical-align: top;
}
#logo, #title-area {
vertical-align: top;
}
I just added overflow:auto; for both of the divs and it worked
#logo {
overflow:auto;
display: inline-block;
height: 200px;
width: 200px;
background-color: aqua;
font-size: 20px;
}
#title_area {
overflow:auto;
display: inline-block;
font-size: 20px;
height: 200px;
width: 800px;
background-color: rgb(60,105,123);
font-family: "open sans";
font-size: 60px;
}
I have two divisions next to each other with attribute display: inline-block;; if I increase the height of the second division, the position of the first goes down by the amount I increased the height by, for example - if I add a slogan under my name as seen in this fiddle http://jsfiddle.net/wyorLh6s/1/ the position of the icon/logo goes down.
It's probably really obvious, but it's been a long weekend and I could use a push in the right direction - cheers guys.
.top {
background: #2980b9;
padding: 20px;
padding-left: 200px;
padding-right: 200px;
}
.top .logo {
position: relative;
}
.top .logo .icon {
font-weight: bolder;
color: white;
}
.top .logo .icon {
display: inline-block;
width: 10px;
height: 10px;
padding: 25px;
padding-top: 5px;
padding-bottom: 45px;
border: 3px solid white;
text-align: center;
}
.top .logo .name {
display: inline-block;
color: white;
text-transform: uppercase;
}
<div class="top">
<div class="logo">
<div class="icon">JH</div>
<div class="name">
<div class="title">Jack Hardcastle</div>
<div class="slogan">Slogan Goes Here</div>
</div>
</div>
</div>
My aim is to have the name inline with the JH in the logo/bordered-text, with the slogan underneath that text, http://jsfiddle.net/wyorLh6s/1/ can be seen here if the slogan div is removed.
As elements are displayed inline, .icon is affecting .name's baseline (default vertical-align), so you can do the following to change this behaviour:
.name{ vertical-align: top; }
JSFiddle
I have been trying to align two elements, a h2 and a div side by side without having one of them colapse when the window changes to a smaller size. I've searched the web a bit but found nothing similar that would help and my solutions just wouldn't work so I though here there would be someone able to help me.
So I want it to be displayed like this at all times:
https://imagizer.imageshack.us/v2/912x135q90/631/ZYR7sc.png (Can't post images sorry!)
But when window size changes dispite the fact the div should adapt at some point it just breaks to next line:
https://imagizer.imageshack.us/v2/730x144q90/912/yRBpkc.png
Here is my code on this one:
HTML
<div id='pagetitle'>
<h2 id='subtitle'>Weapons</h2>
<div id='hline'></div>
</div>
CSS
#pagetitle { /* This div is for centering both of the elements. */
width: 90%;
margin: 0 auto;
display: block;
}
#subtitle {
display: inline-block;
color: #72c9b9;
font-size: 30px;
font-weight: 300;
text-align: center;
}
#hline {
display: inline-block;
background-color: #72c9b9;
width: 70%;
height: 1px;
position: relative;
bottom: 4px;
margin-left: 20px;
}
So this is it guys, any sugestions? Thanks in advance.
cs.almeida
Here's a way how to do it:
demo
<div id='pagetitle'>
<h2 id='subtitle'><span>Weapons</span></h2>
</div>
#pagetitle {
width: 90%;
margin: 0 auto;
display: block;
}
#subtitle {
border-bottom: #72c9b9 solid 2px;
height: 18px;
display: block;
color: #72c9b9;
font-size: 30px;
font-weight: 300;
}
#subtitle > span {
background-color: white;
padding: 10px 20px;
}