I have made this:
#basketLinkId .buttonCart {
padding-top: 8px;
padding-right:17px;
padding-bottom:12px;
padding-left:5px;
border-radius: 6px;
color: #fff;
text-decoration: none;
background-color: #28a8e0;
float: right;
position: relative;
height:10px;
}
#itemCountForCart{
font-size:9pt;
}
.cartCornerIcon, .cartCornerTextBestellen {
display: inline-block;
font-size:10pt;
margin-left:0.20em;
}
#basketLinkId .svgCartIcon {
width: 36px;
height: auto;
vertical-align: middle;
}
#itemCountForCart {
position: absolute;
top: 10px;
left: 16px;
min-width: 2rem;
text-align: center;
}
<a href="#" class="cartLinkClass" id="basketLinkId">
<div class="buttonCart">
<div class="cartCornerIcon">
<!-- svg image to code : https://jakearchibald.github.io/svgomg/ -->
<svg class="svgCartIcon" xmlns="http://www.w3.org/2000/svg" width="141px" height="88px" viewBox="0 0 6.7884028 298.54643"><path d="m 241.22792,213.72354 -282.900379,0 -118.939781,-189.976486 -73.82728,0 0,-23.7470599713325 96.06009,0 L -19.442559,189.97648 l 260.670479,0 M 52.037289,263.61893 c 0,19.28289 -15.64461,34.9275 -34.9275,34.9275 -19.2828876,0 -34.927498,-15.64461 -34.927498,-34.9275 0,-19.28289 15.6446104,-34.9275 34.927498,-34.9275 19.28289,0 34.9275,15.64461 34.9275,34.9275 z m 179.627041,0 c 0,19.28289 -15.64461,34.9275 -34.9275,34.9275 -19.28289,0 -34.9275,-15.64461 -34.9275,-34.9275 0,-19.28289 15.64461,-34.9275 34.9275,-34.9275 19.28289,0 34.9275,15.64461 34.9275,34.9275 z"/></svg>
</div>
<div id="itemCountForCart"> 100 </div>
<div class="cartCornerTextBestellen">Bestellen</div>
</div>
</a>
In Chrome it looks like this:
And in Firefox like this:
But in internet explorer it looks like this:
Any idea why this happen. Plus how can i move the text "Bestellen" a bit up. Because if I move it with margin, the icon will also move while i seperated them in different divs.
Hope anyone can help me out a bit. Thank you.
Internet Explorer 9-11 has known issues with scaling SVG images and this is likely a side-effect of this :
The general recommendation is to add explicit height and width properties, which you could try with something like :
#basketLinkId .svgCartIcon {
/* Setting explicit widths and heights can help rendering SVG issues */
width: 36px;
height: 20px;
vertical-align: middle;
}
Example using explicit height/width
#basketLinkId .buttonCart {
padding-top: 8px;
padding-right: 17px;
padding-bottom: 12px;
padding-left: 5px;
border-radius: 6px;
color: #fff;
text-decoration: none;
background-color: #28a8e0;
float: right;
position: relative;
height: 10px;
}
#itemCountForCart {
font-size: 9pt;
}
.cartCornerIcon,
.cartCornerTextBestellen {
display: inline-block;
font-size: 11pt;
margin-left: 0.20em;
}
#basketLinkId .svgCartIcon {
width: 36px;
height: auto;
vertical-align: middle;
}
#itemCountForCart {
position: absolute;
top: 10px;
left: 16px;
min-width: 2rem;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<a href="#" class="cartLinkClass" id="basketLinkId">
<div class="buttonCart">
<div class="cartCornerIcon">
<!-- svg image to code : https://jakearchibald.github.io/svgomg/ -->
<svg class="svgCartIcon" xmlns="http://www.w3.org/2000/svg" width="141px" height="88px" viewBox="0 0 6.7884028 298.54643">
<path d="m 241.22792,213.72354 -282.900379,0 -118.939781,-189.976486 -73.82728,0 0,-23.7470599713325 96.06009,0 L -19.442559,189.97648 l 260.670479,0 M 52.037289,263.61893 c 0,19.28289 -15.64461,34.9275 -34.9275,34.9275 -19.2828876,0 -34.927498,-15.64461 -34.927498,-34.9275 0,-19.28289 15.6446104,-34.9275 34.927498,-34.9275 19.28289,0 34.9275,15.64461 34.9275,34.9275 z m 179.627041,0 c 0,19.28289 -15.64461,34.9275 -34.9275,34.9275 -19.28289,0 -34.9275,-15.64461 -34.9275,-34.9275 0,-19.28289 15.64461,-34.9275 34.9275,-34.9275 19.28289,0 34.9275,15.64461 34.9275,34.9275 z"
/>
</svg>
</div>
<div id="itemCountForCart">100</div>
<div class="cartCornerTextBestellen">Bestellen</div>
</div>
</a>
</body>
</html>
Related
The top & the left css values in my code are not working. I've applied them to an h1 but, their not working and I don't know why. Here is all of my code. I've been trying to see what's wrong for a really long time. Please tell me if you spot a problem. And thank you for looking at my post.
body {
margin: 0;
padding: 0;
background-color: #171a1f;
}
h1.TxT {
top: 10px;
left: 10px;
color: #ffa600;
} // here is where the code is not working
.search-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #2f3640;
height;
40px;
border-radius: 40px;
padding: 10px;
}
.search-box:hover>.search-txt {
width: 240px;
padding: 0 6px;
}
.search-btn {
color: #ffa600;
float: right;
width: 30px;
height 50px;
border-radius: 50%;
background: ;
display: flex;
justify-content: center;
text-align: center;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
transition: 0.4s;
line-height: 30px;
width: 240px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="search-style.css">
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<title>Searchbar Test</title>
</head>
<body>
<h1 class="TxT">Search</h1>
<div class="search-box">
<input class="search-txt" type="text" name="" placeholder="Type to search">
<a class="search-btn" href="#">
<i class="fas fa-search"></i>
</a>
</div>
</body>
</html>
There were a couple of small errors affecting your code. The first was that you had a colon instead of a semi-colon in the height css. Also there was no background attribute set in the background of the search btn (I commented it out)
The main thing, however, was that your comment was formatted so that the search-box class was not being picked up. Instead of using 2 forward slashes in css, surround your comments with /* and */ - asterisk and and forward slashes.
body {
margin: 0;
padding: 0;
background-color: #171a1f;
}
h1.TxT {
top: 10px;
left: 10px;
color: #ffa600;
} /* here is where the code is not working*/
.search-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #2f3640;
height:40px;
border-radius: 40px;
padding: 10px;
}
.search-box:hover>.search-txt {
width: 240px;
padding: 0 6px;
}
.search-btn {
color: #ffa600;
float: right;
width: 30px;
height 50px;
border-radius: 50%;
/* background:*/
display: flex;
justify-content: center;
text-align: center;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
transition: 0.4s;
line-height: 30px;
width: 240px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="search-style.css">
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<title>Searchbar Test</title>
</head>
<body>
<h1 class="TxT">Search</h1>
<div class="search-box">
<input class="search-txt" type="text" name="" placeholder="Type to search">
<a class="search-btn" href="#">
<i class="fas fa-search"></i>
</a>
</div>
</body>
</html>
Apart from the syntax errors for the comment in the CSS code: For top and left parameters to work (for that h1 element), the element needs to have position: relative ( or absolute or fixed, but those will also affect the position in other ways, so you'll most likely need relative position)
newbie to HTML & CSS here with only 2 weeks learning under my belt. I'm trying to replicate the Google web page and although I have managed to center the "Google" logo and the searchbar underneath it, i've done it using margin-top and margin-left properties. I did try margin: 0 auto; with some other properties but could not get anything to work. The times when I did manage to center the logo using different properties, it wasn't fully central on the page. Basically what i'm saying is that the way i've done it works, but I know it isn't the most efficient way of making these two elements central on the page and it certainly doesn't represent a responsive webpage.
Would anyone mind having a look at the code i've pasted below and offer advice on the best way to go about this? I've included the whole HTML and CSS code, incase anyone wishes to load the site in Notepad etc. Many thanks in advance!
<!DOCTYPE html>
<head>
<title>Google</title>
<link href="stylesheet.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="nav">
<ul>
<li id="sign-in">Sign in</li>
<li id="grid-list">
<center><img src="grid-list.jpg"/></center>
</li>
<li id="images">Images</li>
<li id="gmail">Gmail</li>
</ul>
</div>
<div class="main">
<img src="logo.jpg" alt="Google"/>
<p id="searchbar"></p>
</div>
</body>
* {
box-sizing: border-box;
}
div.nav li {
display: inline-block;
font-family: Helvetica;
font-size: 13px;
width: auto;
float: right;
color: #414042;
}
#gmail {
margin-right: 15px;
margin-top: 7px;
padding: 0;
}
#images {
margin-right: 22px;
margin-top: 7px;
padding: 0;
}
#sign-in {
margin-right: 22px;
padding: 7px 13px;
background-color: #1789E8;
color: white;
border-radius: 2px;
font-weight: bold;
height: auto;
text-align: center;
}
#grid-list {
margin-right: 22px;
margin-top: 7px;
}
.main img {
margin-left: 536px;
margin-top: 182px;
}
#searchbar {
border: 1px solid #E8DAEB;
border-radius: 2px;
padding: 0;
text-align: center;
margin-left: 390px;
margin-right: 375px;
margin-top: 21px;
height: 46px;
width: 585px;
}
To center an image you can use text-align:center; on the parent element. For the searchbar you can use margin:0 auto; as long as the search bar has a defined width:
* {
box-sizing: border-box;
}
div.nav li {
display: inline-block;
font-family: Helvetica;
font-size: 13px;
width: auto;
float: right;
color: #414042;
}
#gmail {
margin-right: 15px;
margin-top: 7px;
padding: 0;
}
#images {
margin-right: 22px;
margin-top: 7px;
padding: 0;
}
#sign-in {
margin-right: 22px;
padding: 7px 13px;
background-color: #1789E8;
color: white;
border-radius: 2px;
font-weight: bold;
height: auto;
text-align: center;
}
#grid-list {
margin-right: 22px;
margin-top: 7px;
}
.main {
padding-top:182px;
text-align:center;
}
#searchbar {
border: 1px solid #E8DAEB;
border-radius: 2px;
padding: 0;
text-align: center;
margin:21px auto 0;
height: 46px;
width: 585px;
}
<!DOCTYPE html>
<head>
<title>Google</title>
<link href="stylesheet.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="nav">
<ul>
<li id="sign-in">Sign in</li>
<li id="grid-list">
<center><img src="grid-list.jpg"/></center>
</li>
<li id="images">Images</li>
<li id="gmail">Gmail</li>
</ul>
</div>
<div class="main">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google"/>
<p id="searchbar"></p>
</div>
</body>
For the searchbar you should be using an input rather than a p(paragraph). Another tip is that instead of defining margin-top, margin-right, margin-bottom, margin-left, you can use the shorthand margin. The first value is the top margin, next is right margin, then bottom, then left.
If you want the top/bottom and right/left margins to be the same, respectively, you can define 2 values(first being top and bottom and second being right and left). If you want to define a different top and bottom margin but use the same margin for left/right you can define 3 values(first being top, second being right/left and third being bottom).
For example:
margin-top:20px;
margin-right:50px;
margin-bottom:20px;
margin-left:50px;
can be written as
margin:20px 50px;
Or the following:
margin-top:50px;
margin-right:100px;
margin-bottom:20px;
margin-left:100px;
can be written as:
margin:50px 100px 20px;
Same thing goes for padding.
you can't use pixels to set margin!
you have to set margin of the main class to 50% of page height and width like this:
(to resolve problems change percent of size and margin to fit 100%)
* {
box-sizing: border-box;
}
div.nav li {
display: inline-block;
font-family: Helvetica;
font-size: 13px;
width: auto;
float: right;
color: #414042;
}
#gmail {
margin-right: 15px;
margin-top: 7px;
padding: 0;
}
#images {
margin-right: 22px;
margin-top: 7px;
padding: 0;
}
#sign-in {
margin-right: 22px;
padding: 7px 13px;
background-color: #1789E8;
color: white;
border-radius: 2px;
font-weight: bold;
height: auto;
text-align: center;
}
#grid-list {
margin-right: 22px;
margin-top: 7px;
}
.main {
padding-top:50%;
padding-left:50%;
}
#searchbar {
border: 1px solid #E8DAEB;
border-radius: 2px;
padding: 0;
text-align: center;
margin:21px auto 0;
height: 46px;
width: 585px;
}
img{
margin-left:50%;
}
html , body{
height:100%;
width:100%;
}
<!DOCTYPE html>
<head>
<title>Google</title>
<link href="stylesheet.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="nav">
<ul>
<li id="sign-in">Sign in</li>
<li id="grid-list">
<center><img src="grid-list.jpg"/></center>
</li>
<li id="images">Images</li>
<li id="gmail">Gmail</li>
</ul>
</div>
<div class="main">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google"/>
<p id="searchbar"></p>
</div>
</body>
I am by no means a web developer, I am more on the infrastructure side of things. Anyway, I built a FreeBSD server with an AMP stack on an XServe G4 and wanted to spruce up the generic landing page that only printed "It Works!" on a plain white screen to something a bit more interesting when I ran into a an issue with CSS.
Here's the page - it works exactly the way it's supposed to on Chrome, Opera, Safari on both Mac and Win10 (I didn't check Safari on Win10)
On Microsoft Edge, I get this:
What do I need to do in my CSS so that I can correctly position that element?
The code for the page is below
<html>
<head>
<style>
body {
background-image: url("splash.png");
background-repeat: no-repeat;
background-position: center;
background-color: #BEBEBE;
font-family: "Arial", "Verdana", "serif";
justify-content: center;
}
#container { display: block; position: relative;
width: 60%;
top: 60%;
font-weight: bold;
margin: auto;
}
#pretext { display: inline-block; color: #b80000; font-size: 3em;
}
#posttext { display: inline-block;
color: #FFFFFF; font-size: 3.5em;
font-weight: 1500; }
#logo {
height: 50px;
position: absolute;
bottom: 1%;
right: 1%;
padding-bottom: 5px;
}
#logo img { height: inherit; vertical-align: top; }
#svr-info { font-size: .75em;
color: #dae6f7;
width: auto;
position: absolute;
bottom: 0px;
right: 10px;
padding-top: 5px;
}
#phpinfo a { font-size: .75em;
text-decoration: none;
}
a:hover { font-size: 1.3em; }
</style>
</head>
<body>
<div id="container">
<div id="pretext">Think</div>
<div id="posttext">Correctly.</div>
</div>
<div id="logo">
<img src="powerpc-logo.png" />
<img src="apple-logo.png" />
</div> <br>
<div id="svr-info">
<?php
echo $_SERVER['SERVER_SOFTWARE'];
echo "---";
echo php_uname('r');
echo " ";
echo php_uname('m');
?>
</div>
<div id="phpinfo">
PHPINFO Page
</div>
</body>
</html>`
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<style>
body {
margin: 0px;
padding: 0px;
}
.container {
height: 100vh;
}
.text1 {
display: inline-block;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container" >
<div style="display: table; margin: 0 auto; text-align: center; position: relative; top: 30%;">
<img src="logo.png" style="width: 100px; height: 100px;"/>
<br/>
<h1 class="text1">Think Correctly</h1>
</div>
<div style="position: absolute; bottom: 10px; right: 10px;">
<img src="logo2.png"/><span>Logo 2</span>
</div>
</div>
</body>
</html>
try to make it using this code
you can read this about using tables vs using divs with display table
divs vs tables
I'm creating a website which enables reservation of hour-long blocks. I'm trying to get the style right.
This is what it should look like:
And here is the code I've written so far:
<html>
<head>
<title></title>
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400" rel="stylesheet" type="text/css" />
<style type="text/css">
body
{
font-family: 'Source Sans Pro';
font-weight: 300;
margin-left: 25px;
margin-right: 25px;
margin-top: 10px;
margin-bottom: 10px;
}
#header
{
height: 50px;
width: 100%;
}
.block
{
background-color: #e5e5e5;
display: inline-block;
width: 275px;
height: 35px;
}
.block-sideline
{
background-color: #999999;
display: inline-block;
margin-right: 5px;
width: 5px;
height: 35px;
}
.block-span
{
margin-left: 5px;
margin-right: 5px;
}
.block-hours
{
color: #000000;
}
.block-status
{
}
.block-notavailable .block-sideline
{
}
</style>
</head>
<body>
<div id="header">
<img id="header-logo" src="header-logo.svg" height="50px" width="125px" />
</div>
<div id="content">
<h2>Sunday, December 1, 2013</h2>
<div class="block">
<div class="block-sideline">
</div>
<span class="block-hours">6:00 AM – 7:00 AM</span>
<span class="block-status">Not available</span>
</div>
</div>
</body>
Right now, this is what it looks like in IE:
So, now, when I float the hours and the sideline left with float: left; and the status right with float: right;, it looks like this:
Right now the margins and colors are not important, but how can I center the text inside the div and allow it to float at the same time? Also, in the screenshot above, the margins are not showing on the right side. Why is this?
Here is the CSS
.block-sideline
{
background-color: #999999;
display: inline-block;
margin-right: 5px;
width: 5px;
height: 35px;
float:left;
}
.block-hours
{
float:left;
line-height:225%;
color: #000000;
}
.block-status
{
float:right;
line-height:225%;
}
Basically add floats and line-height.
I've got a Silverlight applet whose UI consists of nothing more than a single button, which I'm trying to located in an appropriate position on my web page. My current result looks like this:
The blue element circled in red is where I want the button to be, and as the Firebug highlight shows, it's where the <div> tag containing the Silverlight <object> tag is positioned. However, the object itself (the "Click Me" button circled in green) is about 200 or so pixels lower.
My CSS is kinda complex (not unexpectedly, what I'm trying to do is a lot more complex than what I can show here), but for the record, it's here, reasonably simplified:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Engagement Test Page</title>
<style type="text/css">
div.alantaHost
{
display: block;
position: relative;
}
div.alantaEngageHost
{
}
div.alantaEngageAppHost
{
position: relative;
}
div.alantaEngageHost_Button
{
height: 26px;
width: 140px;
}
button.alantaEngageButton
{
position: relative;
cursor: pointer;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: large;
}
div.alantaEngageAppHost_Button
{
height: 26px;
width: 140px;
}
/* Override */
div.alantaHost_PictureButton
{
width: 220px;
border: 1px solid #a7a7a7;
color: rgb(0, 0, 0);
background-color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
box-shadow: 8px 8px 11px #888;
border-radius: 8px;
}
/* Override */
div.alantaEngageHost_PictureButton
{
}
div.alantaHeader
{
width: 220px;
height: 18px;
text-align: center;
font-weight: bold;
font-size: 16px;
margin-top: 4px;
}
div.alantaTitle
{
margin-left: 10px;
float: left;
}
div.alantaContact
{
width: 200px;
height: 200px;
margin: 0px 0px 0px 4px;
padding: 5px;
background-color: rgb(255, 255, 255);
text-align: left;
font-weight: bold;
}
img.alantaContactImage
{
height: 200px;
width: 200px;
}
div.alantaStartChat
{
width: 210px;
height: 30px;
margin: 0px 4px;
}
button.alantaStartChatButton
{
position: relative;
cursor: pointer;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: large;
}
div.alantaHost_Ad
{
width: 300px;
height: 250px;
}
div.alantaContact_Ad
{
width: 200px;
height: 200px;
float: left;
}
div.alantaStartChat_Ad
{
width: 75px;
height: 60px;
float: right;
}
div.alantaAdMessage
{
width: 80px;
float: right;
text-align: left;
margin-top: 10px;
}
div.alantaEngageAppHost_Ad
{
height: 60px;
width: 70px;
}
</style>
</head>
<body>
<div id="host">
<div class="alantaHost alantaHost_PictureButton alantaHost_Ad">
<div style="display: block;" class="alantaEngageHost alantaEngageHost_PictureButton">
<div class="alantaHeader">
<div class="alantaTitle">
Ken Smith</div>
</div>
<div class="alantaContact alantaContact_Ad">
<img class="alantaContactImage" src="http://graph.facebook.com/739004749/picture?type=large"
alt="Photo"></div>
<div class="alantaStartChat alantaStartChat_Ad" align="center">
<button style="display: none;" class="alantaEngageButton">
Talk to Ken</button></div>
<div class="alantaAdMessage">
I'm looking forward to talking with you!</div>
</div>
<div style="top: 2px; left: 224px;" class="alantaEngageAppHost alantaEngageAppHost_Button alantaEngageAppHost_Ad">
<object type="application/x-silverlight" data="data:application/x-silverlight," id="objMyApp"
height="100%" width="100%">
<param name="source" value="http://app.dev.alanta.com/ClientBin/SilverlightButton.xap">
</object>
</div>
</div>
</div>
</body>
</html>
Any suggestions about why the Silverlight object isn't following its containing tag? (I should note that it behaves the same way in IE and in Chrome, so it's not a browser bug.)
I think that the offsets in your xaml are pushing the button to that location. If your root element is a canvas I would change that to a stackpanel and see if that fixes it.
I still don't understand all the details about what was tripping it up, but it may have had something to do with the fact that I wasn't setting the height of the alantaEngageHost. I changed the alantaEngageHost_Ad style to this:
div.alantaEngageHost_PictureButton
{
height: 250px;
}
And after that, the <button> and its containing <div> tag were in the same place; and I could then place them appropriately like so:
<div style="top: -226px; left: 224px;" class="alantaEngageAppHost alantaEngageAppHost_Button alantaEngageAppHost_Ad">
<button style="position:relative">HTML Button</button>
</div>
I'm guessing that there must be some weird CSS interaction that shows up when you're trying to position elements inside a <div> tag that isn't quite big enough to contain them. Just a guess, as CSS remains a dark and sorcerous art to me.