I'm looking for CSS code on creating a solid colored table with an image and text wrap. This is to be used in Squarespace. Anyone know how I can get that?
<html>
<head>
<style type="text/css">
.mycss {
background-color: #997E6E;
border: 21px solid #997E6E;
color: #FFFFFF;
font-family: arial, helvetica, sans-serif;
font-size: 15px;
font-weight:normal;
letter-spacing: 1pt;
line-height:1;
word-spacing: 2pt;
text-align: left;
}
</style>
</head>
<body>
<p class="mycss">
As my teacher says, our bodies are the best technology we have! Through it, we can transform ourselves from being blocked and out of balance into being energetic, clear-minded and open-hearted.
</p>
</body>
</html>
If you're doing this outside of the developer platform...
I would put the class inside a div instead of p
<div class="mycss">
<p> As my teacher says, our bodies are the best technology we have! Through it, we can transform ourselves from being blocked and out of balance into being energetic, clear-minded and open-hearted.</p>
</div>
Your css looks fine for the border. If you want to float the image to the right inside this div, add
.mycss img {
float:right;
}
Related
i've just created new component with navbar code within:
<template>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
.....
</template>
and my index.html without any changes.
I've tried to make changes based on my googling results, actually set my own style to nav tag didn't help.
If you are using VUE CLI then in you App.vue there will be a style block like this
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
because of this margin-top: 60px this white space is there. Vue CLI provides this default styling for their default components, you can remove it.
I hope this helps
So use this in App.vue, reasons to set the default for the web base
<style>
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
</style>
How Can I add an Html elements inside a Cytoscape node?
E.g: I want to add to every node - 2 small buttons, so the user can click on each one of the buttons and the value inside this node will change.
Example of the graph I want to create
[IMG]http://i57.tinypic.com/1z1bp1l.jpg[/IMG]
It's not possible to render HTML in a canvas, nor would you probably want to for performance. If you really want it on the node, I suggest creating an overlay -- though that has its own set of complications in its implementation. Otherwise, you're far better off placing interactive elements separately from a node (e.g. tooltip, sidebar, menu, etc...).
mxGraph seems to do it by using an SVG foreignObject tag, and within that HTML like so:
<g style="cursor: move;">
<g>
<foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%">
<div style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 78px; height: 1px; padding-top: 1212px; margin-left: 839px;">
<div style="box-sizing: border-box; font-size: 0; text-align: center; ">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
<div>Some HTML inside SVG</div>
</div>
</div>
</div>
</foreignObject>
</g>
</g>
Not sure I want to go there in Cytoscape as its API is too nice to start working round and you'd need to deal with the update event flow, but mxGraph is a fantastic toolkit worth knowing about in this space.
I'm developing my website, but I'm having a little problem. On my computer I can see the site like I want, but when I see in my notebook, a content is very to right! In my computer is normal. I'll have the site for you to see. It's in Portuguese, because I'm Brazilian. But please give a look at the source code. Or better, I will pass the code for you. The CLASS of the content of the right is: content-inner-jogo-destaque
And this is the code:
CSS:
.content-inner-jogo-destaque
{
position:absolute;
top:15px;
right:15px;
width:200px;
background-color: #ffffff;
padding: 10px 10px;
-webkit-box-shadow: inset 0 0 10px #1f325d;
-o-box-shadow: inset 0 0 10px #1f325d;
-moz-box-shadow: inset 0 0 10px #1f325d;
-ms-box-shadow: inset 0 0 10px #1f325d;
box-shadow: inset 0 0 10px #1f325d;
border-left: 3px solid #eeeeee;
border-right: 3px solid #eeeeee;
border-bottom: 3px solid #eeeeee;
border-top: 3px solid #eeeeee;
}
HTML:
<body>
<div class='content-inner-jogo-destaque'>
<p>Jogo da semana:</p>
<a href="testando"><img src="imagens/semana1.jpg" title="Clique para ir para a
página do jogo da semana" style="width:200px"/></a>
<font size="3"><font face="verdana,geneva">Dragon Ball Z Budo<font size="3">kai Tenkaichi 3</font></font></font>
</div>
</body>
Well, here is the site: www.ganggames.p.ht
Please take a look and tell me if something wrong.
Can I use CSS to change the pixels of the site?
Or a metatag?
Can you help me?
Thanks! :)
I have 3 things for you:
1) I think the main reason why your content is showing up on the right side of you page is because your content is set to "position: absolute" then you are telling it to stay 15px from the right of the page. That means that no matter how big or small your screen is, that DIV will ALWAYS be 15px from the right of the page.
You can keep the code you currently have if you wrap all of your content in a DIV with a set width:
<head>
<style>#wrapper {width: 'whatever-your-content-width-is';}</style>
</head>
<body>
<div id="wrapper">
<!--ALL OF YOUR CONTENT-->
</div>
</body>
You can also now neatly center all of your content if you would like with (optional):
<style>body {text-align: center;}</style>
2) For cross device compatibility, it is the standard for helping with viewing issues is this meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Further research of that tag can be found here:
https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag
3) Double check all of your BODY, HEAD, FOOTER, etc, tags! They aren't executed properly.
Hope this helped!
Here is my tumblr blog:
thestorywithnoending.tumblr.com
I want a frame around the image header, so that the content disapears when I scroll down,
but the header stays in place...
just like this blog:
tiredskin.tumblr.com
but I cant figure out how to do this,
please help,
thanks.
Here's what you need to do.. Replace this in your current code
</style>
<body>
<p><center><img src="http://michaeljamess.webs.com/blogheader.png" border="0"/></center>
</p>
with this
<style type="text/css">
#left {
float: left;
margin-left:338px;
width: 500px;
height: 100px;
font-size: 11px;
text-align:left;
position:fixed;
background-color:none;
padding:0px;
z-index:999;
top:0px;
}
#content{
margin-top:300px!important;
}
</style>
<div id="left">
<center>
<a href="http://thestorywithnoending.tumblr.com">
<img src="http://michaeljamess.webs.com/blogheader.png" border="0"/>
</a>
</center>
</div>
p.s if it solved your problem, mark it as the best answer :)
Using the code below, both Chrome and Opera (latest versions supporting border-radius) on Mac show a small blue area outside the rounded corners (which seems to a part of the defined background-image). Why?
<!doctype html>
<head>
<title>Testcase for rounded corners on submit button with bg-image</title>
<style type="text/css">
input[type="submit"] { background: url(http://skriblerier.net/div/rounded-corners-input/bg-bottom.png); color: #fff; height: 40px; width: 150px; border-radius: 10px; border: 1px solid #fff; font-size: 14px }
</style>
</head>
<body>
<form>
<div><input type="submit" /></div>
</form>
</body>
I worked around this with background-clip: http://www.css3.info/preview/background-origin-and-background-clip/
background-clip: padding-box;
-moz-background-clip: padding;
-webkit-background-clip: padding;
FF3.6 does it as well, but not as noticeably (with -moz-border-radius, of course). Looks like they're trying to automatically smooth out the corners, and just can't hide all of the background when there's also a border applied. Removing the border declaration (not the border radius) will fix it. So:
border-radius: 10px; border: 1px solid #fff; making it: border-radius: 10px;
I suspect, but don't know, that this has to do with the difficulties of faking half-pixels and nesting round shapes in more of a bitmap than vector 'space'.