The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Cant get the text right
BizzyD
post Nov 14 2013, 05:56 PM
Post #1





Group: Members
Posts: 6
Joined: 14-November 13
Member No.: 19,984



Hello, I am currently making a User Control Panel. And I have some issues getting the text right.
I want the text to go next to the image, but it keeps going either under, or over. I have tried many different codes then the one I will provide with.

CODE
<html>
<head>
<title>Island Survival Roleplay</title>

<link href="./style/main.css" rel="stylesheet" type="text/css">

<script src="./includes/jquery-1.9.1.js" type="text/javascript"></script>

<script type="text/javascript">


</script>
</head>

<body>
<nav>
<ul>
<li><a href="./index.php">Home</a>
<li><a href="./logout.php">Logout</a>
</ul>
</nav>

<div class="container">
<div class="ribbon">Menu INC</div>
<img  src="SKINS/[Skin].jpg">
<div>
<h3>TEsting</h3>
</div>
</div>
</body>
</html>


And this is the style.css

CODE
body {
    background: #E3E3E3;
    font-family: Arial;

    margin: 0px;
}

nav {
    background: #000 repeat-x;
    height: 25px;
    margin-bottom: 15px;
}

nav ul {
    list-style: none;
}

nav ul li {
    padding: 3px 5px;
}

nav ul li a {
    text-decoration: none;
    color: white;
    transition: color .75s ease-in-out;
    -webkit-transition: color .75s ease-in-out;
    -moz-transition: color .75s ease-in-out;
}

nav ul li a:hover {
    color: #B5B5B5;
}

.container {
    width: 1000px;

    margin-left: auto;
    margin-right: auto;

    border-radius: 3px;

    background-color: white;

    padding: 5px 5px;

    border: 1px solid hsl(0, 0%, 77%);
}

.container table tr td {
    padding: 5px;
}

.login {
    text-align: center;
    background-color: hsl(0, 0%, 14%);
    width: 546px;
    margin-left: auto;
    margin-right: auto;
    border-radius:3px;

    padding: 25px 5px;
}

.login .text {
    border-radius: 2px;
    margin-bottom: 7px;
    padding: 2px;
    width: 290px;
    border: 1px solid hsl(0, 100%, 100%);
    box-shadow: 0px 0px 9px hsla(195, 100%, 50%, .8);
}

.success {
    margin-bottom: 12px;
    width: 300px;
    height: 25px;
    padding-top: 5px;
    background-color: hsla(120, 100%, 50%, .2);
    display: none;
    border: 1px solid #C4C4C4;
    border-radius: 3px;
    color:green;
    font-size: 15px;
}

.error {
    margin-bottom: 12px;
    width: 300px;
    height: 25px;
    padding-top: 5px;
    background-color: rgba(255, 0, 0, .2);
    display: none;
    border: 1px solid #C4C4C4;
    border-radius: 3px;
    color:red;
    font-size: 15px;
}

.ribbon {
    width: 100%;
    height: 35px;
    background: url('images/ribbon.png') repeat-x;
    text-align: center;
    color: hsl(0, 100%, 100%);
    font-size: 24px;
    font-weight: bold;
    padding-top: 1px;
    text-shadow: 0px 0px 1px hsl(0, 100%, 100%);
    }
}


No idea how to fix this. So any help is appreciated
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 14 2013, 07:01 PM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,186
Joined: 9-August 06
Member No.: 6



This text?
CODE
<div class="ribbon">Menu INC</div>
<img  src="SKINS/[Skin].jpg">


The text is in a DIV. The image is outside the DIV. Since DIV is a block level element the line will break before and after it. Place the image inside the DIV.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
BizzyD
post Nov 15 2013, 10:00 AM
Post #3





Group: Members
Posts: 6
Joined: 14-November 13
Member No.: 19,984



No not there:P

This text:

<div>
<h3>TEsting</h3>
</div>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 15 2013, 03:31 PM
Post #4


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,186
Joined: 9-August 06
Member No.: 6



H3 is also a block level element and the image is outside that block too.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
BizzyD
post Nov 15 2013, 05:27 PM
Post #5





Group: Members
Posts: 6
Joined: 14-November 13
Member No.: 19,984



I got it fixed smile.gif But I have a new problem.
I am trying to get a text next to the Character information but no idea how to do it. Either it gets under, or screws everything else up.

New code:

CODE
<html>
<head>
<title>Island Survival Roleplay</title>
<link href="./style/main.css" rel="stylesheet" type="text/css">

<script src="./includes/jquery-1.9.1.js" type="text/javascript"></script>

<script type="text/javascript">
</script>
</head>

