I am trying to get 3 things to set on the same line. One of them is a pic the other 2 are going to be text fields. this is what i have so far. I have an img in all three spots just to have a place holder.
<div class="top"><img src="Images/cmdg.jpg" ></img></div>
<div class="top1"><img src="Images/cmdg.jpg" ></img></div>
<div class="top2"><img src="Images/cmdg.jpg" ></img></div>
<style>
img{
width: 580px;
height:auto;
margin-left:580px;
margin-right: 574px;
margin-top: -18px;
border-color:white;
border-style:solid;
border-radius:50%;
border-width: 2px;
}
.top {
float:left;
margin: 33%;
width:180;
height:auto;
}
.top1 {
float:none;
margin: 33%;
width:180;
height:auto;
}
.top2 {
float:right;
margin: 33%;
width:180;
height:auto;
}
At this point it will stack them on top of each other, or just not look right.
Please help
You have to give margins according to the width of the window. When I remove/reduce the margins it works perfectly.
Try the code below and understand it.
<html>
<head>
<style type="text/css">
img{
width: 400px;
height:auto;
//reduce the margins below as the screen size is 1300 something hence decide accordingly.
/*margin-left:580px;
margin-right: 574px;*/
margin-top: -18px;
border-color:white;
border-style:solid;
border-radius:50%;
}
.top {
float:left;
height:auto;
}
.top1 {
float:left;
height:auto;
}
.top2 {
float:left;
height:auto;
}
</style>
</head>
<body>
<div class="top"><img src="Images/cmdg.jpg" ></div>
<div class="top1"><img src="Images/cmdg.jpg" ></div>
<div class="top2"><img src="Images/cmdg.jpg" ></div>
</body>
</html>
<style type="text/css">
img{
width: 380px;
height:auto;
border-width:6px;
border-style:solid;
border-color:white;
border-radius:50%;
}
.content{
display:table;
margin:auto;
}
.div{
float:left;
width:auto;
height:auto;
padding:5px;
}
</style>
<div class="content">
<div class="div top"><img src="Images/cmdg.jpg" ></div>
<div class="div top1"><img src="Images/cmdg.jpg" ></div>
<div class="div top2"><img src="Images/cmdg.jpg" ></div>
</div>
Related
I am building a website and right now I'm just about to complete the homepage. Now, the footer has a few links in it along with a few images next to each other like a contact us bar. But the links don't seem to align with the images even after trying everything. They seem to hang a little lower than the paragraphs or spans. I tried converting the spans on the same line to links but now all of them hang low.
HTML:
<div id="brdr_btm">
<div id="contactOptionContainer">
<div class="ctcObject">
<img class="ic_contact" src="http://i.imgur.com/pGiDhI2.png?1"/>
<div id="ctcLinks">
La Martiniere College, Lucknow
</div>
</div>
<div class="ctcObject">
<img class="ic_contact" src="http://i.imgur.com/E8Ow3O7.png?1">
<div id="ctcLinks">
secretariat#lmun.org
</div>
</div>
<div class="ctcObject">
<img class="ic_contact" id="ic_call" src="http://i.imgur.com/1di7mj9.png?1">
<!--<div id="phoneno">-->
<div id="ctcLinks">
+91 9670680417 (Sec. Gen), <!-- was span -->
+91 9415444444 (Dep. Sec. Gen) <!-- was span -->
</div>
</div>
<div class="ctcObject">
<img class="ic_contact" src="http://i.imgur.com/2HZVi1r.png?1">
</div>
</div>
</div>
CSS:
#brdr_btm
{
display:flex;
position:relative;
height: 25px;
width: 100%;
background-color: #70A5DA;
top:100%;
vertical-align:bottom;
margin_top:10px;
clear:both;
box-sizing:content-box;
/*z-index:-1;*/
}
#contactUs
{
margin:auto;
}
#contactOptionContainer
{
position:relative;
display:inline-block;
margin-top:auto;
margin-bottom:auto;
/* text-align:center;*/
box-sizing:content-box;
width:auto;
}
.ctcObject
{
display:inline-block;
margin-left:auto;
margin-right:5em;
/* margin-bottom:6px;*/
/* margin-top:auto;*/
}
.ic_contact
{
position:relative;
margin-top:6.25px;
margin-bottom:6.25px;
height: 12.5px;
width: 12.5px;
-webkit-user-drag:none;
user-select:none;
-ms-user-select:none;
-moz-user-select:none;
-webkit-user-select:none;
user-drag:none;
/* z-index:-1;*/
}
#ic_call
{
margin-top: -2px;
height:10.5px;
width:10.5px;
}
#ctcLinks
{
position:relative;
display:inline-block;
}
#ctcLinks a
{
position:relative;
margin-top:-6px;
margin-bottom:0px;
/* display:inline-block;*/
font-size:0.8em;
color:#FFFFFF;
/* text-align:center;*/
}
#phoneno
{
position:relative;
display:inline-block;
text-align:center;
}
#phoneno span
{
margin-left:0;
margin-right:0;
margin-bottom:6px;
margin-top: -1px;
text-align:center;
display:inline-block;
color:#ffffff;
vertical-align:middle;
font-size:0.9em;
}
How do I prevent this from happening and what causes it?
What might be the solution to the problem?
Here's my JSFiddle: http://jsfiddle.net/mfxefccz/
You should add to .ic_contact and #ctcLinks this style
display: inline-block;
height: 100%;
vertical-align: middle;
#brdr_btm
{
display:flex;
position:relative;
height: 25px;
width: 100%;
background-color: #70A5DA;
top:100%;
vertical-align:bottom;
margin_top:10px;
clear:both;
box-sizing:content-box;
/*z-index:-1;*/
}
#contactUs
{
margin:auto;
}
#contactOptionContainer
{
position:relative;
display:inline-block;
margin-top:auto;
margin-bottom:auto;
/* text-align:center;*/
box-sizing:content-box;
width:auto;
}
.ctcObject
{
display:inline-block;
margin-left:auto;
margin-right:5em;
/* margin-bottom:6px;*/
/* margin-top:auto;*/
}
.ic_contact
{
position:relative;
margin-top:6.25px;
margin-bottom:6.25px;
height: 12.5px;
width: 12.5px;
display: inline-block;
height: 100%;
vertical-align: middle;
-webkit-user-drag:none;
user-select:none;
-ms-user-select:none;
-moz-user-select:none;
-webkit-user-select:none;
user-drag:none;
/* z-index:-1;*/
}
#ic_call
{
margin-top: -2px;
height:10.5px;
width:10.5px;
}
#ctcLinks
{
position:relative;
display: inline-block;
height: 100%;
vertical-align: middle;
display:inline-block;
}
#ctcLinks a
{
position:relative;
margin-top:-6px;
margin-bottom:0px;
/* display:inline-block;*/
font-size:0.8em;
color:#FFFFFF;
/* text-align:center;*/
}
#phoneno
{
position:relative;
display:inline-block;
text-align:center;
}
#phoneno span
{
margin-left:0;
margin-right:0;
margin-bottom:6px;
margin-top: -1px;
text-align:center;
display:inline-block;
color:#ffffff;
vertical-align:middle;
font-size:0.9em;
}
<div id="brdr_btm">
<div id="contactOptionContainer">
<div class="ctcObject">
<img class="ic_contact" src="http://i.imgur.com/pGiDhI2.png?1"/>
<div id="ctcLinks">
La Martiniere College, Lucknow
</div>
</div>
<div class="ctcObject">
<img class="ic_contact" src="http://i.imgur.com/E8Ow3O7.png?1">
<div id="ctcLinks">
secretariat#lmun.org
</div>
</div>
<div class="ctcObject">
<img class="ic_contact" id="ic_call" src="http://i.imgur.com/1di7mj9.png?1">
<!--<div id="phoneno">-->
<div id="ctcLinks">
+91 9670680417 (Sec. Gen), <!-- was span -->
+91 9415444444 (Dep. Sec. Gen) <!-- was span -->
</div>
</div>
<div class="ctcObject">
<img class="ic_contact" src="http://i.imgur.com/2HZVi1r.png?1">
</div>
</div>
</div>
Here a demo.
So, displayed it like an inline-block, because display: inline-block; don't work with blocks. And give then a height: 100%. In this case in means 100% from a parent. So we always have an image or block in the vertical center.
You have set margins for .ic_contact. If you remove margin-bottom for .ic_contact, your images and links would align properly. see here
.ic_contact
{
position:relative;
margin-top:6.25px;
height: 12.5px;
width: 12.5px;
}
I am trying to build a website that has three floating columns in the middle of the page. I have a container wrapping around everthing but it will not extend fully. Is there something I am doing wrong?
Thanks
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<div id="container">
<div id="header">
<div id="navbar"></div>
</div>
<div id="topper">This is the Topper</div>
<div id="colone">This is column one</div>
<div id="coltwo">This is column two</div>
<div id="colthree">This is colum three</div>
<div id="footer">This is the footer</div>
</div>
</body>
</html>
#charset "utf-8";
/* CSS Document */
#container
{
background-color:#CCC;
min-height:100%;
}
#header
{
background-color: #000;
width:100%;
float:left;
}
#navbar
{
background-color: #FFF;
border-radius: 10px;
height:75px;
width:70%;
margin: 0 auto;
margin-top:10px;
margin-bottom:10px;
border-radius:10px;
}
#topper
{
background-color:#000;
height: 175px;
}
#colone
{
background-color:#FFF;
float:left;
margin-left:15px;
margin-top:-20px;
height:150px;
}
#coltwo
{
background-color:#FFF;
float:left;
margin-left:15px;
margin-top:-20px;
height:150px;
}
#colthree
{
background-color:#FFF;
float:left;
margin-left: 15px;
margin-top:-20px;
height:150px;
}
#footer
{
}
You need to clear your float. This is what it looks like.
http://jsfiddle.net/ZT59d/
<div id="container">
<div id="header">
<div id="navbar"></div>
</div>
<div id="topper">This is the Topper</div>
<div id="colone">This is column one</div>
<div id="coltwo">This is column two</div>
<div id="colthree">This is colum three</div>
<div class="clear"></div>
<div id="footer">This is the footer</div>
</div>
#container {
background-color:#CCC;
min-height:100%;
}
#header {
background-color: #000;
width:100%;
float:left;
}
#navbar {
background-color: #FFF;
border-radius: 10px;
height:75px;
width:70%;
margin: 0 auto;
margin-top:10px;
margin-bottom:10px;
border-radius:10px;
}
#topper {
background-color:#000;
height: 175px;
}
#colone {
background-color:#FFF;
float:left;
margin-left:15px;
margin-top:-20px;
height:150px;
}
#coltwo {
background-color:#FFF;
float:left;
margin-left:15px;
margin-top:-20px;
height:150px;
}
#colthree {
background-color:#FFF;
float:left;
margin-left: 15px;
margin-top:-20px;
height:150px;
}
.clear
{
clear:both;
}
#footer {
}
If you don't mind, I'm going to give you some suggestions on how to improve your code.
First, you're using HTML5 but you're not using some of the new elements. Let's replace them.
<header>
<nav></nav>
</header>
<main>
<div id="topper">This is the Topper</div>
<div id="colone">This is column one</div>
<div id="coltwo">This is column two</div>
<div id="colthree">This is colum three</div>
<div class="clear"></div>
</main>
<footer>This is the footer</footer>
You're also using ids for everything. Trust me, you don't want to do that. Realistically, you should be using ids sparingly. I'm at the point now that the only time I use an id is if I need to target something with javascript.
<header>
<nav></nav>
</header>
<main>
<div id="topper">This is the Topper</div>
<div class="column">This is column one</div>
<div class="column">This is column two</div>
<div class="column">This is colum three</div>
<div class="clear"></div>
</main>
<footer>This is the footer</footer>
Here's what you're new css would look like.
body {
background-color:#CCC;
min-height:100%;
}
header {
background-color: #000;
width:100%;
float:left;
}
nav {
background-color: #FFF;
border-radius: 10px;
height:75px;
width:70%;
margin: 0 auto;
margin-top:10px;
margin-bottom:10px;
border-radius:10px;
}
#topper {
background-color:#000;
height: 175px;
}
.column {
background-color:#FFF;
float:left;
margin-left:15px;
margin-top:-20px;
height:150px;
}
.clear {
clear:both;
}
I left #topper in because it's unusual. It's hard for me to tell exactly what you're trying to achieve with it.
Here's the fiddle with everything together.
Easy way to fix this is to add such CSS rules:
#footer
{
clear: both;
}
#container {
overflow: hidden;
}
DEMO
Obviously, you have some problems understanding how float property works. You should investigate it more careful. Especially I would recommend to check out clearfix hack.
I am trying to place some text inside an image, but the text div is not coming on top of the image, rather it is hidden and invisible right below the image. thanks in advance!
Here is a link to jsfiddle:
http://jsfiddle.net/XrXZj/1/
have the following in my css file:
.spotlight {
color:#FFFFFF;
display:table;
height:120px;
margin-bottom:15px;
margin-left:0px;
overflow:hidden;
padding:0 50px;
position:relative;
width:840px;
}
.spotlight .wrapper {
position:absolute;
}
.spotlight .middle {
display:table-cell;
height:50px;
vertical-align:middle;
}
.spotlight .spotlight-copy {
font-size:15px;
line-height:25px;
width:500px;
}
and here is the content of html file:
<div class="spotlight">
<img src="<spring:url value="/assets/img/banner-natural-hazard-risk.jpg"/>" border="0" />
<div class="wrapper">
<div class="middle">
<div class="spotlight-copy">
<spring:message code="content.location.title" />
</div>
</div>
</div>
<div style="clear: both;"></div>
</div>
.spotlight .wrapper {
position:absolute;
top: 0;
}
I put there a solution http://jsfiddle.net/NPh76/
HTML is:
<div class="wrapper">
<div class="middle">
<div class="spotlight">
<img src="http://www.springsource.org/files/header/logo-spring-103x60.png" border="0" />
<div class="spotlight-copy">
message in spotlight copy
</div>
</div>
</div>
<div style="clear: both;"></div>
notice about HTML:
<IMG> is into .middle to be at same level as .spotlight-copy
CSS is:
.spotlight {
color:#FFFFFF;
display:table;
height:120px;
margin-bottom:15px;
margin-left:0px;
overflow:hidden;
padding:0 50px;
position:absolute;
width:840px;
}
.spotlight .wrapper {
position:absolute;
}
.spotlight .middle {
display:table-cell;
height:50px;
vertical-align:middle;
}
.spotlight .spotlight-copy {
position:absolute;
top: 0px;
font-size:15px;
line-height:25px;
width:500px;
color:#FF0000;
}
notice about CSS
position:absolute; in .spotlight-copy
top: 0px; for position
color:#FF0000; to see something ;)
I have a series of nested divs in which I am trying to have one piece of text, "TICKET NAME", overflow onto two others.
Here's a picture of the undesired results:
And here's my code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Game</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<div id="game_head">
<div id="timer">
</div>
<div id="flags">
<div id="best_of">
</div>
</div>
<div id="team_1">
<span class="team_name">Team 1</span>
</div>
<div id="ticket">
<span class="versus">VS</span>
<span class="ticket_name">TICKET NAME</span>
</div>
<div id="team_2">
<span class="team_name">Team 2</span>
</div>
</div>
<div id="game_body">
</div>
<body>
</body>
</html>
My CSS looks like this:
#game_head {
height: 62px;
width: 555px;
background-color: #CCC;
}
#timer {
height: 100%;
width: 26%;
background-color:#111;
float:left;
}
#flags {
height: 100%;
width: 4%;
background-color:#333;
float:left;
}
#best_of{
height:33%;
background-color:#F00;
}
#team_1 {
height: 100%;
width: 31.5%;
background-color:#999;
float:left;
text-align:center;
display:table;
}
#team_2 {
height: 100%;
width: 31.5%;
background-color:#999;
float:left;
text-align:center;
display:table;
}
#ticket {
height: 100%;
width: 7%;
background-color:#333;
float:left;
overflow:visible;
}
span.ticket_name{
color:#FFF;
}
span.team_name{
display: table-cell;
vertical-align: middle;
}
span.versus{
color:#F00;
}
How would I go about making the "TICKET NAME" text be centered in the "ticket" div but spill over into the "team_1" and "team_2" divs?
Thanks in advance!
Well you could make all the divs absolute and then set the z-index of the ticket to greater than the rest and have it wider than them as well
http://jsfiddle.net/PRAPc/
I want a search icon like this rendered in the beginning of the textbox and I can't get the following to work. Please help.
html:
<body class="claro" data-maq-flow-layout="true" data-maq-comptype="desktop" data-maq-ws="collapse" style="margin-top:0" id="myapp" data-maq-appstates="{}">
<div id="top_bar">
<div style="width: 900px; height:50px; margin-left: auto; margin-right: auto;">
<a href="/" class="logo logo_a">
<div class="logo">
</div>
</a>
<div class="midArea_div">
<div class="searchBox_div">
<input type="text" data-dojo-type="dijit.form.TextBox" class="searchBox"></input>
</div>
</div>
</div>
</div>
<div id="top_bar_divider"></div>
<div data-dojo-type="dijit.layout.BorderContainer" persist="false" gutters="true" style="min-width: 1em; min-height: 1px; z-index: 0; width: 600px; height: 687px; margin-left: auto; margin-right: auto;" design="headline">
<div data-dojo-type="dijit.layout.ContentPane" extractContent="false" preventCache="false" preload="false" refreshOnShow="false" region="center" splitter="false" maxSize="Infinity">
</div>
</div>
</body>
js:
require([
"dijit/dijit",
"dojo/parser",
"maqetta/space",
"maqetta/AppStates",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/form/TextBox"
]);
css:
html,body {
height: 100%;
width: 100%;
}
.logo_a{
background:url("icon1.png");
}
.logo{
width:60px;
height:50px;
display:inline-block;
vertical-align:middle;
}
.logo_a:active{
background-position:0 1px;
}
#top_bar{
padding:0px;
background: -webkit-linear-gradient(#464646, #121212);
background: -moz-linear-gradient(#464646, #121212);
background: -ms-linear-gradient(#464646, #121212);
background: -o-linear-gradient(#464646, #121212);
background: linear-gradient(#464646, #121212);
color: #ccc;
text-shadow:none;
height:50px;
width:100%;
}
#top_bar_divider{
background-color:#1ba0e1;
height:4px;
width:100%;
}
.searchBox{
height: 30px;
width: 400px;
padding-left:30px;
font-size:20px;
}
.searchBox_div{
display:inline-block;
verticle-align:middle;
background: #FFF url("http://app.maqetta.org/maqetta/user/CoQ/ws/workspace/project1/search_icon.png") no-repeat scroll 5px 6px;
}
.midArea_div{
margin-left: 100px;
verticle-align:middle;
display:inline-block;
}
.searchIcon{
}
Your current method doesn't work because the textbox is on top of its background so it isn't visible. You can do this using a pseudo-element on .searchBox_div (doesn't work in <= IE8).
jsFiddle
.searchBox_div {
position:relative;
}
.searchBox_div:before {
content:"";
display:block;
position:absolute;
background: url(http://app.maqetta.org/maqetta/user/CoQ/ws/workspace/project1/search_icon.png) no-repeat center center;
width:24px;
height:24px;
left:4px;
top:50%;
margin-top:-12px;
z-index:1;
}
Alternatively you could apply these styles to another div inside .searchBox_div to get around the IE8 issue at the cost of more markup.
jsFiddle
HTML
<div class="midArea_div">
<div class="searchBox_div">
<input type="text" data-dojo-type="dijit.form.TextBox" class="searchBox"></input>
<div class="overlay"></div>
</div>
</div>
CSS
.searchBox_div {
position:relative;
}
.overlay {
position:absolute;
background: url(http://app.maqetta.org/maqetta/user/CoQ/ws/workspace/project1/search_icon.png) no-repeat center center;
width:24px;
height:24px;
left:4px;
top:50%;
margin-top:-12px;
z-index:1;
}