Help - Search - Members - Calendar
Full Version: Staying inline two cupcake buttons
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
masonh928
So I finally got the cupcake buttons (thnx Charles), but I want them side by side; however, it's putting them below. I try the normal float and
also tried negative margins (just to see) but nothing is working, so anyways here is the HTML...

CODE

<!DOCTYPE Html>
<html>
<head>
<title>Bakery Template</title>

<link href="bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<meta name="Description" content="Bakery Theme">
</head>
<body>

<div id="LogoSection">
<div class="container">
<div class="row">
<div class="col-md-12">
<a href="/">
<div class="text-center logo">
<h1>A Tasty Delight</h1>
<span>Providing scrumptious treats since 1973&hellip;</span>
<!-----<img src="http://cdn.lookanimals.com/pictures/www.whatwhat.co.uk/whatblog/wp-content/2012/12/cake.jpg" alt="cake"> --->
</div>
</a>
</div>
</div>
</div>
</div>
<div id="Container">
<img src="http://www.patisserie-kieny.com/images/_content/ambiances_sucrees/entremets/Patisserie_Kieny-43.jpg" alt="Bakery" id="imgHeader" width="100%" height="450px">
</div>
<div id="Navbar">
<nav class="navbar navbar-default">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">Navigate</a>
          </div>
          <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Contact</a></li>
               <li><a href="#">Party Reservation</a></li>
                <li><a href="#">Reviews</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">More&hellip;<span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Calendar</a></li>
                  <li><a href="#">Menu</a></li>
                  <li><a href="#">Apply for Job</a></li>
                </ul>
              </li>
            </ul>
          </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
      </nav></div>
<div class="row">

<a href="#">
<div class="Container">
<img id="Image" src="http://downloadclipart.org/do-upload/clipart/2016-01/Animated_Cupcake_Clipart.png" alt="Order" />
<h2 id="Text">Order Now</h2>
</div>
</a>

<a href="#">
<div class="Container">
<img id="Image" src="http://downloadclipart.org/do-upload/clipart/2016-01/Animated_Cupcake_Clipart.png" alt="Order" />
<h2 id="Text">Get Directions</h2>
</div>
</a>

</div>
</section>
</body>
</html>


CSS:

CODE

html, body {
padding: 0px;
bottom: 0px;
background: url(http://40.media.tumblr.com/f7c7ef3596681268711fad3e3a5a6026/tumblr_nrp3yyAveA1u5sy0wo4_1280.jpg) no-repeat;
}

#LogoSection {
padding-top: 10px;
padding-bottom: 10px;
background-color: hotpink;
/* #FF7256 */
}

.logo h1 {
font-family: Brush Script MT, Comic Sans MS;
font-weight: 900;
color: #fff;
font-size: 6em;
}

.logo span {
font-family: Brush Script MT;
font-size: 35px;
font-weight: 350;
color: #fff;
}

a,
a:hover,
a:active {
text-decoration: none;
}
#Navbar {
background-color: #FF84BC;
}

#imgHeader {
border-top: 5px solid #636563;
border-bottom: 5px solid #636563;
}

ul li {
list-style: none;
display: inline;
}

ul li a {
-webkit-filter: grayscale(80%);
background-position: center;
font-size: 2em;
margin-left: 2px;
color: #fff;
font-family: Brush Script MT;
}

.logo img {
float: right;
width: 80px;
height: 80px;
}

.Container {
  height: 400px;
  width: 400px;
  position: relative;
  margin-left: 20px;
}
#Image {
  position: absolute;
  left: 0;
  top: 0;
  width: 200px;
  height: 200px;
}
#Text {
  z-index: 100;
  position: absolute;
  color: #636563;
  text-shadow: 3px 3px #fff;
  font-size: 28px;
  font-weight: bold;
  left: 29px;
  top: 50px;
}


Almost forgot my cupcake buttons !

http://pasteboard.co/1H4QKSql.png

My site: http://masonh-web.social-board.xyz/Cupcake-Theme/#
masonh928
BTW tell me whatcha think of the design, I'm trying to make it warm, welcoming, you know... But at the same time effective and responsive.
pandy
Well, they are each in a DIV and DIV is a block level element. So do something about that. Starting point: do they need to be in separate DIVs?

Also, you should resize those images in an editor and not downsize them with HTML.
masonh928
QUOTE(pandy @ Jun 15 2016, 06:53 AM) *

Well, they are each in a DIV and DIV is a block level element. So do something about that. Starting point: do they need to be in separate DIVs?

Also, you should resize those images in an editor and not downsize them with HTML.


Yeah, I know, but my editor crashed last night. Thanks, so should I do display inline ?
masonh928
Ok I used display inline block.
pandy
Why? smile.gif
masonh928
To make them side by side, since they're block level elements. You'd think by now after 5 years, I'd know that lol... Look now ! Tell me what you think ! smile.gif http://masonh-web.social-board.xyz/Cupcake-Theme/#
masonh928
Do you like the template so far? It's ont completely done, I just have to put the footer in. It's to show to one of my clients.
pandy
I think you don't know why you made them inline-block. And neither do I.
masonh928
3rd answer here -> http://stackoverflow.com/questions/5387392...vs-side-by-side
pandy
Yeah, yeah. By why is that better than just making them inline or simply not placing them in different DIVs to start with?
masonh928
Because they need their containers to keep the text overlaying.
pandy
OK, that explains the two DIVs.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2019 Invision Power Services, Inc.