<body>
<nav>
<ul>
<li><a href="./index.php">Home</a>
<li><a href="./logout.php">Logout</a>
</ul>
</nav>
<div class="container">
<div class="ribbon">Menu INC</div>
<div class="defbox">
<img src="SKINS/1.jpg" align="LEFT" />  
<div style="display:table-cell;">
<font size="2"> <b> Welcome [username] </b>
<br><br>
<b>Character Information</b><br><br>
<b>Level:</b> [Level]<br>
<b>Playing hours:</b> [RespectPoints]<br>
<b>Adminlevel:</b> [AdminLevel]<br>
<b>Helperlevel:</b> [HelperLevel]<br>
<b>VIP Level:</b> [Vip]<br>
<b>Account Locked:</b> [Banned] <br><br>
<b>Items</b><br></br>
<b>Fishingnet:</b> [FishingNet]<br>
<b>Fishingrod:</b> [FishingRod]<br>
<b>Heroin</b> [Heroin]<br>
<b>Matches:</b> [FireMatches]<br>
<b>Wood:</b> [Firewood]<br>
<b>Whiskey:</b> [Whiskey]<br>
<b>Mask</b> [Mask]<br>
</font>
</div>

</div>
</div>
</body>
</html>


This is how it looks:

IPB Image

I want to add more text.

this is the new css file

CODE

body {
    font-family: Arial;
    background-image:url('images/lost.jpg');
    background-repeat:no-repeat;
    background-size: cover;
}

nav {
    background: #000 repeat-x;
    height: 25px;
    margin-bottom: 15px;
}

nav ul {
    list-style: none;
}

nav ul li {
    padding: 3px 5px;
}

nav ul li a {
    text-decoration: none;
    color: white;
    transition: color .75s ease-in-out;
    -webkit-transition: color .75s ease-in-out;
    -moz-transition: color .75s ease-in-out;
}

nav ul li a:hover {
    color: #B5B5B5;
}

.container {
    width: 1000px;

    margin-left: auto;
    margin-right: auto;

    border-radius: 3px;

    background-color: white;

    padding: 5px 5px;

    border: 1px solid hsl(0, 0%, 77%);
}
.defbox
{
display:table-cell;
text-align:left;
font-size:14px;
width:400px;
padding-left:10px;
}
.defbox2
{
display:table-cell;
text-align:right;
font-size:14px;
width:400px;
padding-right:10px;
}
.container table tr td {
    padding: 5px;
}

.login {
    text-align: center;
    background-color: hsl(0, 0%, 14%);
    width: 546px;
    margin-left: auto;
    margin-right: auto;
    border-radius:3px;

    padding: 25px 5px;
}

.login .text {
    border-radius: 2px;
    margin-bottom: 7px;
    padding: 2px;
    width: 290px;
    border: 1px solid hsl(0, 100%, 100%);
    box-shadow: 0px 0px 9px hsla(195, 100%, 50%, .8);
}

.success {
    margin-bottom: 12px;
    width: 300px;
    height: 25px;
    padding-top: 5px;
    background-color: hsla(120, 100%, 50%, .2);
    display: none;
    border: 1px solid #C4C4C4;
    border-radius: 3px;
    color:green;
    font-size: 15px;
}

.error {
    margin-bottom: 12px;
    width: 300px;
    height: 25px;
    padding-top: 5px;
    background-color: rgba(255, 0, 0, .2);
    display: none;
    border: 1px solid #C4C4C4;
    border-radius: 3px;
    color:red;
    font-size: 15px;
}

.ribbon {
    width: 100%;
    height: 35px;
    background: url('images/ribbon.png') repeat-x;
    text-align: center;
    color: hsl(0, 100%, 100%);
    font-size: 24px;
    font-weight: bold;
    padding-top: 1px;
    text-shadow: 0px 0px 1px hsl(0, 100%, 100%);
    }
}


This post has been edited by BizzyD: Nov 15 2013, 05:28 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 15 2013, 06:02 PM
Post #6


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,186
Joined: 9-August 06
Member No.: 6



Do you mean like a second column?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
BizzyD
post Nov 15 2013, 06:06 PM
Post #7





Group: Members
Posts: 6
Joined: 14-November 13
Member No.: 19,984



Yea tongue.gif Been trying but cant figure it out. So any help would be appreciated

This post has been edited by BizzyD: Nov 15 2013, 06:40 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
BizzyD
post Nov 16 2013, 01:33 PM
Post #8





Group: Members
Posts: 6
Joined: 14-November 13
Member No.: 19,984



Nvm its solved!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 24th March 2019 - 04:09 AM