I just want to thank everyone for being so helpful, I would of never learnt so much if it wasn't for your guys continual helpfulness.
I'm trying to make a 4 way vertical "collage" of some images without spaces between each picture that is fully responsive when resizing the window and such. The problem I'm having is with space between each photo; I'm trying to figure out how to allow no space between each.
I also encounter a problem when resizing the window to be smaller in which the images flow away from the lion image above and make more white space or padding without sticking to the lion image. It also starts to overlap the lion image when resizing to a bigger size.
.image {
background-image: url(https://s-media-cache-ak0.pinimg.com/originals/31/91/d7/3191d75f03ba7d4c570358870c855ed7.jpg);
background-repeat: no-repeat;
height: 850px;
background-size: 100%;
}
#collage {
width: 90%;
}
<div class="image">
<ul id="nav">
<li id="brand">MINIMAL</li>
<li id="navm">Men</li>
<li id="navm">Women</li>
<li id="navm">Contact</li>
</ul>
<h1>Simplicity is Minimal</h1>
<div id="home">
Shop Now
</div>
</div>
<div class="row">
<div class="col-md-3" align="center">
<img id="collage" src="https://upload.wikimedia.org/wikipedia/commons/2/27/Panthera_tiger_in_a_marshy_area_in_captivity.jpg">
</div>
<div class="col-md-3" align="center">
<img id="collage" src="https://upload.wikimedia.org/wikipedia/commons/2/27/Panthera_tiger_in_a_marshy_area_in_captivity.jpg">
</div>
<div class="col-md-3" align="center">
<img id="collage" src="https://upload.wikimedia.org/wikipedia/commons/2/27/Panthera_tiger_in_a_marshy_area_in_captivity.jpg">
</div>
<div class="col-md-3" align="center">
<img id="collage" src="https://upload.wikimedia.org/wikipedia/commons/2/27/Panthera_tiger_in_a_marshy_area_in_captivity.jpg">
</div>
</div>
You need to just add below css and I hope it works.-
*{
margin:0px;
padding:0px;
}
.image {
height: auto;
}
body img {
display: block;
}`
Related
I cant change the height only the width works? I dont understand:)
.image-size{
width: 100%;
height: 50%;
}
<div class="container">
<div class="row">
<div class="page-header">
<div class="col-md-8">
<nav class="navbar navbar-default navbar">
<div class="navbar-header">
<a class="navbar-brand" href="#">Lexicon</a>
</div>
<ul class="nav navbar-nav">
<li>Java Fundamentals</li>
<li>Java Advanced</li>
<li>Front-End</li>
<li>Test and Management</li>
<li>Java Enterprise</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="jumbotron">
<div class="row">
<div class="col-md-12" align="center">
<img class="thumbnail image-size" src="https://academy.oracle.com/en/oa-assets/i/c82/c82-java-prog-logo.jpg" class="img-responsive image-size">
</div>
</div>
</div>
</div>
Im using bootstrap does i have anything to do with my problem? Why does the whole image change size when i just change the width.
it is because the Col that contain the img don't have height and you can't give % value to image because the parent don't have any height to get the 50% of that!
in other hand you can make it possible with "px";
.image-size{
width: 100%;
height: 250px;
}
Or add height for container Col
You should set specific height for parent of image (class=col-md-12)
For example:
.col-md-12{
height: 100px;
}
.image-size{
width: 100%;
height: 50%;
display: block;
}
Your should provide height to parent first before assigning to a child.
You haven't set the parents height . i.e. div's height so that it the will know what 50% means.
<div class="col-md-12" align="center" style='height:100px'>
<img class="thumbnail image-size" src="https://academy.oracle.com/en/oa-assets/i/c82/c82-java-prog-logo.jpg" class="img-responsive image-size">
</div>
I do not support inline styling.
we can set height pixel it will work
.image-size {
height:300px;
width :100%;
}
<div class="col-md-12" align="center">
<img class="thumbnail image-size" src="https://academy.oracle.com/en/oa-assets/i/c82/c82-java-prog-logo.jpg" class="img-responsive image-size">
</div>
And if you want to set the height with percentage you have to set position:absolute to the image like
.image-size {
height:50%;
width:100%;
position:absolute;
left:0;
top:0;
}
<div class="col-md-12" align="center">
<img class="thumbnail image-size" src="https://academy.oracle.com/en/oa-assets/i/c82/c82-java-prog-logo.jpg" class="img-responsive image-size">
</div>
you can use css style
.thumbnail, .image-size, src {
height: 50%;
width: 100%
}
I have a question about this: https://gyazo.com/1851299f16c3148c81f8e83682d38ff1
https://gyazo.com/05adf6012ba98bbae93ecda4dabbdffa
It can be a stupid question or just a stupid code. But how can i get that long block away? My logo is scaled and correct. But if i delete that long div block, then the logo unscaled, and be big.
Need advice.
Thankyou!
I created a few examples on jsfiddle for you.
1)
To get rid of the black bar you could do something like this:
<div class="wrapper">
<div class="Logo">
<img class="LogoNav" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/9front_logo.svg/150px-9front_logo.svg.png">
</div>
<li>Home</li>
<li>Over</li>
<li>Contact</li>
<li>bestellen</li>
</div>
example:
https://jsfiddle.net/x4912b7s/1/
2)
To move the links to the right of the logo, but still inside the black box:
.LogoNav {
width: 25%;
height: auto;
float: left;
}
example: https://jsfiddle.net/x4912b7s/2/
3) To remove the black box and move the links next to the logo:
html
<div class="wrapper">
<div class="Logo">
<img class="LogoNav" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/9front_logo.svg/150px-9front_logo.svg.png">
</div>
<li>Home</li>
<li>Over</li>
<li>Contact</li>
<li>bestellen</li>
</div>
css
.LogoNav {
width: 25%;
height: auto;
float: left;
}
example: https://jsfiddle.net/x4912b7s/3/
Hopefully this helps.
I need to have some text go over a background image. Looking around it seems like the way to do it is like this:
<div align="center" style="">
<h1>About Us</h1>
some text and more for the sub headline
<br/><br/>
<img src="aboutbg.jpg" style="width:500px; position:fixed; z-index:-1;" />
<div style="width:500px; position: relative; z-index:1;" >
About Us
</div>
</div>
but something seems to be off with the position:fixed of the <img>, and it's not centered correctly. The end result is:
What am I missing?
It's obeying the text-align statement you have on an ancestor element. You'll need to set its left position to 0, and possibly top as well.
It would probably be better to make the background an actual background.
.content {
text-align: center;
background-image: url(http://lorempixel.com/1200/800/nature);
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
overflow: hidden;
min-height: 400px;
color: yellow;
}
<div class="content">
<h1>About Us</h1> some text and more for the sub headline
<br/>
<br/>
<div style="width:500px; position: relative; z-index:1;">About Us</div>
</div>
Here it is with inline styles.
<div style="background:url('aboutbg.jpg') no-repeat;width:500px;text-align:center;">
<h1>About Us</h1>
<p>some text and more for the sub headline</p>
<br/>
<br/>
<ul style="list-style:none;">
<li style="border-right:1px solid #000;display:inline;margin-right:7px;padding-right:7px;">About Us</li>
<li style="border-right:1px solid #000;display:inline;margin-right:7px;padding-right:7px;">Terms</li>
<li style="display:inline;">Contact</li>
</ul>
</div>
I am using an absolute div so I can overlap one div from another. The div that overlaps is the absolute one (.content). However, if the overlapped div (.left) doesn't fit the screen, a horizontal scroll bar doesn't appear of course. How can I make the horizontal scroll bar automatically appear if its contents doesn't fit the given width? Here is the css:
.left {
width: 70%;
height:100%;
float:left;
overflow-x:auto;
}
.content {
position: absolute;
width: 70%;
height: 100%;
margin-top: 0px;
margin-bottom: 0px;
margin-right: 0px;
margin-left: 130px;
background-color: #2b3e50;
border-left-width:5px;
border-left-style:solid;
border-left-color:#153450;
padding-left: 20px;
}
Please help me figure this out.
EDIT
Here is the div structure:
<div class="topbar">
<div class="fill">
<div class="container">
Home
<ul class="nav">
<li> One </li>
<li> Two </li>
<li> Three </li>
<li> Four </li>
</ul>
<p align="right">Log-out </p>
</div>
</div>
</div>
<div id="loader" class="left" style="border-right-width:15px;">
</div>
<div class="container">
<div class="content">
<div class="row">
<div class="span14">
#content
</div>
</div>
</div>
</div>
<script>
$("#loader").html('<object data="#routes.Tags.map(false)" />');
</script>
EDIT
I surrounded the left div with a parent div.
<div class="parent">
<div id="loader" class="left" style="border-right-width:15px;">
</div>
</div>
<div class="container">
<div class="content">
<div class="row">
<div class="span14">
#content
</div>
</div>
</div>
</div>
With the following css for parent.
.parent {
width: 100%;
position: relative;
}
But still doesn't show a scrollbar.
In your html left is not child of content you can't make it scroll.
If you have parent > child then just use position: relative on parent block.
Here is example http://jsfiddle.net/4swN9/
I am building a website and I have three ads towards the bottom of my page. They appear but on there own line. I have tried everything from creating a floating div to removing divs. But I can't seem to figure out what part of the CSS isn't allowing these boxes to be straight across the page.
Here is the code for the three boxes:
<div class="wrapper margin-bot1">
<div class="bg-3">
<div class="indent">
<div class="wrapper margin-bot">
<img src="http://www.webstertoolbox.com/media/wysiwyg/images/page1_img1.png" alt="" />
<img src="http://www.webstertoolbox.com/media/wysiwyg/images/logo_archilume.png" alt="" width="150" height="41" />
</div>
<ul class="ul-1">
<li>Made in USA </li>
<li>Expert Domestic Tech Support</li>
<li>High-end installations</li>
<li>Robust features</li>
</ul>
<a class="button-1 margin-left" href="more.html">Click to Order Now!</a>
</div>
</div>
<div class="bg-3">
<div class="indent">
<div class="wrapper margin-bot">
<img src="http://www.webstertoolbox.com/media/wysiwyg/images/page1_img1.png" alt="" />
<img src="http://www.webstertoolbox.com/media/wysiwyg/images/GenLume-Logo.png" alt="" width="103" height="41" />
<div class="extra-wrap"> </div>
</div>
<ul class="ul-1">
<li><a class="test123" href="moreGEN.html">Quick solutions</a></li>
<li>Turn-key applications</li>
<li>Certified</li>
<li>Competitive pricing</li>
</ul>
<a class="button-1 margin-left" href="moreGEN.html">Click to Order Now!</a>
</div>
</div>
<div class="bg-3">
<div class="indent">
<div class="wrapper margin-bot">
<img src="http://www.webstertoolbox.com/media/wysiwyg/images/page1_img1.png" alt="" />
<div class="extra-wrap">
<h4>DuraLume</h4>
<h5>Series</h5>
</div>
</div>
<ul class="ul-1">
<li>Expert Domestic Tech Support</li>
<li>Made in USA </li>
<li>Custom solutions</li>
<li>On-site Engineers</li>
</ul>
<a class="button-1 margin-left" href="more.html">Click to Order Now!</a>
</div>
</div>
</div>
I can't figure out how to properly show the CSS but you can find the actual site here: http://www.webstertoolbox.com/
If you look below the Big banner you will see an ArchiLume, GenLume and DuraLume boxes that run vertically down the page. I want them to appear across the page.
Can someone please tell me what I did wrong and how to fix it?
Thanks,
Frank G.
Very easy and fast to fix it.
Just change your css file named homeads.css on line 128:
.bg-3
{
background: url(../images/bg-4.png) left top no-repeat;
width: 33%; // Changed this from 100% to 33%
height: 322px; //Changed from 268px to 322px
overflow: hidden;
float: left; // Added the float left
}
Cheers,
Thanos
EDIT: After doing the change above you will need to add a couple more changes to fix a couple of things that will get a bit misaligned.
Such as the right border will not be visible anymore. Below are the changes you will need to do to fix that as well.
On homeads.css line 33:
.main
{
width: 950px; // Reduced this to match with the parent's width
padding: 0;
margin: 0 auto;
position: relative;
}
On sceleton.css line 25:
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .grid_13, .grid_14, .grid_15, .grid_16, .grid_17, .grid_18, .grid_19, .grid_20, .grid_21, .grid_22, .grid_23, .grid_24
{
float: left;
display: inline;
//margin-left: 5px; Remove these 2
//margin-right: 5px; Remove these 2
}
EDIT2: The first box is getting pushed down a little bit. That is caused because on the first box you are missing a div <-> on the second and third box you have an extra div inside them.
<div class="wrapper margin-bot">
<img src="http://www.webstertoolbox.com/media/wysiwyg/images/page1_img1.png" alt=""> <img src="http://www.webstertoolbox.com/media/wysiwyg/images/duralume.gif" alt="" width="103" height="41">
<div class="extra-wrap"> </div> // THIS IS THE EXTRA DIV
</div>
You have 2 choices here:
1) Add the div
<div class="extra-wrap"> </div>
to the first box
2) Remove that div from box 2 and 3.
.cms-home class help you do not affect other pages layout. Add in your stylesheets:
.cms-home .wrapper {
overflow: visible; //For big banner
}
.cms-home .bg-3 {
overflow: visible;
width: 33%;
display: inline-block;
}