I'm a newbie in the world of web development. So, please don't mind if this is a really dumb question but I was doing a project for Free Code Camp and I ran into this problem where I just couldn't get rid of the spaces on left and right.
Here is my pen which I'm coding:
http://codepen.io/K-Jabeen/full/oxOjjQ/
<section id="home">
<div class="container-fluid">
<center>
<br>
<img class="img-responsive" src="http://ivanmyc.site11.com/wp-content/uploads/2014/07/Web-Development_icon.png" />
<h1>Pixel Developers</h1>
<h4>Where pixel perfect web solutions are created...</h4>
<br>
<br>
<br>
<br>
<br>
</center>
</div>
</section>
Plz tell me how to solve this.
Thanks!
Remove the container-fluid class from the first div:
<div class="container-fluid">
...so it becomes:
<div>
Alternatively, you can add margin: 0 -15px; to the css of #home.
Your main page should have this css added to it: margin:0 auto;width:100%;The word 'auto' tells the browser to keep the main page centered no matter how wide the screen is. Width 100% tell the browser that image spans the screen from side to side. That should get rid of any side gaps. Make sure your code does not have any existing side margins or padding. If so, set it to zero.
Related
I am sure this is a very confusing matter for most new developers.
And i am sorry if this subject was asked before, but i cant find a solution for a long time.
I am trying to create a video cover background, place some divs above it and then keep making divs under it.
Things become a little complicated when i started to work beneath the video cover.
- they appear beneath which is okay, but styling them with for example margins or placing tags affect immidiately the video cover div above which is confusing.
this is my code:
<html>
<head>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="header-video" style="background: #0e284d url('https://cont-edu.technion.ac.il/wp-content/themes/cont-edu/assets/images/intro-video-poster.jpg?v=1.1.65') 50% bottom no-repeat;">
<video preload="none" poster="https://cont-edu.technion.ac.il/wp-content/themes/cont-edu/assets/images/empty.gif" autoplay loop>
<source src="https://cont-edu.technion.ac.il/wp-content/themes/cont-edu/assets/images/intro.mp4?v=1.1.65" type="video/mp4">
</video>
</div>
<div class="header-bg js-parallax" style="background: #0e284d url('https://cont-edu.technion.ac.il/wp-content/uploads/2016/04/intro-home.jpg') 50% 0 no-repeat;">
</div>
</div>
<div style="z-index: 100;">
<p>
some text here
</p>
</body>
</html>
preview pen
I am willing to place a video cover at the top of the sit. then add some content above the video. and then keep adding content under the video without affecting the positions and styles of the video and its above content.
any help would be aprriciated. thanks!
EDIT: By under the video i mean down the webpage..not actually under the video.
Not sure if this is the professional way to make it work.
I had to create another div under the video. and it also had to be with some content in it.
I have added a div with visibility set to hidden.
Then i could keep working on rest of the page.
I would appriciate any further comments about the topic and improvements.
thank you!
I'm making a box based layout and I'm having issues with the gutters in bootstrap 3. Since they've been changed to be padded since bootstrap 2, every time I want to add padding to a box it completely destroys the gutter. I can't seem to find a way of remedying the problem.
I use a .box class to highlight the box from it's gutter and give them background colours and images. I want padding inside the box for the text so it's not right on the edge of the box walls, so I made a .box-inner class, but I can't just apply padding to it :/
<div class="col-md-12">
<div class="row">
<div class="col-md-6">
<div class="box">
<div class="box-inner">
<h1>Test2</h1>
</div>
</div>
</div>
</div>
</div>
Any help would be very appreciated! I've been banging my head against the wall for hours.
Fiddle here, I highlighted the problem areas with a comment:
http://jsfiddle.net/kbj8dd0e/6/
Sure you can add padding. Just add it to the .box.
Have a look at this:
http://jsfiddle.net/kbj8dd0e/5/
(note that I changed the col-md to col-xs to make it show better in that small fiddle pane, but the same should work for any col class.)
All I did was move the padding to the .box class to be able to remove the redundant .box-inner. I also removed all your instances of <div class="row"><div class="col-md-12">...</div></div> as this just adds markup and serves no purpose whatsoever.
Or am I missing something here?
I have a pre-code page coded as follows:
<div id="linearBg">
<div id="wrapper">
<div class="logo"></div>
<div class="navigation"></div>
<div class="video"></div>
<div class="content"></div>
</div>
</div>
Where linearBg is a gradient background, the back board of the website.
Wrapper is the container for the inner div's, and the rest are content oriented.
So I've already implemented this with styles and all sorts, but the thing is I want to add:
<div class="watermark"></div>
Underneath/behind both the content and video div, sort of like a reverse watermark,
I've tried z-indexing but I'm not an expert. Could you guide me on to do make this possible?
http://jsfiddle.net/nEWCP
All I need is to get the watermark behind both the video and content div's.
Something like this?
http://jsfiddle.net/yXTYM/3/
The trick is:
position: relative on the video and content div
position: absolute on the watermark div and no positioning, so that it starts where the previous element (nav) ended
height: 100% on the watermark so that it spans to the bottom of the wrapper
overflow: hidden on the containing div so that the watermark doesn't extend below it
Let me know if this is what you had in mind.
From your description, I don't think that you would even need a new HTML element. If you want a "reverse watermark" as you've described it, it sounds like you want a different background behind the content and video elements. Something different from the gradient.
Really all you need to do is define a class in your CSS that adds the watermark when you need it.
Here's a basic example. The orange color simulates your watermark behind only the video and content.
.watermark { background: url('/path/to/watermark.png'); }
<div id="linearBg">
<div id="wrapper">
<div class="logo"></div>
<div class="navigation"></div>
<div class="video watermark"></div>
<div class="content watermark"></div>
</div>
</div>
http://jsfiddle.net/82saE/
I think I have what you're after - a wrapping element that mirrors the dimensions of linearBg - giving you a gradient background with a repeating image as well.
I'm trying to implement the following scenario, using Twitter Bootstrap and Fluid Layout :
Left sidebar (I don't care whether the width is fixed or not) - occupying the WHOLE HEIGHT (no margins at all, like the sidebar in jsfiddle.net)
The rightmost part of the content, will occupy the remaining part of the window (fluid)
I've tried setting it up like that, but it definitely doesn't work (there are margins everywhere and the columns definitely don't occupy all of the vertical space) :
<div class="container-fluid" style="">
<div class="row-fluid" style="">
<div class="span3" style="">
</div>
<div class="span9" style='background:#fff;'>
</div>
</div>
</div>
Any ideas? How would you go about this?
Not totally sure but I think this might work...
Put height:100% on the html and body elements of your page.
Then give the element that you want to be the full height of the page a min-height:100%
Hope that helps.
I am creating a web page with 3 columns. The middle column is where all the content goes. The content I want to enter has to be in the format of left aligned image, followed by some text next to the image. And this flows throughout the column with different images and corresponding text. Since my layout is a div based layout, I have put a main div (page_content )for the column. Then the heading (h4) and below the heading I have entered another div. This div in turn contains individual divs that are nested with div (class photo) for image and div (class lat_art) for text. The HTML code and CSS code has been given below. My issue is that the first image and text comes up, but subsequent get lined up vertically below the first text i.e occupies only the 50% of the div and floats right, pushing its corresponding text below it in the same 50% space. Should I specify a height for individual divs, probably the image is bigger than the text. But if I do that won’t my code become static. I want it to be dynamic. Please help.
HTML Code
<div id="page_content">
<h4 class="center_cap">LATEST ARTISTS</h4>
<!--Div for the content begins here-->
<div>
<!--Individual div begins here-->
<div >
<div class="photo">
<img src="Images/guitar.jpg" alt="guitar"/>
</div>
<div class="lat_art">
<span class="artist">ROCK ON</span>
<p>
Good news to all the fans of 'Rock On'. Concerts all around the world.
</p>
</div>
</div>
<!--Individual div ends here-->
<!--Individual div begins here-->
<div >
<div class="photo">
<img src="Images/guitar.jpg" alt="guitar"/>
</div>
<div class="lat_art">
<span class="artist">ROCK ON</span>
<p>
Good news to all the fans of 'Rock On'. Concerts all around the world.
</p>
</div>
</div>
</div>
<!--Div for the content ends here-->
</div>
Code from external Stylesheet
.photo{
width:48%;
float:left;
padding-left:2px;
}
.lat_art{
width:50%;
float:right;
}
It is really hard to follow because you are describing very much every other word is 'div'. Anyhow you described that you have three columns but If I understood correctly it is just the middle one you are asking about.
You want this format:
picture to the left
Right of the picture you have a header
Under the header you have a lot of text that wraps around the picture
Correct?
You problem is that you float, but you don't clear the float. This means that all content under it will be align according to the picture. What you need is to set clear:both after you don't want the content to wrap anymore.
I wroted a little example and tested it. CSS is inline to make the example short and simple.
<div>
<img src="pircture.png" style="float:left;height:400px;width:400px" />
<h4>My header</h4>
<p> A little content</p>
<div style="clear:both"></div>
</div>
You can probably save yourself a lot of time and aggrevation by using the YUI Grids CSS from Yahoo!
I'm not 100% sure that I understand the question. If you actually want what you are calling individual divs to have a picture on the left and text on the right, you can accomplish this by floating both the photo and the lat_art div left. If you actually want the text to be on the right and to flow under the picture if it is longer, do not float the 'lat_art' at all.
There is no need to specify a height on the individual divs, or to clear floats on them as they will fall one below the other by default (divs are blocks).
You are falling victim to divitis here as well - <span class="artist">ROCK ON</span>
could likely be something more meaningful like <h5 class="artist">ROCK ON</h5> or a paragraph or something else styled accordingly.
The img could just as easily be:
<img src="Images/guitar.jpg" alt="guitar" class="photo"/>
rather than:
<div class="photo">
<img src="Images/guitar.jpg" alt="guitar"/>
</div>