Hi guys I've got a problem with some div with width:auto.
Here's the HTML:
<div class="greenMenu">
<div class="btn">
<img src="img/image.png" width="57" height="46" />
<div class="area">
<div class="txt">A Lorem ipsum</div>
</div>
</div>
<div class="btn">
<img src="img/image.png" width="57" height="46" />
<div class="area">
<div class="txt">A Lorem ipsum</div>
</div>
</div>
</div>
and the CSS:
.greenMenu {
position:absolute;
top:83px;
left:220px;
width:auto;
height:47px;
background:url(../img/prod-uova-ripMenu.png) left top repeat;
}
.greenMenu .btn {
background:#090;
float:left;
margin-top:1px;
margin-left:6px;
*display:inline;
_display:inline;
width:auto;
height:43px;
position:relative;
}
.greenMenu .btn img {
border:none;
position:absolute;
top:0px;
left:0px;
z-index:2;
}
.greenMenu .btn .area {
background:#53882d;
width:auto;
height:32px;
position:absolute;
top:5px;
left:0px;
z-index:1;
}
.greenMenu .btn .area .txt {
float:left;
margin:7px 13px 0 60px;
}
The problem is: the greenMenu cannot expand its width and in the same time div.btn width is 0.
Don't use following code there:
position: absolute;
Related
I would like to achieve something like in the image
https://www.dropbox.com/s/rhvfaf4bllydl5f/stack1.JPG?dl=0
I use bootstrap also and i have no idea to realize the diagonal section in css.
should i use a background image?
example also available as a fiddle:
https://jsfiddle.net/9xuvacr0/
body {
background-color: #000;
margin: 0px;
}
p {
color: white;
}
.diagonal {
z-index: 1;
padding: 3em;
-webkit-transform: rotate(-3deg);
transform: rotate(-3deg);
background-color:blue;
text-align:center;
width:50%;
}
<header>
<p>Header</p>
</header>
<div class="diagonal">
<p>Lorem ipsum</p>
</div>
hope this help
body{
background-color:#999;
font-family:arial;
}
.cont{
position:relative;
width:300px;
height:350px;
overflow:hidden;
background-color:green;
border-radius:22px;
}
.upper-cont{
position:relative;
width:300px;
height:150px;
background-image: linear-gradient(to right, #8d127c, #711977, #432166 , #132359);
}
.upper-over-top{
position:absolute;
background-color:#fff;
height:70px;
width:400px;
top:-18px;
left:-10px;
transform:rotate(-3deg);
opacity:.1;
}
.upper-text-cont{
position:relative;
padding:20px 20px 0 20px;
max-height:90px;
color:#fff;
}
.upper-text-span{
font-size:12px;
}
.upper-text-head{
text-align:center;
padding-top:30px;
font-size:28px;
}
.upper-over-bottom{
position:absolute;
background-color:#fff;
height:30px;
width:400px;
top:139px;
left:-10px;
transform:rotate(-3deg);
}
.bottom-cont{
position:relative;
width:300px;
height:200px;
background-color:#fff;
}
.bottom-text-cont{
position:relative;
padding:20px 20px 0 20px;
max-height:90px;
color:#333;
text-align:center;
}
<div class="cont">
<div class="upper-cont">
<div class="upper-over-top"></div>
<div class="upper-text-cont">
<div class="upper-text-span">
Lorem Ipsum
</div>
<div class="upper-text-head">
PACCHETTO UNO
</div>
</div>
<div class="upper-over-bottom"></div>
</div>
<div class="bottom-cont">
<div class="bottom-text-cont">
text here
</div>
</div>
</div>
The problem is that #lesson containers do not fit inside the #container. How can I make that only 3 containers fit into one column? CSS ninjas, I need your help :)
My CSS: #container - main container, #first - green container, #lesson- gray divs.
#container {
position: relative;
top: 70px;
left: 80px;
width:100%;
height:80%;
}
#first {
background-color: #A1D490;
width:45%;
height:100%;
float:left;
border:2px solid black;
margin: 5px;
}
.lesson {
position: relative;
background-color: #DCDDDE;
margin:10px;
width:200px;
height:200px;
border:1px solid;
text-align: center;
}
HTML:
<div id="container">
<div id="first">
<tpl for=".">
<div class="lesson"; >
<p class="txt"><b>Lesson:</b> {lesson} </p>
<p class="txt"><b>Score:</b> {score}</p>
</div>
</tpl>
</div>
<div id="second">
</div>
</div>
For fitting the containers on the big one you just need to remove the height 100% from the id first
#first { /* height: 100% */ }
Codepen http://codepen.io/noobskie/pen/dYGLeo
It seems to be working fine for me here. Are you sure you dont have any other css being applied and overwriting rules somewhere?
HTML
<div id="container">
<div id="first">
<div class="lesson">
<p class="txt"><b>Lesson:</b> {lesson} </p>
<p class="txt"><b>Score:</b> {score}</p>
</div>
<div class="lesson">
<p class="txt"><b>Lesson:</b> {lesson} </p>
<p class="txt"><b>Score:</b> {score}</p>
</div>
<div class="lesson">
<p class="txt"><b>Lesson:</b> {lesson} </p>
<p class="txt"><b>Score:</b> {score}</p>
</div>
<div class="lesson">
<p class="txt"><b>Lesson:</b> {lesson} </p>
<p class="txt"><b>Score:</b> {score}</p>
</div>
</div>
</div>
CSS
#container {
position: relative;
top: 70px;
left: 80px;
width:100%;
height:80%;
}
#first {
background-color: #A1D490;
width:45%;
height:100%;
float:left;
border:2px solid black;
margin: 5px;
}
.lesson {
position: relative;
background-color: #DCDDDE;
margin:10px;
width:200px;
height:200px;
border:1px solid;
text-align: center;
}
I have got a problem with my 3 columns layout (960.css).
This is the condition:
c-left,c-center,c-right
The query ORDER BY id_post DESC LIMIT 6 inside center column to show article as many as 6 articles works, but when i use LIMIT 12 it doesn't. columns-right will be in down side.
Any thoughts?
html:
<div class="grid_4">
<div class="populer_left">
<div class="title_kiri">
Berita Terpopuler
</div>
<div class="batas_tengah"></div>
<div class="b_populer">
<?php include 'beritapopuler.php';?>
</div>
</div>
</div>
<div class="grid_7">
<div class="populer_center">
<div class="title_tengah">
Berita Terbaru
</div>
<div class="batas_tengah"></div>
<div class="isi_berita">
<?php include 'loadar.php'; ?>
</div>
</div>
</div>
<div class="grid_5">
<div class="populer_right">
<div class="title_kanan">
Opini
</div>
<div class="batas_tengah"></div>
<div class="b_opini">
<?php include 'beritaopini.php'; ?>
</div>
</div>
</div>
Style:
.populer_left {
float:left;
width:220px;
height:auto;
clear:both;
padding-bottom:15px;
background:#29aa6b;
border-radius:2px;
}
.populer_right {
float:right;
width:280px;
height:auto;
clear:both;
padding-bottom:15px;
background:#3f83ab;
border-radius:2px;
}
.populer_center {
float:left;
display: inline-block;
vertical-align:top;
width:400px;
height:auto;
background:#0e62aa;
border-radius:2px;
}
You can use display table, and table-cell property.
Here: Fiddle http://jsfiddle.net/LUCNY/10/
#wrapper { border: 2px solid red;overflow:hidden; display: table; width:900px;}
.populer-left {
width: 220px;
display:table-cell;
float:left;
padding-bottom:15px;
background:#29aa6b;
border-radius:2px;
}
.populer-center {
display:table-cell;
width: 400px;
float:left;
background-color: green;
background:#0e62aa;
padding-bottom:15px;
border-radius:2px;
}
.populer-right {
display:table-cell;
width: 280px;
float:left;
padding-bottom:15px;
background:#3f83ab;
border-radius:2px;
}
I'm trying to create something that will allow me to put something on top of images in this case, small images.
basically, it goes like this and both main divs are centered:
http://jsmith.elementfx.com/images/questions.png
tia.
Sorry, here is
HTML
<div id="container">
<div id="left"><img src="" width="130" height="130" style="border:2px solid #72d6fe" /></div>
<div id="leftimage"><h2>963</h2></div>
<div id="right"><img src="" width="130" height="130" style="border:2px solid #72d6fe" /></div>
<div id="rightimage"><h2>434</h2></div>
</div>
CSS
#container{
margin:0px auto;
width:320px;
text-align:center;
margin-bottom:20px;
}
#left {
float:left;
margin-left:15px;
margin-right:20px;
position:relative;
}
#leftimage{
position:absolute;
padding-top:2px;
margin-left:5px;
width:65px;
}
#right {
margin-right:15px;
}
#rightimage{
position:absolute;
padding-top:2px;
width:65px;
}
you have to use z-index and position to acheive it,
DEMO
HTML
<div id="container">
<div id="left"><img src="" width="130" height="130" style="border:2px solid #72d6fe" /></div>
<div id="leftimage"><h2>963</h2></div>
<div id="right"><div id="rightimage"><h2>434</h2></div><img src="" width="130" height="130" style="border:2px solid #72d6fe" /></div>
</div>
CSS
#container{
margin:0px auto;
width:320px;
text-align:center;
margin-bottom:20px;
}
#left {
float:left;
margin-left:15px;
margin-right:20px;
position:relative;
}
#leftimage{
position:absolute;
padding-top:2px;
margin-left:5px;
width:65px;
z-index:1;
}
#right {
position:relative;
margin-right:15px;
}
#rightimage{
margin-left:175px;
position:absolute;
z-index:1000;
}
use this code, the calculation of the width and height of images would be according to your images:
HTML
<div class="container">
<div class="img1">
<img src="https://cdn1.iconfinder.com/data/icons/windows-8-metro-style/128/test_tube.png" width="32" height="32" />
</div>
<div class="img2">
<img src="https://cdn1.iconfinder.com/data/icons/windows-8-metro-style/128/test_tube.png" width="32" height="32" />
</div>
</div>
CSS
.container{
width:270px;
margin:0 auto;
overflow:hidden;
}
.img1,.img2{
width:128px;
height:128px;
background:url(https://cdn1.iconfinder.com/data/icons/windows-8-metro-style/128/test_tube.png);
float:left;
margin-right:10px;
border:1px solid #000;
}
.img2{margin:0;}
DEMO jsfiddle for this
Demo Fiddle - Quad view with 3 layered images
<div class="container start">
<img src="http://www.placehold.it/300/555555"></img>
<div id="base1" class="base">
<img src="http://www.placehold.it/200/654321"></img>
<div id="overlay1" class="overlay">
<img src="http://www.placehold.it/100/123456"></img>
</div>
</div>
</div>
.base {
width: 200px;
height: 200px;
position: relative;
top: -290px;
left: 10px;
}
.overlay {
width:100px;
height:100px;
position: relative;
left: 10px;
top: -190px;
}
.container {
left:100px;
width: 300px;
height: 300px;
margin: 10px;
float: left;
}
.start {
clear: left;
}
I have exported div tags from photoshop design into dreamweaver using slices, extracted the css from head and created a style sheet. all the div tags in the page have an absolute position set for each of them. I have tried everything i can think of to center all the content on the page and nothing has worked. can someone please take a look at the code and tell me what i am missing.
<HTML>
<html>
<head>
<title>Packet Access</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="css/style_sheet.css" rel="stylesheet" type="text/css" />
</head>
<body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px;
margin-left: 0px; margin-right: 0px`enter code here`;">
<div id="Table_01">
<div id="topper">
</div>
<div id="Topper-2">
</div>
<div id="search">
<img src="images/search.png" width="133" height="19" alt="">
</div>
<div id="topper-side2"></div>
<div id="topper-side"></div>
<div id="Logo">
<img src="images/Logo.png" width="254" height="37" alt="">
</div>
<div id="side-logo-right"></div>
<div id="under-search"></div>
<div id="index-09"></div>
<div id="navigation">
<img src="images/navigation.png" width="457" height="20" alt="">
</div>
<div id="under-logo"></div>
<div id="under-navigation"></div>
<div id="divider">
<img src="images/divider.jpg" width="1024" height="3" alt="">
</div>
<div id="bg-left">
<img src="images/bg_left.jpg" width="131" height="147" alt="">
</div>
<div id="index-15">
<img src="images/index_15.png" width="764" height="52" alt="">
</div>
<div id="bg-right">
<img src="images/bg_right.jpg" width="129" height="147" alt="">
</div>
<div id="index-17">
<img src="images/index_17.jpg" width="764" height="243" alt="">
</div>
<div id="index-18">
<img src="images/index_18.jpg" width="130" height="519" alt="">
</div>
<div id="index-19">
<img src="images/index_19.jpg" width="1" height="148" alt="">
</div>
<div id="index-20">
<img src="images/index_20.jpg" width="1" height="148" alt="">
</div>
<div id="index-21">
<img src="images/index_21.jpg" width="128" height="519" alt="">
</div>
<div id="index-22">
<img src="images/index_22.png" width="766" height="43" alt="">
</div>
<div id="index-23">
<img src="images/index_23.png" width="12" height="1" alt="">
</div>
<div id="OTT-box">
<img src="images/OTT_box.jpg" width="242" height="99" alt="">
</div>
<div id="index-25">
<img src="images/index_25.png" width="9" height="1" alt="">
</div>
<div id="XFP">
<img src="images/XFP.jpg" width="242" height="99" alt="">
</div>
<div id="index-27">
<img src="images/index_27.png" width="10" height="1" alt="">
</div>
<div id="Cache">
<img src="images/Cache.jpg" width="242" height="99" alt="">
</div>
<div id="index-29">
<img src="images/index_29.png" width="9" height="1" alt="">
</div>
<div id="index-30">
<img src="images/index_30.jpg" width="12" height="327" alt="">
</div>
<div id="index-31">
<img src="images/index_31.jpg" width="9" height="327" alt="">
</div>
<div id="index-32">
<img src="images/index_32.jpg" width="10" height="327" alt="">
</div>
<div id="index-33">
<img src="images/index_33.jpg" width="9" height="327" alt="">
</div>
<div id="index-34">
<img src="images/index_34.png" width="242" height="81" alt="">
</div>
<div id="index-35">
<img src="images/index_35.png" width="242" height="81" alt="">
</div>
<div id="index-36">
<img src="images/index_36.png" width="242" height="81" alt="">
</div>
<div id="index-37">
<img src="images/index_37.jpg" width="242" height="148" alt="">
</div>
<div id="index-38">
<img src="images/index_38.jpg" width="242" height="148" alt="">
</div>
<div id="index-39">
<img src="images/index_39.jpg" width="242" height="148" alt="">
</div>
<div id="footer">Copyright © 2012 Packet Access</div>
</div>
<!-- End Save for Web Slices -->
</body>
</html>
<!--The CSS is below-->
<CSS>
#charset "utf-8";
*{
margin:0;
padding:0;
}
.body {
background-color: #000;
text-align:center; /*For IE6 Shenanigans*/
}
#Table_01 {
margin: 0 auto;
text-align: center;
width: 1024px;
}
#topper {
position:absolute;
left:0px;
top:0px;
width:1024px;
height:10px;
background-color:#000000;
}
#Topper-2 {
position:absolute;
left:0px;
top:10px;
width:763px;
height:6px;
background-color:#000000;
}
#search {
position:absolute;
left:763px;
top:10px;
width:133px;
height:19px;
background-color:#000000;
}
#topper-side2 {
position:absolute;
left:896px;
top:10px;
width:128px;
height:59px;
background-color:#000000;
}
#topper-side {
position:absolute;
left:0px;
top:16px;
width:130px;
height:53px;
background-color:#000000;
}
#Logo {
position:absolute;
left:130px;
top:16px;
width:254px;
height:37px;
}
#side-logo-right {
position:absolute;
left:384px;
top:16px;
width:379px;
height:26px;
background-color:#000000;
}
#under-search {
position:absolute;
left:763px;
top:29px;
width:133px;
height:13px;
background-color:#000000;
}
#index-09 {
position: absolute;
left: 384px;
top: 42px;
width: 55px;
height: 27px;
background-color: #000;
}
#navigation {
position:absolute;
left:439px;
top:42px;
width:457px;
height:20px;
background-color:#000000;
}
#under-logo {
position:absolute;
left:130px;
top:53px;
width:254px;
height:16px;
background-color:#000000;
}
#under-navigation {
position:absolute;
left:439px;
top:62px;
width:457px;
height:7px;
background-color:#000000;
}
#divider {
position:absolute;
left:0px;
top:69px;
width:1024px;
height:3px;
background-color:#000000;
}
#bg-left {
position:absolute;
left:0px;
top:72px;
width:131px;
height:147px;
}
#index-15 {
position:absolute;
left:131px;
top:72px;
width:764px;
height:52px;
}
#bg-right {
position:absolute;
left:895px;
top:72px;
width:129px;
height:147px;
}
#index-17 {
position:absolute;
left:131px;
top:124px;
width:764px;
height:243px;
}
#index-18 {
position:absolute;
left:0px;
top:219px;
width:130px;
height:519px;
}
#index-19 {
position:absolute;
left:130px;
top:219px;
width:1px;
height:148px;
}
#index-20 {
position:absolute;
left:895px;
top:219px;
width:1px;
height:148px;
}
#index-21 {
position:absolute;
left:896px;
top:219px;
width:128px;
height:519px;
}
#index-22 {
position:absolute;
left:130px;
top:367px;
width:766px;
height:43px;
}
#index-23 {
position:absolute;
left:130px;
top:410px;
width:12px;
height:1px;
}
#OTT-box {
position:absolute;
left:142px;
top:410px;
width:242px;
height:99px;
}
#index-25 {
position:absolute;
left:384px;
top:410px;
width:9px;
height:1px;
}
#XFP {
position:absolute;
left:393px;
top:410px;
width:242px;
height:99px;
}
#index-27 {
position:absolute;
left:635px;
top:410px;
width:10px;
height:1px;
}
#Cache {
position:absolute;
left:645px;
top:410px;
width:242px;
height:99px;
}
#index-29 {
position:absolute;
left:887px;
top:410px;
width:9px;
height:1px;
}
#index-30 {
position:absolute;
left:130px;
top:411px;
width:12px;
height:327px;
}
#index-31 {
position:absolute;
left:384px;
top:411px;
width:9px;
height:327px;
}
#index-32 {
position:absolute;
left:635px;
top:411px;
width:10px;
height:327px;
}
#index-33 {
position:absolute;
left:887px;
top:411px;
width:9px;
height:327px;
}
#index-34 {
position:absolute;
left:142px;
top:509px;
width:242px;
height:81px;
}
#index-35 {
position:absolute;
left:393px;
top:509px;
width:242px;
height:81px;
}
#index-36 {
position:absolute;
left:645px;
top:509px;
width:242px;
height:81px;
}
#index-37 {
position:absolute;
left:142px;
top:590px;
width:242px;
height:148px;
#index-38 {
position:absolute;
left:393px;
top:590px;
width:242px;
height:148px;
}
#index-39 {
position:absolute;
left:645px;
top:590px;
width:242px;
height:148px;
}
#footer {
position: absolute;
left: 0px;
top: 738px;
width: 100%;
height: 21px;
background-color: #000000;
font-family: "Helvetica LT Std";
font-size: 14px;
color: #999;
text-decoration: none;
text-align: center;
padding-top: 3px;
padding-bottom: 2px;
}
</style>
To answer the immediate question of how to center everything on the page, change #Table_01 from:
#Table_01 {
margin: 0 auto;
text-align: center;
width: 1024px;
}
to:
#Table_01 {
margin: 0 auto;
text-align: center;
width: 1024px;
position: relative;
}