I am working on a landing page, and this is how it looks at the moment: https://a00baa69ca400642fad5c0cead23ef741b6473f7.googledrive.com/host/0B9XEA2QvXeaQZmdGcW1kVk9Kajg/main.html
Here is the wireframe: http://static.squarespace.com/static/52228ba5e4b02da2a90a906c/t/529bc6f9e4b09eb80192c1ae/1385940737162/Good%20Collab.jpg?format=1000w
For the landing page, I was able to get the three photos to align regardless of the width of the viewer's monitor size by setting up max-width and margin to auto.
** Here is the CSS used for the three photos:**
.three-containers {
max-width: 1080px;
margin: auto;
display: block; }
However, I wasn't able to set the section below the three photos to center side by side (i.e. the How it Works part and the form). I tried applying similar code as I did to the three photos - I set a div up for each of them (one div for How it Works and another for the form)
div class="two-texts" for the HOW IT WORKS PART and another div class="two-texts" for the FORM PART
and CSS:
.two-texts {
max-width: 900px;
margin: auto;
display: block;
clear:left;
}
Problem is now the form is aligned under the How it Works part when I actually want it side by side with the How it Works part (see link to wireframe at top).
Can anyone point out what the issue might be? Thanks.
Welcome to StackOverflow!
In HTML, some elements default to stacking horizontally and some vertically. divs are designed to stack vertically by default because they have their display property defaulted to block. Try the following CSS style to see what happens to the three divs with images:
.three-containers > div {
display: inline-block;
max-width: 300px;
}
(the max-width is there because of the images those divs contain)
Similarly, to make the two divs stack horizontally, try the following CSS:
#bodytext, .form {
display: inline-block;
}
Let me know if that helps you get on the right path!
Related
I'm making a website using fullPage.js, On the second page (or equivalently, second section) I want to achieve a very simple layout where I have a header fixed on top of the page displaying an image which should be responsive, or decreases in size as the window shrinks but stays at the top.
Currently, I'm wrapping the image to be displayed in a div. I then scale the div fullscreen using,
.post-header {
background: #22BDA0;
max-width: 100%;
height: auto;
}
The img tag inside of the div has a class header-image which I style as,
.post-header .header-image {
max-width: 100%;
height: auto;
margin: 0;
}
However, I'm not getting the desired result. There is a small space on top of the second page which I can't get rid of. You can see the website I'm making along with the source code HERE. Just scroll down to second page, or click Personal Details on the homepage.
Thanks a lot for the help!
What if you just give height:100%; to .section2-container? Will it solve your issue?
Remove display: table-cell; from .fp-tableCell and the padding disappears. Does this need to have display set to table-cell?
fullPage.js has an option: verticalCentered that can be set to false. This seems like a good solution, since the alternative means always trying to ensure that the content of the containing element is always 100%.
I am using #media queries to adjust the content of the website when the window size is changed. I have currently have 2 side-by-side divs and when the window gets below 900px, I move the one on the right below the one on the left.
I can get the bottom div (Content-Right) to center without any problem, but I can't seem to get the top one (Content-Left) to center. I've posted a link to jsfiddle for my html and css.
Any help is appreciated.
<b>JS FIDDLE BELOW</b>
http://jsfiddle.net/L0nzz8or/
I will assume by top div you mean at the bottom in the section under About EGLT. I deleted the width and used display:table. Here are the changes:
/* HOME & CONTACT PAGE STYLES */
.Content-Left {
display:table;
float: left;
overflow: hidden;
}
I had a type-o that I didn't see in my CSS.
.Content-left
should have been
.Content-Left
It was just me overlooking that type-o and having trouble seeing it.
I am just learning HTML and CSS (JavaScript will be next.) I am developing a website on which I have two boxes (defined as <div>s) side by side. They have different horizontal sizes, but each has "height: 1000px".
The large one sits right of the narrow one, and is defined by
<section style = "width:900px; height: 1000px; margin 10px; padding: 20px; background: #BBD1FF; display: inline-block; vertical-align:top;">
I added text within the confines of both boxes, and everything was fine. Then I added more text in the rightmost box, and the box seems to have expanded it's vertical dimension. The original and the new text in the box don't come close to filling the box, so what is going on here? I can't find any property of <div> which seems to relate to this.
Okay so i've taken a guess to what I think your trying to do. Basically, add max-width to your divs to prevent them from expanding. Here's a JSFiddle with something simple what I think your looking to do.
.div-one--left {
height: 1000px;
max-width: 50%;
min-width: 50%;
background: blue;
float: left;
display: block;
}
Also, when dealing with widths. Its good practise to always use percentages. You can't build responsively if your using pixels as widths (but thats off topic slightly).
http://jsfiddle.net/63617aLj/
I'm more of a designer than a coder, so apologies if this question seems bone-headed and the answer obvious.
Anyway, with that caveat out of the way... I'm trying to create a page where the images are in a row that extend off the right edge of the screen, so that the user can scroll to see more images. Other interface elements like the logo and nav are fixed in place.
You can see the page here: http://werewolf.phantomlimb.net/
and the CSS here: http://werewolf.phantomlimb.net/wolf.css
To remove the spaces between the images I have floated them left.
My question is that in order to prevent the images from wrapping, even with a height attribute on the container div and display: block I have to give the div a width value, in this case 4000px. A width of auto for example makes the images wrap onto a new line, which is what I don't want!
As I may not always know the exact width of the combined images, is there a width value I can use that will force the images to stay in a single row, or some other CSS trick?
Many thanks.
J
I would use inline-block for this kind of stuff.
Something like this:
#imgHolder{
font-size: 0px; /* Remove the spaces between the images */
white-space: nowrap; /* Prevent the images from wrapping */
}
#imgHolder img{
display: inline-block;
vertical-align: top;
height: 654px;
width: auto;
}
Here's a working example:
http://jsfiddle.net/155ukfwp/
i am having trouble center aligning images.
The images should stay in center never mind what size your screen is.
the problem is that the images are only center aligned until a specific size. my screen is quite small so they're perfectly centered, but when i go down to %75 the images are already not center aligned wich makes everything ugly.
i'm going to save you from spamming my code here, so just view the source of this page.
Thank you for reading :)
You're wrapping the images in a span8 offset2 div, which isn't designed for keeping them centered, but for keeping the element at a set width/left-offset.
Trying setting that parent div like so:
#showcase .row-fluid > div { margin: 0 auto; width: 612px }
Your code is pretty close already, since your .head divs are already inline-blocked, and your #header is text-align: center. What you'll want to do is remove the offset2, and change the span8 to a span12 so it encompasses the entire width.
The div holding the images needs to have
margin: 0 auto;
and the image blocks need to have:
float: none;
display: inline-block;
I have seen this in your CSS and HTML code, if you remove it(CSS only) will stay in center.
HTML
<div class="span8 offset2">
</div>
CSS
Before
.offset2:first-child {
margin-left: 17.094%;
}
After
.offset2:first-child {
/* margin-left: 17.094%;*/
}