I am currently working on an About Me page, and I want the text box to set to the left of the screen and a picture to run inline with the text, but for some reason I can only get the picture to show up underneath. Could someone please tell me what I doing wrong? Thank you.
HTML
<div class="about_me">
<h2 class="about">about me</h2>
<p class="bio">I am a Front End Designer that hails from Cadillac, MI. I have a deep understanding on HTML and CSS, and love designing and coding websites. I enjoy taking your problems and turning them into solutions. Whether you need a simple logo or an entire website, I can get it done for you. </p>
</div>
<div class="family">
<img src="images/family1.jpg" alt="family">
</div>
CSS
.about_me {width: 500px;
height: auto;
border:none;
visibility: visible;
right: 0%;
opacity: 1;
}
.about {font-size: 45pt;
font-family: Zumba Fitness Official Typeface;}
.bio {font-family: arial;
font-size: 14pt;
}
.family {visibility: visible;
left: 0%;
opacity: 1;
}
.aboutme {float: left;}
Try that.
add display: inline-block; to the .about_me and .family classes both, and remove left and right properties from the both classes. also add 'float: left;' to the .about_me class.
You need to create class in left for image and right for text.
<div style="width: 100%">
<img style="float:right;">
Related
So right now I am trying to apply what I have learned in Front Web Development, and I have this problem where the text doesn't stay the way it should be in smaller viewports.
body {
font-family: "Roboto Condensed", sans-serif;
margin: 0;
background: #f2f2fc;
color: #302e4d;
}
.about-section {
position: absolute;
max-width: 100%;
top: 20%;
left: 40%;
transform: translate(-40%, -60%);
}
.about-me div {
font-size: 40px;
font-weight: bold;
}
.intro {
font-size: 30px;
padding-top: 50px;
font-weight: bold;
}
.intro-stud {
color: #E00;
}
.description {
color: #504e70;
font-size: 20px;
font-weight: normal;
}
<div id="main-content">
<section class="about-section">
<div class="about-me">
<div>About Me</div>
</div>
<div class="intro">
<span class="intro-name">I'm Christian Wells Martin and</span>
<span class="intro-stud">a Student</span>
<p class="description">Hi! My name is Christian Wells Martin, a BSIT/BSCS student in _____ College/University, and currently studying web development, and this website is my first mini-project, and I hope you guys will like it!.</p>
</div>
</section>
</div>
Recommendations are welcome, specially if I am doing some wrong practices.
There are a couple ways to solve this.
One, you're using percentages in your absolute positioning. Percentages will change as the size of the window changes. This can make for a nice effect, but it doesn't seem to be what you're going for. Try using exact pixel values if you don't want your text to react responsively. https://www.w3schools.com/cssref/pr_dim_width.asp
Another, more advanced way to solve this would be to use media queries. These allow you to define different css styles based on the current size of the screen. https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
.about-section{
display:grid;
grid-template-rows:auto, 1fr;
}
That should solve your problem. If it is not try this one:
.about-section{
display:flex;
flex-direction:column;
}
I'm attempting to place a 'notification' style badge over an images. I am using Twitters Bootstrap as a base framework and creating a custom CSS class called notify-badge. But I cannot get anything to line up properly.
Through the magic of Photoshop, here is what I am trying to accomplish.
Here is my CSS code.
.notify-badge{
position: absolute;
background: rgba(0,0,255,1);
height:2rem;
top:1rem;
right:1.5rem;
width:2rem;
text-align: center;
line-height: 2rem;;
font-size: 1rem;
border-radius: 50%;
color:white;
border:1px solid blue;
}
I would like to be able to place any small about of text in the badge and it expand the red circle to fit.
Here is my HTML code.
<div class="col-sm-4">
<a href="#">
<span class="notify-badge">NEW</span>
<img src="myimage.png" alt="" width="64" height="64">
</a>
<p>Some text</p>
</div>
Bunch of different ways you can accomplish this. This should get you started:
.item {
position:relative;
padding-top:20px;
display:inline-block;
}
.notify-badge{
position: absolute;
right:-20px;
top:10px;
background:red;
text-align: center;
border-radius: 30px 30px 30px 30px;
color:white;
padding:5px 10px;
font-size:20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-4">
<div class="item">
<a href="#">
<span class="notify-badge">NEW</span>
<img src="https://picsum.photos/200" alt="" />
</a>
</div>
</div>
Addendum (from the Asker #user-44651)
(moved from the question)
Here is the result of applying this answer.
Adding margin-top:-20px; to .item fixed the alignment issue.
The idea here is to overlay an absolute container on top of a relative one. Here's a similar example:
<div class="image">
<img src="images/3754004820_91a5c238a0.jpg" alt="" />
<h2>A Movie in the Park:<br />Kung Fu Panda</h2>
</div>
The CSS:
.image {
position: relative;
width: 100%; /* for IE 6 */
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
This is going to put our text right up on top of the image nicely, but it doesn't accomplish the box we want to achieve behind the text. For that, we can't use the h2, because that is a block level element and we need an inline element without an specific width. So, wrap the h2 inside of a span.
<h2><span>A Movie in the Park:<br />Kung Fu Panda</span></h2>
Then use that span to style and text:
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
For ideas on how to ensure proper spacing or to use jQuery to cleanup the code a bit by allowing you to remove some of the tags from the code and jQuery them back in, check the source.
Here's a fiddle I made with the sample code:
https://jsfiddle.net/un2p8gow/
I changed the notify-badge span into a div. I saw no reason it had to be a span.
I changed the position to relative. Edit - you could actually keep the attribute position: absolute; provided you know what you're doing with it. Guy in the comments was right.
You had the attribute right: 1.5rem; and I simply changed it to left because it was being inset in the opposite direction of your example.
You can tweak it further but in a vacuum this is what you want.
ETA: Thanks for all the help, everyone! These all worked beautifully. Thanks so much for your time!
I'm coding a newsletter (live preview here and my goal for it here) and am trying to get the navigation buttons ('Join Meet Learn Support') to sit about halfway down the logo. When I try top-margin in the navButtons class I'm not seeing any success. I suspect it's a display issue, but I'm not sure --- changing from inline to inline-block didn't really help.
<!DOCTYPE html>
<html>
<head>
<title>The Leaflet</title>
<style>
div
{
display: inline;
}
a
{
text-decoration: none;
}
p
{
text-align:left;
margin-left: 130px;
margin-right: 130px;
max-width: 600px;
}
#logo /* This sets the width for the New Leaf logo at the top. This should not change.*/
{
position:relative;
}
#navButtons
{
position:relative;
right:-240px;
}
#announcementImage
{
margin-left: 120px;
margin-right: 120px;
}
a.joinButton
{
margin-left:40%;
color:white;
background-color: #f7853e;
font-size: 30px;
}
a.navButton
{
color:#494541;
font-size: 22px;
}
</style>
</head>
<body>
<div id="logo"> <! --- Sets up the logo --->
<img src ="images/NLNewsletterLogo.png">
</div>
<div id="nav buttons"> <! --- Navigation Bar--->
<a class = "joinButton" href="url">Join</a>
<a class = "navButton" href="url"> Meet </a>
<a class = "navButton" href="url">Learn </a>
<a class = "navButton" href="url">Support </a>
</div>
<br>
<br>
<br>
<br>
<br>
<div id ="announcementImage"><! --- Lead Image-->
<img src="images/announcementGraphic.png">
</div>
<div id = "announcementText">
<p>Thrive Week is in full swing here at the Leaf. So far, we've had Sharon Perry, head of the State
College Area School District Career Center, help participants identify which of 34 traits,
including the special quality of woo, are strengths they employ in various settings so they can
work smarter. Then Anna Gokieli, owner of Tru Meditation and Yoga, got us staying present and
peaceful even in situations that often trigger stress. Will Snyder brought it home last night by
showing how making art and making money don't have to conflict.
Have a comment on a workshop you've attended or a session you'd like to see in our remaining
Design and Launch weeks? Galen would love to hear from you!</p>
</div>
</body>
Try this
#logo {
display: inline-block;
vertical-align: middle;
}
#nav {
display: inline-block;
vertical-align: middle;
width: 100%;
}
I think what your looking for is:
#logo {
vertical-align: middle;
}
Try adding bottom of something like 60px to div with id nav buttons.
Since this element is position: relative, it's placement can be controlled with left, right, top, bottom, like so:
#nav#buttons {
bottom: 50px;
}
Floating the logo left, and adding margin to the #nav will do the trick.
#logo { float: left; }
#nav {margin-top: 80px; width: 100%; display: inline-block; }
h1.title { clear: left; }
You're almost there. Inline-Block is what I'd use with absolute positioned nav, but you have a generic div {position:inline;} that applies to everything on the page inside of a div. You should be more specific for your logo and nav and just get rid of the generic styling by giving each a class like <div class="WHATEVER"> so you can target the div you want to work on.
Then try this:
#logo {
width: 240px;
display: inline-block;
#nav buttons {
margin: 0px 0px 0px 80px;
display: inline-block;
position: absolute;
top: 80px;}
Hey guys I am trying to make a page which is having six buttons. I want the caption under the image will slide in on mouse over event.I am using animate.css for this.
My problem is when I use <hr> tag my hover effect is not working. If I removed this Its working properly but I want to use both together.
I also tried <div> tag and border-top property of css but any element whichever I used in-between the caption and image will cause stop working hover effect.
I tried to change the size of image and increasing the padding but it is not working. Is there any idea that how to do it?
This is my html code:
<div class="btn-row">
<a href="domainSearch.html">
<div class="box-btn">
<img src="style/img/university.jpg" class="img"><hr class="caption-border">
<div class="caption animated slideInUp"> Institution</div>
</div>
</a>
</div>
This is my css:
.caption{
display: none;
text-align: center;
font-size: 1.5em;
color: $txt-lightgrey;
position: absolute;
margin: -10px 0px 0px -75px;
}
.img:hover + .caption{
display: inline;
}
Here is the example
Can anybody help me out?
Thanks in Advance!!
There is no .caption directly after .img.
Use ~ instead of +.
.img:hover ~ .caption {
display: inline;
}
https://jsfiddle.net/hwunxuy5/1/
I am new to css . I am trying to display my images in a perfect manner
here is my html code:
<div id="photos">
<h3>Photo title</h3>
<P class="like">Like </P>
<p class="date">date </p>
<div id="image">
<img src="something.jpg" />
</div>
<p class="about">about image goes here</p>
</div>
Now i want to style the same like this:
http://www.desolve.org/
If you want to make your image like that wall post i did it in below given fiddle link.
http://jsfiddle.net/zWS7c/1/
Css
#photos{
margin:10px;
border:solid 1px red;
font-family:arial;
font-size:12px;
}
#photos h3{
font-size:18px;
}
.date, .like{
text-align:right;
}
.about{
margin:10px;
}
#image img{
width:100%;
}
HTML
<div id="photos">
<h3>Photo title</h3>
<P class="like">Like </P>
<p class="date">date </p>
<div id="image">
<img src="http://www.desolve.org/_images/chicago_banner.jpg" />
</div>
<p class="about">about image goes here</p>
</div>
Live demo http://jsfiddle.net/46ESp/
and now set to according to your layout as like margin *padding* with or height
I think you need like this
http://jsfiddle.net/VwPna/
From http://www.w3schools.com/css/default.asp you learn easily... and also you can check other website css from firebug in your browser.
below code is that you given site css for banner class.
.banner {
background: url("../_images/gallery_banner.jpg") no-repeat scroll 0 0 transparent;
height: 350px;
margin-bottom: 4em;
overflow: hidden;
padding-left: 3.9%;
position: relative;
}
same way you can give more style their.
Here is the way it is made on the link you gave.
HTML:
<div class="banner">
<h1>We love urban photography</h1>
<p>
We’re betting you do to. Welcome to our site, a growing collection of galleries taken by a small group of passionate urban photographers. Visit our galleries, buy some of our prints, or drop us a line. While you’re at it, feel free to submit a gallery of your own.
<strong>Welcome</strong>
.
</p>
</div>
CSS:
.banner {
background: url("../_images/gallery_banner.jpg") no-repeat scroll 0 0 transparent;
height: 350px;
margin-bottom: 4em;
overflow: hidden;
padding-left: 3.9%;
position: relative;
}
.banner h1 {
color: #FFFFFF;
font-size: 2.2em;
letter-spacing: 0.1em;
padding-top: 290px;
}
.banner p {
background: none repeat scroll 0 0 rgba(123, 121, 143, 0.8);
color: #FFFFFF;
font-size: 1em;
height: 350px;
padding: 1% 1% 0;
position: absolute;
right: 0;
top: 0;
width: 21%;
}
You only need to translate that to your id's, classes and form, then you have it
There's nothing special that they've done on the reference web site. They've used the image as a background property of a div class="preview".
Here is the (x)HTML:
<section class="chicago">
<h2>Chicago</h2>
<p class="pubdate">
<time datetime="2011-04-24" pubdate="">April 2011</time>
</p>
<div class="preview"></div>
<p class="caption">Big wind, big shoulders. See a different side of Chicago.</p>
</section>
And the corresponding CSS
.chicago .preview {
background: url(../_images/sm_chicago_banner.jpg) no-repeat;
}
You can always sneak-peek by right mouse click on the website and choosing "View Page Source" or something similar, depending on your browser :)