On this page: www.incfilms.net/services, my goal is to make that Advertising and Consulting picture move to the right side of that paragraph.
The main page has:
<div class="serviceinfo">I am Not a Communist is now proud to offer a new range of digital video and media services to you and your business. We're calling it INC Pro.
<p>We are able to meet and focus with our clients on finding customizable solutions that are specific to their exact needs and objectives.
<p>We encompass the expertise and capabilities to create professional quality media; offering a number of services ranging from pre
through post production consultation, shooting and capturing, editing, color matching, audio leveling and digital mastering.
<p>Please contact us for a quote or more information at <?php echo $adminemail; ?> or call at <?php echo $phonenum; ?>.
</div>
<!--ADVERTISING AND CONSULTING LOGO -->
<div class="adconsul"><img src="media/advert.png" width="350" height="120"/></div>
And the CSS sheet has:
.serviceinfo {
width: 600px;
text-align: left;
clear: both;
color: white;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
}
.adconsul {
width: 350px;
float: right;
margin: auto;
color: white;
padding-bottom: 100px;
}
I probably shouldnt be using the float right, but is there a way I can get that picture to the right of the paragraph and keep the footer at the bottom? Thank you
Try putting a float: right in the .serviceinfo class
you'll want to use the following after floating divs
<div style="clear:both;"></div>
Related
I am trying to get to perfectly align a paragraph next to a text but I am struggling, can anyone help? Here is what I have:
#aboutme {
padding: 50px;
}
#aboutme img {
border-radius: 50%;
width: 150px;
vertical-align: middle;
}
#aboutme p {
font-size: 16px;
display: table-cell;
color: #212529;
}
.intro_link {
text-decoration: none;
color: #4a69bd;
}
.intro_link:hover {
color: red;
}
<section id="aboutme">
<div class="container">
<img src="./img/face.png">
<p>Welcome to my personal website! In here, you will find out everything about me. You can scroll down to discover more about my portfolio, my weekly activities or ways to contact me. Before doing so, I shall briefly introduce myself! I am a 20 year
old student studying at Concordia University in Montreal. Currently, I am in my 2nd year of education pursuing a Bachelors in Software Engineering. Up to now, my experience has been wonderful. I meet great people that share similar interests, my
network is growing day-by-day and I learn things that interest me. The ultimate goal right now is to graduate and this website will be used to explore everything I learn as I go. For my school assignments and personal projects, you can find them
in the portfolio section. If you are ever interested in checking out my other social etworks (GitHub, LinkedIn, etc...) or to contact me, you can go to the contacts section.
</p>
</div>
</section>
I would like to nicely align the paragraph and the image to make it nice and central but I am struggling to understand the properties, I started learning HTML & CSS yesterday
#aboutme{
padding: 50px;
}
#aboutme img{
border-radius: 50%;
width: 150px;
vertical-align: middle;
float:left;
padding: 0px 10px 10px 0px;
}
/*#aboutme p{
font-size: 16px;
display: table-cell;
color: #212529;
}*/
.intro_link{
text-decoration: none;
color: #4a69bd;
}
.intro_link:hover{
color: red;
}
<section id="aboutme">
<div class="container">
<img src="https://vignette.wikia.nocookie.net/fan-fiction-library/images/1/15/Admin.png/revision/latest?cb=20140917130743">
<p>Welcome to my personal website! In here, you will find out everything about me. You can scroll down to discover more about my portfolio,
my weekly activities or ways to contact me. Before doing so, I shall briefly introduce myself! I am a 20 year old student studying at Concordia University in Montreal. Currently, I am in my
2nd year of education pursuing a Bachelors in Software Engineering. Up to now, my experience
has been wonderful. I meet great people that share similar interests, my network is growing day-by-day
and I learn things that interest me. The ultimate goal right now is to graduate and this website will
be used to explore everything I learn as I go. For my school assignments and personal projects, you can find
them in the portfolio section. If you are ever interested in checking out my other social
etworks (GitHub, LinkedIn, etc...) or to contact me, you can go to the contacts section.
</p>
</div>
</section>
You can use flex to achieve this
Set display: flex to .container
Use align-items: start in .container so that the image will not
get stretched
Add margin-right to #aboutme img for spacing between image and
paragraph
#aboutme{
padding: 50px;
}
#aboutme img{
border-radius: 50%;
width: 150px;
vertical-align: middle;
margin-right: 10px;
}
#aboutme p{
font-size: 16px;
display: table-cell;
color: #212529;
}
.intro_link{
text-decoration: none;
color: #4a69bd;
}
.intro_link:hover{
color: red;
}
.container {
display: flex;
align-items: start;
}
<section id="aboutme">
<div class="container">
<img src="http://via.placeholder.com/500x500">
<p>Welcome to my personal website! In here, you will find out everything about me. You can scroll down to discover more about my portfolio,
my weekly activities or ways to contact me. Before doing so, I shall briefly introduce myself! I am a 20 year old student studying at Concordia University in Montreal. Currently, I am in my
2nd year of education pursuing a Bachelors in Software Engineering. Up to now, my experience
has been wonderful. I meet great people that share similar interests, my network is growing day-by-day
and I learn things that interest me. The ultimate goal right now is to graduate and this website will
be used to explore everything I learn as I go. For my school assignments and personal projects, you can find
them in the portfolio section. If you are ever interested in checking out my other social
etworks (GitHub, LinkedIn, etc...) or to contact me, you can go to the contacts section.
</p>
</div>
</section>
This is my first time here, so please go easy on me. I have been doing coding at university for a couple of months now in one of my modules, and am just finishing off a project and beginning to test it on different browsers. It all runs fairly smoothly apart for one page on Internet Explorer.
On the image below, you'll see that the text that is supposed to go underneath the 'Public Observing' and 'Meetings' section shifts to the edge of the screen and falls off in Internet Explorer.
I've been googling for over an hour now with no luck, I was hoping some of you geniuses will be able to assist me!
Here is some of my HTML and CSS regarding those elements. Thank you very much for shedding any light on this issue!
.observing {
text-align: left;
font-size: 30px;
width: 21%;
padding-bottom: 2%;
}
.observingp {
text-align: left;
font-size: 17px;
width: 40%;
align-content: left;
float: left;
}
.meetings {
text-align: left;
font-size: 30px;
width: 21%;
padding-bottom: 2%;
margin-left: 42.5%;
margin-top: -5%;
}
.meetingsp {
text-align: left;
font-size: 17px;
width: 30%;
align-content: left;
float: left;
margin-left: 3%;
}
<div id="activities-info">
<div id="public-observing">
<h4 class="observing">Public Observing</h4>
<p1 class="observingp">
Public Observing takes place at ‘The New Inn’ at Eccup (LS168AU). Sessions are held regularly during most months, however they stop over Summer when the sunset is too late. Start times vary according to the sunset, and inconsistent dates are due to avoiding
the full moon, which makes observing difficult.
<br><br> Please dress warmly, as observing takes place on an open field. Also, ensure that all children are supervised by a responsible adult. The Society cannot be responsible for accidents on the field.
</p1>
</div>
<div id="meetings">
<h4 class="meetings">Meetings</h4>
<p1 class="meetingsp">
Meetings are held on the second Wednesday of each month at the Quaker Meeting House (LS29DX) between 7pm and 10pm. Meetings usually involve a lecture or presentation of an astronomical topic given by guest speakers or society members. <br><br> Informal
meetings take place two weeks later, on Wednesdays. Here members have an opportunity to express and discuss their interests with personal presentations.
</p1>
</div>
</div>
i recommend to use normalize.css - it is a project to make all borwsers render pages consistently. Just include it as another css befoer your own css file and you will have silmilar results on all browsers.
https://necolas.github.io/normalize.css/
I've searched the forums but the only answers I'm getting cover issues about the font looking bold or having jaggedy edges.
My h1 #font-face font is displaying at the BOTTOM of my page in Chrome and Safari as of today. I have no idea why. It was fine before.
A good page example to look at is https://www.beatnikbreaks.com/about-us/ - have a look in Chrome and then in Firefox. Firefox displays it at the top as it should be.
Chrome loads it at the top first, then it suddenly jumps to the bottom.
My CSS for the font is:
#pagecontent h1{
margin-top: 0px;
color: #b9b9b9;
font-family: 'lucky_typewriterregular',Times,serif;
font-size: 40px;
font-weight: normal;
line-height: 44px;
letter-spacing: 1px;
margin-left: 0px;
float: left;
text-align: left;
width: 1000px;
}
The HTML is:
<div id="pagecontent">
<p></p>
<h1>About Beatnik Breaks</h1>
<h2>About Beatnik Breaks - Large luxury holiday short term rental in Brighton, ideal for holiday letting and stag & hen party accommodation</h2>
<p></p>
<p>We're a little bit shy... some details about us will follow. Or if there's something specific you want to know, then give us a call or <a class="highlight" href="contact-us">email us</a>...
</p>
<p></p>
</div>
I did update my Wordpress very recently, but I can't see why this would have suddenly done this.
Any help would be hugely appreciated
Thanks in advance
I think can be a problem realted to float, try to add float at pagecontent (the actual container of h1)
#pagecontent{
float:left;
}
I'm working on the CSS file for a beginner's Internet Programming course I am taking. The problem is that whenever I made the image in the section into a link, it screwed up the alignment with the rest of the section. I have a Nav List on the side above where this image is, and the Image and Link below it are aligning under the nav bar, while everything else below THAT are staying aligned.
Here is the code:
<p>If you click on the Personal link, you can browse my favorite Halloween pictures,
stories, and films. And if you join my email list, I will keep you up-to-date on
all things Halloween.</p>
<h2>Product of the Week</h2>
<a href="products/cat.html">
<img src="images/cat1.jpg" alt="20'' Deranged Cat">
</a>
<br>
20" Deranged Cat
<h2>My guarantee</h2>
<p>If you aren't completely satisfied with everything you buy from my site, you can return it
for a full refund.
<strong>No questions asked!</strong></p>
Here's the CSS:
/* Section */
section
{
margin: 20px 25px 25px 25px;
}
section h1
{
font-size: 150%;
margin-bottom: .5em;
margin-left: 200px;
}
section h1:first-letter
{
font-size: 250%;
}
section h2
{
font-size: 125%;
margin: .8em 0 .5em 0;
margin-left: 200px;
}
section p
{
margin-bottom: .5em;
margin-left: 200px;
}
/*Formatting for added Product of Week Request in Section 6 Bullet 4*/
/*Changed for Section 7, Bullet 3*/
section img a
{
margin: 300px;
}
section a
{
display: inline;
}
/* Footer */
Please tell me what I'm doing wrong!
Damann23, welcome to SO...to align items you have to get familiar with several properties such as
float:left;
display:inline;
I put your code in a fiddle and although it needs work, this coould give you an idea of how to start. But remember, organizing your code in sections (divs) it's always a smart thing to do instead of running everything in a sheet. That way you can manage these sections individually
DEMO
Not really sure what it is you are trying to do but if you are trying to have them both on the same line you could wrap the text in a span tag and place the image and text in the a tag like so...
check the updated fiddle js fiddle
<a href="products/cat.html">
<img src="images/cat1.jpg" alt="Cat">
<span>20" Deranged Cat</span>
</a>
Really simple question, how do I force a link to appear inline with a h2 heading?
I have the following code : http://jsfiddle.net/jezzipin/6DpPX/ and I'd just like the 'Back to top' link to appear inline with the 'Social Media' heading but everything I try doesn't seem to work. Even the use of spans.
Any help would be greatly appreciated.
jme1988
N.B. Just to be clear, this is the effect I am after:
Add this css
.b2t_link{
float:right;
margin-left:0;
}
.page_title{
display:inline-block;
vertical-align:top;
}
Demo
Apply the following styles:
.page_title{
font-size:18px;
font-family: Arial,Helvetica,sans-serif;
font-weight:400;
padding-left:16PX;
/*color:#053452; Dark Blue*/
color: #729ABD;
float:left; //Added float
}
.b2t_link{
float: right;
margin-left: 794px; //Reduced margin by width of page-title
font-family: 'FamiliarProBold',Arial,Helvetica,sans-serif;
font-size: 11px;
color: #729ABD;
}
.two_col_textAndImage_text{
width: 720px;
font-size: 11px;
display: block;
float: left;
padding-left: 5px;
padding-right: 5px;
padding-top: 10px;
min-height: 300px;
}
#main-content{
clear:both;
}
Then in the html wrap the image and text in a div with id main-content.
<div id="main-content">
<div class="two_col_textAndImage_text">
<h2 class="item_title_no_image">Social Media Integrations</h2>
<p class="item_text_no_image">
Social Media is fast becoming a channel for advertising, promoting and applying for vacancies. Some organisations have fully embraced this within their recruitment strategies whilst others have not yet or do not wish to adopt this trend. Whatever the view of your own organisation's recruitment channels, ATS2go has been designed to integrate seamlessly with social media. <br/><br/>
Social Media buttons, such as Facebook, Twitter and LinkedIn can be embedded within you vacancy postings enabling visitors to your site to forward a link to their friends and contacts about your vacancies. In addition, ATS2go includes automative "Job Tweets" for your vacancies which include a link back to your recruitment page; people simply click on the link within the Tweet and can then find out more about the role and hopefully submit their application immediately - simple, easy and free! <br/><br/>
</p>
</div>
<div class="two_col_textAndImage_image">
<img / src="https://text-development.ats2go.com/img/content_images/social-media.jpg" width="250px"/>
</div>
</div>
Example: http://jsfiddle.net/6DpPX/8/
You could put the link inside your h2.
http://jsfiddle.net/lollero/49VNH/1
Alternative view: http://jsfiddle.net/lollero/49VNH/1/show
HTML:
<h2 class="page_title">
Social Media
Back to top
</h2>
CSS:
.b2t_link{
float: right;
}