I want the facebook iframe embed to sit at the left of the text. Not sure how to do that using CSS or something. Can someone help? It currently seems like the embed is inline with the text and sits on the left hand side. I want it to continue to sit on the left but I want to have the text next to it starting at the same height. I also want it to center itself in the margin on the left of the text.
<template>
<div>
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FAirCombatGroup%2F&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" align="center" width="50%" height="500" style="border:none;overflow:hidden" scrolling="yes" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
<div class="headerHome">
<h1>Welcome to the Air Combat Group</h1>
</div>
<div class="homeText">
<p>
The Air Combat Group consists of both Allied and Axis squadrons under a single operational umbrella flying with full realism settings. We are an English and German speaking group located in Europe, the Americas and Australia and meet on our own Teamspeak 3 and Discord servers.
</p>
</div>
</div>
</template>
<script>
SNIP
</script>
<style scoped>
.homeText{
width: 50%;
text-align: justify;
margin-left: auto;
margin-right: auto;
}
.headerHome{
width: 50%;
text-align: center;
margin-left: auto;
margin-right: auto;
}
</style>
You could choose to use the CSS property 'position: fixed;'. This allows you to position the element anywhere, but it will remain at that exact position.
Start off with giving the Facebook iframe an ID, you can simply add the ID-attribute like this:
<iframe id="facebook_box" ... ></iframe>
Then add the CSS rules within the <style>-element. You can also tell the element to be positioned off the top and left (or bottom and right, etc). The code will look like this
#facebook_box {
top: 20px;
left: 20px;
position: fixed;
display: inline-block;
}
I hope this helps you on your way.
Related
I have been trying to build a website having a 3 column layout. All of the body is given a margin:0 auto to keep it at the centre, and has a minimum width of 1218px.
Now, what I want to do is reposition the right column in such a way the it goes below the left column without affecting the centre column. A live example would be twitter home page, where at the left I can see my profile and trends, the centre column features the tweets and the right column shows suggestions on a 1366x768 screen, now if I change the screen size to 1024x768, the column of suggestions at right goes down below the left column but the central timeline is unaffected.
The definition would be:
<div class="containter" style="margin:0px auto;">
<div class="left-col" style="width:290px; float:left;">Left Stuff goes here </div>
<div class="center-col" style="width:590px; float:right;"> Center body </div>
<div class="right-col" style="width:290px; float:right;">right Stuff goes here </div>
</div>
Now note that the central column has a right float, copied from twitter.
I can't use media queries for that since the website is going to deal with a lot of old browsers and also I would like to avoid JavaScript if possible.
Any help?
You can't do that with "min-width" of the main container. You must use "max-width" since you want to make sure something happens when the screen width gets more narrow. And the main column (in the center) has to be left-floated, not right. Here's a possible solution. However the whole questions seems weird to me since you want to make a responsive layout in an old browser that doesn't support responsive CSS.
<style>
.container {
max-width: 1218px;
}
.leftColumn {
float: left;
width: 300px;
height: 500px;
background-color: brown;
}
.mainColumn {
float: left;
width: 700px;
height: 500px;
background-color: darkgreen;
}
.suggestions {
float: left;
width: 218px;
height: 500px;
background-color: darkorange;
}
.cleaner {
clear: both;
}
</style>
<div class="container">
<div class="leftColumn">
LEFT
</div>
<div class="mainColumn">
MAIN
</div>
<div class="suggestions">
SUGGESTIONS
</div>
<div class="cleaner"></div>
</div>
I have started to try to build a really easy website and trying to make it responsive. Something in the style of http://www.squarespace.com/ (Split up in different sections with different backgrounds etc that you just scroll throu) But i have a problem that I really cant figure out right now, I don't know how to make the foundation for this kind of site. I got the "menu" part quite nice, but as soon as I try to but some content on the first "part" or try to start the second part I run into trouble.
To try to explain I have two < p > that I tried to put on-top of the first part, and below to make the second part. I guess the explanation is not perfect, but hopefully the code can clear up my issue abit :)
Edit: Just took some random pictures to be able to show...
#logo img{
z-index: 10;
left: 4%;
top:20px;
max-width: 50%;
height: auto !important;
position: absolute;
}
#signup img{
z-index: 10;
right: 4%;
top:20px;
max-width: 50%;
height: auto !important;
position: absolute;
}
#main-container img {
width: 100%;
height: 100%;
max-height:308px !important;
position: absolute;
top: 0;
left: 0;
margin:0;
}
#second-container {
}
<div class="container">
<div id="menu">
<div id="logo">
<a href="example.com">
<img src="https://tcrf.net/images/d/de/FBEAR-nosave.png" alt="" />
</a>
</div>
<div id="signup">
<a href="example.com">
<img src="https://tcrf.net/images/d/de/FBEAR-nosave.png" alt="" />
</a>
</div>
</div>
<div id="content">
<div id="main-container">
<img src="http://www.reallifeglobal.com/wp-content/uploads/2015/03/background-radi-700x300.png" alt="" />
</div>
<p>Ontop of background</p>
<div id="second-container">
<p>Under background</p>
</div>
</div>
</div>
https://jsfiddle.net/gt2d6aa7/
Since the image in main-container is not set as a background image and it comes before the paragraphs in the source code, it is appearing on top of the paragraphs.
2 things you could do to get the paragraphs to show:
1) Set a position property on the paragraph style to make it appear on top of the image:
div.container p{position:relative;}
2) I would suggest setting that image as the background of your container and giving it a minimum height (in case your content does not increase the container size enough to fully see your image). Like so:
<div id="main-container" style="background-image:url('http://www.reallifeglobal.com/wp-content/uploads/2015/03/background-radi-700x300.png');background-size:100%;min-height:300px;background-repeat:no-repeat;">
Then, make sure to close your main-container before opening the second-container, that way it creates a clean section for different content. The way you have it, second-container is inside the main-container and any content that you wanted to appear below the main background and top content would actually just appear on top of the main-container background.
The Squarespace site you linked to is a good example visually, but if you inspect their code it gets a little confusing for a beginner, since they are nesting the bottom sections (below that video presentation) in a section within in a div.
Twitter Bootstrap has some good examples of one-page layouts with cleaner markup to follow. This is a good example: http://blackrockdigital.github.io/startbootstrap-landing-page/
Here are their other examples: http://startbootstrap.com/template-categories/one-page/
I am not an advocate of Bootstrap, since it adds a lot of unnecessary bloat in most cases, but these give a good indication of how to structure your page.
Good luck!
I want to create a content page in jQuery mobile in which I have 2 divs one on top the other within the content area in jquery mobile. The issue is that when the screen size changes the lower div goes on top of the upper div. What I want is that when the screen size changes it maintains the same div structure of one on top the other. I am wondering if I can use a grid but am not sure grids work for 1 column but 2 rows?
My code is below:
CSS
#songName {
text-align:center;
width: 100%;
height: 20px;
}
#songPicture {
text-align:center;
width: 100%;
height: 50%;
}
HTML
<div data-role="content" style="height: 100%">
<div id="songName"></div>
<div id="songPicture"></div>
</div>
Please note the content of the divs comes from JSON and while the id songName is plain text the id songPicture content looks like this :
<img src='"image url+"' style='position: absolute; left: 50%; margin-left: -128px; top: 50%; margin-top: -171px; width: 256px; height: 256px;' />
Use ui-grid-solo class for each div.
<div class='ui-grid-solo'>
Contents
</div>
Reference: http://jquerymobile.com/demos/1.2.0-beta.1/docs/content/content-grids.html
I'm working on a website that uses an older vBulletin message forum. The current setup works fine for the most part, however, when I open the forum in my mobile device, I see the ad banner (728x90) overlapping the logo image and it just looks bad. It gets even messier when looking at the banner css positioning because the top and right portions fit the needs of the rest of the layout.
My basic question is how can I redo this so that the banner doesn't EVER overlap the logo image while still holding the necessary offsets to fit the rest of the layout?
#container{
width: 100%;
height: 100px;
}
#logo{
width:230px;
height: 63px;
}
#advertisement{
height: 90px;
width: 728px;
position: absolute;
right:10px;
top: 7.5px;
}
<div id="container">
<div id="logo"><img src="logo.jpg" border="0" alt="Whatever" /></div>
<div id="advertisement"></div>
</div>
** Not my CSS or HTML
I would give #container the property "min-width: 958", and keep the width of 100%.
That way, the page will always be wide enough for both the logo and the advertisement.
Hey guys, I'm having some trouble with my css position. Basically I have a sidebar that is set to the left of the screen, which basically includes all my links for navigation. I want the sidebar to extend all the way to the bottom of the screen, no matter if the user minimizes or maximizes the browser, or their resolution. Even if the page happens to scroll I want the div to go all the way to the bottom. I'm having a lot of trouble with this and cannot get it to work correctly. Here is my code, if anyone spots the reason it is not working, any help is greatly appreciated.
HTML:
<div id="welcome">
Welcome <br> to My Site!<br>
<span style="color: red; ">(Beta)</span>
<div id="sidebar">Home</div>
<div id="sidebar">link</div>
<div id="sidebar">Link</div>
<div id="sidebar">Link</div>
<div id="sidebar">Link</div>
<div id="sidebar">Forum</div>
<div id="sidebar">About</div>
<div id ="sidebar">Requests</div>
<div id="sidebar" >"Pr0j3ct Un1ty"</div>
<div style="font-size: 20px;">Logged in as: <?php echo $_SESSION['username']; ?> </div>
<div id = "sidebar" >
Logout </div>
<div style=" font-size: 16px;">Account Settings</div>
<div style="margin-left: 10px; position: absolute; bottom: 0px; font-size: 16px;"><b>© jm1llz 2010</b></div>
</div>
CSS Page:
#welcome
{
width: 15%;
float: left;
background-color: darkgrey;
height: 100%;
text-align: center;
font-size: 24px;
font-family: Comic Sans MS;
font-weight: bold;
}
The best way is to use a background image. If you are not using a body background image now then the easiest is to create and image with the width of the sidebar.
body {
background-image: url(/images/bg.jpg); /* Wherever your image is located */
background-repeat: repeat-y;
}
That will make the image go all the way to the bottom regardless of how tall your sidebar actually is.
Then on your sidebar, just style the div to fit within the image you created. If it's all the way to the left like you say then all you should need to add to your style is the correct width and maybe some padding.
If you are using a body background image than create another div with...
div { width: 100%; height: 100%; } /* You may need a float: left; as well */
...and place the above background CSS inside the new div. You will then have to add that new div just inside the tag in your HTML.
easiest practical way is to throw a bg image on your element that contains your floating sidebar with the bg color/graphic that repeats vertically. make sure the container has overflow/clearfix.
I think you are asking "how do I make two columns the same height?"
If that is the question, there are various 'tricks' to do it via CSS (such as meder's recommendation) but these days I'd strongly suggest just using javaScript. It's fairly trivial especially if you are using something like jQuery.
ON document ready, grab the height of each div and then force the shorter one to a height equal to the taller one.