I am making a webpage with an image below a button, with a link next to it. When I added the image, the button and link shifted next to the image, I want them to stay above it. This is my code:
<div class="jumbotron-inner text-center">
<h2>Random Text</h2>
<a href"#" class="btn btn-info btn-large">Button</a>
<a href"#">Link</a>
<img src="img/image.png" alt="" />
</div>
Try this:
<div class="jumbotron-inner text-center">
<h2>Random Text</h2>
<div>
<a href"#" class="btn btn-info btn-large">Button</a>
<a href"#">Link</a>
</div>
<div>
<img src="img/image.png" alt="" />
</div>
</div>
Now it should work as you wanted
You can do it also using css-
a {
display:block;
}
Related
I am trying to change the <a href> link of "signup.php" to go from just being on the word NOW, to the whole <div>, so when a user hovers over anything inside of that div, the link will work:
HTML:
<div class="row">
<div class="grid-full containerHomepage">
<div class="centered">SIGN UP TO HEAD SMART<a class="noDecoration brain" href="signup.php"> NOW</a>
<img src="images/HeadSmart.png" width="50" height="60"/>
</div>
</div>
</div>
<a class="noDecoration brain" href="signup.php">
<div class="centered">SIGN UP TO HEAD SMART NOW
<img src="images/HeadSmart.png" width="50" height="60"/>
</div>
</a>
You can use onclick with javascript:-
<div onclick="location.href='signup.php';" class="centered">SIGN UP TO HEAD SMART NOW
<img src="images/HeadSmart.png" width="50" height="60"/>
</div>
Just style the anchor - (and move the nice icon to the left) ;)
.containerHomepage a { display:block}
.noDecoration { text-decoration: none }
<div class="row">
<div class="grid-full containerHomepage">
<a href="signup.php" class="centered noDecoration brain">
<img src="data:image/png;base64,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" width="50" height="60"/>
SIGN UP TO HEAD SMART NOW
</a>
</div>
</div>
So I have this code
<div class="row">
<a class="btn btn-default mainbutton pull-left">Back to Main Menu</a>
<img class="center-block" src="logo.png" />
</div>
It appears that the logo image is off-centered because it only takes the margin measurement after the button. How can I ensure that the button is aligned to the center?
You can put the button and the image in two different columns
Just like
<div class="row">
<div class="col-md-4">
//your button code
</div>
<div class="col-md-4">
//your image code
</div>
<div class="col-md-4">
//some other stuff
</div>
</div>
You could try a break in between like:
<div class="row">
<a class="btn btn-default mainbutton pull-left">Back to Main Menu</a>
<br/>
<img class="center-block" src="logo.png" />
</div>
After ensuring your image is positioned below your button, you should be able to follow the instructions in How to vertically align an image inside a div? if you need help aligning content inside a div.
I would break it up into 3 equal columns to make it easier.
Then you can use text-center:
<div class="row">
<div class="col-sm-4">
<a class="btn btn-primary">Back to Main Menu</a>
</div>
<div class="col-sm-4 text-center">
<img src="logo.png" />
</div>
<div class="col-sm-4"></div>
</div>
I try create a card with bootstrap+animate.css
PLEASE check with google chorme last version:
<div class="shop-card well">
<h3>title 1</h3>
<a href="/">
<figure class="figure">
<img class="figure-img img-fluid img-rounded" src="http://wewswiderska.home.pl/images/3dspace.html-i1.png">
</figure></a>
<div class="price">1234 <span class="symbol">R</span>
<del>5678</del>
</div>
<form class="hide buys" id="inform-ordering-5" name="inform-ordering-5" role="form" style="overflow: hidden;position: absolute;left:-1px;width: 100%; bottom: -1px;">
<div class="btn-group btn-group-justified">
<a class="btn btn-danger" data-target="#phoneModal" data-toggle="modal" href="#">modal</a>
</div>
</form>
</div>
I want When I move my mouse over the card, A red button appears. And then disappear.
ّI done it.
ّNow when I click on the button, It opens a modal box.
I done it!
But this is my problem:
when I close the modal box, contaners of card floats to left!
here is a demo: https://jsfiddle.net/1pyeg7w2/
I couldn't solved it.
I wrapped your div.shop-card.well content with another div with position:relative rule and it seems to be working
<div class="shop-card well">
<div style="position:relative">
your content here
</div>
</div>
I'm trying to create a responsive splash page, but it's not responding, no matter how much I try to manipulate it. What I'm mostly trying to do is fit the image with no margin or padding. I want it similar to Adele's mobile site. Also, I'm not sure if the code is clean and I'm naming the classes correctly. I created a codepen so you can check it out there.
<div class="featurette">
<img class="featurette-image img-responsive pull-left center-block" src="http://www.placehold.it/400/F84065/000" alt="#">
<div class="purchase-album">
<div class="album">
<img class="img-responsive" src="http://www.placehold.it/200/fa8ca2" />
<div class="lead">available now:</div>
</div>
<div class="space">
</div>
<p class="lead text-center available "></p>
<a href="#" target="_blank">
<button type="button" class="btn btn-default btn-lg outline" type="submit">iTunes</button>
</a>
<a href="#" target="_blank">
<button class="btn btn-default btn-lg outline" type="submit">loudr</button>
</a>
</div>
</div>
<div class="enter">
<button type="button" class="btn btn-default btn-lg outline" type="submit">
enter
</button>
</div>
</div>
Adeles page is a background image with the content displayed on top.
You can achieve this in many ways.
Try using this and playing about with the CSS to get everything in the desired place.
codepen here example
<header>
<div class="overlay">
<div class="header-content">
<div class="header-content-inner">
<h1>Your image here</h1>
<p>buttons here etc</p>
</div>
</div>
</div>
Shrink the page to see the responsive-ness
I'm a graphic design student, I am trying to do my portfolio, however not sure how to add a hyperlink to an icon that appears when you hover your mouse over a portfolio item. The item in code reads as div class="hoverIconChain"
<div class="portfolio-item html android">
<a href="portfolio-item-detail-page.html" class="animatedImage3">
<img src="images/portfolio02.jpg" alt="Portfolio 02">
<div class="hoverWrapperBg"></div>
<div class="hoverWrapper">
<div class="hoverIconChain"></div>
<div class="hoverIconHeart"></div>
<div class="hoverBottom">
<div class="hoverBottomText">Real Gamers Network</div>
<div class="hoverBottomLike"> 63 </div>
</div>
</div>
</a>
</div>
Delete the ending a tag from the bottom of your code, and move it after image.
<a href="portfolio-item-detail-page.html" class="animatedImage3">
<img src="images/portfolio02.jpg" alt="Portfolio 02">
</a>
To add a hyperlink to a div, just do it like this.
<a href="http://google.com">
<div class="hoverIconChain"></div>
</a>