I have a bootstrap page, Which is completely resposnive .
But for some reason, when I resize the browser, one of the div's images are getting displaced.
My code structure is like
<body>
<div class="header-wrapper">
-----
</div>
<div class="content-wrapper">
----
</div>
<div class="content-wrapper">
----
</div>
</body>
Is there anything standard which should've been there which I am missing regarding these displacements or it is something with my written code?
Please suggest
Add "img-responsive" class to the image tag
<img src="..." class="img-responsive" alt="Responsive image">
http://getbootstrap.com/css/#images-responsive
Some of the elements in bootstrap don't work out within your layout if you're not wrapping the entire html content inside of your body tag with a div.container or div.container-fluid. It doesn't appear like you did that from your shared code. See below:
<body>
<div class="container"> <!--To wrap the doc, or conatiner-fluid for a wider container. -->
<div class="header-wrapper">
-----
</div>
<div class="content-wrapper">
----
</div>
<div class="content-wrapper">
----
</div>
</div> <!--add # end of doc -->
</body>
Above, would be my very first suggestion if you have not yet wrapped your document with a container.
Related
So I want the following layout:
Here is an artists mock-up:
But here is what I ended up with after trying for quite a few days:
I need help to make the last elements line up right. If I use the wrong components you are free to change them. The site needs to be mobile friendly. I have made a fiddle here.
.
I also seem to have the issue of being unable to scroll vertically on the page if overflow occurs.
In bootstrap 3 seems a simple layout like this (just a suggestion)
<div class='container-fluid'>
<div class='navbar navbar-default navbar-fixed-top'> .... <(div>
</div> <!-- end container full width -->
<div class='container'><!-- begin container center margin auto -->
<div class=' col-md-12'><img src='yourlink'></div>
<div class=' col-md-12' ><h1>Title</h1></div>
<div class='jumbotron col-md-12' </div>
<div class='row col-md-12>
<div class='col-md-6>
... content for left lower box
</div>
<div class='col-md-6'>
<div> content for r2ght lower 1 box</div>
<div> content for right lower 2 box</div>
</div>
</div>
</div><!-- end of container --!>
with a background image
I am working on a page and i got stuck. (Yes, I´m a beginner :-) .)
I have a Header followed by a section. I want to have pictures that is between the header and section. I have positioned the image but it keeps going "under" the header so that you don't see half of it. I been trying to use z-index but i want work? My goal is to have half of the picture in the header-section and half if the other section.
Any tips? The beginning of my code is below (I omitted html, head for convenience).
<div class="big_mama">
<header>
<nav class="main_nav">
<ul>
</ul>
</nav>
</header>
<section id="section">
<article class="article">
<div class="pictures">
<img src="#" />
</div>
</article>
<article class="article">
<div class="pictures">
<img src="#" />
</div>
</article>
</div>
First, you should place the image in header section. Set the header with the property position:relative, set position:absolute for the image you want to put and set bottom:-50% or bottom:0px; margin-bottom:-50%.
<header style="position:relative">
<img src="#" style="position:absolute; bottom:-50%">
This should do the trick.
Cheers.
I currently have my layout page divided into two columns using bootstrap 3 with something similar to this.
<div class="row">
<div class="col-md-4 info">
<!--some Markup -->
</div>
<div class = "col-md-8 tasks-column">
<!--some Markup -->
</div>
</div>
I want the div with class "info" to stay fixed on the top left side when scrolling the page. When I try the bootstrap "affix" class the content in "info" effectively gets fixed but the "tasks-column" suddenly moves all the way to the left completely covering it.
I have also tried the plain css position:fixed; on "info" but it does not do anything.
The content in info is NOT a navigation panel.
Thank you guys.
Edit: the content in info is dynamic (it varies depending on the user input).
You need to offset the tasks-column. Try this.
<div class="row">
<div class="col-md-4 info">
<!--some Markup -->
</div>
<div class = "col-md-8 col-md-offset-4 tasks-column">
<!--some Markup -->
</div>
This is because you are fixing the content that pushes "tasks-column" to the right.
The simple way to do what you want is just to move "info" inside col-md-4, like this:
<div class="row">
<div class="col-md-4">
<div class="info">
<!--some fixed Markup -->
</div>
</div>
<div class="col-md-8 tasks-column">
<!--some Markup -->
</div>
</div>
Hope this helps!
I have the following HTML page (see jsfiddle) that contains a parent div with three children divs. I'm expecting to see the three divs one next to the other. Instead, I see that each child div is contained inside its sibling.
My web page HTML contains this:
<div id="div1">
<div id="div11" />
<div id="div12" />
<div id="div13"/>
</div>
however when I do "Inspect element" (in both IE and Chrome) I get this:
<div id="div1">
<div id="div11">
<div id="div12">
<div id="div13"></div>
</div>
</div>
</div>
What's wrong with this markup?
<div> elements are not self-closing in HTML4 or HTML5; you need to add an end tag for each one. Thus this:
<div id="div1">
<div id="div11" />
<div id="div12" />
<div id="div13"/>
</div>
should be this:
<div id="div1">
<div id="div11"></div>
<div id="div12"></div>
<div id="div13"></div>
</div>
The browser will fill in the missing closing tags, which is why you've got the nested structure--the browser assumes that the tree was supposed to be nested and closes the tags appropriately.
You can always run your code through an HTML validator (e.g. http://validator.w3.org) to check for simple errors like this.
Div is an open-close tag.
you should specify the open tag <div> with the siblings as you did in the parent div .
here's the right markup
<div id="div1">
<div id="div11">
</div><!--end div11-->
<div id="div12">
</div><!--end div12-->
<div id="div13">
</div><!--end div13-->
</div><!--end parent div-->
I know the very basics of CSS and recently went on with using CSS frameworks because it made my life much easier. I have a question in terms of grid systems, am currently using zurb foundation 3 (http://foundation.zurb.com/)
The problem am facing is mostly when creating a row i cannot give it a specific height. It seems to me like grid systems are designed to use as it is, I read in different places that it is not recommended to try and change the height of a row and to just place items inside it as it is.
In my project, I have a content area whereby I want to display a fixed height and width div but its not working for me. so, can any one advise me what should i do? below is my html code
update: edited the html
<div class="row">
<div class="six columns">
<div style="height:6em; width:5em;>
<!-- my block -->
</div>
</div>
<div class="six columns">
<div style="height:6em; width:5em;>
<!-- my block -->
</div>
</div>
</div>
Your 'style' declarations are wrong
style="height=6em; width:5em;
should be
style="height:6em; width:5em;"
NOTE: you used = instead of : AND you missed the closing quotation "
And you should not use inline styles - separate to a .css file and target them by class
<html>
<head>
<link rel="stylesheet" type="text/css" href="/foundation3/stylesheets/foundation.css"/>
</head>
<body>
<div class="row">
<div class="six columns">
<div style="height:6em; width:5em;">
<!-- my block -->
</div>
</div>
<div class="six columns">
<div style="height:6em; width:5em;">
<!-- my block -->
</div>
</div>
</div>
</body>
</html>
NOTE: I have not declared a DOCTYPE here - this is barebones. It does work I have tested it in Firefox and Chrome. Just stating it does not work is not helpful OP