I am writing a simple CV which i am coding into a small web page to display my skills to possible employers. I am only 17 and hoping to get an apprenticeship in web development.
Now, my problem is, I have added an image of myself on the center of the top of the page and i'm trying to wrap my fore and surname on either side of the image. I have used a list for each name and then set their display to inline, and their list-style to none.
This image is what I am currently at.
This is what I want to achieve.
How will I go about doing this? I can provide the code is needed as its a fresh page.
EDIT: Yes, ill align the text properly once completed.
I PUT THE CODE LINKS IN THE IMGUR PICS AS I CANT POST > 2 LINKS.
You can get rid of the li and do it completely in a div with vertical-align:middle; like so:
HTML:
<div class="container">
Kieran<img src="http://i.imgur.com/2cEiTiu.jpg" height="150" width="150" />Rigby
</div>
CSS:
.container {
width:80%;
margin-right:auto;
margin-left:auto;
text-align:center;
}
img {
border-radius:50%;
vertical-align: middle;
padding-left:4em;
padding-right:4em;
}
Result: http://jsfiddle.net/codyogden/9mmteper/
Related
I am new in HTML & CSS. I learned web design using table tags. Now i am learning table-less design using div tags. I am now converting my old designed website to new one using div tags. I am having a problem in my design. I am posting table tag which is working fine and new code in div tag which is not accurate as old one. Kindly tell me where I am having mistake.
New design which is working fine:
Visit http://jsfiddle.net/rizwan1969/k4111Lzj/1/
New design which is not accurate as old:
Visit http://jsfiddle.net/rizwan1969/8vpyk815/
How can I achieve the same look without using tables?
you're sorta close, when you're using divs, you have to be careful of what you put on the outside divs, because they also hold true for the inner divs, so what you want is something like this:
#right_col {
width:260px;
/* padding:5px; */
background-color:#999900;
float:left;
line-height:18px;
font-size:12px; color:#FFFFFF; text-align:justify
}
#heading
{
font-size:16px;
color:#FFFFFF;
padding:10px;
background-color:#030;
display:block;
}
.content {
padding:7px;
}
and add a content div to separate the header from the text:
<div id="right_col">
<strong id="heading">QUAID'S MESSAGE</strong>
<div class="content">
<img src="images/quaid-2.jpg" align="left" style="margin-right:5px; border: 1px solid #006600; "/> "Pakistan is proud of her youth, particularly the students, who are nation builders of tomorrow. They must fully equip themselves by discipline, education, and training for the arduous task lying ahead of them."
</div>
</div>
heres the fiddle: http://jsfiddle.net/8vpyk815/2/
you also should be careful of all the random paddings cause they can make working with elements inside other elements difficult
I have a tile on my website that flips over when i hover over it. On the back of the first i attempted putting a button. The button hangs off of the bottom and im not quite sure how i can get it below the paragraph i have on the back of the tile. Also, i can't get the header of the tile centered. I tried using
text-align:center;
but that doesn't seem to work.
Here's the code i'm writing up. So if you run it and hover over the first black tile you'll see the text 'eternally rustled'. That's the problematic tile. Any help would be appreciated. Thanks.
I think I have your fix! Using what you gave us I just added two things to the "btile" portion of the CSS so it looks like the one below:
#btile {
width:350px;
text-align:center;
}
and to fix your header problem, I simply added width to the code below:
.webname {
width: 350px;//I added this
font:800 17px/17px"open sans";
color:#333;
text-transform:uppercase;
text-align:center;
border-top:1px dashed #888;
z-index:50;
position:absolute;
text-align:center;
}
Where does the width come from? It's the size of your picture! Just make sure the div width is the same size of the picture and you're set. Here is a JsFiddle that can show you exactly what I did! Let me know if it doesn't work! :)
I'm making a website for a extreme sports company for a school project, I want to showcase the sports by having a picture followed by some text in a container like element. I am relatively new to HTML and CSS.
Here is the HTML
<div class="sports" "spacing">
<img src="images/skydive.jpg" class="thumbnail" alt="" />
<p class="float" > Skydiving is one of those things everybody wants to experiance and is on many peoples bucket list. It is the ultimate thrill hurtaling towards the earth with no restrictions. We have a number of techniques avalible including Tandem, Static line and solo! </p>
</div>
And the CSS
.sports {
height:230px;
width:900px;
background-color:#f1f1f1;
margin-right:auto;
margin-left:auto;
margin-bottom: 20px;
display:table;
}
.thumbnail {
max-height: 200px;
margin-top:15px;
margin-bottom:15px;
margin-left: 15px;
display:inline-block;
}
.float {
text-align:center;
display:inline-block;
width:410px;
position:relative;
top:-71px;
padding-left:80px;
}
I've played around with these settings and they work for this one, But its specific to the image size and amount of text and i dont really wanna have to play around doing the same thing for another 6 different things.
Thanks
I'm not quite sure what you are trying to get, but probably easier way would be to give your image "float" option and remove float from the text (relative positioning should be unnecessary). When text is displayed inline it will use space around the image, respecting image margin.
I've a text as below is not aligning as vertical in the middle of icon.
How do I solve this, please?
align top http://www.kerrydeaf.com/ali.png
CSS:
#text{ color:#48c4d2; font-size:15px; font-family:opensansitalic;}
HTML:
<div class="blurb"><button class="blue_small" id="blue_small"></button> Available in video.</div>
UPDATE:
This should explain it.
align top http://www.kerrydeaf.com/ali2.png
You should be using a CSS background image and use padding-left: to move the text over, and use background-position: to adjust the position of the image. And if it's a link, use an A-tag, not a button.
Available in video.
No need to nest tags as you're doing.
Something like:
.videoBlurb {
display:block;
background-image:url(....);
background-repeat:no-repeat;
background-position:0px 0px;
padding-left:40px;
padding-top:20px;
color:#48c4d2;
font-size:15px;
font-family:opensansitalic;
}
Diodeus makes a good point and definitely has the most useful answer, but for the sake of curiosity without changing your markup - it should actually be this simple:
​button {
vertical-align:middle;
}
Of course, be more specific with the selector. Demo: http://jsfiddle.net/beV7j/2
I want to separate the image from the text of this RSS with CSS.
http://redbolivia.com/index.php?format=feed&type=rss
Any ideas? Can I do this with CSS?
How do I add CSS to a feed that is not mine
But I put CSS to the title and the info, but now I want to separate the image from the text because it's too close.
I did this:
.rss_item_header
{
font-size:14px;
font-weight:bold;
}
/* image try */
.rss_item.img
{
margin:7px;
}
.rss_item_info
{
color:#666;
font-size:11px;
text-align:justify ;
Because I dont want to show this feed where the images are next to the info http://redbolivia.com/index.php?format=feed&type=rss
I want to put a margin to this feed, the image is too near.
No. CSS is used for styling elements, not extracting them.
img {
margin: 5px;
}
..Will add a margin of 5px to all sides of all the images on the page. (You stated this isn't your feed.. Why do you need to change this?)