I want to create a PDF-Layout for confluence, by using basic html and css.
I have a border-bottom style attribute in a div and I set the padding for the border manually.
How can I add more space below that border?
.fsTitlePage {
margin-left: auto;
margin-top: 50mm;
margin-right: auto;
page-break-after: always;
}
.fsTitle {
font-size: 42px;
margin: 72px 0 4px 0;
text-align: center;
color: #184b65;
}
<div class="fsTitlePage">
<center>
<img src="http://placehold.it/350x350" alt="" style="width: 350px; height: auto;">
<br><br>
<hr style="border-color: #f39100; width: 100px;">
<div class="fsTitle">Some<b class="fsTitle">Title</b> Bla Bla</div>
</center>
</div>
Okay, So you need a bigger border? If so use this code
border: 10px solid #f39100;
instead of your code
border-color: #f39100;
Related
I am trying to center a form inside a div and have another div on the right that is slightly indented but I can not get the elements to line up.
How do I do this with CSS?
Also, is it possible to align the right hand div in the center on a new line if the content doesn't fit on a page?
.lander-form {
margin: auto;
}
.lander-add {
float: right;
margin-right: 50px;
}
.container-lander {
overflow: auto;
width: 100%;
}
#OEPL_Widget_Form {
min-width: 200px;
max-width: 399px;
margin: auto;
font-weight: 300;
background-color: #F9F9F9;
box-shadow: 5px 5px 5px #888888;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
text-align: left;
border: 3px solid #d9d9d9;
}
#OEPL_Widget_Form div {
margin-top: 10px;
text-align: left;
}
#OEPL_Widget_Form input,
button {
width: 100%;
padding: 3px 5px;
}
.OEPL_Widget_Form textarea {
width: 100%;
padding: 3px 5px;
height: 5em;
text-align: left;
}
<div class="container-lander">
<div class="lander-form">
<div class="widget widget_oepl_lead_widget">
<div align='center' class='LeadFormMsg' style='color:red'></div>
<form id='OEPL_Widget_Form' class='OEPL_Widget_Form' method='POST' enctype='multipart/form-data'>
<div style='width: 45%; float:left'>
<p class='small'><label>First Name <span style='color: red'>*</span> :</label><br><input type='text' /></p>
</div>
<div style='width: 45%; float:right'>
<p class='small'><label>Last Name <span style='color: red'>*</span> :</label><br><input type='text' /></p>
</div>
<div>
</div>
<p class='small'><label>Your Message <span style="color: red">*</span> :</label><br><textarea cols="30" rows="5"></textarea></p>
<p><input type='submit' name='submit' style='' value='Submit' id='WidgetFormSubmit' class=''></p>
</form>
</div>
</div>
<div class="lander-add">
<div class="laura" id="laura-935032319"><img width="200" src='http://www.freevectors.net/files/large/10CarsVectorSet.jpg' /></div>
</div>
</div>
What you need is float:left;. Your two divs that you want side-by-side are .lander-form and .lander-add. What you have is, .lander-add is set to float:right;. This is a common beginner mistake. Both halves of the page should be float:left, you would think it would make more sense to make one of them float:right, but this is not the case.
I made the width for .lander-form 65%, expanded on the margins, and made the width for .lander-add "auto". This should work the way you want it to, with the right half of the page appearing below the left, when the viewing area is small or resized. Notice the difference when you run my code snippet, between the result that appears below, and the full-size result page.
.lander-form {
margin: auto;
float:left;
width:65%;
margin-bottom:20px;
margin-right:15px;
}
.lander-add {
float: left;
min-width:20%;
width:auto;
}
.container-lander {
overflow: auto;
width: 100%;
}
#OEPL_Widget_Form {
min-width: 200px;
max-width: 399px;
margin: auto;
font-weight: 300;
background-color: #F9F9F9;
box-shadow: 5px 5px 5px #888888;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
text-align: left;
border: 3px solid #d9d9d9;
}
#OEPL_Widget_Form div {
margin-top: 10px;
text-align: left;
}
#OEPL_Widget_Form input,
button {
width: 100%;
padding: 3px 5px;
}
.OEPL_Widget_Form textarea {
width: 100%;
padding: 3px 5px;
height: 5em;
text-align: left;
}
<div class="container-lander">
<div class="lander-form">
<div class="widget widget_oepl_lead_widget">
<div align='center' class='LeadFormMsg' style='color:red'></div>
<form id='OEPL_Widget_Form' class='OEPL_Widget_Form' method='POST' enctype='multipart/form-data'>
<div style='width: 45%; float:left'>
<p class='small'><label>First Name <span style='color: red'>*</span> :</label><br><input type='text' /></p>
</div>
<div style='width: 45%; float:right'>
<p class='small'><label>Last Name <span style='color: red'>*</span> :</label><br><input type='text' /></p>
</div>
<div>
</div>
<p class='small'><label>Your Message <span style="color: red">*</span> :</label><br><textarea cols="30" rows="5"></textarea></p>
<p><input type='submit' name='submit' style='' value='Submit' id='WidgetFormSubmit' class=''></p>
</form>
</div>
</div>
<div class="lander-add">
<div class="laura" id="laura-935032319"><img width="200" src='http://www.freevectors.net/files/large/10CarsVectorSet.jpg' /></div>
</div>
</div>
Using flex is often a great way to deal with layouts. Try this on your .container-lander div to align the items next to each other as well as having them vertically centered (additionally, this will also wrap the items when there's not enough space to place them next to each other):
CSS:
.container-lander {
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
align-items: center;
}
Here is a live example (JSFiddle).
I am attempting to attach a div on the bottom on my image with no spaces. However, the following code does not do what I ask of it. In addition to this, when hovering anywhere along the width of my div h2, the click button occurs, to indicate it is clickable in this blank space. I feel I have attempted everything to attach the black div and the image together, and make them both clickable without glitching or bugging with only one anchor tag. If you can help me, I would be extremely greatful.
Here is my current HTML code:
<div style="#">
<a style="max-width: 280px;" href="#">
<img src="../Images/7.JPG" style="height: 200px; width: 280px; border-radius: 10px 10px 0 0;">
<div style="background-color: black; width: 280px; height: 30px; border-radius: 0 0 10px 10px;">
<h2 style="color: white; font-weight: bold; text-align: center; padding-top: 2px;">Bees</h2>
</div>
</a>
</div>
Thanks in advance!
Use this rule, it is caused by initial margin of h2
<div style="max-width: 280px; overflow:hidden;" style="#">
<a style="max-width: 280px;" href="#">
<img src="../Images/7.JPG" style="height: 200px; width: 280px; border-radius: 10px 10px 0 0; display: block;">
<div style="background-color: black; width: 280px; height: 30px; border-radius: 0 0 10px 10px;">
<h2 style="color: white; margin:0px; font-weight: bold; text-align: center; padding-top: 2px;">Bees</h2>
</div>
</a>
</div>
here is a fiddle for you
There are a few things at play here.
Your <h2> is overflowing trough the parent because of collapsible margins. Set the margin to 0 to fix it.
Either the <a> or the main <div> needs display:inline-block to not go 100% width.
Finally, don't use inline styles. Use <style> tag or style.css and add some classes and IDs.
a{
max-width: 280px;
display: inline-block;
}
img{
height: 200px;
width: 280px;
border-radius: 10px 10px 0 0;
display: block;
}
h2{
color: white;
font-weight: bold;
text-align: center;
padding-top: 2px;
margin: 0;
}
a div{
background-color: black;
width: 280px;
height: 30px;
border-radius: 0 0 10px 10px;
}
<div>
<a href="#">
<img src="https://placeimg.com/280/200/any">
<div>
<h2>Bees</h2>
</div>
</a>
</div>
I want to place the two boxes at the bottom of link, the both article-boxes (div.content), side by side like you see, but without the big distance between them. How to fix this?
Here is relevant code :
div.content {
text-align: justify;
color: #939393;
padding: 25px 90px;
margin: 0px auto 45px;
width: 960px;
border: 2px solid #F27F0E;
}
<div class="content-small" style="float: left;">
<h2></h2>
<ol class="posts"></ol>
</div>
<div class="content-small" style="float: right;">
<h2></h2>
<ol class="posts"></ol>
</div>
Using inline styles (putting the style tag inside of the element) is never a good thing, it's best practice to keep everything in a separate stylesheet and a lot more practical too.
In regards to your question you pretty much have the code already in your stylesheet, just remove the inline styles and put the both divs inside of a parent div.
HTML:
<div class="content-bottom">
<div class="content-small"></div>
<div class="content-small"></div>
</div>
Now we just need to add a little css to center everything with your current layout.
CSS:
.content-bottom {
margin: 0 auto;
width: 1144px;
}
You're probably going to want to adjust the widths and margins for the content-small classes now to your preference.
Hope this helps!
You need to apply float left to both boxes and set your margin-right to appropriate value.
delete style from this :
<div class="content-small" style="float: left;"></div>
<div class="content-small" style="float: right;"></div>
so that they become :
<div class="content-small"></div>
<div class="content-small"></div>
and then change your css like this:
div.content-small {
text-align: justify;
color: #939393;
padding: 25px 50px;
margin: 0px auto 45px;
width: 450px;
border: 2px solid #F27F0E;
float:left; /* add this */
margin-right:40px; /* add this and change value acc */
}
You can also try placing margin on each box separately to achieve your desired result
How about adding an enclosing div around the two article boxes like below. Setting its width to 1144px matches with the total width of the content boxes above.
<div style="width: 1144px; margin: 0 auto 0 auto">
<div class="content-small" style="float: left;">
...
</div>
<div class="content-small" style="float: right;">
...
</div>
</div>
create a wrapper for these 2 div
<div class="wrapper-new" style="margin:0 auto; width:...px;">
<div class="content-small" style="float: left;">...</div>
<div class="content-small" style="float: right;">...</div>
</div>
![enter image description here][1]
This is how you need to do it. The bottom two article boxes should be inside a div with fixed width 1144px and both content-small should be float:left, 2nd one with a margin-left:36px;
That's it! Run the code snippet in Full page and you can see your desired result.
NB: I've removed jQuery from the snippet. If you find my answer useful please mark it as accepted. Thanks! :)
body {
font-family: Arial, sans-serif;
font-size: 16px;
color: #fff;
background: #1A1A1A;
}
div.content {
text-align: justify;
color: #939393;
padding: 25px 90px;
margin: 0 auto 45px auto;
width: 960px;
border: 2px solid #F27F0E;
}
div.bottom-content {
padding: 25px 0;
margin: 0 auto 45px auto;
width: 1144px;
}
div.content-small {
text-align: justify;
color: #939393;
padding: 25px 50px;
margin: 0;
width: 450px;
border: 2px solid #F27F0E;
}
a {
text-decoration: none;
color: #6B6B6B;
}
a:hover {
border-bottom: 1px dotted #F27F0E;
}
dt {
font-weight: bold;
display: block;
float: left;
width: 150px;
color: #bbb;
}
img {
border: 1px solid rgba(51, 51, 51, 0.1);
}
div.date {
width: 100px;
padding-bottom: 14px;
margin-left: -120px;
float: left;
}
div.date p {
padding: 5px 10px;
margin-bottom: 0;
text-align: right;
font-family: Arial, sans-serif;
}
div.center {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
margin: 0 auto 45px auto;
}
.icon {
display: inline-block;
height: 64px;
width: 64px;
text-indent: -9999em;
margin: 0 1em;
}
#github {
background-color: #4183c4;
background-image: url(http://tekkkz.com/css/github.png);
}
#twitter {
background-color: #00aced;
background-image: url(http://tekkkz.com/css/twitter.png);
}
.posts,
.posts li {
list-style-type: none;
margin-left: 0;
padding-left: 0;
}
.posts li {
margin-bottom: 1em;
}
.title {
font-size: 1.2em;
}
.date {
font-style: italic;
font-size: 0.8em;
color: #bbb;
}
h1 {
font-family: Arial, sans-serif;
font-size: 3em;
font-weight: bold;
text-align: center;
color: #fff;
}
h2,
h3 {
font-family: Arial, sans-serif;
font-weight: bold;
margin: 10px 0;
color: #fff;
}
footer {
text-align: center;
font-size: 0.9em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="author" content="Martin Fischer">
<meta name="description" content="Personal Profile of Tekkkz (Martin Fischer)">
<meta name="keywords" content="pc, personal, profile, web, tekkkz, microcontroller, programming, gaming, avr, atml, s4, s4league, aeriagames, english, german">
<meta name="robots" content="FOLLOW,INDEX">
<title>Tekkkz - Personal Profile</title>
</head>
<body>
<header>
<h1>Tekkkz (Martin Fischer)</h1>
</header>
<div class="center">
Twitter
GitHub
</div>
<div class="content">
<h2>ABOUT</h2>
<dl>
<dt><img src="http://tekkkz.com/css/profile.jpg" alt="profile" height="135em" /></dt>
<dd>
<p>I am Martin Fischer, otherwise known online as Tekkkz. I am 17 years old and currently a student at the 'Winckelmann Gymnasium Stendal'.</p>
<p>My educational interests include mathematics and science, especially physics and chemistry. My extracurricular interests include everything that has to do with electronics, from simple soldering up to programming microcontrollers and develop complex
PCB's, general programming in C and C++ as well as linux and servers.</p>
<p>See my CV.</p>
</dd>
<dl>
</div>
<div class="content">
<h2>CONTACT</h2>
<dl>
<dt>Email</dt>
<dd>martin#Tekkkz.com</dd>
<dt>IRC</dt>
<dd>Tekkkz on Freenode</dd>
<dt>ICQ</dt>
<dd>ICQ Number: 612184097</dd>
</dl>
</div>
<div class="bottom-content">
<div class="content-small" style="float: left;">
<h2>ARTICLES</h2>
<ol class="posts">
<li>
“EUzebox with ATmega1284”
<span class="date">—February 06, 2015</span>
<br />
<span class="description">Instruction set to build an EUzebox with an ATmega1284</span>
</li>
</ol>
</div>
<div class="content-small" style="float: left; margin-left:36px;">
<h2>ARTICLES</h2>
<ol class="posts">
<li>
“EUzebox with ATmega1284”
<span class="date">—February 06, 2015</span>
<br />
<span class="description">Instruction set to build an EUzebox with an ATmega1284</span>
</li>
</ol>
</div>
</div>
</body>
</html>
I noticed my images are a couple pixels longer than the "Webinar" bar. How do I get the "Webinar" bar to be equal width to the images?
Here's my Jsfiddle:
http://jsfiddle.net/huskydawgs/0zfwf2dk/37/
Here's my HTML:
<div class="resources-box">
<div class="column-resources-box">
<img alt="Apples" height="73" src="http://www.hapadesign.com/images/apples.jpg" width="193" />
<h4 class="resources-bar">
WEBINAR</h4>
<p align="center"><strong>Apples</strong></p>
</div>
<div class="column-resources-box">
<img alt="Bananas" height="73" src="http://www.hapadesign.com/images/bananas.jpg" width="193" />
<h4 class="resources-bar">
WEBINAR</h4>
<p align="center"><strong>Bananas</strong></p>
</div>
<div class="column-resources-box">
<img alt="Orange" height="73" src="http://www.hapadesign.com/images/Oranges.jpg" width="193" />
<h4 class="resources-bar">
WEBINAR</h4>
<p align="center"><strong>Orange</strong></p>
</div>
<div class="column-resources-box">
<img alt="Pineapple" height="73" src="http://www.hapadesign.com/images/Pineapples.jpg" width="193" />
<h4 class="resources-bar">
WEBINAR</h4>
<p align="center"><strong>Pineapple</strong></p>
</div>
</div>
Here's my CSS
.resources-box {
padding: 8px;
background-color: #e2e3e4;
width: 100%;
padding: 20px 0;
overflow: hidden;
}
.column-resources-box {
width: 193px;
float: left;
margin: 15px;
font-size: 0.9em;
}
.column-resources-box img {
border: 1px solid #2251a4;
}
h4 {
font-family: Georgia,Helvetica,Arial;
font-size: 1.1em;
font-weight: normal;
margin: 1em 0 .6em 0;
}
h4.resources-bar a {
font-family: Georgia;
font-size: 11px !important;
color: #ffffff !important;
background-color: #2251a4;
padding-top: 4px;
padding-bottom: 4px;
text-align: center;
text-transform: uppercase;
display: block;
}
h4.resources-bar a:hover {
background-color: #f66511;
color: #fff !important;
}
That is because of the borders around the images.
If you remove the width from the column-resources-box class they will match, since the other elements will not be restricted to 193px
.column-resources-box {
/* width: 193px;*/ /*commented this line*/
float: left;
margin: 15px;
font-size: 0.9em;
}
Demo at http://jsfiddle.net/0zfwf2dk/38/
There are many things you can do to fix the width issue. But one easy way to make sure borders and padding stay within the width you set for your elements is to change the box-sizing to border-box. You can do it for your whole document. So for instance if you add a 2px border to a 190px width box, the overall width of the box with the border will by default show in the browser as 194px (adding left and right borders) and any padding will add to that as well. BUT if you use the border-box setting for box-sizing, the border and box and any padding will equal 190px. You can do this for all your elements in your code to be consistent:
* {
box-sizing: border-box;
}
Im working on a header for a website and i have a problem with search option.
I have include an input and a button tag.
Thoose have to have a vertical-align: middle; and should be side by side.
I've try something but it doesn't work.
Can somebody explain why and how i fix that?
HTML:
<div id="main_search">
<input id="main_search_input" type="text" placeholder="Suchen" />
<button id="search_button"><img src="search.png" width="20" style="border-left: 1px solid #D7D7D7; padding: 0 0 0 5px;" alt="" title="" /></button>
</div>
CSS:
#main_search {
float: right;
line-height: 60px;
margin: 0 50px 0 0;
}
#main_search_input {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
height: 20px;
line-height: 20px;
width: 200px;
vertical-align: middle;
padding: 5px 10px 5px 10px !important;
}
#search_button {
background-color: #FFF;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
height: 30px;
padding: 5px;
vertical-align: middle;
}
FIDDLE
input and button elements are inline elements, as such by separating them by a newline in your code, this is effectively interpreted and rendered as a whitespace character, leading to a gap appearing between them.
To solve this, add:
input, button{
margin:0;
}
Then remove the new line from between the elements in your HTML:
Demo Fiddle
<body>
<div id="main_search">
<input id="main_search_input" type="text" placeholder="Suchen" /><button id="search_button">
<img src="https://cdn1.iconfinder.com/data/icons/TWG_Retina_Icons/24/magnifier.png" width="20" style="border-left: 1px solid #D7D7D7; padding: 0 0 0 5px;" />
</button>
</div>
</body>
Alternatives
(also requiring setting no margins, per above)
Float the two elements so they push up against one another
Apply a font-size:0 to #main_search so the space has a width of zero