I am writing my own template for joomla 2.5.6. I am not sure if this issue is Joomla or simply css related.
The template is simple, it has a sidebar on the left and content on the right, and a footer. Now when the content is short and there are several modules on the sidebar, the modules overlap the footer.
It looks like this:
http://imageshack.us/photo/my-images/269/screenshotmdph.jpg/
The html from index.php looks like this:
<body>
<div class="container_6">
<div class="grid_6 header">
<img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/assets/images/logo.png" alt="home" id="logo"/>
<jdoc:include type="modules" name="menu" />
</div>
</div>
<div class="container_6">
<div class="grid_6 head_logo">
<jdoc:include type="modules" name="header_logo" />
<div class="left_menu">
<div class="left_menu_content">
<jdoc:include type="modules" name="left_menu" style="xhtml" />
</div>
</div>
<div class="right_module">
<jdoc:include type="modules" name="right" />
</div>
</div>
</div>
<div class="container_6">
<div class="grid_6">
<div class="content">
<div class="content_holder">
<!-- beginn content -->
<div class="container_6">
<div class="content_component">
<jdoc:include type="modules" name="breadcrumb" />
<jdoc:include type="component" />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<div class="container_6">
<div class="grid_6">
<div class="footer">
</div>
</div>
</div>
I have used the 960-grid system which has the class clear on it, but the other classes are defined here:
.header {
background: url('../images/top.png') no-repeat;
height:93px;
width:100%;
}
.head_logo {
background: url('../images/shadow.png') repeat-y;
padding-right:10px;
padding-left:12px;
z-index:1;
position:absolute;
}
.left_menu {
background: url('../images/menuBg.png') no-repeat;
width:284px;
min-height:611px;
top:300px;
z-index:2;
position:absolute;
}
.right_module {
width:180px;
height:40px;
padding:10px;
background-color:#e9e9e9;
top:300px;
left:730px;
z-index:3;
position:absolute;
}
.content {
background: url('../images/shadow.png') repeat-y;
min-height:500px;
}
.content_holder {
background-color:#e9e9e9;
width:960px;
margin-left: auto;
margin-right: auto;
min-height:500px;
}
.content_component {
width:666px;
padding:5px 5px 5px 284px;
margin:0 5px;
}
#logo {
margin:15px 0 0 25px;
float:left;
}
.footer{
background: url('../images/bottom.png') no-repeat;
width:100%;
height:92px;
}
I am lost with this, because it should work because of the clearing class above the footer, but it doesn't.. Unfortunatedly I have no online example, its all local
Anybody an idea how I could find the error? Thank you so much
ADDITIONAL INFORMATION:
Sorry, I forgot, the
<div class="clear"></div>
Is defined in the grid.css, and looks like this:
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
I edited the question title also, sorry was wrong
Addition!!
I wanted to add a screenshot of the problem. Please look here:
http://www.bilder-hochladen.net/files/jegt-i-6f49-jpg.html
You see, the .left-menu is positioned with absolute and begins inside the .head-logo class. The .left-menu should not go inside the purple footer.
How can I tell the content divs to be equal in height with the left-menu?
Use Clear:both instead of clear:all which is not a style definition in MHO.
From what it seems, you may be placing the 'clear' div in a wrong place, but it's hard to say, not seeing the actual page with all the css attached, including the grid ones. Maybe you would be able to actually generate the page, save to your local disk and put it online?
Related
I have a section in my site that should stretch all the way across the screen.
I want to add 4 images in this section, one beside the other, and make them responsive. I want them to fill the background and breaks between them as needed. How should I modify my code below to accomplish the effects I desire?
#games {
background-color: #000;
}
#games img {
width: 100%;
height: auto;
}
.4columns {
width: 32%;
display: inline-block;
}
<section id="games" class="section section-games">
<div class="container-fluid">
<div class="row">
<img class="4columns" src="resources/media/icons/1.png">
<img class="4columns" src="resources/media/icons/2.png">
<img class="4columns" src="resources/media/icons/3.png">
<img class="4columns" src="resources/media/icons/4.png">
</div>
</div>
</section>
I think you want something like this :
.map{
margin:0;
padding:0;
}
.map img{
float: left;
width: 25%;
}
<div class="map">
<span>
<img src="http://www.inkntoneruk.co.uk/ink-cartridge-news/wp-content/uploads/2016/01/LOTRFOTRmovie.jpg" />
<img src="http://www.inkntoneruk.co.uk/ink-cartridge-news/wp-content/uploads/2016/01/LOTRFOTRmovie.jpg" />
<img src="http://www.inkntoneruk.co.uk/ink-cartridge-news/wp-content/uploads/2016/01/LOTRFOTRmovie.jpg" />
<img src="http://www.inkntoneruk.co.uk/ink-cartridge-news/wp-content/uploads/2016/01/LOTRFOTRmovie.jpg" />
</span>
</div>
I'm trying to get navigation bar of height 40px on the top which I've now, Also I position:fixed; the only problem is, everything what I put inside the divs he showing up to the right and not at the center which I want, the navigation bar need to be 100%
JS Fiddle
this is my .css code:
.container{
height:auto;
margin-top:-10px;
margin-left:-7px;
}
/*========================= TOP HEADER =========================*/
.banner{
margin: 0pt auto;
width:100%;
background-color:#d9d8d6;
border-style:solid;
border-width:1px;
border-color:#000000;
position:fixed;
position: absolute;
}
.banner-container{
height:40px;
background-image:url('http://i.imgur.com/WoVWvmy.png');
background-size:40px 30px;
background-repeat:no-repeat;
position:center;
text-align:center;
}
These divs I use in index.php
<div class="container">
<div class="banner">
<div class="banner-container">
</div> <!-- END BANNER-CONTAINER -->
</div> <!-- END BANNER -->
</div> <!-- END CONTAINER -->
I restructured a little bit. Please see: JS Fiddle
HTML
<div class="banner">
<div class="banner-container"></div>
<!-- END BANNER-CONTAINER -->
</div>
<!-- END BANNER -->
CSS
body {
margin: 0;
}
/*========================= TOP HEADER =========================*/
.banner {
margin: 0pt auto;
width:100%;
background-color:#d9d8d6;
border-style:solid;
border-width:1px;
border-color:#000000;
position:fixed;
}
Here's your best bet.
Note I changed the HTML to use an img tag. It's easier to center these, and to manage them in general, than to do the same with CSS backgrounds:
<div class="container">
<div class="banner">
<img src="http://i.imgur.com/WoVWvmy.png" class="banner-container" />
</div> <!-- END BANNER -->
</div> <!-- END CONTAINER -->
CSS:
.container{
height:auto;
}
/*========================= TOP HEADER =========================*/
.banner{
width:100%;
background-color:#d9d8d6;
border-style:solid;
border-width:1px;
border-color:#000000;
text-align: center;
}
I'm having a small HTML/CSS Bootstrap problem here. Basically I have a span4 with a picture on the left side then a span8 with a paragraph describing the picture on the right side.
<div class="container">
<div class="cent text-center">
<div class="row box" style="border:1px solid #CCC; padding:15px 0px 15px 0px;">
<div class="span4" style="height:200px;"><div class="profile pro"><img src="http://icons.iconarchive.com/icons/deleket/sleek-xp-software/256/Yahoo-Messenger-icon.png" /></div><!----profile END---></div><!---span4--->
<div class="span8 section">
<h3 align="center">Title</h3>
<div class="team">
<p class="team">this is the description about the picture this is the description about the picture this is the description about the picture this is the description about the picture.</p>
</div><!---team END--->
</div><!---span8--->
</div><!---Row END--->
</div><!----cent END--->
</div><!--container END-->
.cent{
text-align:center;
margin:auto;
width:auto;
}
.section {
padding-top:20px;
margin:auto;
}
.team {
text-align:center;
margin:auto;
max-width:600px;!important
padding-left:20px;!important
padding-right:20px;!important
}
.profile {
max-width:200px;
text-align:center;
margin:auto;
padding-top:10px;
}
.pro {
padding-left:100px;!important
}
.box {
background:#FFF;
border:1px solid #CCC;
box-shadow: 0px 1px 1px #CCC;
padding: 0px 20px 20px 0px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
min-height:220px;
}
Now the only thing I want to do is invert the code so that the picture is now on the left and the description on the right but it seems when I do that the span4 does not go on the side of the span8 but instead under it.
<div class="container">
<div class="cent text-center">
<div class="row box" style="border:1px solid #CCC; padding:15px 0px 15px 0px;">
<div class="span8 section">
<h3 align="center">Title</h3>
<div class="team">
<p class="team">this is the description about the picture this is the description about the picture this is the description about the picture this is the description about the picture.</p>
<div class="span4" style="height:200px;"><div class="profile pro"><img src="http://icons.iconarchive.com/icons/deleket/sleek-xp-software/256/Yahoo-Messenger-icon.png" /></div><!----profile END---></div><!---span4--->
</div><!---team END--->
</div><!---span8--->
</div><!---Row END--->
</div><!----cent END--->
</div><!--container END-->
You have a lot of unnecessary code in there. Maybe this is not exactly what you are looking for but instead of trying to figure out the code you provided, I just started fresh and provided a much cleaner way of doing what you want to accomplish.
You should modify your question as you ask for what already is. At the top you say: "basically I have a span4 with a picture on the left side then a span8 with a paragraph describing the picture on the right side." but then down below you say "now the only thing I want to do is invert the code so that the picture is now on the left and the description on the rite but it seems when I do that the span4 does not go on the side of the span8 but instead under it."
the key is to use the "float" property.
here is the html:
<div class="container">
<div class="span4">
<img src="http://icons.iconarchive.com/icons/deleket/sleek-xp-software/256/Yahoo-Messenger-icon.png" />
</div>
<div class="span8">
<div class="span8-text">
<h3>Title</h3>
<p>this is the description about the picture this is the description about the picture this is the description about the picture this is the description about the picture.</p>
</div>
</div>
</div>
and the css:
.container {
position: relative;
clear: both;
text-align: center;
}
.span4 {
float: right;
width: 200px;
}
.span8 {
position: relative;
float: left;
width: 350px;
}
here is the jsfiddle: http://jsfiddle.net/h69Bh/
Use CSS float property span8 float:left and span4 float:right
Take a look DEMO
This is it:
add this in head section below all links to bootstrap cdn :
<style>
img{
width: 100%;
height: 100%;
}
</style>
and this in body tag:
<div class="container img-responsive">
<div class="row">
<div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
description goes here
</div>
<div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
<img src="1.jpg">
</div>
</div>
<div>
check responsiveness:https://jsfiddle.net/sugandhnikhil/c0zoq8e1/1/
I have thrown a quick example in jsfiddle to show you what is happening and then I will explain what I want to achieve..
http://jsfiddle.net/4UMLq/20/
(code html - in jsfiddle)
<html>
<head>
</head>
<body>
<div class="box1top">
</div>
<div class="box1middle">
<p> Test </p><br />
<p> Test </p>
</div>
<div class="box1bottom">
</div>
<div class="box1top">
</div>
<div class="box1middle">
<p> Test </p><br />
<p> Test </p>
</div>
<div class="box1bottom">
</div>
</body>
</html>
(code css - in jsfiddle)
.box1top {
width: 150px;
height:30px;
background-color:#373737;
margin-left:10px;
margin-right:10px;
margin-top:10px;
}
.box1middle {
width: 150px;
height:200px;
background-color:#676767;
margin-left:10px;
margin-right:10px;
}
.box1bottom {
width: 150px;
height:10px;
background-color:#373737;
margin-left:10px;
margin-right:10px;
}
.box2top {
width: 150px;
height:30px;
background-color:#373737;
margin-left:10px;
margin-right:10px;
}
.box2middle {
width: 150px;
height:200px;
background-color:#676767;
margin-left:10px;
margin-right:10px;
}
.box2bottom {
width: 150px;
height:10px;
background-color:#373737;
margin-left:10px;
margin-right:10px;
}
In the example above the bg colours are going to be images for boxes that will contain text (split into 3 images)
However I want to display these side by side in the browser window instead of underneath one another.. I have tried floating the elements ect and I just cant seem to get this right?
Has anyone got any ideas? Any help is appreciated
Thanks,
Carlos
A general principle when coding (anything) is to keep it DRY (don't repeat yourself).
See here: http://jsfiddle.net/4UMLq/21/
Luckily, CSS allows us to accomplish this easily:
.box{
float:left;
margin:10px 10px 0 10px;
width: 150px;
}
.box-top {
height:30px;
background-color:#373737;
}
.box-middle {
height:200px;
background-color:#676767;
}
.box-bottom {
height:10px;
background-color:#373737;
}
#box2{
margin-left:0;
}
HTML:
<div id="box1" class="box">
<div class="box-top">
</div>
<div class="box-middle">
<p> Test </p>
<p> Test </p>
</div>
<div class="box-bottom">
</div>
</div>
<div id="box2" class="box">
<div class="box-top">
</div>
<div class="box-middle">
<p> Test </p>
<p> Test </p>
</div>
<div class="box-bottom">
</div>
</div>
Note that the top, middle, and bottom divs are each nested inside of a "box" div. There is no reason to create duplicate boxNtop, etc CSS definitions, because many elements may share the same class name. So, if you want them all to look the same, it is easily done.
There are a few ways to do this, but I think you'll want to start with wrapping those boxes within something you can float, such as: http://jsfiddle.net/wKqnh/
HTML:
<div class="box-wrap">
<div class="box1top">
</div>
<div class="box1middle">
<p> Test </p><br />
<p> Test </p>
</div>
<div class="box1bottom">
</div>
</div>
CSS:
.box-wrap {
float: left;
}
This has some other layout consequences, so for example, anything after the boxes will be aligned to the left of the last box depending on how their container is sized.
Here's a good article on basics to float based layouts: http://www.alistapart.com/articles/css-floats-101/
I'm trying to slice an box with rounded corners. The image is sliced horizontal in 3parts (top-middle-bottom). The problem in IE7 is that the top div is larger than the actual size I set.
Here is the HTML & CSS code
<!-- FIRST PICTURE -->
<div class='recent-box'>
<div class='recent-box-top'></div>
<div class='recent-box-middle' >
</div>
<div class='recent-box-bottom'></div>
</div>
<!-- FIRST PICTURE -->
<div class='recent-box'>
<div class='recent-box-top'></div>
<div class='recent-box-middle'>
</div>
<div class='recent-box-bottom'></div>
</div>
<!-- FIRST PICTURE -->
<div class='recent-box'>
<div class='recent-box-top'></div>
<div class='recent-box-middle'>
dsqd
</div>
<div class='recent-box-bottom'></div>
</div>
<!-- FIRST PICTURE -->
<div class='recent-box'>
<div class='recent-box-top'></div>
<div class='recent-box-middle'>
dsqd
</div>
<div class='recent-box-bottom'></div>
</div>
.recent-box {
width: 127px;
float:left;
display:block;
}
.recent-box-top {
float:left;
background-image: url('images/recent-foto-top.png');
background-repeat:no-repeat;
width: 100%;
}
.recent-box-middle {
float:left;
background-image: url('images/recent-foto-middle.png');
background-repeat:repeat-y;
width: 100%;
}
.recent-box-bottom {
float:left;
background-image: url('images/recent-foto-bottom.png');
background-repeat:no-repeat;
width: 100%;
}
Thanks for helping me out!
Ward
The font-size and line-height properties might be the offensive ones. If you are not placing any text in the top box, use something like
.recent-box-top {
font-size: 0;
line-height: 0;
}
Found the solution!
Just put in the div and it works like a charm!
found on http://archivist.incutio.com/viewlist/css-discuss/39150