Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I create footer element and i want to customize it! everuthing is ok but when i'm trying to insert like copyright notice or site statistic counter it's goes unresponsive! i don't understand what happening! if anyone will remake it pleas instead of counters and copyright notice insert image 88x33!
thanks!
this is code
#footer {
margin-top: 10px;
background:#fff;
padding:20px;
-moz-box-shadow:0 1px 2px rgba(0,0,0,.5);
-webkit-box-shadow:0 1px 2px rgba(0,0,0,.5);
box-shadow:0 1px 2px rgba(0,0,0,.5);
border-bottom: 4px solid #005ce6;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
border-top-left-radius:10px;
border-top-right-radius:10px;
}
.foot-l {
float:left;
width:70%;
padding:14px 0 0;
}
.foot-r {
float:right;
width:30%;
text-align:right;
}
.clr{
text-align: left;
}
#footer a {
color:#009bc0;
}
footer {
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
<footer>
<div class="wrapper">
<div id="footer">
<div class="foot-r">
<ul style="float:right;">
<li style="list-style-type: none; float: left; display: inline-block; margin-right: 15px;">
<!-- TOP.GE COUNTER CODE -->
<div style="position: relative; width: 88px;">
<div style="background:url('/pngs/hat_2.png');position:absolute;width:38px;height:52px;overflow:hidden;margin-left:-13px;margin-top:-6px"></div>
<script language="JavaScript" type="text/javascript" src="//counter.top.ge/cgi-bin/cod?100+103590"></script>
<noscript>
<a target="_top" href="http://counter.top.ge/cgi-bin/showtop?103590">
<img src="//counter.top.ge/cgi-bin/count?ID:103590+JS:false" border="0" alt="TOP.GE" /></a>
</noscript>
</div>
<!-- / END OF TOP.GE COUNTER CODE -->
</li>
<li style="list-style-type: none; float: left; display: inline-block;">
<div style="position: relative; width: 88px;">
<div style="background:url('/pngs/hat_3.png');position:absolute;width:38px;height:52px;overflow:hidden;margin-left:-13px;margin-top:-6px"></div>
$COUNTER$
</div>
</div>
</li>
</ul>
</div>
<div class="foot-l">
<!-- <copy> -->Tech Info <img src="/icons/ic_copyright_black_48dp_1x.png" alt"copyright" width="15" height="15"/> $YEAR$<!-- </copy> -->$POWERED_BY$
</div>
<div class="clr"></div>
</div>
</div>
</footer>
This is result
1
It seems that you have an extra closing tag for DIV, right after the UL tag. (Line 26, in your HTML code snippet) Remove it, and I think it will be fine.
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
I am creating tag links in my application, and I am struggling to get the individual tags to align nicely with each other (i.e. without overlapping etc.)
Here is my markup
a.user-interest {
border-radius: 5px;
background: #f2f2f2;
color: #696969;
border: 3px solid #A9A9A9;
padding: 3px;
white-space: nowrap;
text-decoration: none;
}
<html>
<head>
<title>Example</title>
</head>
<body>
<div>
<h4>Interests</h4>
<p class="interest">
<a class="user-interest" href="#">Science Fiction</a>
<a class="user-interest" href="#">Community Service</a>
<a class="user-interest" href="#">Craftsmanship</a>
<a class="user-interest" href="#">Exercising and Healthcare</a>
</p>
</div>
</body>
</html>
How do I get the tags to align nicely?
Add display: inline-block to your CSS, I also recommend using margin to fully see the separation (It's up to you).
a.user-interest {
border-radius: 5px;
background: #f2f2f2;
color: #696969;
border: 3px solid #A9A9A9;
padding: 3px;
white-space: nowrap;
text-decoration: none;
display: inline-block;
margin: 2px;
}
<html>
<head>
<title>Example</title>
</head>
<body>
<div>
<h4>Interests</h4>
<p class="interest">
<a class="user-interest" href="#">Science Fiction</a>
<a class="user-interest" href="#">Community Service</a>
<a class="user-interest" href="#">Craftsmanship</a>
<a class="user-interest" href="#">Exercising and Healthcare</a>
</p>
</div>
</body>
</html>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
I have created a simple HTML button, the button works fine. There is some blank/white space around it. How can I get rid of it? My question might sound silly, but for a beginner like me, I have no idea how to get rid of it.
Thank you.
You can see the white spaces, which I was talking about, in the following screenshot.
Following is the code I have for buttons.
<p>
<a class="button" href="https://facebook.com/">
<button style="background-color:#3b5998; border:none; color:white; border-radius: 3px;">Facebook</button> </a>
<a class="button" href="https://wa.me/1234567898">
<button style="background-color:green; border:none; color:white; border-radius: 3px;">WhatsApp</button>
</a>
</p>
<p>
<a href="tel:01234567890">
<input type="image" align="right" src="https://toppng.com/uploads/preview/hone-icon-866-986-8942-book-online-phone-icon-png-blue-115633551488jsnijarwa.png" name="submit" width="70" height="70" alt="Call Us" value="">
</a>
</p>
I tested your code in opera, it's working as expected here.
https://i.imgur.com/HAl4Xka.png
EDIT: I've fixed the code following the suggestions made in your first post.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.fb-button, .wa-button {
border:none;
color:white;
border-radius: 3px;
padding: 10px;
text-decoration: none;
}
.fb-button {
background-color:#3b5998;
}
.wa-button {
background-color:green;
}
.container {
padding: 10px;
margin: 0 auto;
max-width: 50%;
text-align: center;
}
form {
margin-top: 30px;
}
</style>
</head>
<body>
<div class="container">
<a class="fb-button" href="https://facebook.com/">Facebook</a>
<a class="wa-button" href="https://wa.me/1234567898">WhatsApp</a>
<form action="tel:01234567890" method="GET">
<input type="image" src="https://toppng.com/uploads/preview/hone-icon-866-986-8942-book-online-phone-icon-png-blue-115633551488jsnijarwa.png" width="70" height="70" alt="Call Us">
</form>
</div>
</body>
</html>
<a> should not contain any other Action Elements (like <button>).
Stop using the inline style attributes. Use a proper CSS file or a <style> tag.
Don't use , use styles instead - if you want to add spacings like margins
Use flex to ease the positioning of your elements
.buttons-group {
display: flex;
align-items: center;
}
.button {
color: white;
border-radius: 3px;
padding: 0.5rem 1rem;
text-decoration: none;
}
.color-fb {
background-color: #3b5998;
}
.color-wa {
background-color: #00aa45;
}
.img-icon {
display: inline-block;
height: 3rem;
}
/* Utility classes */
.u-left-auto {
margin-left: auto;
}
<div class="buttons-group">
<a class="button color-fb" href="https://facebook.com/">Facebook</a>
<a class="button color-wa" href="https://wa.me/1234567898">WhatsApp</a>
<a class="button u-left-auto" href="tel:01234567890">
<img class="img-icon" src="https://toppng.com/uploads/preview/hone-icon-866-986-8942-book-online-phone-icon-png-blue-115633551488jsnijarwa.png" alt="Call Us">
</a>
</div>
i'm trying to make a bit of a copy of this website but i'm having issues with the gallery part, my images simply won't behave the same as the website im attempt to copy. Obviously change around once complete.
Here is a JSFiddle of my code if that helps.
Here is my CSS for the section:
/* Gallery Start */
.box.style2 header {
display:inline-block;
background:#FFF;
padding:2em 3em;
margin:0px;
}
.box.style2 .inner {
position:relative;
padding:40px 0 0px 0;
}
.box.style2 {
text-align:center;
}
.box.style2 .inner:after {
content: '';
display:block;
position:absolute;
top:0;
left:50%;
height:100%;
border-left:solid 1px #FFF;
}
.box.style2 .inner .row {
position:relative;
}
.row {
border-bottom:solid 1px transparent;
box-sizing:border-box;
}
.row:after, .row:before {
content: '';
display:block;
clear:both;
height:0;
}
.row > * {
float:left;
}
.box.style2 .inner .image {
position:relative;
z-index:1;
padding:20px;
}
.image.fit {
display:block;
width:100%;
}
.gallery-image {
width:25%;
margin-left:0px;
}
/* Gallery END */
And here is my HTML:
<!-- Start of gallery -->
<article class="container box style2">
<header>
<h2>Recent Work</h2>
<p>Below are images of our recent completed work</p>
</header>
<div class="inner gallery">
<!-- Gallery Images -->
<div class="row">
<!-- Image -->
<div class="gallery-image">
<a href class="image fit" style="outline: 0px;">
<img src="images/01.jpg" />
</a>
</div>
<!-- Image END -->
<!-- Image -->
<div class="gallery-image">
<a href class="image fit" style="outline: 0px;">
<img src="images/01.jpg" />
</a>
</div>
<!-- Image END -->
<!-- Image -->
<div class="gallery-image">
<a href class="image fit" style="outline: 0px;">
<img src="images/01.jpg" />
</a>
</div>
<!-- Image END -->
<!-- Image -->
<div class="gallery-image">
<a href class="image fit" style="outline: 0px;">
<img src="images/01.jpg" />
</a>
</div>
<!-- Image END -->
</div>
</div>
<!-- Gallery Images END -->
</article>
<!-- End of gallery -->
Here is a screenshot of what my images look like, as you can see, they are not behaving at all.
I think this is because I don't have these styles, but I can't for the life of me figure out what they mean, all that I can understand from Google is that they are classes made from numbers:
.row.\30 \25 > * {
padding: 0px 0 0 0px;
}
/* Inherited from: #media screen and (max-width: 1680px}*/
.row > * {
padding: 40px 0 0 40px;
}
.\33 u, .\33 u\24 {
width: 25%;
clear: none;
margin-left: 0;
}
edit: so after readying wero's answer, am I understanding this properly?
.row.\30 \25 > * would basically target a class with the name 0 within the row class, and then the element within 30 with class 25 and then style the next element within that?
The \nn<space> syntax is a character escape sequence for the Unicode character U+00nn.
This article describes the topic very nicely.
Using the escape sequences they build valid CSS class identifiers.
Why do they do this? Can only speculate: For brevity, to generate unique names?
EDIT to answer the extended question:
.row.\30 \25 > * is a selector for all elements (*) whose parent element (>) has the CSS class row and the CSS class consisting of the two characters U+0030 and U+0025.
Good evening, guys,
Could you please give me an advice,
I think I was at a deadlock!
There is the main navigation menu on the top of website.
Problem is that, I don't know how we can input shadow over the our navigation, directly in the bottom of navigation and it won't stop work of our left and right borders.
So, if I will put our shadow in another block (in my case "circle_shadow"), it won't cover up our borders, it will create new space after navigation.
I am interested, how can we put this kind of shadow on our menu, over the navigation borders?
Please, take a look:
<div class="container">
<div class="row">
<div class="common_block">
<div class="col-lg-2">Here we have a logo_1</div>
<div class="col-lg-8 border">Here is navigation</div>
<div class="col-lg-2">Here is logo_2</div>
<div class="circle_shadow"></div>
</div>
</div>
</div>
CSS:
.border {
border-right: 1px solid black;
border-left: 1px solid black;
}
.circle_shadow {
position: relative;
overflow: hidden;
padding:5px;
}
.box_center_shadow_m:before {
content: "";
height: 100px;
position: absolute;
right: 10px;
top: -99px;
left: 10px;
border-radius: 50%/60px;
box-shadow: 0 0 30px rgba(0,0,0,0.5);
}
Here I attached some images:
It is a little hard to follow what you are asking, there might be an english barrier here. But if you are looking for a rounded drop shadow, here are some samples:
.roundedCorner {
width:350px;
height:200px;
border: solid 1px #555;
background-color: #eed;
box-shadow: 10px -10px 5px rgba(0,0,0,0.6);
-moz-box-shadow: 10px -10px 5px rgba(0,0,0,0.6);
-webkit-box-shadow: 10px -10px 5px rgba(0,0,0,0.6);
-o-box-shadow: 10px -10px 5px rgba(0,0,0,0.6);
border-radius:25px;
}
.circle {
width:150px;height:150px;
border: solid 1px #555;
background-color: #eed;
box-shadow: 10px -10px rgba(0,0,0,0.6);
-moz-box-shadow: 10px -10px rgba(0,0,0,0.6);
-webkit-box-shadow: 10px -10px rgba(0,0,0,0.6);
-o-box-shadow: 10px -10px rgba(0,0,0,0.6);
border-radius:100px;
}
More shadow options can be seen at a CoreLangs
Sorry for not clear question.
Yes, I know how to use rounded drop shadow.
Problem is not about how create rounded drop shadow.
Problem is how can we put this rounded drop shadow into the bottom of navigation block. This is the major question.
Take a look on this code:
I)
<div class="container">
<div class="row " style="background-color:#454545">
<div class="common_block">
<div class="col-md-2" style="background-color:#454545">
<a href="#" title="Omvana">
<img src="images/images.jpg" alt="Logo" />
</a>
</div>
<div class="col-md-8 border " style="background-color:#454545">
<ul class="h_menu">
<li class="active">
<a href="#" title="NEWS" >NEWS</a>
</li>
<li >
EVENTS
</li>
<li >
DOWNLOADS
</li>
<li >
TOUR
</li>
</ul>
</div>
<div class="col-md-2" style="background-color:#454545">
<div class="block_logo_2">
</div>
</div>
<div class="rounded_drop_shadow">
</div>
</div>
</div>
</div>
CSS:
.rounded_drop_shadow {
position: relative;
background: none repeat scroll 0% 0% transparent;
overflow:hidden;
padding:3px;
}
.rounded_drop_shadow:before {
content: "";
height: 100px;
position: absolute;
right: 10px;
top: -100px;
left: 10px;
border-radius: 50%/60px;
box-shadow: 0 0 60px rgba(0,0,0,0.3);
}
Now, this image shows, that shadow was added to the navigation block, but in extra space after.
http://i.imgur.com/rFuBnOB.png
But, my target is not extend block of navigation, just we have to put it above of navigation menu on the bottom. As if on top of it!
It should be like here:
http://i.imgur.com/ed3zWJL.png
Now, I found a solution, but I wonder if you take a look and will be able to give advice about this option:
Maybe, we should put block div with class="rounded_drop_shadow" inside another block div with class="shadow" (Both of them will still inside common_block) and play with position:absolute?
<div class="common_block">
<div class="col-md-2" style="background-color:#454545">
<a href="#" title="Omvana">
<img src="images/images.jpg" alt="Logo" />
</a>
</div>
<div class="col-md-8 border " style="background-color:#454545">
<ul class="h_menu">
<li class="active">
<a href="#" title="NEWS" >NEWS</a>
</li>
<li >
EVENTS
</li>
<li >
DOWNLOADS
</li>
<li >
TOUR
</li>
</ul>
</div>
<div class="col-md-2" style="background-color:#454545">
<div class="block_logo_2">
</div>
</div>
<div class="shadow">
<div class="rounded_drop_shadow"></div></div>
</div>
</div>
CSS
.box_center_shadow {
position: absolute;
top: 64px;
left: 0px;
right: 0px;
}
I wonder if somebody can tell me, if it is right way....or offer another options.
Thanks.
I want to create a photo gallery for one of my projets but I can't achieve it. What I want is something like that :
I don't know how many photo there will be but basically what it does is:
- Insert first photo in photo_div #1
- Insert 2nd in #2
- Goes to new line
- Insert 3rd in #3
- Insert 4th in #4
- Go to next column and first line
- Insert 5th in #5
- etc.
What I've made so far is the following code :
<div id="scroll_container">
<div id="photo_0" class="div_photo">
<!-- More content inside -->
</div>
</div>
And the CSS code :
scroll_container{
height:100%;
width:550px;
overflow-x:scroll;
overflow-y:hidden;
}
.div_photo{
float:left;
width:250px;
height:250px;
border:1px solid black;
margin:0 5px 5px 0;
position:relative;
display:inline-block;
}
But all I can achieve is a two columns gallery with 3 lines.
Could you help me to solve that ?
Thanks
Looks like your images are always of the same size, and that your problem is just the special order that you want.
In that case, this could be a solution:
.test {
width: 40px;
height: 40px;
border: solid 1px blue;
float: left;
margin: 2px;
}
.test:nth-child(4n+3)
{
border-color: red;
position: relative;
top: 44px;
left: -92px;
margin-right: -44px;
}
.test:nth-child(4n+4)
{
border-color: red;
position: relative;
top: 44px;
left: -46px;
margin-right: -44px;
}
fiddle
The idea is to float the first 2 elements, the 5 and 6, and so on. the 3rd and 4th (and 7th and 8th) are positioned relative to take them to the special positions
CSS
.div_photo{
float:left;
width:250px;
height:250px;
border:1px solid black;
margin:0 5px 5px 0;
position:relative;
display:inline-block;
}
.div_photo_1{
float:left;
width:250px;
height:250px;
border:1px solid black;
margin:0 5px 5px 0;
position:relative;
display:inline-block;
}
#scroll_container_1 {
height:auto;
width:257px;
display:inline-block;
}
#scroll_container {
height:auto;
width:514px;
}
#scroll_container_parent {
height:auto;
width:771px;
overflow-x:scroll;
overflow-y:hidden;
}
HTML
<div id="scroll_container_parent">
<div id="scroll_container">
<div id="photo_1" class="div_photo">1</div>
<div id="photo_2" class="div_photo">2</div>
<div id="photo_3" class="div_photo">3</div>
<div id="photo_4" class="div_photo">4</div>
<div id="photo_6" class="div_photo">6</div>
<div id="photo_7" class="div_photo">7</div>
<div id="photo_9" class="div_photo">9</div>
<div id="photo_10" class="div_photo">10</div>
</div>
<div id="scroll_container_1">
<div id="photo_5" class="div_photo_1">5</div>
<div id="photo_8" class="div_photo_1">8</div>
<div id="photo_11" class="div_photo_1">11</div>
</div>
</div>
Modified HTML...may be this should be good
This way you can write your html:
<div id="scroll_container">
<div id="photo_1" class="div_photo">
<!-- More content inside -->1
</div>
<div id="photo_2" class="div_photo">
<!-- More content inside -->2
</div> <div id="photo_3" class="div_photo">
<!-- More content inside -->3
</div> <div id="photo_4" class="div_photo">
<!-- More content inside -->4
</div> <div id="photo_5" class="div_photo">
<!-- More content inside -->5
</div>
</div>
For the 5th one you can apply additional css with id as :
#photo_5 {
display:inline-block;
margin-left:520px;
margin-top:-510px;
}
As you don't want to use table then you can achieve this with css.
Working Fiddle : jsFiddle Working Demo