I need to create a landing page which consists of an image with text at the top, a couple of videos under that and a strip line image of 2 pixels which I need it so stick to the bottom.
<html>
...
<body>
<img src="topimage.png" alt="" />
<table>
<tr>
<td>Video 1 here</td>
<td>Video 2 here</td>
<img src="2pixelhightimage.png" alt="" />
I basically need it to be centered and look relative to the size of the screen so basically resize to compensate the screen resolution.
How can I do this?
You can do it preatty easelly by adding a wrapper to your content and setting left and right margin to auto. Use % instead of pixel.
<div class="wrapper">
<img src="topimage.png" alt="">
<!-- No need to use table here. Just use divs for layout stuff. -->
<table>
<tr>
<td>Video 1 here</td>
<td>Video 2 here</td>
</tr>
</table>
<img class="fixed" src="2pixelhightimage.png" alt="">
</div>
And then the CSS:
.wrapper { margin: 0 auto;}
img { max-width:100%; height:auto;}
.fixed {position:fixed; bottom:0;}
something like this for the general layout?
<div class="wrap">
<div class="content">content goes here</div>
</div>
.wrap
{
width:100%;
background:gray;
}
.content
{
width:80%;
margin:0 20%;
background:green;
}
http://jsfiddle.net/k25gU/
Create a wrapper div around the content
<div id="wrapper">
<!-- content here -->
</div>
and style it like this
#wrapper {
width: 980px /* Maximum width of the content */
max-width: 100% /* responsive width */
margin: 0 auto; /* center the wrapper */
}
also don't use tables for the videos. Table columns will not break on small screens. Use
<ul class="videos">
<li class="video">
<!-- content here -->
</li>
<li class="video">
<!-- content here -->
</li>
</ul>
then css them
.videos {
list-style: none; /* no bullets */
}
.videos .video {
display: inline-block; /* videos side by side as long as there is space */
width: 245px; /* 980px site width /4 = 245px = 4 videos in one row */
}
A sticky strip line at the bottom could be:
<div class="strip-line-bottom"></div>
and css for it
.strip-line-bottom {
position: fixed;
bottom: 0;
width: 100%;
height: 2px;
background: url(path/to/image.jpg) repeat-x;
}
For detailed information you'll have to provide some more info ;-)
Related
I am building a webpage that is divided into 3 sections, a header, a content area and a footer. Each marked up by a div and they all belong to a wrapper div.
<div class="wrapper">
<div class="header">
<div id="logo">
<img id="headerimg" src="assets/media/logos/Full_H.png" />
</div><!-- End of logo -->
<div id="navigation">
<ul>
<li>navigation1</li>
<li>navigation2</li>
</ul>
</div><!-- End of navigation -->
</div><!-- End of header -->
<div class="container">
<p>This is a container.</p>
</div>
<div class="footer">
<p>This is a footer.</p>
</div>
</div> <!-- End of wrapper-->
The styling rules are as follows:
* {
margin: 0;
padding: 0;
border: none;
}
#wrapper {
margin-right: auto;
margin-left: auto;
width: 960px;
/*width: 96%;*/ /* Holding outermost DIV */
}
#header {
/* margin-bottom: 10p;*/
width: 940px;
height: 80px;
outline:green dashed;
}
#logo {
height: 60px;
width: 100%;
outline:blue dashed;
} /*logo - End*/
I am trying to fit the image, Full_H.png, to the top left corner of the page without losing aspect ratio and confined to the header div only. The size of this image is 450 x 50, yet when I run this code the image is not confined to the header, it overflows. Can someone tell me how to contain the image to the size of the div without losing the image's quality? Thank you. Please let me know if my information is inadequate.
This question already has answers here:
Two divs side by side - Fluid display [duplicate]
(9 answers)
Closed 3 years ago.
I'm trying to put two images side-by-side (occupying the rest of the body) bellow my header, but I didn't find I good solution yet.
I want these two images to be a link for two different pages.
I have tried different things but neither of them worked.
HTML:
<body>
<div class="header">
<div class="logo">
<img src="C:\Users\cristovao\Documents\vscode\real_estate\icons\logo_final.png">
<div class="lettering">
<h6><span class="bolder">F</span>ÁTIMA<span class="bolder">C</span>RISTÓVÃO <span class="smaller">by KELLER WILLIAMS</span></h6>
</div>
</div>
<div class="wrapper">
<div class="nav">
<ul>
<li>
Home
</li>
<li>
Projects
</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="box">
<a href="./Atower.html">
<img src="./IMAGENS/CI02_00_SALA_P6_4K.jpg" width="100%" >
</a>
</div>
<div class="box">
<a href="./muda.html">
<img src="C:\Users\cristovao\Documents\vscode\real_estate\IMAGENS\CASA B (3).jpg" width="100%" >
</a>
</div>
</div>
</body>
CSS:
body {
margin: 0px;
padding: 0px;
}
.container {
display: inline-flex;
}
.box {
width: 50%;
}
.container {
float: left
}
.box {
width: 50%;
}
All my code is here;
It seems that using flexbox or float I cannot display each image with half of
the total width each, and 100% of the body height, I always have 50% of the
height below the images in white,
(representing body content) when I use flexbox and 50% of white space right when I use float.
Hope anyone can help me
Br
Use flexbox and set margin:0 and padding:0.
.container {
display: inline-flex;
margin:0;
padding:0;
}
.box {
width: 50%;
margin:0;
padding:0;
}
Make the <a> tag a block styled element so it neatly wraps your image. Then stretch your image to the full height and width of its parent and use object-fit: cover to make the image fill your box.
This will have the same effect as on a background-image with the background-size set to cover.
.box a {
display: block;
width: 100%;
height: 100%;
}
.box img {
display: block;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
I am making a header on a HTML page in which I have an image aligned to the left of the page and an image aligned to the right. I want there to be a center background color that is white when I enlarge the page horizontally, and that center white section to minimize to nothing when I shrink the page horizontally. Then the image on the right should be cut of from the right as the page shrinks.
The main problem I'm having is the image on the right goes down below the left image when I shrink the page. How can I fix this? The center section isn't white as well.
HTML:
<div class="navlogo">
<div class="left">
<img src="Weir-Logo.jpg">
</div>
<div class="right">
<img src="compass.jpg" />
</div>
</div>
CSS:
.navlogo {
width:100%;
background-color: white;
}
.navlogo .left {
float:left;
}
.navlogo .right {
float:right;
}
I would go with Turnip's answer, but here's another option for you for variety, if you like tables:
<table style="width:100%;background-color:white">
<tr>
<td align="left">
<img src="Weir-Logo.jpg">
</td>
<td></td>
<td align="right">
<img src="compass.jpg" />
</td>
</tr>
</table>
position: relative for the left image and position: absolute for the right image along with a z-index value on both should get you there:
.navlogo {
width: 100%;
background-color: white;
}
.navlogo .left {
float: left;
}
.navlogo .left img {
position: relative;
z-index: 1;
}
.navlogo .right {
position: relative;
}
.navlogo .right img {
position: absolute;
right: 0;
z-index: 0;
}
<div class="navlogo">
<div class="left">
<img src="http://placehold.it/400x200/f2f2f2/000000">
</div>
<div class="right">
<img src="http://placehold.it/400x200/000000/ffffff" />
</div>
</div>
With the "max-width" style the image will be resize.
<div class="left">
<img style="max-width:30%;" src="Weir-Logo.jpg">
</div>
<div class="right">
<img style="max-width:30%;" src="compass.jpg" />
</div>
So far you've got the old-school strategies covered: tables and position:absolute. Neither meets your requirement for "the image on the right should be cut off from the right as the page shrinks" and both can be problematic for a variety of reasons -- tables are, well, tables; and absolute-positioning, while sometimes necessary, tends to lead to fragile layouts; I try to avoid reaching for that part of the toolbox unless absolutely necessary.
In this situation I would depend on CSS background images, with an #media breakpoint to cover the two different layouts.
With this HTML:
<div class="navlogo"><div></div></div>
This covers the "the screen is wider than both images; put whitespace in between them" case:
.navlogo {
background: url('//placehold.it/250x100') top left no-repeat;
}
.navlogo div {
background: url('//placehold.it/250x100') top right no-repeat;
min-height: 100px;
}
Then, for the "the screen is smaller than the two images, so cut the right-hand one off from the right":
#media screen and (max-width: 500px) {
.navlogo div {
background-position: 250px 0;
}
}
(The #media breakpoint here should be the width of both images added together. The right-hand image's background-position should be the width of the left-hand image. Adjust for body margins/padding as needed.)
If I understood you correctly, you were looking for something like this?
Fiddle: https://jsfiddle.net/7twgsx23/1/
You need to give the navlogo a height value in order to get the white background.
CSS:
.navlogo{
width: 100%;
height: 100px;
background-color: white;
overflow: hidden;
min-width:600px;
}
I also suggest using a middle div to get the desired layout.
HTML:
<div class="middle">
</div>
You can use non-breaking space to fill the middle div if you don't want any content there.
I am building a site built of a wordpress responsive theme as the parent. I have a content section (content-blog) on the left side of the page and a sidebar (widgets) on the right side of the page. I have them set to scale down with the browser size, However I would like to set a min-width to both so that they don't scrunch up on smaller browsers. I want the sidebar to move underneath the main content at a certain width point. Here are my html and css.
HTML:
<body>
<div id="header">
/* content */
</div> <!-- end header -->
<div id="container" class="hfeed">
<div id="navigation">
/*content */
</div> <!-- end navigation -->
<div id="feature">
/* content */
</div> <!-- end feature -->
<div id="wrapper" class="clearfix">
<div id="content-blog" class="grid col-620">
/*content */
</div> <!-- end content-blog -->
<div id="widgets" class="grid col-300 fit">
/* content */
</div> <!--end widgets -->
</div> <!-- end wrapper -->
<div id="footer"
/* content */
</div> <!--end of footer- -->
</body>
CSS:
body {
background: none repeat scroll 0 0 #2D2C2A;
color: #2D2C2A;
}
#container {
max-width: 1100px;
margin: auto;
margin-top: 15px
}
#wrapper {
max-width: 1010px;
width: 100%
margin: auto;
margin-top: 15px;
border: none;
}
#content-blog {
margin-bottom: 20px;
margin-top: 16px;
max-width: 65%;
min-width: 45%;
width: auto;
}
#widgets {
float: right;
margin-top: 40px;
max-width: 32%;
width: auto;
}
The site is podcastanswers.com if that helps also. I have tried setting a min-width but no matter what as the browser scales down the divs continue to get smaller and never stop at the min setting. I'm sure it something that I have missed or am not understanding but I haven't been able to find the answer in my searching. Thank you all in advance.
The percentage metric is relative to the current size of the screen, not the one that was set when the browser loaded the page. So whenever you resize the screen, the min-width/max-width values change as well (not sure if this is exactly your issue since the example was rather lengthy) but, it seems like you are trying to make a responsive design and therefore you should use media-queries. An example code of media queries:
#media screen and (max-width: 1040px) and (min-width: 100px) {
#content {
width: 100%;
}
}
Here are some resources that will help you understand and use them:
CSS-Tricks
Spec
MDN
I'm currently working on a new website: http://maartenlodewijk.nl/2013/
The light-grey bar on the right side (with the word "test" in it) is supposed to be my nav bar. I've been trying for days to get its height to fill the page height (not just browser height, but the entire page). Just as in this mockup I've made: http://i.imgur.com/Knjlc.jpg
I've tried multiple ways now, from simple ones such as setting body and html height to 100% (No luck there) and a CSS hack such as here: ejeliot.com/samples/equal-height-columns/example-7.html (Which works, but a hack is really a last-resort option for me)
Here is my HTML and CSS code. In case youre wondering: Yes, I have both a wrapper and a container div, the wrapper centers the container, while the container maintains a fixed position within the wrapper.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Maarten Lodewijk // Home</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="navigation">
test
</div> <!-- end navigation -->
<div id="wrapper">
<div id="container">
<div id="header">
<img src="images/headerpng.png" alt="Logo" border="0" />
</div> <!-- header -->
<div id="weclome">
<img src="images/homemessagepng.png" width="645" height="203" alt="Maarten Lodewijk, Communication & Multimedia Designer" /></div><!-- end welcome -->
<div id="content">
<div id="leftcolumn">
<h1>HEADER</h1>
<p>TEXT</p>
<p>TEXT</p>
<p>TEXT</p>
</div><!-- end leftcolumn -->
<div id="rightcolumn">
<h1>Contact</h1>
<table width="286" border=0>
<tbody>
<tr>
<td width="96">Mail:</td>
<td width="180" class="rightalign">mail#maartenlodewijk.nl</td>
</tr>
<tr>
<td>Telefoon:</td>
<td class="rightalign">+31 6 348 268 52</td>
</tr>
</tbody>
</table>
<h1>HEADER</h1>
<p>TEXT</p>
<p>TEXT</p>
<p>TEXT</p>
</div><!-- end rightcolumn -->
</div> <!-- end content -->
</div> <!-- end container -->
</div> <!-- end wrapper -->
</body>
</html>
CSS
/* ----- TAGS -------*/
body {
font-size: 100%;
padding: 0px;
margin: 0px;
font-family: Georgia, "Times New Roman", serif;
background: #e8e8eb url(images/bg.png) repeat-y;
color: #666666;
}
html{
}
h1{
font-size: 150%;
color: #ff3366;
padding-top:30px;
}
/* ----- LAY OUT -----*/
#wrapper{
width:955px;
margin-left:auto;
margin-right:auto;
}
#container{
width:645px;
margin-left:20px;
}
#content{
padding: 0px 20px 0px 20px;
}
#navigation{
position:absolute;
top:0;
right:0;
width: 16%;
min-width: 163px;
max-width:233;
background-image:url(images/navbarbg.jpg);
height: 100%;
}
#leftcolumn{
width:286px;
float:left;
}
#rightcolumn{
width:286px;
float:right;
}
/* ----- CLASSES -----*/
.rightalign{
text-align:right;
}
If i saw your layout so it's good if you give position:fixed instead of position:absolute; to your #navigation DIV. Write like this:
#navigation{
position:fixed;
top:0;
right:0;
width: 16%;
min-width: 163px;
max-width:233;
background-image:url(images/navbarbg.jpg);
height: 100%;
}
If you want your menu to be ALWAYS visible you might wanna use the solution from a previous answer.
If you would simply like to extend your sidebar after a scroll - you need to use the so-called css equal height columns - here is an example of them: http://www.vanseodesign.com/css/equal-height-columns/
There is big problem in this layout you are using background image on body tag which is 1920x99 so your body is reacting to this section only.
some quick changes make this working fine.
please see my attached output i did these quick changes with developer tool.
you should restructure the layout put everything inside wrapper and use float,position for the navigation and other section.
nothing is working together in your layout you should re-build it and use proper style for the every section
if you want equal height #navigation and #wrapper apply this class .equal_height and
use this jquery function with library file
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
$(document).ready(function() {
equalHeight($(".equal_height"));
});
May it will help you.
Please add a background color to #wrapper and see your #leftcolumn and #rightcolumn are not in the #wrapper area. Maybe this is an issue in your template. Please check after fixing that.
If that won't work you can use jQuery to get heights dynamically and set the navigation height.