Hi I'm coding a static webpage with bootstrap-responsive CSS and I'm having problems when I resize the window.
I have this section that disappears when I resize the screen:
<div class="span9 nav">
<h1><span class="logo"><em>Academia</em> <b>GEO</b></span></h1>
<ul>
<li><img src="img/icons/mail.png"></li>
<li><img src="img/icons/phone.png"></li>
<li><img src="img/icons/fb.png"></li>
</ul>
</div>
I don't know why the div is not resized propperly as expected.
This is the page:
http://209.141.57.95/
As you can see when you use a small screenthe blue div at the top of the page disappears and the content is displayed in the white body.
Any idea why is this happening?
Regards
Simply add the built in bootstrap style of 'clearfix' onto your span:
<div class="span9 nav clearfix">
This will sort it out.
This is a clearfix problem; because all of the elements inside your div are floated, the div collapses down so that it has no height.
This can be fixed easily like this:
<div class="span9 nav">
<h1><span class="logo"><em>Academia</em> <b>GEO</b></span></h1>
<ul>
<li><img src="img/icons/mail.png"></li>
<li><img src="img/icons/phone.png"></li>
<li><img src="img/icons/fb.png"></li>
</ul>
<div style="clear: both;"></div>
</div>
<div style="clear: both;"></div> kinda worked for me, but the real problem was that I shoulda had col-xl instead of col-sm or col-md. Durp.
Related
I want to style the header after the menu to be the same as the header before the menu.
Here is the page: https://www.nikolay100.com/en/?option=com_rspagebuilder&view=page&id=6
I cannot figure out why the column of the "Language switcher" is displayed so big. I want it to be as small as the one on top.
Also I would like the footer background of the top footer to be displayed in full width of the page. The same as the footer bellow.
Which css styles should I change and how.
Any help will be really appreciated.
Language switcher: the class 'col-md-4' makes the width 33.33%. The html (with inline styling) will have the wanted result.
<div class="col-md-4 duration-500" style="text-align: right;">
<div id="lang_and_search" style="background-color:#efefef;padding:5px;width: auto;display: inline-block;">
<div class="rspbld-module" style="padding:5px;">
<div class="mod-languages">
<ul class="lang-inline" dir="ltr">
<li><img src="/media/mod_languages/images/bg.gif" alt="Български" title="Български">
</li>
<li class="lang-active">
<a href="https://www.nikolay100.com/en/?option=com_rspagebuilder&view=page&id=6">
<img src="/media/mod_languages/images/en.gif" alt="English (UK)" title="English (UK)"> </a>
</li>
</ul>
</div>
</div>
</div>
</div>
For the footer, it's because it's within the class 'container'. This has a max-width. Move the footer outside the container.
I've got a problem with my header menu. The menu div is inside a container (width 1240px) and the div is 100%. I would like to have a full green colored menu (like above from Stack Exchange).
Can I change it with CSS? Could anybody help me please?
You'll need to take the menu div out of the container and place it above.
If you are using bootstrap, you could use container-fluid, if not follow the answer of Jordan and move the menu out of the container
Assuming this is your situation
<div class="container" width="1240px">
<div class="menu" width="100%">..</div>
</div>
You can either do the following
<div class="menu" width="100%">..</div>
<div class="container" width="1240px">
</div>
or
<div class="container-fluid">
<div class="menu" width="100%">..</div>
</div>
I am trying to split a row in two, for text and an image. However, no matter what I set the size of my divs, they display on separate lines.
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<ul class="nav">
<li><a class="home" href="#home>">Home</a><li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-6" id="first">JUSDHFLKSADHFLK</div>
<div class="col-md-6" id="second">JKSDNF,ASDNF,ASD</div>
</div>
</div>
I have agonized over this simple issue and checked the documentation closely. Am I missing something simple?
The code is written using codepen.io
There is no CSS and the width is large enough for col-md
Thank you
set your desired width with display:inline-block; which will make your div to exactly take the width what you gave
If your bootstrap is loading correctly, you may be loading it on a screen too small for col-md-6. Here is a working example using col-xs-6 so you can see them working side by side --> https://jsfiddle.net/mmcshinsky/kgb52j3e/
I forgot to include the external CSS for bootstrap in the codepen settings :)
Thanks for the help!
Having a problem with pretty simple website. It's a vertical scroll with a left side nav. When I click a menu item, it won't position the section to the top of the page. I've tried a few solutions from the community but it doesn't work with my setup.
Here's a jsfiddle: http://jsfiddle.net/U44Ut/
Here's a basic of the layout:
<div id=wrap">
<div id="left">
<div id="nav">
<ul>
<li>item 1</li>
</ul>
</div>
</div>
<div id="right">
<div id="content">
<div id="item1">CONTENT HERE</div>
</div>
</div>
</div>
Thoughts?
You're code is working properly, your problem is that the top of the elements you are linking to are not where you expect them to be.
This is the quick fix to your problem: http://jsfiddle.net/U44Ut/8/
I put <span id=""> tags around the text in your <h1> tags and linked to their id's. But you really should clean up your code.
I have a page that looks great in every browser except IE 7, where the table in the center overlaps the grey section below. I have a fixed height on the center section for continuity between pages, so that needs to stay in place.
http://www.bikramyoga.cz/rozvrh.htm
I have tried to add a min-height, max-height, etc, !important declarations and the like, and nothing seems to keep the table within the 510px container.
I have run into this problem a couple of times. Try adding:
<div style="clear: both;"></div>
Right after:
<ul id="legend">
<li><img class="rozvrh" src="img/dot.png" alt="czech class">Česká lekce</li>
<li><img class="rozvrh" src="img/box.png" alt="english class">Anglická lekce</li>
<li><img class="rozvrh" src="img/dud.png" alt="babysitting">Česká lekce s hlídáním dětí</li>
</ul>
</div>