this is my worksite - mysite i have created a page and called it to the home page using the following code
<div class="hilight-hometext">
<?php if(is_front_page()) :
$home_page_post_id = 308;
$home_page_post = get_post( $home_page_post_id, ARRAY_A );
$content_home = $home_page_post['post_content'];
$content_title = $home_page_post['post_title'];
?><?php
echo $content_home;
endif; ?></div>
and the result is
<div class="hilight-hometext">
<div id="hilightbox">
<div class="hilightbox-text">
<h2>At Salisbury we want everyone to understand their landscaping choices</h2>
Our latest landscaping innovation is our Outdoor Vision questionnaire. We’ll guide you through a set of questions that will help you realize what you want out of your yard.
</div>
<!-- end tier 2 text -->
<div class="hilightbox-action">
<a class="myButton" href="resources/the-outdoor-vision-tool/">GET STARTED</a>
Your Outdoor Vision
</div>
</div></div>
i have added the styling as follows
#hilightbox {
background: url(../img/action-bg.jpg);
width: 100%;
margin: 20px auto;
}
#hilightbox .hilightbox-text {
width: 75%;
float: left;
margin: 0;
}
#hilightbox .hilightbox-action {
width: 25%;
float: left;
padding: 15px 0;
}
.myButton {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #c9df23), color-stop(1, #747728));
background: -moz-linear-gradient(center top, #c9df23 5%, #747728 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9df23', endColorstr='#747728');
background-color: #c9df23;
display: inline-block;
color: #ffffff;
font-family: Arial;
font-size: 20px;
font-weight: bold;
padding: 14px 14px;
text-decoration: none;
text-shadow: 1px 1px 0px #747728;
}
but the background image and the styles are not showing up.Please help!! Thanks
I think if you just add this:
#hilightbox {
background: url(../img/action-bg.jpg);
width: 100%;
margin: 20px auto;
overflow: hidden;
}
it will solve you problem.
currently your container div #hilightbox does not know about child div's (.hilightbox-text and hilightbox-action) height & width because of float:left property.
Related
Im trying to make the anchor tag as button and trying to add some css on it but it is not clickable
Here is my html code.
I'm following a youtube tutorial, I followed the video 100% but mine is not working, Im sorry im just new in web developing thankyou for the help.
<body>
<!-- Welcome Page -->
<section id="ulambg">
<div class="ulambg container">
<div>
<h1>Eatwell</h1>
Ready to Eat
Ready to Cook
</div>
</div>
</section>
<!-- End Welcom Page -->
And this is the css I used in the program, is it because of the Java? I read some forum that says some java function wont work if you disabled your java on your machine.
#import url('https://fonts.googleapis.com/css2?family=Raleway:wght#600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 15px;
font-family: 'Raleway', sans-serif ;
}
a {
text-decoration: none;
}
.container {
min-height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/*Welcome Page Section Ulambg*/
#ulambg {
background-image: url(./img/bg.jpg);
background-size: cover;
background-position: top center;
position: relative;
}
#ulambg::after {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: black;
opacity: .5;
}
#ulambg h1 {
color: white;
width: fit-content;
font-size: 4rem;
position: relative;
}
#ulambg .btnulam {
display: inline-block;
padding: 10px 30px;
color: blue;
background-color: transparent;
border: 2px solid blue;
font-size: 2rem;
text-transform: uppercase;
letter-spacing: .1rem;
margin-top: 30px;
transition: .3s ease;
transition-property: background-color;
}
#ulambg .btnulam:hover {
color: white;
background-color: blue;
}
/*Welcome Page Sectio Ulambg*/
add z-index: -1 in #ulambg::after, it's background, should not cover the page.
Demo
if i understand u correct, u mean <a href="#".. <- Anchor tag isnt clickable?
If yes u need to give it a name like <a href="#goHere".. and this means the link points to an id somewhere on the page ( for example to: <img id="goHere" src="/img/pic.gif"...
I'm new to the stuff myself but hopefully i could help in any way :)
I'm pretty new to programming/web development (this is my first website essentially) and for some reason, my footer on the index.php page does not have any padding on the top (every other page the footer is perfectly fine).
Index.php
<?php
include('includes/header.php');
?>
<div class="main-body">
<div id="box-1">
<h2>WELCOME TO</h2>
</div>
<div id="box-2">
<h2>TOTALLY<br> EDUCATIONAL</h2>
</div>
</div>
<?php
include('includes/footer.php')
?>
footer.php
<footer>
<h5>© 2019 Totally Educational. All Rights Reserved.</h5>
</footer>
</body>
</html>
style.css(index)
/*INDEX PAGE*/
/*side-by-side box structure*/
.main-body {
box-sizing: border-box;
display: inline;
padding: 0;
margin: 0;
border: 0;
font-size: 10px;
text-align: center;
}
#box-1 {
width: 49.5%;
background-color: rgba(126,121,121,1.00);
float: left;
height: 600px;
border-right: solid;
border-right-width: 2px;
}
#box-2 {
width: 50%;
background-color: white;
float: left;
height: 600px;
}
/*side-by-side box styling*/
#box-1 h2 {
padding: 300px 0;
letter-spacing: 5px;
color: white;
}
#box-2 h2 {
padding: 300px 10%;
letter-spacing: 5px;
}
style.css(footer)
#footer, #footer h5 {
background-color: black;
color: white;
padding: 20px 0;
margin: 0;
text-align: center;
width: 100%;
}
Above is all the PHP and CSS relevant to the problem. Basically, when I run it the index page footer h4 has no padding at the top and there's a white strip underneath it. For every other page, this problem didn't occur, only in the index.php. I wrote all this in the span of 3 or so days and I'm just starting to learn everything so it's probably some stupid newby thing I've done but any help would be much appreciated. I'll also attach some images of what it looks like.
index.php screenshot
games.php screenshot
-jEK01
Try use inline-block for .main-body, and add clear:both; to #footer:
.main-body {
box-sizing: border-box;
display: inline-block;
padding: 0;
margin: 0;
border: 0;
font-size: 10px;
text-align: center;
}
#footer, #footer h5 {
background-color: black;
clear:both;
color: white;
padding: 20px 0;
margin: 0;
text-align: center;
width: 100%;
}
I'm currently developing a wordpress theme with PHP, but my problem is with the css. I have tree divs, which i have inside a parent div. The parents div is by default 100%, so i want to specify the parent div (class: "single-general-sec1"). I've tried to calculate how wide the parent div should be in order for me to center it, but my calculations do not work. Please help.
Parent div should, by my calculation, be: 61% + 425px, but that dosen't work.
.single-general-sec1 {
margin-top: 150px;
margin-bottom: 150px;
height: auto;
width: calc(61% + 425px);
background-color: red;
}
.single-btype-div {
width: 250px;
display: inline-block;
float: left;
}
.single-gen-header {
font-size: 14px;
color: #D9D9D9;
font-family: "Roboto";
font-weight: 700;
text-transform: uppercase;
letter-spacing: 3px;
margin: 0;
width: auto;
}
.single-gen-desc {
color: #000;
font-family: "Roboto";
font-size: 28px;
font-weight: 300;
letter-spacing: 3px;
margin: 0;
width: auto;
margin-top: 5px;
}
.single-description-div {
width: 55%;
display: inline-block;
margin-left: 3%;
float: left;
}
.single-description-desc {
color: #000;
font-family: "Roboto";
font-size: 20px;
font-weight: 300;
letter-spacing: 1px;
margin: 0;
width: auto;
margin-top: 5px;
}
.single-live-button {
margin-top: 5px;
width: 175px;
height: 40px;
background-color: #8AA6B6;
border-radius: 8px;
border: none;
color: #fff;
font-size: 15px;
font-family: "Roboto";
font-weight: 300;
letter-spacing: 2px;
text-transform: uppercase;
}
.single-live-div {
width: 100px;
display: inline-block;
margin-left: 3%;
}
<div class="single-general-sec1">
<div class="single-btype-div">
<p class="single-gen-header"> - Typ av projekt </p>
<p class="single-gen-desc">
<?php the_field('project-type'); ?> </p>
</div>
<div class="single-description-div">
<p class="single-gen-header"> - Beskrivning </p>
<p class="single-description-desc">
<?php the_field('description'); ?> </p>
</div>
<div class="single-live-div">
<p class="single-gen-header"> - Se live </p>
<a href="<?php the_field('page-url') ?>"><button class="single-live-button">
Besök sida > </button></a>
</div>
</div>
You cannot center a div using % values for width. Also the calculation is wrong: 250px + 175px + 100px = 525px so, the parent div should be 525px in order to fit nested divs. But you should normalize HTML first. Or just use bootstrap.css.
Another thing. For center a div you can use display:inline-block then on his parent use text-align:center.
Or when you have a fixed width, margin:50px auto;
I am trying to show a lot of results at once (like 25) but my program cut the results around the 5th record having area space still available, the results are in a table
created dynamically but seems that the area doesn't expand accordingly.
<div id="contenido" class="contenido">
<div id="Tabs">
<ul style="cursor:pointer;">
<li id="li_tab1" onclick="tab('tab1')" >
<a>Últimas alertas</a> </li>
<li id="li_tab2" onclick="tab('tab2')"> <a>otras</a> </li>
</ul>
<div id="Content_Area">
<div id="tab1">
<p class="notas">Showing last alerts</p>
<table>
<tr>
<td style="color:blue">Alert</td>
<td style="color:blue">User</td>
</tr>
<?php
while ( $row = $result->fetch_array() ){
echo "<tr><td>".$row['DESCRIPTION']."</td>";
echo "<td>".$row['EMAIL']."</td>";
echo "<td>".$row['SUB_SECCION']."</td></tr>";
}
}
else
echo "error on query: ".$conx->error;
}//else
?>
</table>
</div>
<div id="tab2" style="display: none;">
<!-- We set its display as none because we don’t want to make this
tab visible by default. The only visible/active tab should
be Tab 1 until the visitor clicks on Tab 2. -->
<p>This is the text for tab 2.</p>
</div>
</div> <!-- End of Content_Area Div -->
</div> <!-- End of Tabs Div -->
</div>
CSS creates tabs, but for the moment only the first has the table the other just one line of text, but the table is inside this tab div
archivo css
.contenido {
color: black;/*#333*/
background-color: #F2F2E6;
margin: 0px 0px 5px 0px;
padding: 10px;
border: 1px solid #ccc;
width: 75%;/*678px;*/
height: 480px;
float: right;
display: inline;
}
#Tabs ul {
padding: 0px;
margin: 0px;
margin-left: 10px;
list-style-type: none;
}
#Tabs ul li {
display: inline-block;
clear: none;
float: left;
height: 24px;
}
#Tabs ul li a {
position: relative;
margin-top: 16px;
display: block;
margin-left: 6px;
line-height: 24px;
padding-left: 10px;
background: #f6f6f6;
z-index: 9999;
border: 1px solid #ccc;
border-bottom: 0px;
/* make the top left and top right corners of each tab rounded. */
-moz-border-radius-topleft: 4px;
border-top-left-radius: 4px;
-moz-border-radius-topright: 4px;
border-top-right-radius: 4px;
/* end of rounded borders */
width: 130px;
color: #000000;
text-decoration: none;
font-weight: bold;
}
#Tabs ul li a:hover {
text-decoration: underline;
color:red;
}
#Tabs #Content_Area {
/* this is the css class for the content displayed in each tab */
padding: 0 15px;
clear:both;
overflow:hidden;
line-height:19px;
position: relative;
top: 20px;
z-index: 5;
height: 150px;
overflow: hidden;
}
p { padding-left: 15px; }
The problem is inside your CSS.
height: 150px; and overflow: hidden; in #Tabs #Content_Area could be factor.
Since you have overflow: hidden; set to "hidden", it could be a factor.
Try changing it to overflow:scroll; or overflow:visible; to see if that works, and/or changing the heights to a higher number for those IDs.
Try different variations.
I see a two possible causes:
The database query only returns 5 results
the DIV is not large enough, and even though the table ends up in,
say, 25 records, the first 5 are only displayed and the rest are
hidden by the boundaries of DIV.
It would help if you put some more PHP code or even the CSS of the #area.
I have used Safari to view my layout up until now. Everything appeared perfectly as I wanted it to in Safari, a simple layout with a logo, navigation bar, header image, and then a two column body area. However, in Firefox, both the header image and logo are not even displaying, and the two column float for the body area is not working and instead sinking into one... I am not sure what is going on, or what types of problems I will encounter in other browsers, but maybe someone can find what is wrong:
body {
background-color: some color;
background-attachment:fixed;
margin: 0;
padding: 0;
}
#wrapper {
width: 950px;
background-color: some color;
margin: 0 auto;
text-align: left;
border-right: 1px solid some color;
border-left: 1px solid some color;
}
#logo {
background-image: url('some url');
height: 100 px;
text-align: left;
border-style: none;
}
#navigation {
background-color: some color;
text-align: center;
border-top: 2px solid some color;
border-bottom: 2px solid some color;
height: 30 px;
}
#navigationElement {
display: inline-block;
padding-top: 2 px;
padding-left: 10 px;
padding-right: 10 px;
border-style: none;
}
#navigationElement a:link {
color: some color;
text-decoration: none;
}
#navigationElement a:hover {
color: some color;
font-weight: bold;
}
#headerImg {
background-image: url('some url');
height: 200 px;
text-align: left;
border-style: none;
}
#left {
background-color: some color;
width: 475 px;
float: left;
text-align: center;
border-style: none;
}
#leftElement {
background-color: some color;
padding: 40 px;
text-align: center;
border-style: none;
}
#right {
background-color: some color;
width: 475 px;
float: right;
text-align: center;
border-style: none;
}
#rightElement {
background-color: some color;
padding: 40 px;
text-align: center;
border-style: none;
}
#footer {
background-color: some color;
height: 40 px;
text-align: left;
border-style: none;
clear: both;
}
Here is the html code:
<body>
<div id="wrapper">
<div id="logo"></div>
<div id="navigation">
<div id="navigationElement">nav 1</div>
<div id="navigationElement">nav 2</div>
<div id="navigationElement">nav 3</div>
</div>
<div id="headerImg"></div>
<div id="bodyArea">
<div id="left">
<div id="leftElement">
left element text 1
</div>
<div id="leftElement">
left element text 2
</div>
</div>
<div id="right">
<div id="rightElement">
right element text 1
</div>
<div id="rightElement">
right element text 2
</div>
</div>
<div id="footer">some footer text</div>
</div>
</body>
It's probably because you are using spaces between values and px in height attributes (i.e height: 100 px; should be height: 100px;). Different browsers handle these kind of errors differently, so it's always a good idea to validate your css when you're having weird errors: http://jigsaw.w3.org/css-validator/
Remove the spaces between your pixel values.
height: 100 px; to height: 100px;