This is my code. I want the TimeDisplay to be at the same position but the title to still be centered inside that div.
<html>
<div style="background-color:seagreen; width:100%; height:12.5%; text-align:center; display:table;">
<a style="color:aqua; font-family:Calibri; font-size:4vmax; font-weight:700; text-decoration:none; display:table-cell; vertical-align:middle;" href="Home.html">Soogbad's Website</a>
<h2 id="TimeDisplay" style="color:aqua; font-family:Calibri; font-size:1.25vmax; display:table-cell; vertical-align:middle;">00/00/0000 00:00:00</h2>
</div>
</html>
How do I do that?
try using style="position: absolute;" for the TimeDisplay
Related
I'm trying to center (align horizontally) a button on my email template. Here is my current code:
<p class="product-link" style="text-align:left; width:60%; display:inline-block; vertical-align:middle;">
<span>
<a style="color:#000000; background:#F4D079; padding:10px 15px; display:inline-block; margin-bottom:10px; text-decoration:none; border-radius:5px; font-size:14px;" href="https://www.amazon.com/review/review-your-purchases/ref=?_encoding=UTF8&asins=[[PRODUCT_ASIN]]">Share your opinion</a>
</span>
<br>
</p>
I know this is an amateur question and I apologize, I've tried a million things and haven't gotten anything to work.
Removed unnecessary styles (width:60%; display:inline-block;),and added style to center the button(text-align: center;).
<p class="product-link" style="text-align: center;vertical-align:middle;">
<span><a style="color:#000000; background:#F4D079; padding:10px 15px; display:inline-block; margin-bottom:10px; text-decoration:none; border-radius:5px; font-size:14px;" href="https://www.amazon.com/review/review-your-purchases/ref=?_encoding=UTF8&asins=[[PRODUCT_ASIN]]">Share your opinion</a></span><br>
<script type="text/javascript">
</script>
</p>
Set the parent element to display block and the button to margin-left and margin-right auto :)
this is my first question and I hope I would get some help here.
I have made this HTML page that has 5 DIV's mainly:
Header
Content
Footer
Content contains
Left
Right
The Left and Right Div's float on Left and right respectively.When I put something content div with an H1 tag the div's get somewhat disorted and I get a approx. 10px space between the header and content section, somewhat like this:
Disorted
However the original one should be:
Original
<body>
<a target="_blank"><div id="main" >
<div id="header" >
<a style="color:#000000" href="home.html">Home</a>
<a style="color:#000000" href="about.html">about</a>
<a style="color:#000000" href="Our customers.html">Our Customers</a>
<a style="color:#000000" href="Career.html">Careers</a>
<a style="color:#000000" href="Contact us.html">Contact us</a>
</div>
<div id="content">
<div id="left" ></div>
<div id="right" ></div>
Home
</div>
<div id="footer">
<a style="color:#FFFFFF" href="home.html">Privacy Policy</a>|
<a style="color:#FFFFFF" href="Feedback.html">Feedback</a>|
<a style="color:#FFFFFF" href="disclaimer.html">Disclaimer</a>|
<a style="color:#FFFFFF" href="Manadatory.html">Manadatory Disclosure</a>|
<a style="color:#FFFFFF" href="sitemap.html">Site Map</a>|
</div>
</div></body>
Here is my CSS Code:
#main
{
height:900px;
background-color:#000000;
}
#header
{
height:100px;
background-color:#00FF00;
padding:70px;
padding-right:70px;
font-size:30px;
text-align:center;
background-image:url(Images/text3.jpg);
padding: 50px;
}
#content
{
height:700px;
background-color:#FFFFFF;
}
#left
{
float:left;
height:700px;
background-color:#FF0000;
width:150px;
background-image:url(Images/navbar2.jpg);
}
#right
{
float:right;
height:700px;
background-color:#FF0000;
width:150px;
background-image:url(Images/navbar2.jpg);
}
#footer
{
padding:50px;
padding-right:70px;
font-size:20px;
text-align:center;
height:100px;
background-image:url(Images/footer.jpg);
}
Fixing position of the div's using position hasn't helped. Thanks for any help in advance :)
Right click and inspect element on your browser and check the divs. You should see what's happening to it. Most likely it will be some default styling that's giving some margins. That's why most people use some kind of reset.css as a clean base. I imagine the default css is applying margins to the <p> and <h1> tags.
Maybe try adding something like:
h1 {
margin:0;
}
Obviously you could specify only certain margins rather than all or .content h1{} to just apply styling to the headers within the content block.
I only need one column on my index page and I want it to be on the right side of the screen. I am using a background image that has what I want on the left. bg-image is in the body
I am trying this approach but it is not getting all the way to the right. Am I going about this wrong and more generally how do you position one column to the right of the screen?
<div style=" float:right" >
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</div>
css for the four inner divs
body{
background-image: url(images/splashpage.jpg);
background-position:top;
font-family: Arial, Helvetica, sans-serif;
}
.one{
<!-- width:40%; -->
background-color:lightblue;
font-family: Arial, Helvetica, sans-serif;
position:relative;
<!-- left:150px; -->
}
.two{
width:580px;
background-color:lightgreen;
position:relative;
right:100px;
top:50px;
}
.three{
width:600px;
background-color:blue;
position:relative;
right:100px;
}
.four{
width:580px;
position:relative;
left:20px;
margin: 0 auto;
top:50px;
}
.footer{
width:580px;
text-align:center;
position:relative;
top:50px;
this was working fine for the containing div to float right, but all this was doing was putting the inner divs side by side and I need them to stack.
<div style=" float:right" class="container" >
<div class="one" style="float:right"></div>
<div class="two" style="float:right"></div>
<div class="three" style="float:right"></div>
<div class="four" style="float:right"></div>
</div>
so I put a clear div in between each and now the container div floats right as well as the inner divs while stacking. It seems simple now but maybe if someone else has this problem this will help.
<div style=" float:right" class="container" >
<div class="one" style="float:right"></div>
<div style="clear:both"></div>
<div class="two" style="float:right"></div>
<div style="clear:both"></div>
<div class="three" style="float:right"></div>
<div style="clear:both"></div>
<div class="four" style="float:right"></div>
</div>
not sure if its best practice or if there's a more efficient way but it works.
Below is my code :
<div id="footer">
<div id="left_footer">
<div id="img_left" align="center">
<img src="separator_bar.jpg" align="middle"/>
</div>
</div>
<div id="right_footer">
<div id="img_right" align="center">
<img src="separator_bar.jpg" align="middle"/>
</div>
</div>
</div
CSS:
#footer {
width:500px;
position:relative
}
#left_footer{
float:left;
}
#right_footer{
float:right;
}
I am trying this code but my image is not aligned to center its always aligned to left in left footer and to right in right footer. Please suggest !
I would approach the layout like this:
http://jsfiddle.net/yWmZ5/1/
HTML
<div id="footer">
<div id="left_footer">
<img src="http://placekitten.com/100/100" />
</div>
<div id="right_footer">
<img src="http://placekitten.com/100/100" />
</div>
</div>
CSS
#footer { width:500px; position:relative; overflow:hidden; }
#left_footer{ width:250px; float:left; text-align:center; background:orange; }
#right_footer{ width:250px; float:right; text-align:center; background:yellow; }
Make sure you strip all styling (eg - align, etc) out of your HTML and put it in your CSS.
Try this style:
#footer > div{width:50%}
your div#left_footer and div#right_footer need to have some width, in order to display the content in the middle
change your corresponding css to this:
#left_footer{
text-align:center;
float:left;
width:50%;
}
#right_footer{
float:right;
width:50%;
}
see this fiddle
I have 1 div wrapping h2 and image wrapped in div with class img. h2 is float:left and img float:right.
img div has image inside. What I want is
if image is height and width 100px than its not vertical-align:middle. Help please.
Tested with vertical-align:middle
CSS
.ver-mainbox{float:left; width:898px; border:1px solid #c3c3c3; padding:0px; height:122px; margin-bottom:15px; background-color:#ffffff;}
.ver-mainbox h2{font-size:18px;color:#000; padding-left:10px; margin:0px; vertical-align:middle; width:500px; float:left; padding-top:42px;}
.ver-mainbox .img{float:right; padding:0px; width:186px; height:122px;}
HTML
<div class="mainbox-area">
<!-- Box start v1 -->
<div class="ver-mainbox">
<h2>Immunizations</h2>
<div class="img"><img src="../../Content/images/v1.gif" alt="" title="" /></div>
</div>
<!-- Box start v1 -->
</div>
vertical-align is only applicable to table cells. You'll need to rethink how you go about this or use the display:table-* properties.
<div style="display:table">
<h2 style="display:table-cell;vertical-align:middle">Immunizations</h2>
<div style="display:table-cell;vertical-align:middle">
<img src="../../Content/images/v1.gif" alt="" title="" />
</div>
</div>