I have been constructing UI development for a year now and I want to explore new structures in regards to designing.
so I am styling my panel-heading that it would look something like this.
as of now I have only done the default style for panel heading via bootstrap css.
I just posted an example to how can make it with position. if you don't need then check 2nd snippet
.main {
position:relative;
}
.tilt {
position:absolute;
top:30px;
left:0px;
transform:rotate(-90deg);
color:#000;
padding:0 10px;
border:1px solid #000;
text-align:center;
}
.tilt p {
margin:0px;
}
<div class="main">
<div class="tilt">
<p>
HELLO
</p>
</div>
</div>
.tilt {
transform:rotate(-90deg);
color#000;
padding:0 10px;
border:1px solid #000;
text-align:center;
display:inline-block;
margin-top:22px;
}
.tilt p {
margin:0px;
}
<div class="tilt">
<p>
HELLO
</p>
</div>
Related
This has been bothering me for a while. I have currently vertically align a border contain the word "Facebook" to an image but, vertical align isn't completely centering the word with the image.
Update 1: I am using Width 100% and Line-Height 100%. This is close to how I want it but not quite. https://gyazo.com/f67cff590476c9e11601172b5b1dafd5 I want the border and the image to align. Here is my old code:
HTML
<div id="div06">
<img id="img01" src="https://www.facebook.com/images/fb_icon_325x325.png"/>
<span id="span01">Facebook</span>
</div>
CSS
#div06
{
margin-top:3%;
display:inline-block;
width:100%;
line-height:100%;
}
#img01{
width:10%;
vertical-align:middle;
}
#span01
{
border:3px solid blue;
padding: 35px;
margin: 25;
}
Here is my current edit:
#div06{
margin-top:3%;
width:100%;
line-height:100%;
}
#img01{
width:10%;
vertical-align:middle;
}
#span01{
border:3px solid #3b5998;
color:#000000;
font-family:arial, bold;
font-size: 30px;
padding: 35px;
margin: 25;
}
It is vertically aligned in the full version but visually it's not (https://gyazo.com/f67cff590476c9e11601172b5b1dafd5 In this screenshot, the text does center align but the order doesn't. How do I make the border align?). I want them to align. If it is visually vertical for you then this problem only exists with the full version. I think it might be the image but, I don't know. How Do I fix this?
Also if you need the full code I will provide it below.
Full Code
HTML
<head>
<!--
Assignment: Personal Website
Date: 10/4/16
Name: Bradley Elko
-->
<link rel="stylesheet" href="personalWeb1.css">
</head>
<body>
<div id="div01">
<h1 id="h101">Bradley's Website</h1>
</div>
<div id="div02">
<h3 id="h301">My Band</h3>
<h3 id="h302">My Handlers</h3>
<h3 id="h303">My Ideas</h3>
</div>
<div id="div03">
<div id="div04">
<h2 id="h201">Formal Unknown Cereal Killer</h2>
</div>
<div id="div05">
<p id="p01">Date: 10/05/2016 (Latest Update)
<blockquote>
Summary:
<br/>
<br/>
Formal Unknown Cereal Killer is a band I made on September 30th, 2016. I don't have anyone else in it, but I will keep trying to get more members. The band will be a metalcore band(a rock genre). I may implement other instruments into the band (such as a violin, flute, clarenet, or another unique instrument). If you want to keep up to date check us out. The links are down below.
</blockquote>
<div id="div06">
<img id="img01" src="https://www.facebook.com/images/fb_icon_325x325.png"/>
<span id="span01">Facebook</span>
</div>
<div id="div07">
<img id="img02" src="https://pbs.twimg.com/profile_images/767879603977191425/29zfZY6I.jpg"/>
</div>
</div>
</div>
</body>
CSS
a:link{
color:#1a0000;
border-right:2px solid;
border-left:2px solid;
padding:5;
}
a:visited{
color:#950f0f;
}
a:hover{
color:red;
}
a:focus{
color:#eeeedd;
}
#div01 {
position:fixed;
top:0px;
left:0px;
right:0px;
height:80px;
bottom:90%;
font-family:Arial, Helvetica, sans-serif;
font-size:25px;
background-color:#73778c;
color:#950f0f;
text-align:center;
border-top:3px solid #950f0f;
border-bottom:2px solid #950f0f;
padding-top:0;
display:inline-block;
}
#h101{
margin-top:10;
margin-bottom:10;
}
#div02{
position:fixed;
top:85px;
left:0px;
right:0px;
display:inline-block;
background-color:#73778c;
color:#950f0f;
border-bottom:2px solid #950f0f;
text-align:center;
padding-top:5;
padding-bottom:5;
font-family:verdana;
font-size:12px;
}
#h301{
display:inline;
}
#h302{
margin-left :20%;
margin-right:20%;
display:inline;
}
#h303{
display:inline;
}
#div03{
position:fixed;
padding-top:0;
top:114px;
left:0%;
right:0%;
bottom:0%;
background-color:#73778c;
color:#950f0f;
border-bottom:3px solid #950f0f;
}
#div04{
font-size:30;
text-align:center;
margin-top:-30;
}
#h201{
font-family:Times New Roman;
}
#div05{
margin-left:100;
margin-right:100;
margin-bottom:100;
margin-top:-30;
padding-top:10;
padding-bottom:10;
padding-left:30;
padding-right:20;
border:3px solid #950f0f;
background-color:#e0e0d1;
}
#div06{
margin-top:3%;
display:inline-block;
width:100%;
line-height:100%;
}
#div07{
margin-top:3%;
}
#img01{
width:10%;
vertical-align:middle;
}
#span01{
border:3px solid blue;
padding: 35px;
margin: 25;
}
#img02{
width:10%;
}
Also (If you get this far you don't have to answer this. I'm just curious), how do you get Fullscreen inspect elements? Whenever I use it, it takes up a portion of the page that displays the portion of the website, but I want it to display the Fullscreen results [(This has been answered)].
Trying using text-align:
#div06 {
margin-top:3%;
display:inline-block;
width:100%;
line-height:100%;
text-align: center;
}
And to make the chrome dev-tools full screen, press the 3 small dots close to the side (menu button), and beside 'Dock side' there is a button to 'pop out'. This will make a new window with which you can resize as much as you need.
My friend told me I should use a table and it worked! Here is the snippet of code:
HTML
<table>
<tr>
<div id="div06">
<th><img id="img01" src="https://www.facebook.com/images/fb_icon_325x325.png"/></th>
<th><span class="span01"><a class="a02" style="text-decoration:none" target="_blank" href="https://www.facebook.com/groups/247367778991930/">Our Facebook Band Group</a></span></th>
</div>
</tr>
</table>
CSS
#img01
{
width:100px;
height:100px;
vertical-align:middle;
}
span.span01
{
border:3px solid #ffffff;
color:#000000;
font-family:arial;
font-size: 16px;
padding:38.5px;
margin: 25;
}
I Jerry-rigged a line behind 3 elements by having bars on the right and left of the elements. However, this solution isn't consistent across browsers -- See images below.
Is there a better way to place a line centered behind several objects using HTML and CSS? I tried and failed using pseudo elements/selectors (i.e., :after or :before) before coming to my solution below, but I don't want to rule them out.
Chrome
IE
My solution is, in fact, so jerry-rigged that I can't reproduce it in JS fiddle, but I did something like this:
(My fiddle just for reference https://jsfiddle.net/8t6qtafy/1/)
HTML
<div class="tab-header">
<span>
<div class="header-bar bar-left bar-blank"></div>
<p>1</p>
<div class="header-bar bar-right"></div>
</span>
<span>
<div class="header-bar bar-left"></div>
<p>2</p>
<div class="header-bar bar-right"></div>
</span>
<span>
<div class="header-bar bar-left"></div>
<p>3</p>
<div class="header-bar bar-right bar-blank"></div>
</span>
</div>
CSS
html {
font-family: calibri;
}
.container {
width = 400px;
margin:auto;
}
.tab-header {
margin-top:10px;
position:relative;
padding:5px 10px;
//display:inline-block;
}
.tab-header span {
height:45px;
width:45px;
border-radius:50%;
margin:auto;
color:#4c4a47;
background-color:transparent;
border:2px solid #99958E;
display:block;
position:relative;
}
.tab-header span p {
font-size:30px;
font-weight:bold;
text-align:center;
position:relative;
top:-4px;
left:.5px;
margin:2px;
}
.tab-header .header-bar {
width:130px;
height:3px;
background-color:#99958E;
position:relative;
}
.tab-header .bar-right {
left:42px;
top:-36px;
}
.tab-header .bar-left {
right:130px;
top: 19px;
}
.tab-header .header-bar.bar-blank {
background-color:transparent;
}
A bit late to the party: what browsers needed to be compatible?
Something like that is a bit neater and could work on all modern browsers and IE10: https://jsfiddle.net/fparent/qhprm41a
<div class="tab-header">
<span class="step active">1</span>
<span class="step">2</span>
<span class="step">3</span>
</div>
I am making a CSS design for a SIM game I play, and a customer asked for 4 boxes, two large and in between them, two horizontally aligned boxes. They work fine, unless I try and add headers. The entire website is set up in a ridiculous amount of tables, basically coding from the 90s. All boxes I have made are div and aligned to meet up with the existing boxes on the page.
The main boxes are how I want the headers on all four boxes, separate and do not scroll. However, as you can see from this fiddle, nothing is aligning. When I try to put headers on the horizontal boxes, it really messes up the align. I am a fairly new coder, and would greatly appreciate some help.
div {
display: block;
color: #fff;
}
.topcontain{
width:500px;
height:300px;
}
.topleftbox {
width:240px;
height:300px;
overflow:auto;
float:left;
background:#505665;
color:#fff;
text-align:center;
display:block;
font-family: 'Snippet', sans-serif;
font-size: 12px!important;
margin: 5px;
opacity: .75;
}
.toprightbox {
width:240px;
height:300px;
overflow:auto;
float:right;
background:#505665;
color:#fff;
text-align:center;
display:block;
font-family: 'Snippet', sans-serif;
font-size: 12px!important;
margin: 5px;
opacity: .75;
}
.bottomcontain {
width:500px;
height:300px;
}
.header {
width:500px;
float:center;
background:#060e23;
color:#fff;
text-align:center;
display:block;
font-size: 14px;
border: 1px solid #030711;
opacity: 1.0;
}
.bottombox {
width:500px;
height:300px;
overflow:auto;
float:center;
background:#505665;
font-size: 12px;
color:#fff;
text-align:center;
display:block;
font-family: 'Snippet', sans-serif;
opacity: .75;
}
.credit {
width:500px;
float:center;
background:#060e23;
color:#fff;
text-align:center;
display:block;
font-size: 12px;
border: 1px solid #030711;
opacity: .85;
}
.top {
font-family: 'Snippet', sans-serif;
background : #060e23;
color : #fff;
font-size : 15px;
padding : 5px 15px;
font-weight : normal;
text-align : center;
border: 1px solid #030711;
opacity: .90;
}
Here is how it looks on the page I am coding:
example
Thank you again!
http://jsfiddle.net/6bEsE/6/
<div class="bottomcontain">
<div class="header">Lorem ipsum</div>
<div class="bottombox">
[TOP]
</div>
</div>
<div class="topcontain">
<div class="topleftbox">
<div class="top">Lorem ipsum</div>
<div>
[MIDDLE LEFT]
</div>
</div>
<div class="toprightbox">
<div class="top">Lorem ipsum</div>
<div>
[MIDDLE RIGHT]
</div>
</div>
</div>
<div class="bottomcontain">
<div class="header">Lorem ipsum</div>
<div class="bottombox">
[BOTTOM]
</div>
</div>
<div class="credit">Layout and CSS by Echo [#15480]</div>
I did a fast clean of your code (5 minutes)
But it is far from finishing it
First of all, you have bad closing of divs.
Second, you have fixed height for divs. A div with fixed width and height and more text than can fit in it will create scrolls.
before inserting all that text, try to fix the containers starting from the simple example i provided above. Also you may need to change a bit the html structure, to group those floating middle divs.
Demo Fiddle
In CSS
.clear{
clear:both;
}
In HTML
<div class="clear"> </div>
I'm trying to align a button and some text at the bottom of a div much like the example below with the Price and the Check it out button. What's the best way to do this. I've made a div, styled it to get the text, and picture right. I just need to attach the button to the right-hand side and the price to the left, inline with each other.
Similar to the product displays in the website thisiswhyimbroke.com
http://www.thisiswhyimbroke.com/
^^ Price and the Check It Out button. How do I achieve this?
Try like this: DEMO
Try to use reset you CSS first.
CSS:
*{
padding:0;
margin:0;
}
#priceAndButton {
width:100%;
display:block;
height:30px;
line-height:30px;
}
#priceAndButton h4 {
float:left;
vertical-align:middle;
}
#priceAndButton img {
float:right;
}
Hope this helps you
I have created a working fiddle with your requirements:
http://jsfiddle.net/8993H/
HTML:
<div id="main-container">
<div class="img-div"><img src="http://tiwibzone.tiwib.netdna-cdn.com/images/beer-chug-flowmeter1-300x250.jpg"/></div>
<div class="rhs">
<div class="button-nav">
<span class="price">$35.00</span>
<span class="check-btn"><button>Check It Out</button></span>
</div>
</div>
</div>
CSS:
#main-container{
width:100%;
border: 1px solid #aaa;
}
.img-div{
width:50%
}
.img-div img{
width:100%;
}
.rhs{
width:48%;
float:right;
position:relative;
}
.button-nav{
position:absolute;
bottom:10px;
width:100%;
}
.price{
float:left;
}
.check-btn{
float:right;
}
Try this:
button{
float:right
}
#price{
float:left
}
Here i created one working fiddle for your requirement.. You can re use this CSS. Hope This will help you.
HTML
<div class="desc">
<img height="200px" width="200px" src="http://www.clker.com/cliparts/8/2/2/6/11971154711712468971BigRedSmile_A_screwdriver_1.svg.med.png"/>
<p>Move over sliced bread, the water jet pack is officially the greatest thing ever. For only sixty eight grand you can own your very own water thrusting jetpack. It can lift you up to 30 feet high and thrust forward at 30 miles per hour – practically guaranteeing certain death.</p>
<div class="button">
Check it out
</div>
<div class="price">$500.00</div>
</div>
CSS
.desc{
text-align:jstify;
width:50%;
}
.button a{
background-color: #faab37;
color: white;
display: block;
float: right;
padding: 7px 8px;
text-decoration: none;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
}
.button a:hover{
background-color:#f9bd66;
}
Hope This is What your expected output
I am working for this company that has hired me to turn a new home page design of theirs into html and css. In the design they gave me there is a search box in the header that they would like to be same as the one on their current webpage (http://shop.manorfinewares.com/intro.html). I am unsure how to navigate their current page's source code in order to successfully transfer the search box to the new page I am designing for them. Here is the header code that I have so far...
CSS:
#header{
position:absolute;
width:100%;
top:0;
height:107px;
min-width:600px;
border-bottom: 1px dotted #86beca;
}
#headerContainer{
position:relative;
width:100%;
margin:0 auto;
top:0;
height:107px;
max-width:1280px;
min-width:600px;
border-bottom: 1px dotted #86beca;
}
.headerUtilityContainer{
float:left;
padding-top:4px;
margin-left:8%;
width:22%;
height:103px;
}
.headerUtilityContainer img{
float:left;
margin-top:2px;
width:40%;
height:9px;
}
.headerLogoContainer{
float:left;
margin:0px;
width:40%;
height:107px;
}
.headerLogoContainer img {
display:block;
margin-top:30px;
margin-left:auto;
margin-right:auto;
width: 55%;
max-width:250px;
height: 57%;
}
.searchContainer{
float:left;
text-align:right;
font-size:70%;
padding-top:4px;
margin-right:8%;
width:22%;
height:103px;
}
.headerBorderDiv{
float:left;
width:100%;
margin:0 auto;
padding:0px;
height:2px;
border-bottom: 1px dotted #86beca;
HTML:
<div id="header">
<div id="headerContainer">
<div class="headerUtilityContainer">
<img src="images/manorSocialButtons.png" />
</div>
<div class="headerLogoContainer">
<img src="images/homePageLogo.png"/>
</div>
<div class="searchContainer">
LOGIN / REGISTER CART (0)
</div>
</div>
</div>
ANY advice will be very helpful as I am not sure where to start. I have never worked with XLS search bars in the past
It's still unclear as to what exactly you want, a right floated search bar with clear icon on input? I have created this fiddle for you, it replicates the behaviour of site you mentioned.
http://jsfiddle.net/DP22Y/
HTML
<div id="container">
<div id="utility">Utility</div><!--
--><div id="logo">Logo</div><!--
--><div id="search">LOGIN / REGISTER | CART (0)
<span class="clearable">
<input class="data_field" type="text" name="search" placeholder="Search..."/>
<span class="icon_clear">x</span>
</span>
</div>
</div>
CSS
#container{
margin:0 auto;
height:100px;
width:80%;
}
#utility, #logo, #search{
box-sizing: border-box;
color:#000;
height:100%;
float:left;
}
#utility{
background:#f1f1f1;
width:33.3%;
padding:10px;
}
#logo{
background:#e0e0e0;
width:33.3%;
padding:10px;
}
#search{
background:#e9e9e9;
width:33.3%;
padding:10px;
text-align:right
}
#search > #data_field{
margin:10px 0 10px;
padding:5px;
width:100px;
float:right;
}
span.icon_clear{
position:absolute;
right:10px;
top:0px;
display:none;
cursor:pointer;
font: bold 1em sans-serif;
color:#38468F;
}
span.icon_clear:hover{
color:#f52;
}
.clearable{
position:relative;
}
.data_field{
padding-right:17px; /* add space for the 'x' icon*/
width:100px;
}
jQuery
$(document).on('propertychange keyup input paste', 'input.data_field', function(){
var io = $(this).val().length ? 1 : 0 ;
$(this).next('.icon_clear').stop().fadeTo(300,io);
}).on('click', '.icon_clear', function() {
$(this).delay(300).fadeTo(300,0).prev('input').val('');
});
As far as the functionality is concerned, that is a different question altogether. That depends on what language you are using, do you want to make the results appear on page reload or without that using ajax, whats the db scheme etc. But the basic search would be something like this
Wrap search field with a form
Set an action and method for the form
Action will be the page the search results will be shown on