I'm making a titled box with css.
And my code is something like this.
I've ignored some attributes like width or height in my code.(Because I don't know why stackoverflow keeps telling me that I 've got too many codes here..)
.sponsor_info {
border-radius: 10px;
border: 1px solid #eeeeee;
width:200px;
height:50px;
padding: 0px;
}
.sponsor_info .headbar {
border-radius:10px 10px 0px 0px;
width:200px;
height: 40px;
margin-top: 0px;
background-color: #8BBE26;
}
.sponsor_info .headbar p {
font-size: 20px;
font-family: arial;
color:white;
line-height: 100%;
margin-left: 3%;
margin-top:0px;
}
<div class="sponsor_info">
<div class="headbar">
<p>Sponsor Info</p>
</div>
</div>
I can get something like below
The question now is: I don't know why there is some space between the outer grey border and the inner green bar.
.sponsor_info {
height: 200px;
border-radius: 10px;
border: 1px solid #eeeeee;
padding: 0px;
}
.sponsor_info .headbar {
height: 100px;
border-radius: 10px 10px 0px 0px;
margin-top: 0px;
background: #8BBE26;
}
.sponsor_info .headbar p {
line-height: 100px;
margin-left: 3%;
margin-top: 0px;
}
<div class="sponsor_info">
<div class="headbar">
<p>Sponsor Info</p>
</div>
</div>
change it to:
.sponsor_info .headbar p {
line-height: 100%;
margin-left: 3%;
margin-top: 0px;
}
Related
I have following html for my site:
Edit: https://jsfiddle.net/3v66fv3u/1/ for the static site
and my approach of making the site responsive: https://jsfiddle.net/wba321bm/
<!DOCTYPE html>
<html>
<head>
<link href="custom.css" rel="stylesheet">
</head>
<body>
<h1 class="title">Headline</h1>
<div class="wrapper">
<div class="left">
<div class="top">
<img id="img_1" src="img_1.png">
</div>
<div class="bottom">
<img id="img_3" src="img_3.png">
</div>
</div>
<div class="middle">
<div class="about-text">
<h3>small headline</h3>
<p>actually a lot of text</p>
</div>
</div>
<div class="right">
<div class="top">
<img id="img_2" src="img_2.png">
</div>
<div class="bottom">
<img id="img_4" src="img_4.png">
</div>
</div>
</div>
<img class="banner" src="banner.png"/>
</body>
</html>
And this is my current css file:
html {
font-family: "Verdana", Geneva, sans-serif;
color: white;
}
body {
margin: auto;
background-color: black;
width: 1150px;
}
hr {
border-top: 1px dotted black;
}
.title {
text-align: center;
padding-bottom: 20px;
}
.wrapper {
margin: auto;
}
.left {
float: left;
}
.middle {
height: 597px;
width: 550px;
float: left;
border-top: 1px solid white;
border-bottom: 1px solid white;
box-shadow: inset 0px 0px 20px 0px rgba(0,0,0,1);
margin-top: -4px;
}
.about-text {
margin-left: 25px;
margin-right: 25px;
}
.right {
float: left;
}
.gallery {
padding-top: 100px;
width: 100%;
text-align: center;
}
img {
height: 300px;
transition: 0.5s ease;
backface-visibility: hidden;
/* inline-block fügt standardmäßig 4px Padding hinzu
das muss nun wieder subtrahiert werden. */
margin-top: -4px;
}
img:hover {
opacity: 0.5;
}
#img_1 {
border-top-left-radius: 30px;
}
#img_2 {
border-top-right-radius: 30px;
}
#img_3 {
border-bottom-left-radius: 30px;
}
#img_4 {
border-bottom-right-radius: 30px;
}
/* 827 x 178 */
.banner {
width: 410px;
height: 90px;
position: absolute;
right: 0px;
bottom: 0px;
}
The website currently looks like this (with static layout):
Now I want to go away from the fixed layout and want to make the website responsive. However, when I give the fields a relative width the whole layout gets messed up...
This is the css I tried to use to achieve the responsive layout:
html, body {
font-family: "Verdana", Geneva, sans-serif;
color: white;
background-color: black;
height: 100%;
}
hr {
border-top: 1px dotted black;
}
.title {
text-align: center;
padding-bottom: 20px;
}
.wrapper {
border: 1px solid white;
margin: auto;
width: 80%;
}
.left {
float: left;
}
.middle {
width: 40%;
height: auto;
float: left;
border-top: 1px solid white;
border-bottom: 1px solid white;
box-shadow: inset 0px 0px 20px 0px rgba(0,0,0,1);
margin-top: -4px;
}
.about-text {
margin-left: 25px;
margin-right: 25px;
}
.right {
float: left;
}
.gallery {
padding-top: 100px;
width: 100%;
text-align: center;
}
img {
width: 40%;
height: auto;
transition: 0.5s ease;
backface-visibility: hidden;
/* inline-block fügt standardmäßig 4px Padding hinzu
das muss nun wieder subtrahiert werden. */
margin-top: -4px;
}
img:hover {
opacity: 0.5;
}
#img_1 {
border-top-left-radius: 30px;
}
#img_2 {
border-top-right-radius: 30px;
}
#img_3 {
border-bottom-left-radius: 30px;
}
#img_4 {
border-bottom-right-radius: 30px;
}
/* 827 x 178 */
.banner {
width: 20%;
height: 10%;
position: absolute;
right: 0px;
bottom: 0px;
}
It's a matter of WHICH elements get the percentage value. In my adaptation of your fiddle, I assigned width: 30% to .left and right (which are the containers for the images) and made the image width 100% to span the whole width of their containers.
See here: https://jsfiddle.net/35n4dxqn/1/
well, when you give a or a division relative attribute it will be placed relative or according to the previous div i.e. it will not be independent from other divisions.
the solution if you want to make it responsive one forward and efficient way is to use Grid System (Bootstrap class).
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
My overlay currently looks like this and I'm looking for it to auto adjust based on the size (since this is responsive)...
Just to note... I am using Bootstrap. http://getbootstrap.com/
Here is the first set of html...
<div class="Discussion box">
<div class="topic">
<img class="PhotoThumbnail TopicPhoto" src="{{user.profile.avatarURL}}" />
<div class="Name">{{user.profile.firstName}} {{user.profile.lastName}} - {{title}} </div>
<p class="TopicText">{{body}}</p>
</div>
<div class="show-hide-comments">
Show Comments (or Hide Comments if showing)
</div>
{{> postComments}}
</div>
Here are is the code for comments & posts...
<template name="postComments">
<div class="CommentOverlay">
{{#each comments}}
{{> showComment}}
{{/each}}
{{> newPostComment}}
</div>
</template>
<template name="showComment">
{{#if editing}}
{{> editPostComment}}
{{else}}
<div class="TopicComments">
<img class="PhotoThumbnail" src="{{user.profile.avatarURL}}" />
<div class="Name">{{user.profile.firstName}} {{user.profile.lastName}}</div>
<p class="CommentText">{{> editPencil}} {{body}}</p>
</div>
{{/if}}
</template>
<template name="newPostComment">
<div class="TopicComments">
<img class="PhotoThumbnail" src="{{currentUser.profile.avatarURL}}" />
<textarea class="TopicAddCommentText" rows="2" name="comment" placeholder="Write a comment..."></textarea>
<button data-action="post-comment" class="TopicAddCommentSubmit btn"><p class="SubmitButtonText">Submit</p></button>
</div>
</template>
<template name="editPostComment">
<div class="TopicComments">
<img class="PhotoThumbnail" src="{{currentUser.profile.avatarURL}}" />
<textarea class="TopicAddCommentText" rows="2" name="comment" placeholder="Write a comment..." autofocus>{{body}}</textarea>
<button data-action="save-comment" class="TopicAddCommentSubmit btn"><p class="SubmitButtonText">Submit</p></button>
</div>
</template>
Here is the css...
/* Shared */
.PhotoThumbnail {
border-style: solid;
border-width: 1px;
border-color: #DEE2EC;
border-radius: 100px;
height: 45px;
width: 45px;
margin-left: -80px;
}
.bottom-border {
border: 1px;
border-style: solid;
border-color: #EEEEEE;
margin: 0px -39px 0px -117px;
}
.TopicPhoto {
margin-top: 30px;
}
.Name {
font-weight: bold;
margin-top: -50px;
margin-left: -25px;
}
.CommentText{
margin-left: -25px;
}
.EditComment {
float: right;
width: 10px;
height: 10px;
}
.TopicText {
min-height: 40px;
margin-bottom: 5%;
margin-left: -25px;
}
.TopicComments {
min-height: 45px;
padding: 0 0 0 80px;
margin-left: 20px;
}
.TopicAddCommentText {
border-color: #DEE2EC;
border-width: 1px;
width: 85%;
height: 50px;
border-style: solid;
border-radius: 5px;
margin-left: 1%;
}
.TopicAddCommentSubmit {
width: 115px;
height: 50px;
background-color: #B679B4;
border-color: #772A75;
border-width: 1px;
border-style: solid;
float: right;
box-shadow: 0px 0px 10px #888888;
margin: 0px -5px 0 0;
}
.SubmitButtonText {
color: white;
font-weight: bold;
margin-top: 9px;
}
.CommentOverlay {
background-color: #F6F7F8;
margin-left: -37px;
padding: 20px;
margin-right: -38px;
border-radius: 4px;
margin-top: 20px;
}
/* Discussions Only */
.Discussion {
height: 100%;
width: 100%;
border-style: solid;
border-width: 1px;
border-color: #DEE2EC;
border-radius: 10px;
padding-left: 30px;
margin-bottom: 30px;
}
.topic {
margin-bottom: -20px;
padding: 0 0 0 80px;
}
/* Goals Only */
.Goal {
height: 100%;
width: 100%;
border-style: solid;
border-width: 1px;
border-color: #DEE2EC;
border-radius: 10px;
padding-left: 30px;
margin-bottom: 30px;
}
.GoalBoxes {
width: 49%;
margin: 20px 0 0 0;
min-height: 110px;
float: left;
}
.GoalTopRightBox {
float: right;
}
.GoalBottomRightBox {
float: right;
}
.GoalHeading {
font-weight: bold;
margin: 5% -5%;
}
.GoalLine {
margin-top: 0px;
margin-bottom: 5px;
}
.GoalInput {
font-weight: normal;
}
.goalposterline {
margin-top: 30px;
}
.show-hide-comments {
/* border-top-width: 1px;
border-top-style: solid;
border-bottom-width: 1px;
border-bottom-style: solid;*/
text-align: center;
margin-bottom: -20px;
color: gray;
}
It's hard to say without a demo of your code I can take a look at, but it looks like the root of your problems are the fact that the parent element <div class="Discussion box"> has some padding-left applied.
.Discussion {
height: 100%;
width: 100%;
border-style: solid;
border-width: 1px;
border-color: #DEE2EC;
border-radius: 10px;
/* padding-left: 30px; Remove this */
margin-bottom: 30px;
}
You should remove this and apply any padding to <div class="topic"> instead. Then you will need to apply the styles below to <div class="CommentOverlay">
.CommentOverlay {
width: 100%; /* Add this */
background-color: #F6F7F8;
/* margin-left: -37px; Remove this */
padding: 20px;
/* margin-right: -38px; Remove this */
border-radius: 4px;
margin-top: 20px;
}
I want to have two buble speech togethers and and with the some extra information.
Image below
This is my code for doing this:
I have a demo for this here: http://jsfiddle.net/pZh4w/
<style>
.bubble
{
position: relative;
width: 525px;
height: 130px;
padding: 4px;
background: #FFFFFF;
-webkit-border-radius: 31px;
-moz-border-radius: 31px;
border-radius: 31px;
border: #46A5E4 solid 9px;
display:inline-block;
margin-bottom: 0px;
margin-right: 50px;
}
.test
{
margin-bottom: 0px;
margin-left: 850px;
}
.test1
{
margin-bottom: 20px;
margin-left: 850px;
}
.tes
{
margin-bottom: 0px;
margin-left: 250px;
}
.tes1
{
margin-bottom: 20px;
margin-left: 250px;
}
</style>
Thanks for your help.
Here is something to get you started.
I would suggest the following HTML:
<div class="bubble">
<p>First paragraph</p>
<div class="caption">
<h1>By PEDE</h1>
<h2>From Belgrade,MT</h2>
<h3>September 25,2013</h3>
</div>
</div>
and start with the following CSS:
.bubble-panel {
display: inline-block;
border: 1px dotted #CCCCCC;
height: 250px;
position: relative;
margin: 20px;
}
.bubble {
width: 525px;
height: 130px;
padding: 4px;
background: #FFFFFF;
-webkit-border-radius: 31px;
-moz-border-radius: 31px;
border-radius: 31px;
border: #46A5E4 solid 9px;
display:inline-block;
}
.caption {
border: 1px solid red;
width: 20em;
font-size: 14px;
line-height: 1.5;
position: absolute;
bottom: 0px;
right: 0px;
}
.caption h1, .caption h2, .caption h3 {
font-size: 1.00em;
text-align: center;
margin: 0;
}
See demo at: http://jsfiddle.net/audetwebdesign/rcNN6/
The net result gives something like:
The speech bubble decoration (the little triangular bit that sticks out) can be built
by following the ideas presented at: http://nicolasgallagher.com/pure-css-speech-bubbles/demo/
The trick is to wrap the bubble and caption texts in a inline-block wrapper of fixed height. These can then form a 2x2 grid if the screen is wide enough.
I've the following divs in my document:
<div class="bill-header">
<div class="bill-header-info"><span>Bill No</span></div>
<div class="vline"></div>
<div class="bill-header-info"><span>Table No</span></div>
<div class="vline"></div>
<div class="bill-header-info"><span>Room No</span></div>
<div class="vline"></div>
<div class="bill-header-info"><span>Amount</span></div>
</div>
I'm using the following CSS to make them sit on one line:
.bill-header {
height: 30px;
background-color: darkgrey;
padding-left: 10px;
}
.bill-header-info {
float: left;
padding-left: 4px;
padding-top: 5px;
padding-right: 3px;
}
.vline {
width: 2px;
height: 80%;
display: block;
float: left;
margin-top: 3px;
border-left: 1px solid gray;
}
How can I make them appear with same distance in between them?
Fiddle
Do you mean like this? http://jsfiddle.net/3Zv2y/2/
Make these changes:
.bill-header-info {
width:23%;
text-align:center;
}
Add margin: 0 5px in your .vline:
.vline {
width: 2px;
height: 80%;
display: block;
float: left;
margin-top: 3px;
border-left: 1px solid gray;
margin:0 5px;
}
This will give a margin of 5px in both left and right of your vline element.
JSFiddle
use width property in css for exapmle
.bill-header-info {width:22%;}
Updated Fiddle
As long as there are always four items in a row, you can use a "fixed" percentage value:
.bill-header {
height: 30px;
width: 100%;
background-color: darkgrey;
}
.bill-header-info {
float: left;
width: 24.6%;
text-align: center;
padding-top: 5px;
}
The important parts are the width and text-align properties in .bill-header-info
.bill-header-info {
text-align:center;
width:23%;
float: left;
padding-left: 4px;
padding-top: 5px;
padding-right: 3px;
}
.vline {
width: 2px;
height: 80%;
display: block;
float: left;
margin-top:3px;
margin: 0 5 3 3px;
border-left: 1px solid gray;
}
I've got the following css element. the CSS is as following
.bill-item {
width: 253px;
height: 60px;
background-color: white;
border: 1px solid #dadada;
border-radius: 6px;
margin-left: 22px;
margin-top: 15px;
margin-bottom: 15px;
}
.item-drop-point {
height: 40px;
width: 253px;
border: 1px dashed #dadada;
text-align: center;
background-color: white;
border-radius: 6px;
margin-left: 22px;
margin-top: 15px;
margin-bottom: 15px;
}
.item-drop-point span {
color: #dadada;
vertical-align: -10px;
}
.bill-item-img {
height: 60.4px;
width: 60px;
float: left;
border-radius: 5px;
background-image: url(../images/bill_item_img.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.bill-item-description {
width: 148px;
float: left;
height: 100%;
}
.bill-item-price {
float: left;
padding: 8px 0px 0px 7px;
width: 107px;
height: 25px;
font-family: MyriadProReg;
}
.bill-item-amount {
float: right;
padding: 8px 0px 0px 7px;
width: 25px;
height: 22px;
border-left: 1px solid rgb(230, 230, 230);
}
.bill-amount-selection {
width: 44.9px;
height: 100%;
float: right;
background-image: url(../images/item_amount_selection_bg.jpg);
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.amount-increase {
height: 50%;
width: 100%;
background-image: url(../images/item_amount_inc.jpg);
background-position: center center;
background-repeat: no-repeat;
display: block;
}
.amount-decrease {
height: 50%;
width: 100%;
background-image: url(../images/item_amount_dec.jpg);
background-position: center center;
background-repeat: no-repeat;
display: block;
}
.bill-item-name {
padding-top: 5px;
border-bottom: 1px solid rgb(230, 230, 230);
height: 25px;
font-family: MyriadProReg;
}
.bill-item-name-left {
float: left;
padding-left: 6px;
padding-right: 5px;
padding-top: 4px;
font-family: MyriadProReg;
font-weight: normal;
font-size: 14px;
}
.bill-item-name-right {
float: right;
padding-top: 3px;
color: #878787;
font-family: MyriadProReg;
font-weight: 400;
}
I load text using an ajax post so some times I get more characters that I can show in the element. I hope you can get an idea from the following image.
The div hierarchy is following.
<div class="bill-item">
<!-- Item image -->
<div class="bill-item-img"></div>
<!-- Item description -->
<div class="bill-item-description">
<div class="bill-item-name">
<!-- Item Name -->
<p class="bill-item-name-left">Normal Cofee</p>
<!-- Item Price -->
<p class="bill-item-name-right">170.00</p>
<div class="clear"></div>
</div>
<!-- Total item price -->
<div class="bill-item-price">
<span>170.00</span>
</div>
<!-- Item Quantity -->
<div class="bill-item-amount">
<span>1</span>
</div>
</div>
<!-- Increas & Decrease item Quantity -->
<div class="bill-amount-selection">
<a class="amount-increase" href="#"></a>
<a class="amount-decrease" href="#"></a>
</div>
</div>
How can I fix this issue using CSS.. please help me!
Posting this as an answer to show the changes on the CSS class bill-item-name-left, did you tried something like this ?
.bill-item-name-left {
float: left;
padding-left: 6px;
padding-right: 5px;
padding-top: 4px;
font-family: MyriadProReg;
font-weight: normal;
font-size: 14px;
white-space: nowrap;
overflow:hidden;
}
If that does the trick, you should check the value you can set on the overflow or even use the text overflow property, more info : http://www.w3schools.com/cssref/css3_pr_text-overflow.asp