Reputation: 194
I have recently installed and modified a certain template on my wordpress blog. All of the modifications are very simple(removing divs I didn't want), but please consider the fact that I know next to nothing about webdesigning.
Like I explained in my previous question, I am trying to display two buttons side by side, each of them linking to a specific page in my website.
My first setback was trying to get them to display, since the template parsed clear-text instead of converting a short-code into a button (I'm using a plugin called MaxButtons - for those who don't know it, it makes the creation and management of buttons simpler). Thankfully I overcame it with the help of a stackoverflow member, who told me to use the do_shortcode function. Right now, my code looks like this:
<div class="slider-wrapper">
<div class="full_content">
<center>
<h1></h1><h1></h1>
<h2></h2>
<p></p>
<p></p>
</center>
</div>
</div>
My most recent problem and the reason why I am asking this question is, how can I get the buttons to display side by side? At the moment, button2 just shows in front of button 1, which is obviously unwanted. They show up like this:
I figured I should post the part of my style-sheet that refers to that specific part of the website (I am actually not sure if this is it..)
/*=====Slider-Style Start
========================================*/
.slider-wrapper {
width:950px;
height:400px;
background:url(images/slide-shaddow.png) 85px 334px no-repeat;
margin-bottom:0px;
}
#container {
width:581px;
margin:0 auto;
position:relative;
float:left;
z-index:0;
background-color:#fff;
}
#example {
width:581px;
height:333px;
position:relative;
margin-left:0;
background-color:#fff;
}
#frame {
position:absolute;
z-index:0;
width:739px;
height:341px;
top:-3px;
left:-80px;
}
/*
Slideshow
*/
#slides {
position:absolute;
top:15px;
left:0px;
z-index:10;
background-color:#fff;
}
.slides_container {
width:581px;
overflow:hidden;
position:relative;
display:none;
background-color:#fff;
}
.slides_container div.slide {
width:581px;
height:325.4px;
display:block;
background-color:#fff;
}
.slides_container div.slide img, .slides_container div.slide iframe{
width:581px;
height:325.4px;
}
/*
Next/prev buttons
*/
#slides .next {
position:absolute;
top:107px;
right:-220px;
width:24px;
height:43px;
display:block;
z-index:101;
}
#slides .prev {
position:absolute;
top:107px;
left:-25px;
width:24px;
height:43px;
display:block;
z-index:101;
}
#slides .next {
left:585px;
}
/*
Pagination
*/
.pagination {
margin:26px auto 0;
width:100px;
position:absolute;
left:25px;
bottom:-25px;
z-index:9999999px;
}
.pagination li {
float:left;
margin:0 2px;
list-style:none;
}
.pagination li a {
display:block;
width:13px;
height:0px;
padding-top:13px;
background-image:url(images/pagination.png);
background-position:0 0px;
float:left;
overflow:hidden;
}
.pagination li.current a {
background-position:0 -13px;
}
.slider-info {
margin-top:15px;
padding-top:25px;
padding-left:23px;
padding-right:20px;
height:299.3px;
width:326px;
float:right;
border-top:1px dotted #888;
background-color:#fff;
}
.slider-info h1 {
font-size:26px;
line-height:35px;
margin-bottom:30px;
}
.slider-info p {
line-height:24px;
text-shadow: .1px .1px .1px #aaa;
font-size:14px;
}
/*=====Slider-Style End
========================================*/
Any help is appreciated, thank you in advance :)
Upvotes: 2
Views: 6038
Reputation: 1000
display: inline-block
is a good way to accomplish this. It can be styled like a block-element but doesn't force a line-break.
Since you are using a shortcode to display the button markup we can not help you with the exact css rules. I guess however that it will output something like this:
<p>This is a button: <a href="/1" class="button">Button</a>
<a href="/2" class="button">Button</a>]</p>
or this:
<p>This is a button: <button class="button">Button</button>
<button class="button">Button</button></p>
In either case you would add display: inline-block; to the class that is targeting the button element:
.button {
display: inline-block;
/* add more crazy CSS3 stuff like rounded corners and gradients... */
}
The result would be two buttons sitting next to each other in the same line.
Further reading: http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/
Upvotes: 1