I'm trying to align some text (asterisk) in the middle of the image above.
I've set the css to align center, but it looks like it's off to the left a bit.
How do I align the text in the exact center of the square image above?
<div class="alignright">
<p>
<img alt="Sign up Today" height="259" src="http://i.ytimg.com/vi/rb8Y38eilRM/maxresdefault.jpg" width="300" /></p>
<p class="asterisk">
*Price for a single city. Multi-city, state<br>
and multi-state packages also available.</p>
</div>
<div class="circle">
<span class="number">1</span>
</div>
<h3>
Banana</h3>
<p>
A banana is an edible fruit, botanically a berry, produced by several kinds
of large herbaceous flowering plants in the genus Musa.</p>
<p> </p>
<div class="circle">
<span class="number">2</span>
</div>
<h3>
Orange is the colour of saffron, pumpkins and apricots.</h3>
<p>
Mobile phones, mobile broadband and home broadband in the Orange Shop. Plus the latest
news, entertainment, sport and lifestyle content from Orange.</p>
<p> </p>
<div class="circle">
<span class="number">3</span>
</div>
<h3>
Watermelon</h3>
<p>
We here at the National Watermelon Promotion Board have one goal: to increase
consumer demand for fresh watermelon through promotion, research</p>
jsfiddle:
http://jsfiddle.net/7bzc74qy/37/
It is being aligned to the center; you just have a left margin on your image that isn't on your asterisk.
Add those 49px to the asterisk and you're good to go.
.asterisk {
margin: 20px 0 0 49px;
}
JSFiddle
Related
I am trying to get the div with div class bioDiv to line up under the image but have tried so many things that I am just getting more and more confused can anyone look at the code for me and give me a clue? Looking to keep the same look just move the div to a more central location.
here is the code:
body {
width: 100%;
height: auto;
background-image: url("../img/marble-background.gif");
background-size: 100% 100vh;
}
img {
border: 10px solid #E3C640;
}
.menuDiv {
background-color: white;
height: 850px;
width: 300px;
margin-top: 70px;
border: 15px solid #E3C640;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 30px;
}
.bioDiv {
background-color: white;
height: 850px;
width: 1200px;
border: 15px solid #E3C640;
position: relative;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Welcome to Cary McClures' Portfolio</title>
<style type="text/css">
#import url("bootstrap-5.1.3-dist/css/bootstrap.css");
</style>
</head>
<head>
<body>
<img style="position: absolute; right: 600px; top: 68px
" src="../img/images/me.jpg" width="400" height="600" alt="picture of cary" />
<div class="menuDiv">
<h2 style="color: goldenrod">Home</h2>
<br>
<h2 style="color: goldenrod">Biography</h2>
<br>
<h2 style="color: goldenrod">Education</h2>
<br>
<h2 style="color: goldenrod">Graphic Design</h2>
<br>
<h2 style="color: goldenrod">Freelance</h2>
<br>
<h2 style="color: goldenrod">Baking</h2>
<br>
<h2 style="color: goldenrod">Photo Gallery</h2>
<br>
<h2 style="color: goldenrod">Resume</h2>
<br>
<h2 style="color: goldenrod">Contacts</h2>
<br>
<h2 style="color: goldenrod">Sitemap</h2>
</div>
<div class="bioDiv">
<br>
<h2 style="color: goldenrod">Biography</h2>
<p>Cary L. McClure is an enthusiastic Geneva-based Educator, Culinary Artist, Graphic Designer, and Overachiever with a decade-long background in leadership and customer service.
</p>
<br>
<p>Hailing from Indianapolis originally, Cary’s avid interest in the graphic arts started while he was in high school back in 1983. Unable to attend college, he wound up in the food industry.
</p>
<br>
<p>After working as a Pastry Chef for several years, Cary ultimately has had to alter his career path, due a disability he endured during his time in the military.
</p>
<br>
<p>Currently Cary has been working as a Substitute teacher (K-12) for Adams Central and South Adams Schools.
</p>
<br>
<p>Cary served as an Adjunct Instructor at Ivy Tech Community College, where he taught students about Cakes, Filling and Icings, Wedding Cake Production, and Classical Pastries.
</p>
<br>
<p>In 2019 Cary obtained his bachelor’s degree in Visual Communication (Graphic Design) from Indiana University. Furthermore, he holds an Associates of Applied Science degree (with honors) in Hospitality & Culinary Pastry Arts from Ivy Tech.
</p>
<br>
<p>Outside of his career, Cary L. McClure enjoys reading fantastical books, PS4 and Xbox One gaming, and crafting gum-paste flowers. An avid traveler, he also loves exploring new places and is seeking a position that will allow him to travel across
the country. Above all, he cherishes spending quality time with his family. He is the proud father of one married son.
</p>
<br>
</div>
</body>
</head>
</html>
I would suggest making two containers (an aside and a main) and put the navigation list in the aside and the image and bio in the main. Something like this:
.container {
display: flex;
}
<div class="container">
<aside>
<h1>Put your nav here</h1>
</aside>
<main>
<img src="" height="200" width="300" />
<div>
<h1>Put Bio here</h1>
</div>
</main>
</div>
PS: In case you didn't know, aside and main are semantic HTML5 tags used to markup a page. You can use divs instead of them, but it's not best practice
In Bootstrap you do not have to dictate the widths etc, it can all be done using standard Bootstrap CSS which you dictate as a class= in your HTML. So, for the image you could have that fluid inside a column.
<div class="col-sm-12 col-md-10 mx-auto">
<img src="../img/images/me.jpg" class="img-fluid" alt="picture of cary"/>
</div>
That's full width (12 wide) on small screens and not quite full width (10 wide) on anything larger but mx-auto should center the entire Div. Setting the image to class img-fluid makes it the full width of the Div no matter the screen.
Hopefully after that you can use exactly the same column set up for .bioDiv.
<div class="col-sm-12 col-md-10 mx-auto">
<h2 style="color: goldenrod">Biography</h2>
continued content here....
</div>
Ultimately you are just wrapping the image in a Div and setting both it and bioDiv to the same column parameters. It should not hurt in any way to set up menuDiv a similar way.
I am trying to reduce the width of a piece of text under an image that only takes up about 50% of the screen, so I've tried using style = width:50% but for some reason, the width stays the same. Here is the output I get. I want it so that the caption is neatly contained under the image. What am I doing wrong?
My code:
<div class="text-center">
<h1>Evelyn Lauder </h1>
<h5 class="font-italic"> 1936-2011</h5>
<img src=h ttp://i.telegraph.co.uk/multimedia/archive/02093/lauder_2093473b.jpg alt="Evelyn Lauder" </img> <br>
</div>
<div style= width: 50%; class="text-center font-italic">
<h7> "Evelyn Lauder was an Austrian American businessman who was well known for popularzing the pink ribbon associated with breast cancer awareness." </h7>
</div>
Your error would be revealed if you had used a validator.
<div style = width: 50%; class = "text-center font-italic">
Quotes around attribute values are required if the attribute value contains space characters.
<div style="width: 50%;" class="text-center font-italic">
NB: You have a number of other errors that the validator will point you towards.
Follow this piece of code.
<div class = "text-center">
<h1 >Evelyn Lauder </h1>
<h5 class = "font-italic" > 1936-2011</h5>
<img src = "http://i.telegraph.co.uk/multimedia/archive/02093/lauder_2093473b.jpg" alt = "Evelyn Lauder"> <br>
<div style="width: 50%;margin: 0 auto;"><h7 > "Evelyn Lauder was an Austrian American businessman who was well known for popularzing the pink ribbon associated with breast cancer awareness." </h7> </div>
</div>
Add style to div. Hope it helps.!
I think you are looking for this.
Apply display:inline-block to your caption text. That's it :)
<div class="text-center">
<h1>Evelyn Lauder </h1>
<h5 class="font-italic"> 1936-2011</h5>
<img src=http://i.telegraph.co.uk/multimedia/archive/02093/lauder_2093473b.jpg alt="Evelyn Lauder" </img> <br>
</div>
<h7 style="width:50%; display:inline-block; font-style:italic;" class="text-center"> "Evelyn Lauder was an Austrian American businessman who was well known for popularzing the pink ribbon associated with breast cancer awareness." </h7>
I'm trying to figure out how to both place a caption beneath a picture and move text down. I'm trying to move the text that contains the second unorganized list down.
The figcaption with the text "Crazy Baby" appears on the top right of the picture it's supposed to be under. My understanding was figcaption would accomplish that although I'm clearly doing something wrong.
<div class="container">
<div class="jumbotron">
<div class="text-center">
<h1>The Golden Babies of 3 Orchard Lane</h1>
<p style="font-size: 30px;"><em>The Snady and Baby Maya</em></p>
<img src="http://oi63.tinypic.com/2ijkend.jpg" alt=" haha, sucks" class="Sandy">
<figcaption> <em>Snady Babushka</figcaption> </em>
<font size="5">
<ul>
<strong> Sandy loved</strong>
<li>Her red ball</li>
<li>Hiding in her jungle</li>
<li> Crossing her paws in an X</li>
<li> And most of all her big brother, Jonah </li>
</ul>
</font>
<br>
</div>
<img src="http://oi68.tinypic.com/8yb2f4.jpg" align="left" alt="I'm so sorry you can't see my baby face" class="Maya">
<figcaption><em>Crazy Baby</figcaption></em>
<font size="5">
<ul id="cap">
<div class="text-center">
<strong>Maya Loves</strong>
<li>Tennis balls</li>
<li>People more than dogs</li>
<li>Greeting someone as they enter the house</li>
<li> And of course, her big brother, Jonah</li>
</ul>
</div>
</font>
</div>
</div>
Without seeing your CSS, this is what I'd recommend trying. First thing I would do it make sure you tags are placed in the correct order. In your unordered list, you have the div starting inside the tag, but ending outside of it.
<ul id="cap">
<div class="text-center">
<strong>Maya Loves</strong>
<li>Tennis balls</li>
<li>People more than dogs</li>
<li>Greeting someone as they enter the house</li>
<li> And of course, her big brother, Jonah</li>
</ul>
</div>
Should look like this
<div class="text-center">
<ul id="cap">
<strong>Maya Loves</strong>
<li>Tennis balls</li>
<li>People more than dogs</li>
<li>Greeting someone as they enter the house</li>
<li> And of course, her big brother, Jonah</li>
</ul>
</div>
Then what you can do it with that div, give it a certain width, say the width of the image. Then float both the image and the list, left.
.text-center {
width: 100px; (Just an example)
}
.text-center img,
.text-center ul {
float: left;
}
I've tried to modify background image of a div ...
<div class="uk-grid" data-uk-grid-margin>
<div class="uk-width-medium-1-1">
<div class="uk-vertical-align uk-text-center" style="background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjQsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkViZW5lXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTEzMHB4IiBoZWlnaHQ9IjQ1MHB4IiB2aWV3Qm94PSIwIDAgMTEzMCA0NTAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDExMzAgNDUwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxyZWN0IGZpbGw9IiNGNUY1RjUiIHdpZHRoPSIxMTMwIiBoZWlnaHQ9IjQ1MCIvPg0KPC9zdmc+DQo=') 50% 0 no-repeat; height: 450px;">
<div class="uk-vertical-align-middle uk-width-1-2">
<h1 class="uk-heading-large">Games are life, games are love.</h1>
<p class="uk-text-large">If you are a trully gamer and a lover of fps/moba/rpg you are in the right place. We are a big community of gaming, we sell games and help you to get the latest ones you would like to have.</p>
<p>
<a class="uk-button uk-button-primary uk-button-large" href="#">Button</a>
<a class="uk-button uk-button-large" href="#">Button</a>
</p>
</div>
</div>
</div>
</div>
This <div class="uk-vertical-align uk-text-center" it's the div i need to modify.
If i replace background: url with background-image: url() it doesn't work, i have the image i want in folder images where website is placed.
Any idea what could I do ? i searched this problem .. i tried a lil bit with CSS in uikit.css, nothing works.
Thank you in advance for your time and help.
Nothing is wrong, it's work just see this snippet with black body.
Your data image it's just a color, no content.
If you want to call image in a folder try to make
background: url('./folder/path_to_your_img')
body{
background-color: #000;
}
<div class="uk-grid" data-uk-grid-margin>
<div class="uk-width-medium-1-1">
<div class="uk-vertical-align uk-text-center" style="background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjQsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkViZW5lXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTEzMHB4IiBoZWlnaHQ9IjQ1MHB4IiB2aWV3Qm94PSIwIDAgMTEzMCA0NTAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDExMzAgNDUwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxyZWN0IGZpbGw9IiNGNUY1RjUiIHdpZHRoPSIxMTMwIiBoZWlnaHQ9IjQ1MCIvPg0KPC9zdmc+DQo=') 50% 0 no-repeat; height: 450px;">
<div class="uk-vertical-align-middle uk-width-1-2">
<h1 class="uk-heading-large">Games are life, games are love.</h1>
<p class="uk-text-large">If you are a trully gamer and a lover of fps/moba/rpg you are in the right place. We are a big community of gaming, we sell games and help you to get the latest ones you would like to have.</p>
<p>
<a class="uk-button uk-button-primary uk-button-large" href="#">Button</a>
<a class="uk-button uk-button-large" href="#">Button</a>
</p>
</div>
</div>
</div>
</div>
Try This this will help you.
.uk-vertical-align{
background-image:url("https://zellox.com/wp-content/uploads/2016/02/background-image-in-html.jpg");
height: 450px;
}
<div class="uk-grid" data-uk-grid-margin>
<div class="uk-width-medium-1-1">
<div class="uk-vertical-align uk-text-center">
<div class="uk-vertical-align-middle uk-width-1-2">
<h1 class="uk-heading-large">Games are life, games are love.</h1>
<p class="uk-text-large">If you are a trully gamer and a lover of fps/moba/rpg you are in the right place. We are a big community of gaming, we sell games and help you to get the latest ones you would like to have.</p>
<p>
<a class="uk-button uk-button-primary uk-button-large" href="#">Button</a>
<a class="uk-button uk-button-large" href="#">Button</a>
</p>
</div>
</div>
</div>
</div>
write Your image path instead of (https://zellox.com/wp-content/uploads/2016/02/background-image-in-html.jpg)
I am trying to make a page by only using html , as i am new to html what i tried is
<div id="container" style="width:400px">
<div id="header" style="background-color:#0000;">
<h1 style="margin-bottom:0;">Box Office</h1>
</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
<p>
<a href="http://www.imdb.com/title/tt1170358/?ref_=hm_cht_t1" target="_blank" >1. The Hobbit: The Desolation of Smaug $31.5M </a>
</p>
<p>
<a href="http://www.imdb.com/title/tt1229340/?ref_=hm_cht_t2" target="_blank" >2. Anchorman 2: The Legend Continues $26.8M </a>
</p>
<p>
<a href="http://www.imdb.com/title/tt2294629/?ref_=hm_cht_t3" target="_blank" >3. Frozen $19.6M </a>
</p>
<p>
<a href="http://www.imdb.com/title/tt1800241/?ref_=hm_cht_t4" target="_blank" >4. American Hustle $19.1M </a>
</p>
<p>
<a href="http://www.imdb.com/title/tt2140373/?ref_=hm_cht_t5" target="_blank" >5. Saving Mr. Banks $9.34M </a>
</p>
</div>
Which make something like this
Now i want to start my next phase in the same flow but i want to start from the empty space after this block like in tha landscape flow , What i need to do so that my next part will start after it , i don't want to use the new line for next thing i want to enter
Reuired output
Now i want that when i start my new block it should start from after the first block like it shuld start from where i write "Now i want this"
Does this solve your problem?
Are you trying to float the 2 container divs side-by-side in landscape?
<div id="container" style="width:400px">
<div id="header" style="background-color:#0000;">
<h1 style="margin-bottom:0;">Box Office</h1>
</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:600px;float:left;">
<div style='width: 50%;display:inline-block;float:left;'>
<p> 1. The Hobbit: The Desolation of Smaug $31.5M
</p>
<p> 2. Anchorman 2: The Legend Continues $26.8M
</p>
<p> 3. Frozen $19.6M
</p>
<p> 4. American Hustle $19.1M
</p>
<p> 5. Saving Mr. Banks $9.34M
</p>
</div>
<div style='width: 50%;
display:inline-block;
float:left;background:#ddd;height:100%; '>
<h2>Now I want this</h2>
</div>
</div>