image cant seem to fit in just one section and keep overflowing to another section.
tried putting tag in between but does not seems to work, img keep showing in two section.also tried the width and padding but i can't move the img to the left. can anyone help with only css and html? can't use js on this project.
#section1 {
height: 580px;
width: 1519px;
background-color: #0E2E3B;
padding: 50px;
}
<body>
<section id="section1">
</section>
<section class="main" id="section2" id="profil">
<h1>Lorem</h1>
<h2>Lorem</h2>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<img src="pancasila.jpg">
</section>
<body>
the html code
If you want to have same ratio you should create a container and hide parts of the image. Follow like this with an additional CSS file. Tweak the parameters in the CSS file as you wish and you can get your desired results.
HTML
<body>
</section>
<section class="main" id="section2" id="profil">
<h1>Lorem</h1>
<h2>Lorem</h2>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<img class="img" src="pancasila.jpg">
</section>
</body>
CSS
.container{
width:100%;
height:60px;
overflow:hidden;
}
.img {
width:100%;
}
Try adding some css for img. Also you first section doesn't seem to have opening tag.
img { width: 100% }
Related
I want to create a layout like this :
Example layout
I want to display the whole page in that black element, How to do this with html and css.
It has scrollabe content, and the content should stay within that black element.
you can use iframe html elements for solve your problem.
example:
<iframe src="https://www.youtube.com" width="1000" height="1000">
Try this:
<div class="block">
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
.block {
overflow-y: scroll;
width: 200px;
height: 200px;
}
This is a very simple question: I have two elements that should be displayed in one row at a specific ratio. Then the same pattern should be repeated in a next row. However, the content of the subsequent row is printed in unused space of the previous row.The problem is obviously the css file.
I guess the example will make it clear:
.row1 {
float: left;
width: 70%;
margin-bottom: 50px;
}
<head>
<link rel="stylesheet" type="text/css" href="syle.css">
</head>
<div>
<div class="paragraph1">
<h1> Paragraph 1 </h1>
<h3> subtitle1 </h3>
<div class="row1">
<p class="row1_col1"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="row1_col2">
<p> Just some other text</p>
</div>
</div>
<div class="paragraph1">
<h1> Paragraph 1 </h1>
<h3> subtitle1 </h3>
<p class="row1_col1"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="row1_col2">
<p> Just some other text</p>
</div>
</div>
</div>
Any idea?
Here's a less than elegant solution (Full code in link)
https://jsfiddle.net/qk7o8w4t/1/
.paragraph {
display: inline-block;
width: 50%;
}
.right {
float: right;
}
.left {
float:left;
}
I am working on a layout with the following attributes:
Fixed header (content should scroll up under it)
Fixed 100% height column (left menu)
Content area
Footer that A. sticks to bottom if content is short, or, B. is pushed down with longer content (off screen)
I have managed to get 1,2,3 and 4 A. working. But I can't get the footer to get pushed down by the longer content. I based my initial workings on css reset (example here:http://www.cssreset.com/demos/layouts/how-to-keep-footer-at-bottom-of-page-with-css/), but, I am assuming that my fixed header and left column are not helping.
I'd really appreciate any pointers/suggestions on how I might overcome this.
Here is my code:
<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
<title>Layout</title>
<style type="text/css">
html,
body { height: 100%; padding:0;margin:0; }
#sc_admin_wrapper {
min-height:100%;
position:relative;
background:#fff;
margin: 0;
}
#sc_admin_header{
width:100%;
height:50px;
position:fixed;
top:0;
background: #212121;
z-index:9995;
color:#fff;
}
#sc_admin_logo {
width:20%;
float: left;
}
#sc_admin_menu {
position:fixed;
top:50px;
bottom:0;
float:left;
width: 20%;
margin: 0;
background: #3d3d3d;
color: #fff;
}
#sc_admin_content {
float: left;
margin:50px 0 0 20%;
width: 77%;
padding: 0.5% 1.5% 30px 1.5%;
}
#sc_admin_footer {
background: #ffcc00;
width: 77%;
height: 30px;
position:absolute;
bottom:0;
left:0;
margin: 0px 0 0 20%;
padding: 0 1.5% 0 1.5%;
}
</style>
</head>
<body>
<div id="sc_admin_wrapper">
<div id="sc_admin_header">
<div id="sc_admin_logo"><h1>Fixed header</h1></div>
<div class="clear"></div>
</div>
<!-- / #sc_admin_header -->
<div id="sc_admin_menu">
<p>Fixed height column at 100%;</p>
<div class="clear"></div>
</div>
<!-- / #sc_admin_menu -->
<div id ="sc_admin_content">
<div id="sc_msgs"></div>
<p>This would be my short or long content.</p>
<p>I should scroll under the header.</p>
<p>My footer should be fixed at the bottom of the screen if content is
short, or, scroll should the content be longer.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
<div class="clear"></div>
</div>
<!-- / #sc_admin_content -->
<div id="sc_admin_footer">
This is my fixed footer
<div class="clear"></div>
</div>
<!-- / #sc_admin_footer -->
</div>
<!-- / #sc_admin_wrapper -->
</body>
</html>
Hmmm, I think you you almost got it right! You just missed a couple CSS/structural details. You need to add a style definition for the .clear class, as follows:
.clear{
clear:both;
}
Then, you need to move the .clear div element at the bottom of .sc_admin_content out of it, so that it lies in between .sc_admin_content and .sc_admin_footer.
Here's a JSFiddle example of what this would then look like. (Try deleting content and pressing "Run", and see that the footer stays stuck to the bottom!) If this isn't what you were looking for, let me know and I'll be happy to help further. Good luck!
Use four z-layers in your code:
At the top, put your text with opaque background.
In the layer below it, put one copy of your footer using position: fixed; in its class.
In the layer below that, have a div that is height: 100%; width: 100% and is opaque (i.e., has the same background color as your text) and travels with your text on scroll.
In the layer below that, put another copy of your footer that will travel with your text on scroll.
The z-order of these elements might not produce the exact effect, but it should point you in the right direction.
I have a grid with one div taking up around 30% and the other 70%. In the 30% div, I have 4 images stacked vertically. In the 70% div I have content. How could I dynamically resize and crop the 4 images equally so they equal the height of the 70% content div. I know I could resize the images manually, but I'd like them to auto-adjust if content is added or removed. Also, the design is responsive. Here is a jsfiddle:
http://jsfiddle.net/fETtm/
Here is my HTML:
<section>
<div id="inner-content" class="wrap">
<aside class="fourcol first">
<img src="https://www.slooh.com/images/signup/m42_png_sm.png">
<img src="https://www.slooh.com/images/signup/m42_png_sm.png">
<img src="https://www.slooh.com/images/signup/m42_png_sm.png">
<img src="https://www.slooh.com/images/signup/m42_png_sm.png">
</aside>
<article class="eightcol">
<h3>H3 Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
</div>
</section>
Thank you for any help.
overflow: hidden will cut anything outside the element it is applied (here .wrap your container).
Demo: http://jsfiddle.net/fETtm/1/
By removing your images from the flow (position: absolute), only the right column is still in the flow and will define the size of its container. Now any bit of image that is outside this box won't be displayed.
As the left column was removed from the flow, your text now occupies the whole width of its container so it needs padding-left (same value as the width of your images).
HTML: same as yours
CSS:
.wrap {
position: relative;
overflow: hidden;
outline: 1px dashed purple;
max-width: 1140px;
width: 96%;
margin: 0 auto;
}
.fourcol {
width: 31.491712705%;
position: absolute;
}
.eightcol {
width: 65.74585634900001%;
position: relative;
float: left;
margin-left: 2.762430939%;
padding-left: 31.491712705%;
}
.first {
margin-left: 0;
}
Having this issue getting a background to work... It requires an image of 3 parts.. (top, center, bottom)
I've got it close.. i'm sure i'm missing something easy... Please check out this jsfiddle and see if it can get dialed in!
http://jsfiddle.net/bb6hZ/
Thanks!!
What I have:
<article>
<div class="bg1">
<div class="bg2">
<h2>post name title here yo</h2>
<span class="meta">September 10, 2012</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</article>
I'm using two extra bg div's to try and acheive this... I created the image file already, it is located here: http://www.pacificcheese.com/img/int/bg_article.png
I've done this many times before in the past I just can't remember exactly how... Haven't needed to use this method in years.
Help would be appreciated!!! THanks!
got it!
the trick is to float all the elements... see js fiddle:
http://jsfiddle.net/bb6hZ/2/
article,.bg1,.bg2 {background:url("http://www.pacificcheese.com/img/int/bg_article.png") -556px 0 no-repeat; float:left;}
article {display:block; width:556px; background-position:0 0; padding-top:130px;}
.bg1 {background-repeat:repeat-y;}
.bg2 {background-position:-1112px 100%; margin:-130px 0; padding:30px 20px 45px;}
try this:
.bg1 {background-repeat:repeat-y; border:transparent 1px solid; }