I want my email and the word 'email' to align on the right. I understand my email will be longer on the left.
<div style="margin: 0 auto; overflow: auto;">
<div style="background: #000; height: 80px; width: 100%; overflow: hidden;">
<h1 style="font-family: Snell Roundhand, cursive; padding-left: 10px; color: white; float: left;">New Trend Photography</h1>
<div>
<div>
<p style="font-size: 14px; color: white; float: right; padding-right: 10px;">E-mail</p>
</div>
<br>
<div>
<p style="font-size: 20px; color: white; float: right; padding-right: 10px;">newtrendphotography23#gmail.com</p>
</div>
</div>
</div>
</div>
Nest elements into one parent element, and declare positioning and alignment rules as needed to the parent element.
<div style="margin: 0 auto; overflow: auto;">
<div style="background: #000; height: 80px; width: 100%; overflow: hidden;">
<h1 style="font-family: Snell Roundhand, cursive; padding-left: 10px; color: white; float: left;">New Trend Photography</h1>
<div>
<div>
<p style="font-size: 14px; color: white; float: right; padding-right: 10px; max-width: 35%;">E-mail: newtrendphotography23#gmail.com</p>
</div>
</div>
</div>
</div>
You can achieve it in two ways.
Firstly put both of them in one paragraph with float:right.
You can use text-align: right; to the <p> to get them right aligned.
<div style="margin: 0 auto; overflow: auto;">
<div style="background: #000; height: 200px; width: 100%; overflow: hidden;">
<h1 style="font-family: Snell Roundhand, cursive; padding-left: 10px; color: white; float: left;">New Trend Photography</h1>
<p style="font-size: 14px; color: white; float: right; padding-right: 10px; max-width: 35%; text-align: right;">
E-mail:
<br> newtrendphotography23#gmail.com
</p>
</div>
</div>
Inside the <p> use a <span> with float: right on the "E-mail:", so that it floats to the right inside the paragraph that is floating to the right.
<div style="margin: 0 auto; overflow: auto;">
<div style="background: #000; height: 200px; width: 100%; overflow: hidden;">
<h1 style="font-family: Snell Roundhand, cursive; padding-left: 10px; color: white; float: left;">New Trend Photography</h1>
<p style="font-size: 14px; color: white; float: right; padding-right: 10px; max-width: 35%;">
<span style="float:right">E-mail: </span>
<br> newtrendphotography23#gmail.com
</p>
</div>
</div>
No.1 is the better solution as the text is by default left-aligned and that is what is causing the issue, not that the text is not floating to the right.
<div style="margin: 0 auto; overflow: auto;">
<div style="background: #000; height: 80px; width: 100%; overflow: hidden;">
<h1 style="font-family: Snell Roundhand, cursive; padding-left: 10px; color: white; float: left;">New Trend Photography</h1>
<div>
<div style="font-size: 14px; color: white; float: right; padding-right: 10px;text-align:right">
<p>E-mail</p>
<p>newtrendphotography23#gmail.com</p>
</div>
</div>
</div>
</div>
Add style to one div only
Related
I'm new to HTML and CSS and have been following a course on them. One of the objectives was to try to make a rough basic copy of the visuals of any website we'd like in order to practice what we learned - so I picked the Gitlab front page.
Was progressing fine until I reached this 'Get Free Trial' div. My idea was to set the Get Free Trial div inside the outer div and center it. No matter what I do, however, there is always this margin/padding from the top that I can't get rid of and I have no idea why it is there.
#topbar {
height: 68px;
}
#adbar {
background-color: #9B51E0;
height: 60px;
}
#main {
background-color: white;
}
body {
margin: 0;
padding: 0;
}
#logo-div {
height: 68px;
width: 155px;
float: left;
}
#logo {
margin: 10px 20px 10px 20px;
width: 108px;
}
.menu-div {
width: 100px;
height: 68px;
float: left;
}
.menu-text {
text-align: center;
font-size: 90%;
font-weight: bold;
font-family: Arial;
color: #929292;
margin-top: 27px;
}
.menu-text:hover {
color: #9B51E0;
}
#search-div {
width: 530px;
float: left;
height: 68px;
}
#search {
float: right;
width: 13px;
margin-right: 25px;
margin-top: 25px;
}
#trial-div {
width: 140px;
background-color: burlywood;
float: left;
height: 68px;
}
#trial-button {
height: 70%;
width: 90%;
background-color: #FA7035;
color: white;
border-radius: 10%;
}
#trial-text {
text-align: center;
font-weight: bold;
font-size: 90%;
font-family: Arial;
margin-top: 10px;
margin-bottom: 25px;
}
<div id="topbar">
<div id="logo-div">
<img src="logo2.PNG" id="logo">
</div>
<div class="menu-div">
<p class="menu-text">Product</p>
</div>
<div class="menu-div">
<p class="menu-text">Solutions</p>
</div>
<div class="menu-div">
<p class="menu-text">Resources</p>
</div>
<div class="menu-div">
<p class="menu-text">Partners</p>
</div>
<div class="menu-div">
<p class="menu-text">Pricing</p>
</div>
<div class="menu-div">
<p class="menu-text">Support</p>
</div>
<div id="search-div">
<img src="search.png" id="search">
</div>
<div id="trial-div">
<div id="trial-button">
<p id="trial-text">Get free trial</p>
</div>
</div>
</div>
<div id="adbar">
</div>
<div id="main">
</div>
Any ideas and could I ask for an explanation of why this happens? Thank you!
If your final goal is to center the inner div (get free trial) inside outer div:
<div id="trial-div" style="display:flex;justify-content:center;align-items:center;">
#topbar {
height: 68px;
}
#adbar {
background-color: #9B51E0;
height: 60px;
}
#main {
background-color: white;
}
body {
margin: 0;
padding: 0;
}
#logo-div {
height: 68px;
width: 155px;
float: left;
}
#logo {
margin: 10px 20px 10px 20px;
width: 108px;
}
.menu-div {
width: 100px;
height: 68px;
float: left;
}
.menu-text {
text-align: center;
font-size: 90%;
font-weight: bold;
font-family: Arial;
color: #929292;
margin-top: 27px;
}
.menu-text:hover {
color: #9B51E0;
}
#search-div {
width: 530px;
float: left;
height: 68px;
}
#search {
float: right;
width: 13px;
margin-right: 25px;
margin-top: 25px;
}
#trial-div {
width: 140px;
background-color: burlywood;
float: left;
height: 68px;
}
#trial-button {
height: 70%;
width: 90%;
background-color: #FA7035;
color: white;
border-radius: 10%;
}
#trial-text {
text-align: center;
font-weight: bold;
font-size: 90%;
font-family: Arial;
margin-top: 10px;
margin-bottom: 25px;
}
<div id="topbar">
<div id="logo-div">
<img src="logo2.PNG" id="logo">
</div>
<div class="menu-div">
<p class="menu-text">Product</p>
</div>
<div class="menu-div">
<p class="menu-text">Solutions</p>
</div>
<div class="menu-div">
<p class="menu-text">Resources</p>
</div>
<div class="menu-div">
<p class="menu-text">Partners</p>
</div>
<div class="menu-div">
<p class="menu-text">Pricing</p>
</div>
<div class="menu-div">
<p class="menu-text">Support</p>
</div>
<div id="search-div">
<img src="search.png" id="search">
</div>
<div id="trial-div" style="display:flex;justify-content:center;align-items:center;">
<div id="trial-button">
<p id="trial-text">Get free trial</p>
</div>
</div>
</div>
<div id="adbar">
</div>
<div id="main">
</div>
Without being able to see everything, did you reset the styles from the browser? Each browser comes with a built in style sheet that has padding and margins. I recommend loading a reset.css stylesheet BEFORE your actual stylesheet. This will clear all browser styles. Make sure yours is second otherwise the reset will override yours.
Here is the reset styles I use:
https://meyerweb.com/eric/tools/css/reset/
I figured it out, it was the CSS code in my trial-text id. Putting margins there sets a margin in relation to the trial-div div and not the trial-button div. This forces the trial-button div to also apply a margin.
Not sure why exactly this happens and it doesnt apply a margin to the trial-button div though
I am using mPDF to create a PDF from the following HTML-Code:
<div style="border: 5px solid black; height: 115px;">
<div style="width: 29%; height: 115px; float: left; background-color: red;">
<img src="testimage.png"
alt="Bild 1" style="height: 115px;">
</div>
<div style="width: 55%; float: left; padding-top: 60px; font-size: 18px; font-weight: bold;">
SOME TEXT
</div>
<div style="float: right; width: 16%; font-size: 18px; padding-top: 10px;">
<div style="float: left; width: 25px;">ANOTHER TEXT</div>
</div>
</div>
The outcome in the PDF is rather unsatisfying:
The outcome
I am dealing with this weird space below the image. I tried giving the image a blue and the div a red background and it is always red, so the div is too high. It just ignores every fixed height I give. I already read about using display: top but none of it worked. What exactly is the problem here? On a HTML-Page everything is just fine.
Try adding width:100%; height:100%; object-fit:cover; to the image. Hope it works for you.
<div style="border: 5px solid black; height: 115px;">
<div style="width: 29%; height: 115px; float: left; background-color: red;">
<img src="https://via.placeholder.com/150"
alt="Bild 1" style="width:100%;
height:100%;
object-fit:cover;">
</div>
<div style="width: 55%; float: left; padding-top: 60px; font-size: 18px; font-weight: bold;">
SOME TEXT
</div>
<div style="float: right; width: 16%; font-size: 18px; padding-top: 10px;">
<div style="float: left; width: 25px;">ANOTHER TEXT</div>
</div>
</div>
I am trying to replicate the BBC News site and I have this weird styling problem.
Here is the image.
I always get this gap in between two of my divs.
Here is the code I used. Not sure how I am supposed to go about getting rid of that space. tried setting margin and padding to 0 but that didn't work.
Here is the code:
body{
margin: 0;
padding: 0;
font-family: Helvetica, Arial, sans-serif;
}
#topbar{
height: 40px;
width: 1000px;
margin: 0 auto;
background-color: #FFFFFF;
}
#logo{
float: left;
margin-top: 8px;
margin-right: 8px;
}
.topbarsections{
float:left;
border-left: 1px #CCCCCC solid;
height: 100%;
}
#signin-image{
float: left;
width: 30px;
margin-top: 7px;
margin-left: 8px;
}
#signin-text{
float: left;
font-weight: bold;
font-size: 90%;
color: #333333;
position: relative;
top: 13px;
padding-right: 80px;
}
.topbar-menu{
float: left;
font-weight: bold;
color: #333333;
font-size: 90%;
padding: 13px 15px 0 15px;
height: 27px;
}
#more-arrow{
height: 13px;
margin-left: 15px;
}
#search-box{
background-color: #E4E4E4;
margin: 8px 0 0 10px;
border: none;
font-weight: bold;
font-size: 14px;
padding: 5px;
width: 140px;
float: left
}
#magnifying-glass{
margin-top: 8px;
height: 26px;
}
.clear{
margin: 0;
padding: 0;
}
#news-bar{
background-color: #BB1919;
width: 100%;
height: 70px;
}
#inner-news-bar{
background-color: #BB1919;
margin: 0 auto;
width: 1200px;
height: 70px;
}
#news-bar h1{
color: white;
margin: 0;
padding: 10px;
font-weight: normal;
font-size: 45px;
}
#menu-bar{
background-color: #A91717;
width: 100%;
height: 35px;
}
#inner-menu-bar{
background-color: #A91717;
width: 1200px;
height: 35px;
margin: 0 auto;
}
.menu-bar-sections{
float: left;
border-right: 1px solid #BB4545;
padding-left: 10px;
padding-right:8px;
position: relative;
top: -5px;
}
.menu-bar-sections a{
float:left;
color: white;
text-decoration: none;
}
.menu-bar-sections a:hover{
text-decoration: underline;
}
#menu-bar-more-section{
border-right: none !important;
}
#down-arrow{
float: left;
height: 13px;
position: relative;
top: 2px;
margin-left: 2px;
}
#page-container{
width: 1200px;
margin: 0 auto;
}
h2{
}
<body>
<div id="topbar">
<img id="logo" src="images/bbclogo.png">
<div id="signin-div" class="topbarsections">
<img src="images/singin.PNG" id="signin-image">
<span id="signin-text">Sign in</span>
</div>
<div class="topbarsections topbar-menu">
News
</div>
<div class="topbarsections topbar-menu">
Sports
</div>
<div class="topbarsections topbar-menu">
Weather
</div>
<div class="topbarsections topbar-menu">
Shop
</div>
<div class="topbarsections topbar-menu">
Earth
</div>
<div class="topbarsections topbar-menu">
Travel
</div>
<div class="topbarsections topbar-menu">
More
<img id="more-arrow"src="images/more-arrow.PNG">
</div>
<div class="topbarsections">
<input id="search-box" type="text" placeholder="Search">
<input type="image" id="magnifying-glass" src="images/glass.PNG">
</div>
</div>
<div class="clear"></div>
<div id="news-bar">
<div id="inner-news-bar">
<h1>NEWS</h1>
</div>
</div>
<div class="clear"></div>
<div id="menu-bar">
<div id="inner-menu-bar">
<p class="menu-bar-sections">Home</p>
<p class="menu-bar-sections">Video</p>
<p class="menu-bar-sections">World</p>
<p class="menu-bar-sections">US & Canada</p>
<p class="menu-bar-sections">UK</p>
<p class="menu-bar-sections">Business</p>
<p class="menu-bar-sections">Tech</p>
<p class="menu-bar-sections">Science</p>
<p class="menu-bar-sections">Stories</p>
<p class="menu-bar-sections">Entertainment & Arts</p>
<p class="menu-bar-sections">Health</p>
<p class="menu-bar-sections" id="menu-bar-more-section">More<img src="images/down-arrow.PNG" id="down-arrow"></p>
</div>
</div>
<div class="clear"></div>
<div id="page-container">
<div id="main-article">
<h2>Technology</h2>
</div>
</div>
</body>
If by "gap" you mean the space above the heading "Technology", #Olivier Krull is right: that's the default margin of the h2 header.
You can simply add this CSS rule to set it to zero:
#main-article > h2:first-child {
margin-top: 0;
}
I have two blocks of text with colored background. I want them to sit next to each other and then be horizontally centered on the page but I can't get them to center on the page. Also I have to use inline styling because I am just coding on wordpress for work. Help!
<div align="center">
<div style="background-color: #526f87; width: 60%; float: left; height: 160px; " >
<p style="font-size: 40px; color: #b9cbea; letter-spacing: 2px; line-height: 110%; padding-top: 20px; padding-right: 20px; text-align: right;">YOU'RE NEEDED AT THE TOP </p>
<p style="font-size: 40px; color: white; letter-spacing: 2px; line-height: 110%; padding-bottom: 20px; padding-right: 20px; text-align: right;" ><strong>MEET US THERE</strong>
</p>
</div>
<div style="background-color: #526f87; width: 20%; float: left; margin-left: 10px; height: 160px;">
<p style="color: #ffffff; font-size: 20px;" align="center">22 ICF CEUs <br /><span style="font-size: 12px;">(12.17 Core Competencies / 10.25 Resource Development)</span></p>
</div>
</div>
In general, you should know that there is a trick for centering divs on the page. If you want to center some content, you know what its width will be, right? So you can use:
width: /* something */;
margin-left: auto;
margin-right: auto;
So for your code snippet, I recommend using flex if you're not targetting old browsers. I would do something like this:
<div style="display: flex; width: 80%; margin-left: auto; margin-right: auto;">
<div style="flex: 3">this is the larger div to the left</div>
<div style="flex: 1">this is the one that should fall on the right</div>
</div>
NOTE: My code keeps proportions with the ones in your code.
I created an unslider http://unslider.com/ using this HTML code
<div class="un-slider" dir="rtl">
<ul>
<li>
<div class="span6">
<blockquote class="testimonial">
<p>Hello world i m arbaz mateen. like a little programmer.</p>
</blockquote>
<div class="testimonial-arrow-down"> </div>
<div class="testimonial-author">
<img src="" border="0" width="50" height="50">
<p><strong>Huzaifa Khalid</strong><br><span>BSCS Student at Iqra University</span></p>
</div>
</div>
</li>
<li class="flex-active-slide" style="width: 100%; float: left; display: block;">
<div class="span6">
<blockquote class="testimonial">
<p>MeriTaleem helped me find the right information at the right time. I was looking for admission updates and wanted to know the process of how to apply for admissions.</p>
</blockquote>
<div class="testimonial-arrow-down"> </div>
<div class="testimonial-author">
<img src="" border="0" width="50" height="50">
<p><strong>Huzaifa Khalid</strong><br><span>BSCS Student at Iqra University</span></p>
</div>
</div>
</li>
and I get the this result
paragraph looks like this
CSS
blockquote.testimonial {
background: rgba(177,227,172,0.9);
color: #000;
font-family: Georgia, serif;
font-style: italic;
font-size: 1.2em;
line-height: 1.3;
width: 80%;
border-radius: 10px;
border: 0;
margin: auto;
padding: 10px 50px;
position: relative;
display: block;
}
blockquote.testimonial p {
margin: 15px;
width: 90%;
padding: 20px 50px 20px 20px;
}
blockquote.testimonial:before {
color: #000;
content: "\201C";
font-size: 80px;
font-style: normal;
padding-right: 15px;
float: left;
}
blockquote.testimonial:after {
content: "\201D";
color: #000;
font-size: 80px;
font-style: normal;
float: right;
margin-top: -60px;
}
I don't know what the problem is with <p> tag.
It appear as that because in your html dir="rtl" change it to ltr or just delete it
Your document have right to left text orientation and this is why there is dot in the beginning of the sentence. Your quotations are however in English and therefore should have left to right text orientation.
To achieve this add parameter dir="ltr" to both <blockquote>s.