I wanted to create an html page where I want a full screen image on the first section.
<header>
<div class="menu"> </div>
<div class="logo"></div> <div class="sub-menu"></div>
<div class="main-banner"></div>
<div class="bottom-menu-bar"></div>
</header>
Here, I want the main-banner to be flexible according to the screensize. This image should auto-adapt to the screensizes. The bottom-menu-bar should be always at the bottom of the splash page (first view section of a loaded webpage) but go up as we scroll down along with the main banner.
How can I achieve this? (A good example is PayPal website-though I inspected the elements but hard to understand it. Any quick and easy way?)
Thanks for your help. If Any information is needed, just let me know. I found similar questions some other websites but not a clear answer.
To get the bottom-menu-bar to stay at the bottom of the page add this css:
.bottom-menu-bar{
position: fixed;
bottom: 0;
}
To get the main banner to be resizable use width:100%; instead of an explicit width like 600px.
Related
H everyone. Please help me out. I am using this grid based framework. in the middle I have 3 images like this
<section class="row">
<div class="col-4">
<img src="img/seo.jpg" alt="seo work" class="work-type">
<h3 class="work-title">seo specialist</h3>
</div>
<div class="col-4">
<img src="img/webdesign.jpg" alt="web design work" class="work-type">
<h3 class="work-title">web designer</h3>
And for the specific img class I am having this CSS for making it responsive
.work-type{
max-width: 100%;
height: auto;
}
Now. three images have different height and they are taking different space height wise inside the grid box. what CSS do I use to have them all appear with the same height?
You can do this easily with CSS and background images.
http://codepen.io/anon/pen/EyZxoP
In this codepen, I display your current issue with the proposed solution.
If you want the images to be a part of the markup, then you'll need to provide more information about the solution you're looking for. (What should happen with the images that are being forced to become the same dimensions? Are we stretching them? Cropping? Are these images dynamically loaded? Hardcoded in the source? Are they featured images for a custom post type, like a staff post-type? Is this wordpress? Contextual layout details would be good, too.)
I've given divs the background-image properties to quickly/easily avoid skewing and stretching, as well as any other form of distortion because of layout stuff. This method can be used for responsive layouts as well.
.img-cont{
height:200px;
width:200px;
}
Somewhere along the way something went wonky with the CSS on this site. One some posts, the side bar is in the correct position to the right: http://emgraphics.net/legacyjar/category/the-civil-rights-movement/. But on the Pages and other Posts, it has scooted below the #wrapper area (http://emgraphics.net/legacyjar/). I had only made changes to the #comments section css but I don't see anything there that could have affected it. Have fooled around with all the elements' widths, clear settings, etc. and just cannot nail this down. Any help is appreciated!
Two things:
You're making your CSS work harder than it has to. You're setting container to 100% width then trying to use negative margin to give the sidebar room. Instead, give the main container a set width. Your site isn't fluid, so make life easier for yourself!
Here's the relevant CSS:
#container {
float: left;
width: 720px;
}
You're prematurely closing one of your divs. You have one too many close divs somewhere in the page that has the sidebar pushed down. If you're in FF or Chrome, hit F12 and investigate the sidebar nav. You'll see the div isn't in #main on the bad page, but it is on the good page.
It's not the CSS, it's the HTML layout.
<div id="primary" class="widget-area" role="complementary"></div>
is supposed to be enclosed within
<div id="main"></div>
like so...
<div id="main">
<div id="primary" class="widget-area" role="complementary"></div>
</div>
but on http://emgraphics.net/legacyjar/,
your primary div is outside of the main div like this...
<div id="main"></div>
<div id="primary" class="widget-area" role="complementary"></div>
Once you move the primary div back inside the main div, everything should work fine.
Ahha! This would all make sense if it was a standard html site. But I'm using a generic twenty-ten template for WordPress with css that I've edited. All the pages have the same index/head/sidebar php files. However, there was an extra div tag on the comments.php file. So pages where comments were not allowed worked. But pages/posts where they are allowed went wonky, EVEN if there were no comments OR even a comment form visible. Thanks for the tip-off on the extra div tag!
I intend for the footer of my page to be one line tall.
Sometimes when I open my page in a new window/tab, the footer is two lines tall. If I reload within a tab, it looks fine.
My page is here
The relevant portion of the page is near the bottom
<footer class="footer">
<div class="container-fluid">
<div id="logo">© 2013 Dine-O</div>
<div class="pull-right"> Restaurant Signup | Apps | Terms | Privacy </p>
</div>
</footer>
Sometimes the #logo and .pull-right divs are on the same line. Sometimes they appear on different lines.
The "bug" only happens when loading the page on a new tab. Anyone have suggestions on why I'm getting this random behavior?
First of all I must say that is a WEIRD bug. Notice it only happens in chrome too.
I believe it will be fixed if you add:
#logo {
float: left;
}
It looks like your div is clearing the ".pull_right" which it kinda should be since footer
inherits clealrfix in bootstrap. I must say I have no idea why it happens ONLY on new tabs.
I added two divs to hold background images for decorative purposes - as requested by the artist whom is working with me on a website.
At first, it worked very well. The images were supposed to show on each side of the wrapper div holding the website content - without affecting page width.
Then the organization owning the website got another sponsor, who's logo I had to add to a column on the right. I created a new id for the 5th "button" and created a div for it. Uploading it, I noticed that a scroll bar had suddenly appeared on the bottom of the page, for no apparent reason.
I first suspected the button to be the problem, but eventually found out that the right-most decorative div was bending the page width, despite using absolute positioning. Both of the divs use the same code, only mirrored for left and right. I have no idea what is causing the problem..
(You can see the problem in action while it lasts at www.torucon.no/no/)
Please help me out! Here is the CSS for both of the divs:
#wolf
{
position:absolute;
min-height:500px;
min-width:498px;
left:-293px;
top:150px;
background-image:url('http://www.torucon.no/css/wolf.png');
z-index:-1;
}
#lion
{
position:absolute;
min-height:500px;
min-width:498px;
right:-293px;
top:150px;
background-image:url('http://www.torucon.no/css/lion.png');
z-index:-1;
}
Here is an HTML snippet showing the HTML of the divs:
<div class="wrapper"> <!-- Contains the entire website for structure -->
<div id="wolf">
</div>
<div id="lion">
</div>
((In case you didn't get it: The wrapper div is supposed to be centered, and it is. But when I resize my window, I find that a scroll bar appears long before the wrapper content is even close to the browser window borders. That would be annoying on computers with low resolution or small screens!))
I think what you want is to have the lion and wolf progressively appearing as the user widens the browser viewport, but otherwise partially hidden off to the sides of the wrapper. Correct?
I think you're only safe option to achieve this without triggering the scrollbars you don't like are to combine the images into one and attach them as the background image on the body element of the page.
I believe you're right about using overflow-hidden on the body -- you'd loose the ability to scroll to see overflowed content if the viewport is resized down below the wrapper's width.
I have checked that you posted link http://www.torucon.no/no/ but i coudnt see bottom scroll bar ,
Anyway , Why you cant set background?
<body>
<div class="overlay">
<div class="wrapper">
</div>
</div>
</body>
<style>
body{width:100%; background:---;}
.overlay{width:100%; background:---;}
<style>
I'm having a problem adjusting the layout of my site.
I have 2 div tags, one has a welcome message and a picture. The other div is empty until the user enters information in a form, at which point I use jquery to hide the welcome message and display content relevant to the users data.
The problem is that the browser thinks it needs vertical space for both divs, even when they are stacked on top of each other, this results in a lot of empty space at the bottom of the page and a long unwanted scrollbar.
I'm using position: relative for both divs because it make the page look good on small screens and big screens that way.
I'm using left: and top: values to move the welcome div on top of the empty content div.
Thanks in advance for your help! Please let me know if you need more info. here's an example of my HTML sample_G is in front of browsable.
<div id="browsable" class="scrollable">
<div id="graphs" class="items">
</div>
</div>
<div id="sample_G">
<p class="Welcome">Welcome to the graphing tool!</p>
<img src="pics/Sample_graph.jpg" />
</div>
Just figured out a good answer... I'm going to leave this on here in case someone else has a similar problem.
Set the display of browsable to "none" until sample_G is hidden, then use jquery to 'show' browsable.
If anyone sees a problem with this or has a better answer please feel free to post.
Thanks!