I am new to Bootstrap. So far, I was able to customize the template I based my webpage on to what I want, but I am currently having trouble adding a carousel to the fourth page. I tried to google around for working codes using a carousel away from the top of the page, but I didn't find any except one having a separate page for it. It is not possible using Bootstrap on the same webpage? Here is the link to the web template I am struggling with: Software Landing Page
Thanks, lameemon. That was what I needed. I had the right div tags, but I just need to set a height for the carousel or the section is cut down in height.
I achieved that from the answer for this question:
<style>
.carousel .item {
height: 400px;
}
.item img {
position: absolute;
top: 0;
left: 0;
min-height: 300px;
}
</style>
Related
I'm trying to copy the twitter websites homepage but I have a problem with the side section scrolling.
This is the right side section I created/copied from twitter homepage right side section
and it won't stop scrolling until it reaches the max height of the page, I also tried setting the height/max-height to it's only true height (1308px) and it doesn't work.
I only use HTML and CSS by the way and does not want to put JS. Is there a solution using only HTML and CSS?
in your html:
<div id="footer">some elements here</div>
and in your css:
#footer {
position: fixed;
width: 100%;
bottom: 0;
}
I am using the reality wordpress theme, I am trying to display the actual image which is center focused in theme
Look this I have modified the css to
.iwp-property-gallery-slider-v1 .owl-item figure img {
position: relative;
width: auto;
max-width: 800px;
}
Here images are coming with extra white space at each end of the items. Any help would be highly appreciated.
autowidth isn't something that you can control with the css.
You need to enable it in the js with autoWidth:true
Check Documentation Here
Hey guys i have a HTML/CSS related question here...
I'm developing on a salesforce application, which makes me use this apex tag to put images in and I'm not really comfortable with using them. I am making print layouts at the moment for some forms that i've created. Everything worked fine until i had 2 images that i needed to style differently. I have 1 image in the header and 1 image that is a box within the form. Since i am styling the image in the header with some padding and centering among other stuff...the other box image wont show up as i go to print. So i was wondering if i can just separate the header image via a div tag. Here is what i have so far....
HTML:
<div class="logo_print"></div>
CSS:
.logo_print{
float:left;
padding-left: 40px;
width: 64px;
height: 86px;
background-image:url('../css_images/seal2.png');
}
So this is the header image i put in a div tag...did not work but if anyone has any thoughts/solutions that would be great....been trying out a bunch of diff ways with no progress. Thanks
EDIT:
So I've put new CSS in with some recommendations..so now i see it on my website but when i go to print the forms...the image does not show up :/
OH and i am using #media print to put the CSS in
Reason it's not working is because you haven't specified a height and width in your css.
Try This:
.logo {
background-image: url('http://pixelative.co/wp-content/uploads/2014/06/logo2.png');
width: 209px;
height: 52px;
}
<div class="logo"></div>
Here's a codepen of the working example.
Hope this answers your question.
Okay I am a bit confused here, I have recently started making templates for sale, and now usually responsive templates.
So I was making a new design that had a basic css of the following design:
* {
margin: 0;
padding: 0;
}
.container {
width: 100%;
height: 700px;
}
.main {
width: 66%;
float: left;
}
.side {
width: 33%;
float: right;
}
Okay so this is a basic code that shows that my template is a fluid template.
And when the browser resizes it gives the responsive effect, though we all know that it is not a responsive template.
My issue here is such, that I have used some css codes to relocate content when the browser is resized. meaning that the website is now responsive too.
First of all I do not know if this is allowed as a valid website? Do I need to change the width 100% to specific widths or there is no such rule?
Second, what would I call this type of website? Since I would be selling it on ThemeForest. I don't think there is such a website that can be called both Fluid Responsive Web Template. Or is there?
And last, not always, but there are times, when I notice that the browser overflows on x axis. The content in the .side never stays in limits of 33%. Does anyone know why this might be the issue? Ill try to make out an example for that.
Thanks.
better to use bootstrap
It got everything for responsive design...
To Download it .. Please here is the link
http://twitter.github.io/bootstrap/
I have a problem with my web site position, this is my CSS:
My web site: http://jsfiddle.net/maxspeed200/qYCUJ/5/embedded/result/
My CSS: http://jsfiddle.net/maxspeed200/qYCUJ/6/
The problem is: I have this two images one in header and the second in content & jquery slide show all this elements work good and I modified their position on my computer BUT when I take my website index to another computer all images move left or right (Pushed from its place)
And I work in my Dreamweaver in split view I create my design n n set my images in their places when I go to view my web site in browser (Mozilla/IE) I see my images not in same places I know it is a problem in CSS but how do I modify it?
If there in an absolute position element so give his parent position relative now give position: relative; to .container DIV. like this:
.container {
background-color: #CCCCCC;
height: 800px;
margin: auto;
position: relative;
width: 700px;
}